@charset "UTF-8";
/* ==========================================================
   Hips FC ｜ page.css（下層ページ共通）
   加盟店募集をはじめ、下層ページで使い回す部品
   ========================================================== */

/* ---------- ページヘッダー ---------- */
.page-hero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:clamp(.85rem,2vw,1.4rem);border:1px solid rgba(255,255,255,.10);pointer-events:none}
.page-hero .wrap{position:relative;padding-top:clamp(2.8rem,6vw,4.4rem);padding-bottom:clamp(2.8rem,6vw,4.4rem)}
.crumb{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:1.7rem}
.crumb a{color:rgba(255,255,255,.75)}
.crumb a:hover{color:#fff}
.crumb i{font-size:.68em}
.page-hero .eyebrow{display:block;margin-bottom:.6rem}
.page-hero h1{font-size:clamp(1.75rem,3.8vw,2.55rem);font-weight:700;line-height:1.45;margin-bottom:.9rem}
.page-hero .lead{color:rgba(255,255,255,.75);max-width:38em}

/* ---------- 本文（読みやすい行長に制限） ---------- */
.prose{max-width:44em}
.prose p{margin-bottom:1.25em}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:normal;font-weight:700;color:var(--brass)}

/* ---------- つまずきポイント（チェックリスト） ---------- */
.checks-title{font-family:var(--font-min);font-weight:600;font-size:1.05rem;color:var(--navy-900);margin:2.4rem 0 1.1rem;display:flex;align-items:center;gap:.7em}
.checks-title::before{content:"";width:24px;height:2px;background:var(--brass)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2.4rem}
.check{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--danger);padding:1.15rem 1.4rem;display:flex;gap:.9rem;align-items:flex-start}
.check i{color:var(--danger);margin-top:.4em;font-size:.9rem}
.check p{font-size:.95rem;font-weight:500}

/* ---------- 実績スタット ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:2.4rem 0}
.stat{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);padding:1.7rem 1.4rem;text-align:center}
.stat b{display:block;font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:2.1rem;color:var(--brass);line-height:1.25}
.stat b small{font-family:var(--font-jp);font-size:.9rem;font-weight:700;color:var(--ink);margin-left:.15em}
.stat b.stat-txt{font-family:var(--font-jp);font-size:1.4rem}
.stat span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.45rem}

/* ---------- 2カラム帯（テキスト＋図版） ---------- */
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.band-dark{background:var(--navy-800);color:#fff}
.band-dark .eyebrow{color:var(--gold)}
.band-dark h2{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:700;line-height:1.5;margin:.8rem 0 1.1rem}
.band-dark .prose{color:rgba(255,255,255,.8)}
.band-dark .figure{margin-top:0}
.band-dark .figure img{border-color:rgba(255,255,255,.18)}

/* ---------- 関連ページ ---------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rel-card{background:var(--white);border:1px solid var(--line);padding:1.45rem 1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:transform .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(13,24,48,.4)}
.rel-card small{display:block;font-family:var(--font-lat);font-size:.6rem;letter-spacing:.16em;color:var(--brass);text-transform:uppercase;margin-bottom:.25rem}
.rel-card b{font-size:1rem;font-weight:700;line-height:1.5}
.rel-card i{color:var(--brass);flex:0 0 auto}

/* ---------- ポジティブ・チェック（メリット要約など） ---------- */
.check--good{border-left-color:var(--brass)}
.check--good i{color:var(--brass)}

/* ---------- 番号付きリスト（10のメリットなど） ---------- */
.num-list{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.num-item{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);padding:1.6rem 1.5rem;display:flex;gap:1.15rem;align-items:flex-start}
.num-item .no{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:1.55rem;color:var(--brass);line-height:1;flex:0 0 auto;margin-top:.2rem}
.num-item p{font-size:.95rem;font-weight:500;line-height:1.75}
.num-item .note{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brass);border:1px solid var(--brass);border-radius:2px;padding:.12em .6em;margin-top:.55rem}

/* ---------- ステートメント帯（強い一言） ---------- */
.statement{background:var(--navy-900);color:#fff;text-align:center}
.statement .prose{text-align:left;margin:0 auto 2rem;color:rgba(255,255,255,.78)}
.statement .big{font-family:var(--font-min);font-weight:700;font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.8;color:#fff}
.statement .big em{font-style:normal;color:var(--gold)}

/* ---------- 補足チップ（汎用） ---------- */
.note-chip{display:inline-block;font-size:.72rem;font-weight:700;color:var(--brass);border:1px solid var(--brass);border-radius:2px;padding:.12em .6em;margin-top:.5rem}

/* ---------- 縦タイムライン（開業までの流れ） ---------- */
.timeline{position:relative;max-width:860px}
.timeline::before{content:"";position:absolute;left:26px;top:10px;bottom:10px;width:2px;background:var(--line)}
.tl-phase{position:relative;z-index:1;font-family:var(--font-min);font-weight:600;color:var(--brass);font-size:.95rem;letter-spacing:.08em;padding:0 0 1.6rem 78px}
.tl-phase:not(:first-child){padding-top:1.2rem}
.tl-phase::before{content:"";position:absolute;left:19px;top:.42em;width:16px;height:16px;background:var(--brass);transform:rotate(45deg)}
.tl-phase:not(:first-child)::before{top:calc(1.2rem + .42em)}
.tl-phase small{font-family:var(--font-lat);letter-spacing:.2em;font-size:.68rem;text-transform:uppercase;color:var(--ink-soft);margin-left:.9em}
.tl-item{position:relative;padding:0 0 2.6rem 78px}
.tl-item:last-child{padding-bottom:.4rem}
.tl-no{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--navy-900);color:var(--gold);border:2px solid var(--brass);display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:1rem}
.tl-item h3{font-size:1.15rem;font-weight:700;line-height:1.6;padding-top:.5rem;margin-bottom:.55rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7em}
.tl-badge{font-size:.68rem;font-weight:700;background:var(--navy-800);color:#fff;padding:.28em .8em;border-radius:2px;letter-spacing:.04em}
.tl-item p{font-size:.95rem;color:var(--ink);max-width:44em;margin-bottom:.7em}
.tl-item p:last-child{margin-bottom:0}
.tl-item em{font-style:normal;font-weight:700;color:var(--brass)}

/* ---------- サポート項目カード ---------- */
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.support-card{background:var(--white);border:1px solid var(--line);padding:1.9rem 1.8rem}
.support-card h3{font-size:1.05rem;font-weight:700;line-height:1.6;margin-bottom:.7rem;display:flex;align-items:center;gap:.7em}
.support-card h3 i{color:var(--brass);font-size:1.05em;flex:0 0 auto}
.support-card p{font-size:.92rem;color:var(--ink-soft)}

/* ---------- 業務リスト（線なしタイムライン：シミュレーション等） ---------- */
.timeline--plain::before{display:none}
.timeline--plain .tl-no i{font-size:.95rem}

/* ---------- レターカード（担当者メッセージ） ---------- */
.letter{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);max-width:860px;margin:0 auto;padding:clamp(2rem,5vw,3.2rem)}
.letter .salute{font-family:var(--font-min);font-weight:600;font-size:1.2rem;line-height:1.7;color:var(--navy-900);margin-bottom:1.4rem}
.letter .prose{max-width:none}
.letter .sign{text-align:right;margin-top:2rem;font-weight:700}
.letter .sign small{display:block;font-size:.75rem;color:var(--ink-soft);font-weight:400;margin-bottom:.2rem}

/* ---------- 応募・お問い合わせフォーム ---------- */
.form-wrap{max-width:760px;margin:0 auto}
.form-lead{margin-bottom:2.2rem}
.form-field{margin-bottom:1.6rem}
.form-field label{display:block;font-weight:700;font-size:.95rem;margin-bottom:.55rem}
.badge-req,.badge-opt{display:inline-block;font-size:.66rem;font-weight:700;padding:.22em .7em;border-radius:2px;margin-left:.7em;vertical-align:.12em;letter-spacing:.04em}
.badge-req{background:var(--danger);color:#fff}
.badge-opt{background:var(--ink-soft);color:#fff}
.form-field input,.form-field textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.7;color:var(--ink);background:var(--white);border:1px solid rgba(0,0,0,.22);border-radius:2px;padding:.85em 1em;transition:border-color .2s,box-shadow .2s}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,134,62,.18)}
.form-field textarea{resize:vertical;min-height:11em}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden} /* ハニーポット（スパム対策・画面には出ません） */
.form-submit{text-align:center;margin-top:2.4rem}
.form-submit .btn{border:0;cursor:pointer;font-size:1rem;padding:1.05em 3.2em}
.form-tel{max-width:760px;margin:2.8rem auto 0;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brass);padding:1.6rem 1.8rem}
.form-tel p{font-size:.9rem;color:var(--ink-soft)}
.form-tel .tel-big{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;font-size:1.7rem;color:var(--navy-900);display:inline-flex;align-items:center;gap:.45em;margin:.5rem 0}
.form-tel .tel-big i{font-size:.7em;color:var(--brass)}

/* ---------- インタビュー ---------- */
.owner-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-bottom:1.8rem}
.owner-name{font-family:var(--font-min);font-weight:700;font-size:1.6rem;color:var(--navy-900);line-height:1.4}
.owner-head .chips{margin:0}
.qa{max-width:860px}
.qa-item{padding:1.9rem 0;border-bottom:1px solid var(--line)}
.qa-item:last-child{border-bottom:none}
.qa-q{display:flex;gap:1rem;align-items:flex-start;font-weight:700;font-size:1.08rem;line-height:1.7;color:var(--navy-900);margin-bottom:.9rem}
.qa-q .qm{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--navy-900);color:var(--gold);font-family:var(--font-lat);display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-top:.1rem}
.qa-a{display:flex;gap:1rem;align-items:flex-start}
.qa-a .am{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--brass);color:var(--brass);background:var(--white);font-family:var(--font-lat);display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-top:.1rem}
.qa-a div{flex:1}
.qa-a p{font-size:.95rem;max-width:44em;margin-bottom:.7em}
.qa-a p:last-child{margin-bottom:0}

/* ---------- カテゴリ帯＋項目リスト（失敗しない等） ---------- */
.cat-block{margin-bottom:3.4rem}
.cat-block:last-child{margin-bottom:0}
.cat-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;background:var(--navy-900);color:#fff;padding:1.05rem 1.5rem;border-left:4px solid var(--gold);margin-bottom:1.5rem}
.cat-band h3{font-size:1.2rem;font-weight:700;line-height:1.5}
.cat-band .catch{font-family:var(--font-min);font-weight:600;color:var(--gold);font-size:.92rem;letter-spacing:.04em}
.point-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2.6rem}
.point-list li{display:flex;gap:.9rem;align-items:baseline;padding:.8rem .2rem;border-bottom:1px solid var(--line);font-size:.95rem;font-weight:500;line-height:1.7}
.point-list .pn{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-weight:700;color:var(--brass);font-size:.88rem;flex:0 0 1.7em}

/* ---------- ブランドコンセプト見出し ---------- */
.brand-head{font-family:var(--font-min);font-weight:700;font-size:1.15rem;color:var(--navy-900);line-height:1.7;margin-bottom:.6rem}
.brand-head em{font-style:normal;color:var(--brass)}

/* ---------- 1日の流れ（時刻タイムライン用） ---------- */
.tl-no--time{font-size:.82rem;letter-spacing:0}
.task-ul{list-style:none;margin-top:.2rem}
.task-ul li{position:relative;padding:.3rem 0 .3rem 1.35em;font-size:.95rem;font-weight:500;line-height:1.75}
.task-ul li::before{content:"\f0da";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--brass);position:absolute;left:.15em;top:.34rem;font-size:.8rem}

/* ---------- お知らせ詳細記事 ---------- */
.news-article{max-width:860px;margin:0 auto}
.news-article .figure{margin:0 0 2.2rem}
.news-title{font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:700;line-height:1.6;margin-bottom:.7rem}
.news-date{display:flex;align-items:center;gap:.9em;margin-bottom:2rem}
.news-date time{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-size:.85rem;color:var(--brass);letter-spacing:.03em}
.news-date .tag{font-size:.66rem;font-weight:700;background:var(--navy-800);color:#fff;padding:.25em .7em;border-radius:2px}
.quote-list{list-style:none;display:grid;gap:.7rem;margin:1.6rem 0}
.quote-list li{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brass);padding:.8rem 1.2rem;font-weight:600;font-size:.95rem}

/* ---------- レスポンシブ（下層共通分） ---------- */
@media(max-width:980px){
  .duo{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .checks{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .num-list{grid-template-columns:1fr}
  .support-grid{grid-template-columns:1fr}
  .point-list{grid-template-columns:1fr}
  .timeline::before{left:21px}
  .tl-phase{padding-left:64px}
  .tl-phase::before{left:14px}
  .tl-item{padding-left:64px}
  .tl-no{width:44px;height:44px;font-size:.9rem}
}