@charset "utf-8";

/* ===============================
 　海況情報全ページ共通デザイン
=============================== */

/* デザイン */
:root {
  /* 色 */
  --color-text: #555;　　　 　/* 基本文字色 */
  --color-bg: #fff;　　　　 　/* ページ背景色 */
  --color-link: #007bff;　　　/* リンク色 */
  --color-primary: #1e90ff; 　/* 海保カラー */
  --color-muted: #eee;　　　　/* 枠線用 */

  /* 基準フォントサイズ */
  --fs-root: 15px;　　　/* スマホ想定 */
  --fs-root-lg: 17px;　 /* PC想定 */

  /* UI装飾 */
  --radius: 8px;　　　　　　　　　　　　　/* 角丸の基本値 */
  --shadow: 0 4px 12px rgba(0,0,0,.08); 　/* 浮き出し用影 */
}

/*  */
* {
  box-sizing: border-box;
}

/* ブラウザの自動文字サイズ変更を抑制 */
html {
  font-size: var(--fs-root);
  -webkit-text-size-adjust: 100%;
}

/* 画面幅が900pxを超えたら文字サイズ変更 */
@media (min-width: 900px) {
  html {
    font-size: var(--fs-root-lg);
  }
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: "Hiragino Kaku Gothic ProN","Meiryo","メイリオ",sans-serif;

  /* 全HTML固定 line-height */
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* スクリーンリーダー用 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 文字レイアウト */

/* 大見出し */
.page-title {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 20px 0 20px;
  text-align: center;
}
.page-title .block {
  display: block;
}
.page-title#past-title {
  margin-top: 48px;
}

/* 見出し */
.section-title {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 10px 0 10px;
  text-align: center;
}

/* 小見出し */
.sub-title {
  font-size: 1rem;
  line-height: 1.5;
  margin: 20px 0 8px;
}

/* カードタイトル */
.card-title {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
  text-align: center;
}

/* 本文 */
.section-lead {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* カード本文 */
.card-lead {
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}

/* 注記・補足 */
.text-alert {
  font-size: 0.85rem);
  line-height: 1.4;
  margin: 0 0 8px;
  color: #777;
}

/* ページレイアウト */
.container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ヘッダー */
.site-header {
  padding: 6px 0 0;
  background: #fff;
}

.site-header .container {
  display: flex;
  align-items: center;
}

.brand__logo {
  height: 56px;
}

/* ===============================
 Breadcrumb
=============================== */
.breadcrumb-bar {
  background: #fff;
}

.global-nav {
  font-size: var(--fs-sm);
  margin: 8px 0;
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .4em;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin: 0 .3em;
  color: #999;
}

/* ===============================
 Footer
=============================== */
.site-footer {
  margin-top: 40px;
  text-align: center;
  padding: 20px 0;
  background: #6699ff;
  color: #fff;
  font-size: 0.9rem;
}

/* ===============================
 印刷設定
=============================== */
@media print{
  @page {
    size: auto;
    margin: 0;
  }

  body {
    width: 1080px;
    margin: 0;
    padding: 0;
    background: #fff;
  }
  
  .print-root {
    width: 1080px;
    position: relative;
    left:50%;
    transform: translateX(-50%);
    padding: 8mm;
    background: #fff;
  }

  .container {
    width: 1080px;
    max-width: 1080px;
    padding-inline: 16px;
  }
}