/* 女装男子部！ ― セーラー襟の紺・リボンのピンク・襟の白 */
:root{--navy:#27325c;--ink:#33304a;--pink:#e5457f;--pink-d:#c62f68;--sakura:#ffeef3;--cream:#fffdf9;--line:#ead9df;--mark:#fff1a6;--mint:#e6f6f1;--gray:#8d8794;
--round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;--body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:12px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:2;letter-spacing:.03em;padding-bottom:76px;overflow-wrap:anywhere}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:#1d5fbf;text-underline-offset:.2em}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.hd{background:var(--navy);border-bottom:6px double #fff;box-shadow:0 4px 0 var(--navy)}
.hd-in{max-width:960px;margin:auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{color:#fff;text-decoration:none;font-family:var(--round);line-height:1.3}
.logo b{display:block;font-size:26px;font-weight:900;letter-spacing:.06em}
.logo small{font-size:12px;opacity:.85}
.nav{display:none;gap:8px}
.nav a{color:var(--navy);background:#fff;text-decoration:none;font-family:var(--round);font-weight:700;padding:6px 16px;border-radius:999px;font-size:15px;line-height:1.8}
.nav a i{font-style:normal;margin-right:4px}
.bn{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:3px solid var(--navy);padding-bottom:env(safe-area-inset-bottom,0)}
.bn a{display:flex;flex-direction:column;align-items:center;padding:8px 2px 6px;color:var(--navy);text-decoration:none;font-family:var(--round);font-weight:700;font-size:13px;line-height:1.4}
.bn a+a{border-left:1px solid var(--line)}
.bn i{font-style:normal;font-size:22px;line-height:1.2}
.art{max-width:720px;margin:auto;padding:20px 18px 56px}
.bc{font-size:13px;color:var(--gray);display:flex;gap:8px;flex-wrap:wrap}
.bc a{color:var(--gray)}
h1{font-family:var(--round);font-weight:900;color:var(--navy);font-size:26px;line-height:1.55;margin:14px 0 4px;letter-spacing:.04em}
.prline{margin:0 0 10px;text-align:right;font-size:11px;line-height:1;color:#a69ea8;letter-spacing:.1em}
.hero{margin:0 0 28px}.hero img{width:100%;border-radius:18px;border:1px solid var(--line)}
.lead p,.bd p{margin:0 0 1.7em}
.bd h2,.rel h2,.k-list h2{font-family:var(--round);font-weight:900;font-size:22px;line-height:1.6;color:#fff;background:var(--navy);margin:72px 0 30px;padding:16px 18px 16px 30px;border-radius:6px;position:relative;outline:1px solid rgba(255,255,255,.9);outline-offset:-6px}
.bd h2::before,.rel h2::before,.k-list h2::before{content:"";position:absolute;left:-7px;top:50%;width:22px;height:22px;background:var(--pink);transform:translateY(-50%) rotate(45deg);border:3px solid #fff;border-radius:4px}
.bd h3{font-family:var(--round);font-weight:900;font-size:20px;line-height:1.6;color:var(--navy);margin:56px 0 22px;padding:4px 0 10px 16px;border-left:8px solid var(--pink);border-bottom:2px dashed var(--line)}
strong{color:var(--pink-d);font-weight:700}
mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:inherit;font-weight:700}
ul,ol{margin:0 0 1.9em;padding-left:1.5em}
li{margin:.5em 0}
li::marker{color:var(--pink);font-weight:700}
.toc{background:#fff;border:2px solid var(--navy);border-radius:14px;margin:34px 0 10px;padding:0 18px}
.toc summary{cursor:pointer;list-style:none;font-family:var(--round);font-weight:900;color:var(--navy);font-size:18px;padding:14px 0;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc-s::after{content:"＋ 開く";font-size:14px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 14px}
.toc[open] .toc-s::after{content:"－ 閉じる"}
.toc ol{list-style:none;margin:0;padding:6px 0 18px;border-top:1px dashed var(--line)}
.toc li{margin:0;line-height:1.6}
.toc a{display:block;padding:9px 4px;color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--line)}
.toc .t2 a{font-weight:700}.toc .t3 a{padding-left:1.4em;font-size:15px}.toc .t3 a::before{content:"・"}
.box{border-radius:14px;padding:22px 20px 6px;margin:0 0 2em;background:var(--sakura);border:1px solid var(--line)}
.box-t{font-family:var(--round);font-weight:900;color:var(--navy);margin:0 0 .8em!important;font-size:18px}
.box-check{background:var(--mint);border-color:#bfe3d8}
.box-warn{background:#fff7e0;border-color:#ecd9a0}
.box-warn .box-t::before{content:"⚠ "}
.box-point .box-t::before{content:"🎀 "}
.box-check .box-t::before{content:"✔ "}
.fig{margin:0 0 2em;text-align:center}
.fig img{border-radius:14px;border:1px solid var(--line);background:#fff}
.fig figcaption{font-size:14px;color:var(--gray);line-height:1.7;margin-top:8px}
.zoom a{display:block;position:relative}
.zoom-t{position:absolute;right:8px;bottom:8px;background:rgba(39,50,92,.88);color:#fff;font-size:13px;line-height:1;padding:8px 12px;border-radius:999px}
.zbox{position:fixed;inset:0;z-index:50;background:rgba(20,22,40,.94);overflow:auto;-webkit-overflow-scrolling:touch}
.zbox img{display:block;width:1400px;max-width:none;margin:56px 12px 12px}
.zbox button{position:fixed;top:8px;right:8px;font:700 16px var(--round);background:#fff;color:var(--navy);border:0;border-radius:999px;padding:10px 18px}
.tbl{overflow-x:auto;margin:0 0 2em;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px;line-height:1.7}
th{background:var(--navy);color:#fff;font-family:var(--round);padding:10px 12px;text-align:left;white-space:nowrap}
td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:#fff8fa}
.item{position:relative;background:#fff;border:2px solid var(--line);border-radius:18px;padding:26px 18px 20px;margin:0 0 2.2em;display:grid;gap:14px}
.pr{position:absolute;top:8px;right:12px;font-size:10px;line-height:1;color:#b3acb5;letter-spacing:.08em}
.item-img{display:block;text-align:center}
.item-img img{max-height:230px;width:auto;border-radius:10px}
.item-name{font-family:var(--round);font-weight:900;color:var(--navy);margin:0 0 6px!important;line-height:1.6;font-size:18px}
.item-note{margin:0 0 14px!important;font-size:15.5px;line-height:1.9}
.item-btns{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-family:var(--round);font-weight:900;border-radius:999px;line-height:1.4;padding:14px 8px;font-size:15px;color:#fff;min-height:52px}
.b-main{grid-column:1/-1;background:var(--pink);font-size:18px;padding:18px 16px;box-shadow:0 5px 0 var(--pink-d)}
.b-main::after{content:"▶";font-size:.7em;margin-left:.7em}
.b-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pink-d)}
.b-amz{background:#f29d1f;color:#231f20}.b-rak{background:#bf0000}.b-yah{background:#7b3fc4}
.item-btns .b-amz{grid-column:1/-1}.item-btns .b-amz:first-child{font-size:17px;padding:16px}
.b-sub{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.cta{position:relative;margin:0 0 2.2em!important;display:grid;padding-top:14px}
.cta .pr{top:0;right:6px}
.card{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px;margin:0 0 14px;text-decoration:none;color:var(--navy);font-family:var(--round);font-weight:700;line-height:1.6}
.card img{flex:0 0 112px;width:112px;height:72px;object-fit:cover;border-radius:10px}
.card small{display:block;color:var(--pink-d);font-size:12px}
.card-t::after{content:" ›";color:var(--pink)}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.jump a{background:var(--navy);color:#fff;text-decoration:none;font-family:var(--round);font-weight:700;border-radius:999px;padding:8px 18px;font-size:15px}
.home-h1{background:var(--navy);color:#fff;text-align:center;border-radius:14px;padding:26px 14px;font-size:23px;outline:1px solid #fff;outline-offset:-7px;margin-top:6px}
.sup{font-size:14px;color:var(--gray);margin-top:-1em!important}
.senpai{font-family:var(--round);font-weight:900;color:var(--pink-d);text-align:center;font-size:20px;margin:1.6em 0 .6em!important}
.twitter-tweet{margin:0 auto 1.4em!important;border:2px solid var(--line);border-radius:14px;padding:18px;background:#fff}
.concept{text-align:center;background:var(--sakura);border-radius:18px;padding:26px 14px;font-family:var(--round);font-weight:900;color:var(--navy);line-height:1.9;margin:0 0 2em}
.concept b{display:block;font-size:22px;color:var(--pink-d)}
.form label{display:block;font-family:var(--round);font-weight:900;color:var(--navy);margin:26px 0 6px}
.form input[type=text],.form input[type=email],.form textarea{width:100%;font:inherit;padding:14px;border:2px solid #b9b2c2;border-radius:12px;background:#fff}
.form textarea{min-height:200px}
.form .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form button{width:100%;border:0;cursor:pointer;margin-top:30px}
.form .must{background:var(--pink);color:#fff;font-size:12px;border-radius:6px;padding:2px 8px;margin-left:8px}
.msg-err{background:#fff0f0;border:2px solid #e06a6a;border-radius:12px;padding:14px 16px}
.ft{background:var(--navy);color:#fff;border-top:6px double #fff;margin-top:40px}
.ft-in{max-width:720px;margin:auto;padding:30px 18px 34px}
.ft-logo{font-family:var(--round);font-weight:900;font-size:20px;margin:0 0 10px}
.ft-nav{display:grid;gap:2px}.ft-nav a{color:#fff;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.2);text-decoration:none}
.ft-c{font-size:12px;opacity:.8;margin:18px 0 0}
@media(min-width:768px){
body{font-size:18px;padding-bottom:0}
.bn{display:none}.nav{display:flex}
h1{font-size:32px}.home-h1{font-size:30px}
.bd h2,.rel h2,.k-list h2{font-size:25px}.bd h3{font-size:22px}
.art{padding-top:30px}
.item{grid-template-columns:230px 1fr;align-items:center;padding:30px 26px 24px}
}
.yt{position:relative;display:block;aspect-ratio:16/9;width:100%;border:0;border-radius:14px;margin:0 0 2em;overflow:hidden;background:#111}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:50%;top:50%;width:72px;height:50px;margin:-25px 0 0 -36px;border-radius:14px;background:#f03;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.yt-play::after{content:"";position:absolute;left:28px;top:14px;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.yt-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.steps{display:grid;gap:12px;margin:0 0 2em}.steps a{display:block;background:#fff;border:2px solid var(--navy);border-radius:16px;padding:14px 18px;text-decoration:none;color:var(--navy);font-family:var(--round);font-weight:900;line-height:1.6}.steps small{display:block;color:var(--pink-d)}
.tw{max-width:550px;margin:0 auto 1.6em;text-align:center}
.tw-f{display:block;width:100%;height:600px;border:0;border-radius:14px;background:#fff}
.item.no-img{grid-template-columns:1fr}
.box li a,.tbl td a{font-weight:700}
.item-img img{max-width:100%;object-fit:contain}
.item-img{height:230px;display:flex;align-items:center;justify-content:center}
.item-img img{max-height:100%;width:auto;height:auto}
.tw-f{height:680px}
.item-img img{max-width:min(100%,260px)}
.say{display:flex;gap:16px;align-items:center;margin:0 0 2em}
.say>img{flex:0 0 66px;width:66px;height:66px;border-radius:50%;object-fit:cover;background:#fff}
.box-magic{background:#fffde4;border-color:#f3edb7;border-radius:6px}
.box>p:last-child,.box>ul:last-child,.box>ol:last-child{margin-bottom:.95em}
.say-b{position:relative;margin:0!important;background:#f9dcf0;border:1px solid #f9dcf0;border-radius:14px;padding:13px 18px;line-height:1.8;font-family:var(--round);font-weight:700;color:var(--ink)}
.say-b::before,.say-b::after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:9px solid transparent;border-left:0;border-right-color:#f9dcf0}
.say-b::after{border-width:8px;border-left:0;border-right-color:#f9dcf0;margin-right:-1px}
.say-b strong{color:inherit}
.say-ayaha .say-b{background:#e9effb;border-color:#cfdaf3}
.say-ayaha .say-b::before{border-right-color:#cfdaf3}
.say-ayaha .say-b::after{border-right-color:#e9effb}
.item-small{margin:-4px 0 14px!important;font-size:12.5px;line-height:1.7;color:var(--gray)}
.ex{background:#fff8fa;border:1px solid var(--line);border-radius:18px;padding:14px;margin:0 0 2.2em}
.ex figcaption{font-family:var(--round);font-weight:900;color:var(--navy);font-size:17px;line-height:1.6;margin:2px 2px 12px;text-align:left}
.ex figcaption span{display:inline-block;font-size:12px;border:1px solid #d9b9c6;border-radius:6px;padding:0 7px;margin-right:8px;background:#fff;color:#8a5a6d;vertical-align:2px}
.ex-p{display:grid;gap:12px}
.ex-c{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ex-c img{display:block;width:100%;height:auto;background:#fffaf6}
.ex .ex-b{padding:12px 14px 14px}
.ex p.ex-l{font-family:var(--round);font-weight:900;font-size:18px;line-height:1.5;color:var(--navy);margin:0 0 4px}
.ex p.ex-d{font-size:15.5px;line-height:1.8;margin:0;color:var(--ink)}
@media(min-width:768px){.ex-p{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media(min-width:768px){.ex.n4 .ex-p,.ex.n2 .ex-p{grid-template-columns:repeat(2,1fr)}}
.pics .ex-p{gap:8px;grid-template-columns:repeat(3,1fr)}
.pics.p2 .ex-p{grid-template-columns:repeat(2,1fr)}
.pics.p4 .ex-p{grid-template-columns:repeat(4,1fr);gap:6px}
.pics .ex-c{border-radius:10px}
.pics .ex-b{padding:7px 5px 9px;text-align:center}
.pics p.ex-l{font-size:14px;line-height:1.45;margin:0}
.pics.p2 p.ex-l{font-size:15.5px}
.pics.p4 p.ex-l{font-size:12.5px}
.pics p.ex-d{font-size:13px;line-height:1.6;margin-top:4px;text-align:left}
@media(min-width:768px){.pics .ex-p{grid-template-columns:repeat(3,1fr)}.pics.p4 .ex-p{grid-template-columns:repeat(4,1fr)}.pics p.ex-l{font-size:16px}.pics.p4 p.ex-l{font-size:15px}}
.ex p.ex-l.nb{word-break:keep-all}
.pics.p4 .ex-b{padding:6px 2px 8px}
.pics.p4 p.ex-l{font-size:11.5px;letter-spacing:0}
.pics p.ex-l{letter-spacing:.01em}
@media(min-width:768px){.pics.p4 p.ex-l{font-size:15px}}
table{min-width:0}
th{white-space:normal}
@media(max-width:767px){table{font-size:14px}th,td{padding:10px 8px}th{font-size:13.5px}}
th{word-break:keep-all}
@media(max-width:767px){.tbl table:has(th:nth-child(5)) :is(th,td){white-space:nowrap;padding:10px 5px;font-size:13.5px}}
@media(max-width:345px){.tbl table:has(th:nth-child(5)) :is(th,td){font-size:12px;padding:8px 3px;letter-spacing:0}}
/* 表の1列目が1文字ずつに折れないようにする */
.tbl table:not(:has(th:nth-child(5))) :is(th,td):first-child{min-width:5.5em}
/* 正方形の絵は、PCで大きくなりすぎないようにする */
.fig img[width="800"][height="800"]{max-width:min(100%,440px)}
/* 「探す」ボタンの枠（特定の商品ではなく、検索結果へ） */
.find{position:relative;background:#fff;border:2px dashed var(--line);border-radius:18px;padding:22px 18px 18px;margin:0 0 2.2em}
.find-t{font-family:var(--round);font-weight:700;color:var(--navy);margin:0 0 12px;line-height:1.6;padding-right:28px}
.find-t::before{content:"🔍 "}
.find .pr{position:absolute;right:12px;top:8px}
@media(min-width:768px){.find{padding:24px 26px 22px}.find .item-btns{grid-template-columns:repeat(3,1fr)}.find .item-btns .b-amz{grid-column:auto;font-size:inherit;padding:inherit}}
/* 縦長の絵は、高くなりすぎないようにする */
.fig img{max-height:560px;width:auto}
/* 体験記の中の、せりふ・箇条書きの枠（灰色） */
.box-talk{background:#f6f6f9;border-color:#e2e3ec;padding:18px 20px 2px}
.box-talk p{margin-bottom:.9em}

/* 商品カードの中の「公式ショップで買うと」 */
.item-why-t{font-family:var(--round);font-weight:900;color:var(--navy);margin:.2em 0 .3em!important;font-size:15px}
.item-why{margin:0 0 .8em;padding-left:1.3em;font-size:15px;line-height:1.75}
.item-why li{margin:0}
/* タイトルと導入文のあいだ（タイトル下のPR表記を外したぶんのすき間） */
.art>h1+.lead,.art>h1+.hero{margin-top:22px}
/* Xの投稿：続けて並んだものは、パソコン幅では横に2つずつ */
.tw-row{margin:0 0 1.6em}
.tw-row .tw:last-child{margin-bottom:0}
@media(min-width:768px){
.tw-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tw-row .tw{max-width:none;margin:0}
.tw-row .tw:only-child{grid-column:1/-1;width:100%;max-width:550px;margin:0 auto}
}
/* ===== パソコン幅のサイドバー（右側の案内）。スマホ・タブレットでは出さない ===== */
.side{display:none}
@media(min-width:1080px){
.lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;max-width:1120px;margin:auto;padding:0 24px}
.lay>main{min-width:0}
.lay .art{margin:0;padding-left:0;padding-right:0}
.hd-in{max-width:1120px;padding-left:24px;padding-right:24px}
.side{display:flex;flex-direction:column;gap:22px;padding:34px 0 56px;font-family:var(--round)}
.sd{background:#fff;border:2px solid var(--line);border-radius:16px;padding:18px 18px 10px}
.sd-t{margin:0 0 8px;font-weight:900;color:var(--navy);font-size:16px;line-height:1.5;padding-left:14px;position:relative}
.sd-t::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:5px;border-radius:3px;background:var(--pink)}
.sd a{display:block;padding:10px 18px 10px 2px;border-top:1px dashed var(--line);color:var(--navy);text-decoration:none;font-weight:700;font-size:14.5px;line-height:1.6;position:relative}
.sd a::after{content:"›";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--pink);font-size:18px}
.sd a:hover{color:var(--pink-d)}
.sd a.sd-big{border:0;background:var(--pink);color:#fff;border-radius:999px;text-align:center;padding:11px 26px 11px 16px;margin:4px 0 10px;box-shadow:0 3px 0 var(--pink-d)}
.sd a.sd-big::after{color:#fff;right:14px}
.sd a.sd-big:hover{color:#fff;filter:brightness(1.05)}
.sd a.sd-more{font-size:13.5px;color:var(--pink-d)}
.sd a.sd-pop{display:flex;gap:12px;align-items:center}
.sd-pop img{flex:0 0 72px;width:72px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.sd-cat{position:sticky;top:18px}
.sd-cat a{display:flex;align-items:center;gap:8px}
.sd-cat i{font-style:normal;font-size:17px;width:1.4em;text-align:center}
.sd-cat small{margin-left:auto;margin-right:8px;color:var(--gray);font-size:12.5px;font-weight:700}
.ft-in{max-width:1120px;padding-left:24px;padding-right:24px}
}
.item-name a{color:inherit;text-decoration:underline;text-decoration-color:var(--pink,#e2457f);text-underline-offset:4px}
h2 a,h3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--pink,#e2457f);text-underline-offset:5px}
.cover{margin:0 0 1.6em;text-align:center}
.cover img{height:auto;width:auto;max-width:min(60%,200px);max-height:290px;border-radius:6px;box-shadow:0 3px 14px rgba(40,50,90,.18)}
.cover figcaption{margin-top:8px;font-size:12px;line-height:1.6;color:var(--gray,#777)}