/* =================================================================
                        共通設定
===================================================================*/

:root {
    /* ========================= フォント ========================= */

    --font-family-base: "Space Grotesk", "Zen Kaku Gothic Antique", sans-serif;

    /* ========================= フォントサイズ（日本語タイトル） ========================= */

    --font-size-title-hero: 8.6rem;
    --font-size-title-xxl: 3.8rem;
    --font-size-title-xl: 3.0rem;
    --font-size-title-lg: 2.6rem;
    --font-size-title-md: 2.4rem;
    --font-size-title-sm: 2.1rem;
    --font-size-title-s: 2.0rem;

    /* ========================= フォントサイズ（英語タイトル） ========================= */

    --font-size-title-hero-en: clamp(18rem, 15.9722222vw, 23rem);
    --font-size-title-en: 11rem;

    /* ========================= フォントサイズ（本文テキスト） ========================= */

    --font-size-body-sm: 1.4rem;
    --font-size-body-md: 1.6rem;
    --font-size-body-lg: 1.8rem;

    /* ========================= フォントサイズ（ボタン） ========================= */

    --font-size-button: 1.8rem;
    --font-size-large-button: 2.1rem;

    /* ========================= カラー：背景色 ========================= */

    --bg-color-blue: #2E4787;
    --bg-color-light-blue: #F9FAFF;
    --bg-color-light-gray: #F7F7F7;

    /* ========================= カラー：テキスト色 ========================= */

    --text-color-white: #ffffff;
    --text-color-blue: #002277;
    --text-color-black: #333333;
    --text-color-gray: #484848;
    --text-color-light-gray: #8B8B8B;
    --text-color-light-red: #C00000;

    /* ========================= カラー：装飾・補助 ========================= */

    --title-en-color: rgba(163, 163, 163, 0.16);
    --text-number-gray: #8B8B8B;
}

/* ========================= タブレット・レスポンシブ対応（1024px以下） ========================= */
@media (max-width: 1024px) {
    :root {
        /* ========================= フォントサイズ（英語タイトル） ========================= */
        --font-size-title-hero-en: clamp(6rem, 15.9722222vw, 18rem);
        --font-size-title-en: clamp(9rem, 6vw, 11rem);

        /* ========================= フォントサイズ（日本語タイトル） ========================= */
        --font-size-title-hero: clamp(7rem, 1.2vw, 8rem);
        --font-size-title-xxl: clamp(3.4rem, 1.2vw, 3.8rem);
        --font-size-title-xl: clamp(2.8rem, 1.2vw, 3.2rem);
        --font-size-title-lg: clamp(2.4rem, 1.2vw, 2.6rem);
        --font-size-title-md: clamp(2.0rem, 1.2vw, 2.4rem);
        --font-size-title-sm: clamp(1.8rem, 1.2vw, 2.1rem);
        --font-size-title-s: clamp(1.6rem, 1.2vw, 2.0rem);

        /* ========================= フォントサイズ（本文テキスト） ========================= */
        --font-size-body-sm: clamp(1.2rem, 1.2vw, 1.4rem);
        --font-size-body-md: clamp(1.4rem, 1.2vw, 1.6rem);
        --font-size-body-lg: clamp(1.4rem, 1.2vw, 1.8rem);
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) {
    :root {
        /* ========================= フォントサイズ（英語タイトル） ========================= */
        --font-size-title-en: 6rem;

        /* ========================= フォントサイズ（日本語タイトル） ========================= */
        --font-size-title-hero: 3.6rem;
        --font-size-title-xxl: 2rem;
        --font-size-title-xl: 2rem;
        --font-size-title-lg: 1.6rem;
        --font-size-title-md: 1.6rem;
        --font-size-title-sm: 1.6rem;

        /* ========================= フォントサイズ（本文テキスト） ========================= */
        --font-size-body-sm: 1.2rem;
        --font-size-body-md: 1.4rem;
        --font-size-body-lg: 1.4rem;
    }
}


/* =================================================================
                        ベースフォント・リセット系
===================================================================*/

/* 全体の基準フォントサイズを設定（1rem = 10px） */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* 基本のフォント設定・色・行間など */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-md);
    letter-spacing: 0.01em;
    color: #333;
    line-height: 1;
    background-color: #fff;
}

/* ふわっと表示 */
.fadeIn {
	animation: fadein 1s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* リンクのデフォルトスタイル（装飾なし） */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    /* ホバー効果を追加する場合に使う */
}

/* 画像のスタイル（現状未設定） */
img {
}

/* リストの余白とマーカーをリセット */
ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 段落テキストのスタイル */
p {
    font-size: var(--font-size-body-md);
    font-weight: 500;
    color: var(--text-color-gray);
}

/* ========================= 表示制御（PC・SP切替） ========================= */
/* PCのみ表示 */
.pc-only {
    display: block;
}

/* SP（スマホ）のみ表示 */
.sp-only {
    display: none !important;
}

/* ========================= ボタン（共通） ========================= */
/* 標準ボタン（中サイズ） */
.btn {
    display: inline-block;
    position: relative;
    padding: 1.27em 1.7em;
    width: 260px;
    background-color: var(--text-color-blue); /* 青背景 */
    color: var(--text-color-white);           /* 白文字 */
    text-decoration: none;
    border-radius: 9999px;                    /* 丸みのある角 */
    font-size: var(--font-size-body-lg);
    font-weight: 700;
    text-align: initial;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* 左側に余白が広いボタン（ラージ） */
.btn-l {
    display: inline-block;
    position: relative;
    padding: 1.27em 1.7em 1.27em 2.2em;
    width: 280px;
    background-color: var(--text-color-blue);
    color: var(--text-color-white);
    text-decoration: none;
    border-radius: 9999px;
    font-size: var(--font-size-body-lg);
    font-weight: 700;
    text-align: initial;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border: 2px solid transparent;
    box-sizing: border-box;
}

/* ボタン内の右矢印アイコン */
.btn::after {
    position: absolute;
    top: 50%;
    right: 1.7em;
    width: 0.7em;
    height: 0.7em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
    transition: transform 0.3s ease;
}

/* ホバー時に矢印を右へスライド */
.btn:hover::after {
    transform: translate(4px, -50%) rotate(45deg);
}

/* ホバー時の色変更（反転） */
.btn:hover {
    border: 2px solid var(--text-color-blue);
    background-color: var(--text-color-white);
    color: var(--text-color-blue);
    box-sizing: border-box;
}

/* 注意点 */
.required {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color-light-red);
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) {
    /* ボタン（中サイズ）のパディング調整と幅をレスポンシブ対応 */
    .btn {
        padding: 1.2em 1.9em;
        width: 48vw;
        min-width: 180px;
        max-width: 240px;
    }

    /* ボタン（ラージ）のパディング調整と幅をレスポンシブ対応 */
    .btn-l {
        padding: 1.2em 1.9em 1.2em 1.7em;
        width: 48vw;
        min-width: 210px;
        max-width: 240px;
    }

    /* 矢印位置の調整 */
    .btn::after {
        right: 1.6em;
        width: 0.7em;
        height: 0.7em;
        transform: translateY(-50%) rotate(45deg);
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        content: "";
        transition: transform 0.3s ease;
    }

    .btn:hover::after {
        transform: translate(4px, -50%) rotate(45deg);
    }

    .btn:hover {
        border: 2px solid var(--text-color-blue);
        background-color: var(--text-color-white);
        color: var(--text-color-blue);
        box-sizing: border-box;
    }

    /* PC表示を非表示 */
    .pc-only {
        display: none !important;
    }

    /* スマホのみ表示 */
    .sp-only {
        display: block !important;
    }

    /* 注意点 */
    .required {
        font-size: 1.2rem;
    }
}

/* ===============================================================
    LAYOUT - レイアウト定義
=============================================================== */
.header,
.footer {
    width: 100%;
    font-weight: 700;
}

.header__inner,
.footer__inner {
    margin: 0 auto;
    padding: 0 60px; /* 左右余白 */
}

.main {
    margin: 0 auto;
}

.section {
    padding: 140px 0 ; /* セクション余白 */
}

@media (max-width: 1200px) {
    .header__inner {
        padding: 0 24px;
    }
}

/* ========================= タブレット・レスポンシブ対応（1024px以下） ========================= */
@media (max-width: 1024px) { 
    .header__inner,
    .footer__inner {
        padding: 0 20px;
    }

    .section {
        padding: 80px 0;
    }
}

/* ===============================================================
    HEADER - ヘッダー関連
=============================================================== */
.header {
    letter-spacing: 3%;
    position: fixed;
    z-index: 9999;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header__inner {
    height: 115px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between; /* ロゴとnavを左右に配置 */
}

.header__logo {
    width: 260px;
}

.header__logo img {
    width: 100%;
    min-width: 130px;
}

/* ナビゲーション - 全体ラッパー */
.header__nav {
    flex: 1;
    display: flex;
    align-items: center;
}

/* ハンバーガーボタン（SP表示） */
.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10001; /* ヘッダーより前面 */
}

.header__hamburger span {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

/* ナビリスト */
.nav-list {
    display: flex;
    position: relative;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: flex-end;
    font-size: var(--font-size-body-md);
    color: var(--text-color-white);
}

/* 中央グループ：ライゼンを知る〜お知らせ */
.nav-list__item:not(.nav-list__item--contact) {
    position: relative;
    margin: 0 1.111111vw;
}

/* 最初のメニューを左寄せ */
.nav-list__item:first-child {
    margin-left: auto;
}

/* 最後のメニューを右寄せ */
.nav-list__item.nav-list__item--news {
    margin-right: auto;
}

.nav-list__item a {
    transition: opacity .6s ease;
}

.nav-list__item a:hover {
    opacity: .5;
}

/* お問い合わせメニュー */
.nav-list__item--contact {
    margin-left: auto;
    margin-right: 0;
}

.nav-list__item--contact a {
    display: inline-block;
    height: 42px;
    padding: 0 22px;
    line-height: 42px;
    background-color: var(--text-color-blue);
    font-size: var(--font-size-body-md);
    color: var(--text-color-white);
    border-radius: 40px;
    transition: opacity .6s ease;
}

.nav-list__item--contact a:hover {
    opacity: 0.6;
}

/* ===============================================================
    HEADER (PC表示状態) - TOP / 下層での切り替え
=============================================================== */
@media (min-width: 769px) {
    /* TOPページ */
    body.is-top .header {
        background-color: rgba(68, 68, 68, 0.5);
        color: var(--text-color-white);
    }
    body.is-top .nav-list {
        color: var(--text-color-white);
    }
    body.is-top .nav-list a {    
        transition: opacity 0.3s;

    }
    body.is-top .nav-list a:hover {
        opacity: .5;
    }
    body.is-top .header__hamburger span {
        background-color: var(--text-color-white);
    }
    body.is-top .logo-img--white {
        display: block;
    }
    body.is-top .logo-img--black {
        display: none;
    }

    /* 下層ページ */
    body:not(.is-top) .header {
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--text-color-black);
    }
    body:not(.is-top) .nav-list {
        color: var(--text-color-black);
    }
    body:not(.is-top) .header__hamburger span {
        background-color: var(--text-color-black);
    }
    body:not(.is-top) .logo-img--white {
        display: none;
    }
    body:not(.is-top) .logo-img--black {
        display: block;
    }
}

/* ===============================================================
    HEADER - レスポンシブ調整
=============================================================== */
@media (max-width: 1240px) {
    .header__logo {
        width: 18.05555555vw;
    }
}

/* ========================= タブレット・レスポンシブ対応（1024px以下） ========================= */
@media (max-width: 1024px) {
    .header__logo img {
        width: 100%;
        min-width: 120px;
    }
    .nav-list {
        font-size: 1.2rem;
        color: var(--text-color-white);
    }
    .nav-list__item--contact a {
        height: 36px;
        padding: 0 11px;
        line-height: 36px;
        font-size: 1.2rem;
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) {
    /* 背景・文字色を強制的に白黒へ */
    .header {
        background-color: var(--text-color-white) !important;
        color: var(--text-color-black) !important;
    }

    .header__inner {
        height: 60px;
    }

    .nav-list {
        color: var(--text-color-black) !important;
    }

    .header__hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10001;
    }

    .header__hamburger span {
        width: 100%;
        height: 2px;
        background-color: var(--text-color-black) !important;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }

    /* ハンバーガー展開時の変化（×になる） */
    .header.nav-open .header__hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .header.nav-open .header__hamburger span:nth-child(2) {
        opacity: 0;
    }

    .header.nav-open .header__hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* モバイルメニューのスライド表示 */
    .header__nav {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.97);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        flex-direction: column;
        padding: 40px 20px;
        z-index: 10000;
    }

    .header.nav-open .header__nav {
        transform: translateX(0);
    }

    .nav-list {
        display: block !important;
        height: auto;
        text-align: center;
        color: var(--text-color-black) !important;
    }

    .nav-list__item {
        margin: 0 0 20px 0;
    }
    .nav-list__item:first-child {
        margin: 0 0 20px 0;
    }
    .nav-list__item:not(.nav-list__item--contact) {
        margin: 0 0 20px 0;
    }

    .nav-list__item--contact a {
        background-color: var(--text-color-blue);
        color: #fff;
        padding: 10px 24px;
        border-radius: 20px;
        display: inline-block;
        line-height: 1.5;
    }

    /* SP時は黒ロゴ強制表示 */
    .logo-img--white {
        display: none !important;
    }
    .logo-img--black {
        display: block !important;
    }
}

/* ===============================================================
    共通セクションタイトル
=============================================================== */

/* h2タイトル全体のスタイル */
.section-title {
    margin-bottom: 80px; /* タイトル下の余白 */
    font-weight: 700;    /* 太字 */
}

/* セクションタイトルのラベル部分（テキストの左に装飾など） */
.section-title__label {
    display: inline-block;
    position: relative;
    padding-left: 0.8em; /* ラベル左のスペース確保 */
    font-size: var(--font-size-title-md); /* フォントサイズ */
}

/* ラベルの装飾用疑似要素（左の丸と右の線） */
.section-title__label::before,
.section-title__label::after {
    content: "";
    position: absolute;
}

/* ラベル左の青い丸 */
.section-title__label::before {
    top: 0.3em;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--text-color-blue);
}

/* ラベル右の線 */
.section-title__label::after {
    top: 0.5em; /* ラインの縦位置 */
    left: 100%; /* ラベルの右端に配置 */
    margin-left: 20px; /* ラベルからの間隔 */
    width: clamp(80px, 20vw, 200px); /* 線の長さを可変に */
    height: 1px;
    background-color: var(--text-color-black);
}

/* サブタイトル共通スタイル */
.section-title__sub,
.section-title__sub--ss {
    display: block;
    margin-top: 0.15em; /* タイトル下の隙間 */
    font-size: var(--font-size-title-en);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-color-blue);
}

/* キャッチコピーのスタイル */
.section-catch {
    margin-bottom: 1.06666667em;
    font-size: var(--font-size-title-lg);
    font-weight: 700;
    line-height: 1.75;
}

/* ===== メディアクエリ ===== */
@media (max-width: 1240px) { /* タブレット以下 */
    /* .section-subtitle は他の箇所のクラスだと思われるので残しておく */
    .section-subtitle {
        line-height: 1.5;
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) { /* スマホ以下 */

    .section-subtitle {
        line-height: 1.5;
    }

    /* h2タイトルのマージンを狭く */
    .section-title {
        margin-bottom: 30px;
        font-weight: 700;
    }
    
    /* ラベルの丸を小さく */
    .section-title__label::before {
        width: 4px;
        height: 4px;
    }

    /* ラベル右の線の長さを短く */
    .section-title__label::after {
        width: clamp(20px, 20vw, 200px);
    }

    /* 小さいサブタイトルのフォントサイズを調整 */
    .section-title__sub--ss {
        font-size: clamp(4.2rem, 11vw, 11rem);
    }
}

/* ===============================================================
    下層ページのheroセクション
=============================================================== */

/* heroセクション全体幅 */
.page-hero {
    width: 100%;
}

/* hero内のコンテナ（中央寄せ、最大幅、パディング指定） */
.page-hero__inner {
    width: 100%;
    max-width: 1420px;
    height: 612px;
    margin: 0 auto;
    padding: 260px 20px 0 80px;
    position: relative;
}

/* heroタイトルのスタイル */
.page-hero__title {
    margin-bottom: 0.38em;
    font-size: var(--font-size-title-hero);
    font-weight: 700;
    color: var(--text-color-blue);
}

/* heroリードテキストの行間 */
.page-hero__lead {
    width: 80%;
    max-width: 680px;
    line-height: 1.75;
}

/* hero背景に薄く表示する大きなテキスト（右下配置） */
.page-hero__background-title {
    position: absolute;
    bottom: -0.156em;
    right: 20px;
    font-size: var(--font-size-title-hero-en);
    letter-spacing: -0.04em;
    text-align: right;
    color: rgba(163, 163, 163, 0.16);
    z-index: -99;
}

/* ===== メディアクエリ ===== */
@media (max-width: 1200px) {
    .page-hero__inner {
        padding-left: 40px; /* 左パディングを狭める */
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) {
    .page-hero__inner {
        height: 336px; /* 高さを半分以下に */
        padding: 153px 15px 0 24px;
    }

    /* heroリードテキストの行間 */
    .page-hero__lead {
        width: 100%;
        padding-right: 9px;
    }
}

/* ===============================================================
    ISO / ISO認証セクション
=============================================================== */

/* ISOセクション中央寄せ */
.iso {
    margin: 0 auto;
}

/* ISOキャッチコピー（タイトル） */
.iso__catch {
    margin-bottom: 2.2222em;
    text-align: center;
    font-size: var(--font-size-body-lg);
    font-weight: 700;
}

/* ISOコンテンツ内側、横並びのフレックスボックス */
.iso__inner {
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 24px;
    max-width: 1040px;
}

/* ISO画像のサイズ指定（PC用） */
.iso__image {
    width: 19%;
    max-width: 164px;
}

/* ISO画像の幅100% */
.iso__image {
    width: 100%;
}

/* ISOリスト（特にスタイルなし） */
.iso__list {
}

/* ISOリストの各項目 */
.iso__item {
    margin-bottom: 1.875em;
    font-size: var(--font-size-body-md);
}

/* 最後のISO項目のマージン調整 */
.iso__item:last-child {
    margin-bottom: 0;
}

/* ISO用語のタイトル */
.iso__term {
    margin-bottom: 0.555555555em;
    font-size: var(--font-size-body-lg);
    font-weight: 700;
}

/* ===== メディアクエリ ===== */

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) { /* スマホ以下 */
    /* キャッチコピーの余白と行間 */
    .iso__catch {
        padding: 0 24px;
        line-height: 1.5;
    }

    /* flex方向を縦にして中央寄せ */
    .iso__inner {
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        margin: 0 auto;
    }

    /* 画像サイズを縮小し中央に */
    .iso__image {
        margin: 0 auto;
        max-width: 100px;
    }

    /* リストの中央寄せ */
    .iso__list {
        margin: 0 auto;
    }

    /* 用語タイトルの下線、中央寄せ、余白 */
    .iso__term {
        text-align: center;
        border-bottom: 1px solid var(--text-number-gray);
        margin-bottom: 0.64em;
        line-height: 1.5;
    }

    /* 用語定義の行間調整 */
    .iso__definition {
        line-height: 1.5;
    }
}


/* ===============================================================
    お問い合わせ / Contactセクション
=============================================================== */

/* お問い合わせ全体の背景色とテキスト色 */
.contact {
    width: 100%;
    margin: 0 auto;
    padding: initial;
    background-color: var(--bg-color-blue);
    color: var(--text-color-white);
    font-weight: 700;
}

/* お問い合わせ内側コンテナ */
.contact__inner {
    max-width: 1260px;
    padding: 100px 60px;
    margin: 0 auto;
}

/* お問い合わせ内のセクションタイトルの色変更 */
.contact__inner > .section-title {
    margin-bottom: 40px;
    color: var(--text-color-white);
}

/* セクションタイトルラベルのbefore装飾を白に */
.contact__inner > .section-title > .section-title__label::before {
    background-color: var(--text-color-white);
}

/* セクションタイトルラベルのafter装飾を白に */
.contact__inner > .section-title > .section-title__label::after {
    background-color: var(--text-color-white);
}

/* サブタイトルの文字色を白に */
.contact__inner > .section-title > .section-title__sub {
    color: var(--text-color-white);
}

/* お問い合わせ説明文 */
.contact__desc {
    margin-bottom: 30px;
    font-size: var(--font-size-body-lg);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text-color-white);
}

/* お問い合わせ方法の横並び */
.contact__methods {
    display: flex;
    justify-content: center;
    gap: 120px;
}

/* 各お問い合わせ方法ボックス */
.contact__method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4em;
    width: 500px;
    height: 180px;
    background-color: var(--text-color-white);
}

/* 各方法タイトル */
.contact__method-title {
    padding-bottom: .1em;
    font-size: var(--font-size-title-lg);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    color: var(--text-color-blue);
}

/* タイトル中の強調線 */
.contact__method-title span {
    border-bottom: 4px solid #2E4787;
}

/* 電話番号ボックス（アイコンとテキストを横並び中央揃え） */
.contact__phone-box {
    display: flex;
    align-items: center; /* アイコンをテキスト中央に */
    gap: 1rem;
}

/* 電話アイコンサイズ */
.contact__icon {
    width: 40px;
    height: auto;
    flex-shrink: 0; /* アイコンの縮小を防止 */
}

/* 電話番号テキスト */
.contact__phone-texts {
    display: flex;
    flex-direction: column;
}

/* 電話番号 */
.contact__method-phone {
    margin: 0;
    font-size: var(--font-size-title-xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
}

.contact__method-phone a {    
    transition: opacity 0.4s ease;
}

.contact__method-phone a:hover {    
    opacity: .5;
}

/* 営業時間 */
.contact__method-hours {
    font-size: var(--font-size-body-md);
    text-align: center;
    margin: 0.25em 0 0 0;
}

/* リンクのスタイル（アイコン付き矢印カスタム） */
.contact__link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-size-title-md);
    font-weight: 700;
    text-decoration: none;
}

/* カスタム矢印リンク全体 */
.custom-chevron {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    font-size: var(--font-size-title-md);
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: opacity 0.4s ease; /* リンク全体の透過アニメーション */
}

/* 矢印テキスト */
.custom-chevron span {
    display: inline-block;
    position: relative;
    line-height: 1;
    transition: opacity 0.4s ease; /* テキスト透過対応 */
}

/* ホバー時に少し薄く */
.custom-chevron:hover,
.custom-chevron:hover span {
    opacity: 0.6;
}

/* 矢印の先端（白線2本で矢印形） */
.custom-chevron::before {
    content: '';
    position: absolute;
    right: 0.6em;
    width: 0.45em;
    height: 0.45em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    top: 50%;
    z-index: 1;
    transition: opacity 0.4s ease, right 0.3s ease;
}

.custom-chevron:hover::before {
    right: 0.4em;

}

/* 矢印背景丸 */
.custom-chevron::after {
    content: '';
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    background-color: #002277;
    border-radius: 50%;
    position: relative;
    margin-left: 0;
    transition: opacity 0.4s ease, right 0.3s ease;
}

/* ===== メディアクエリ ===== */

/* ========================= タブレット以下・レスポンシブ対応（1024px以下） ========================= */
@media (max-width: 1024px) { 
    .contact__inner {
        padding: 60px 40px;
    }

    .contact__methods {
        gap: 4vw;
    }

    .contact__method {
        height: 160px;
    }

    .contact__icon {
        width: 30px;
    }

    .contact__method-title {

    }
    
    .custom-chevron {
        gap: 0.3em;
    }

    .custom-chevron::before {
        right: 0.45em;
        width: 0.4em;
        height: 0.4em;
    }

    .custom-chevron::after {
        width: 1.2em;
        height: 1.2em;
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) { 
    
    .contact__inner {
        padding: 60px 24px;
    }

    .contact__inner > .section-title {
        margin-bottom: 20px;
    }

    .contact__desc {
        margin-bottom: 20px;
        text-align: left;
        line-height: 1.5;
    }

    .contact__methods {
        flex-direction: column;
        align-items: center;
    }

    .contact__method {
        width: 100%;
        max-width: 500px;
        height: 120px;
    }

    .contact__method-title span {
        padding-right: 1em;
        padding-bottom: 4px;
        padding-left: 1em;
        border-bottom: 2px solid #2E4787;
    }

    .contact__icon {
        width: 20px;
    }

    .contact__method-hours {
        font-size: 1.2rem;
    }
}

/* ===============================================================
    フッター全体のスタイル
=============================================================== */

.footer {
    background-color: #f8f8f8;
    color: #333;
    font-size: 14px;
    padding: 3rem 0;
    position: relative;
}

/* TOPに戻るボタン */
.footer__back-to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border: 2px solid var(--text-color-blue);
    border-radius: 50%;
    background-color: var(--text-color-white);
    color: var(--bg-color-blue);
    text-decoration: none;
    position: absolute;
    top: -43px;
    right: 60px;
    z-index: 999;
    transition: opacity 0.3s ease;
}

.footer__back-to-top:hover {
    opacity: .8;
}

.footer__back-to-top-icon {
    position: relative;
    width: 1em;
    height: 1em;
}

.footer__back-to-top-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-top: 4px solid var(--text-color-blue);
    border-right: 4px solid var(--text-color-blue);
    transform: translate(-50%, -50%) rotate(-45deg); /* 上向き */
    display: block;
}

.footer__back-to-top-text {
    font-size: var(--font-size-body-md);
    margin-top: 4px;
}

/* フッター内のコンテナ（レイアウト調整） */
.footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1340px;
    margin: 0 auto;
}

/* フッター情報エリア */
.footer__info {
    flex: 1;
    min-width: 260px;
}

/* フッター情報内の段落テキスト */
.footer__info p {
    font-size: var(--font-size-body-md);
    line-height: 1.75;
    margin-bottom: 1.11111em;
}

/* フッター情報のリンク */
.footer__info p > a {
    font-size: var(--font-size-body-md);
    line-height: 1.75;
    transition: opacity 0.3s ease;
}

.footer__info p > a:hover {
    opacity: 0.5;
}

/* フッターロゴ画像 */
.footer__logo img {
    max-width: 240px;
    height: auto;
    margin-bottom: 1rem;
}

/* お問い合わせボタン風リンク */
.footer__contact {
    display: inline-block;
    padding: 0.5em 1.5em;
    font-size: var(--font-size-body-md);
    font-weight: bold;
    color: var(--text-color-white);
    background-color: var(--text-color-blue);
    border-radius: 50px;
    transition: opacity 0.4s ease;
}

a:hover.footer__contact {
    opacity: 0.5;
}

/* フッターナビ全体（リンク群の配置） */
.footer__nav {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    gap: clamp(30px, 11.8vw, 170px);
    min-width: 300px;
    padding-top: calc(86px - 3rem);
    font-size: var(--font-size-body-md);
}

/* フッターナビ内のカラム */
.footer__nav-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ナビ項目リスト */
.footer__item {
    list-style: none;
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    white-space: nowrap;
    height: 180px;
}

/* ナビ項目のリンク */
.footer__item a {
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__item a:hover {
    opacity: 0.5;
}

/* フッターナビのサブメニュー */
.footer__subnav {
    margin-top: 1em;
    padding-left: 1em;
    list-style: none;
    font-weight: 400;
    line-height: 1.5;
}

/* サブメニューリストアイテム */
.footer__subnav li {
    margin-bottom: 0.3em;
}

/* サブメニューのリンク */
.footer__subnav li a {
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__subnav li a:hover {
    opacity: 0.5;
}

/* コピーライト表記 */
.footer__copy {
    text-align: center;
    margin-top: 2rem;
    font-size: 12px;
    color: #777;
}
/* ========================= タブレット・レスポンシブ対応（1024px以下） ========================= */
@media (max-width: 1024px) {

    /* TOPに戻るボタン */
    .footer__back-to-top {
        width: 64px;
        height: 64px;
        border: 2px solid var(--text-color-blue);
        top: -32px;
        right: 24px;
    }

    .footer__back-to-top-icon::before {
        width: 0.8em;
        height: 0.8em;
        border-top: 3px solid var(--text-color-blue);
        border-right: 3px solid var(--text-color-blue);
    }

    .footer__back-to-top-text {
        margin-top: 0;
    }
}

/* ========================= SP・レスポンシブ対応（768px以下） ========================= */
@media (max-width: 768px) {
    .footer {
        padding: 80px 24px 30px;
    }

    .footer__inner {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 80px;
        max-width: 1340px;
        margin: 0 auto;
        padding: initial;
    }

    .footer__info {
        flex: 1;
        min-width: initial;
    }

    .footer__logo img {
        max-width: 130px;
        margin: 0 auto 24px;
    }

    .footer__info p {
        margin-bottom: initial;
        text-align: center;
    }

    .footer__nav {
        padding-top: initial;
        min-width: initial;
    }

    .footer__nav-column {
        gap: 24px;
    }

    .footer__item {
        height: initial;
        font-weight: 500;
        text-align: center;
    }
}