@charset "UTF-8";
/* ==========================================================================
   KOTOHARE 勝浦特集 /katsuura/ 専用スタイル
   - 本体（kotohare.com ルート直下）は各HTMLにCSSインラインだが、
     特集は複数ページで同じ着せ替えを共有するため、この1ファイルに集約する。
   - 本体のページからは読み込まれないため、本体への影響はない。
   - 配色は「涼しさ」：白基調＋海の青、余白多め、夏の光。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   配色を変えたいときは、原則ここだけを触れば全ページに反映される。
   -------------------------------------------------------------------------- */
:root{
  /* 地色・面 */
  --kt-bg:#F7FBFD;          /* ページ地。ほんのり青みのある白 */
  --kt-surface:#FFFFFF;     /* カード・ボックス面 */
  --kt-surface-tint:#EDF5FA;/* 淡い水色の面。帯やセクション背景 */

  /* 文字 */
  --kt-ink:#12222E;         /* 見出し・本文の主色。黒より青寄りの濃紺 */
  --kt-ink-body:#33454F;    /* 本文 */
  --kt-ink-sub:#5D7280;     /* 補助テキスト */
  --kt-ink-mute:#8598A4;    /* キャプション・メタ */

  /* 海の青 */
  --kt-sea:#1B6E9B;         /* 主アクセント */
  --kt-sea-deep:#0E4A6C;    /* 濃い青。ホバー・強調 */
  --kt-sea-soft:#DCEBF4;    /* 面に敷ける薄い青 */

  /* 砂・光（差し色。使いすぎない） */
  --kt-sand:#EFE7D8;
  --kt-sun:#E9A23B;

  /* 罫 */
  --kt-line:#DCE7EE;
  --kt-line-soft:#EBF2F6;

  /* 書体（本体と同じファミリを使い、KOTOHAREの地続き感を保つ） */
  --kt-serif:'Shippori Mincho','Noto Serif JP',serif;
  --kt-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;

  /* レイアウト */
  --kt-max:1080px;          /* 通常セクション */
  --kt-max-read:720px;      /* 記事本文の可読幅 */
  --kt-hdr:60px;

  /* 余白スケール（余白多めの設計。セクション間はこの値で統一） */
  --kt-gap-s:12px;
  --kt-gap-m:24px;
  --kt-gap-l:clamp(56px,9vw,104px);

  --kt-radius:10px;
  --kt-shadow:0 6px 28px rgba(18,52,74,.07);
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--kt-sans);
  background:var(--kt-bg);
  color:var(--kt-ink-body);
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* 特集内リンクの既定 */
.kt-link{color:var(--kt-sea);text-decoration:underline;text-underline-offset:2px}
.kt-link:hover{color:var(--kt-sea-deep)}

/* [TODO] マーカー。原稿差し替え前の箇所を実装者・編集者が一目で見つけられるようにする。
   公開前に、この class を持つ要素が残っていないか必ず確認すること。 */
.kt-todo{
  display:inline-block;
  background:#FFF3D6;
  border:1px dashed var(--kt-sun);
  color:#8A5A12;
  font-size:.78rem;
  line-height:1.7;
  padding:2px 8px;
  border-radius:4px;
  font-family:var(--kt-sans);
}
.kt-todo-block{
  display:block;
  background:#FFF8E9;
  border:1px dashed var(--kt-sun);
  color:#8A5A12;
  font-size:.86rem;
  padding:16px 18px;
  border-radius:var(--kt-radius);
  margin:var(--kt-gap-m) 0;
}

/* --------------------------------------------------------------------------
   3. ヘッダー（特集ロゴ＋本体への戻り導線）
   -------------------------------------------------------------------------- */
.kt-hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(247,251,253,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--kt-line);
}
.kt-hdr-in{
  max-width:var(--kt-max);margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
  height:var(--kt-hdr);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.kt-logo{display:flex;flex-direction:column;line-height:1.25}
.kt-logo-main{
  font-family:var(--kt-serif);font-weight:700;
  font-size:clamp(15px,2.6vw,18px);letter-spacing:.14em;color:var(--kt-sea-deep);
}
.kt-logo-sub{font-size:9.5px;letter-spacing:.18em;color:var(--kt-ink-mute);margin-top:2px}
.kt-hdr-back{
  font-size:11.5px;letter-spacing:.06em;color:var(--kt-ink-sub);
  white-space:nowrap;padding:6px 0;transition:color .2s;
}
.kt-hdr-back:hover{color:var(--kt-sea)}

/* --------------------------------------------------------------------------
   4. ファーストビュー
   -------------------------------------------------------------------------- */
.kt-hero{position:relative;width:100%;background:var(--kt-sea-deep);overflow:hidden}
.kt-hero-img{
  width:100%;
  height:clamp(420px,78svh,640px);
  object-fit:cover;
  display:block;
}
.kt-hero-cap{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(72px,14vw,150px) 0 clamp(28px,5vw,52px);
  background:linear-gradient(180deg,rgba(8,32,48,0) 0%,rgba(8,32,48,.10) 30%,rgba(8,32,48,.62) 100%);
}
.kt-hero-in{max-width:var(--kt-max);margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.kt-hero-sub{
  display:inline-block;
  font-size:clamp(11px,2.2vw,12.5px);letter-spacing:.16em;
  color:#EAF4FA;background:rgba(14,74,108,.72);
  padding:6px 12px;margin-bottom:14px;border-radius:3px;
}
.kt-hero-main{
  font-family:var(--kt-serif);font-weight:700;color:#fff;
  font-size:clamp(1.6rem,6.4vw,3.1rem);
  line-height:1.5;letter-spacing:.02em;
  text-shadow:0 2px 22px rgba(0,0,0,.36);
}

/* --------------------------------------------------------------------------
   5. セクション共通
   -------------------------------------------------------------------------- */
.kt-sec{padding:var(--kt-gap-l) clamp(16px,4vw,28px)}
.kt-sec-in{max-width:var(--kt-max);margin:0 auto}
.kt-sec-narrow{max-width:var(--kt-max-read);margin:0 auto}
.kt-sec-tint{background:var(--kt-surface-tint)}

.kt-sec-label{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--kt-sea);margin-bottom:10px;
}
.kt-sec-ttl{
  font-family:var(--kt-serif);font-weight:600;color:var(--kt-ink);
  font-size:clamp(1.18rem,3.4vw,1.7rem);line-height:1.65;
  margin-bottom:var(--kt-gap-m);
}
.kt-sec-lead{font-size:1rem;line-height:2.05;color:var(--kt-ink-body)}
.kt-sec-lead + .kt-sec-lead{margin-top:1.1em}

/* 補足の一文（例：更新のお知らせ）。本文より一段引いた見え方にする */
.kt-note{
  margin-top:var(--kt-gap-m);
  padding-left:14px;
  border-left:2px solid var(--kt-sea-soft);
  font-size:.88rem;line-height:1.95;color:var(--kt-ink-sub);
}

/* --------------------------------------------------------------------------
   6. 記事カード
   -------------------------------------------------------------------------- */
.kt-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(18px,3vw,28px);
}
.kt-card{
  background:var(--kt-surface);border:1px solid var(--kt-line);
  border-radius:var(--kt-radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.kt-card:hover{transform:translateY(-3px);box-shadow:var(--kt-shadow);border-color:var(--kt-sea-soft)}
.kt-card-iw{aspect-ratio:16/10;overflow:hidden;background:var(--kt-sea-soft)}
.kt-card-iw img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kt-card:hover .kt-card-iw img{transform:scale(1.04)}
.kt-card-bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.kt-card-cat{font-size:10px;letter-spacing:.16em;color:var(--kt-sea);font-weight:500}
.kt-card-ttl{
  font-family:var(--kt-serif);font-size:1.02rem;font-weight:600;
  line-height:1.7;color:var(--kt-ink);
}
.kt-card-lead{font-size:.86rem;line-height:1.85;color:var(--kt-ink-sub)}
.kt-card-meta{font-size:10.5px;color:var(--kt-ink-mute);margin-top:auto;padding-top:6px}

/* --------------------------------------------------------------------------
   7. 食レーベルの帯「涼しい町の、熱いめし。」
   -------------------------------------------------------------------------- */
.kt-label-band{
  background:var(--kt-sea-deep);color:#fff;
  padding:var(--kt-gap-l) clamp(16px,4vw,28px);
}
.kt-label-in{max-width:var(--kt-max);margin:0 auto;text-align:center}
.kt-label-eyebrow{font-size:10.5px;letter-spacing:.24em;color:#9FCBE2;margin-bottom:12px}
.kt-label-ttl{
  font-family:var(--kt-serif);font-weight:700;
  font-size:clamp(1.4rem,5vw,2.3rem);line-height:1.6;letter-spacing:.03em;
}
.kt-label-desc{
  margin:16px auto 0;max-width:640px;
  font-size:.94rem;line-height:2.05;color:#D8E9F3;
}
.kt-label-items{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;
}
.kt-label-item{
  font-size:12px;letter-spacing:.06em;color:#EAF4FA;
  border:1px solid rgba(234,244,250,.4);border-radius:999px;padding:6px 16px;
}

/* --------------------------------------------------------------------------
   8. 蔵（鳴海／東灘醸造）セクション
   -------------------------------------------------------------------------- */
/* 2カラム（蔵の写真が入ったときに使う。写真未取得の間は kt-kura-solo を使用） */
.kt-kura{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.kt-kura-iw{border-radius:var(--kt-radius);overflow:hidden;background:var(--kt-sea-soft)}
.kt-kura-iw img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kt-kura-body p{font-size:.98rem;line-height:2.1;color:var(--kt-ink-body)}
.kt-kura-body p + p{margin-top:1.05em}

/* 画像なしの1カラム（中央寄せ）。写真が入ったら .kt-kura に戻す */
.kt-kura-solo{max-width:600px;margin:0 auto;text-align:center}
.kt-kura-solo p{font-size:.98rem;line-height:2.1;color:var(--kt-ink-body)}
.kt-kura-solo p + p{margin-top:1.05em}

/* ボタン */
.kt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--kt-sea);color:#fff;
  font-size:.9rem;font-weight:500;letter-spacing:.04em;
  padding:14px 30px;border-radius:999px;border:1px solid var(--kt-sea);
  transition:background .25s,border-color .25s,transform .2s;
  cursor:pointer;font-family:var(--kt-sans);
}
.kt-btn:hover{background:var(--kt-sea-deep);border-color:var(--kt-sea-deep);transform:translateY(-1px)}
.kt-btn-ghost{background:transparent;color:var(--kt-sea)}
.kt-btn-ghost:hover{background:var(--kt-sea);color:#fff}
.kt-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--kt-gap-m)}
.kt-btn-row-center{justify-content:center}

/* --------------------------------------------------------------------------
   9. アクセス
   -------------------------------------------------------------------------- */
/* 左に地図・右に情報の2カラム（モバイルは縦積み） */
.kt-access-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3.5vw,40px);align-items:stretch;
}
.kt-map{
  border-radius:var(--kt-radius);overflow:hidden;
  border:1px solid var(--kt-line);background:var(--kt-sea-soft);
  min-height:300px;
}
.kt-map iframe{display:block;width:100%;height:100%;min-height:300px;border:0}

.kt-access{
  background:var(--kt-surface);border:1px solid var(--kt-line);
  border-radius:var(--kt-radius);padding:clamp(22px,4vw,34px);
}
.kt-access dl{display:grid;grid-template-columns:4.5em 1fr;gap:14px 16px;font-size:.92rem}
.kt-access dt{color:var(--kt-ink-sub);font-weight:500}
.kt-access dd{color:var(--kt-ink-body);line-height:1.95}

/* --------------------------------------------------------------------------
   10. 記事ページ
   -------------------------------------------------------------------------- */
.kt-article{max-width:var(--kt-max-read);margin:0 auto;padding:0 clamp(16px,4vw,28px) var(--kt-gap-l)}
.kt-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.8rem;color:var(--kt-ink-mute);margin:22px 0;
}
.kt-breadcrumb a{transition:color .2s}
.kt-breadcrumb a:hover{color:var(--kt-sea)}
.kt-article h1{
  font-family:var(--kt-serif);font-size:clamp(1.28rem,4.6vw,1.72rem);
  font-weight:600;line-height:1.7;color:var(--kt-ink);margin:6px 0 12px;
}
.kt-article-meta{
  font-size:.78rem;color:var(--kt-ink-mute);
  padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--kt-line);
}
.kt-article-hero{width:100%;aspect-ratio:2/1;object-fit:cover}
.kt-body p{font-size:1.03rem;line-height:2.05;margin-bottom:1.35em;color:var(--kt-ink-body)}
.kt-body h2{
  font-family:var(--kt-serif);font-size:1.14rem;font-weight:600;color:var(--kt-ink);
  margin:2.2em 0 .7em;padding-left:13px;border-left:3px solid var(--kt-sea);line-height:1.65;
}
.kt-body h3{
  font-family:var(--kt-serif);font-size:1.02rem;font-weight:600;color:var(--kt-ink);
  margin:1.8em 0 .6em;line-height:1.7;
}
.kt-body figure{margin:1.8em 0}
.kt-body figure img{width:100%;border-radius:var(--kt-radius)}
.kt-body figcaption{font-size:.76rem;color:var(--kt-ink-mute);padding-top:8px;text-align:center}
.kt-body blockquote{
  background:var(--kt-sea-soft);border-left:3px solid var(--kt-sea);
  padding:16px 20px;margin:1.8em 0;border-radius:0 var(--kt-radius) var(--kt-radius) 0;
  font-size:.94rem;line-height:2;color:var(--kt-ink-body);
}

/* 記事末尾の固定パーツ：この記事の店・生産者 */
.kt-producer{
  background:var(--kt-surface);border:1px solid var(--kt-line);
  border-left:3px solid var(--kt-sea);
  border-radius:var(--kt-radius);padding:clamp(22px,4vw,30px);margin:var(--kt-gap-l) 0 0;
}
.kt-producer h2{
  font-family:var(--kt-serif);font-size:1.02rem;font-weight:600;color:var(--kt-ink);
  margin:0 0 16px;padding:0 0 12px;border:0;border-bottom:1px solid var(--kt-line);
}
.kt-producer dl{display:grid;grid-template-columns:5.5em 1fr;gap:8px 14px;font-size:.9rem;line-height:1.9}
.kt-producer dt{color:var(--kt-ink-sub);font-weight:500}
.kt-producer dd{color:var(--kt-ink-body)}

/* --------------------------------------------------------------------------
   11. フェア告知枠
   既定は非表示。HTML側で hidden 属性を外すと表示される。
   -------------------------------------------------------------------------- */
.kt-fair{
  background:var(--kt-sand);border:1px solid #E0D3BC;
  border-radius:var(--kt-radius);padding:clamp(22px,4vw,32px);
}
.kt-fair[hidden]{display:none}
.kt-fair-eyebrow{font-size:10.5px;letter-spacing:.2em;color:#8A6A2F;margin-bottom:10px}
.kt-fair-ttl{font-family:var(--kt-serif);font-size:1.1rem;font-weight:600;color:var(--kt-ink);line-height:1.65}
.kt-fair-desc{font-size:.92rem;line-height:2;color:var(--kt-ink-body);margin-top:10px}

/* --------------------------------------------------------------------------
   12. 本体への回遊＋フッター
   -------------------------------------------------------------------------- */
.kt-backlink{
  background:var(--kt-surface);border-top:1px solid var(--kt-line);
  padding:var(--kt-gap-l) clamp(16px,4vw,28px);text-align:center;
}
.kt-backlink-in{max-width:var(--kt-max-read);margin:0 auto}
.kt-backlink-ttl{
  font-family:var(--kt-serif);font-size:1.06rem;font-weight:600;color:var(--kt-ink);
  line-height:1.7;margin-bottom:10px;
}
.kt-backlink-desc{font-size:.9rem;line-height:1.95;color:var(--kt-ink-sub);margin-bottom:var(--kt-gap-m)}

.kt-ftr{background:#0E1F2B;color:#8FA6B4;padding:clamp(38px,6vw,58px) clamp(16px,4vw,28px) 24px}
.kt-ftr-in{max-width:var(--kt-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.kt-ftr-logo{font-family:var(--kt-serif);font-size:15px;font-weight:700;color:#fff;letter-spacing:.14em;margin-bottom:8px}
.kt-ftr-desc{font-size:12px;line-height:1.95;color:#7C93A2}
.kt-ftr-links{display:flex;flex-direction:column;gap:9px}
.kt-ftr-links a{font-size:12px;color:#8FA6B4;transition:color .2s}
.kt-ftr-links a:hover{color:#fff}
.kt-ftr-btm{
  max-width:var(--kt-max);margin:28px auto 0;padding-top:16px;border-top:1px solid #22384A;
  font-size:10.5px;color:#6E8696;text-align:center;letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   13. レスポンシブ（スマホファースト運用のための上書き）
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .kt-kura{grid-template-columns:1fr}
  .kt-kura-iw{order:-1}
  /* アクセスは縦積み。地図を先に見せる */
  .kt-access-grid{grid-template-columns:1fr}
  .kt-map{min-height:260px}
  .kt-map iframe{min-height:260px}
}
@media (max-width:520px){
  :root{--kt-hdr:54px}
  .kt-hero-img{height:clamp(380px,72svh,520px)}
  .kt-access dl,.kt-producer dl{grid-template-columns:1fr;gap:2px 0}
  .kt-access dt,.kt-producer dt{margin-top:10px}
  .kt-access dt:first-child,.kt-producer dt:first-child{margin-top:0}
  .kt-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}