/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --white:      #FAFAFA;
  --off-white:  #F5F5F3;
  --light:      #EDEDEB;
  --border:     #DDDBD6;
  --mid:        #B0ADA6;
  --gray:       #8A8780;
  --dark:       #555249;
  --text:       #3C3A35;
  --text-sub:   #6B6860;
  --black:      #2A2824;

  --line-green: #06C755;
  --line-green-d: #05A548;

  --serif:  'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  --max-w:  600px;
  --pad:    clamp(20px, 6vw, 48px);
  --sec-py: clamp(56px, 10vw, 100px);
}

html {
  /*
   * ベースを16pxに戻す。
   * 17pxだとモバイルで文字が大きすぎ改行が不自然になるため。
   * 最小サイズは clamp の下限値で個別に管理する。
   */
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  line-height: 2;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ========================================
   Layout
   ======================================== */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ========================================
   Hero
   ======================================== */
.hero {
  /* 1画面にキッチり収める: 矢印が常に画面内に入る */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--white);
  padding: 56px var(--pad) 80px;
  /* text-align: center を削除。
   * タイトルは .hero__title で個別に center 指定。
   * リード文は .hero__sub / .hero__lead で left 指定。
   * 継承で上書きされないよう、ここでは指定しない。 */
}

/* hero__content:
 * タイトルは中央揃え・リード文は左揃えを共存させるための flex コンテナ。
 * .hero の padding（--pad）が左右余白を担うので、ここでは幅のみ管理。
 */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 子要素を左端基準に */
  width: 100%;
  max-width: var(--max-w);  /* 本文セクションの .wrap と同じ最大幅 */
}

.hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 4.5vw, 1.85rem);
  line-height: 2.0;
  color: var(--black);
  letter-spacing: 0.06em;
  margin-bottom: 2.2rem;
  /* タイトルだけ中央揃え。
   * hero__content が align-items:flex-start なので
   * width:100% + text-align:center で自身の中で中央揃えを実現する。
   * align-self:stretch で横幅いっぱいに広げる。 */
  width: 100%;
  align-self: stretch;
  text-align: center;
}

.hero__rule {
  width: 40px;
  height: 1px;
  background: var(--mid);
  /* タイトルは中央揃えなので、直後の区切り線も中央に置く。
   * align-self:center で hero__content の中央に配置する。 */
  margin: 0 0 2rem;
  align-self: center;
}

.hero__sub {
  /* リード文（前半）。左揃え、本文セクションと自然につながる読み心地。 */
  font-size: clamp(0.9rem, 2.4vw, 0.975rem);
  font-weight: 400;
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 1.6rem;
  text-align: left;
}

.hero__lead {
  /* リード文（後半）。hero__sub とすべて同じ設定に統一。 */
  font-size: clamp(0.9rem, 2.4vw, 0.975rem); /* hero__sub と同値 */
  font-weight: 400;
  line-height: 2.0;
  color: var(--text);
  text-align: left;
  letter-spacing: 0.03em;
}

/* ========================================
   Hero スクロール導線（テキスト + 矢印）
   ======================================== */
.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--gray);         /* 補助要素として gray を維持 */
  opacity: 0.7;               /* 0.8 → 0.7: 控えめだが存在は分かる程度 */
  text-decoration: none;
  transition: opacity 0.2s;
  padding: 8px 16px;
  white-space: nowrap;
}

.hero__scroll:hover {
  opacity: 1;
}

.hero__scroll-text {
  font-family: var(--sans);
  font-size: 0.68rem;         /* 0.7 → 0.68: わずかに控えめに */
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  color: inherit;
}

/* ========================================
   CTA Button
   ======================================== */
.cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 16px 40px;
  background: var(--line-green);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 14px;
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
  cursor: pointer;
  white-space: nowrap;
}

.cta__btn::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.01 2 10.97c0 3.5 2.17 6.56 5.42 8.31-.1.38-.37 1.37-.42 1.58-.07.27.1.27.21.2.09-.05 1.37-.9 1.93-1.27.64.09 1.3.13 1.98.13 5.52 0 10-4.01 10-8.95C22 6.01 17.52 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.cta__btn:hover {
  background: var(--line-green-d);
  box-shadow: 0 6px 24px rgba(6, 199, 85, 0.28);
  transform: translateY(-2px);
}

.cta__btn--hero {
  padding: 16px 36px;
  font-size: 0.96rem;
  white-space: nowrap;
}

.cta__btn--lg {
  padding: 18px 40px;
  font-size: 0.96rem;
}

.cta__note {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--mid);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  text-align: center;
}

/* ========================================
   Sections
   ======================================== */
.sec {
  padding: var(--sec-py) 0;
}

.sec--white { background: var(--white); }
.sec--light { background: var(--off-white); }

.sec--cta {
  background: var(--light);
  padding: clamp(56px, 10vw, 100px) 0;
}

.sec__h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  line-height: 1.8;
  color: var(--black);
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 1.4rem;
}

.sec__rule {
  width: 28px;
  height: 1px;
  background: var(--mid);
  margin: 0 auto 2.8rem;
}

/* ========================================
   Pain List
   ======================================== */
.pain-list {
  list-style: none;
  margin: 0 0 2.5rem 0.2rem;
}

.pain-list li {
  font-size: clamp(0.9375rem, 2.5vw, 1rem);
  font-weight: 400;
  line-height: 2.0;           /* 2.1 → 2.0 */
  color: var(--text);
  padding: 0.4rem 0 0.4rem 1.1rem; /* 0.45 → 0.4: やや引き締める */
  position: relative;
}

.pain-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--mid);
  font-size: 0.9em;
}

.sec__close {
  font-size: clamp(0.9375rem, 2.5vw, 1rem);
  font-weight: 400;
  line-height: 2.1;
  color: var(--text);
  text-align: left;
  padding-top: 2rem;
}

/* ========================================
   Body Text
   ======================================== */
.body-text p {
  /*
   * 本文: 16pxベースで 0.9375rem(15px) 〜 1rem(16px)。
   * モバイルでは 0.9375rem×16px=15px で読める最低サイズを確保しつつ
   * font-weight:400 で太さは維持。行間・段落余白を少し詰めて繊細さを戻す。
   */
  font-size: clamp(0.9375rem, 2.5vw, 1rem);
  font-weight: 400;
  line-height: 2.1;           /* 2.2 → 2.1: わずかに引き締める */
  margin-bottom: 1.6em;       /* 1.8em → 1.6em: 段落間を少し詰める */
  color: var(--text);
}

.body-text p:last-child { margin-bottom: 0; }

.keyword {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  font-weight: 500;
  text-align: center;
  color: var(--black);
  letter-spacing: 0.2em;
  padding: 0.5em 0;
}

.emphasis {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--black);
  font-size: clamp(0.97rem, 2.8vw, 1.1rem) !important;
  line-height: 2.1;
  text-align: left;
  padding: 1.4em 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0.5em 0 1.6em !important;
}

/* ========================================
   Concept Definition Block
   ======================================== */
.concept-def {
  margin: 0.4em 0 2.4em;
  padding: 2rem 1.8rem;
  /*
   * 左線を black に強化・背景を off-white → light に変更して
   * 「決め台詞」としての存在感を高める
   */
  border-left: 4px solid var(--black);  /* 3px・dark → 4px・black */
  background: var(--light);             /* white → light: 本文との対比を明確に */
}

.concept-def p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.25rem) !important; /* 少し大きく */
  font-weight: 500;
  line-height: 1.95;
  color: var(--black);
  letter-spacing: 0.05em;
  margin-bottom: 0.9em !important;
}

.concept-def p:last-child {
  margin-bottom: 0 !important;
}

/* ========================================
   Quote Block
   ======================================== */
.quote-block {
  background: #F0EFEC;
  border-left: 3px solid #C8C5BD;
  padding: 1.8rem 1.6rem;
  margin: 2em 0;
  text-align: left;
  border-radius: 0 4px 4px 0;
}

.quote-block__text {
  font-family: var(--serif);
  font-size: clamp(1rem, 3vw, 1.2rem) !important;
  font-weight: 400;
  line-height: 2;
  color: var(--black);
  letter-spacing: 0.04em;
  margin-bottom: 0.6em !important;
}

.quote-block__cite {
  display: block;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 300;
  font-style: normal;
  color: var(--gray);
  letter-spacing: 0.06em;
}

/* ========================================
   Guide Card
   ======================================== */
.guide-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.8rem 1.6rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.guide-card__label {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.guide-card__title {
  font-family: var(--serif);
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 500;
  color: var(--black);
  line-height: 1.8;
  margin-bottom: 0.4rem;
}

.guide-card__meta {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: 0.04em;
}

/* ========================================
   Guide List (plain bullet, no border)
   ======================================== */
.guide-list {
  list-style: none;
  margin-bottom: 2rem;
}

.guide-list__item {
  font-size: clamp(0.875rem, 2.3vw, 0.95rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--text);
  padding: 0.35rem 0 0.35rem 1.1rem;
  position: relative;
}

.guide-list__item::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--mid);
  font-size: 0.9em;
}

.guide-list__dot {
  display: none;
}

/* ========================================
   Plain List (same as guide-list, shared style)
   ======================================== */
.plain-list {
  list-style: none;
  margin: 0 0 2.5rem 0.2rem;
}

.plain-list li {
  font-size: clamp(0.9375rem, 2.5vw, 1rem);
  font-weight: 400;
  line-height: 2.0;           /* 2.1 → 2.0 */
  color: var(--text);
  padding: 0.4rem 0 0.4rem 1.1rem; /* 0.45 → 0.4: やや引き締める */
  position: relative;
}

.plain-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--mid);
  font-size: 0.9em;
}

.guide-note {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-sub);
  line-height: 1.9;
  text-align: left;
  margin-bottom: 2.5rem;
}

/* CTA box inside section */
.cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
}

/* ========================================
   Target List
   ======================================== */
.target-list {
  list-style: none;
}

.target-list li {
  font-size: clamp(0.875rem, 2.3vw, 0.95rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--text);
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.target-list li:first-child {
  border-top: 1px solid var(--border);
}

/* ========================================
   Profile
   ======================================== */
.profile {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem 1.6rem;
}

.profile__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}

.profile__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--light);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: 0.06em;
}

.profile__name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}

.profile__title {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: 0.06em;
}

.profile__body p {
  font-size: clamp(0.88rem, 2.3vw, 0.95rem);
  font-weight: 300;
  line-height: 2;
  color: var(--text);
  margin-bottom: 1.2em;
}

.profile__body p:last-child { margin-bottom: 0; }

.profile__body strong {
  font-weight: 500;
  color: var(--black);
}

/* ========================================
   Final CTA
   ======================================== */
.cta-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 0.2rem;
}

.cta-final__msg {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  font-weight: 300;
  line-height: 2;
  color: var(--text);
  margin-bottom: 0.6em;
  text-align: left;
  align-self: stretch;
}

.cta-final__msg--sub {
  font-size: 0.88rem;
  color: var(--text-sub);
  margin-bottom: 2rem;
}

/* ========================================
   Key Message (inline emphasis block)
   ======================================== */
.key-message {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.2rem) !important; /* 少し大きく */
  font-weight: 500;
  color: var(--black);
  line-height: 1.95;
  padding: 1.5em 1.8em;       /* 余白を広げて格調を持たせる */
  margin: 0.6em 0 1.8em !important;
  border-left: 4px solid var(--black); /* 3px・dark → 4px・black */
  background: var(--light);   /* off-white → light: 本文との対比を明確に */
}

/* ========================================
   Profile byline
   ======================================== */
.profile__byline {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: 0.08em;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}

/* ========================================
   Postscript
   ======================================== */
.postscript p {
  color: var(--text-sub);
}

/* ========================================
   Footer
   ======================================== */
.footer {
  background: var(--light);
  padding: 3rem 0;
  text-align: center;
  border-top: 1px solid var(--border);
}

.footer__name {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--black);
  letter-spacing: 0.12em;
  margin-bottom: 0.3rem;
}

.footer__project {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: 0.06em;
}



/* ========================================
   Tablet+
   ======================================== */
@media (min-width: 768px) {
  :root { --max-w: 640px; }
  .hero__title { line-height: 1.9; }
  .sec__rule { margin-bottom: 3rem; }
  .guide-card { padding: 2.2rem 2rem; }
  .guide-list__item { padding: 1rem 0; }
  .quote-block { padding: 2rem 2rem; }
}

/* ========================================
   Mobile only  (<= 767px)
   ======================================== */
@media (max-width: 767px) {

  /* --- コンテナ左右余白: 最低20px保証 --- */
  .wrap {
    padding-left: max(20px, var(--pad));
    padding-right: max(20px, var(--pad));
  }

  /* --- hero: スマホではパディングを平等にし、コンテンツを中央に安定させる --- */
  .hero {
    padding-top: 40px;
    padding-bottom: 72px; /* 矢印用の下余白をなゆかに確保 */
  }

  /* --- hero__title: モバイルでの中央揃え維持 --- */
  .hero__title {
    margin-bottom: 1.8rem;
  }

  /* --- hero__sub / hero__lead: モバイルでは幅いっぱいに広げる ---
   * hero__content の padding（--pad）が左右余白を担うため
   * 個別の max-width / margin 制限は不要
   */
  .hero__sub,
  .hero__lead {
    max-width: 100%;
  }

  /* --- ヒーロー rule 余白縮小 --- */
  .hero__rule {
    margin-bottom: 1.6rem;
  }

  /* --- CTAボタン: nowrap維持、左右20px余白 --- */
  .cta__btn--hero {
    padding: 15px 28px;
    font-size: 0.94rem;
  }

  /* --- ページ下部CTAボタン --- */
  .cta__btn--lg {
    padding: 15px 28px;
    font-size: 0.94rem;
  }

  /* --- ボタンコンテナ中央揃え --- */
  .cta,
  .cta-box {
    width: 100%;
    align-items: center;
  }

  /* --- cta__note 補足テキスト余白 --- */
  .cta__note {
    margin-top: 0.8rem;
  }

  /* --- concept-def モバイル余白 --- */
  .concept-def {
    padding: 1.6rem 1.4rem;   /* 1.4→1.6, 1.2→1.4: 少し広げて格調を維持 */
  }

  /* --- key-message モバイル余白 --- */
  .key-message {
    padding: 1.3em 1.4em;     /* 1.2→1.3, 1.2→1.4 */
  }

  /* --- sec__h フォントサイズ調整 --- */
  .sec__h {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }
}

/* ========================================
   a11y
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}