@charset "UTF-8";

/* =========================================
   整える食べ方 LP / アロマハウス ピュア・カタン
   ・モバイルファースト
   ・Webフォント不使用（表示速度優先）
   ・色はカンプから実測した値
   ========================================= */

:root{
  --pink:       #ee5e82;   /* カンプ実測 */
  --pink-dark:  #d94a70;
  --pink-pale:  #fdeff3;
  --line:       #06c655;   /* LINEグリーン（カンプ実測） */
  --line-dark:  #05a948;
  --green:      #8bb87a;   /* 見出し・アクセント */
  --green-dark: #6f9d5f;
  --green-bar:  #95bc85;   /* FAQ見出しバー */
  --green-pale: #f0f6ec;
  --gray:       #999999;   /* Beforeブロック */
  --text:       #3f3a37;
  --text-thin:  #6d6663;
  --cream:      #fcfbf9;
  --rule:       #e7e0da;

  --serif: "Hiragino Mincho ProN","HiraMinProN-W3","Yu Mincho","YuMincho","MS PMincho",serif;
  --sans:  "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;

  --w: 750px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--cream);
  line-height:1.9;
  font-size:15px;
  letter-spacing:.03em;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* LP本体を中央に */
body > header,
body > section,
body > footer{
  max-width:var(--w);
  margin-inline:auto;
  background:var(--cream);
}

.wrap{ padding:56px 24px; }

.note{
  font-size:11px;
  color:var(--text-thin);
  line-height:1.7;
  margin:26px 0 0;
}

/* ---------- 共通見出し ---------- */
.sec-title{
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  line-height:1.7;
  text-align:center;
  margin:0 0 34px;
  letter-spacing:.08em;
}
.sec-title--green{ color:var(--green-dark); }
.sec-title u{
  text-decoration:none;
  border-bottom:2px solid var(--green);
  padding-bottom:2px;
}

/* ---------- ボタン ---------- */
.btn{
  display:block;
  width:100%;
  max-width:430px;
  margin:38px auto 0;
  padding:17px 20px;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  font-size:14.5px;
  font-weight:700;
  line-height:1.5;
  color:#fff;
  letter-spacing:.02em;
  transition:transform .15s ease, background-color .15s ease;
}
.btn--line{ background:var(--line); box-shadow:0 4px 14px rgba(6,198,85,.26); }
.btn--pink{ background:var(--pink); box-shadow:0 4px 14px rgba(238,94,130,.26); }

@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .btn--line:hover{ background:var(--line-dark); }
  .btn--pink:hover{ background:var(--pink-dark); }
}

.btn-note{
  text-align:center;
  font-size:11.5px;
  color:var(--text-thin);
  margin:10px 0 0;
}

/* =========================================
   FV
   ・背景・装飾はすべてCSS＋インラインSVG（追加画像なし）
   ・写真はマスクで背景に溶かす
   ========================================= */
.fv{
  position:relative;
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(120% 78% at 76% 22%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(166deg, #f5f3e8 0%, #f2f7ec 44%, #fdfbf7 100%);
}

/* ---- ボタニカル装飾 ---- */
.fv__leaf{
  position:absolute;
  color:#a9c69a;
  opacity:.42;
  pointer-events:none;
  z-index:0;
}
.fv__leaf--tl{
  top:-26px; left:-30px;
  width:112px;
  transform:rotate(18deg);
}
.fv__leaf--br{
  left:-34px; bottom:180px;
  width:100px;
  transform:rotate(-150deg);
  opacity:.24;
}

.fv__inner{
  position:relative;
  z-index:1;
  padding:40px 24px 0;
}

.fv__text{ position:relative; z-index:2; }

/* ---- 上のひとこと ---- */
.fv__eyebrow{
  font-family:var(--serif);
  font-size:15.5px;
  font-weight:500;
  line-height:1.85;
  letter-spacing:.06em;
  color:var(--text);
  margin:0 0 16px;
}

/* ---- 主見出し ---- */
.fv__title{
  font-family:var(--serif);
  font-size:21px;
  font-weight:600;
  line-height:1.72;
  letter-spacing:.01em;
  margin:0 0 20px;
}
.fv__line{ display:block; }

.fv__em-pink,
.fv__em-green{
  font-style:normal;
  font-weight:600;
  font-size:1.17em;
}
.fv__em-pink{ color:var(--pink); }
.fv__em-green{
  color:var(--green-dark);
  background:linear-gradient(transparent 58%, rgba(139,184,122,.30) 58%, rgba(139,184,122,.30) 94%, transparent 94%);
  padding:0 .05em;
}

/* ---- リード（クリーム帯） ---- */
.fv__lead{
  display:inline-block;
  font-family:var(--serif);
  font-size:13px;
  line-height:1.7;
  letter-spacing:.04em;
  color:#7e6c4c;
  background:linear-gradient(90deg, #f5ecd6 0%, #faf4e4 100%);
  border-radius:999px;
  padding:8px 18px;
  margin:0 0 24px;
}
.fv__lead b{ color:#6f5c3a; font-weight:700; }

/* ---- CTA（注意書きをボタンに同居させる） ---- */
.fv__cta{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:430px;
  margin:0;
  padding:12px 18px 12px 12px;
  text-align:left;
  box-shadow:0 8px 20px rgba(6,198,85,.28);
}
.fv__cta-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:4px;
  background:#fff;
  color:var(--line);
  border-radius:999px;
  padding:5px 8px 5px 6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
}
.fv__cta-icon svg{ width:13px; height:13px; display:block; }
.fv__cta-label{
  flex:1 1 auto;
  min-width:0;          /* これがないとflexが縮まずボタンが画面外へ出る */
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.fv__cta-label small{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:0;
  opacity:.92;
}

/* ---- 写真：下端を背景に溶かす ----
   マスクはラッパー側に置く。img に transform を掛けるとマスクが一緒に反転するため。 */
.fv__photo{
  position:relative;
  margin:24px 0 0;
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 58%, rgba(0,0,0,0) 100%);
}
.fv__photo img{
  width:100%;
  aspect-ratio:600/580;
  object-fit:cover;
  object-position:center 16%;
}

/* =========================================
   共感
   ========================================= */
.empathy{ background:linear-gradient(180deg,#f7f2ec 0%, #fdfaf6 60%); }
.empathy .wrap{ background:transparent; }

.empathy__catch{
  font-family:var(--serif);
  font-size:16px;
  line-height:2.05;
  text-align:center;
  margin:0 0 34px;
}
.empathy__catch b{ color:var(--pink); font-weight:600; }

.empathy__card{
  background:#fff;
  padding:28px 24px;
  box-shadow:0 2px 16px rgba(0,0,0,.04);
}

.empathy__photo{
  margin:0 auto 22px;
  width:200px;
}
.empathy__photo img{ width:200px; height:200px; }

.empathy__body p{ margin:0 0 1.3em; font-size:14.5px; }
.empathy__body p:last-child{ margin-bottom:0; }

/* =========================================
   Before / After
   ========================================= */
.ba{ background:#fff; }
.ba .wrap{ background:#fff; }

.ba__grid{ display:grid; gap:2px; }

.ba__col{ padding:28px 24px; }
.ba__col--before{ background:var(--gray); color:#fff; }
.ba__col--after{ background:#fff; border:1px solid var(--green-pale); }

.ba__label{
  font-family:var(--serif);
  font-size:19px;
  text-align:center;
  margin:0 0 18px;
  letter-spacing:.1em;
}
.ba__col--before .ba__label{
  background:#fff; color:var(--text);
  border-radius:999px; padding:3px 0;
  max-width:170px; margin-inline:auto;
  font-size:17px;
}
.ba__col--after .ba__label{
  background:var(--green); color:#fff;
  border-radius:999px; padding:3px 0;
  max-width:170px; margin-inline:auto;
  font-size:17px;
}

.ba__col li{
  position:relative;
  padding:10px 0 10px 30px;
  font-size:14px;
  line-height:1.7;
}
.ba__col--before li::before{
  content:"";
  position:absolute; left:4px; top:1.2em;
  width:14px; height:1px;
  background:rgba(255,255,255,.7);
}
.ba__col--after li::before{
  content:"";
  position:absolute; left:6px; top:1.05em;
  width:10px; height:6px;
  border-left:2px solid var(--pink);
  border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);
}

/* =========================================
   プロフィール
   ========================================= */
.profile{ background:var(--cream); }

.profile__photo{ margin:0 0 30px; }
.profile__photo img{ width:100%; }

.profile__title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  line-height:1.85;
  text-align:center;
  color:var(--pink);
  margin:0 0 20px;
  letter-spacing:.06em;
}
.profile__title::after{
  content:"";
  display:block;
  width:70px; height:1px;
  background:var(--pink);
  margin:20px auto 0;
}

.profile__name{
  text-align:center;
  font-size:13px;
  line-height:1.9;
  margin:0 0 26px;
}
.profile__name b{ font-size:17px; letter-spacing:.12em; }

.profile__body{ text-align:center; }
.profile__body p{ margin:0 0 1.4em; font-size:14.5px; }
.profile__body p:last-child{ margin-bottom:0; }

/* =========================================
   REASON
   ========================================= */
.reason{ background:var(--cream); }

.reason__grid{ display:grid; gap:28px; }

.reason__num{
  font-family:var(--serif);
  font-size:22px;
  color:var(--pink);
  margin:0 0 6px;
  letter-spacing:.04em;
  line-height:1.3;
}
.reason__num .sc{ font-size:16px; letter-spacing:.06em; }
.reason__num b{ font-weight:500; font-size:24px; }

.reason__item h3{
  font-size:14.5px;
  font-weight:500;
  margin:0 0 12px;
  line-height:1.7;
}
.reason__item figure{ margin:0; }
.reason__item figure img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}

/* 偶数番は少し右にずらしてカンプの互い違いを再現 */
@media (min-width:520px){
  .reason__grid{ grid-template-columns:1fr 1fr; gap:22px 24px; }
  .reason__item:nth-child(even){ margin-top:44px; }
}

/* =========================================
   食事イメージ
   ========================================= */
.meal{ background:var(--cream); }

.meal__grid{ display:grid; gap:26px; }

.meal__item{ margin:0; text-align:center; }
.meal__label{
  font-family:var(--serif);
  font-size:17px;
  margin:0 0 10px;
  letter-spacing:.1em;
}
.meal__item img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.meal__item figcaption{
  padding-top:12px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-thin);
}

/* =========================================
   お客様の声
   ========================================= */
.voice{ background:#fff; }
.voice .wrap{ background:#fff; }

.voice__item{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--pink-pale);
  padding:22px 20px;
  margin-bottom:26px;
}
.voice__item--rev{ flex-direction:row-reverse; }

.voice__avatar{ flex:0 0 88px; text-align:center; }
.voice__avatar img{ width:88px; height:88px; }
.voice__avatar p{
  margin:6px 0 0;
  font-size:11px;
  color:var(--text-thin);
}

.voice__body{ flex:1 1 auto; }
.voice__lead{
  font-family:var(--serif);
  font-size:13.5px;
  background:#fff;
  padding:7px 12px;
  margin:0 0 10px;
  line-height:1.6;
}
.voice__body p{ font-size:13px; margin:0; }

/* =========================================
   なぜ無料
   ========================================= */
.why{ background:linear-gradient(180deg,#fdeef2 0%, #fdf6f4 100%); }
.why .wrap{ background:transparent; }

.why__box{ position:relative; }

.why__text{
  background:#fff;
  padding:34px 26px;
  text-align:center;
}
.why__title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  color:var(--pink);
  margin:0 0 20px;
  letter-spacing:.08em;
  line-height:1.7;
}
.why__text p{ margin:0; font-size:14px; }

.why__photo{
  margin:-18px 0 0;
  padding:0 30px;
}
.why__photo img{
  width:100%;
  box-shadow:0 6px 22px rgba(0,0,0,.10);
}

/* =========================================
   LINE登録後の流れ
   ========================================= */
.flow{ background:#fff; }
.flow .wrap{ background:#fff; }

.flow__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.flow__list img{ width:100%; }

/* =========================================
   FAQ
   ========================================= */
.faq{ background:var(--green-pale); }
.faq .wrap{ background:transparent; }

.faq__item{
  margin-bottom:20px;
  background:rgba(255,255,255,.85);
}
.faq__item summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:14px 46px 14px 20px;
  background:var(--green-bar);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  line-height:1.6;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"";
  position:absolute; right:20px; top:50%;
  width:9px; height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.faq__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }

.faq__a{ padding:20px; }
.faq__a p{ margin:0; font-size:13.5px; line-height:1.9; }
.faq__a b{ color:var(--green-dark); }

/* =========================================
   ラストCTA
   ========================================= */
.last{
  position:relative;
  background:#fdf7f3;
}
.last__inner{
  position:relative;
  padding:60px 24px 46px;
}
/* スマホでは写真を実要素として下に出す */
.last__photo img{ width:100%; }
.last__catch{
  font-family:var(--serif);
  font-size:18px;
  line-height:2;
  margin:0;
  letter-spacing:.04em;
}
.last__catch b{ color:var(--pink); font-size:20px; font-weight:600; }

/* =========================================
   フッター
   ========================================= */
.footer{
  padding:36px 24px;
  text-align:center;
  background:#fff;
  border-top:1px solid var(--rule);
  font-size:12px;
  color:var(--text-thin);
}
.footer__name{
  font-family:var(--serif);
  font-size:15px;
  color:var(--text);
  margin:0 0 4px;
}
.footer__addr{ margin:0 0 18px; }
.footer__links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 18px; margin-bottom:18px;
}
.footer__links a{ text-decoration:none; border-bottom:1px solid var(--rule); }

/* 受講生向けの導線。目立たせず、探せば見つかる位置に */
.footer__member{ margin:0 0 16px; font-size:11.5px; }
.footer__member a{
  text-decoration:none;
  color:var(--green-dark);
  border:1px solid var(--green-pale);
  border-radius:999px;
  padding:5px 16px;
  display:inline-block;
  line-height:1.7;
}

.footer__copy{ margin:0; font-size:11px; }

/* =========================================
   追従CTA（スマホのみ）
   ========================================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--rule);
}
.sticky-cta .btn{
  margin:0 auto; padding:14px 16px; font-size:13.5px; box-shadow:none;
}
.footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

/* =========================================
   PC
   ========================================= */
@media (min-width:768px){
  body{ background:#f4efe9; font-size:16px; }

  .wrap{ padding:80px 56px; }
  .sec-title{ font-size:25px; margin-bottom:44px; }

  /* FV：左テキスト＋右写真
     ヒーローだけ 960px まで広げる。750px だと見出しが折り返して窮屈になるため。 */
  .fv{ max-width:960px; }

  .fv__inner{
    position:relative;
    max-width:960px;
    margin-inline:auto;
    padding:70px 56px 66px;
    min-height:560px;
    display:flex;
    align-items:center;
  }
  .fv__text{ max-width:56%; }

  /* 768〜960px では FV 幅が可変。文字サイズを追従させないと見出しが折り返す */
  .fv__eyebrow{ font-size:clamp(15px, 1.9vw, 18px); margin-bottom:20px; }
  .fv__title{ font-size:clamp(22px, 2.9vw, 28px); margin-bottom:26px; }
  .fv__lead{ font-size:clamp(12.5px, 1.5vw, 14px); padding:10px 24px; margin-bottom:30px; }

  .fv__cta{ max-width:410px; gap:12px; padding:15px 24px 15px 16px; }
  .fv__cta-icon{ padding:5px 10px 5px 8px; font-size:11px; }
  .fv__cta-icon svg{ width:15px; height:15px; }
  .fv__cta-label{ font-size:clamp(13px, 1.5vw, 14.5px); }
  .fv__cta-label small{ font-size:11px; }

  .fv__photo{
    position:absolute;
    top:0; right:0; bottom:0;
    width:44%;
    margin:0;
    z-index:1;
    /* 左端は完全に消し、上下はやわらかく落とす。右端だけはコンテナ端で断つ */
    -webkit-mask-image:radial-gradient(74% 84% at 72% 40%, #000 42%, rgba(0,0,0,0) 88%);
            mask-image:radial-gradient(74% 84% at 72% 40%, #000 42%, rgba(0,0,0,0) 88%);
  }
  .fv__photo img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-position:50% 14%;
    /* 元写真は被写体が左寄り。左右反転して人物を右へ寄せ、
       空いた左側（壁・観葉植物）を background へ溶かす。
       視線も本文側を向くのでコピーに目が流れる。 */
    transform:scaleX(-1);
  }

  .fv__leaf--tl{ top:-30px; left:-24px; width:150px; }
  .fv__leaf--br{ left:-26px; bottom:-44px; width:130px; opacity:.2; }

  /* 共感カード：本文左＋写真右 */
  .empathy__card{
    display:flex;
    align-items:center; gap:30px;
    padding:36px 34px;
  }
  .empathy__photo{ flex:0 0 220px; margin:0; width:220px; }
  .empathy__photo img{ width:220px; height:220px; }
  .empathy__body{ flex:1 1 auto; }

  .ba__grid{ grid-template-columns:1fr 1fr; gap:0; }

  /* プロフィール：写真左＋本文右 */
  .profile .wrap{ display:flex; align-items:center; gap:40px; }
  .profile__photo{ flex:0 0 300px; margin:0; }
  .profile__text{ flex:1 1 auto; }
  .profile__title{ font-size:23px; }

  .voice__lead{ font-size:15px; }
  .meal__grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .flow__list{ grid-template-columns:repeat(4,1fr); gap:10px; }

  .why__box{ display:flex; align-items:center; }
  .why__text{ flex:1 1 auto; text-align:left; padding:40px 32px; }
  .why__photo{ flex:0 0 300px; margin:0 0 0 -40px; padding:0; }

  /* PCでは写真を背景に回して文字を重ねる */
  .last{ background:#fdf7f3 url("img/last.jpg") right center/cover no-repeat; }
  .last::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(255,255,255,.94) 45%, rgba(255,255,255,.5) 100%);
  }
  .last__photo{ display:none; }
  .last__inner{ padding:80px 48px; max-width:62%; }
  .last__catch{ font-size:22px; }
  .last__catch b{ font-size:24px; }
  .last .btn{ margin-left:0; }
  .last .btn-note{ text-align:left; padding-left:20px; }

  .sticky-cta{ display:none; }
  .footer{ padding-bottom:44px; }
}

/* =========================================
   規約系ページ（プライバシー／特商法）
   ========================================= */
.legal{
  max-width:var(--w);
  margin:0 auto;
  padding:40px 24px 70px;
  background:#fff;
  min-height:100vh;
}
.legal__draft{
  background:#fff7e2;
  color:#8a6d1f;
  font-size:13px;
  line-height:1.8;
  padding:14px 18px;
  border-radius:4px;
  margin:0 0 36px;
}
.legal__title{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  margin:0 0 32px;
  letter-spacing:.08em;
}
.legal h2{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  margin:34px 0 12px;
  padding-left:12px;
  border-left:3px solid var(--green);
}
.legal p{ font-size:14.5px; margin:0 0 1em; }
.legal ul{ margin:0 0 1em; }
.legal ul li{
  position:relative;
  padding-left:20px;
  font-size:14.5px;
  margin-bottom:6px;
}
.legal ul li::before{
  content:"";
  position:absolute; left:4px; top:1em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
}
.legal__dl{ margin:0; font-size:14.5px; }
.legal__dl dt{
  font-weight:700;
  color:var(--green-dark);
  margin-top:18px;
}
.legal__dl dd{ margin:2px 0 0; padding:0; }
.legal__date{ margin-top:36px; font-size:13px; color:var(--text-thin); }
.legal__back{ margin-top:44px; }
.legal__back a{ font-size:13px; color:var(--green-dark); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
}