:root{
  --bg:#fffaf6; --ink:#4a3f3a; --muted:#776b64; --accent:#d9826b; --accent-d:#bf6a54;
  --soft:#f9e9e1; --line:#06c755; --card:#fff; --border:#efe1d8;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#1f1a18; --ink:#f2e8e2; --muted:#b8a9a1; --accent:#e89a84; --accent-d:#d9826b; --soft:#2c2421; --card:#262020; --border:#3a302c}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.8;padding-bottom:84px}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
header.site{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;max-width:720px;margin:0 auto}
header.site a.logo{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.08em}
header.site a.tel{font-size:14px;color:var(--accent-d);text-decoration:none}
.hero{padding:36px 0 28px}
.hero .tag{display:inline-block;background:var(--soft);color:var(--accent-d);font-size:13px;padding:2px 12px;border-radius:99px}
.hero h1{font-size:24px;line-height:1.5;margin:14px 0 10px}
.hero p{margin:0 0 20px;color:var(--muted)}
.btn{display:block;text-align:center;text-decoration:none;font-weight:700;padding:14px 16px;border-radius:12px;margin:10px 0}
.btn.line{background:var(--line);color:#fff}
.btn.tel{background:var(--card);color:var(--accent-d);border:1.5px solid var(--accent)}
.btn small{display:block;font-weight:400;font-size:12px;opacity:.9}
section{padding:28px 0}
section h2{font-size:20px;margin:0 0 14px;padding-left:12px;border-left:4px solid var(--accent)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:10px 0}
.card h3{margin:0 0 6px;font-size:16px}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding:8px 0 8px 28px;position:relative;border-bottom:1px dashed var(--border)}
ul.check li:before{content:"✓";position:absolute;left:4px;color:var(--accent-d);font-weight:700}
.grid{display:grid;gap:12px}
@media(min-width:560px){.grid.two{grid-template-columns:1fr 1fr}}
.choose a{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.choose a b{font-size:18px;display:block}
.choose a span{color:var(--muted);font-size:14px}
.choose a:after{content:"→";float:right;color:var(--accent-d)}
table.price{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
table.price td,table.price th{padding:12px;border-bottom:1px solid var(--border);text-align:left;font-size:15px}
table.price td:last-child{text-align:right;white-space:nowrap}
.todo{background:#fff3cd;color:#7a5b00;padding:0 4px;border-radius:4px;font-size:.9em}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0}
ol.steps li{counter-increment:s;padding:10px 0 10px 44px;position:relative}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:10px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;text-align:center;line-height:30px;font-weight:700}
details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:8px 0}
summary{font-weight:700;cursor:pointer}
.trust{background:var(--soft);border-radius:16px;padding:16px}
footer{padding:24px 16px 8px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--accent-d)}
.fixbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 12px;background:var(--bg);border-top:1px solid var(--border);z-index:9}
.fixbar a{flex:1;text-align:center;text-decoration:none;font-weight:700;padding:12px 8px;border-radius:10px;font-size:14px}
.fixbar .l{background:var(--line);color:#fff;flex:1.6}
.fixbar .t{border:1.5px solid var(--accent);color:var(--accent-d);background:var(--card)}
.choose h3.gt{font-size:15px;color:var(--accent-d);margin:18px 0 8px}
.kari{display:inline-block;margin-left:4px;font-size:10px;font-weight:400;color:#7a5b00;background:#fff3cd;border-radius:4px;padding:0 4px;vertical-align:middle}
.prof{display:flex;gap:14px;align-items:flex-start;font-size:14px}
.prof:after{content:none}
.prof img{width:110px;height:140px;object-fit:cover;object-position:50% 20%;border-radius:12px;flex:none}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.heroimg{width:100%;border-radius:16px;margin:0 0 14px;display:block;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}

/* ===== PC・タブレット幅のレイアウト(スマホは上のまま) ===== */
@media (min-width:820px){
  body{padding-bottom:76px;font-size:16px}
  .wrap{max-width:1080px;padding:0 40px}
  header.site{max-width:1080px;padding:18px 40px}
  header.site a.logo{font-size:18px}
  header.site a.tel{font-size:16px}
  section{padding:44px 0}
  section h2{font-size:24px;margin:0 0 22px}

  /* ヒーロー */
  .hero{padding:56px 0 40px}
  .hero h1{font-size:30px;line-height:1.5}
  .hero p{font-size:17px}
  .hero:has(.heroimg){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .hero:has(.heroimg)>*{grid-column:1}
  .hero:has(.heroimg)>.heroimg{grid-column:2;grid-row:1 / span 8;margin:0;aspect-ratio:4/3;border-radius:24px}
  .hero .tag{justify-self:start}
  .hero .btn{max-width:440px}
  .hero:not(:has(.heroimg)){text-align:center;padding:64px 0 48px}
  .hero:not(:has(.heroimg)) .btn{display:inline-block;min-width:280px;margin:8px 6px}

  /* カードの並び */
  .grid.two{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .choose .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .choose a{padding:24px}
  .choose a b{font-size:19px}
  .card{padding:20px}
  section>.card{max-width:900px}
  .gal{grid-template-columns:repeat(4,1fr);gap:14px}
  .gal img{border-radius:16px}
  .gal:has(>:nth-child(5)):not(:has(>:nth-child(6))){grid-template-columns:repeat(5,1fr)}
  .gal:has(>:nth-child(6)){grid-template-columns:repeat(3,1fr)}
  .gal:not(:has(>:nth-child(3))){grid-template-columns:repeat(2,1fr);max-width:560px}

  /* 読みやすい幅に整える */
  ul.check{columns:2;column-gap:48px}
  ul.check li{break-inside:avoid}
  .trust ul.check{columns:2}
  table.price{max-width:760px}
  details{max-width:860px}
  ol.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:20px}
  ol.steps li{padding:46px 0 0}
  ol.steps li:before{top:0}
  .prof{max-width:860px;gap:28px;font-size:16px;padding:24px}
  .prof img{width:180px;height:225px}
  .trust{padding:28px 32px}
  .card.prof,.trust{border-radius:20px}

  /* 画面下のバー */
  .fixbar{left:50%;right:auto;transform:translateX(-50%);width:min(760px,100%);border-radius:16px 16px 0 0;border:1px solid var(--border);border-bottom:none;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .fixbar a{font-size:15px;padding:13px 8px}
  footer{padding:40px 16px 20px}
}
@media (min-width:1200px){
  .hero h1{font-size:34px}
}

/* ===== 仕上げ(色・余白・質感) ===== */
:root{--band:#fbefe8;--shadow:0 2px 12px rgba(150,100,80,.08)}
@media (prefers-color-scheme:dark){:root{--band:#2a211e;--shadow:0 2px 12px rgba(0,0,0,.3)}}
h1,h2,h3,.logo{font-family:"Hiragino Maru Gothic ProN","Zen Maru Gothic","Yu Gothic","Noto Sans JP",sans-serif}
body{-webkit-font-smoothing:antialiased}
header.site{border-bottom:1px solid var(--border)}
.hero{padding:34px 16px 30px;margin:0 -16px;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.hero .tag{background:var(--bg);border:1px solid var(--border)}
.btn{border-radius:999px;transition:transform .15s,box-shadow .15s}
.btn.line{box-shadow:0 6px 16px rgba(6,199,85,.28)}
.btn:hover{transform:translateY(-1px)}
.btn.tel{background:var(--bg)}
section h2{letter-spacing:.03em}
.card{box-shadow:var(--shadow);border-radius:18px}
.choose a{border-radius:18px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.choose a:hover{transform:translateY(-2px);border-color:var(--accent)}
table.price{box-shadow:var(--shadow);border:1px solid var(--border)}
table.price tr:nth-child(even) td{background:var(--soft)}
table.price td:last-child{font-weight:700;color:var(--accent-d)}
.band{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);margin:24px 0}
.proof{display:grid;gap:18px}
.badgebox{background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.badgebox img{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.badgebox .fn{font-size:11px;line-height:1.6;color:#6d625c;margin:8px 4px 0}
.feature{display:grid;gap:18px;align-items:center}
.featimg img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:22px;display:block;box-shadow:var(--shadow)}
.feat h2{margin-top:0}
footer{background:var(--soft);margin-top:28px;padding:34px 16px 26px}
footer b{font-size:15px;color:var(--ink)}
footer p{margin:8px 0 0;line-height:1.8}
@media (min-width:820px){
  .hero{padding:56px 40px 44px;margin:0 -40px}
  .proof{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:36px;align-items:center}
  .feature{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:48px}
  .feat p{font-size:17px}
  section.band{padding:48px 0}
  footer{padding:44px 16px 32px}
}
@media (min-width:820px){
  .proof .trust ul.check,.feat ul.check{columns:1}
}
.hero p .sub{display:inline-block;margin:6px 0;color:var(--ink);font-weight:700;font-size:1.02em}

/* ===== 写真のサイズ調整(バッジ・シャンプー台) ===== */
.featimg img{aspect-ratio:4/3;object-position:40% 45%}
.badgebox{display:flex;flex-direction:column;justify-content:center}
.badgebox img{max-width:380px}
@media (min-width:820px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .feat h2{font-size:26px}
  .feat ul.check li{padding-top:12px;padding-bottom:12px}
  .proof{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px;align-items:stretch}
  .proof .trust{display:flex;flex-direction:column;justify-content:center}
}

/* ===== 写真を小さく ===== */
.badgebox img{max-width:260px;margin-left:auto;margin-right:auto}
.featimg img{max-width:100%}
@media (min-width:820px){
  .feature{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;justify-content:center}
  .proof{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px}
}
@media (max-width:819px){
  .featimg{max-width:320px;margin-left:auto;margin-right:auto}
}

/* ===== 入口カードの改行・スタッフ表記 ===== */
.grid a i{font-style:normal;display:inline-block}
.grid a b i{font-style:normal;display:inline-block}
.staffnote{margin:10px 0 0;text-align:center;font-weight:700;color:var(--accent-d)}
.trust li i{font-style:normal;display:inline-block}
ul.check li.etc{padding-left:4px;border-bottom:0;color:var(--muted)}
ul.check li.etc:before{content:none}
.legalnote{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.7}
@media (min-width:820px){.gal:has(>:nth-child(7)){grid-template-columns:repeat(4,1fr)}}

/* ===== mamairo ヒーロー ===== */
header.site a.logo small{font-size:11px;font-weight:400;margin-left:8px;letter-spacing:.12em;color:var(--muted)}
.brandhero{text-align:center}
.brandhero .wm{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 14px}
.brandhero .wm b{font-size:40px;font-weight:600;letter-spacing:.06em;color:#8b7a68;line-height:1.1}
.brandhero .wm span{font-size:13px;letter-spacing:.4em;color:var(--muted);padding-left:.4em}
.brandhero h1{font-size:30px;line-height:1.5;margin:6px 0 10px;border-top:1px solid var(--border);padding-top:16px}
.brandhero .subline{margin:0 0 12px;font-size:14px;color:var(--muted);letter-spacing:.08em}
.brandhero .lead2{margin:0 0 20px;color:var(--ink);line-height:1.9}
.brandhero .heroimg{margin:0 auto 18px}
@media (min-width:820px){
  .hero.brandhero:has(.heroimg){display:block;text-align:center;padding:60px 40px 48px}
  .hero.brandhero:has(.heroimg)>*{grid-column:auto}
  .hero.brandhero:has(.heroimg)>.heroimg{max-width:860px;aspect-ratio:16/8;margin:8px auto 24px;border-radius:28px;object-position:50% 40%}
  .brandhero .wm b{font-size:64px}
  .brandhero .wm span{font-size:15px}
  .brandhero h1{font-size:40px;max-width:560px;margin:10px auto 12px}
  .brandhero .subline{font-size:16px}
  .brandhero .lead2{font-size:17px}
  .brandhero .btn{display:inline-block;min-width:280px;margin:8px 6px}
}

/* ===== 施術写真を小さく ===== */
@media (min-width:820px){
  .gal{max-width:720px}
  .gal:has(>:nth-child(5)):not(:has(>:nth-child(6))){max-width:900px}
  .gal:has(>:nth-child(7)){max-width:840px}
  .gal:not(:has(>:nth-child(3))){max-width:440px}
}
.nb{display:inline-block}

/* ===== 改行の調整(1文字だけ残らないように) ===== */
body{word-break:auto-phrase;line-break:strict}
p,li,summary,td,h1,h2,h3,.card,small{text-wrap:pretty}
li,h1,h2,h3,summary,.card h3,.grid a b,.grid a span,.hero p,.subline,.lead2,.staffnote,.fn,.legalnote{text-wrap:balance}

/* ===== お問い合わせフォーム ===== */
.formlink{display:block;text-align:center;text-decoration:none;color:var(--ink);font-weight:700;padding:12px 16px;margin:6px 0;border-radius:999px;border:1px dashed var(--border);background:transparent}
.formlink small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.cform label{display:block;font-weight:700;margin:18px 0 6px;font-size:15px}
.cform .req{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:1px 8px;vertical-align:1px}
.cform input[type=text],.cform input[type=tel],.cform input[type=email],.cform input[type=date],.cform input[type=number],.cform select,.cform textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.cform .rad{display:flex;flex-wrap:wrap;gap:8px 18px}
.cform .rad label,.cform .chk{display:flex;align-items:center;gap:8px;font-weight:400;margin:6px 0}
.cform .chk{margin-top:20px}
.cform .hint{font-size:13px;color:var(--muted);margin:6px 0 0}
.cform .ferr{margin:16px 0 0;padding:10px 14px;border-radius:10px;background:var(--bg-danger,#fdecea);color:#a32d2d;font-size:14px}
.cform .fok{text-align:center;padding:24px 8px}
.cform button.btn{width:100%;margin-top:18px;border:0;cursor:pointer;font:inherit;font-weight:700}
@media (min-width:820px){.cform{max-width:640px;margin:0 auto;padding:28px 32px}}

/* フォームボタンを目立たせる */
.btn.form,.formlink{display:block;text-align:center;text-decoration:none;font-weight:700;color:#5c4a3d;background:#fff;border:2px solid #8b7a68;border-radius:999px;padding:14px 16px;margin:10px 0;box-shadow:0 4px 12px rgba(92,74,61,.12)}
.formlink small{display:block;font-weight:400;font-size:12px;color:#6b5a4c;opacity:1}
.formlink:hover{background:#f6ede6}
@media (min-width:820px){.formlink{max-width:440px;margin:12px auto}.hero:has(.heroimg) .formlink{max-width:440px}}
.smslink{display:none}
@media (hover:none) and (pointer:coarse){.smslink{display:block}}

/* ===== 連絡ボタン:LINEを主役に、ほかは小さく1列 ===== */
.othercta{text-align:center;font-size:13px;color:var(--muted);margin:16px 0 8px;letter-spacing:.06em}
.subcta{display:flex;gap:8px}
.sbtn{flex:1;display:block;text-align:center;text-decoration:none;font-weight:700;font-size:14px;color:#5c4a3d;background:#fff;border:1.5px solid #8b7a68;border-radius:999px;padding:11px 6px;white-space:nowrap}
.sbtn:hover{background:#f6ede6}
.subnote{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 0}
@media (min-width:820px){.subcta{max-width:440px;margin:0 auto}.othercta,.subnote{text-align:center}}
.brandhero .wm i{font-style:normal;font-size:14px;letter-spacing:.32em;color:var(--muted);padding-left:.32em;margin-bottom:2px}
@media (min-width:820px){.brandhero .wm i{font-size:16px}}
header.site a.logo{white-space:nowrap}
@media (max-width:420px){header.site a.logo{font-size:14px;letter-spacing:.04em}header.site a.logo small{display:none}}
.kind{font-size:.62em;font-weight:500;letter-spacing:.14em;color:var(--muted);margin-right:.4em;vertical-align:.12em}
.fintro{font-size:13px;line-height:1.8}
table.price tr.sub td{font-size:.92em;color:var(--muted)}
table.price tr.sub td:first-child{padding-left:2em}
table.price tr.gap td{padding:0;height:26px;border:0 !important;background:var(--bg) !important}
table.price tr.gap td{height:34px}
.travel{margin:10px 0 0;padding:0 4px;color:var(--muted);font-size:14px;font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.travel b{font-size:15px;font-weight:700;color:var(--ink)}
.travel span{font-size:12px;font-weight:400;color:var(--muted)}
.grid.area a b{font-size:17px}
@media (min-width:820px){.grid.area{grid-template-columns:repeat(4,1fr)}}

/* ===== コラム・プロフィール・定義文 ===== */
.define{margin:8px 0 0}.define p{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.9;color:var(--ink);margin:0}
.article .hero p.meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.abody{max-width:720px;margin:0 auto;font-size:16px;line-height:1.95}
.abody h2{font-size:20px;margin:30px 0 10px;border-left:4px solid var(--accent);padding-left:10px}
.abody p{margin:0 0 14px}.abody ul{margin:0 0 14px 1.2em;padding:0}.abody li{margin:4px 0}
.arel{max-width:720px;margin:0 auto}.arel h3{margin:0 0 6px}
.alist{list-style:none;padding:0;margin:0}.alist li{padding:10px 0;border-bottom:1px dashed var(--border)}.alist a{color:var(--ink);text-decoration:none;font-weight:700}.alist a:hover{color:var(--accent-d)}
.agrid{display:grid;gap:12px}.acard{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink)}.acard b{display:block;font-size:17px;margin:0 0 6px}.acard span{display:block;font-size:14px;color:var(--muted);line-height:1.7}.acard small{display:block;margin-top:8px;color:var(--muted)}
@media (min-width:820px){.agrid{grid-template-columns:1fr 1fr}.define p{font-size:15px}}

/* ===== CV改善: 安心チップ・季節の案内・フォーム折りたたみ ===== */
.chips{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px 8px}
.chips li{font-size:12.5px;font-weight:700;color:#a8563f;background:#fff;border:1px solid var(--accent);border-radius:99px;padding:5px 11px;white-space:nowrap}
.brandhero .chips{justify-content:center}
.season{margin:0 0 6px}.season p{margin:0;background:#fff;border:1px dashed var(--accent);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.8}.season b{display:block;color:var(--accent-d);margin-bottom:2px}.season a{color:var(--accent-d);font-weight:700}
.define{margin:28px 0 0}
.cform details.more{margin:12px 0 0}.cform details.more summary{cursor:pointer;color:var(--accent-d);font-weight:700;font-size:14px;list-style:none;padding:8px 0}.cform details.more summary::before{content:"＋ ";}
.cform details.more[open] summary::before{content:"－ ";}
@media (min-width:820px){.chips li{font-size:13px}.season p{display:flex;gap:16px;align-items:baseline}.season b{white-space:nowrap;margin:0}}

/* width/height属性を付けた画像は、CSSのaspect-ratioが効くよう高さをautoに戻す */
.gal img,.heroimg,.featimg img,.badgebox img{height:auto}