/*===============================================================
  ## ID   　 : Site.css
  ## 名称　　: サイト共通スタイルシート
  ## 説明　　: 全画面で共通のフォント・レイアウト・装飾を定義する
  ##           見出し系: Zen Maru Gothic / 本文系: Noto Sans JP
  ##【更新履歴】
  ## No-更新日---更新者-説明
  ## 01 2026/08/17  K.KIMURA  フォント変更、ページタイトルの太字化
  ## 02 2026/08/18  K.KIMURA  画面レイアウト修正対応（ヘッダ部）
  ## 03 2026/08/20  K.KIMURA  画面レイアウト修正対応（戻るリンクの位置）
===============================================================*/
/* 01 ST */
/* ===============
    フォント設定
   =============== */
/* Zen Maru Gothic（サーバーから直接読込） */
@font-face {
    font-family: "Zen Maru Gothic";
    src: url("fonts/Zen_Maru_Gothic/ZenMaruGothic-Light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Zen Maru Gothic";
    src: url("fonts/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Zen Maru Gothic";
    src: url("fonts/Zen_Maru_Gothic/ZenMaruGothic-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Zen Maru Gothic";
    src: url("fonts/Zen_Maru_Gothic/ZenMaruGothic-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}

/* Noto Sans JP（サーバーから直接読込） */
@font-face {
    font-family: "Noto Sans JP";
    src: url("fonts/Noto_Sans_JP/NotoSansJP-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans JP";
    src: url("fonts/Noto_Sans_JP/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}
/* 01 ED */

/* 01 ST */
/* =====================================
    基本レイアウト・共通タイポグラフィ
   ===================================== */
/* 見出し文字：Zen Maru Gothic */
h1, h2, h3, h4, h5, h6 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    margin-top: 0.5rem;
    margin-bottom: 0;
    line-height: 1;
}
/* 01 ED */

body {
    /* 01 ST */
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    /* 01 ED */
    padding-bottom: 10px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* 02 ST */
/* ===============================
    ヘッダー （デフォルト＝PC幅）
   =============================== */
.header-area {
    position: relative;
    width: 100%;
    max-height: 1500px; /* ヘッダーの表示上限 */
    overflow: hidden;
    margin-bottom: 1rem; /* 背景画像の波形下端が透過のため、コンテンツとの間に余白を確保 */
    padding-bottom: 24px; /* 03 リンクの表示領域をヘッダー下端に確保 */
}

/* 背景画像（専用クラスで限定） */
.header-bg {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

/* ロゴ（画面幅に応じてサイズ変化） */
.header-logo {
    position: absolute;
    top: 4%;
    left: 1.5%;
    height: auto;
    width: 16vw; /* 画面幅の30%を基準 */
    min-width: 100px; /* 狭い画面の最低px */
    max-width: 210px; /* 広い画面の最大px */
}

/* タイトル */
.header-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: auto;
}

/* 01 ST */
/* 見出し */
.header-title h5 {
    font-size: 2rem;
    white-space: nowrap;
}

.header-title h6 {
    font-size: 1.5rem;
    white-space: nowrap;
}

.header-subtitle {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    white-space: nowrap;
}
/* 01 ED */

.header-title-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.header-title-row h5 {
    margin: 0;
}
/* 02 ED */

/* 03 ST */
/* ナビゲーションリンク（戻るリンク等） */
.nav-link-area {
    /*    font-size: 1.25rem;    */
    font-size: 1rem;
    position: absolute;
    top: 85%;
    left: 4px;
    z-index: 20;
}
/* ====================================
    レスポンシブ（タブレット ～767px）
   ==================================== */
@media (max-width: 767.98px) {

      .header-area {
        max-height: 500px;
        padding-bottom: 50px;
        margin-bottom: 0.5rem;
        overflow: hidden;
    }  

    .header-bg {
        display: block;
        width: 200%;
        height: auto;
        border: none;
    }
    
    .header-logo {
        width: 16vw;
        min-width: 80px;
        max-width: 160px;
    }

    .header-title {
        top: 50%;
        left: 50%;
    }

    .header-title h5 {
        font-size: 1.5rem;
    }

    .header-title h6 {
        font-size: 1rem;
    }

    .header-subtitle {
        font-size: 1rem;
    }

    .nav-link-area {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* ========================================
    レスポンシブ（スマートフォン ～575px）
   ======================================== */
@media (max-width: 575.98px) {
    .header-area {
        overflow: hidden;
        max-height: 200px;
    }

    .header-logo {
        top: 3%;
        width: 22vw;
        min-width: 60px;
        max-width: 100px;
    }

    .header-title {
        top: 35%;
        left: 50%;
    }

    .header-title h5 {
        font-size: 1rem;
    }

    .header-title h6 {
        font-size: 0.8rem;
    }

    .header-subtitle {
        font-size: 0.8rem;
    }

    .nav-link-area {
        font-size: 0.8rem;
        top: 70%;
        left: 4px;
    }

    .btn {
        font-size: 0.875rem;
        padding: 0.3rem 0.5rem !important;
        margin: 0.1rem !important;
    }
}
/* 03 ED */

.dl-horizontal dt {
    white-space: normal;
}


input.input-validation-error,select.input-validation-error,textarea.input-validation-error {
    border: 1px solid #e80c4d;
    background-color: #ffeeee;
}

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

.ttl-style {
    display: flex;
}

.ttl-mleft {
    margin-right: 16px;
}

.font-color-red {
    color: red;
}

@media (min-width: 0px) {
    .ttl-position {
        margin-left: 8px;
    }
}

@media (min-width: 600px) {
    .ttl-position {
        margin-left: calc((100vw / 2) - 144px);
    }
}