/* 船釣り予約サイト
   方針：装飾を足さない。文字と余白で階層をつくる。角丸とグラデーションは使わない。
   色は海と船具から取る（藍・鉄紺・砂・朱） */

:root{
  --ai:#12324a;        /* 藍 */
  --ai-d:#0a2133;      /* 濃藍 */
  --suna:#f6f4ef;      /* 砂 */
  --kami:#fff;
  --sumi:#1a1a1a;
  --usu:#6b7280;
  --sen:#e2ded6;
  --shu:#b7352d;       /* 朱＝要注意 */
  --midori:#1f6b4a;    /* 受付中 */
  --maxw:960px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  color:var(--sumi); background:var(--suna); line-height:1.75;
  font-size:16px; -webkit-text-size-adjust:100%;
}
a{color:var(--ai); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ヘッダー */
header.site{background:var(--ai); color:#fff}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
header.site a{color:#fff}
header.site .logo{font-size:19px; font-weight:700; letter-spacing:.06em}
header.site nav a{margin-left:18px; font-size:14px; opacity:.9}

/* 見出し */
h1{font-size:28px; line-height:1.45; margin:28px 0 6px; font-weight:700; letter-spacing:.01em}
h2{font-size:20px; margin:40px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--ai);
   font-weight:700; letter-spacing:.02em}
h3{font-size:16px; margin:22px 0 8px; font-weight:700}
.lead{color:var(--usu); font-size:15px; margin:0 0 8px}

/* 箱 */
.card{background:var(--kami); border:1px solid var(--sen); padding:18px 20px; margin:0 0 14px}
.card.tight{padding:14px 16px}
.grid{display:grid; gap:14px}
@media(min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

/* 出船の一覧 */
.trip{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
      background:var(--kami); border:1px solid var(--sen); border-left:4px solid var(--ai);
      padding:14px 16px; margin-bottom:10px}
.trip .when{font-size:15px; font-weight:700; min-width:9.5em}
.trip .what{flex:1 1 12em; min-width:12em}
.trip .what small{display:block; color:var(--usu); font-size:13px; font-weight:400}
.trip .yen{font-size:18px; font-weight:700; white-space:nowrap}
.trip .yen small{font-size:12px; font-weight:400; color:var(--usu)}
.trip.cancelled{border-left-color:var(--shu); background:#fdf6f5}
.trip.full{opacity:.62}

.seat{font-size:13px; padding:3px 9px; border:1px solid currentColor; white-space:nowrap}
.seat.ok{color:var(--midori)}
.seat.few{color:var(--shu)}
.seat.no{color:var(--usu)}

/* ボタン */
.btn{display:inline-block; background:var(--ai); color:#fff; padding:11px 22px; border:0;
     font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; letter-spacing:.04em}
.btn:hover{background:var(--ai-d); text-decoration:none}
.btn.sub{background:#fff; color:var(--ai); border:1px solid var(--ai)}
.btn.warn{background:var(--shu)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn[disabled]{background:#c9c9c9; cursor:not-allowed}

/* 入力 */
label{display:block; font-size:13px; color:var(--usu); margin:14px 0 4px}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],
input[type=time],select,textarea{
  width:100%; padding:11px 12px; border:1px solid #b9b4aa; background:#fff;
  font-size:16px; font-family:inherit}
textarea{min-height:80px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>*{flex:1 1 160px}

/* 表 */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{border-bottom:1px solid var(--sen); padding:9px 8px; text-align:left; vertical-align:top}
th{color:var(--usu); font-weight:400; white-space:nowrap; width:11em}
.scroll{overflow-x:auto}

/* 釣果 */
.catch{border-bottom:1px solid var(--sen); padding:12px 0}
.catch .d{font-size:13px; color:var(--usu)}
.catch .t{font-weight:700}
.catch .c{font-size:14px}

/* 注意書き */
.note{background:#fff8e8; border-left:4px solid #c99700; padding:12px 14px; font-size:14px; margin:14px 0}
.alert{background:#fdf1f0; border-left:4px solid var(--shu); padding:12px 14px; font-size:14px; margin:14px 0}

footer.site{margin-top:56px; padding:26px 0 40px; background:var(--ai-d); color:#c7d3dc; font-size:13px}
footer.site a{color:#c7d3dc}
.muted{color:var(--usu); font-size:13px}
.tag{display:inline-block; font-size:12px; border:1px solid var(--sen); padding:2px 8px; margin:0 4px 4px 0; color:var(--usu)}

/* 記事本文 */
.doc{font-size:16.5px; line-height:1.95}
.doc h2{font-size:21px; margin:44px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--ai)}
.doc h3{font-size:17px; margin:30px 0 8px}
.doc p{margin:0 0 18px}
.doc ul,.doc ol{margin:0 0 20px; padding-left:1.4em}
.doc li{margin:7px 0}
.doc table{margin:8px 0 24px; background:#fff; border:1px solid var(--sen)}
.doc th{width:auto; background:#f2efe9; color:var(--sumi); font-weight:700; white-space:nowrap}
.doc td{vertical-align:middle}
.doc .num{text-align:right; white-space:nowrap}
.doc blockquote{margin:0 0 22px; padding:14px 18px; background:#fff; border-left:4px solid var(--ai)}
.doc .src{font-size:13px; color:var(--usu); margin:-14px 0 24px}
.doc strong{font-weight:700}