@charset "UTF-8";

/* 女性らしさ弱：プレーンなゴシック */
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

    :root {
      --bg:   #FDFCF6; /* 全体背景をクリーム色に戻す */
      --red:  #216E45; /* 全ての赤要素を深い緑に変更 */
      --red2: #165634;
      --sub:  #F7C1D8; /* サブカラーでピンクを配置（マーカー・装飾など） */
      --grn:  #216E45; /* メイン深い緑 */
      --grn2: #165634;
      --yel:  #F7C1D8; /* ボタン等をピンクに変更するため、yelにピンクをマッピング */
      --blu:  #5BC0EB;
      --ink:  #4A2828; /* 文字・枠線の色を黒系（こげ茶）に戻す */
      --wht:  #FFFFFF;
      --line: rgba(33, 110, 69, 0.15); /* 緑の罫線 */
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── ノート方眼背景（広めの間隔） ── */
    body {
      font-family: 'Noto Sans JP', sans-serif;
      background-color: var(--bg);
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px);
      background-attachment: fixed;
      color: var(--ink);
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ────────────────────────────
       NAV
    ──────────────────────────── */
    .nav {
      background: rgba(255,255,255,0.95);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding: 1.2rem 2.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(5px);
    }
    .nav-logo {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #FF5A5F; /* ロゴ全体を赤（コーラルレッド）に */
    }
    .nav-logo em { font-style: normal; }
    .nav-links {
      display: flex;
      gap: 2rem;
    }
    .nav-links a {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      color: var(--ink);
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--red); }
    .nav-btn {
      background: var(--grn);
      color: var(--bg);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      font-weight: 900;
      padding: 9px 20px;
      border: 2px solid var(--ink);
      border-radius: 4px;
      box-shadow: 2px 2px 0 var(--ink);
      cursor: pointer;
      letter-spacing: .04em;
      transition: transform .1s, box-shadow .1s;
    }
    .nav-btn:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

    /* ────────────────────────────
       HERO
    ──────────────────────────── */
    .hero {
      min-height: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      text-align: center;
      padding: 6rem 2rem 5rem;
      overflow: hidden;
    }

    /* ────────────────────────────
       ボタニカル＆ジャングル装飾 (Jungle & Sun)
    ──────────────────────────── */


    .botanical-sun, .botanical-ray { display: none; }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    .hero-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--wht);
      background: var(--red);
      padding: 4px 12px;
      border-radius: 4px;
      margin-bottom: 1.4rem;
      position: relative;
      z-index: 10;
      display: inline-block;
    }

    .hero-catch {
      font-size: 54px;
      font-weight: 900;
      line-height: 1.5;
      position: relative;
      z-index: 10;
      margin-bottom: 2.8rem;
      letter-spacing: -.02em;
    }
    .hero-catch .box {
      display: inline-block;
      margin-top: 15px;
      background: var(--ink);
      color: var(--wht);
      padding: 4px 18px;
      border-radius: 4px;
      transform: rotate(-2.5deg);
      box-shadow: 4px 4px 0 var(--red);
    }

    .hero-sub {
      font-size: 14px;
      font-weight: 700;
      line-height: 2;
      position: relative;
      z-index: 10;
      background: rgba(255,255,255,.9);
      padding: 18px 26px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      box-shadow: 4px 4px 0 var(--ink);
      max-width: 520px;
      margin: 0 auto 2.4rem;
    }

    .hero-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      position: relative;
      z-index: 10;
      flex-wrap: wrap;
    }
    .btn-main {
      background: var(--sub);
      color: var(--ink);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 15px;
      font-weight: 900;
      padding: 16px 36px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      box-shadow: 4px 4px 0 var(--ink);
      cursor: pointer;
      letter-spacing: .04em;
      transition: transform .1s, box-shadow .1s;
    }
    .btn-main:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
    .btn-sub {
      background: var(--grn);
      color: var(--bg);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 900;
      padding: 16px 28px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      box-shadow: 4px 4px 0 var(--ink);
      cursor: pointer;
      letter-spacing: .04em;
      transition: transform .1s, box-shadow .1s;
    }
    .btn-sub:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

    /* ────────────────────────────
       RIBBON STRIPE
    ──────────────────────────── */
    .ribbon {
      background: var(--ink);
      border-top: 2px solid var(--red);
      border-bottom: 2px solid var(--red);
      padding: .7rem 0;
      overflow: hidden;
      white-space: nowrap;
    }
    .ribbon-inner {
      display: inline-flex;
      gap: 2rem;
      font-size: 12px;
      font-weight: 900;
      color: rgba(255,255,255,.6);
      letter-spacing: .12em;
      text-transform: uppercase;
      animation: ticker 25s linear infinite;
    }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .rb-dot { color: var(--yel); }

    /* ────────────────────────────
       CONCEPT
    ──────────────────────────── */
    .sec-concept {
      margin: 3.5rem 2rem;
      position: relative;
    }
    .concept-card {
      background: var(--wht);
      border: 2px solid var(--ink);
      border-radius: 12px;
      padding: 3rem 2.8rem;
      box-shadow: 6px 6px 0 rgba(0,0,0,0.05);
      position: relative;
    }
    /* 二重枠のアクセント */
    .concept-card::before {
      content: '';
      position: absolute;
      top: -3px; left: -3px; right: -3px; bottom: -3px;
      border: 2px dashed var(--red);
      border-radius: 14px;
      pointer-events: none;
    }
    .con-deco-circle {
      position: absolute;
      top: -22px; right: 2.5rem;
      width: 46px; height: 46px; border-radius: 50%;
      background: var(--yel);
      border: 2px solid var(--ink);
      box-shadow: 2px 2px 0 var(--ink);
    }
    .con-deco-rect {
      position: absolute;
      bottom: -18px; left: 2rem;
      width: 34px; height: 34px; border-radius: 4px;
      background: var(--grn);
      border: 2px solid var(--ink);
      transform: rotate(22deg);
      box-shadow: 2px 2px 0 var(--ink);
    }
    /* Our conceptを中央寄せ */
    .con-tag {
      display: inline-block;
      background: var(--ink);
      color: var(--wht);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 4px;
      margin: 0 auto 1.4rem;
    }
    /* カード全体のテキストを中央寄りに調整しておく（Weakの仕様合わせ） */
    .concept-card { text-align: center; }
    
    .con-heading {
      font-size: 26px;
      font-weight: 900;
      line-height: 1.45;
      margin-bottom: 1.6rem;
      letter-spacing: -.01em;
    }
    .con-heading em {
      font-style: normal;
      background: linear-gradient(transparent 55%, var(--sub) 55%);
    }
    .con-body {
      font-size: 14px;
      font-weight: 700;
      line-height: 2.5;
      color: #333;
      white-space: pre-line;
      margin-bottom: 1.6rem;
    }
    .con-quote {
      border: 2px dashed var(--red);
      border-radius: 8px;
      padding: 1.2rem 1.6rem;
      background: #FFFBF4;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.9;
      margin: 0 auto;
      display: inline-block;
    }

    /* ────────────────────────────
       FOR YOU (skewed斜めライン)
    ──────────────────────────── */
    .sec-foryou {
      background: var(--wht); /* ForYouセクションの背景を白に */
      border-top: 2px solid var(--ink);
      border-bottom: 2px solid var(--ink);
      padding: 5.5rem 2.4rem;
      transform: skewY(-2deg);
      position: relative;
      margin: 4rem 0;
      box-shadow: inset 0 0 50px rgba(0,0,0,0.02);
    }
    .foryou-inner {
      transform: skewY(2deg);
      max-width: 1200px;
      margin: 0 auto;
    }
    .fy-head {
      text-align: center;
      font-size: 28px;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 2rem;
      letter-spacing: -.01em;
    }
    .fy-head span {
      display: inline-block;
      background: var(--sub); /* ピンク背景を復活 */
      color: var(--ink);
      padding: 2px 14px;
      border-radius: 4px;
      transform: rotate(-1.5deg);
    }
    .fy-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
    }
    .fy-box {
      border: 2px solid var(--ink);
      border-radius: 12px;
      padding: 2rem;
      background: #fff;
      box-shadow: 4px 4px 0 var(--ink);
    }
    .fy-box h3 {
      font-size: 15px;
      font-weight: 900;
      color: var(--wht);
      background: var(--ink);
      display: inline-block;
      padding: 4px 12px;
      border-radius: 4px;
      margin-bottom: 1.2rem;
    }
    .fy-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.8;
      margin-bottom: .7rem;
    }
    .fy-bullet {
      background: transparent;
      color: var(--sub);
      font-size: 14px;
      font-weight: 900;
      margin-top: 0;
    }

    /* ────────────────────────────
       SERVICE
    ──────────────────────────── */
    .sec-svc {
      padding: 3rem 2rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    .svc-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2.5rem;
    }
    .svc-title {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -.01em;
    }
    .svc-title span {
      display: inline-block;
      background: var(--grn);
      color: var(--wht);
      padding: 0 10px;
      border-radius: 4px;
    }
    .svc-count {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
      color: #AAA;
      text-transform: uppercase;
    }
    .badge-row {
      display: flex;
      gap: 1.4rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .badge {
      width: 240px; height: 240px;
      border-radius: 50%;
      border: 2px solid var(--ink);
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      text-align: center;
      box-shadow: 4px 4px 0 var(--ink);
      position: relative;
      transition: transform .15s;
    }
    .badge:hover { transform: translate(-2px,-2px); }
    .badge:nth-child(1) { border-color: var(--sub); box-shadow: 4px 4px 0 var(--sub); }
    .badge:nth-child(2) { border-color: var(--blu); box-shadow: 4px 4px 0 var(--blu); }
    .badge:nth-child(3) { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
    .badge-num {
      position: absolute;
      top: 12%; left: 10%;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      border: 2px solid var(--ink);
      font-size: 14px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .badge h3 { font-size: 14px; font-weight: 900; line-height: 1.4; margin-bottom: .7rem; }
    .badge p { font-size: 11px; font-weight: 700; line-height: 1.7; opacity: .85; }

    .svc-note {
      margin: 2rem auto 0;
      max-width: 540px;
      text-align: center;
      background: var(--wht);
      border: 2px solid var(--ink);
      border-radius: 8px;
      padding: 1.2rem 1.6rem;
      box-shadow: 4px 4px 0 var(--ink);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.9;
    }

    /* ────────────────────────────
       ABOUT
    ──────────────────────────── */
    .sec-about {
      margin: 4rem auto;
      max-width: 1200px;
      display: grid;
      grid-template-columns: 240px 1fr;
      border: 2px solid var(--ink);
      border-radius: 12px;
      background: var(--wht);
      box-shadow: 6px 6px 0 var(--ink);
      overflow: hidden;
    }
    .about-img-side {
      background: linear-gradient(160deg, var(--sub) 0%, #E89A4F 100%);
      border-right: 2px solid var(--ink);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      min-height: 320px;
    }
    .ab-sil-h {
      width: 80px; height: 80px;
      background: rgba(255,255,255,.22);
      border-radius: 50%;
      position: absolute;
      bottom: 230px; left: 50%;
      transform: translateX(-50%);
    }
    .ab-sil-b {
      width: 190px; height: 270px;
      background: rgba(255,255,255,.14);
      border-radius: 95px 95px 0 0;
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
    }
    .about-img-label {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: var(--ink);
      padding: .55rem 1rem;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .16em;
      color: var(--wht);
      text-transform: uppercase;
      text-align: center;
    }
    .about-text { padding: 2.4rem 2.2rem; }
    .ab-tag {
      display: inline-block;
      background: var(--red);
      color: var(--wht);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 4px;
      margin-bottom: .9rem;
    }
    .ab-name { font-size: 26px; font-weight: 900; letter-spacing: -.01em; margin-bottom: .15rem; }
    .ab-en {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .16em;
      color: var(--red);
      margin-bottom: 1.4rem;
      display: block;
    }
    .ab-body {
      font-size: 13px;
      font-weight: 700;
      line-height: 2.2;
      color: #333;
      margin-bottom: .8rem;
    }
    .ab-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: .8rem; }
    .ab-chip {
      font-size: 10px;
      font-weight: 900;
      padding: 4px 12px;
      border-radius: 4px;
      background: rgba(0,0,0,0.05);
      color: var(--ink);
      letter-spacing: .04em;
    }
    .ab-ig {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 1.8rem;
      padding: 10px 24px;
      background: var(--wht);
      border: 2px solid var(--ink);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
      text-decoration: none;
      box-shadow: 4px 4px 0 var(--ink);
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    .ab-ig:hover {
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 var(--ink);
      background: #fffafa;
      color: var(--red);
    }

    /* ────────────────────────────
       JOURNAL
    ──────────────────────────── */
    .sec-journal {
      padding: 2rem 2rem 2.5rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    .jnl-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 1.8rem;
    }
    .jnl-title { font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
    .jnl-title span { background: var(--sub); padding: 0 8px; border-radius: 4px;}
    .jnl-more { font-size: 11px; font-weight: 900; color: var(--grn2); text-decoration: none; letter-spacing: .08em; }
    .jnl-more:hover { color: var(--grn); }
    .jnl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.2rem;
    }
    .jnl-card {
      border: 2px solid var(--ink);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 4px 4px 0 rgba(0,0,0,0.05);
      background: var(--wht);
      transition: transform .15s;
    }
    .jnl-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(0,0,0,0.05); }
    .jnl-thumb {
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(0,0,0,0.2);
      position: relative;
    }
    /* .jnl-card.big .jnl-thumb { height: 200px; } 削除 */
    .jt1 { background: #FFF0F2; } /* うすいピンク/赤系 */
    .jt2 { background: #E9F4ED; } /* うすい緑系 */
    .jt3 { background: #FCEDF3; } /* うすいピンク系 */
    .jnl-cat-badge {
      position: absolute;
      top: .7rem; left: .7rem;
      background: var(--ink);
      color: var(--wht);
      border-radius: 4px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 9px;
    }
    .jnl-body { padding: 1rem; }
    .jnl-card-title {
      font-size: 14px;
      font-weight: 900;
      line-height: 1.7;
      color: var(--ink);
    }
    /* .jnl-card.big .jnl-card-title { font-size: 15px; } 削除 */
    .jnl-note {
      margin-top: 1.6rem;
      font-size: 13px;
      font-weight: 700;
      line-height: 2;
      color: #888;
      text-align: center;
      border-top: 2px dashed rgba(0,0,0,.1);
      padding-top: 1.2rem;
    }

    /* ────────────────────────────
       CTA
    ──────────────────────────── */
    .sec-cta {
      margin: 4rem auto 5rem;
      max-width: 1200px;
      background: var(--wht); /* テキストボックスなので白へ変更 */
      border: 4px solid var(--ink);
      border-radius: 12px;
      box-shadow: 6px 6px 0 var(--red);
      padding: 3.5rem 2.8rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-deco-rect {
      position: absolute;
      top: -22px; right: -22px;
      width: 88px; height: 88px; border-radius: 8px;
      background: var(--yel);
      border: 2px solid var(--ink);
      transform: rotate(20deg);
      box-shadow: 2px 2px 0 var(--ink);
    }
    .cta-deco-circle {
      position: absolute;
      bottom: -18px; left: 2rem;
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--sub);
    }
    .cta-bg-word {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 120px;
      font-weight: 900;
      color: rgba(17,17,17,.04);
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: -.02em;
    }
    .cta-inner { position: relative; z-index: 2; }
    .cta-heading {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.45;
      margin-bottom: .9rem;
      letter-spacing: -.01em;
    }
    .cta-heading span {
      display: inline-block;
      background: var(--wht);
      color: var(--ink);
      border: 2px dashed var(--red);
      border-radius: 4px;
      padding: 0 10px;
      transform: rotate(-.5deg);
    }
    .cta-body {
      font-size: 14px;
      font-weight: 700;
      line-height: 2;
      color: #333;
      margin-bottom: 2.2rem;
    }
    .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
    .c-btn1 {
      background: var(--sub);
      color: var(--ink);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 14px;
      font-weight: 900;
      padding: 16px 34px;
      border: 2px solid var(--ink); border-radius: 8px;
      box-shadow: 4px 4px 0 var(--ink);
      cursor: pointer;
      letter-spacing: .04em;
      transition: transform .1s, box-shadow .1s;
    }
    .c-btn1:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
    .c-btn2 {
      background: var(--grn);
      color: var(--bg);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 900;
      padding: 16px 30px;
      border: 2px solid var(--ink); border-radius: 8px;
      box-shadow: 4px 4px 0 var(--ink);
      cursor: pointer;
      letter-spacing: .04em;
      transition: transform .1s, box-shadow .1s;
    }
    .c-btn2:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

    /* ────────────────────────────
       FOOTER
    ──────────────────────────── */
    .footer {
      background: #F9F9F9;
      padding: 1.8rem 2.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      border-top: 1px solid rgba(0,0,0,0.1);
    }
    .f-logo { font-size: 20px; font-weight: 900; color: #FF5A5F; letter-spacing: -.01em; } /* ロゴ全体を赤に */
    .f-logo em { font-style: normal; }
    .f-links { display: flex; gap: 1.8rem; }
    .f-links a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--ink);
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s;
    }
    .f-links a:hover { color: var(--red); }
    .f-copy { font-size: 10px; font-weight: 700; color: #888; letter-spacing: .06em; }

    /* ────────────────────────────
       RESPONSIVE
    ──────────────────────────── */
    @media (max-width: 700px) {
      .hero-catch { font-size: 36px; }
      .botanical-sun, .botanical-ray { display: none; }
      .fy-grid { grid-template-columns: 1fr; }
      .jnl-grid { grid-template-columns: 1fr; }
      .badge-row { flex-direction: column; align-items: center; }
      .sec-about { grid-template-columns: 1fr; }
      .about-img-side { min-height: 220px; border-right: none; border-bottom: 2px solid var(--ink); }
      .nav-links { display: none; }
      .sec-foryou { transform: none; padding: 3rem 1.4rem; border-radius: 12px; margin: 2rem 1rem; }
      .foryou-inner { transform: none; }
      .cta-btns { flex-direction: column; align-items: center; }
      .btn-line, .btn-meet, .btn-mail { width: 100%; max-width: 340px; }
      .footer { flex-direction: column; align-items: center; text-align: center; gap: 2rem; padding: 3rem 1.4rem; }
      .f-links { flex-direction: column; align-items: center; gap: 1.5rem; }
    }

/* ────────────────────────────
   ANIMATIONS
──────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-anim {
  animation: heroFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}
.hero-anim:nth-child(1) { animation-delay: 0.1s; }
.hero-anim:nth-child(2) { animation-delay: 0.2s; }
.hero-anim:nth-child(3) { animation-delay: 0.3s; }
.hero-anim:nth-child(4) { animation-delay: 0.4s; }
@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────
   UTILITIES
──────────────────────────── */
.brand-text {
  color: #FF5A5F;
  font-weight: 900;
  letter-spacing: -.02em;
}


/* CTA BUTTON VARIANTS */
.btn-line, .btn-meet, .btn-mail {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 900;
  padding: 16px 30px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-line:hover, .btn-meet:hover, .btn-mail:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn-line { background: #06C755; color: #fff; } /* LINE公式っぽいけど少し柔らかい緑 */
.btn-meet { background: var(--blu); color: var(--ink); } /* サイトデザインで使用している水色（オンライン面談イメージ） */
.btn-mail { background: var(--sub); color: var(--ink); } /* サイトデザインの主役ピンク（メール） */

/* ────────────────────────────
   STATIC PAGE LAYOUT (COMMON)
──────────────────────────── */
.page-header { text-align: center; padding: 6rem 1rem 3rem; }
.page-title { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -.01em; margin-bottom: 1rem; }
.page-en { font-size: 11px; font-weight: 900; color: var(--red); letter-spacing: .2em; text-transform: uppercase; }
.page-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem 6rem; }
.page-box { max-width: 840px; margin: 0 auto; background: var(--wht); border: 2px solid var(--ink); border-radius: 12px; padding: 4rem 5rem; box-shadow: 6px 6px 0 var(--ink); font-size: 14px; font-weight: 500; line-height: 2; color: #333; }

@media (max-width: 700px) {
  .page-container { padding: 0 1.2rem; margin-bottom: 4rem; }
  .page-box { padding: 2.2rem 1.5rem; }
  .page-title { font-size: 24px; }
}

/* ── Specific Styles for Static Pages ── */

/* Law / Terms Tables */
.page-box table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 2rem; line-height: 2; }
.page-box tr { border-bottom: 1px solid #eee; }
.page-box th { padding: 1.2rem 0; text-align: left; }
.page-box td { padding: 1.2rem 0; }

@media (max-width: 700px) {
  .page-box tr { display: block; border-bottom: 1px solid #eee; padding: 1.2rem 0; }
  .page-box th, .page-box td { display: block; width: 100% !important; padding: 0 !important; border: none; }
  .page-box th { font-size: 11px; color: var(--red); margin-bottom: 0.5rem; letter-spacing: 0.1em; }
  .page-box td { font-size: 14px; line-height: 1.6; }
}

/* Privacy / Terms / FAQ Content */
.pp-h2, .terms-h2 { font-size: 17px; font-weight: 900; border-bottom: 2px dashed rgba(0,0,0,0.12); padding-bottom: .7rem; margin: 2.8rem 0 1.2rem; color: var(--ink); }
.pp-h2:first-of-type, .terms-h2:first-of-type { margin-top: 0; }
.pp-p, .terms-p { margin-bottom: 1.4rem; line-height: 2; }
.pp-ul, .terms-ul { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.pp-ul li, .terms-ul li { margin-bottom: .5rem; }
.pp-date, .terms-date { font-size: 12px; color: #999; text-align: right; margin-top: 2.5rem; }

/* Terms specific */
.cancel-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: 13px; }
.cancel-table th, .cancel-table td { border: 1.5px solid rgba(0,0,0,0.15); padding: .9rem 1rem; text-align: left; vertical-align: top; }
.cancel-table th { background: #fdf6ec; font-weight: 900; width: 46%; }
.terms-note { background: rgba(255,100,80,0.07); border-left: 4px solid var(--red); border-radius: 4px; padding: 1rem 1.2rem; font-size: 13px; margin-bottom: 1.4rem; }

/* FAQ specific */
.faq-item { border-bottom: 1px dashed rgba(0,0,0,0.1); padding: 1.5rem 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0;}
.faq-q { color: var(--ink); font-size: 17px; font-weight: 900; margin-bottom: .8rem; display: flex; align-items: flex-start; gap: 10px; }
.faq-q::before { content: 'Q.'; color: var(--sub); font-size: 20px; line-height: 1.2; }
.faq-a { color: #444; font-size: 14px; font-weight: 700; line-height: 1.9; display: flex; align-items: flex-start; gap: 10px; }
.faq-a::before { content: 'A.'; color: var(--grn); font-size: 20px; line-height: 1.2; }
@media (max-width: 700px) { .faq-q { font-size: 15px; } }

/* Contact specific */
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-label { font-size: 12px; font-weight: 900; color: var(--ink); }
.form-required { color: var(--red); margin-left: .2rem; }
.form-input, .form-textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 8px; font-family: inherit; font-size: 14px; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; background: #fff; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.form-textarea { resize: vertical; min-height: 160px; }
.form-radio-group { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.form-radio-label { display: flex; align-items: center; gap: .4rem; font-size: 13px; cursor: pointer; font-weight: 700; }
.form-radio-label input[type="radio"] { accent-color: var(--red); }
.form-agree { display: flex; align-items: flex-start; gap: .7rem; font-size: 13px; line-height: 1.8; background: rgba(255,100,80,.06); border: 1.5px solid rgba(255,100,80,.25); border-radius: 8px; padding: 1rem 1.2rem; }
.form-agree input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: .2rem; accent-color: var(--red); cursor: pointer; }
.form-agree a { color: var(--red); text-decoration: underline; }
.form-submit { width: 100%; max-width: 320px; margin: .5rem auto 0; display: block; padding: 16px 24px; background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 8px; font-size: 15px; font-weight: 900; font-family: inherit; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.form-submit:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.form-submit:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.form-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--ink); }
.contact-sep { display: flex; align-items: center; gap: 1rem; margin: 2rem 0; color: #bbb; font-size: 12px; }
.contact-sep::before, .contact-sep::after { content: ""; flex: 1; border-top: 1px dashed #ccc; }
.contact-line-banner { display: flex; align-items: center; justify-content: center; gap: .8rem; background: #06C755; color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1rem 1.5rem; text-decoration: none; font-weight: 900; font-size: 14px; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.contact-line-banner:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); color: #fff; }
.form-success { display: none; text-align: center; padding: 2rem; background: rgba(100,200,120,.08); border: 2px solid #4caf50; border-radius: 8px; font-weight: 700; }