/* imacono トップ改善版 CSS（SWELL子テーマ style.css または 追加CSS に追記して使用） */
:root{
  --mint:#71c6c1;        /* 現行サイトのメインカラー */
  --mint-deep:#3f9c97;
  --mint-ink:#2b6f6b;
  --mint-bg:#eef8f7;
  --mint-line:#cfe9e7;
  --cream:#fbf8f3;
  --coral:#e9876a;       /* イラストの服色から抽出したアクセント */
  --coral-bg:#fdf0ea;
  --yellow:#f3d25f;
  --ink:#333;            /* 現行サイトの本文色 */
  --muted:#777;
  --line:#e8e4de;
  --white:#fff;
  --line-green:#06C755;
  --radius:18px;
  --shadow:0 10px 30px rgba(43,111,107,.10);
  --font-head:"fot-tsukuardgothic-std","Zen Maru Gothic","游ゴシック体","Yu Gothic",sans-serif;
  --font-body:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --font-en:"Poiret One",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:500;color:var(--ink);background:var(--white);line-height:2;font-size:16px;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.head{font-family:var(--font-head);font-weight:700;line-height:1.55;letter-spacing:.06em}
.en{font-family:var(--font-en);font-weight:400;letter-spacing:.12em}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:110px 0}

/* セクション見出し：現行サイトの「英字大＋日本語小」の型を継承 */
.sec-head{text-align:center;margin-bottom:56px}
.sec-head .en{display:block;font-size:clamp(36px,5vw,52px);color:var(--ink);line-height:1.1}
.sec-head .ja{display:block;font-family:var(--font-head);font-size:14px;color:var(--mint-ink);margin-top:10px;letter-spacing:.2em}
.sec-head h2{font-size:clamp(22px,3vw,28px);margin-top:18px}
.sec-head p{color:var(--muted);margin-top:14px;font-size:15px}
.sec-head::after{content:"";display:block;width:40px;height:1px;background:var(--ink);margin:26px auto 0}
.sec-head.left{text-align:left}
.sec-head.left::after{margin-left:0}

/* ヘッダー */
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}
.header.scrolled,.header:hover{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
.header .inner{display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 32px}
.header .logo img{height:44px;width:auto}
.gnav{display:flex;gap:30px;list-style:none;font-size:13px}
.gnav a{text-decoration:none;display:flex;flex-direction:column;align-items:center;line-height:1.3}
.gnav a .en{font-size:16px;letter-spacing:.06em}
.gnav a small{font-size:10px;color:var(--muted)}
.gnav a:hover .en{color:var(--mint-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;text-decoration:none;font-weight:700;transition:.25s;white-space:nowrap;font-family:var(--font-head)}
.btn-line{background:var(--line-green);color:#fff;padding:13px 28px}
.btn-line:hover{background:#05b34c;transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);padding:12px 30px;background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-lg{padding:20px 44px;font-size:17px}
.line-ico{width:22px;height:22px;flex:none}
.arrow::after{content:"";width:18px;height:1px;background:currentColor;display:inline-block;margin-left:6px;position:relative;top:-1px}

/* ① フルワイド ヒーロー */
.hero{position:relative;padding:0;min-height:clamp(640px,86vh,800px);display:flex;align-items:center;overflow:hidden;background:var(--mint-bg)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:18% 30%;animation:zoom 14s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,0) 52%)}
.hero .inner{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:120px 48px 64px;display:flex;justify-content:flex-end}
.hero-copy{max-width:440px}
.hero .area{font-size:13px;color:var(--mint-ink);letter-spacing:.2em;display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero .area::before{content:"";width:28px;height:1px;background:var(--mint-ink)}
.hero h1{font-size:clamp(28px,3.2vw,42px);line-height:1.5}
.hero h1 em{font-style:normal;color:var(--mint-deep)}
.hero .lead{margin:22px 0 26px;font-size:15px;line-height:2.1}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;list-style:none}
.badges li{border:1px solid var(--mint-line);background:rgba(255,255,255,.8);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.badges li b{color:var(--coral);font-family:var(--font-head)}
.hero .note{font-size:12px;color:var(--muted);margin-top:14px}
.hero .brand-en{position:absolute;left:48px;bottom:36px;font-family:var(--font-en);font-size:clamp(48px,7vw,104px);color:#fff;line-height:1;text-shadow:0 2px 24px rgba(0,0,0,.18);letter-spacing:.04em}
.hero .brand-en small{display:block;font-size:16px;letter-spacing:.3em;margin-top:10px}
.scroll{position:absolute;right:28px;bottom:0;writing-mode:vertical-rl;font-family:var(--font-en);font-size:12px;letter-spacing:.3em;padding-bottom:86px}
.scroll::after{content:"";position:absolute;bottom:0;left:50%;width:1px;height:70px;background:var(--ink);animation:line 2s infinite}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* お知らせ（現行の News を1行で） */
.news-bar{padding:0;border-bottom:1px solid var(--line)}
.news-bar .wrap{display:flex;align-items:center;gap:28px;padding:22px 24px;font-size:14px}
.news-bar .en{font-size:20px}
.news-bar time{color:var(--muted);font-size:13px}
.news-bar a{text-decoration:none}
.news-bar .all{margin-left:auto;font-size:13px}

/* ② コンセプト（フルワイド写真帯） */
.concept{position:relative;padding:0}
.concept .photo{height:clamp(320px,46vw,560px);position:relative;overflow:hidden}
.concept .photo img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.concept .card{position:relative;max-width:760px;margin:-140px auto 0;background:#fff;padding:64px 64px 56px;text-align:center;border-radius:4px}
.concept .card .en{font-size:clamp(34px,4.6vw,48px);display:block;line-height:1.1}
.concept .card h2{font-size:clamp(20px,2.6vw,26px);margin:22px 0 22px}
.concept .card p{font-size:15px;line-height:2.2}

/* ③ 悩み */
.worry{background:var(--cream)}
.worry-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.worry-list li{background:#fff;border-radius:6px;padding:24px 24px 24px 58px;position:relative;font-size:15px}
.worry-list li::before{content:"";position:absolute;left:22px;top:30px;width:20px;height:20px;border-radius:50%;border:1px solid var(--mint)}
.worry-list li::after{content:"";position:absolute;left:29px;top:34px;width:5px;height:9px;border:solid var(--mint-deep);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.worry .answer{text-align:center;margin-top:48px;font-family:var(--font-head);font-size:clamp(18px,2.4vw,22px)}
.worry .answer b{color:var(--mint-deep);font-weight:700}

/* ④ 強み：写真と文章の交互レイアウト */
.reason{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;margin-bottom:96px}
.reason:nth-child(even){grid-template-columns:1fr 1.15fr}
.reason:nth-child(even) .ph{order:2}
.reason .ph{position:relative}
.reason .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.reason .ph::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--mint-bg);z-index:-1;border-radius:4px}
.reason:nth-child(even) .ph::before{inset:18px 18px -18px -18px}
.reason .no{font-family:var(--font-en);font-size:64px;color:var(--mint);line-height:1}
.reason h3{font-size:clamp(20px,2.4vw,24px);margin:10px 0 18px}
.reason p{font-size:15px}
.reasons-wrap{position:relative;z-index:0}
.mini-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mini{background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px 26px;text-align:center}
.mini .ic{width:86px;height:86px;border-radius:50%;background:var(--mint-bg);display:grid;place-items:center;margin:0 auto 14px;overflow:hidden}
.mini .ic img{height:74px;width:auto}
.mini .no{font-family:var(--font-en);color:var(--mint);font-size:22px}
.mini h3{font-size:17px;margin:4px 0 10px}
.mini p{font-size:14px;text-align:left}

/* ⑤ 初回体験 */
.first{background:var(--mint-bg)}
.first-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.price-card{background:#fff;border-radius:6px;padding:40px 36px;position:relative}
.price-card .tag{position:absolute;top:0;left:36px;transform:translateY(-50%);background:var(--ink);color:#fff;font-size:12px;letter-spacing:.15em;padding:5px 16px;border-radius:999px}
.price-card.kids .tag{background:var(--coral)}
.price-card h3{font-size:19px;display:flex;align-items:center;gap:14px;margin-bottom:16px}
.price-card h3 img{width:58px;height:58px;border-radius:50%;background:var(--mint-bg);object-fit:contain;padding:4px}
.price-table{width:100%;border-collapse:collapse;font-size:15px}
.price-table th,.price-table td{padding:14px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.price-table td{text-align:right;white-space:nowrap}
.price-table s{color:var(--muted);font-size:13px;margin-right:8px}
.price-table strong{color:var(--coral);font-size:22px;font-family:var(--font-head)}
.first .more{text-align:center;margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.tax{font-size:12px;color:var(--muted);margin-top:12px}

/* ⑥ 光脱毛（フルワイド分割） */
.method{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.method .ph img{width:100%;height:100%;object-fit:cover}
.method .txt{padding:96px clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:center;background:var(--cream)}
.method h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:20px}
.method ul{list-style:none;margin:22px 0}
.method li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.method li::before{content:"";position:absolute;left:4px;top:24px;width:10px;height:10px;border-radius:50%;background:var(--mint)}
.method .small{font-size:12px;color:var(--muted);line-height:1.9}

/* ⑦ お客様の声 */
.voice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.voice-grid figure{background:#fff;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.voice-grid figcaption{padding:14px 16px;font-size:13px;line-height:1.7}
.voice-grid figcaption b{display:block;color:var(--mint-ink)}
.voice .more{text-align:center;margin-top:40px}

/* ⑧ オーナー */
.owner{background:var(--cream)}
.owner .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.owner img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;object-position:46% center}
.owner h2{font-size:clamp(22px,2.6vw,26px);margin-bottom:8px}
.owner .role{color:var(--mint-ink);font-size:14px;margin-bottom:20px;display:block}
.owner p+p{margin-top:14px}
.owner .sign{font-family:var(--font-en);font-size:28px;margin-top:20px}

/* ⑨ 流れ */
.flow-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;counter-reset:s;border-top:1px solid var(--line)}
.flow-list li{padding:34px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow-list li:first-child{border-left:1px solid var(--line)}
.flow-list li::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-en);color:var(--mint);font-size:44px;line-height:1;display:block}
.flow-list h3{font-size:17px;margin:14px 0 8px}
.flow-list p{font-size:14px}
.kids-note{margin-top:36px;background:var(--coral-bg);border-radius:6px;padding:24px 30px;display:flex;gap:20px;align-items:center;font-size:15px}
.kids-note img{width:58px;flex:none}
.kids-note b{color:var(--coral)}

/* ⑩ FAQ */
.faq{background:var(--mint-bg)}
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.faq-tabs button{font:inherit;font-size:13px;border:1px solid var(--mint-ink);color:var(--mint-ink);background:#fff;border-radius:999px;padding:6px 18px;cursor:pointer}
.faq-tabs button.on{background:var(--mint-ink);color:#fff}
.faq-list{max-width:860px;margin:0 auto}
.faq-group h3{font-size:16px;color:var(--mint-ink);margin:28px 0 12px;padding-left:14px;border-left:3px solid var(--mint)}
.faq details{background:#fff;border-radius:6px;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 62px;font-weight:700;position:relative;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:22px;top:16px;font-family:var(--font-en);font-size:24px;color:var(--mint-deep)}
.faq summary::after{content:"";position:absolute;right:26px;top:28px;width:10px;height:10px;border:solid var(--ink);border-width:0 1px 1px 0;transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 30px 24px 62px;position:relative;font-size:15px}
.faq .a::before{content:"A";position:absolute;left:23px;top:-6px;font-family:var(--font-en);font-size:24px;color:var(--coral)}

/* ⑪ コラム */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{border-top:1px solid var(--ink);padding:22px 4px;text-decoration:none;display:block;transition:.2s}
.post:hover h3{color:var(--mint-deep)}
.post .cat{font-size:12px;color:var(--mint-ink);letter-spacing:.1em}
.post h3{font-size:16px;margin-top:8px;line-height:1.7}
.post time{font-size:12px;color:var(--muted);display:block;margin-top:10px}
.sample-mark{font-size:11px;color:var(--coral);margin-left:6px}
.blog .more{text-align:center;margin-top:40px}

/* ⑫ アクセス */
.access .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.info{width:100%;border-collapse:collapse}
.info th,.info td{padding:16px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px;font-weight:500}
.info th{width:28%;color:var(--mint-ink);white-space:nowrap;font-family:var(--font-head)}
.map{border-radius:6px;overflow:hidden;background:var(--mint-bg);aspect-ratio:4/3;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;padding:20px}

/* ⑬ 最終CTA（フルワイド写真） */
.cta-final{position:relative;color:#fff;text-align:center;padding:130px 0;overflow:hidden}
.cta-final .bg{position:absolute;inset:0}
.cta-final .bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.cta-final .bg::after{content:"";position:absolute;inset:0;background:rgba(43,111,107,.72)}
.cta-final .wrap{position:relative}
.cta-final .en{font-size:clamp(40px,6vw,64px);display:block;line-height:1}
.cta-final h2{font-size:clamp(20px,3vw,28px);margin:20px 0 12px}
.cta-final p{margin-bottom:34px}
.cta-final .sub{font-size:13px;margin-top:18px;opacity:.9}

footer{background:#edf7f5;padding:56px 0 110px;text-align:center;font-size:12px;color:var(--muted)}
footer img{height:38px;width:auto;margin:0 auto 18px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-bottom:20px;font-size:13px}
footer nav a{text-decoration:none;color:var(--ink)}

.fixed-cta{display:none}
.sample-banner{position:fixed;left:16px;bottom:16px;z-index:70;background:rgba(51,51,51,.88);color:#fff;font-size:12px;padding:8px 14px;border-radius:999px}

/* スクロールで出現 */
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none}.hero-bg img{animation:none}}

@media (max-width:960px){
  .gnav{display:none}
  .header{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
  .header .inner{height:64px;padding:0 16px}
  .header .logo img{height:34px}
  .hero{min-height:auto;display:block;background:#fff}
  .hero h1{font-size:28px}
  .hero-bg{position:relative;height:62vh;min-height:380px}
  .hero-bg img{object-position:36% 30%}
  .hero-bg::after{background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 35%)}
  .hero .brand-en{display:none}
  .hero .inner{padding:0 20px 56px;display:block;margin-top:-40px}
  .hero-copy{max-width:none}
  .scroll{display:none}
  section{padding:80px 0}
  .wrap{padding:0 20px}
  .news-bar .wrap{flex-wrap:wrap;gap:6px 16px}
  .news-bar .all{margin-left:0}
  .concept .card{margin:-60px 16px 0;padding:44px 24px 40px}
  .worry-list,.mini-points,.posts{grid-template-columns:1fr}
  .reason,.reason:nth-child(even){grid-template-columns:1fr;gap:28px;margin-bottom:72px}
  .reason:nth-child(even) .ph{order:0}
  .first-grid,.owner .wrap,.access .wrap{grid-template-columns:1fr;gap:36px}
  .method{grid-template-columns:1fr}
  .method .ph img{aspect-ratio:3/2}
  .method .txt{padding:64px 20px}
  .voice-grid{grid-template-columns:1fr 1fr;gap:12px}
  .flow-list{grid-template-columns:1fr 1fr}
  .flow-list li:nth-child(3){border-left:1px solid var(--line)}
  .price-card{padding:36px 20px 24px}
  .kids-note{flex-direction:column;align-items:flex-start}
  .fixed-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:0 -1px 0 var(--line)}
  .fixed-cta a{flex:1;padding:13px 10px;font-size:14px}
  .fixed-cta .btn-ghost{flex:.6}
  .sample-banner{position:static;display:block;border-radius:0;text-align:center;margin-top:64px;font-size:11px}
}
@media (max-width:480px){
  .flow-list{grid-template-columns:1fr}
  .flow-list li{border-left:1px solid var(--line)}
  .voice-grid{grid-template-columns:1fr 1fr}
}