@charset "UTF-8";

:root {
    --main-color: #006E42;
    --white-color: #FFFFFF;

    /* テキストフォント */
    /* 日本語ベース */
    --font-base-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    /* 英語見出し */
    --font-base-family-en: 'Josefin Sans', 'Noto Sans JP', sans-serif;
    --font-base-size: 1rem; /* 16px */
    --font-base-weight-medium: 500;
    --font-base-weight-regular: 400;
    --font-base-weight-semibold: 600;
    --font-base-weight-bold: 700;
    --font-base-weight-black: 900;
    --font-base-line-height: 1.8;

    /* テキストカラー */
    --base-text-color: #000000;
    --white-text: #FFFFFF;
}

section {
    max-width: 1700px;
    margin: 0 auto;
}

.border {
    border: 1px solid #CBCBCB;;
}

/* ==========================================================================
*  下層ページ上部ヘッダー・下部フッター画像 共通
===========================================================================*/

.sub-page-header,
.sub-page-footer{
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 画像を中央基準で拡大 */
.sub-page-header picture,
.sub-page-footer picture{
    position: absolute;
    inset: 0;
}

.sub-page-header img,
.sub-page-footer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
*  下層ページ上部ヘッダー画像 エリア
===========================================================================*/

.sub-page-header {
    height: 21.23vw; /* 1700px幅のデザイン上での361px 361 ÷ 1700 × 100 = 21.23... */
    max-height: 361px;
}

/* 黒オーバーレイ */
.sub-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: #0F0F0F;
    opacity: 0.62;

    pointer-events: none;
}

/*===========================================================================
*   見出し
===========================================================================*/

/* 下層ページ上部ヘッダー画像 エリア */
.sub-page-header h3 {
    position: absolute;
    bottom: clamp(1.563rem, 0.272rem + 2.69vw, 3.125rem); /* 25px~50px */
    left: clamp(2.5rem, -0.597rem + 6.44vw, 6.25rem); /* 40px~100px */
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    font-size: clamp(1.25rem, 0.734rem + 1.07vw, 1.875rem); /* 20px~30px */
    font-weight: var(--font-base-weight-bold);
    color: var(--white-text);
    line-height: 1;

    gap: clamp(0.625rem, -0.407rem + 2.15vw, 1.875rem); /* 10px~30px */
}

.sub-page-header .h3-en {
    font-size: clamp(3.125rem, 1.06rem + 4.3vw, 5.625rem); /* 50px~90px */
    font-weight: var(--font-base-weight-semibold);
    font-family: var(--font-base-family-en);
    line-height: 1;
    color: var(--white-text);
}

/* 下層ページ下部フッター画像 エリア */
.sub-page-footer h3 {
    position: absolute;
    top: 50%;
    left: clamp(0.938rem, -3.657rem + 9.56vw, 6.5rem); /* 15px~104px */
    transform: translateY(-50%);
    z-index: 2;

    display: flex;
    flex-direction: column;

    font-size: clamp(0.813rem, 0.658rem + 0.32vw, 1rem); /* 13px~16px */
    font-weight: var(--font-base-weight-medium);
    color: var(--white-text);
    line-height: 1;

    gap: clamp(0.938rem, -0.198rem + 2.36vw, 2.313rem); /* 15px~37px */
}

.sub-page-footer .h3-en {
    font-size: clamp(2.188rem, 0.897rem + 2.69vw, 3.75rem); /* 35px~60px */
    font-weight: var(--font-base-weight-semibold);
    font-family: var(--font-base-family-en);
    line-height: 1;
    color: var(--white-text);
}

/*  ===============================
*   パンくず
================================ */

.breadcrumb {
    position: absolute;
    top: clamp(0.625rem, -0.407rem + 2.15vw, 1.875rem); /* 10px~30px */
    left: clamp(2.5rem, -0.597rem + 6.44vw, 6.25rem); /* 40px~100px */
    z-index: 2;

    font-size: 0.8125rem;
    font-weight: var(--font-base-weight-medium);
    color: var(--white-text);
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* 現在ページ */
.breadcrumb .is-current {
  pointer-events: none;
}

/* hover できるデバイス（PCなど）だけ hover を適用 */
@media (any-hover: hover) {
    .breadcrumb a:hover {
        opacity: 0.6;
    }
}

/* ==========================================================================
*  下層ページ下部フッター画像 エリア
===========================================================================*/

.sub-page-footer {
    height: 28.94vw; /* 1700px幅のデザイン上での492px 492 ÷ 1700 × 100 = 28.94... */
    max-height: 492px;
}

/* 三角形黒オーバーレイ */
.sub-page-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 42.5%;
    height: 100%;
    inset: 0;
    z-index: 1;

    background: #0F0F0F;
    opacity: 0.62;

    clip-path: polygon(
        0 0,
        60% 0,
        100% 50%,
        60% 100%,
        0 100%
    );

    pointer-events: none;
}

.sub-page-footer .text {
    font-size: clamp(0.938rem, 0.628rem + 0.64vw, 1.313rem); /* 15px~21px */
    font-weight: var(--font-base-weight-bold);
}

.sub-page-footer .common-button {
    padding-top: clamp(0.625rem, 0.109rem + 1.07vw, 1.25rem); /* 10px~20px */
}

.sub-page-footer .common-button > a {
    font-size: clamp(0.625rem, 0.47rem + 0.32vw, 0.813rem); /* 10px~13px */
}

/* ▼ ～768px：スマホ～タブレット */
@media screen and (max-width: 768px) {

    body {
        margin: 70.22px 0 0 0;
    }

    /* ==========================================================================
    *  下層ページ上部ヘッダー画像 エリア
    ===========================================================================*/

    .sub-page-header {
        height: 51.49vw; /* 402px幅のデザイン上での207px 207 ÷ 402 × 100 = 51.49... */
        overflow: hidden;
    }

    .sub-page-header img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /*===========================================================================
    *   見出し
    ===========================================================================*/

    /* 下層ページ上部ヘッダー画像 エリア */
    .sub-page-header h3 {
        bottom: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        justify-content: center;
        align-items: center;

        font-size: clamp(1.286rem, 0.578rem + 1.47vw, 2.143rem); /* 18px~30px */

        gap: 1.2rem;
    }

    .sub-page-header .h3-en {
        font-size: clamp(2.857rem, 1.677rem + 2.46vw, 4.286rem); /* 40px~60px */
    }

    /* 下層ページ下部フッター画像 エリア */
    .sub-page-footer .h3-en {
        font-size: clamp(2.188rem, 0.995rem + 5.09vw, 3.438rem); /* 35px~55px */
    }

    .sub-page-footer h3 {
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: clamp(0.929rem, 0.772rem + 0.62vw, 1.071rem); /* 13px~25px */
        gap: 30px;
    }

    h5 {
        font-size: 1.6429rem;
    }

    /*===========================================================================
    *   パンくず
    ===========================================================================*/

    .breadcrumb {
        position: static;
        display: flex;
        flex-direction: row;
        justify-content: center;

        font-size: 0.9286rem;
        color: var(--base-text-color);

        padding-top: 1.8571rem;
    }

    .breadcrumb.sp .lightglay {
        color: #6A6A6A;
    }

    /* ==========================================================================
    *  下層ページ下部フッター画像 エリア
    ===========================================================================*/

    .sub-page-footer {
        height: 91.29vw; /* 402px幅のデザイン上での367px 367 ÷ 402 × 100 = 91.29... */
        max-height: 367px;
    }
    
    .sub-page-footer::before {
        width: 100%;
        clip-path: none;
    }

    .sub-page-footer .text {
        font-size: clamp(1.357rem, 0.886rem + 1.88vw, 1.786rem); /* 19px~25px */line-height: 1.57;
    }

    .sub-page-footer .common-button {
        padding-top: 0;
    }

    .sub-page-footer .common-button > a {
        font-size: clamp(0.857rem, 0.622rem + 0.94vw, 1.071rem); /* 12px~15px */
    }

}