@charset "UTF-8";
/* =========================================================
   とっとり健活チャレンジ2026 LP
   企画提案書P.20「特設HPを開設」モックアップ準拠のフラットなチラシ風デザイン。
   カード枠・シャドウ・グラデーションは使わない。
   ========================================================= */
:root{
  --c-blue:#1a5fa8;      /* 見出し・ボタンの青 */
  --c-navy:#123c6e;      /* 濃い紺（本文強調） */
  --c-orange:#f39800;    /* 見出しアクセント・星 */
  --c-red:#e94709;       /* やってみよう！系の赤橙 */
  --c-yellow:#ffd900;    /* マーカー・ボタン・ドット・ストライプ */
  --c-green:#56b86f;     /* 「健活」の緑（チラシ準拠） */
  --c-text:#222;
  --c-bg:#fff;
  --container:920px;
}

/* 見出し内の部分色（Canvaモックアップ準拠・全見出し共通） */
.o{color:var(--c-orange);}
.b{color:var(--c-blue);}
.g{color:var(--c-green);}
.r{color:var(--c-red);}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{
  margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;
  color:var(--c-text);line-height:1.9;background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px;}
.container--narrow{max-width:640px;}

/* ---------- ページ上端の黄色ストライプ帯（モックアップ準拠） ---------- */
.top-stripe{height:10px;background:repeating-linear-gradient(90deg,
  var(--c-yellow) 0 7px, transparent 7px 13px);}

/* ---------- ヘッダー（白・テキストナビ・象ロゴ） ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  border-bottom:1px solid #eee;}
.header__inner{max-width:1280px;margin-inline:auto;padding:8px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;}
.header__logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.header__logo img{width:40px;height:40px;}
.header__logo-text{font-weight:900;color:var(--c-navy);font-size:14px;letter-spacing:0;white-space:nowrap;}
.nav__list{display:flex;align-items:center;gap:14px;font-weight:700;font-size:12px;
  color:var(--c-navy);white-space:nowrap;}
.nav__list a{padding:4px 0;transition:.15s;}
.nav__list a:hover{color:var(--c-blue);}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:34px;height:30px;
  background:none;border:none;cursor:pointer;padding:4px;}
.nav-toggle span{display:block;height:3px;background:var(--c-navy);border-radius:2px;transition:.3s;}

/* ---------- FV ---------- */
.fv{background:#fff;}
.fv__mv{max-width:1040px;margin-inline:auto;}
.fv__mv img{display:block;width:100%;height:auto;}
.fv__actions{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 20px 8px;}
.fv__period{display:inline-flex;align-items:center;gap:14px;font-weight:900;color:var(--c-navy);
  font-size:clamp(17px,3.6vw,26px);letter-spacing:.04em;
  background:linear-gradient(transparent 66%, var(--c-yellow) 66%);padding:0 10px 2px;}
.fv__period-tag{flex:0 0 auto;background:var(--c-orange);color:#fff;
  font-size:clamp(12px,2.2vw,16px);padding:5px 16px;border-radius:3px;letter-spacing:.1em;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- セクション共通 ---------- */
.section{padding:46px 0 40px;}

/* 見出し：黒太字＋部分色＋黄色マーカー（モックアップの手書き風） */
.sec-title{text-align:center;font-size:clamp(20px,3.6vw,27px);font-weight:900;
  letter-spacing:.04em;line-height:1.5;margin-bottom:26px;}
.sec-title .marker{background:linear-gradient(transparent 68%, var(--c-yellow) 68%);padding:0 2px;}

/* サブ見出し：色文字＋黄マーカー */
.sub-label{display:inline-block;font-weight:900;font-size:clamp(13px,2.4vw,15px);
  color:var(--c-orange);background:linear-gradient(transparent 68%, var(--c-yellow) 68%);
  padding:0 4px;letter-spacing:.05em;}
.sub-label--blue{color:var(--c-blue);}

/* ---------- 黄色ドット区切り線 ---------- */
.divider{border:0;height:8px;margin:0 auto;max-width:var(--container);width:calc(100% - 40px);
  background:radial-gradient(circle, var(--c-yellow) 0 3.5px, transparent 4px) left center/18px 8px repeat-x;}

/* ---------- もっと詳しくボタン ---------- */
.btn-more{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.06em;
  padding:8px 26px;border-radius:3px;transition:.15s;line-height:1.6;}
.btn-more::after{content:"➡";margin-left:6px;font-size:12px;}
.btn-more:hover{opacity:.85;}
.btn-more--yellow{background:var(--c-yellow);color:#222;}
.btn-more--blue{background:var(--c-blue);color:#fff;}
.btn-more--navy{background:var(--c-navy);color:#fff;}
.more-center{text-align:center;margin-top:20px;}

/* ---------- 元気ごはん ---------- */
.genki__collage{max-width:720px;margin:0 auto 26px;}
.genki__lead{text-align:center;font-weight:700;color:var(--c-navy);
  font-size:clamp(14px,2.6vw,16px);line-height:2;}
.genki__detail{max-width:720px;margin:34px auto 0;}
.flat-block + .flat-block{margin-top:26px;}
.flat-block__title{text-align:center;font-weight:900;color:var(--c-blue);
  font-size:16px;letter-spacing:.08em;margin-bottom:12px;}
.flat-block__title::before,.flat-block__title::after{content:"★";color:var(--c-orange);
  font-size:12px;margin:0 10px;vertical-align:2px;}
.star-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  font-weight:700;color:var(--c-navy);font-size:14.5px;}
.star-list li::before{content:"★";color:var(--c-orange);margin-right:6px;font-size:12px;}

/* 募集部門（色分け3カラム） */
.bumon{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:720px;margin-inline:auto;}
.bumon__item{border:2px solid;border-radius:4px;padding:14px 12px;text-align:center;background:#fff;}
.bumon__item h4{font-size:15px;font-weight:900;margin-bottom:6px;letter-spacing:.04em;}
.bumon__item p{font-size:12.5px;color:var(--c-navy);font-weight:700;line-height:1.7;}
.bumon__item--green{border-color:var(--c-green);}
.bumon__item--green h4{color:var(--c-green);}
.bumon__item--orange{border-color:var(--c-orange);}
.bumon__item--orange h4{color:var(--c-orange);}
.bumon__item--blue{border-color:var(--c-blue);}
.bumon__item--blue h4{color:var(--c-blue);}
@media (max-width:640px){.bumon{grid-template-columns:1fr;}}
.step-list{counter-reset:s;max-width:560px;margin:0 auto;display:grid;gap:8px;
  font-weight:700;color:var(--c-navy);font-size:14.5px;}
.step-list li{counter-increment:s;display:flex;gap:10px;align-items:baseline;}
.step-list li::before{content:counter(s);flex:0 0 auto;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;background:var(--c-orange);color:#fff;
  font-weight:900;font-size:13px;align-self:center;}
.prize-note{max-width:560px;margin:0 auto;font-size:14px;color:var(--c-navy);
  font-weight:700;display:grid;gap:6px;}
.prize-note li{border-bottom:1px dashed var(--c-orange);padding-bottom:6px;}
.period-line{text-align:center;font-weight:900;color:var(--c-navy);font-size:14px;margin-top:22px;}
.period-line .tag{display:inline-block;background:var(--c-orange);color:#fff;
  font-size:12px;padding:2px 12px;margin-right:10px;border-radius:2px;vertical-align:1px;}

/* ---------- 横並びチャレンジ（写真＋テキスト） ---------- */
.feature{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:center;
  max-width:var(--container);margin-inline:auto;padding-inline:20px;}
.feature--rev{grid-template-columns:1fr 340px;}
.feature__img img{width:100%;}
.feature__title{font-size:clamp(19px,3.4vw,25px);font-weight:900;letter-spacing:.04em;
  line-height:1.5;padding-bottom:10px;margin-bottom:12px;
  border-bottom:3px dotted var(--c-orange);}
.feature__text{font-size:14.5px;color:var(--c-text);margin-top:12px;}
.feature__actions{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap;}
.yt-badge{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:14px;color:#282828;}
.yt-badge::before{content:"▶";display:grid;place-items:center;width:34px;height:24px;
  background:#f00;color:#fff;border-radius:6px;font-size:11px;padding-left:2px;}
.kokoro-items{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--c-navy);}
.kokoro-items li::before{content:"✓";color:var(--c-orange);font-weight:900;margin-right:4px;}

/* 動画準備中ラベル */
.img-note{position:relative;}
.img-note::after{content:"動画は準備中です";position:absolute;right:8px;bottom:8px;
  background:rgba(18,60,110,.85);color:#fff;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:2px;}

/* ---------- 2カラム（フェス｜女性） ---------- */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:44px;
  max-width:var(--container);margin-inline:auto;padding-inline:20px;}
.twin__col{text-align:center;}
.twin__title{font-size:clamp(19px,3vw,23px);font-weight:900;color:var(--c-blue);
  letter-spacing:.05em;margin-bottom:8px;}
.twin__sub{margin-bottom:14px;}
.twin__stars{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;
  font-weight:700;color:var(--c-navy);font-size:13.5px;margin-bottom:14px;text-align:left;}
.twin__stars li::before{content:"★";color:var(--c-orange);margin-right:5px;font-size:11px;}
.twin__text{font-size:14px;color:var(--c-text);margin-bottom:14px;}
.twin__img{margin-bottom:18px;}
.twin__img img{width:100%;max-width:340px;margin-inline:auto;aspect-ratio:4/3;object-fit:cover;}
.twin__info{font-size:13px;color:var(--c-navy);font-weight:700;margin-bottom:14px;}

/* ---------- アンバサダー ---------- */
.persons{display:grid;grid-template-columns:repeat(2,minmax(200px,260px));gap:36px;justify-content:center;}
.person{text-align:center;}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:12px;}
.person__role{display:inline-block;font-weight:900;font-size:12px;color:var(--c-orange);
  background:linear-gradient(transparent 68%, var(--c-yellow) 68%);padding:0 4px;margin-bottom:4px;}
.person__name{font-size:17px;font-weight:900;color:var(--c-navy);display:block;}
.person small{color:#666;font-size:12px;line-height:1.6;display:block;margin-top:4px;}

/* ---------- フォーム ---------- */
.form{display:grid;gap:16px;}
.form__row{display:grid;gap:4px;}
.form__row label{font-weight:900;font-size:14px;color:var(--c-navy);}
.req{color:var(--c-red);font-size:12px;margin-left:6px;}
.form input,.form select,.form textarea{width:100%;padding:10px 12px;border:2px solid #d8dee6;
  border-radius:3px;font-family:inherit;font-size:15px;background:#fff;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--c-blue);}
.form__note{font-size:14px;font-weight:700;min-height:1.2em;margin:0;}
.form__note.is-error{color:var(--c-red);}
.form__note.is-success{color:var(--c-blue);}
.form .btn-more{border:none;cursor:pointer;font-family:inherit;justify-self:center;
  font-size:15px;padding:12px 46px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- フッター（白＋青帯・モックアップ準拠） ---------- */
.footer{margin-top:30px;border-top:1px solid #eee;padding-top:28px;}
.footer__inner{max-width:1040px;margin-inline:auto;padding:0 20px 26px;
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-start;justify-content:space-between;}
.footer__contact .label{font-size:12px;font-weight:900;color:var(--c-navy);}
.footer__contact .org{font-size:17px;font-weight:900;color:var(--c-navy);}
.footer__contact .addr{font-size:12px;color:#555;line-height:1.8;}
.footer__right{font-size:12px;color:#555;line-height:1.9;text-align:left;}
.footer__sns{display:flex;gap:14px;margin-top:6px;font-weight:900;font-size:12px;color:var(--c-blue);}
.footer__sns a{border-bottom:2px solid var(--c-yellow);padding-bottom:1px;}
.footer__band{height:14px;background:var(--c-blue);}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .nav-toggle{display:flex;}
  .nav{position:fixed;inset:66px 0 auto 0;background:#fff;border-bottom:1px solid #eee;
    transform:translateY(-130%);transition:transform .3s;max-height:calc(100vh - 59px);overflow:auto;z-index:99;}
  .nav.is-open{transform:translateY(0);}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 16px;font-size:14px;}
  .nav__list li{border-bottom:1px dashed #ddd;}
  .nav__list a{display:block;padding:12px 0;}
  .nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-toggle.is-active span:nth-child(2){opacity:0;}
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}

@media (max-width:768px){
  .feature,.feature--rev{grid-template-columns:1fr;gap:18px;}
  .feature--rev .feature__img{order:-1;}
  .twin{grid-template-columns:1fr;gap:40px;}
  .persons{grid-template-columns:repeat(2,1fr);gap:20px;}
  .footer__inner{flex-direction:column;}
}