/**
 * 標準テーマ。
 *
 * 村本海事のHP（8989fishing.nojimabouhatei.com）の意匠を土台に、どの船宿でも
 * 使える形にしたもの。色は配色（sites.color_scheme）で差し替わる。
 * 旧CMSの small/medium/wide.css は同じセレクタを3ファイルに書き写す作りで
 * 保守が難しかったため引き継がず、1本のモバイルファーストとして書き直した。
 * 色・字送り・余白は現行HPの実測値に合わせている。
 *
 * 現行HPからの意図的な変更:
 * - .container が width:1000px + margin:0 140px の固定で、広い画面だと
 *   中央に来ず端に寄っていた。max-width + auto に直す
 */

/* ============================================================
   配色（sites.color_scheme）
   テーマ（見た目の形）とは別に色だけ差し替える。body のクラスで決まり、
   基調色は sites.brand_color の style で上書きできる
   ============================================================ */
.sb-color-ocean {
  --sb-base: #0F2F6C;
  --sb-accent: #53C8E0;
  --sb-strong: #D98201;
  --sb-tint-a: #F7F6EA;
  --sb-tint-b: #EDF6F7;
}
.sb-color-sunrise {
  --sb-base: #123A63;
  --sb-accent: #F08A24;
  --sb-strong: #D64524;
  --sb-tint-a: #FDF4E6;
  --sb-tint-b: #FBEFE2;
}
.sb-color-deepsea {
  --sb-base: #16202E;
  --sb-accent: #5B8FB9;
  --sb-strong: #C9762F;
  --sb-tint-a: #F2F4F6;
  --sb-tint-b: #E8EDF2;
}
.sb-color-forest {
  --sb-base: #1F4D3A;
  --sb-accent: #7FB069;
  --sb-strong: #D98201;
  --sb-tint-a: #F5F7EE;
  --sb-tint-b: #EAF2E8;
}
.sb-color-sakura {
  --sb-base: #6E2639;
  --sb-accent: #E0899B;
  --sb-strong: #C06014;
  --sb-tint-a: #FBF3F2;
  --sb-tint-b: #F6E9EC;
}

/* ============================================================
   デザイントークン
   ============================================================ */
/* 配色は body に付く sb-color-* が決める。:root で受けると body の変数が
   届かないので、テーマの色トークンも body 側で組み立てる */
:root, body {
  /* 色は配色（body の sb-color-*）から引く。単独で開いたときのために既定も置く */
  --mk-navy: var(--sb-base, #0F2F6C);      /* 基調。見出し・濃い帯 */
  --mk-ink: #17254F;                        /* 本文 */
  --mk-cyan: var(--sb-accent, #53C8E0);    /* アクセント。ボタン・縦書き装飾 */
  --mk-orange: var(--sb-strong, #D98201);  /* 強調。注意書き・予約導線 */
  --mk-cream: var(--sb-tint-a, #F7F6EA);   /* 背景（生成り） */
  --mk-aqua: var(--sb-tint-b, #EDF6F7);    /* 背景（水色） */
  --mk-line: #DDE3EA;
  --mk-gray: #666;

  --mk-container: 1000px;
  /* ヘッダーの内側の幅。メインビジュアルの最大幅もこれに合わせる。
     PC（1100px 以上）のヘッダーは現行HPに合わせて 1250px なので、
     ここを唯一の定義元にして両方が同じ値を見るようにする */
  --mk-wide: 1250px;
  --mk-font: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic,
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, verdana, sans-serif;
  --mk-font-en: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   土台
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--mk-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mk-ink);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
/* hidden を付けたものは必ず隠す。display の指定で打ち消されると
   「隠したつもりが重なって見えている」不具合になる */
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* 画面幅で出し分ける改行。現行HPの br-sp / br-tb / br-pc を踏襲 */
.mk-br-sp { display: inline; }
.mk-br-tb, .mk-br-pc { display: none; }

/* ============================================================
   レイアウト
   ============================================================ */
/* 中身の幅を --mk-container ちょうどにする。左右の余白は狭い画面で
   端に張り付かないためのもので、広い画面では中身を削らないよう外側に足す */
.mk-container {
  width: 100%;
  max-width: calc(var(--mk-container) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* 帯の模様（ThemeRegistry の patterns）。
   テーマを1本に書き直したときに落としていたので入れ直す */
/* 波は帯の下端に1枚だけ敷く（繰り返さない）。
   地色は帯側の色クラスが塗るので、ここでは絵だけを重ねる。
   高さ530pxは現行HPの実測値。中身がこれより低い帯では波が上へ回り込むため、
   背景の描画をパディングの内側までに留めて縁からはみ出さないようにする */
.sb-bg-pattern-wave,
.sb-bg-pattern-wave-light {
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 530px;
}
/* 波は地色とセットで1つの模様。現行HPは「クリーム地＋濃い波」と
   「水色地＋透けた波」の2種類しか使っていないので、地色もここで持たせる
   （船宿が色と模様を別々に選んで、ちぐはぐな取り合わせになるのを防ぐ） */
.sb-bg-pattern-wave {
  background-color: var(--mk-cream);
  background-image: url("img/top_wave_ill_back.png");
}
.sb-bg-pattern-wave-light {
  background-color: var(--mk-aqua);
  background-image: url("img/top_wave_ill_transparent_back.png");
}
/* プランの地。現行HPは白から薄い水色へのグラデーション */
.sb-bg-pattern-plan {
  background-image: linear-gradient(90deg, #fff 30%, #D1FDFE 100%);
}

/* 帯。ブロックごとの背景色はレイアウト側が付けるクラスで切り替える */
.mk-section { padding-block: 40px; position: relative; overflow: hidden; }
.mk-bg-cream { background: var(--mk-cream); }
.mk-bg-aqua { background: var(--mk-aqua); }
.mk-bg-navy { background: var(--mk-navy); color: #fff; }
.mk-bg-white { background: #fff; }

/* ============================================================
   見出し
   ============================================================ */
.mk-ttl { text-align: center; margin-bottom: 28px; }
.mk-ttl__en {
  display: inline-block;
  position: relative;
  padding-inline: 30px;
  font-family: var(--mk-font-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mk-navy);
}
/* 英字の両脇の横線。現行HPの実測（幅20px・太さ2px） */
.mk-ttl__en::before,
.mk-ttl__en::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.mk-ttl__en::before { left: 0; }
.mk-ttl__en::after { right: 0; }
.mk-ttl__jp {
  font-size: 22px;
  font-weight: 700;
  color: var(--mk-navy);
  line-height: 1.4;
}
/* 濃い地の帯（sb-on-dark）の中では白抜き。地の色は船宿が選ぶので、
   帯ごとに明るさを見てクラスが付く */
.sb-on-dark .mk-ttl__en,
.sb-on-dark .mk-ttl__jp { color: #fff; }
.sb-on-dark .sb-empty { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   ボタン
   ============================================================ */
.mk-btn {
  display: inline-block;
  min-width: 240px;
  padding: 10px 24px;
  border-radius: 900px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--mk-cyan);
  transition: opacity 0.2s;
}
.mk-btn:hover { opacity: 0.85; }
/* 色は配色（sb-color-*）から引く。accent が既定 */
.mk-btn--base, .mk-btn--navy { background: var(--mk-navy); }
.mk-btn--strong, .mk-btn--orange { background: var(--mk-orange); }
.mk-btn--accent { background: var(--mk-cyan); }
/* 釣果のボタンは釣針の絵を頭に置く */
.mk-header__actions .mk-btn--accent::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 20px;
  margin: -3px 5px 0 0;
  background: url("img/head_icon.png") no-repeat center / contain;
  vertical-align: middle;
}
/* 予約のボタンは末尾に▶。Material Icons を読ませず三角形で描く */
.mk-header__actions .mk-btn--navy::after,
.mk-header__actions .mk-btn--base::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-block: 7px solid transparent;
  border-left: 11px solid currentColor;
  vertical-align: middle;
}
/* Instagram へ送るボタン。文字の左にアイコンを添える */
.mk-btn--instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 384px;
  max-width: 100%;
  font-size: 20px;
}
.mk-btn--instagram::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("img/instagram_icon.png") no-repeat center / contain;
}
.mk-btn-wrap { margin-top: 28px; text-align: center; }
/* 節の下に置く大きめのボタン。現行HPは 384px で揃えている */
.mk-btn-wrap .mk-btn { min-width: min(384px, 100%); font-size: 18px; padding: 8px 24px; }
.mk-btn-wrap .mk-btn + .mk-btn { margin-top: 12px; }

/* ============================================================
   帯の脇の飾り（watermark_text / watermark_image）
   現行HPの .vertical_txt（縦書きの英字）・.alphabet_square（小さな四角）・
   舵の絵。文字も絵も管理画面から変えられ、帯の先頭ブロックの設定で決まる
   ============================================================ */
.sb-band { position: relative; }
.sb-has-watermark { overflow: hidden; }
/* 飾りは文字の後ろに敷く。前に出すと本文に重なって読めなくなる。
   帯の中身（.sb-block）を前に出して、飾りだけを背面へ回す */
.sb-watermark { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 0; }
.sb-has-watermark > .sb-block { position: relative; z-index: 1; }
.sb-watermark__text {
  display: none;         /* 狭い画面では出さない（本文にかぶる） */
  position: absolute;
  top: 4px;
  left: 10px;
  writing-mode: vertical-rl;
  /* 文字を横に倒して流す。既定（mixed）だと英字が1字ずつ正立して
     帯が太くなり、現行HPより幅を食う */
  text-orientation: sideways;
  font-family: var(--mk-font-en);
  font-size: 80px;
  font-weight: 700;
  /* 現行HPは斜体。まっすぐだと飾りというより見出しに見える */
  font-style: italic;
  /* 縦書きでは line-height が帯の太さになる。1 にすると字送りぶん
     そのまま 80px 幅を取ってしまうので、字の実寸に任せる */
  line-height: 0.7;
  white-space: nowrap;
  color: var(--mk-cyan);
  opacity: 0.2;
}
/* 縦書きの上に乗る小さな四角（現行HPの alphabet_square） */
.sb-watermark__text::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -10px;
  width: 56px;
  height: 25px;
  background: url("img/alphabet_back.png") no-repeat center / contain;
}
/* 現行HPは中身の幅（1000px）を基準に、その右端から少し内側へ置いている。
   画面端を基準にすると広い画面で外へ流れてしまう */
.sb-watermark__image {
  position: absolute;
  top: 0;
  /* 狭い画面では画面の右端に収める。中身の幅を基準にした位置だと、
     画面がコンテナより狭いときに外へ流れ出てしまう */
  right: 0;
  width: var(--sb-wm-size, 120px);
  height: var(--sb-wm-size, 120px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}
/* 中身の幅に余裕がある画面では、中身の右端を基準に置く
   （画面端だと広い画面で中身から離れて流れてしまう） */
@media (min-width: 1080px) {
  .sb-watermark__image {
    right: auto;
    left: 50%;
    transform: translateX(calc(var(--mk-container) / 2 - 100% + var(--sb-wm-out, 40px)));
  }
}

/* ============================================================
   メインビジュアル
   ============================================================ */
/* ============================================================
   メインビジュアル（キービジュアル）

   見え方は 3 つの軸の掛け合わせで決まる（HeroSettings が定義元）。
   どの組み合わせでも崩れないよう、軸ごとに独立したクラスで書く。
   - 型  : --single（切り替え）/ --slider（横に流す）/ --peek（前後が見える）
   - 幅  : --full（端まで）/ --container（ヘッダーと同じ幅）
   - 重ね: --overlay（ヘッダーが写真に乗る）
   ============================================================ */

.mk-hero {
  position: relative;
  /* 写真の高さ。幅いっぱいのときだけ切り抜いて高さをそろえる */
  --mk-hero-h: min(78vh, 720px);
  --mk-hero-h-min: 380px;
}

/* --- 幅 ------------------------------------------------- */
/* 画角はアップロードされる絵によってまちまち。ヘッダー幅のときは枠の高さを
   決め打ちせず絵の高さで決まるようにする（切り抜きも余白も出ない） */
.mk-hero--container {
  /* ヘッダーの中身（.mk-header__inner）と左右の端をそろえる。
     あちらは max-width に加えて左右 16px の内側余白を持つので、
     こちらも同じ分だけ内側に入れる。

     写真の最大幅は船宿が設定できる（--mk-hero-max）が、ヘッダーより広くすると
     ヘッダーの左端と写真の左端がずれて見えるので、ヘッダー幅で頭打ちにする。
     既定値だけを直しても、既に保存済みの設定（広い値）が残るため画面側で抑える */
  max-width: calc(min(var(--mk-hero-max, var(--mk-wide)), var(--mk-wide)) + 32px);
  margin-inline: auto;
  padding-inline: 16px;
}
.mk-hero--full { max-width: none; }
/* 幅いっぱいのときは、横長の写真をそのまま伸ばすと縦が足りないので切り抜く */
.mk-hero--full .mk-hero__slide img {
  height: var(--mk-hero-h);
  min-height: var(--mk-hero-h-min);
  object-fit: cover;
}

/* --- 写真の枠 -------------------------------------------- */
/* 写真とその上に重なるものをまとめる枠。角の切り抜きはここで行い、
   下端に積むもの（mk-hero__bottom）は枠の中に置いて写真の上に重ねる */
.mk-hero__frame { position: relative; overflow: hidden; }
.mk-hero__track { display: flex; transition: transform 0.7s ease-out; }
.mk-hero__slide { flex-shrink: 0; width: 100%; }
.mk-hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* --- 型 ------------------------------------------------- */
/* 1枚だけのときは切り替えないので、動かす仕掛けを消しておく */
.mk-hero.is-single .mk-hero__track { transition: none; }
/* 切り替え型は重ねてふわりと入れ替える。横に動かないので文字が読みやすい */
.mk-hero--single .mk-hero__track { display: block; position: relative; }
.mk-hero--single .mk-hero__slide { width: 100%; }
.mk-hero--single .mk-hero__slide + .mk-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.mk-hero--single .mk-hero__slide.is-active { opacity: 1; z-index: 1; }
.mk-hero--single .mk-hero__slide + .mk-hero__slide img { height: 100%; object-fit: cover; }

/* 横並び型。前後の写真が少し見えるので、他にも見どころがあると伝わる。
   はみ出した分は枠で切る（切らないと隣の写真が端まで流れて「のぞいている」に見えない） */
.mk-hero--peek .mk-hero__track { gap: 12px; }
.mk-hero--peek .mk-hero__slide { width: 78%; }
.mk-hero--peek .mk-hero__slide img {
  height: min(54vh, 460px);
  object-fit: cover;
}
/* 前後は少し引っ込ませて、真ん中が主役だと分かるようにする */
.mk-hero--peek .mk-hero__slide { opacity: 0.45; transition: opacity 0.5s ease; }
.mk-hero--peek .mk-hero__slide.is-active { opacity: 1; }
/* 横並びのときは文字を写真に重ねない（前後にまたがって読めなくなる） */
.mk-hero--peek .mk-hero__title,
.mk-hero--peek .mk-hero__copy,
.mk-hero--peek .mk-hero__place { display: none; }

/* --- 写真の下端に積むもの --------------------------------- */
/* キャッチコピー・所在地・名乗りは、船宿が出す／出さないを個別に決められる。
   ひとつずつ絶対配置にすると、出す組み合わせが変わるたびに重なるため
   （全部出したときが最も重なる）、ひとつの器に入れて縦に積む。

   器の地は下へ向かって濃くなる階調ひとつだけ。中身が1つでも3つでも、
   文字の下は必ず暗いので、それぞれが単体でも読める */
.mk-hero__bottom {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px max(5%, 20px) 22px;
  background: linear-gradient(rgba(15, 47, 108, 0), rgba(15, 47, 108, 0.72) 45%);
  /* 器そのものは写真を覆うだけなので触らせない。中の文字は選べるようにする
     （所在地をコピーしたい人がいる） */
  pointer-events: none;
}
.mk-hero__bottom > * { pointer-events: auto; }
.mk-hero__copy {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
/* 切り替えの点。写真の下端の器の中で、いちばん下に積まれる
   （絶対配置にすると、上の文字が増えたときに重なる） */
.mk-hero__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.mk-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.mk-hero__dot.is-active { background: #fff; }
/* 横並び型は写真の外に点を置く（写真の上だと前後に重なって見えない）。
   地が明るいので点の色を濃くする */
.mk-hero--peek .mk-hero__dots { margin-top: 12px; }
.mk-hero--peek .mk-hero__lead { margin-top: 16px; }
.mk-hero--peek .mk-hero__dot { background: rgba(23, 37, 79, 0.25); }
.mk-hero--peek .mk-hero__dot.is-active { background: var(--mk-navy); }

/* 写真の上に重ねる船宿名。筆文字風のフォントで大きく、影で写真から浮かせる。
   文字の大きさは画面幅に追随させ、スマホでも写真からはみ出さない */
/* 船宿名。置き方・書体・大きさ・字間・色を船宿が選べる。
   選んだ値はテンプレートが style 属性で流し込む（--mk-title-*） */
.mk-hero__title {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-weight: 400;
  /* 既定を100として、選んだ割合で伸び縮みさせる */
  font-size: calc(clamp(40px, 8vw, 116px) * var(--mk-title-size, 100) / 100);
  line-height: 1.05;
  letter-spacing: var(--mk-title-tracking, 0.04em);
  color: var(--mk-title-color, #fff);
  /* 明るい写真でも読めるよう影を敷く。色を濃くしたときも輪郭が残る */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* 書体。船宿が「筆文字」「明朝」「ゴシック」から選ぶ */
.mk-hero__title--font-brush { font-family: "Yuji Boku", "Yu Mincho", "Hiragino Mincho ProN", serif; }
.mk-hero__title--font-mincho { font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif; }
.mk-hero__title--font-gothic {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* 置き方。微調整（--mk-title-dx / dy）は見本の位置からのずらし幅 */
.mk-hero__title--left {
  top: 6%;
  left: 5%;
  transform: translate(var(--mk-title-dx, 0), var(--mk-title-dy, 0));
}
.mk-hero__title--center {
  top: 46%;
  left: 50%;
  transform: translate(calc(-50% + var(--mk-title-dx, 0)), calc(-50% + var(--mk-title-dy, 0)));
  text-align: center;
  white-space: nowrap;
}

/* 縦書き。日本語の船宿名が映える。
   writing-mode だけでは英数字が横に寝るので、混在は許容する
   （船宿名は日本語が主なので、寝かせない指定は入れない） */
.mk-hero__title--vertical-right,
.mk-hero__title--vertical-left {
  writing-mode: vertical-rl;
  top: 8%;
  /* 縦に伸びすぎて写真から出ないよう、高さの範囲に収める */
  max-height: 78%;
}
.mk-hero__title--vertical-right {
  right: 6%;
  transform: translate(var(--mk-title-dx, 0), var(--mk-title-dy, 0));
}
.mk-hero__title--vertical-left {
  left: 6%;
  transform: translate(var(--mk-title-dx, 0), var(--mk-title-dy, 0));
}

@media (max-width: 767px) {
  /* 狭い画面では船宿名が写真からはみ出し、下端の文字とも重なる。
     中央寄せは1行に保つ指定（nowrap）のせいで特に溢れやすいので、
     折り返しを許して幅の中に収める */
  .mk-hero__title {
    max-width: 90%;
    /* 画面が狭いほど、選んだ大きさをそのまま出すと収まらない。
       目一杯まで上げても下端の文字に届かないよう、上限で頭打ちにする
       （min で抑えないと160%指定のときに重なる） */
    font-size: min(
      calc(clamp(30px, 9vw, 56px) * var(--mk-title-size, 100) / 100),
      13vw
    );
  }
  .mk-hero__title--center {
    white-space: normal;
    /* 下端の文字と重ならないよう、真ん中より少し上へ寄せる */
    top: 38%;
  }
  /* 縦書きは画面が低いと下まで届いてしまう */
  .mk-hero__title--vertical-right,
  .mk-hero__title--vertical-left {
    max-height: 62%;
  }
}

/* ヘッダーを重ねるときは、写真に乗る見出しが負けないよう上端を少し暗くする。
   ヘッダー自体は白い地を敷いて読めるようにしてあるので、暗くするのは
   ヘッダーより下（見出しが置かれるあたり）だけでよい */
.mk-hero--overlay .mk-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 200px;
  background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}
/* ヘッダーの下から始めるときは、文字がヘッダーに隠れないよう少し下げる */
.mk-hero:not(.mk-hero--overlay) .mk-hero__title--left { top: 8%; }

/* 所在地。単体で出しても所在だと分かるよう、自前の濃い地を持つ */
.mk-hero__place {
  margin: 0;
  padding: 7px 24px;
  max-width: 100%;
  background: rgba(23, 37, 79, 0.88);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 写真の下端に溶ける帯 --------------------------------- */
/* 写真の下端いっぱいに、下へ向かって濃くなる帯を敷き、その上に名乗りを置く。

   以前は白い長方形を写真の下端に食い込ませていたが、土台にした船宿HPの
   特徴的な形そのままで、どの船宿のサイトも同じ顔に見えてしまっていた。
   枠も影も持たない帯にすれば、写真が主役のまま文字だけが読める。 */
.mk-hero__lead {
  margin: 0;
  padding: 0;
  /* 見出しと補足を横に並べる。狭い画面では折り返して縦に積む */
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  text-align: center;
}
.mk-hero__lead-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.mk-hero__lead-note {
  margin: 0;
  padding-left: 20px;
  /* 見出しとの区切り。横に並ぶときだけ意味があるので、折り返したら消す */
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
/* 横並び型だけは写真の下に置く。前後の写真にまたがると読めないため、
   帯ではなく地の上の文字として出す（文字色も地に合わせて戻す） */
.mk-hero__lead--below {
  position: static;
  padding: 18px 0 0;
  background: none;
  justify-content: center;
  text-align: center;
}
.mk-hero__lead--below .mk-hero__lead-title {
  color: var(--mk-navy);
  text-shadow: none;
}
.mk-hero__lead--below .mk-hero__lead-note {
  color: var(--mk-gray);
  text-shadow: none;
  border-left-color: var(--mk-line);
}


@media (max-width: 767px) {
  .mk-hero { --mk-hero-h: min(62vh, 480px); --mk-hero-h-min: 320px; }
  /* 狭い画面では見出しと補足が縦に積まれる。縦のときは区切り線が
     宙に浮くので消し、帯の高さも詰める */
  /* 狭い画面では中身が縦に積まれる。縦のときは区切り線が宙に浮くので消し、
     器の余白も詰める（写真が見える面積を残す） */
  .mk-hero__bottom { padding: 40px 18px 16px; gap: 8px; }
  .mk-hero__copy { font-size: 16px; }
  .mk-hero__place { font-size: 12px; padding: 6px 14px; white-space: normal; text-align: center; }
  .mk-hero__lead-note { padding-left: 0; border-left: 0; font-size: 13px; }
  /* 狭い画面では前後を見せる余地が無い。ほぼ1枚分にして横に送る */
  .mk-hero--peek .mk-hero__slide { width: 88%; }
  .mk-hero--peek .mk-hero__slide img { height: min(42vh, 320px); }
}

/* ============================================================
   リード文（heading ブロック）
   現行HPの top_sec01。見出しは水色の帯に白抜き、背景の右上に錨の絵
   ============================================================ */
.mk-lead { padding-block: 24px 32px; }
/* 水色の帯に白抜き。濃い色の影を少しずらして落とす（現行HPと同じ） */
.mk-lead__title {
  background: var(--mk-cyan);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 10px;
  box-shadow: 5px 5px 0 0 var(--mk-ink);
}
.mk-lead__body {
  margin-top: 16px;
  text-align: center;
  line-height: 1.9;
}
.mk-lead--left .mk-lead__body { text-align: left; }

/* ============================================================
   最新の釣果（catches ブロック）
   現行HPの top_sec03。正方形の写真の下に白い枠を置き、
   日付・説明・詳細ボタンを縦に並べる
   ============================================================ */
.mk-diary {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px 16px;
}
.mk-diary__card {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.mk-diary__thumb { position: relative; aspect-ratio: 1; overflow: hidden; }
.mk-diary__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 複数枚あるときは同じ場所に重ね、今の1枚だけを見せる。
   入れ替えを透かしてつなぐので、切り替わりが唐突にならない */
.mk-diary__thumb.is-stack .mk-diary__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 4s ease-out;
}
.mk-diary__thumb.is-stack .mk-diary__shot.is-on {
  opacity: 1;
  /* ゆっくり寄っていく。止まった絵が並ぶより目に留まる */
  transform: scale(1);
  z-index: 1;
}
/* 動きを減らす設定の人には透過だけにする */
@media (prefers-reduced-motion: reduce) {
  .mk-diary__thumb.is-stack .mk-diary__shot {
    transform: none;
    transition: opacity 0.2s linear;
  }
  .mk-diary__thumb.is-stack .mk-diary__shot.is-on { transform: none; }
}
.mk-diary__thumb.is-empty { background: #dfe6ee; }
/* Instagram の投稿は複数枚のことがある。カードの中で送れるようにする */
/* 写真を重ねて切り替えるので、送りと枚数は写真より前に出す
   （写真に z-index を付けた結果、隠れてしまっていた） */
.mk-diary__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--mk-navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mk-diary__nav.is-prev { left: 6px; }
.mk-diary__nav.is-next { right: 6px; }
.mk-diary__nav:hover { background: #fff; }
.mk-diary__count {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
}
/* 説明の量はまちまち。ここを伸ばして、ボタンの位置を下端に揃える */
.mk-diary__body { flex-grow: 1; padding: 5px 10px 0; }
/* 日付 → 水色の罫線 → 本文 の順。現行HPの diary_info_inner に合わせる */
.mk-diary__date {
  display: block;
  margin: 5px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mk-cyan);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}
/* 現行HPは説明も太字。細いと写真に負けて読みにくい */
.mk-diary__text { font-size: 16px; font-weight: 700; line-height: 1.7; }
.mk-diary__foot { padding: 15px 10px 18px; }
.mk-diary__more {
  display: block;
  width: 100px;
  margin-inline: auto;
  /* 行間を詰めて高さを抑える（既定のままだと文字の上下に余白が乗る） */
  padding: 8px 10px;
  background: var(--mk-cyan);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.mk-diary__more:hover { opacity: 0.85; }

/* ============================================================
   よくあるご質問（faq ブロック）
   現行HPの top_sec09。質問を押すと答えが開く
   ============================================================ */
/* 現行HPは質問を1枚の白いカードにまとめ、1問ずつ下罫線で区切る */
.mk-faq { background: #fff; padding: 5px 20px 30px; }
.mk-faq__item { background: none; padding: 0; }
.mk-faq__q {
  position: relative;
  margin-top: 25px;
  padding: 0 30px 4px 0;
  border-bottom: 1px solid #508C8F;
  color: #508C8F;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.mk-faq__q::-webkit-details-marker { display: none; }
/* 開閉の印。開くと反転する */
.mk-faq__q::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 6px;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
details[open] > .mk-faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.mk-faq__a {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* ============================================================
   アクセス（access ブロック）
   現行HPの top_sec08。左に連絡先、右に地図、その下に乗船手順を縦に並べる
   ============================================================ */
.mk-access { display: grid; gap: 24px; }
.mk-access__info { background: #fff; padding: 10px 15px 7px; }
/* 項目名は水色に下罫線、その下に本文を置いて縦に積む（現行HPの形） */
.mk-access__list { margin: 0; }
.mk-access__list dt {
  font-size: 15px;
  color: var(--mk-cyan);
  border-bottom: 1px solid var(--mk-cyan);
  line-height: 1.4;
  padding-bottom: 5px;
}
.mk-access__list dd {
  margin: 0;
  font-size: 13px;
  color: #080A09;
  line-height: 1.4;
  padding: 6px 0 15px;
}
/* 電話とメールは指で押す。文字の大きさは現行HPのままにして、
   上下に余白を足して押せる高さ（44px前後）を確保する */
.mk-access__list a {
  display: inline-block;
  padding-block: 8px;
  color: #080A09;
  text-decoration: none;
}
.mk-access__map iframe { width: 100%; height: 250px; border: 0; display: block; }
/* 店内のレイアウト図。連絡先と地図の下に幅いっぱいで置く（現行HPと同じ）。
   白地に載せて図の枠と地を分ける */
.mk-access__layout { margin-top: 20px; padding: 5px; background: #fff; }
.mk-access__layout img { display: block; width: 100%; margin-inline: auto; }

.mk-access__steps { margin-top: 30px; }
/* 橙の丸帯。中で「到着したら」を白枠に囲い、「乗船手順」を大きく置く */
.mk-access__steps-title {
  background: var(--mk-orange);
  border-radius: 100vh;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px 15px;
  text-align: center;
}
.mk-access__steps-sub {
  border: 1px solid #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px;
}
/* 見出しの末尾に舵。現行HPと同じ位置に置く */
.mk-access__steps-main::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: -5px 0 0 12px;
  background: url("img/anchor_icon.png") no-repeat center / contain;
  vertical-align: middle;
}

/* 上から順に進む道筋。間に三角を挟んで向きを示す */
.mk-steps { display: grid; gap: 0; margin-top: 16px; }
.mk-steps__item {
  background: #fff;
  border-radius: 900px;
  color: #007790;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 16px;
  text-align: center;
}
.mk-steps__item + .mk-steps__item { margin-top: 46px; position: relative; }
.mk-steps__item + .mk-steps__item::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 25px;
  background: url("img/blue_triangle.png") no-repeat center / contain;
}

/* ============================================================
   3隻について（custom_html ブロック）
   現行HPの top_sec06。自由HTMLなので、旧CMSが持っているクラスに当てる。
   船宿がこのブロックを編集することは想定していない（移行したHTMLを出すだけ）
   ============================================================ */
.mk-container .common_ttl_wrap { text-align: center; margin-bottom: 28px; }
.mk-container .common_ttl_eng {
  display: inline-block;
  position: relative;
  padding-inline: 30px;
  font-family: var(--mk-font-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mk-navy);
}
/* 英字の両脇の横線。mk-ttl__en と同じ見た目にそろえる */
.mk-container .common_ttl_eng::before,
.mk-container .common_ttl_eng::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.mk-container .common_ttl_eng::before { left: 0; }
.mk-container .common_ttl_eng::after { right: 0; }
.mk-container .common_ttl_jp {
  font-size: 22px;
  font-weight: 700;
  color: var(--mk-navy);
  line-height: 1.4;
}

.top_sec06_wrap {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 30px 27px;
}
/* 3隻を横に並べる。中の高さが違っても頭がそろうように縦に積む */
.top_sec06_info { display: flex; flex-direction: column; background: #fff; }
.top_sec06_info_ttl {
  background: var(--mk-ink);
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  padding: 8px;
  text-align: center;
}
.top_sec06_info_Img img { width: 100%; height: 174px; object-fit: cover; display: block; }
/* 説明が続く側を伸ばして、電話の案内を下端にそろえる */
.top_sec06_inner { flex-grow: 1; }
.top_sec06_back { padding: 14px 20px 5px; }
/* 「釣座 14席」のような対で並ぶ。右側は帯にして有無が一目で分かるようにする */
.top_sec06_cont dl {
  display: grid;
  grid-template-columns: 1fr 40%;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.top_sec06_cont dt { font-size: 15px; line-height: 1.2; }
.top_sec06_cont dd {
  margin: 0;
  background: var(--mk-orange);
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  padding: 4px 0 5px;
  text-align: center;
}
/* 「なし」だけは灰色にして、あり／なしを色で読み分けられるようにする */
.top_sec06_cont dd.dbl { background: #46484A; }
.top_sec06_feat_ttl {
  margin: 14px 0 8px;
  background: var(--mk-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 10px;
}
.top_sec06_feat { font-size: 14px; line-height: 1.7; }
.top_sec06_tel_wrap { padding: 0 20px 15px; }
/* 船長名と電話を、上の装備欄から罫線で区切る */
.top_sec06_contact { border-top: 1px solid var(--mk-ink); }
.top_sec06_contact_ttl { margin-top: 8px; font-size: 16px; font-weight: 700; }
.top_sec06_contact .tel { margin: 0; }
.top_sec06_contact .tel a {
  font-size: 20px;
  font-weight: 700;
  color: var(--mk-ink);
  text-decoration: none;
}
/* 受話器のアイコン。番号がタップできることを示す */
.top_sec06_contact .tel a::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: -5px 10px 0 0;
  background: url("img/tel_icon.png") no-repeat center / contain;
  vertical-align: middle;
}
/* 波の上に乗るので白抜き */
.top_sec06_notice {
  margin-top: 25px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  line-height: 1.6;
}

/* ============================================================
   釣りプラン・料金（plans ブロック）
   現行HPの top_sec05。白いカードに見出し・写真・料金表・詳細を積む。
   項目名（料金・定員など）は水色の帯に白抜きで出す
   ============================================================ */
.mk-plans {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 30px 27px;
}
.mk-plan {
  display: flex;
  flex-direction: column;
  /* 白い地の上に置くので、境目が分かるよう薄い枠を回す */
  border: 1px solid #CFE9F2;
}
/* 詳細の量はプランごとに違う。ここを伸ばしてボタンを下端にそろえる */
.mk-plan__inner { flex-grow: 1; background: #fff; padding: 20px 20px 0; }
.mk-plan__title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mk-cyan);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.mk-plan__img { margin-top: 16px; text-align: center; }
.mk-plan__img img {
  width: 210px;
  height: 224px;
  max-width: 100%;
  object-fit: cover;
}

/* 項目名は水色の帯。値と2列に並べる */
.mk-plan__price {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 10px 12px;
  align-items: start;
  margin: 16px 0 0;
  font-size: 14px;
}
.mk-plan__price dt {
  background: var(--mk-cyan);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 0;
  text-align: center;
}
.mk-plan__price dd { margin: 0; }
/* 料金は金額を大きく、単位や条件を小さく添える。
   旧CMSは <span> で小さくしていたが、タグに頼らず priceParts が分ける */
.mk-plan__price dd.is-price { line-height: 1.3; }
.mk-plan__amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--mk-ink);
}
.mk-plan__unit { margin-left: 2px; font-size: 13px; }
.mk-plan__pricenote { display: block; font-size: 12px; color: var(--mk-gray); }

/* 道具などの詳細。旧CMSの HTML をそのまま出すので、
   中の見出しと定義リストに最低限の体裁を当てる */
.mk-plan__detail { margin-top: 16px; font-size: 13px; line-height: 1.7; }
.mk-plan__detail h3, .mk-plan__detail h4 {
  margin: 16px 0 8px;
  background: var(--mk-cyan);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 8px;
}
.mk-plan__detail dl {
  display: grid;
  /* 項目名の幅は中身に合わせる（「料金に含まれるもの」が折り返さないように） */
  grid-template-columns: minmax(68px, max-content) 1fr;
  gap: 2px 8px;
  margin: 0;
}
.mk-plan__detail dt { font-weight: 400; }
/* 項目の頭に印を付ける。現行HPと同じ ▷ */
.mk-plan__detail dt::before { content: "▷"; margin-right: 2px; }
.mk-plan__detail dd { margin: 0; }

/* レンタルの案内。見出しは橙の帯、本文は橙の枠で囲う。
   旧CMSの詳細HTMLが plan_rental_ttl を使っている */
.mk-plan__detail .plan_rental_ttl {
  margin: 16px 0 0;
  background: var(--mk-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 15px;
}
.mk-plan__detail .plan_rental_ttl + * {
  border: 1px solid var(--mk-orange);
  padding: 5px 10px;
  font-size: 11px;
}

.mk-plan__foot { background: #fff; padding: 10px 20px 20px; }
/* 白地に水色の枠。カードの中なので塗りつぶさない */
.mk-plan__btn {
  display: block;
  width: 100%;
  padding: 7px 0 6px;
  border: 1px solid var(--mk-cyan);
  border-radius: 900px;
  background: #fff;
  color: var(--mk-cyan);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.mk-plan__btn::after { content: "▶"; margin-left: 6px; font-size: 11px; }
.mk-plan__btn:hover { background: var(--mk-cyan); color: #fff; }
.mk-plans__note { margin-top: 20px; text-align: center; font-size: 13px; }

/* ============================================================
   乗船予約状況（external_reservation ブロック）
   現行HPの top_sec04。見出しの右に魚の絵、下にカレンダーとボタン
   ============================================================ */
.mk-reserve__head { position: relative; }
.mk-reserve__lead { margin: 0 0 16px; font-size: 14px; color: #4b5563; }
/* 魚の絵は飾り。狭い画面では見出しにかぶるので出さない */
.mk-reserve__ill { display: none; }
.mk-reserve__lead {
  margin: 15px 0;
  text-align: center;
  font-size: 16px;
  color: #007790;
}
.mk-reserve__calendar { overflow: hidden; }
.mk-reserve__calendar iframe { width: 100%; border: 0; display: block; }
/* 予約サイトへ送る主ボタン。中身の幅いっぱいに大きく出す。
   文字の左に船の絵（三角の矢印もこの絵に入っている） */
.mk-reserve__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0;
  padding: 8px 0 4px;
  background: var(--mk-cyan);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.mk-reserve__main::before {
  content: "";
  flex-shrink: 0;
  width: 84px;
  height: 30px;
  background: url("img/boat_icon.png") no-repeat center / contain;
}
.mk-reserve__main:hover { opacity: 0.85; }

/* 予約の前に済ませてほしい手続き。横に2つ並べる */
.mk-reserve__subs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 60px;
  margin-bottom: 20px;
}
.mk-reserve__sub {
  display: block;
  width: 470px;
  max-width: 100%;
  padding: 8px 0;
  border-radius: 900px;
  background: var(--mk-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.mk-reserve__sub:hover { opacity: 0.85; }
/* 1行ずつ「● 〜」が並ぶ。pre-line と <br> が重なると行間が二重に開く */
.mk-reserve__note {
  margin-top: 20px;
  padding-bottom: 40px;
  font-size: 13px;
  line-height: 1.7;
}

/* ============================================================
   予約状況・本日の運行（ウニログの予約システムを使う場合）
   中身は site.js が API から描く。見た目はここで決める
   ============================================================ */
/* 予約の空き状況。カレンダーと、直近の出船を並べるリストの2つ */
.mk-avail__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.mk-avail__select,
.mk-avail__date {
  padding: 8px 12px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.mk-avail__select { min-width: 180px; }
.mk-avail__go { padding: 8px 20px; font-size: 14px; }

/* カレンダー */
.mk-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mk-cal__move {
  padding: 6px 14px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.mk-cal__move:disabled {
  cursor: default;
  opacity: 0.4;
}
.mk-cal__grid {
  display: grid;
  /* minmax(0, 1fr) にしないと、長い船名（折り返さない指定）が
     マスの最小幅を押し上げて、カレンダーが枠からはみ出す */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.mk-cal__head {
  padding: 4px 0;
  text-align: center;
  font-size: 12px;
  color: var(--mk-gray);
}
.mk-cal__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 船の名前が2件まで入るぶんの高さ */
  min-height: 82px;
  padding: 4px 2px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.mk-cal__cell.is-empty { border: 0; background: transparent; }
.mk-cal__cell.is-off { background: #f7f9fb; color: #9aa4b0; }
a.mk-cal__cell:hover { border-color: var(--mk-cyan); }
.mk-cal__num { font-size: 13px; font-weight: 700; }
.mk-cal__mark { font-size: 12px; }
.mk-cal__mark.is-open { color: var(--mk-cyan); font-weight: 700; }
.mk-cal__mark.is-few { color: #d97706; font-weight: 700; }
.mk-cal__mark.is-full,
.mk-cal__mark.is-closed,
.mk-cal__mark.is-chartered,
.mk-cal__mark.is-not_open,
.mk-cal__mark.is-deadline { color: #9aa4b0; }
/* 休・貸切の理由（船宿のメモ）。マスが狭いので1行に収め、全文はカーソルで読む */
.mk-cal__note,
.mk-week__note {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.3;
  color: #6b7785;
}
.mk-week__note { white-space: normal; font-size: 11px; }

/* その日に出る船の名前。マスが狭いので小さく、はみ出す分は省略する */
/* マスの中の船名。同じ日に複数の便が出るので、
   どの船が空いているかを読み取る手がかりになる。
   細い10pxでは日付や空き記号に埋もれるため、太字で少し大きくする */
.mk-cal__plan {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mk-navy);
}
/* 「ほか1件」は本体ではないので、太らせずに控えめなまま */
.mk-cal__plan.is-more { font-weight: 400; color: var(--mk-gray); }

@media (max-width: 767px) {
  /* 狭い画面では7列のマスが指の幅ほどしかない。名前は出さず、
     日付と空き具合だけにする（週表示なら名前まで読める） */
  .mk-cal__cell { min-height: 58px; }
  .mk-cal__plan { display: none; }
}

/* 直近の出船を並べる */
/* プランが多い船宿だと便の数が数十件になりトップページを埋め尽くすため、
   高さの上限を決めて中でスクロールさせる。中身が少ないときは max-height に
   届かず枠の高さが内容に追従するので、件数が少ない船宿では窮屈に見えない */
.mk-avail__count { margin: 0 0 8px; font-size: 13px; color: var(--mk-gray); }
.mk-avail__list {
  display: grid;
  gap: 6px;
  max-height: min(520px, 60vh);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
}
.mk-avail__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.mk-avail__row:hover { border-color: var(--mk-cyan); }
.mk-avail__day { min-width: 74px; font-weight: 700; }
.mk-avail__day small { font-weight: 400; }
.mk-avail__plan { flex: 1; }
.mk-avail__time { font-weight: 700; }
.mk-avail__label { color: var(--mk-cyan); font-weight: 700; }

@media (max-width: 767px) {
  .mk-cal__cell { min-height: 48px; }
  .mk-avail__row { flex-wrap: wrap; gap: 6px 12px; }
  .mk-avail__plan { flex-basis: 100%; order: 3; font-size: 13px; }
}

.mk-today { display: grid; gap: 8px; }
.mk-today__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mk-line);
}
.mk-today__item:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-today__plan { font-weight: 700; }
.mk-today__time small { color: var(--mk-gray); font-weight: 400; }

/* ============================================================
   お知らせ（news ブロック）
   現行HPの top_sec07。濃紺の地に白いカードを重ね、押すと本文が開く
   ============================================================ */
.mk-news { display: grid; gap: 12px; }
.mk-news__item { background: #fff; }
.mk-news__head {
  display: block;
  padding: 10px 15px;
  cursor: pointer;
  list-style: none;          /* 既定の三角は出さない */
  position: relative;
  padding-right: 44px;
}
.mk-news__head::-webkit-details-marker { display: none; }
.mk-news__head.is-flat { cursor: default; padding-right: 15px; }
/* 開閉の印。開くと反転する */
details > .mk-news__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 15px;
  height: 15px;
  margin-top: -8px;
  border-right: 2px solid var(--mk-navy);
  border-bottom: 2px solid var(--mk-navy);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
details[open] > .mk-news__head::after { transform: rotate(-135deg); margin-top: -2px; }

.mk-news__date { display: block; font-size: 13px; font-weight: 700; line-height: 1.6; }
.mk-news__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; }
a.mk-news__title { color: var(--mk-navy); text-decoration: underline; }
.mk-news__body { padding: 0 15px 15px; font-size: 16px; }
/* 旧CMSのエディタは1行を div で包む */
.mk-news__body div { min-height: 1.7em; }

/* ============================================================
   明日の運行予定（tomorrow ブロック）
   現行HPの top_sec02。橙の帯に白抜きの見出し、その下を橙の枠で囲む
   ============================================================ */
.mk-tomorrow__title {
  background: var(--mk-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  padding: 4px 12px;
}
.mk-tomorrow__title small { font-weight: 400; }
.mk-tomorrow__body {
  border: 1px solid var(--mk-orange);
  border-top: 0;
  padding: 12px 16px;
}
/* 旧CMSのエディタは1行を div で包む。行間だけ整える */
.mk-tomorrow__body div { min-height: 1.7em; }
.mk-tomorrow__body a { color: var(--mk-navy); text-decoration: underline; }

/* ============================================================
   流れる帯（slider ブロック）
   同じ並びを2組出し、1組ぶん動かして先頭に戻すことで途切れずに流す
   ============================================================ */
.mk-slider { display: flex; overflow: hidden; }
.mk-slider__track {
  display: flex;
  flex-shrink: 0;
  /* 画像どうしは隙間なく並べる。1組ぶん動かして先頭へ戻すので、
     組と組の間にも余白を入れない */
  gap: 0;
  animation: mk-slider-flow var(--mk-slider-speed, 40s) linear infinite;
}
.mk-slider__track li { flex-shrink: 0; }
/* 高さと比率で1枚の大きさを決め打ちする。元の画像の比率がまちまちでも
   中央を切り抜いて揃うので、帯の幅が画像によって変わらない */
.mk-slider__track img {
  display: block;
  height: var(--mk-slider-h, 262px);
  aspect-ratio: var(--mk-slider-ratio, 4/3);
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.mk-slider__placeholder { width: 100%; height: var(--mk-slider-h, 262px); background: #dfe6ee; }
.mk-slider:hover .mk-slider__track { animation-play-state: paused; }

@keyframes mk-slider-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* 動きを減らす設定の利用者には流さない */
@media (prefers-reduced-motion: reduce) {
  .mk-slider__track { animation: none; }
  .mk-slider { overflow-x: auto; }
}

/* メインビジュアルと帯は隙間なく重ねる。
   ブロックの上下余白（sb-space-*）は種データ側で none にしてある */
.sb-block-hero + .sb-block-slider { margin-top: 0; }

/* ============================================================
   お試しサイトの帯（is_demo のときだけ出る）
   ============================================================ */
/* 画面の上端に貼り付けたままにする。スクロールで流れると、
   下の方だけ見た人が本物の船宿サイトだと思い込む */
.mk-demo-band {
  /* 浮かせずそのまま積む。浮かせて場所を決め打ちで空けていた頃は、
     文字の行数で高さが変わるたびに白い隙間が出ていた */
  position: relative;
  /* 追従するヘッダー（z-index 50）より前に出す */
  z-index: 100;
  margin: 0;
  padding: 6px 16px;
  background: var(--mk-orange);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* 帯は場所を取らずに浮かせるのではなく、そのまま上に積む。

   以前は fixed で浮かせ、下げ幅を決め打ちの変数（広い画面32px・
   狭い画面48px）で空けていた。ところが幅は文字が何行になるかで
   決まるので、実際の高さと食い違う。エディタのプレビューは枠が
   狭く「狭い画面」と判定されるのに帯は1行32pxで収まり、差の16pxが
   白い帯になって写真の上に出ていた。

   積んでしまえば高さが何pxでもずれない。帯は画面の一番上に一度
   出れば十分で、追従する必要もない */
/* 追従するヘッダーは帯の下から始まる（積んだので指定は要らない）。

   写真に重ねるヘッダーだけは絶対配置で、基準が body になるため
   放っておくと帯の上に乗る。帯の高さは文字の行数で変わるので
   決め打ちにできない。site.js が実測して --mk-band-h に入れる
   （JS が動かない環境でも、既定の 32px でおおむね合う） */
body:has(.mk-demo-band) .mk-header--overlay {
  top: var(--mk-band-h, 32px);
}

/* ============================================================
   ヘッダー
   ============================================================ */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.mk-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--mk-wide);
  margin-inline: auto;
  padding: 10px 16px;
}
/* 写真の上に重ねるヘッダー。白い地を薄く敷いて透かす。

   以前は地を完全に透明にして文字とロゴを白抜きにしていたが、写真は船宿が
   入れ替えるもので、明るい空や白い波が来ると白文字が読めなくなる。
   薄い白を敷けば、どんな写真でも文字は紺のまま読めて、写真も透けて見える。
   ロゴに白い座布団を敷く必要もなくなる（地そのものが白いため）。 */
.mk-header--overlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
  /* 帯そのものは透かす。写真の上に白い帯が横いっぱいに乗ると、
     メインビジュアルが上から切り取られて見えるため。
     読みやすさは、文字が乗る部分（メニュー・ロゴ）の下だけで確保する */
  background: none;
  box-shadow: none;
}
/* 引き出しは写真ではなく地色の上に出るので、透かしを戻す */
.mk-header--overlay .mk-header__nav { background: var(--mk-cyan); }

.mk-header__logo { flex-shrink: 0; line-height: 0; }
.mk-header__logo img { width: 140px; height: auto; }
/* ロゴ画像が無い船宿は名前を文字で。画像と同じ場所に同じ高さで収める */
.mk-header__logo-text {
  display: inline-block;
  line-height: 40px;
  font-size: 18px;
  font-weight: 700;
  color: var(--mk-navy);
  text-decoration: none;
  white-space: nowrap;
}

/* 狭い画面ではハンバーガーで開く引き出し */
/* 引き出し。ヘッダーの下から出してロゴを隠さない。
   地色は現行HPと同じ水色。閉じている間は触れないよう視界から外す */
.mk-header__nav {
  position: fixed;
  top: var(--mk-header-h, 64px);
  right: 0;
  bottom: 0;
  /* iOS Safari はアドレスバーの分だけ bottom:0 が画面の外に落ちる。
     dvh は実際に見えている高さに追従するので、下端が隠れない
     （対応していないブラウザは上の bottom:0 のまま動く） */
  max-height: calc(100dvh - var(--mk-header-h, 64px));
  width: min(320px, 86vw);
  padding: 8px 0 24px;
  background: var(--mk-cyan);
  transform: translateX(100%);
  /* 現行HPは開閉が緩慢で待たされる。少し速くして操作感を保つ */
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.22s;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
}
.mk-header[data-open="1"] .mk-header__nav { transform: translateX(0); visibility: visible; }

/* 狭い画面では引き出し用だけを出す（横並び用は広い画面で使う） */
.mk-header__menu { display: none; flex-direction: column; }
.mk-header__menu--drawer { display: flex; }
.mk-header__menu a {
  display: block;
  /* 項目が多い船宿でも1画面に収まるよう、余白は控えめにする */
  padding: 13px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
/* 触れている間だけ濃くする。押した場所が分かるように */
.mk-header__menu a:active { background: rgba(255, 255, 255, 0.18); }

/* 引き出しの中の予約導線。狭い画面ではヘッダーのボタンが出ないため */
.mk-header__drawer-actions {
  display: grid;
  gap: 8px;
  padding: 16px 24px 0;
}
.mk-header__drawer-actions .mk-btn {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  font-size: 15px;
  text-align: center;
}
/* 水色の地に水色のボタンだと沈むので、白く抜いて紺の字にする */
.mk-header__drawer-actions .mk-btn--accent {
  background: #fff;
  color: var(--mk-navy);
}

.mk-header__actions { display: none; gap: 8px; margin-left: auto; }
.mk-btn--sm { min-width: 0; padding: 8px 18px; font-size: 15px; }

.mk-hamburger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mk-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mk-navy);
  transition: transform 0.2s, opacity 0.2s;
}
.mk-header[data-open="1"] .mk-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-header[data-open="1"] .mk-hamburger span:nth-child(2) { opacity: 0; }
.mk-header[data-open="1"] .mk-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 引き出しを開いたときの背景の覆い。ヘッダーは覆わず、押すと閉じる */
.mk-header::after {
  content: "";
  position: fixed;
  inset: var(--mk-header-h, 64px) 0 0;
  background: rgba(23, 37, 79, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
  z-index: -1;
}
.mk-header[data-open="1"]::after { opacity: 1; visibility: visible; }

/* ============================================================
   フッター
   ============================================================ */
.mk-footer {
  padding: 24px 16px;
  background: var(--mk-navy);
  color: #fff;
  text-align: center;
}
.mk-footer__copy { font-size: 13px; }

/* ============================================================
   ブロック共通の余白
   サイトビルダーが付ける sb-space-* を、このテーマの間隔に合わせる
   ============================================================ */
/* 現行HPはセクションの間が 20px しか空いていない（アンカー用の
   a.anchor が挟まるだけ）。medium をその間隔に合わせる */
.sb-space-top-none { padding-top: 0; }
.sb-space-top-small { padding-top: 10px; }
.sb-space-top-medium { padding-top: 20px; }
.sb-space-top-large { padding-top: 40px; }
.sb-space-bottom-none { padding-bottom: 0; }
.sb-space-bottom-small { padding-bottom: 10px; }
.sb-space-bottom-medium { padding-bottom: 20px; }
.sb-space-bottom-large { padding-bottom: 40px; }

.sb-band { width: 100%; }
.sb-empty { color: #94a3b8; font-size: 14px; text-align: center; }

/* ============================================================
   画面が広いとき
   ============================================================ */
@media (min-width: 768px) {
  .mk-br-sp { display: none; }
  .mk-br-tb { display: inline; }
  .mk-section { padding-block: 60px; }
  .mk-ttl__en { font-size: 20px; }
  .mk-ttl__jp { font-size: 26px; }
  .mk-ttl { margin-bottom: 36px; }

  /* タブレットではメニューはハンバーガーのままだが、釣果と予約のボタンは
     小さくして出す。現行HPも同じで、予約への入口を畳んでしまわない */
  .mk-header__actions { display: flex; gap: 8px; margin-left: auto; }
  .mk-header__actions .mk-btn--sm {
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.2;
  }
  /* ヘッダーに出るので、引き出しの中には要らない */
  .mk-header__drawer-actions { display: none; }
}

/* PCは引き出しをやめて横並びに戻す */
@media (min-width: 1100px) {
  /* 現行HPのヘッダーは高さ90px。幅は --mk-wide（メインビジュアルと共通）*/
  .mk-header__inner {
    /* 2 段になった分、上の段は詰める（1 段のときは 90px だった） */
    min-height: 72px;
    padding: 8px 16px 4px;
    gap: 16px;
  }
  .mk-header__logo img { width: 193px; }
  .mk-hamburger { display: none; }
  .mk-header::after { content: none; }
  /* 2段にする。上の段はロゴとボタン、下の段はメニューが横いっぱい。
     1段だとメニューがボタンと幅を取り合い、項目が7つで入り切らなくなる
     （2026-09-18 実測。13項目まで並ぶようになる） */
  .mk-header__nav {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
    overflow: visible;
    box-shadow: none;
  }
  /* 引き出しの中のボタンは横並びのヘッダーでは要らない（右端に出る） */
  .mk-header__drawer-actions { display: none; }
  /* メニューは下の段で中央に並べる。多くても折り返して収まる */
  .mk-header__menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: calc(var(--mk-wide) + 32px);
    margin-inline: auto;
    padding: 0 16px 10px;
  }
  /* 写真に重なるヘッダーでは、メニューの下だけを白く透かす。
     写真の細かい模様が文字に重なると読めなくなるので、後ろもぼかす
     （対応していないブラウザでも白だけで読めるので、無くても困らない） */
  .mk-header--overlay .mk-header__menu {
    padding: 4px 6px;
    border-radius: 4px;
    /* 写真をなるべく見せたいので、白はごく薄く敷くだけにする。
       文字の読みやすさは、後ろをぼかす方で稼ぐ */
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* 引き出し用の水色は、横並びになる幅では邪魔になる。
     背景を持つのはメニューの箱だけにする */
  .mk-header--overlay .mk-header__nav { background: none; }
  /* 引き出し用は横並びに入りきらない項目まで持つので、ここでは出さない */
  .mk-header__menu--drawer { display: none; }
  /* 項目の間だけを紺の縦線で区切る。
     両端には引かない（ロゴや余白との間に線が1本浮いて見えるため） */
  .mk-header__menu li { border-right: 1px solid var(--mk-ink); }
  .mk-header__menu li:last-child { border-right: 0; }
  .mk-header__menu a {
    padding: 4px 13px;
    border-bottom: 0;
    color: var(--mk-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    /* 項目名は途中で折らない（折れると区切り線の高さがばらつく） */
    white-space: nowrap;
  }
  .mk-header__menu a:hover { color: var(--mk-ink); opacity: 0.5; }

  .mk-header__actions { display: flex; gap: 11px; }
  /* ヘッダーのボタンは現行HPの実測（釣果141px / 予約326px・文字20px） */
  /* ボタンは中身に合わせる。固定幅（釣果141px / 予約326px）だと上の段を
     圧迫し、メニューを増やせなくなっていた（2026-09-18 に幅指定をやめた） */
  .mk-header__actions .mk-btn--sm {
    font-size: 16px;
    padding: 9px 20px;
    line-height: 1.2;
    white-space: nowrap;
  }
  /* ボタンは上の段だけで幅を取り合う。入り切らなければ折り返す
     （メニューは 2 段目にあるので、ボタンが増えても崩れない） */
  .mk-header__inner { flex-wrap: wrap; }
  .mk-header__actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (min-width: 768px) {
  .mk-lead { padding-block: 30px 40px; }
  .mk-lead__title { font-size: 26px; }
  .mk-lead__body { font-size: 18px; }
  .mk-tomorrow__title { font-size: 18px; }
  .mk-tomorrow__body { padding: 8px 20px; }
  .mk-diary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 27px; }
  /* 釣り竿は見出しの左上に置く。画面端ではなくコンテナの左端が基準
     （現行HPは幅1000pxのコンテナの left:176px / top:40px） */
  .mk-reserve__ill {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(calc(var(--mk-container) / -2 + 176px));
  }
  .mk-reserve__lead { font-size: 18px; }
  .mk-reserve__main { font-size: 30px; }
  .mk-reserve__sub { font-size: 20px; }
  .mk-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top_sec06_wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 連絡先と地図を左右に置く。現行HPは 415px / 558px */
  .mk-access { grid-template-columns: 415fr 558fr; align-items: start; }
  .mk-access__map iframe { height: 450px; }
  .mk-access__steps-title { font-size: 30px; gap: 20px; padding: 15px; }
  .mk-access__steps-sub { font-size: 20px; }
  .mk-access__steps-main::after { width: 35px; height: 35px; margin-left: 15px; }
  .mk-access__layout { margin-top: 20px; padding: 20px 0; }
  .mk-access__layout img { width: 72%; }
  .mk-steps__item { font-size: 18px; }
  .mk-faq { padding: 5px 30px 30px; }
  .mk-faq__q { font-size: 18px; }
  .mk-faq__a { font-size: 14px; }
  .mk-container .common_ttl_eng { font-size: 22px; }
  /* 英字の両脇の横線。mk-ttl__en と同じ見た目にそろえる */
.mk-container .common_ttl_eng::before,
.mk-container .common_ttl_eng::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.mk-container .common_ttl_eng::before { left: 0; }
.mk-container .common_ttl_eng::after { right: 0; }
.mk-container .common_ttl_jp { font-size: 30px; }
  .top_sec06_info_ttl { font-size: 20px; }
  .top_sec06_back { padding: 14px 30px 5px; }
  .top_sec06_tel_wrap { padding: 0 30px 15px; }
  .sb-watermark__image { --sb-wm-size: 190px; }
}

@media (min-width: 1260px) {
  .mk-br-tb { display: none; }
  .mk-br-pc { display: inline; }
  .mk-lead__title { font-size: 30px; line-height: 1.2; }
  .mk-lead__body { font-size: 20px; line-height: 1.8; }
  .mk-section { padding-block: 80px; }
  .mk-ttl__en { font-size: 22px; }
  .mk-ttl__jp { font-size: 30px; }
  .sb-watermark__text { display: block; }
  .sb-space-top-small { padding-top: 15px; }
  .sb-space-top-medium { padding-top: 30px; }
  .sb-space-top-large { padding-top: 60px; }
  .sb-space-bottom-small { padding-bottom: 15px; }
  .sb-space-bottom-medium { padding-bottom: 30px; }
  .sb-space-bottom-large { padding-bottom: 60px; }
}

/* ============================================================
   動画（video ブロック）
   現行HPは 600px 幅で1本ずつ縦に並べ、中央に置いている。
   枠の比率を決めておくと、読み込み前に高さが決まって画面が跳ねない
   ============================================================ */
.mk-videos { display: grid; gap: 24px; }
.mk-video {
  width: min(600px, 100%);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}
.mk-video iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 768px) {
  /* 横に並べたい船宿もあるので、設定で列を増やせるようにはしておく */
  .mk-videos--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-videos--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-videos--cols2 .mk-video,
  .mk-videos--cols3 .mk-video { width: 100%; }
}

/* ============================================================
   バナー（banners ブロック）
   現行HPの foot_banner_wrap。横長の画像を縦に積んでリンクさせる
   ============================================================ */
.mk-banners {
  display: grid;
  gap: 30px;
  justify-items: center;
  padding-block: 20px;
}
.mk-banner { width: 100%; max-width: var(--mk-banner-max, 900px); }
.mk-banner img { display: block; width: 100%; height: auto; }
/* 押せることが分かるよう、触れたときだけ少し薄くする */
.mk-banner a { display: block; transition: opacity 0.2s; }
.mk-banner a:hover { opacity: 0.8; }

/* ============================================================
   画像ギャラリー（gallery ブロック）
   写真を並べるほかに、掲示や書類を1列で大きく見せる使い方もする
   ============================================================ */
.mk-gallery { display: grid; gap: 20px; justify-items: center; }
.mk-gallery__item { width: 100%; max-width: var(--mk-gallery-max, 100%); }
.mk-gallery__item img { display: block; width: 100%; height: auto; }
/* 2列以上は狭い画面では1列に畳む（横に並べると1枚が小さくなりすぎる） */
@media (min-width: 768px) {
  .mk-gallery--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-gallery--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-gallery--cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   共通ブロック（sb-）の受け皿

   テーマに専用の見た目を用意していないブロックと、一覧・詳細ページ
   （/news /plans /catches とその中身）は default のテンプレートを
   そのまま使う。そちらは sb- のクラスで組まれているため、ここで
   このテーマの色と幅に合わせて受け止める。これが無いと文字が画面の左端に
   貼り付いた素の状態で出てしまう。

   新しくテーマ専用のテンプレートを足したら、その分はここより
   mk- 側の指定が受け持つ
   ============================================================ */
.sb-container {
  width: 100%;
  max-width: calc(var(--mk-container) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}
.sb-narrow { max-width: 800px; }
.sb-center { text-align: center; }

/* 見出しは mk-ttl__jp と同じ字面に揃える（英字の飾りは付かない） */
.sb-h2 {
  margin: 0 0 25px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mk-navy);
  text-align: center;
}
@media (min-width: 768px) {
  .sb-h2 { font-size: 30px; }
}

.sb-empty { color: var(--mk-gray); font-size: 14px; text-align: center; }
.sb-note { margin-top: 15px; font-size: 14px; color: var(--mk-gray); white-space: pre-line; }
.sb-more { margin-top: 25px; text-align: center; }
.sb-more a,
.sb-back {
  display: inline-block;
  padding: 8px 24px;
  border: 1px solid var(--mk-navy);
  border-radius: 999px;
  font-size: 14px;
  color: var(--mk-navy);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sb-more a:hover,
.sb-back:hover { background: var(--mk-navy); color: #fff; }

.sb-btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--mk-orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* 並び。狭い画面は1列、768px以上で複数列にする */
.sb-grid { display: grid; gap: 20px; }
.sb-grid--list { grid-template-columns: 1fr; }
.sb-grid--cards,
.sb-grid--plans,
.sb-grid--cols2,
.sb-grid--cols3,
.sb-grid--cols4 { grid-template-columns: 1fr; }
.sb-grid--insta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) {
  .sb-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-grid--plans,
  .sb-grid--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-grid--cols3,
  .sb-grid--insta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-grid--cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* カード。角丸を控えめにして基調色の細い縁で締める */
.sb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  overflow: hidden;
}
.sb-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sb-card__body { padding: 15px; flex: 1; }
/* カードの下端に置く予約ボタン。並んだカードで高さと位置を揃える */
.sb-card__foot { padding: 0 15px 15px; text-align: center; }
.sb-card__foot .sb-btn { display: block; }
.sb-card__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--mk-navy); }

.sb-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 3px;
  background: var(--mk-aqua);
  font-size: 12px;
  color: var(--mk-ink);
}
.sb-chip.is-target { background: var(--mk-orange); color: #fff; font-weight: 700; }

.sb-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  color: var(--mk-orange);
}

.sb-richtext :is(p, ul, ol) { margin: 12px 0; }
/* 釣果の本文は、船宿がそのまま打った文。タグを書くわけではないので、
   打った改行と空行をそのまま活かす（pre-line は連続する空白は畳み、
   改行だけを残すので、長文でも余計な隙間が出ない） */
.sb-catch__body { white-space: pre-line; }
.sb-richtext a { color: var(--mk-navy); text-decoration: underline; }
.sb-richtext img { border-radius: 4px; }

.sb-deflist { display: grid; grid-template-columns: 6rem 1fr; gap: 4px 10px; margin: 10px 0; font-size: 14px; }
.sb-deflist dt { color: var(--mk-gray); }
.sb-deflist dd { margin: 0; white-space: pre-line; }

.sb-input,
.sb-select {
  padding: 8px 10px;
  border: 1px solid var(--mk-line);
  border-radius: 4px;
  font-size: 14px;
}

/* 釣果一覧の絞り込み。
   見出しの下に置く補助の操作なので、予約ボタンより弱く見せる。
   項目名を添えて、何を選ぶ欄なのかを見た目だけで分かるようにする */
.sb-filter {
  /* 中身の幅だけの枠にする。横いっぱいに伸ばすと、
     左右に大きな空きができて枠だけが目立つ */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--mk-line);
  border-radius: 8px;
  background: #fff;
}
/* 見出しが中央寄せなので、枠も中央に置く */
.sb-block-catch-list .sb-container { text-align: center; }
.sb-block-catch-list .sb-grid { text-align: left; }
.sb-filter__field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.sb-filter__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mk-gray);
  letter-spacing: 0.04em;
}
.sb-filter .sb-input,
.sb-filter .sb-select {
  min-width: 170px;
  height: 40px;
  background: #fff;
}
.sb-filter__act { display: flex; align-items: center; gap: 12px; }

/* 絞り込みは補助の操作。予約ボタン（塗りのオレンジ）とは別の見え方にする */
.sb-filter__btn {
  /* 入力欄と高さを揃える。line-height を明示しないと、
     ブラウザ既定の行送りでボタンだけ背が低くなる */
  height: 40px;
  line-height: 38px;
  padding: 0 26px;
  border: 1px solid var(--mk-navy);
  border-radius: 999px;
  background: var(--mk-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sb-filter__btn:hover { background: #fff; color: var(--mk-navy); }

.sb-filter__clear {
  font-size: 13px;
  color: var(--mk-gray);
  text-decoration: underline;
  white-space: nowrap;
}
.sb-filter__clear:hover { color: var(--mk-navy); }

@media (max-width: 767px) {
  /* 狭い画面では欄を横いっぱいに伸ばす。半端な幅で折り返すより押しやすい */
  .sb-filter { padding: 14px 16px; gap: 10px 12px; }
  .sb-filter__field { flex: 1 1 100%; }
  .sb-filter .sb-input,
  .sb-filter .sb-select { width: 100%; min-width: 0; }
  .sb-filter__act { flex: 1 1 100%; justify-content: center; margin-top: 2px; }
  .sb-filter__btn { flex: 1; }
}

/* 釣果のカード（catch_posts / catch_list で共用） */
.sb-catch-card { display: block; color: inherit; text-decoration: none; transition: box-shadow 0.2s; }
.sb-catch-card:hover { box-shadow: 0 4px 12px rgba(15, 47, 108, 0.15); }
.sb-catch-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sb-catch-card__noimg { width: 100%; aspect-ratio: 4 / 3; background: var(--mk-aqua); }
.sb-catch-card__body { padding: 12px 15px 15px; }
.sb-catch-card__date { font-size: 12px; color: var(--mk-gray); }
.sb-catch-card__title { margin: 4px 0 8px; font-size: 16px; font-weight: 700; color: var(--mk-navy); }
.sb-catch-card__fishes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }

/* 釣果の詳細 */
.sb-catch__date { display: block; margin-top: 10px; font-size: 14px; color: var(--mk-gray); }
.sb-catch__title { margin: 5px 0 0; font-size: 24px; font-weight: 700; color: var(--mk-navy); }
/* 釣果の写真。2枚以上は横送りにして、どれも同じ大きさで見せる。
   以前は1枚目だけ大きく2枚目以降を2列で並べていたので、
   写真ごとに見え方が変わっていた */
.sb-catch__gallery { margin-top: 20px; }
.sb-catch__stage {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* 指で払うと1枚ずつ気持ちよく止まる */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sb-catch__stage::-webkit-scrollbar { display: none; }
.sb-catch__shot {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  scroll-snap-align: center;
}
/* 1枚だけのときは横送りにしない（払えるように見えると迷わせる） */
.sb-catch__gallery:not([data-mk-gallery]) .sb-catch__stage { overflow: visible; }

/* サムネイルは常に出す。何枚あるかと、今どこを見ているかが同時に分かる */
.sb-catch__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.sb-catch__thumbs::-webkit-scrollbar { display: none; }
.sb-catch__thumb {
  flex: 0 0 auto;
  width: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 0;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
}
.sb-catch__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.sb-catch__thumb.is-current { border-color: var(--mk-navy); opacity: 1; }
.sb-catch__thumb:hover { opacity: 1; }
.sb-catch__table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.sb-catch__table th { text-align: left; font-weight: 400; color: var(--mk-gray); }
.sb-catch__table td { padding: 8px 0; border-top: 1px solid var(--mk-line); }
.sb-catch__table td.is-target { font-weight: 700; }
.sb-catch__sentiment { margin-top: 12px; font-size: 14px; }
.sb-catch__body { margin-top: 20px; }
/* 釣果の海況。
   釣りに行くか決めるときに真っ先に見る「天気・風・波・潮」を絵付きで
   大きく並べ、気温や気圧などの補足はその下に小さく添える。
   以前は8項目を同じ重さで縦に並べていたので、どれが大事か分からなかった */
.sb-weather { margin-top: 25px; padding: 16px 18px; background: var(--mk-aqua); border-radius: 6px; }
.sb-weather__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--mk-navy); }

.sb-weather__main {
  display: grid;
  /* 狭い画面は2列。4つが2段に収まり、1つずつが十分な大きさで出る */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sb-weather__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  background: #fff;
  border-radius: 6px;
  text-align: center;
}
.sb-weather__icon { width: 26px; height: 26px; color: var(--mk-cyan); }
.sb-weather__label { font-size: 11px; color: var(--mk-gray); }
.sb-weather__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--mk-navy);
  line-height: 1.3;
  /* 「北東 3.6m/s」のように長い値でも枠を壊さない */
  word-break: break-word;
}

/* 補足。読みたい人だけが読めばよいので、控えめに横へ流す */
.sb-weather__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-size: 13px;
}
.sb-weather__sub > div { display: flex; gap: 6px; }
.sb-weather__sub dt { color: var(--mk-gray); }
.sb-weather__sub dd { margin: 0; color: var(--mk-ink); font-weight: 700; }

@media (min-width: 600px) {
  /* 広い画面では4つを1列に並べる */
  .sb-weather__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-weather__icon { width: 28px; height: 28px; }
  .sb-weather__value { font-size: 16px; }
}

/* お知らせの一覧（/news） */
.sb-news { margin: 0; padding: 0; list-style: none; }
.sb-news__item { padding: 15px 0; border-top: 1px solid var(--mk-line); }
.sb-news__item:first-child { border-top: 0; }
.sb-news__date { font-size: 14px; color: var(--mk-gray); }
.sb-news__title { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--mk-navy); }
.sb-news__title a { color: inherit; text-decoration: none; }
.sb-news__file { font-size: 14px; text-decoration: underline; }

/* ページ送り。

   CakePHP のページャーは各項目を <li> で出す（prev/numbers/next とも）。
   その <li> が <ul> の外に並ぶため、既定のままだと箇条書きの点が
   ボタンの手前に並んで見える。点を消し、<li> 自体を並びの単位にする */
.sb-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; font-size: 14px; }
.sb-pager li {
  list-style: none;
  display: flex;
}
.sb-pager a,
.sb-pager span {
  padding: 5px 14px;
  border: 1px solid var(--mk-line);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
/* 今いるページと、押せない矢印。CakePHP は状態によって a と span の
   どちらでも出すため、両方に当てる */
.sb-pager .active a,
.sb-pager .active span { background: var(--mk-navy); border-color: transparent; color: #fff; }
.sb-pager .disabled a,
.sb-pager .disabled span { color: #bbb; cursor: default; }

.sb-embed { width: 100%; border: 0; }
.sb-gallery__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }

/* ============================================================
   予約状況・週のカレンダー

   月表示は「先の予定を探す」ためのもので1マスが小さい。
   週表示は「今週どこが空いているか」を見るためのもので、
   便の時刻と空き具合をマスの中に出せる
   ============================================================ */
.mk-week__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mk-week__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 船の名前が入るぶん、月表示のマスより高くする */
  min-height: 150px;
  padding: 8px 4px;
  border: 1px solid var(--mk-line);
  border-radius: 6px;
  background: #fff;
  color: var(--mk-ink);
  text-decoration: none;
}
a.mk-week__cell:hover { border-color: var(--mk-cyan); }
.mk-week__cell.is-off { background: #f7f8fa; color: var(--mk-gray); }

.mk-week__date { display: flex; align-items: baseline; gap: 4px; }
.mk-week__num { font-size: 20px; font-weight: 700; line-height: 1.1; }
.mk-week__wd { font-size: 12px; color: var(--mk-gray); }

.mk-week__status { font-size: 13px; font-weight: 700; }
.mk-week__status.is-open { color: var(--mk-cyan); }
.mk-week__status.is-few { color: var(--mk-orange); }
.mk-week__status.is-full,
.mk-week__status.is-closed,
.mk-week__status.is-chartered { color: var(--mk-gray); }

/* その日の便。船の名前を上、時刻と空き具合を下の行に置く。
   名前が無いと「どの船の空きか」が分からない */
.mk-week__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  font-size: 11px;
  line-height: 1.4;
}
.mk-week__plan {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 親（.mk-week__slot）の11pxより一段大きくして、時刻より先に目に入るようにする */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mk-navy);
}
.mk-week__line { display: flex; align-items: center; gap: 4px; }
.mk-week__time { color: var(--mk-gray); }
.mk-week__mark { font-weight: 700; }
.mk-week__more { font-size: 11px; color: var(--mk-gray); }

@media (max-width: 767px) {
  /* 横に並べるのはやめて、1日1行で縦に積む。
     1マスに船名が複数入るため、4列に割ると名前を出す幅が残らず、
     縮まない船名がグリッドを押し広げて画面からはみ出していた。
     縦積みなら船名も時刻も省略せずに読める */
  .mk-week__grid { grid-template-columns: 1fr; gap: 8px; }
  .mk-week__cell {
    /* 日付を左、便を右に置く。高さは中身に任せる */
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: start;
    gap: 4px 10px;
    min-height: 0;
    padding: 10px 12px;
    text-align: left;
  }
  /* 日付と空き具合は左の列に縦に並べる */
  .mk-week__date { grid-column: 1; justify-content: flex-start; }
  .mk-week__status { grid-column: 1; }
  .mk-week__num { font-size: 18px; }

  /* 便は右の列。何便あっても縦に積む。
     1件目だけ上端を日付とそろえる（下に流れると位置がちぐはぐに見える） */
  .mk-week__slot {
    grid-column: 2;
    align-items: flex-start;
    gap: 0;
    font-size: 12px;
  }
  .mk-week__slot:first-of-type { margin-top: -2px; }
  .mk-week__more { grid-column: 2; }
  /* 名前は折り返して全部見せる（横並びの時だけ1行に省略する） */
  .mk-week__plan { overflow: visible; white-space: normal; text-overflow: clip; }

  /* 休みの日は便が無く右が空くので、日付だけを1行に収める */
  .mk-week__cell.is-off { grid-template-columns: 52px 1fr; padding: 8px 12px; }
}

/* ============================================================
   釣果ページの下の導線（予約・電話・SNS・本体サイト）

   釣果を見た人がそのまま次へ進めるようにする。
   何を出すかは契約と設定で変わるので、無い項目は枠ごと出ない
   ============================================================ */
.mk-contact {
  padding: 40px 0 48px;
  background: var(--mk-aqua);
  text-align: center;
}
.mk-contact__act { margin-bottom: 24px; }

.mk-contact__lead { margin: 0 0 4px; font-size: 14px; color: var(--mk-gray); }
.mk-contact__num { margin: 0; }
.mk-contact__num a {
  font-family: var(--mk-font-en);
  font-size: 28px;
  font-weight: 700;
  color: var(--mk-navy);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.mk-contact__hours { margin: 6px 0 0; font-size: 13px; color: var(--mk-gray); }

.mk-contact__sns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}
.mk-contact__sns a {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--mk-navy);
  border-radius: 999px;
  color: var(--mk-navy);
  font-size: 13px;
  text-decoration: none;
}
.mk-contact__sns a:hover { background: var(--mk-navy); color: #fff; }

.mk-contact__main { margin: 22px 0 0; font-size: 14px; }
.mk-contact__main a { color: var(--mk-navy); }

@media (max-width: 767px) {
  .mk-contact { padding: 32px 0 36px; }
  .mk-contact__num a { font-size: 24px; }
}

/* ============================================================
   釣果の日の潮位グラフ

   外部ライブラリは使わず SVG で描く。観測点の名前は出さない
   （港名をそのまま見せると釣った場所だと誤解される）
   ============================================================ */
.sb-tide { margin-top: 16px; padding: 16px 18px; background: #fff; border: 1px solid var(--mk-line); border-radius: 6px; }
.sb-tide__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--mk-navy); }

.sb-tide__chart { margin: 0 -4px; }
.sb-tide__chart svg { display: block; width: 100%; height: 180px; }
.sb-tide__grid { stroke: var(--mk-line); stroke-width: 1; }
.sb-tide__line { fill: none; stroke: var(--mk-cyan); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sb-tide__dot { fill: #fff; stroke-width: 2.5; }
.sb-tide__dot.is-high { stroke: var(--mk-orange); }
.sb-tide__dot.is-low { stroke: var(--mk-navy); }

/* 時刻の目盛り。線はSVG、数字はHTMLで置いて字が潰れないようにする */
.sb-tide__hours { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: var(--mk-gray); }

/* 満潮・干潮。時刻が主役なので大きく、種別は色で分ける */
.sb-tide__marks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sb-tide__mark {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--mk-aqua);
  font-size: 12px;
  white-space: nowrap;
}
.sb-tide__mark.is-high { background: rgba(224, 138, 0, 0.1); }
.sb-tide__mark-label { font-weight: 700; color: var(--mk-navy); }
.sb-tide__mark.is-high .sb-tide__mark-label { color: var(--mk-orange); }
.sb-tide__mark-time { font-size: 15px; font-weight: 700; color: var(--mk-ink); }
.sb-tide__mark-cm { color: var(--mk-gray); }

@media (max-width: 480px) {
  .sb-tide { padding: 14px; }
  .sb-tide__chart svg { height: 150px; }
  /* 狭い画面では2列に畳む（4つの印が横1列だと字が潰れる） */
  .sb-tide__mark { flex: 1 1 calc(50% - 4px); }
}

/* ============================================================
   船の紹介（現行HPの top_sec06）／船長紹介
   ============================================================ */
.mk-boats, .mk-captains {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 30px 27px;
}
.mk-boat {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.mk-boat__inner { flex-grow: 1; padding: 0 0 8px; }
/* 船名は紺の帯。現行HPの実測（#17254F・20px・padding 8px） */
.mk-boat__name {
  margin: 0;
  padding: 8px;
  background: var(--mk-navy, #17254F);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.mk-boat__img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* 装備表。項目名は素の文字、値は色付きの札。
   現行HPは「なし」だけ灰（#46484A）、それ以外は橙（#D98201） */
.mk-boat__specs {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  margin: 16px 16px 0;
}
.mk-boat__specs dt {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mk-navy, #17254F);
}
.mk-boat__specs dd {
  margin: 0;
  padding: 2px 10px;
  min-width: 102px;
  background: #D98201;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.mk-boat__specs dd.is-none { background: #46484A; }
/* 特徴。見出しは紺の帯を幅いっぱいに、行の頭は「・」 */
.mk-boat__feat { margin: 18px 16px 0; }
.mk-boat__feat-ttl {
  margin: 0 0 8px;
  padding: 2px 10px;
  background: var(--mk-navy, #17254F);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.mk-boat__feat ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.9; }
.mk-boat__feat li::before { content: "・"; }
/* 担当船長と電話。上に細い罫を引いて下端にそろえる */
.mk-boat__foot {
  margin: 16px 16px 0;
  padding: 12px 0 16px;
  border-top: 1px solid #CFCFCF;
}
.mk-boat__captain { margin: 0; font-size: 16px; font-weight: 700; color: var(--mk-navy, #17254F); }
.mk-boat__captain a { color: inherit; text-decoration: none; }
.mk-boat__tel { margin: 6px 0 0; font-size: 20px; font-weight: 700; }
.mk-boat__tel a { color: var(--mk-navy, #17254F); text-decoration: none; }
.mk-boat__tel a::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: -4px;
  background: var(--mk-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-radius: 50%;
}
.mk-boat__more, .mk-captain__more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--mk-cyan);
  text-decoration: underline;
}
.mk-boats__note { margin-top: 24px; text-align: center; font-size: 15px; color: var(--mk-navy, #17254F); }

.mk-captain {
  background: #fff;
  border: 1px solid #CFE9F2;
  padding: 16px;
  text-align: center;
}
.mk-captain__img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
}
.mk-captain__name { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
.mk-captain__boats { margin: 4px 0 0; font-size: 12px; color: var(--mk-gray); }
.mk-captain__tel { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.mk-captain__tel a { color: var(--mk-ink); text-decoration: none; }
.mk-captain__desc { margin-top: 10px; font-size: 13px; line-height: 1.8; text-align: left; }
.mk-captain__desc p { margin: 0 0 6px; }

@media (min-width: 768px) {
  .mk-boats--cols2, .mk-captains--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-boats--cols3, .mk-captains--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-boats--cols4, .mk-captains--cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* くわしいページの上のカードは 1 件だけなので、中央に大きく出す */
.mk-detail .mk-boats,
.mk-detail .mk-captains {
  grid-template-columns: minmax(0, 600px);
  justify-content: center;
}
/* プランの詳細の文章（改行区切りをそのまま出す） */
.mk-plan__text { margin: 8px 0 0; line-height: 1.7; }

/* ============================================================
   メニューの入れ子（親の下にぶら下げる小メニュー）
   ============================================================ */
/* 引き出し（狭い画面）では字下げして全部見せる。折りたたまない
   （押さないと子が見えないより、そのまま並ぶ方が迷わない） */
.mk-header__submenu { margin: 0; padding: 0; list-style: none; }
.mk-header__submenu a {
  padding-left: 40px;
  font-size: 14px;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.06);
}
.mk-header__submenu a::before { content: "└ "; opacity: 0.7; }
.mk-header__caret { display: none; }

@media (min-width: 1100px) {
  /* 広い画面ではマウスを乗せると下に開く */
  .mk-header__menu > li.has-children { position: relative; }
  .mk-header__menu .mk-header__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-inline: 4px solid transparent;
    border-top: 5px solid currentColor;
  }
  .mk-header__menu .mk-header__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid rgba(15, 47, 108, 0.14);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s;
    z-index: 30;
  }
  .mk-header__menu > li.has-children:hover .mk-header__submenu,
  .mk-header__menu > li.has-children:focus-within .mk-header__submenu {
    opacity: 1;
    visibility: visible;
  }
  .mk-header__menu .mk-header__submenu li { border-right: 0; }
  .mk-header__menu .mk-header__submenu a {
    display: block;
    padding: 8px 16px;
    background: none;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
  }
  .mk-header__menu .mk-header__submenu a::before { content: none; }
  .mk-header__menu .mk-header__submenu a:hover { background: rgba(15, 47, 108, 0.06); opacity: 1; }
}