/*
  common.css
  沖縄旅客船協会サイト共通スタイル（ヘッダー／フッター／文字サイズ切替／基本レイアウト）
  全ページ（トップ／概要／航路案内／会員一覧／お知らせ／会員専用）から読み込む。
  ページ固有のコンテンツスタイルは各ページの `css/<page>.css` に記述する。
*/
:root{
  /* 2026-08-27 配色改訂：紺・黄緑・朱・ページ地を刷新（玉色は変更なし） */
  --navy:#1E4A57;
  --tama:#86C3D6;
  /* about.css の項目塗り color-mix(var(--tama) 22%, transparent) を薄い玉色地(#E7EFEE)の
     上で見た時と同じ見え方になるよう計算した不透明色。フッター（玉色地）の現在地チップは
     半透明だと地に同化して消えるため、見た目だけ揃えたこの不透明色を使う。 */
  --tama-light:#D2E5E9;
  --tama-pale:#F2F1E9;
  --vermilion:#B0603F;
  --link:#1E4A57;
  --font-scale:1;
  --text:#242B2A;
  --text-mute:#66716E;
  --line:#DEDBCE;
  --header-text:#242B2A;
  --accent:#A9DB5C;
  /* 角丸トークン（全ページ共通）
     --r-sm : チップ・タグ・小さな行アイテム・入れ子要素
     --r-md : カード・パネル・一覧枠・タブ・ボタン
     --r-pill: ピル型（文字サイズ切替・地区タブ等） */
  --r-sm:4px;
  --r-md:10px;
  --r-pill:999px;
  /* レイアウト共通トークン
     --content-max : 見出し・本文・カード等コンテンツ本体の最大幅（中央寄せ）
     --gutter      : コンテンツ左右の余白。狭い画面では @media で 18px に縮める */
  --content-max:1100px;
  --gutter:32px;
}
*{box-sizing:border-box;}
body{
  /* 背景は画面幅いっぱい。上下のバウンススクロール時に見えるのはヘッダー／フッターと同じ玉色 */
  margin:0;background:var(--tama);
  font-family:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:calc(17px * var(--font-scale));line-height:1.85;color:var(--text);
}
/* ページ全体：縦積みのフレックスにして、内容が少なくてもフッターが画面下端に来るようにする
   （スティッキーフッター）。内容が多いページは自然に下へ伸びる。
   ヘッダー・本文エリア・フッターの背景は画面幅いっぱい、中身は各ラッパーで中央寄せ。 */
.page{
  display:flex;flex-direction:column;
  min-height:100vh;
  background:#E7EFEE;
  overflow:hidden;
}
@supports (min-height:100dvh){
  .page{min-height:100dvh;}
}

/* ヘッダー */
.headrow{
  width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;
}
.headright{display:flex;flex-direction:column;align-items:flex-end;gap:15px;}
.fontbar{
  display:flex;align-items:center;gap:8px;
  background:#F9F8F3;border:2px solid var(--accent);border-radius:var(--r-pill);padding:5px 12px 5px 14px;
}
.fontbar span{font-size:.72em;color:var(--text);}
.fontbar button{
  font-family:inherit;border:none;background:transparent;color:var(--text);
  border-radius:var(--r-pill);padding:3px 12px;cursor:pointer;font-size:.72em;line-height:1.6;
}
.fontbar button.on{background:var(--navy);color:#fff;font-weight:700;}

header{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0 38px;background:var(--tama);flex-wrap:wrap;position:relative;}
/* ヘッダー下端の断ち切り波（2026-09-11 デザイン確定案④）。
   ::before＝半透明の薄紙（88%幅）、::after＝不透明の紙（78%幅、.pageの地色E7EFEEで塗る）。
   どちらも78%/88%で右端が断ち切られ、下の薄紙だけ少しはみ出して見える。
   幅・高さはフッター側（下）の断ち切りと対になっているので、変更する場合はフッター側の
   ::before/::after と揃えること。 */
header::before{
  content:"";position:absolute;left:0;bottom:-1px;width:88%;height:26px;pointer-events:none;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 26" preserveAspectRatio="none"><path d="M0,0 C104,13 221,-7 338,-1 C455,5 559,-4 650,1 L650,26 L0,26 Z" fill="%23FFFFFF" fill-opacity=".38"/></svg>') no-repeat;
  background-size:100% 100%;
}
header::after{
  content:"";position:absolute;left:0;bottom:-1px;width:78%;height:26px;pointer-events:none;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 26" preserveAspectRatio="none"><path d="M0,8 C104,21 221,1 338,7 C455,13 559,4 650,9 L650,26 L0,26 Z" fill="%23E7EFEE"/></svg>') no-repeat;
  background-size:100% 100%;
}
.logo-link{display:block;color:inherit;text-decoration:none;}
.logo-sub{font-size:.76em;color:var(--navy);opacity:.85;letter-spacing:.06em;line-height:1.4;margin-bottom:2px;}
.logo-main{margin:0;font-size:1.7em;color:var(--navy);font-weight:700;letter-spacing:.03em;line-height:1.3;}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;font-size:.95em;font-weight:500;color:var(--navy);letter-spacing:.03em;align-items:center;}
nav a{color:inherit;text-decoration:none;}
nav a:hover{color:var(--vermilion);}
nav a.cur{color:var(--link);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:2px;}
nav a.lock{color:var(--link);font-weight:700;display:inline-flex;align-items:center;gap:5px;}
nav .lock svg{flex-shrink:0;}

/* 本文共通ラッパー・見出し */
/* 背景（.page の #E7EFEE）は画面幅いっぱい。中身は最大幅で中央寄せ。
   flex:1 0 auto でこのエリアが縦に伸び、内容が短くてもフッターを画面下端へ押し下げる。 */
.body{
  flex:1 0 auto;
  width:100%;max-width:var(--content-max);margin-inline:auto;
  padding:0 var(--gutter);
}
.crumb{padding:12px 0 0;font-size:.8em;color:var(--text-mute);}
.crumb a{color:var(--text-mute);text-decoration:none;}
.crumb a:hover{color:var(--link);text-decoration:underline;text-underline-offset:2px;}
h1{font-size:1.15em;font-weight:700;color:var(--navy);margin:8px 0 20px;letter-spacing:.03em;}

.sectlabel{
  display:block;color:var(--vermilion);font-size:1.05em;font-weight:700;
  margin:26px 0 12px;letter-spacing:.04em;
}
.sectlabel:first-of-type{margin-top:0;}

/* フッター（背景は画面幅いっぱい、中身は .fwrap で中央寄せ） */
footer{background:var(--tama);padding:28px 0 24px;margin-top:56px;position:relative;}
/* フッター上端の断ち切り波。ヘッダー側と同じ形・幅を上下反転して使う。
   ::before＝不透明の紙（78%幅、玉色）、::after＝半透明の薄紙（88%幅）で、
   薄紙だけ少しはみ出して覗く。 */
footer::before{
  content:"";position:absolute;left:0;top:-25px;width:78%;height:26px;pointer-events:none;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 26" preserveAspectRatio="none"><path d="M0,19 C104,5 221,26 338,17 C455,8 559,23 650,16 L650,0 L0,0 Z" fill="%2386C3D6"/></svg>') no-repeat;
  background-size:100% 100%;
}
footer::after{
  content:"";position:absolute;left:0;top:-25px;width:88%;height:26px;pointer-events:none;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 26" preserveAspectRatio="none"><path d="M0,19 C104,5 221,26 338,17 C455,8 559,23 650,16 L650,8 C559,15 455,0 338,9 C221,18 104,-3 0,11 Z" fill="%23FFFFFF" fill-opacity=".38"/></svg>') no-repeat;
  background-size:100% 100%;
}
.fwrap{
  width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;
}
.fleft{flex:1;min-width:250px;}
.fleft .sub{font-size:.78em;color:var(--link);opacity:.75;letter-spacing:.06em;}
.fleft .main{font-size:1.5em;color:var(--navy);font-weight:700;letter-spacing:.06em;margin-bottom:14px;}
.fleft .addr{font-size:.9em;color:var(--text);line-height:2;}
.fnav{flex:1;min-width:260px;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;padding-top:6px;}
.fnav span,.fnav a{font-size:1em;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:7px;text-decoration:none;border-radius:var(--r-sm);padding:2px 8px;margin:-2px -8px;}
.fnav a.cur{background:var(--tama-light);}
.fnav em{color:var(--link);font-style:normal;}
.copy{background:var(--tama);border-top:2px solid rgba(255,255,255,.4);padding:13px var(--gutter);text-align:center;font-size:.76em;color:#4E5B58;}

@media (max-width:640px){
  /* 左右余白を狭める。--gutter を差し替えるだけで .headrow / .body / .fwrap / .copy に反映される */
  :root{--gutter:18px;}
  header{padding:16px 0 30px;}
  header::before{width:70%;height:20px;}
  header::after{width:60%;height:20px;}
  footer{padding:26px 0 22px;}
  footer::before{width:60%;height:20px;top:-19px;}
  footer::after{width:70%;height:20px;top:-19px;}
  .headrow{flex-direction:column;}
  .headright{align-items:flex-start;width:100%;}
}