@charset "utf-8";

/* UD デジタル 教科書体 N（ローカルインストール／Webフォント配信） */
@font-face {
    font-family: "UD-Digi-Files";
    src:
        url("/font/UDDigiKyokashoN-01.ttf") format("ttf"),
        local("UD Digi Kyokasho N"),
        local("UD デジタル 教科書体 N"),
        local("UD Digi Kyokasho N-R"),
        local("UD Digi Kyokasho NK-R"),
        local("UD Digi Kyokasho NP-R");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "UD-Digi-Files-bold";
    src:
        url("/font/UDDigiKyokashoN-B.ttc") format("ttf"),
        local("UD Digi Kyokasho N"),
        local("UD デジタル 教科書体 N"),
        local("UD Digi Kyokasho N-B"),
        local("UD Digi Kyokasho NK-B"),
        local("UD Digi Kyokasho NP-B");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 基本情報 */
:root {
    /* INS-009: サイト全体 UD デジタル 教科書体 N（非搭載端末は Klee One で教科書体風を維持） */
    --font-family-primary: "Klee One"
        /*"UD-Digi-Files", "UD デジタル 教科書体 N", "UD Digi Kyokasho N", "UD Digi Kyokasho N-R", "UD Digi Kyokasho N-B", "Klee One", serif*/
    ;
    /* 後方互換エイリアス */
    --font-family-brand: var(--font-family-primary);
    --font-family-gothic: var(--font-family-primary);
    --font-family-mincho: var(--font-family-primary);
    --font-family-write: var(--font-family-primary);
    --color-text: #000000;
    --color-primary: #003366;
    --color-navy: #003366;
    --color-active: var(--color-primary);
    --color-urgent: #FFEA05;
    --color-accent-yellow: #FFFF00;
    --color-info: #004080;
    --color-interview: #1a5276;
    --color-white: #FFFFFF;
    --color-gray-light: #f5f5f5;
    --color-message-muted: #666666;
    --color-message-light: #BBBBBB;
    --color-persona-navy: #142840;
    --color-persona-teal: #1a6384;
    --color-benefits-ultramarine: #0a1528;
    /* lp-source-1200: 通常コンテンツの最大幅（フルブリードは対象外） */
    --content-max-width: 1200px;
    --calc-ratio: calc(100vw / 1920);
    --calc-ratio-sp: calc(100vw / 375);
}

body {
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.5;
    font-feature-settings: "palt" 1;
    overflow-x: hidden;
}

/* UIkit 既定フォントを上書き */
html,
.uk-subnav,
.uk-switcher,
button,
input,
select,
textarea {
    font-family: var(--font-family-primary);
}

main {
    /* キャンバス上限（フルブリード部品の親）。通常コンテンツは --content-max-width */
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

main * {
    position: relative;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

a:hover {
    color: var(--color-text);
    text-decoration: none;
}

p {
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 0.03em;
    vertical-align: baseline;
}

.pc-only {
    display: block;
}

span.pc-only {
    display: inline;
}

.sp-only,
span.sp-only {
    display: none;
}

br.pc-only,
br.sp-only {
    margin: 0;
    padding: 0;
    border: 0;
    height: 0;
    line-height: 0;
}

@media screen and (max-width:860px) {

    /* 100vw はスクロールバー分だけはみ出すため、横だけ抑止（縦スクロールバーは表示） */
    html {
        overflow-x: hidden;
    }

    main {
        width: 100%;
        max-width: 100%;
    }

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

    .pc-only,
    span.pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    span.sp-only {
        display: inline;
    }
}

/*アニメーション関係（スクロール連動は無効化・初回プレビュー用）*/
.animation-1,
.animation-2 {
    animation: none;
}

/* UIKITのCSS上書き*/
ul {
    padding-left: 0;
}

.uk-subnav {
    margin-left: 0;
}

.uk-subnav>.uk-active>a {
    background: none;
    color: var(--color-text);
}

.uk-form-label {
    margin-bottom: 5px;
    margin-bottom: min(5px, 5 * var(--calc-ratio));
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 400;
    color: var(--color-text);
}

.uk-input {
    height: 55px;
    height: min(55px, 55 * var(--calc-ratio));
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    color: var(--color-text);
    border: 1px #F8F8F8 solid;
    border: min(1px, 1 * var(--calc-ratio)) #F8F8F8 solid;
}

.uk-textarea {
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    color: var(--color-text);
    border: 1px #F8F8F8 solid;
    border: min(1px, 1 * var(--calc-ratio)) #F8F8F8 solid;
}

@media screen and (max-width:860px) {
    .uk-form-label {
        margin-bottom: 5px;
        margin-bottom: max(5px, 5 * var(--calc-ratio-sp));
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
    }

    .uk-input {
        height: 34px;
        height: max(34px, 34 * var(--calc-ratio-sp));
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        border: max(1px, 1 * var(--calc-ratio-sp)) #F8F8F8 solid;
    }

    .uk-textarea {
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        border: 1px #F8F8F8 solid;
        border: max(1px, 1 * var(--calc-ratio-sp)) #F8F8F8 solid;
    }

}

/**********************************************************************/
/* 固定ヘッダー（header / INS-005） */
/**********************************************************************/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #FFFFFF;
    border-bottom: 3px solid var(--color-primary);
    box-shadow: 0 2px 12px rgba(0, 51, 102, 0.12);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 12px 32px;
    padding: min(12px, 12 * var(--calc-ratio)) min(32px, 32 * var(--calc-ratio));
    min-height: 72px;
    min-height: min(72px, 72 * var(--calc-ratio));
    box-sizing: border-box;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    gap: min(12px, 12 * var(--calc-ratio));
    text-decoration: none;
    color: var(--color-text);
}

.site-header__logo img {
    width: 48px;
    width: min(48px, 48 * var(--calc-ratio));
    height: 48px;
    height: min(48px, 48 * var(--calc-ratio));
    object-fit: contain;
    flex-shrink: 0;
}

.site-header__brand {
    font-size: 18px;
    font-size: min(18px, 18 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary);
}

.site-header__brand-sub {
    display: block;
    font-size: 13px;
    font-size: min(13px, 13 * var(--calc-ratio));
    font-weight: 500;
    color: var(--color-text);
}

.site-header__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    gap: min(12px, 12 * var(--calc-ratio));
}

.site-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-width: min(120px, 120 * var(--calc-ratio));
    padding: 10px 20px;
    padding: min(10px, 10 * var(--calc-ratio)) min(20px, 20 * var(--calc-ratio));
    font-size: 15px;
    font-size: min(15px, 15 * var(--calc-ratio));
    font-weight: 400;
    text-decoration: none;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    color: var(--color-primary);
    background: #FFFFFF;
    transition: background 0.2s, color 0.2s;
}

.site-header__btn:hover {
    background: var(--color-gray-light);
    color: var(--color-primary);
}

.site-header__btn--primary {
    color: #FFFFFF;
    background: var(--color-primary);
}

.site-header__btn--primary:hover {
    background: var(--color-info);
    color: #FFFFFF;
}

body.has-site-header main {
    padding-top: 72px;
    padding-top: min(72px, 72 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .site-header__inner {
        padding: 10px 16px;
        min-height: 56px;
    }

    .site-header__brand-sub {
        display: none;
    }

    .site-header__btn {
        min-width: auto;
        padding: 8px 12px;
        font-size: 12px;
    }

    body.has-site-header main {
        padding-top: 56px;
    }
}

/**********************************************************************/
/* スマホ専用ヘッダー（ハンバーガー + ドロワーメニュー）                 */
/**********************************************************************/
.mobile-header {
    display: none;
}

.mobile-nav {
    display: none;
}

@media screen and (max-width:860px) {
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 16px;
        background: var(--color-persona-teal);
        box-sizing: border-box;
    }

    .mobile-header__brand {
        margin: 0;
        font-family: var(--font-family-primary);
        font-size: 16px;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 0.02em;
    }

    .mobile-header__toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        padding: 9px;
        background: transparent;
        border: none;
        cursor: pointer;
        box-sizing: border-box;
    }

    .mobile-header__bar {
        display: block;
        width: 100%;
        height: 3px;
        background: #FFFFFF;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }

    /* body 側の余白（ヘッダー分） */
    body.has-mobile-header main {
        padding-top: 56px;
    }

    /* ドロワー本体 */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(78%, 320px);
        z-index: 500;
        background: #FFFFFF;
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        padding: 20px 24px;
        box-sizing: border-box;
    }

    body.mobile-nav-open .mobile-nav {
        transform: translateX(0);
    }

    /* 背景オーバーレイ */
    .mobile-nav::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: -1;
    }

    body.mobile-nav-open .mobile-nav::before {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav__close {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: 0 0 0 auto;
        padding: 4px;
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
    }

    .mobile-nav__close-text {
        font-family: var(--font-family-primary);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.12em;
    }

    .mobile-nav__list {
        list-style: none;
        margin: 24px 0 0;
        padding: 0;
    }

    .mobile-nav__list li+li {
        margin-top: 8px;
    }

    .mobile-nav__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 8px;
        text-decoration: none;
        border-bottom: 1px solid #E5E5E5;
        font-family: var(--font-family-primary);
        font-size: 17px;
        font-weight: 400;
        color: var(--color-text);
    }

    .mobile-nav__arrow {
        display: inline-flex;
        color: var(--color-primary);
        flex-shrink: 0;
    }
}

/**********************************************************************/
/* sticky CTA（写真差し込み N18 / 使用写真No.4） */
/**********************************************************************/
.contact-sticky {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 340px;
    width: min(340px, 340 * var(--calc-ratio));
    min-height: 110px;
    min-height: min(110px, 110 * var(--calc-ratio));
    border: 4px solid var(--color-primary);
    border: min(4px, 4 * var(--calc-ratio)) solid var(--color-primary);
    background: #FFFFFF;
    z-index: 250;
    align-items: flex-end;
    text-decoration: none;
    color: var(--color-primary);
    overflow: visible;
    box-sizing: border-box;
}

.contact-sticky:hover {
    color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.2);
}

.contact-sticky__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 14px 4px 14px 18px;
    padding: min(14px, 14 * var(--calc-ratio)) min(4px, 4 * var(--calc-ratio)) min(14px, 14 * var(--calc-ratio)) min(18px, 18 * var(--calc-ratio));
    background: #FFFFFF;
}

.contact-sticky__copy {
    margin: 0;
    font-size: 17px;
    font-size: min(17px, 17 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    text-align: left;
}

.contact-sticky__arrow {
    display: block;
    position: relative;
    width: 60px;
    width: min(60px, 60 * var(--calc-ratio));
    height: 20px;
    height: min(20px, 20 * var(--calc-ratio));
    margin-top: 10px;
    margin-top: min(10px, 10 * var(--calc-ratio));
}

.contact-sticky__arrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 42px;
    width: min(42px, 42 * var(--calc-ratio));
    height: 3px;
    height: min(3px, 3 * var(--calc-ratio));
    background: var(--color-text);
    transform: translateY(-50%);
}

.contact-sticky__arrow::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 12px;
    width: min(12px, 12 * var(--calc-ratio));
    height: 12px;
    height: min(12px, 12 * var(--calc-ratio));
    border-right: 3px solid var(--color-text);
    border-bottom: 3px solid var(--color-text);
    border-right-width: min(3px, 3 * var(--calc-ratio));
    border-bottom-width: min(3px, 3 * var(--calc-ratio));
    transform: translateY(-50%) rotate(-45deg);
    box-sizing: border-box;
}

.contact-sticky__photo {
    display: block;
    width: 105px;
    width: min(105px, 105 * var(--calc-ratio));
    height: auto;
    max-height: 108px;
    max-height: min(108px, 108 * var(--calc-ratio));
    margin: -4px -4px -4px 0;
    margin: max(-4px, -4 * var(--calc-ratio)) max(-4px, -4 * var(--calc-ratio)) max(-4px, -4 * var(--calc-ratio)) 0;
    object-fit: contain;
    object-position: bottom right;
    flex-shrink: 0;
    background: transparent;
}

@media screen and (max-width:860px) {
    .contact-sticky {
        display: flex;
        left: 0;
        right: auto;
        width: calc(100% - 56px);
        max-width: 280px;
        min-height: 80px;
        bottom: 58px;
        border-width: 3px;
        border-left: none;
        z-index: 240;
    }

    .contact-sticky__text {
        padding: 10px 2px 10px 12px;
        padding: max(10px, 10 * var(--calc-ratio-sp)) max(2px, 2 * var(--calc-ratio-sp)) max(10px, 10 * var(--calc-ratio-sp)) max(12px, 12 * var(--calc-ratio-sp));
    }

    .contact-sticky__copy {
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
        line-height: 1.5;
    }

    .contact-sticky__arrow {
        display: none;
    }

    .contact-sticky__photo {
        width: 72px;
        width: max(72px, 72 * var(--calc-ratio-sp));
        max-height: 88px;
        max-height: max(88px, 88 * var(--calc-ratio-sp));
        margin: -3px 0 -3px 0;
    }
}

@media screen and (min-width:1920px) {
    .contact-sticky {
        right: calc((100vw - 1920px - 14px) / 2);
    }
}

@media screen and (min-width:861px) and (max-width:1920px) {
    .contact-sticky {
        right: 0;
        bottom: 32px;
        bottom: min(32px, 32 * var(--calc-ratio));
    }
}

/**********************************************************************/
/* トップ */
/**********************************************************************/
.top {
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    text-align: center;
    color: var(--color-text);
}

.top .main-image {
    position: relative;
    z-index: 1;
}

.top .main-image .hero-slides {
    position: relative;
    width: 100%;
    line-height: 0;
}

.top .main-image .hero-slide {
    display: block;
    width: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.top .main-image .hero-slide.is-active {
    opacity: 1;
    position: relative;
}

.top .main-image .hero-site-label {
    position: absolute;
    top: 27px;
    top: min(27px, 27 * var(--calc-ratio));
    left: 27px;
    left: min(27px, 27 * var(--calc-ratio));
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: 600;
    color: #FFFFFF;
    z-index: 3;
}

.top .main-image .hero-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: auto;
    max-width: none;
    font-family: var(--font-family-primary);
    font-size: 64px;
    font-size: min(64px, 64 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    text-align: left;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.top .main-image .hero-copy__line2 {
    display: inline-block;
    white-space: nowrap;
}

.top .main-image .hero-copy__emphasis {
    font-size: 1.5em;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* FV（ファーストビュー）: PC は画面高さいっぱい */
@media screen and (min-width:861px) {
    .top .main-image {
        height: 100vh;
        min-height: 640px;
        overflow: hidden;
    }

    .top .main-image .hero-slides {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .top .main-image .hero-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .top .main-image .hero-slide.is-active {
        position: absolute;
        opacity: 1;
    }
}

.top .message1 {
    margin-top: 115px;
    margin-top: min(115px, 115 * var(--calc-ratio));
    font-size: 38px;
    font-size: min(38px, 38 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.top .message1 .size {
    border-bottom: none;
    font-size: inherit;
    font-weight: inherit;
}

.top .underline {
    border-bottom: none;
}

.top .underline::after {
    content: none;
}

.top .message1 .size::after {
    content: none;
}

.top .message2 {
    margin-top: 36px;
    margin-top: min(36px, 36 * var(--calc-ratio));
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
}

.top .message3 {
    margin-top: 24px;
    margin-top: min(24px, 24 * var(--calc-ratio));
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
}

.top .message3 .size {
    font-size: inherit;
    font-weight: inherit;
}

.top .message4 {
    margin-top: 34px;
    margin-top: min(34px, 34 * var(--calc-ratio));
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text);
}

.top .message5 {
    margin-top: 48px;
    margin-top: min(48px, 48 * var(--calc-ratio));
    margin-bottom: 20px;
    margin-bottom: min(20px, 20 * var(--calc-ratio));
    font-size: 38px;
    font-size: min(38px, 38 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text);
}

.top .message5 .size {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/**********************************************************************/
/* 全国実績ギャラリー（写真No.5〜14 横スクロール + マップNo.69） */
/**********************************************************************/
.gallery {
    position: relative;
    width: 100%;
    margin: 200px 0 120px;
    margin: min(200px, 200 * var(--calc-ratio)) 0 min(120px, 120 * var(--calc-ratio));
    padding: 0;
}

.gallery__heading {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto -128px;
    margin: 0 auto min(-128px, -128 * var(--calc-ratio));
    padding: 0 40px;
    padding: 0 min(40px, 40 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 38px;
    font-size: min(38px, 38 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    color: var(--color-text);
}

.gallery__stage {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 800px;
    height: min(800px, 800 * var(--calc-ratio));
    overflow: hidden;
}

.gallery__photos {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

.gallery__track {
    display: flex;
    align-items: center;
    gap: 36px;
    gap: min(36px, 36 * var(--calc-ratio));
    width: max-content;
    padding-left: 0;
    animation: gallery-scroll 50s linear infinite;
}

.gallery__card {
    flex-shrink: 0;
    width: 300px;
    width: min(300px, 300 * var(--calc-ratio));
    border-radius: 24px;
    border-radius: min(24px, 24 * var(--calc-ratio));
    overflow: hidden;
    background: #D9D9D9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.gallery__card:nth-child(10n+1),
.gallery__card:nth-child(10n+6) {
    transform: translateY(-48px) rotate(-4deg);
    transform: translateY(min(-48px, -48 * var(--calc-ratio))) rotate(-4deg);
}

.gallery__card:nth-child(10n+2),
.gallery__card:nth-child(10n+7) {
    transform: translateY(32px) rotate(3deg);
    transform: translateY(min(32px, 32 * var(--calc-ratio))) rotate(3deg);
}

.gallery__card:nth-child(10n+3),
.gallery__card:nth-child(10n+8) {
    transform: translateY(-16px) rotate(-2deg);
    transform: translateY(min(-16px, -16 * var(--calc-ratio))) rotate(-2deg);
}

.gallery__card:nth-child(10n+4),
.gallery__card:nth-child(10n+9) {
    transform: translateY(48px) rotate(4deg);
    transform: translateY(min(48px, 48 * var(--calc-ratio))) rotate(4deg);
}

.gallery__card:nth-child(10n+5),
.gallery__card:nth-child(10n+10) {
    transform: translateY(-24px) rotate(2deg);
    transform: translateY(min(-24px, -24 * var(--calc-ratio))) rotate(2deg);
}

.gallery__card img {
    display: block;
    width: 100%;
    height: 220px;
    height: min(220px, 220 * var(--calc-ratio));
    object-fit: cover;
}

.gallery__map-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64%;
    max-width: 900px;
    max-width: min(900px, 900 * var(--calc-ratio));
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.gallery__map {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* ステージ高さ − 凡例分。はみ出しで切れないよう全体を収める */
    max-height: calc(min(800px, 800 * var(--calc-ratio)) - 3.5rem);
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.22));
}

.gallery__legend {
    flex-shrink: 0;
    margin: 16px 0 0;
    margin: min(16px, 16 * var(--calc-ratio)) 0 0;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    color: var(--color-text);
}

.gallery__legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 20px;
    width: min(18px, 18 * var(--calc-ratio));
    height: min(20px, 20 * var(--calc-ratio));
    margin: 0 4px;
    vertical-align: -0.25em;
}

.gallery__legend-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes gallery-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width:860px) {
    .gallery {
        margin: 80px 0 80px;
        margin: max(80px, 80 * var(--calc-ratio-sp)) 0 max(80px, 80 * var(--calc-ratio-sp));
        padding: 0;
    }

    .gallery__heading {
        padding: 0 16px;
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
        font-size: 24px;
        font-size: max(24px, 24 * var(--calc-ratio-sp));
        text-align: center;
        margin-bottom: 0px;
        max-width: 100%;
    }

    .gallery__stage {
        /* 地図（92vw・縦横比）＋凡例＋背景写真分を画面内に収める */
        height: clamp(480px, calc(92vw / 1.068 + 5.5rem), 620px);
    }

    .gallery__card {
        width: 220px;
        width: max(220px, 220 * var(--calc-ratio-sp));
        border-radius: 16px;
    }

    .gallery__card img {
        height: 165px;
        height: max(165px, 165 * var(--calc-ratio-sp));
    }

    .gallery__map-wrap {
        width: min(92vw, calc(100% - 24px));
        max-width: none;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .gallery__map {
        transform: none;
        width: 100%;
        height: auto;
        max-width: 100%;
        /* 幅優先で拡大しつつ、画面高さにも収める */
        max-height: min(calc(92vw / 1.068), calc(100dvh - 14rem));
        object-fit: contain;
    }

    .gallery__legend {
        font-size: 16px;
        font-size: max(16px, 16 * var(--calc-ratio-sp));
        margin-top: 16px;
        margin-top: max(16px, 16 * var(--calc-ratio-sp));
        position: relative;
        z-index: 3;
        text-align: left;
    }

    .gallery__legend-icon {
        width: 14px;
        height: 18px;
        width: max(14px, 14 * var(--calc-ratio-sp));
        height: max(18px, 18 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 3つの特長カード + チーム写真（写真No.69） */
/**********************************************************************/
.strengths {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 80px auto 200px;
    margin: min(80px, 80 * var(--calc-ratio)) auto min(175px, 175 * var(--calc-ratio));
    padding: 0 40px;
    padding: 0 min(40px, 40 * var(--calc-ratio));
    overflow: visible;
}

.strengths__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    gap: min(32px, 32 * var(--calc-ratio));
    position: relative;
    z-index: 2;
    /* 下部を150px延ばし、写真と重ねる（従来48px gap → 102px重なり） */
    margin-bottom: -102px;
    margin-bottom: min(-102px, -102 * var(--calc-ratio));
}

.strengths__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 28px 32px;
    padding: min(36px, 36 * var(--calc-ratio)) min(28px, 28 * var(--calc-ratio)) min(32px, 32 * var(--calc-ratio));
    border: 4px solid var(--color-primary);
    border: min(4px, 4 * var(--calc-ratio)) solid var(--color-primary);
    border-radius: 24px;
    border-radius: min(24px, 24 * var(--calc-ratio));
    background: #FFFFFF;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.strengths__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 51, 102, 0.15);
}

.strengths__icon {
    width: auto;
    height: 240px;
    height: min(240px, 240 * var(--calc-ratio));
    margin: -32px auto 24px;
    margin: -32px auto min(-32px, 24 * var(--calc-ratio));
    padding: 12px;
    padding: min(12px, 12 * var(--calc-ratio));
    box-sizing: border-box;
    color: var(--color-text);
    align-self: center;
    flex-shrink: 0;
    overflow: visible;
}

.strengths__icon svg,
.strengths__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: visible;
}

.strengths__text {
    margin: 0;
    width: 100%;
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.9;
    text-align: left;
    color: var(--color-text);
}

.strengths__photo {
    position: relative;
    z-index: 1;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.strengths__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    object-fit: cover;
    /* 上下クロップは解除 */
    margin-top: 0;
    margin-bottom: 0;
}

@media screen and (max-width:860px) {
    .strengths {
        max-width: none;
        margin: 48px 0 120px;
        margin-bottom: max(120px, 120 * var(--calc-ratio-sp));
        padding: 0;
        overflow: visible;
    }

    .strengths__cards {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        gap: max(12px, 12 * var(--calc-ratio-sp));
        /* 写真との重なりを抑え、顔が隠れない程度に */
        margin-bottom: -48px;
        margin-bottom: max(-48px, -48 * var(--calc-ratio-sp));
        padding: 0 0 32px 32px;
        padding-left: max(32px, 32 * var(--calc-ratio-sp));
        padding-bottom: max(32px, 32 * var(--calc-ratio-sp));
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x proximity;
        scroll-padding-left: max(16px, 16 * var(--calc-ratio-sp));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .strengths__cards::-webkit-scrollbar {
        display: none;
    }

    .strengths__card {
        /* 75vw で右端に次カードが覗き、横スクロールと分かる */
        flex: 0 0 70vw;
        max-width: 300px;
        scroll-snap-align: start;
        align-items: center;
        padding: 32px 24px 28px;
        padding: max(32px, 32 * var(--calc-ratio-sp)) max(24px, 24 * var(--calc-ratio-sp)) max(28px, 28 * var(--calc-ratio-sp));
        border-radius: 24px;
        border-width: 4px;
    }

    .strengths__card:last-child {
        margin-right: 16px;
        margin-right: max(16px, 16 * var(--calc-ratio-sp));
    }

    .strengths__card:hover {
        transform: none;
        box-shadow: none;
    }

    .strengths__icon {
        width: 128px;
        width: max(128px, 128 * var(--calc-ratio-sp));
        height: 128px;
        height: max(128px, 128 * var(--calc-ratio-sp));
        margin: -24px auto;
        margin: max(-24px, -24 * var(--calc-ratio-sp)) auto;
        color: #000000;
        align-self: center;
    }

    .strengths__text {
        font-size: 18px;
        font-size: max(18px, 18 * var(--calc-ratio-sp));
        line-height: 1.85;
        text-align: left;
    }

    .strengths__photo {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 8px;
        margin-top: max(8px, 8 * var(--calc-ratio-sp));
    }

    .strengths__photo img {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/**********************************************************************/
/* 職場写真スクロール（写真No.15〜25・全幅） */
/**********************************************************************/
.work-scroll {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 72px 0;
    padding: min(72px, 72 * var(--calc-ratio)) 0;
    background: #FFFFFF;
    overflow: hidden;
}

.work-scroll__stage {
    overflow: hidden;
}

.work-scroll__track {
    display: flex;
    align-items: center;
    gap: 56px;
    gap: min(56px, 56 * var(--calc-ratio));
    width: max-content;
    animation: work-scroll 55s linear infinite;
}

.work-scroll__card {
    flex-shrink: 0;
    margin: 0;
    padding: 14px;
    padding: min(14px, 14 * var(--calc-ratio));
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.work-scroll__card:nth-child(11n+1),
.work-scroll__card:nth-child(11n+5),
.work-scroll__card:nth-child(11n+9) {
    transform: translateY(-36px);
    transform: translateY(min(-36px, -36 * var(--calc-ratio)));
}

.work-scroll__card:nth-child(11n+2),
.work-scroll__card:nth-child(11n+6),
.work-scroll__card:nth-child(11n+10) {
    transform: translateY(28px);
    transform: translateY(min(28px, 28 * var(--calc-ratio)));
}

.work-scroll__card:nth-child(11n+3),
.work-scroll__card:nth-child(11n+7),
.work-scroll__card:nth-child(11n+11) {
    transform: translateY(-12px);
    transform: translateY(min(-12px, -12 * var(--calc-ratio)));
}

.work-scroll__card:nth-child(11n+4),
.work-scroll__card:nth-child(11n+8) {
    transform: translateY(40px);
    transform: translateY(min(40px, 40 * var(--calc-ratio)));
}

.work-scroll__card img {
    display: block;
    width: 340px;
    width: min(340px, 340 * var(--calc-ratio));
    height: 255px;
    height: min(255px, 255 * var(--calc-ratio));
    object-fit: cover;
}

@keyframes work-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50.5%);
    }
}

@media screen and (max-width:860px) {
    @keyframes work-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50.3%);
        }
    }
}

/**********************************************************************/
/* 製品・製造 写真スクロール（写真No.26〜35・タブ非連動） */
/**********************************************************************/
.intro .switcher {
    position: relative;
    /* タブは通常コンテンツ幅。灰色本文背景は内側で100vw突破。maker-scroll も100vw */
    max-width: var(--content-max-width);
    max-width: min(1200px, 1200 * var(--calc-ratio));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* 中央写真 scale(1.45) 分を含めて下に逃がす */
    margin-bottom: 480px;
    margin-bottom: min(480px, 480 * var(--calc-ratio));
    box-sizing: border-box;
    overflow: visible;
}

.intro .switcher .detail-active,
.intro .switcher .detail-urgent,
.intro .switcher .detail-text {
    position: relative;
    /* 灰色背景はブラウザ両端までフルブリード */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 660px;
    min-height: min(660px, 660 * var(--calc-ratio));
    /* 拡大写真が本文に重ならないよう下余白を確保 */
    padding-bottom: 160px;
    padding-bottom: min(160px, 160 * var(--calc-ratio));
    box-sizing: border-box;
}

.intro .switcher .detail-active {
    background: #156082;
}

.intro .switcher .detail-urgent {
    background: #154676;
}

.intro .switcher .detail-text {
    background: #0e2841;
}

.intro .switcher .switcher-detail__copy {
    position: relative;
    z-index: 2;
    /* 文字エリアは 1200px */
    max-width: min(1200px, 1200 * var(--calc-ratio));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 72px 48px 0;
    padding: min(72px, 72 * var(--calc-ratio)) min(48px, 48 * var(--calc-ratio)) 0;
    font-family: var(--font-family-primary);
    text-align: center;
    color: #FFFFFF;
    box-sizing: border-box;
}

.intro .switcher .switcher-detail__heading {
    margin: 0 0 28px;
    margin: 0 0 min(28px, 28 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 34px;
    font-size: min(34px, 34 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.intro .switcher .switcher-detail__body {
    margin: 0;
    padding: 0 50px;
    padding: 0 min(50px, 50 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.0;
    letter-spacing: 0.03em;
    text-align: left;
}

.intro .switcher .maker-scroll {
    position: absolute;
    left: 0;
    right: 0;
    /* 本文下端より下に配置（scale のはみ出し分も考慮） */
    bottom: calc(-1 * min(320px, 320 * var(--calc-ratio)));
    z-index: 20;
    margin-left: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding: 8px 0 56px;
    padding: min(8px, 8 * var(--calc-ratio)) 0 min(56px, 56 * var(--calc-ratio));
    overflow: visible;
    pointer-events: auto;
}

.maker-scroll {
    position: relative;
    z-index: 8;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 8px 0 56px;
    padding: min(8px, 8 * var(--calc-ratio)) 0 min(56px, 56 * var(--calc-ratio));
    overflow: visible;
}

/* .intro .switcher 内では上記 .intro .switcher .maker-scroll を優先 */

.maker-scroll__stage {
    overflow: hidden;
    padding: 64px 0;
    padding: min(64px, 64 * var(--calc-ratio)) 0;
}

.maker-scroll__track {
    display: flex;
    align-items: center;
    gap: 40px;
    gap: min(40px, 40 * var(--calc-ratio));
    width: max-content;
    animation: maker-scroll 60s linear infinite;
}

/*
 * 無限ループの継ぎ目ずれ対策:
 * カード20枚だと gap は19個（奇数）→ translateX(-50%) が複製先頭と 0.5gap ずれる。
 * 幅0の末尾アイテムを足して gap を20個にし、-50% と複製セット先頭を一致させる。
 */
.maker-scroll__track::after {
    content: "";
    flex: 0 0 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.maker-scroll__card {
    flex-shrink: 0;
    margin: 0;
    position: relative;
    transform: scale(1);
    transition: transform 0.35s ease;
    z-index: 1;
}

.maker-scroll__card img {
    display: block;
    width: 380px;
    width: min(380px, 380 * var(--calc-ratio));
    height: 260px;
    height: min(260px, 260 * var(--calc-ratio));
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.maker-scroll__card.is-center {
    transform: scale(1.45);
    z-index: 10;
}

@keyframes maker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width:860px) {
    .intro .switcher {
        margin-bottom: 380px;
        margin-bottom: max(380px, 380 * var(--calc-ratio-sp));
        width: 100%;
        max-width: calc(100% - max(24px, 24 * var(--calc-ratio-sp)) * 2);
    }

    .intro .switcher .detail-active,
    .intro .switcher .detail-urgent,
    .intro .switcher .detail-text {
        padding-bottom: 32px;
        padding-bottom: max(32px, 32 * var(--calc-ratio-sp));
        min-height: 430px;
        min-height: min(430px, 430 * var(--calc-ratio-sp));
    }

    .intro .switcher .switcher-detail__copy {
        padding: 32px 12px 0;
        padding: max(32px, 32 * var(--calc-ratio-sp)) max(14px, 14 * var(--calc-ratio-sp)) 0;
        width: auto;
        max-width: 100%;
    }

    .intro .switcher .switcher-detail__heading {
        margin-bottom: 20px;
        margin-bottom: max(20px, 20 * var(--calc-ratio-sp));
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .intro .switcher .switcher-detail__body {
        width: auto;
        padding: 0;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 1.9;
        text-align: left;
    }

    .intro .switcher .maker-scroll {
        bottom: calc(-1 * max(280px, 280 * var(--calc-ratio-sp)));
        padding-bottom: 40px;
        padding-bottom: max(40px, 40 * var(--calc-ratio-sp));
    }

    .maker-scroll {
        padding-bottom: 40px;
        padding-bottom: max(40px, 40 * var(--calc-ratio-sp));
    }

    .maker-scroll__stage {
        padding: 32px 0;
        padding: max(32px, 32 * var(--calc-ratio-sp)) 0;
    }

    .maker-scroll__track {
        gap: 24px;
        gap: max(24px, 24 * var(--calc-ratio-sp));
    }

    .maker-scroll__card img {
        width: 260px;
        width: max(260px, 260 * var(--calc-ratio-sp));
        height: 180px;
        height: max(180px, 180 * var(--calc-ratio-sp));
    }

    .maker-scroll__card.is-center {
        transform: scale(1.28);
    }
}

/**********************************************************************/
/* IWAMA TOP MESSAGE（写真No.36・全幅） */
/**********************************************************************/
.top-message {
    width: 100vw;
    max-width: 100vw;
    margin-top: 100px;
    margin-top: min(100px, 100 * var(--calc-ratio));
    margin-left: calc(50% - 50vw);
    background: #FFFFFF;
}

.top-message__figure {
    position: relative;
    margin: 0;
}

.top-message__photo {
    display: block;
    width: 100%;
    height: auto;
    /* PC: 上下各50px分広げ（720 → 820） */
    max-height: min(820px, 820 * var(--calc-ratio));
    object-fit: cover;
    object-position: center 35%;
}

.top-message__banner {
    position: absolute;
    left: 10%;
    right: auto;
    bottom: calc(16% - 100px);
    margin: 0;
    width: fit-content;
    max-width: calc(100% - min(40px, 40 * var(--calc-ratio)));
    padding: 32px 40px;
    padding: min(32px, 32 * var(--calc-ratio)) min(40px, 40 * var(--calc-ratio));
    background: rgba(255, 255, 255, 0.4);
    text-align: left;
    box-sizing: border-box;
}

.top-message__label {
    margin: 0;
    font-family: "Klee One", serif;
    font-size: 100px;
    font-size: min(100px, 100 * var(--calc-ratio));
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: left;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px #1a7a38;
    paint-order: stroke fill;
    text-shadow: 5px 0px 8px #b3b3b321;
    position: relative;
    top: min(-8px, -8 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .top-message {
        margin-top: 60px;
        margin-top: max(60px, 60 * var(--calc-ratio-sp));
    }

    .top-message__photo {
        max-height: max(320px, 320 * var(--calc-ratio-sp));
    }

    .top-message__banner {
        left: max(12px, 12 * var(--calc-ratio-sp));
        right: auto;
        bottom: 3%;
        width: fit-content;
        max-width: calc(100% - max(32px, 32 * var(--calc-ratio-sp)));
        padding: 12px 20px;
        padding: max(12px, 12 * var(--calc-ratio-sp)) max(20px, 20 * var(--calc-ratio-sp));
        text-align: left;
    }

    .top-message__label {
        font-size: 36px;
        font-size: max(36px, 36 * var(--calc-ratio-sp));
        -webkit-text-stroke-width: 2px;
        top: max(-1px, -1 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 社長メッセージ本文（写真No.36下・全幅） */
/**********************************************************************/
.recruit-message {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 80px 0 146px;
    padding: min(80px, 80 * var(--calc-ratio)) 0 min(146px, 146 * var(--calc-ratio));
    background: #FFFFFF;
    box-sizing: border-box;
    font-family: var(--font-family-primary);
    position: relative;
    z-index: 0;
}

.recruit-message__inner {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0 80px;
    padding: 0 min(80px, 80 * var(--calc-ratio));
    box-sizing: border-box;
    text-align: left;
}

.recruit-message__title {
    margin: 0 0 56px;
    margin: 0 0 min(56px, 56 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 38px;
    font-size: min(38px, 38 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
    color: var(--color-text);
}

.recruit-message__body p {
    margin: 0 0 28px;
    margin: 0 0 min(28px, 28 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
}

.recruit-message__lead {
    margin-bottom: 8px !important;
    margin-bottom: min(8px, 8 * var(--calc-ratio)) !important;
}

.recruit-message__list {
    margin: 0 0 28px;
    margin: 0 0 min(28px, 28 * var(--calc-ratio));
    padding: 0 0 0 1.2em;
    list-style: none;
}

.recruit-message__list li {
    position: relative;
    margin: 0 0 4px;
    padding-left: 1.2em;
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
}

.recruit-message__list li::before {
    content: "•";
    position: absolute;
    left: 0;
}

.recruit-message__sign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    gap: min(8px, 8 * var(--calc-ratio));
    margin: 64px 0 0;
    margin: min(64px, 64 * var(--calc-ratio)) 0 0;
    font-family: var(--font-family-primary);
    text-align: right;
    color: var(--color-text);
}

.recruit-message__sign-role {
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.4;
}

.recruit-message__sign-name {
    font-size: 33px;
    font-size: min(33px, 33 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
}

@media screen and (max-width:860px) {
    .recruit-message {
        padding: 48px 0 64px;
        padding: max(48px, 48 * var(--calc-ratio-sp)) 0 max(64px, 64 * var(--calc-ratio-sp));
    }

    .recruit-message__inner {
        padding: 0 14px;
        padding: 0 max(14px, 14 * var(--calc-ratio-sp));
        max-width: 100%;
    }

    .recruit-message__title {
        margin-bottom: 32px;
        margin-bottom: max(32px, 32 * var(--calc-ratio-sp));
        font-size: 38px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        line-height: 1.75;
    }

    .recruit-message__body p,
    .recruit-message__list li {
        font-size: 24px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.0;
    }

    .recruit-message__sign {
        margin-top: 40px;
        margin-top: max(40px, 40 * var(--calc-ratio-sp));
    }

    .recruit-message__sign-role {
        font-size: 21px;
        font-size: max(21px, 21 * var(--calc-ratio-sp));
    }

    .recruit-message__sign-name {
        font-size: 27px;
        font-size: max(27px, 27 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* IWAMA'S MEMBERS（社長メッセージ下）— フェーズ7 PC: prototype フロー移植 */
/**********************************************************************/
.members-feature {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: min(32px, 32 * var(--calc-ratio)) 0 min(96px, 96 * var(--calc-ratio));
    background: #FFFFFF;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.members-feature__inner {
    position: relative;
    width: 100%;
    /* テキスト・写真配置は 1200px。背景 (.panel-bg) のみ 100vw */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;

    /* 506→1920（H×3.794 / V×1.758）— members-interview フェーズ6 準拠 */
    /* 装飾文字色は顧客スクショ（右上パネル／IWAMA'S MEMBERS）に合わせて調整 */
    --members-color-teal: #146080;
    --members-color-logo-stroke: #146080;
    --members-color-logo-fill: rgba(240, 240, 240, 0.88);
    --members-color-logo-shadow: rgba(90, 90, 85, 0.38);

    --members-clip-cut-x: 63.24%;
    /* 506 の 186px × V1.758（横3.794ではなく縦比例） */
    --members-clip-slope-size: 327px;
    --members-clip-slope-size-fluid: min(327px, 327 * var(--calc-ratio));

    --members-panel-top-offset: 536px;
    --members-panel-min-height: 682px;
    --members-panel-extend-height: 297px;
    --members-content-padding-top: 183px;
    --members-content-padding-bottom: 42px;
    --members-content-width: 95.65%;
    --members-heading-margin-bottom: 20px;
    --members-subheading-margin-bottom: 49px;
    --members-catch-letter-spacing: -0.03em;
    --members-body-padding-left: 1.38%;
    --members-body-width: 90.91%;

    --members-photo-top-left: 23.52%;
    --members-photo-top-anchor-offset: min(100px, 100 * var(--calc-ratio));
    --members-photo-top-top: 109px;
    /* 上部写真: 左端固定・右端100%・cover で拡大 */
    --members-photo-top-height: 494px;
    --members-hero-height: 603px;
    --members-panel-overlap: -67px;

    --members-photo-bottom-pull-up: 149px;
    /* 下部写真: 幅81.23%・右上起点・aspect-ratio で高さ確保 */
    --members-photo-bottom-width: 81.23%;
    --members-photo-bottom-anchor-offset: min(100px, 100 * var(--calc-ratio));

    --members-logo-bottom-offset: 248px;
    --members-logo-top-1-left: 4.55%;
    --members-logo-top-1-top: 28px;
    --members-logo-top-1-size: 175px;
    --members-logo-top-2-left: 15.22%;
    --members-logo-top-2-top: 203px;
    --members-logo-top-2-size: 175px;
    /* 1920 設計: 写真枠内の横位置（%）。縦位置はヒーロー基準の bottom px */
    --members-logo-top-1-left-in-photo: -33.93%;
    --members-logo-top-2-left-in-photo: -18.93%;
    --members-logo-line-gap-top: 0px;
    --members-logo-bottom-1-left: 45.26%;
    --members-logo-bottom-1-size: 190px;
    --members-logo-bottom-2-left: 56.52%;
    --members-logo-bottom-2-top: 438px;
    --members-logo-bottom-2-size: 190px;
    --members-logo-bottom-offset-x: min(200px, 200 * var(--calc-ratio));
    --members-logo-line-gap-bottom: 0px;
    --members-logo-letter-spacing: 6px;
    --members-logo-main-margin-right: -6px;
    --members-logo-suffix-margin-left: -2px;
    --members-logo-s-gap: -0.42em;

    /* 上部写真の実高さ − ヒーロー高さ（はみ出し量） */
    --members-photo-top-media-height: calc((100% - var(--members-photo-top-left) - var(--members-photo-top-anchor-offset)) * 1050 / 1400);
    --members-hero-overflow-above: max(0px, calc(var(--members-photo-top-media-height) - min(1100px, 1100 * var(--calc-ratio))));
    padding-top: var(--members-hero-overflow-above);
}

/* ヒーロー：上部写真 + 上部ロゴ */
.members-feature__hero {
    position: relative;
    height: min(603px, 603 * var(--calc-ratio));
    z-index: 2;
    overflow: visible;
}

.members-feature__photo {
    display: block;
    object-fit: contain;
    object-position: center;
}

.members-feature__hero-media {
    position: absolute;
    left: calc(var(--members-photo-top-left) + var(--members-photo-top-anchor-offset));
    bottom: 0;
    width: calc(100% - var(--members-photo-top-left) - var(--members-photo-top-anchor-offset));
    aspect-ratio: 1400 / 1050;
}

@media screen and (max-width:1600px) {
    .members-feature__hero-media {
        bottom: -2.5em;
        width: calc(100% - 32% - var(--members-photo-top-anchor-offset));
    }
}

@media screen and (max-width:1400px) {
    .members-feature__hero-media {
        bottom: -2.5em;
        width: calc(100% - 40% - var(--members-photo-top-anchor-offset));
    }
}

@media screen and (max-width:800px) {
    .members-feature__hero-media {
        bottom: 0;
        width: calc(100% - var(--members-photo-top-left) - var(--members-photo-top-anchor-offset));
    }
}

.members-feature__photo--top {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left bottom;
}

.members-feature__logo-group--top {
    position: absolute;
    /* 装飾文字は 1200 カラム左端から配置（画面外にはみ出させない） */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.members-feature__logo-group {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* パネル：背景 1 図形 + 文字 */
.members-feature__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: max(-67px, -67 * var(--calc-ratio));
    min-height: min(682px, 682 * var(--calc-ratio));
    padding-bottom: min(297px, 297 * var(--calc-ratio));
}

.members-feature__panel-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    /* 1200コンテンツ内からブラウザ両端まで背景のみフルブリード */
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: 0;
    background: var(--members-color-teal);
    clip-path: polygon(0 0,
            var(--members-clip-cut-x) 0,
            100% var(--members-clip-slope-size-fluid),
            100% 100%,
            calc(100% - var(--members-clip-cut-x)) 100%,
            0 calc(100% - var(--members-clip-slope-size-fluid)));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.members-feature__content {
    position: relative;
    z-index: 1;
    padding:
        min(183px, 183 * var(--calc-ratio)) min(50px, 50 * var(--calc-ratio)) min(42px, 42 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    color: #FFFFFF;
    box-sizing: border-box;
}

/* 下部：写真 + ロゴ */
.members-feature__bottom {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * min(149px, 149 * var(--calc-ratio)));
    overflow: visible;
}

.members-feature__bottom-media {
    position: relative;
    width: calc(var(--members-photo-bottom-width) - var(--members-photo-bottom-anchor-offset));
    aspect-ratio: 1400 / 1050;
}

@media screen and (max-width:1600px) {
    .members-feature__bottom-media {
        width: calc(68% - var(--members-photo-bottom-anchor-offset));
    }

}

@media screen and (max-width:1400px) {
    .members-feature__bottom-media {

        width: calc(60% - var(--members-photo-bottom-anchor-offset));
    }
}

@media screen and (max-width:800px) {
    .members-feature__bottom-media {
        width: calc(var(--members-photo-bottom-width) - var(--members-photo-bottom-anchor-offset));
    }
}

.members-feature__photo--bottom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: right top;
}

.members-feature__logo-group--bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--members-photo-bottom-width) - var(--members-photo-bottom-anchor-offset));
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.members-feature__logo {
    position: absolute;
    margin: 0;
    font-family: var(--font-family-primary);
    font-weight: 400;
    /* HTMLテキスト（塗り + アウトライン + 影）— マウス選択可能 */
    color: var(--members-color-logo-fill);
    -webkit-text-fill-color: var(--members-color-logo-fill);
    -webkit-text-stroke: min(6px, 6 * var(--calc-ratio)) var(--members-color-logo-stroke);
    paint-order: stroke fill;
    text-shadow: min(3px, 3 * var(--calc-ratio)) min(4px, 4 * var(--calc-ratio)) min(5px, 5 * var(--calc-ratio)) var(--members-color-logo-shadow);
    letter-spacing: min(6px, 6 * var(--calc-ratio));
    white-space: nowrap;
    line-height: 1;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.members-feature__logo--top-1 {
    left: 0;
    bottom: calc(min(570px, 570 * var(--calc-ratio)) - min(28px, 28 * var(--calc-ratio)));
    top: auto;
    font-size: min(128px, 128 * var(--calc-ratio));
}

.members-feature__logo--top-2 {
    left: min(100px, 100 * var(--calc-ratio));
    bottom: calc(min(603px, 603 * var(--calc-ratio)) - min(203px, 203 * var(--calc-ratio)));
    top: auto;
    font-size: min(128px, 128 * var(--calc-ratio));
}

.members-feature__logo--bottom-1 {
    left: calc(var(--members-logo-bottom-1-left) + var(--members-logo-bottom-offset-x));
    top: min(280px, 280 * var(--calc-ratio));
    font-size: min(128px, 128 * var(--calc-ratio));
}

.members-feature__logo--bottom-2 {
    left: calc(var(--members-logo-bottom-2-left) + var(--members-logo-bottom-offset-x));
    top: min(438px, 438 * var(--calc-ratio));
    font-size: min(128px, 128 * var(--calc-ratio));
}

.members-feature__title {
    width: var(--members-content-width);
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto min(20px, 20 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: min(54px, 54 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: #FFFFFF;
}

.members-feature__catch {
    width: var(--members-content-width);
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto min(49px, 49 * var(--calc-ratio));
    font-size: min(42px, 42 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    letter-spacing: var(--members-catch-letter-spacing);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.members-feature__content>p:not(.members-feature__catch) {
    width: var(--members-body-width);
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 0 min(12px, 1 * var(--calc-ratio));
    margin-left: var(--members-body-padding-left);
    font-size: min(26px, 26 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
}

/* フェーズ7b（SP）— 旧 absolute レイアウト。フェーズ2で prototype フローへ置換予定 */
@media screen and (max-width:860px) {
    .members-feature {
        padding: max(24px, 24 * var(--calc-ratio-sp)) 0 max(56px, 56 * var(--calc-ratio-sp));
        padding-bottom: 0;
    }

    .members-feature__inner {
        max-width: max(375px, 375 * var(--calc-ratio-sp));
        padding-top: var(--members-hero-overflow-above);

        --members-clip-slope-size-fluid: max(138px, 138 * var(--calc-ratio-sp));
        --members-panel-top-offset: 226px;
        --members-panel-min-height: 288px;
        --members-panel-extend-height: 125px;
        --members-content-padding-top: 77px;
        --members-content-padding-bottom: 18px;
        --members-catch-letter-spacing: -0.04em;

        --members-photo-top-top: 46px;
        --members-photo-top-height: 208px;
        --members-hero-height: 254px;
        --members-hero-overflow-above: max(0px, calc(var(--members-photo-top-media-height) - max(254px, 254 * var(--calc-ratio-sp))));
        --members-panel-overlap: -28px;
        --members-photo-bottom-pull-up: 63px;

        --members-logo-bottom-offset: 105px;
        --members-logo-bottom-offset-x: 0px;
        --members-logo-bottom-1-left: 45.26%;
        --members-logo-bottom-2-left: 56.52%;
        --members-logo-top-1-left: 4.55%;
        --members-logo-top-1-top: 12px;
        --members-logo-top-1-size: 30px;
        --members-logo-top-2-left: 15.22%;
        --members-logo-top-2-size: 30px;
        --members-logo-line-gap-top: 0px;
        --members-logo-bottom-1-size: 33px;
        --members-logo-bottom-2-size: 33px;
        --members-logo-letter-spacing: 4px;
        --members-logo-main-margin-right: -4px;
        --members-logo-s-gap: 0;
    }

    .members-feature__hero {
        height: max(254px, 254 * var(--calc-ratio-sp));
    }

    /* 上部装飾文字はセクション全幅基準（prototype 506px の left%） */
    .members-feature__logo-group--top {
        left: 0;
        width: 100%;
    }

    .members-feature__panel {
        margin-top: max(-28px, -28 * var(--calc-ratio-sp));
        min-height: max(288px, 288 * var(--calc-ratio-sp));
        padding-bottom: max(125px, 125 * var(--calc-ratio-sp));
    }

    .members-feature__content {
        padding:
            max(77px, 77 * var(--calc-ratio-sp)) max(14px, 14 * var(--calc-ratio-sp)) max(18px, 18 * var(--calc-ratio-sp));
    }

    .members-feature__title,
    .members-feature__catch,
    .members-feature__content>p:not(.members-feature__catch) {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .members-feature__bottom {
        margin-top: calc(-1 * max(63px, 63 * var(--calc-ratio-sp)));
    }

    /* 装飾文字はセクション全幅基準（写真右に重なり白地へはみ出す） */
    .members-feature__logo-group--bottom {
        width: 100%;
    }

    .members-feature__photo--bottom {
        position: absolute;
        inset: 0;
    }

    .members-feature__logo {
        color: var(--members-color-logo-fill);
        -webkit-text-fill-color: var(--members-color-logo-fill);
        -webkit-text-stroke: max(1.5px, 1.5 * var(--calc-ratio-sp)) var(--members-color-logo-stroke);
        text-shadow: max(2px, 2 * var(--calc-ratio-sp)) max(3px, 3 * var(--calc-ratio-sp)) max(4px, 4 * var(--calc-ratio-sp)) var(--members-color-logo-shadow);
        letter-spacing: max(4px, 4 * var(--calc-ratio-sp));
    }

    .members-feature__logo--top-1 {
        left: var(--members-logo-top-1-left);
        top: max(12px, 12 * var(--calc-ratio-sp));
        bottom: auto;
        font-size: max(30px, 30 * var(--calc-ratio-sp));
    }

    .members-feature__logo--top-2 {
        left: var(--members-logo-top-2-left);
        top: calc(max(12px, 12 * var(--calc-ratio-sp)) + max(30px, 30 * var(--calc-ratio-sp)));
        bottom: auto;
        font-size: max(30px, 30 * var(--calc-ratio-sp));
    }

    .members-feature__logo--bottom-1 {
        left: var(--members-logo-bottom-1-left);
        right: auto;
        top: max(105px, 105 * var(--calc-ratio-sp));
        font-size: max(33px, 33 * var(--calc-ratio-sp));
    }

    .members-feature__logo--bottom-2 {
        left: var(--members-logo-bottom-2-left);
        right: auto;
        top: max(142px, 142 * var(--calc-ratio-sp));
        font-size: max(33px, 33 * var(--calc-ratio-sp));
    }

    .members-feature__title {
        margin-bottom: max(10px, 10 * var(--calc-ratio-sp));
        font-size: max(24px, 24 * var(--calc-ratio-sp));
        line-height: 1.4;
    }

    .members-feature__catch {
        margin-bottom: max(24px, 24 * var(--calc-ratio-sp));
        font-size: max(26px, 26 * var(--calc-ratio-sp));
        line-height: 1.4;
    }

    .members-feature__content>p:not(.members-feature__catch) {
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 1.85;
    }
}

/**********************************************************************/
/* 施工 社員インタビュー 詳細文（members-feature 下） */
/**********************************************************************/
.members-followup {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 96px 0;
    padding: min(96px, 96 * var(--calc-ratio)) 0;
    background: #FFFFFF;
    box-sizing: border-box;
}

.members-followup__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;
    padding: 0 min(80px, 80 * var(--calc-ratio));
    box-sizing: border-box;
    font-family: var(--font-family-primary);
    color: var(--color-text);
}

.members-followup__title {
    margin: 0 0 10px;
    margin: 0 0 min(10px, 10 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 56px;
    font-size: min(56px, 56 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

.members-followup__catch {
    margin: 0 0 34px;
    margin: 0 0 min(34px, 34 * var(--calc-ratio));
    font-size: 46px;
    font-size: min(46px, 46 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.members-followup__body p {
    margin: 0 0 24px;
    margin: 0 0 min(24px, 24 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-text);
}

@media screen and (max-width:860px) {
    .members-followup {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding: 24px 0 64px;
        padding: max(24px, 24 * var(--calc-ratio-sp)) 0 max(64px, 64 * var(--calc-ratio-sp));
    }

    .members-followup__inner {
        max-width: 100%;
        padding: 0 16px;
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
    }

    .members-followup__title {
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
    }

    .members-followup__catch {
        margin-bottom: 22px;
        margin-bottom: max(22px, 22 * var(--calc-ratio-sp));
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
    }

    .members-followup__body p {
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.0;
    }
}

/* 数字で見るいわまTEAM（KPIグリッド・カウントアップ） */
.recruit-numbers {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 72px 0 88px;
    padding: min(72px, 72 * var(--calc-ratio)) 0 min(88px, 88 * var(--calc-ratio));
    background: #e8e8e8;
    box-sizing: border-box;
}

.recruit-numbers__inner {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0 80px;
    padding: 0 min(80px, 80 * var(--calc-ratio));
    box-sizing: border-box;
}

.recruit-numbers__heading {
    margin: 0 0 48px;
    margin: 0 0 min(48px, 48 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 48px;
    font-size: min(48px, 48 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text);
}

.recruit-numbers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    gap: min(24px, 24 * var(--calc-ratio));
}

.recruit-numbers__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    min-height: min(280px, 280 * var(--calc-ratio));
    padding: 36px 24px 32px;
    padding: min(36px, 36 * var(--calc-ratio)) min(24px, 24 * var(--calc-ratio)) min(32px, 32 * var(--calc-ratio));
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    text-align: center;
}

.recruit-numbers__icon {
    width: 56px;
    width: min(56px, 56 * var(--calc-ratio));
    height: 56px;
    height: min(56px, 56 * var(--calc-ratio));
    margin-bottom: 16px;
    margin-bottom: min(16px, 16 * var(--calc-ratio));
}

.recruit-numbers__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.recruit-numbers__icon--gray {
    color: #8a8a8a;
}

.recruit-numbers__icon--orange {
    color: #e8913a;
}

.recruit-numbers__icon--yellow {
    color: #e8b820;
}

.recruit-numbers__icon--blue {
    color: #4a90d9;
}

.recruit-numbers__icon--sky {
    color: #7ec8e3;
}

.recruit-numbers__icon--red {
    color: #e05252;
}

.recruit-numbers__label {
    margin: 0 0 12px;
    margin: 0 0 min(12px, 12 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-size: min(28px, 28 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
}

.recruit-numbers__figure {
    margin: 0;
    font-family: var(--font-family-primary);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.recruit-numbers__value {
    font-size: 96px;
    font-size: min(96px, 96 * var(--calc-ratio));
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.recruit-numbers__unit {
    font-size: 40px;
    font-size: min(40px, 40 * var(--calc-ratio));
    font-weight: 400;
    margin-left: 4px;
}

.recruit-numbers__note {
    margin: 14px 0 0;
    margin: min(14px, 14 * var(--calc-ratio)) 0 0;
    font-family: var(--font-family-primary);
    font-size: 18px;
    font-size: min(18px, 18 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.5;
    color: #555555;
}

@media screen and (max-width:860px) {
    .recruit-numbers {
        padding: 40px 0 56px;
        padding: max(40px, 40 * var(--calc-ratio-sp)) 0 max(56px, 56 * var(--calc-ratio-sp));
    }

    .recruit-numbers__inner {
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
        max-width: 100%;
    }

    .recruit-numbers__heading {
        margin-bottom: 28px;
        margin-bottom: max(28px, 28 * var(--calc-ratio-sp));
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
    }

    .recruit-numbers__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        gap: max(6px, 6 * var(--calc-ratio-sp));
        width: calc(100vw - 1em);
        position: relative;
        left: -0.6em;
    }

    .recruit-numbers__card {
        min-height: 0;
        padding: 20px 8px 18px;
        padding: max(20px, 20 * var(--calc-ratio-sp)) max(8px, 8 * var(--calc-ratio-sp)) max(18px, 18 * var(--calc-ratio-sp));
    }

    .recruit-numbers__icon {
        width: 40px;
        width: max(40px, 40 * var(--calc-ratio-sp));
        height: 40px;
        height: max(40px, 40 * var(--calc-ratio-sp));
        margin-bottom: 10px;
        margin-bottom: max(10px, 10 * var(--calc-ratio-sp));
    }

    .recruit-numbers__label {
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }

    .recruit-numbers__value {
        font-size: 32px;
        font-size: max(32px, 32 * var(--calc-ratio-sp));
    }

    .recruit-numbers__unit {
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
    }

    .recruit-numbers__note {
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
    }
}

/* 趣味ランキング */
.hobby-ranking {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 64px 0 80px;
    padding: min(64px, 64 * var(--calc-ratio)) 0 min(80px, 80 * var(--calc-ratio));
    background: #FFFFFF;
    box-sizing: border-box;
}

.hobby-ranking__inner {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.hobby-ranking__heading {
    margin: 0 0 40px;
    margin: 0 0 min(40px, 40 * var(--calc-ratio));
    padding: 0 80px;
    padding: 0 min(80px, 80 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 44px;
    font-size: min(44px, 44 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text);
}

.hobby-ranking__panel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 48px 80px 56px;
    padding: min(48px, 48 * var(--calc-ratio)) min(80px, 80 * var(--calc-ratio)) min(56px, 56 * var(--calc-ratio));
    background: #e8e8e8;
    box-sizing: border-box;
}

.hobby-ranking__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    gap: min(32px, 32 * var(--calc-ratio));
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
}

.hobby-ranking__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 320px;
    min-height: min(320px, 320 * var(--calc-ratio));
    padding: 36px 24px 32px;
    padding: min(36px, 36 * var(--calc-ratio)) min(24px, 24 * var(--calc-ratio)) min(32px, 32 * var(--calc-ratio));
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    text-align: center;
}

.hobby-ranking__rank {
    margin: 0 0 20px;
    margin: 0 0 min(20px, 20 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-size: min(28px, 28 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

.hobby-ranking__label {
    margin: 0 0 auto;
    padding-bottom: 24px;
    padding-bottom: min(24px, 24 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 32px;
    font-size: min(32px, 32 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.hobby-ranking__icon {
    width: 180px;
    width: min(180px, 180 * var(--calc-ratio));
    height: 144px;
    height: min(144px, 144 * var(--calc-ratio));
    margin-top: auto;
}

.hobby-ranking__icon svg,
.hobby-ranking__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width:860px) {
    .hobby-ranking {
        padding: 40px 0 56px;
        padding: max(40px, 40 * var(--calc-ratio-sp)) 0 max(56px, 56 * var(--calc-ratio-sp));
    }

    .hobby-ranking__heading {
        margin-bottom: 24px;
        margin-bottom: max(24px, 24 * var(--calc-ratio-sp));
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
    }

    .hobby-ranking__panel {
        padding: 24px 16px 28px;
        padding: max(24px, 24 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp)) max(28px, 28 * var(--calc-ratio-sp));
    }

    .hobby-ranking__cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 6px;
        gap: max(6px, 6 * var(--calc-ratio-sp));
        width: calc(100vw - 1em);
        max-width: 100vw;
        left: -0.5em;
    }

    .hobby-ranking__card {
        min-height: 0;
        padding: 24px 16px 20px;
        padding: max(24px, 24 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp)) max(20px, 20 * var(--calc-ratio-sp));
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .hobby-ranking__rank {
        margin-bottom: 0;
        font-size: 18px;
        font-size: max(18px, 18 * var(--calc-ratio-sp));
    }

    .hobby-ranking__label {
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 24px;
        font-size: max(24px, 24 * var(--calc-ratio-sp));
    }

    .hobby-ranking__icon {
        width: 86px;
        width: max(86px, 86 * var(--calc-ratio-sp));
        height: 86px;
        height: max(86px, 86 * var(--calc-ratio-sp));
    }
}

/* 福利厚生「ココがスゴイ」 */
.recruit-benefits {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 80px 0 96px;
    padding: min(80px, 80 * var(--calc-ratio)) 0 min(96px, 96 * var(--calc-ratio));
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
        var(--color-benefits-ultramarine);
    box-sizing: border-box;
}

.recruit-benefits__inner {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0 80px;
    padding: 0 min(80px, 80 * var(--calc-ratio));
    box-sizing: border-box;
}

.recruit-benefits__heading {
    margin: 0 0 56px;
    margin: 0 0 min(56px, 56 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 86px;
    font-size: min(86px, 86 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #FFFFFF;
    paint-order: stroke fill;
}

.recruit-benefits__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 86px 24px;
    gap: min(86px, 86 * var(--calc-ratio)) min(24px, 24 * var(--calc-ratio));
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
}

.recruit-benefits__card {
    position: relative;
    grid-column: span 2;
    min-height: 260px;
    min-height: min(260px, 260 * var(--calc-ratio));
    padding: 32px 21px 48px;
    padding: min(32px, 32 * var(--calc-ratio)) min(21px, 21 * var(--calc-ratio)) min(48px, 48 * var(--calc-ratio));
    background: #FFFFFF;
    border: none;
    border-radius: 28px;
    border-radius: min(28px, 28 * var(--calc-ratio));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

@media screen and (min-width:860px) {
    .recruit-benefits__card:nth-child(2) {
        position: relative;
        top: min(64px, 64 * var(--calc-ratio));
    }

    .recruit-benefits__card:nth-child(4) {
        grid-column: 2 / span 2;
        right: min(64px, 64 * var(--calc-ratio));
    }

    .recruit-benefits__card:nth-child(5) {
        grid-column: 4 / span 2;
        left: min(64px, 64 * var(--calc-ratio));
    }
}

.recruit-benefits__no {
    margin: 0 0 12px;
    margin: 0 0 min(12px, 12 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 72px;
    font-size: min(72px, 72 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: rgba(140, 168, 196, 0.1);
    -webkit-text-fill-color: rgba(140, 168, 196, 0.1);
    -webkit-text-stroke: 4px #0a1528;
    paint-order: stroke fill;
    letter-spacing: 0.02em;
}

.recruit-benefits__title {
    margin: 0 0 16px;
    margin: 0 0 min(16px, 16 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-size: min(28px, 28 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text);
}

.recruit-benefits__text {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.85;
    color: #333333;
    position: relative;
    z-index: 999;
}

.recruit-benefits__icon {
    position: absolute;
    right: 20px;
    right: min(20px, 20 * var(--calc-ratio));
    bottom: 16px;
    bottom: min(16px, 16 * var(--calc-ratio));
    width: 84px;
    width: min(84px, 84 * var(--calc-ratio));
    height: 84px;
    height: min(84px, 84 * var(--calc-ratio));
}

.recruit-benefits__icon--ticket {
    width: 108px;
    width: min(108px, 108 * var(--calc-ratio));
    height: 66px;
    height: min(66px, 66 * var(--calc-ratio));
    bottom: 0;
}

.recruit-benefits__icon svg,
.recruit-benefits__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width:860px) {
    .recruit-benefits {
        padding: 48px 0 64px;
        padding: max(48px, 48 * var(--calc-ratio-sp)) 0 max(64px, 64 * var(--calc-ratio-sp));
    }

    .recruit-benefits__inner {
        max-width: 100%;
        padding: 0;
    }

    .recruit-benefits__heading {
        margin-bottom: 32px;
        margin-bottom: max(32px, 32 * var(--calc-ratio-sp));
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
        font-size: 26px;
        font-size: max(26px, 26 * var(--calc-ratio-sp));
        -webkit-text-stroke-width: 1.5px;
    }

    .recruit-benefits__grid {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        gap: max(12px, 12 * var(--calc-ratio-sp));
        max-width: none;
        margin: 0;
        padding: 0 0 max(16px, 16 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp));
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x proximity;
        scroll-padding-left: max(16px, 16 * var(--calc-ratio-sp));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .recruit-benefits__grid::-webkit-scrollbar {
        display: none;
    }

    .recruit-benefits__card,
    .recruit-benefits__card:nth-child(4),
    .recruit-benefits__card:nth-child(5) {
        flex: 0 0 85vw;
        max-width: 340px;
        scroll-snap-align: start;
        grid-column: auto;
        min-height: 220px;
        min-height: max(220px, 220 * var(--calc-ratio-sp));
        padding: 20px 16px 24px;
        padding: max(20px, 20 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp)) max(24px, 24 * var(--calc-ratio-sp));
    }

    /* アイコン付きカード：本文を全幅確保し、アイコンは下段に分離 */
    .recruit-benefits__card:has(.recruit-benefits__icon) {
        display: flex;
        flex-direction: column;
        min-height: max(220px, 220 * var(--calc-ratio-sp));
        height: auto;
        padding-bottom: max(20px, 20 * var(--calc-ratio-sp));
    }

    .recruit-benefits__card:has(.recruit-benefits__icon) .recruit-benefits__text {
        flex: 1;
        width: 100%;
    }

    .recruit-benefits__card:last-child {
        margin-right: max(16px, 16 * var(--calc-ratio-sp));
    }

    .recruit-benefits__no {
        font-size: 48px;
        font-size: max(48px, 48 * var(--calc-ratio-sp));
        -webkit-text-stroke-width: 1.5px;
    }

    .recruit-benefits__title {
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .recruit-benefits__text {
        font-size: 18px;
        font-size: max(18px, 18 * var(--calc-ratio-sp));
        line-height: 1.75;
    }

    .recruit-benefits__icon {
        position: static;
        align-self: flex-end;
        flex-shrink: 0;
        margin-top: max(-24px, -24 * var(--calc-ratio-sp));
        width: 84px;
        width: max(84px, 84 * var(--calc-ratio-sp));
        height: 84px;
        height: max(84px, 84 * var(--calc-ratio-sp));
    }

    .recruit-benefits__icon--ticket {
        width: 108px;
        width: max(108px, 108 * var(--calc-ratio-sp));
        height: 66px;
        height: max(66px, 66 * var(--calc-ratio-sp));
    }
}

/* 創業100年をめざして（founding-100-html-smartphone-no-grid 移植） */
.concept-vision {
    --concept-vision-navy: #102f49;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: min(96px, 96 * var(--calc-ratio)) 0 min(88px, 88 * var(--calc-ratio));
    padding-bottom: 0;
    background: #FFFFFF;
    box-sizing: border-box;
    overflow: visible;
}

.concept-vision__stage {
    position: relative;
    width: min(calc(100vw - min(96px, 96 * var(--calc-ratio))), min(1400px, 1400 * var(--calc-ratio)));
    min-height: 900px;
    padding-bottom: 40px;
    margin: 0 auto;
    overflow: visible;
    background: #FFFFFF;
}

.concept-vision .concept-vision__title-layer,
.concept-vision .concept-vision__photo-layer,
.concept-vision .concept-vision__comment-layer {
    position: absolute;
    inset: 0;
}

.concept-vision__title-layer {
    z-index: 4;
}

.concept-vision__photo-layer {
    z-index: 2;
}

.concept-vision__comment-layer {
    z-index: 3;
}

.concept-vision__heading {
    position: absolute;
    top: min(28px, 28 * var(--calc-ratio));
    left: 0;
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: min(96px, 96 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    -webkit-text-stroke: min(2px, 2 * var(--calc-ratio)) var(--concept-vision-navy);
    paint-order: stroke fill;
    text-shadow:
        min(2px, 2 * var(--calc-ratio)) min(2px, 2 * var(--calc-ratio)) 0 var(--concept-vision-navy),
        min(8px, 8 * var(--calc-ratio)) min(7px, 7 * var(--calc-ratio)) min(8px, 8 * var(--calc-ratio)) rgba(16, 47, 73, 0.28);
}

.concept-vision .concept-vision__photo {
    position: absolute;
    left: 0;
    bottom: min(192px, 192 * var(--calc-ratio));
    width: min(650px, 650 * var(--calc-ratio));
    height: auto;
    display: block;
    object-fit: contain;
    object-position: left bottom;
}

.concept-vision__message-panel {
    position: absolute;
    top: min(140px, 140 * var(--calc-ratio));
    left: min(480px, 480 * var(--calc-ratio));
    right: calc((100% - 100vw) / 2);
    width: auto;
    min-height: min(392px, 392 * var(--calc-ratio));
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--concept-vision-navy);
    border-radius: min(74px, 74 * var(--calc-ratio)) 0 0 min(74px, 74 * var(--calc-ratio));
    box-sizing: border-box;
    padding: 0 3.5em;
}

.concept-vision__message-box {
    width: calc(100% - ((100vw - 1200px) / 2));
    min-height: min(294px, 294 * var(--calc-ratio));
    height: auto;
    padding: min(58px, 58 * var(--calc-ratio)) min(12px, 12 * var(--calc-ratio)) min(42px, 42 * var(--calc-ratio));
    overflow: visible;
    color: #FFFFFF;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    box-sizing: border-box;
}

.concept-vision__panel-title {
    margin: 0 0 min(14px, 14 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: min(30px, 30 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-align: left;
    color: #FFFFFF;
}

.concept-vision__panel-text {
    max-width: 100%;
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-align: left;
    color: #FFFFFF;
}

@media screen and (max-width:860px) {
    .concept-vision {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding: max(40px, 40 * var(--calc-ratio-sp)) 0 max(48px, 48 * var(--calc-ratio-sp));
        overflow-x: hidden;
    }

    .concept-vision__stage {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: max(670px, 670 * var(--calc-ratio-sp));
        overflow: hidden;

        --concept-vision-heading-left: max(136px, 136 * var(--calc-ratio-sp));
        --concept-vision-heading-inset-right: max(12px, 12 * var(--calc-ratio-sp));
    }

    .concept-vision__title-layer {
        overflow: visible;
        z-index: 5;
    }

    .concept-vision .concept-vision__photo {
        top: max(66px, 66 * var(--calc-ratio-sp));
        bottom: auto;
        left: max(13px, 13 * var(--calc-ratio-sp));
        width: max(256px, 256 * var(--calc-ratio-sp));
    }

    .concept-vision__heading {
        top: max(48px, 48 * var(--calc-ratio-sp));
        width: calc(100vw - 32px);
        max-width: 100vw;
        padding: 0 16px;
        text-align: right;
        font-size: clamp(25px, calc((100vw - var(--concept-vision-heading-left) - var(--concept-vision-heading-inset-right)) / 12.5), 39px);
        letter-spacing: 0.01em;
    }


    .concept-vision .concept-vision__comment-layer {
        position: relative;
        inset: auto;
        padding-top: max(205px, 205 * var(--calc-ratio-sp));
    }

    .concept-vision__message-panel {
        position: relative;
        top: auto;
        left: max(24px, 24 * var(--calc-ratio-sp));
        right: auto;
        width: calc(100% - max(24px, 24 * var(--calc-ratio-sp)));
        max-width: calc(100% - max(24px, 24 * var(--calc-ratio-sp)));
        min-height: max(346px, 346 * var(--calc-ratio-sp));
        height: auto;
        display: block;
        box-sizing: border-box;
        padding: max(22px, 22 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp)) max(28px, 28 * var(--calc-ratio-sp)) max(24px, 24 * var(--calc-ratio-sp));
        border-radius: max(42px, 42 * var(--calc-ratio-sp)) 0 0 max(42px, 42 * var(--calc-ratio-sp));
    }

    .concept-vision__message-box {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: max(300px, 300 * var(--calc-ratio-sp));
        padding: 0;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .concept-vision__panel-title {
        margin: 0 0 max(12px, 12 * var(--calc-ratio-sp));
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        white-space: nowrap;
    }

    .concept-vision__panel-text {
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 1.5;
        letter-spacing: 0.03em;
        overflow-wrap: anywhere;
        word-break: break-all;
    }
}

@media screen and (max-width:374px) {
    .concept-vision .concept-vision__photo {
        left: max(10px, 10 * var(--calc-ratio-sp));
        width: max(138px, 138 * var(--calc-ratio-sp));
    }

    .concept-vision__stage {
        --concept-vision-heading-left: max(130px, 130 * var(--calc-ratio-sp));
    }

    .concept-vision__heading {
        top: max(106px, 106 * var(--calc-ratio-sp));
    }

    .concept-vision__message-panel {
        left: max(96px, 96 * var(--calc-ratio-sp));
        width: calc(100% - max(96px, 96 * var(--calc-ratio-sp)));
        max-width: calc(100% - max(96px, 96 * var(--calc-ratio-sp)));
        padding-left: max(42px, 42 * var(--calc-ratio-sp));
    }

    .concept-vision__panel-title {
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .concept-vision__panel-text {
        font-size: max(16px, 16 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 募集要項（タブ切替テーブル）                                         */
/**********************************************************************/
.recruit-requirements {
    padding: 0px 0 100px;
    padding: min(0px, 0 * var(--calc-ratio)) 0 min(100px, 100 * var(--calc-ratio));
    padding-bottom: 0;
    background: #FFFFFF;
}

.recruit-requirements__inner {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0 100px;
    padding: 0 min(100px, 100 * var(--calc-ratio));
    box-sizing: border-box;
}

.recruit-requirements__heading {
    margin: 0 0 48px;
    margin: 0 0 min(48px, 48 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 46px;
    font-size: min(46px, 46 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
    color: var(--color-text);
}

.recruit-requirements__tabs {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
    margin-bottom: min(40px, 40 * var(--calc-ratio));
    border-bottom: 2px solid var(--color-benefits-ultramarine);
}

/* タブ下スライドバー（案5）: 選択中タブの下を横移動 */
.recruit-requirements__tab-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--color-benefits-ultramarine);
    border-radius: 2px 2px 0 0;
    transition: transform 0.3s ease, width 0.3s ease;
    pointer-events: none;
    will-change: transform, width;
}

.recruit-requirements__tab {
    padding: 14px 48px;
    padding: min(14px, 14 * var(--calc-ratio)) min(48px, 48 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 400;
    color: var(--color-benefits-ultramarine);
    background: #FFFFFF;
    border: 2px solid var(--color-benefits-ultramarine);
    border-bottom: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    letter-spacing: 0.08em;
}

.recruit-requirements__tab.is-active {
    background: var(--color-benefits-ultramarine);
    color: #FFFFFF;
}

.recruit-requirements__tab:hover:not(.is-active) {
    background: rgba(10, 21, 40, 0.06);
}

/* 横スライド用ビューポート（案1 端フェード） */
.recruit-requirements__viewport {
    position: relative;
    overflow: hidden;
}

/* 左右の端フェード: まだ隣に職種があることを示唆 
.recruit-requirements__viewport::before,
.recruit-requirements__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    width: min(56px, 56 * var(--calc-ratio));
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}*/

.recruit-requirements__viewport::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}

.recruit-requirements__viewport::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}

.recruit-requirements__viewport.has-prev::before {
    opacity: 1;
}

.recruit-requirements__viewport.has-next::after {
    opacity: 1;
}

.recruit-requirements__track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.35s ease;
    will-change: transform;
    touch-action: pan-y;
}

.recruit-requirements__track.is-dragging {
    transition: none;
}

.recruit-requirements__panel {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

/* 非アクティブパネルは支援技術から隠しつつ幅は維持 */
.recruit-requirements__panel[hidden] {
    display: block;
}

/* ドット（案3） */
.recruit-requirements__dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    gap: min(14px, 14 * var(--calc-ratio));
    margin-top: 28px;
    margin-top: min(28px, 28 * var(--calc-ratio));
    opacity: 0;
}

.recruit-requirements__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 2px solid var(--color-benefits-ultramarine);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.recruit-requirements__dot.is-active {
    background: var(--color-benefits-ultramarine);
    transform: scale(1.15);
}

.recruit-requirements__dot:hover:not(.is-active) {
    background: rgba(10, 21, 40, 0.2);
}

/* スワイプ案内（初回のみ・スマホ中心） */
.recruit-requirements__swipe-hint {
    display: none;
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: 15px;
    color: var(--color-benefits-ultramarine);
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.recruit-requirements__swipe-hint.is-hidden {
    opacity: 0;
}

.recruit-requirements__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family-primary);
    font-size: 26px;
    font-size: min(26px, 26 * var(--calc-ratio));
    line-height: 1.8;
}

.recruit-requirements__table th,
.recruit-requirements__table td {
    padding: 20px 24px;
    padding: min(20px, 20 * var(--calc-ratio)) min(24px, 24 * var(--calc-ratio));
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    vertical-align: top;
    text-align: left;
}

.recruit-requirements__table th {
    width: 20%;
    background: #F5F5F5;
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
}

.recruit-requirements__table td {
    color: var(--color-text);
}

.recruit-requirements__table tr:nth-child(odd) td {
    background: #FAFAFA;
}

@media screen and (max-width:860px) {
    .recruit-requirements {
        padding: 48px 0 64px;
    }

    .recruit-requirements__inner {
        max-width: 100%;
        padding: 0 16px;
        padding: 0 max(16px, 16 * var(--calc-ratio-sp));
    }

    .recruit-requirements__viewport {
        --req-slide-peek: max(36px, 36 * var(--calc-ratio-sp));
    }

    .recruit-requirements__track {
        gap: max(36px, 36 * var(--calc-ratio-sp));
    }

    .recruit-requirements__panel {
        flex: 0 0 calc(100% - var(--req-slide-peek));
        width: calc(100% - var(--req-slide-peek));
    }

    /* SP: 端フェードは本文の視認性を下げるため無効化（ピーク表示のみ） */
    .recruit-requirements__viewport::before,
    .recruit-requirements__viewport::after {
        display: none;
    }

    .recruit-requirements__panel {
        box-sizing: border-box;
        padding: 0 max(4px, 4 * var(--calc-ratio-sp));
        background: #FFFFFF;
    }

    .recruit-requirements__heading {
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
        margin-bottom: 28px;
        margin-bottom: max(28px, 28 * var(--calc-ratio-sp));
    }

    .recruit-requirements__tabs {
        margin-bottom: 28px;
        margin-bottom: max(28px, 28 * var(--calc-ratio-sp));
    }

    .recruit-requirements__tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 12px;
        padding: max(10px, 10 * var(--calc-ratio-sp)) max(12px, 12 * var(--calc-ratio-sp));
        font-size: 16px;
        font-size: max(16px, 16 * var(--calc-ratio-sp));
        letter-spacing: 0.04em;
        line-height: 1.35;
    }

    .recruit-requirements__table {
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        line-height: 1.65;
    }

    .recruit-requirements__swipe-hint {
        display: block;
    }

    .recruit-requirements__table,
    .recruit-requirements__table tbody,
    .recruit-requirements__table tr,
    .recruit-requirements__table th,
    .recruit-requirements__table td {
        display: block;
        width: 100%;
    }

    .recruit-requirements__table th,
    .recruit-requirements__table td {
        padding: 12px 16px;
        padding: max(12px, 12 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp)) max(12px, 12 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp));
    }

    .recruit-requirements__table th {
        border-bottom: none;
        padding-bottom: 4px;
        white-space: normal;
    }

    .recruit-requirements__table td {
        padding-top: 4px;
        border-top: none;
    }
}

/**********************************************************************/
/* 電話CTA                                                             */
/**********************************************************************/
.tel-cta {
    padding: 48px 40px;
    padding: min(48px, 48 * var(--calc-ratio)) min(40px, 40 * var(--calc-ratio));
    background: #FFFFFF;
    display: flex;
    justify-content: center;
}

.tel-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    gap: min(20px, 20 * var(--calc-ratio));
    width: 100%;
    max-width: 900px;
    max-width: min(900px, 900 * var(--calc-ratio));
    padding: 28px 48px;
    padding: min(28px, 28 * var(--calc-ratio)) min(48px, 48 * var(--calc-ratio));
    background: #2b6d86;
    border-radius: 16px;
    border-radius: min(16px, 16 * var(--calc-ratio));
    box-shadow: 6px 8px 0 rgba(10, 21, 40, 0.22);
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
}

.tel-cta__btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.tel-cta__icon {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 48px;
    font-size: min(48px, 48 * var(--calc-ratio));
    flex-shrink: 0;
}

.tel-cta__number {
    font-family: sans-serif;
    font-size: 52px;
    font-size: min(52px, 52 * var(--calc-ratio));
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    line-height: 1;
}

.tel-cta__note {
    font-family: sans-serif;
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    align-self: flex-end;
    padding-bottom: 4px;
    padding-bottom: min(4px, 4 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .tel-cta {
        padding: 32px 12px;
        padding: max(32px, 32 * var(--calc-ratio-sp)) max(12px, 12 * var(--calc-ratio-sp));
    }

    .tel-cta__btn {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        gap: max(8px, 8 * var(--calc-ratio-sp));
        padding: 18px 12px;
        padding: max(18px, 18 * var(--calc-ratio-sp)) max(12px, 12 * var(--calc-ratio-sp));
        border-radius: 12px;
        box-sizing: border-box;
        max-width: 100%;
    }

    .tel-cta__icon {
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
    }

    .tel-cta__number {
        font-size: 22px;
        font-size: max(20px, min(26px, 5.8vw));
        letter-spacing: 0.02em;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
    }

    .tel-cta__note {
        width: 100%;
        text-align: center;
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
        padding-bottom: 0;
        align-self: center;
    }
}

/**********************************************************************/
/* 選考について（step-badge-shape 移植）                                 */
/**********************************************************************/
.recruit-flow {
    padding: 80px 0 140px;
    padding: min(80px, 80 * var(--calc-ratio)) 0 min(140px, 140 * var(--calc-ratio));
    background: #FFFFFF;
}

.recruit-flow__inner {
    /* 募集要項（.recruit-requirements__inner）と同幅に統一 */
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: 0 auto;
    padding: 0 100px;
    padding: 0 min(100px, 100 * var(--calc-ratio));
    box-sizing: border-box;
}

.recruit-flow__heading {
    margin: 0 0 48px;
    margin: 0 0 min(48px, 48 * var(--calc-ratio));
    font-family: var(--font-family-primary);
    font-size: 46px;
    font-size: min(46px, 46 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.06em;
    color: var(--color-text);
}

.recruit-flow__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    gap: min(40px, 40 * var(--calc-ratio));
}

.recruit-flow__item {
    display: flex;
    align-items: center;
    gap: 32px;
    gap: min(32px, 32 * var(--calc-ratio));
}

.recruit-flow__desc {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-family-primary);
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.7;
    color: var(--color-text);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* STEPバッジ（右上・左下 45°面取り / step-badge-shape） */
.recruit-flow .step-badge {
    --cut: 34px;
    --border: 3px;
    --fill: #156082;
    --stroke: #042433;

    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    width: min(340px, 340 * var(--calc-ratio));
    height: 68px;
    height: min(68px, 68 * var(--calc-ratio));
    background: var(--stroke);
    clip-path: polygon(0 0,
            calc(100% - var(--cut)) 0,
            100% var(--cut),
            100% 100%,
            var(--cut) 100%,
            0 calc(100% - var(--cut)));
}

.recruit-flow .step-badge__inner {
    --inner-cut: calc(var(--cut) - var(--border));

    position: absolute;
    inset: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.15em;
    background: var(--fill);
    clip-path: polygon(0 0,
            calc(100% - var(--inner-cut)) 0,
            100% var(--inner-cut),
            100% 100%,
            var(--inner-cut) 100%,
            0 calc(100% - var(--inner-cut)));
    color: #FFFFFF;
    font-family: var(--font-family-primary);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.recruit-flow .step-badge__step,
.recruit-flow .step-badge__name {
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    letter-spacing: 0.04em;
}

@media screen and (max-width:860px) {
    .recruit-flow {
        padding: 48px 0 96px;
        padding: min(48px, 48 * var(--calc-ratio-sp)) 0 min(96px, 96 * var(--calc-ratio-sp));
    }

    .recruit-flow__inner {
        max-width: 100%;
        padding: 0 16px;
    }

    .recruit-flow__heading {
        font-size: 28px;
        font-size: max(28px, 28 * var(--calc-ratio-sp));
        margin-bottom: 36px;
    }

    .recruit-flow__list {
        gap: 24px;
        gap: max(24px, 24 * var(--calc-ratio-sp));
    }

    .recruit-flow__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .recruit-flow .step-badge {
        --cut: 22px;
        --border: 2px;
        width: min(228px, 100%);
        height: 45px;
        height: max(45px, 45 * var(--calc-ratio-sp));
    }

    .recruit-flow .step-badge__step,
    .recruit-flow .step-badge__name {
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }

    .recruit-flow__desc {
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        padding-left: 4px;
        white-space: normal;
    }
}

/**********************************************************************/
/* IWAMA'S FAMILY ビジュアル                                           */
/**********************************************************************/
.family-visual {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    line-height: 0;
}

.family-visual__photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 上部クロップは解除 */
    margin-top: 0;
}

.family-visual__line {
    position: absolute;
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 128px;
    font-size: min(128px, 128 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.06em;
    /* 半透明の白塗り + アウトライン + 影 */
    color: rgba(255, 255, 255, 0.55);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
    -webkit-text-stroke: min(8px, 8 * var(--calc-ratio)) #305868;
    paint-order: stroke fill;
    text-shadow: min(4px, 4 * var(--calc-ratio)) min(5px, 5 * var(--calc-ratio)) min(6px, 6 * var(--calc-ratio)) rgba(60, 85, 95, 0.55);
}

.family-visual__line--iwamas {
    bottom: 26%;
    left: 3%;
}

.family-visual__line--family {
    bottom: 11%;
    left: 8%;
}

@media screen and (max-width:860px) {
    .family-visual__photo {
        margin-top: 0;
    }

    .family-visual__line {
        font-size: 40px;
        font-size: max(40px, 40 * var(--calc-ratio-sp));
        -webkit-text-stroke-width: max(2px, 2 * var(--calc-ratio-sp));
        text-shadow: max(3px, 3 * var(--calc-ratio-sp)) max(4px, 4 * var(--calc-ratio-sp)) max(5px, 5 * var(--calc-ratio-sp)) rgba(60, 85, 95, 0.55);
    }

    .family-visual__line--iwamas {
        /* FAMILY の上端 + 10px 隙間 */
        bottom: calc(-14% + 1.05em + 10px);
        left: 3%;
    }

    .family-visual__line--family {
        bottom: -2%;
        left: 7%;
    }
}

@media screen and (max-width:860px) {
    .work-scroll {
        padding: 48px 0;
        padding: max(48px, 48 * var(--calc-ratio-sp)) 0;
    }

    .work-scroll__track {
        gap: 32px;
        gap: max(32px, 32 * var(--calc-ratio-sp));
    }

    .work-scroll__card {
        padding: 10px;
        padding: max(10px, 10 * var(--calc-ratio-sp));
    }

    .work-scroll__card img {
        width: 240px;
        width: max(240px, 240 * var(--calc-ratio-sp));
        height: 180px;
        height: max(180px, 180 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 求める人物像（1163px基準 → 1363pxへ等比拡大） */
/**********************************************************************/
.persona {
    --persona-scale: calc(1200 / 1163);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 64px 0 80px;
    padding: min(64px, 64 * var(--calc-ratio)) 0 min(80px, 80 * var(--calc-ratio));
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    font-family: var(--font-family-primary);
}

.persona__canvas-host {
    width: min(calc(1163px * var(--persona-scale)), calc(1163px * var(--persona-scale) * var(--calc-ratio)));
    height: min(calc(842px * var(--persona-scale)), calc(842px * var(--persona-scale) * var(--calc-ratio)));
    overflow: hidden;
    flex-shrink: 0;
}

.persona .canvas {
    position: relative;
    width: 1163px;
    height: 842px;
    transform: scale(min(var(--persona-scale), calc(var(--persona-scale) * var(--calc-ratio))));
    transform-origin: top left;
    overflow: hidden;
    background: #FFFFFF;
}

.persona .white-box {
    position: absolute;
    /* top-center（挑戦心）右端 556px の右側へ退避し、円と本文の重なりを解消 */
    left: 580px;
    top: 79px;
    width: 540px;
    height: 329px;
    background: #FFFFFF;
    z-index: 4;
}

.persona .title {
    font-family: var(--font-family-primary);
    position: absolute;
    left: 128px;
    top: 80px;
    margin: 0;
    color: #000000;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    z-index: 2;
}

.persona .body-text {
    position: absolute;
    left: 8px;
    top: 128px;
    margin: 0;
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: nowrap;
}

.persona .circle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
    text-align: center;
    z-index: 3;
}

.persona .circle p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 赤枠キーワード（誠実・挑戦心・信頼関係・支える/チカラ・改善力）+12pt */
.persona .top-left>div>p:first-child,
.persona .top-center>div>p:first-child,
.persona .large-left>div>p:first-child,
.persona .large-right>div>p:first-child,
.persona .center>div>p {
    font-size: 36px;
}

.persona .small-center>div>p:first-child {
    font-size: 28px;
}

.persona .navy {
    background: #0e2841;
}

.persona .teal {
    background: #156082;
}

.persona .top-left {
    left: 45px;
    top: 160px;
    width: 215px;
    height: 211px;
}

.persona .top-center {
    left: 339px;
    top: 134px;
    width: 217px;
    height: 213px;
}

.persona .small-center {
    left: 256px;
    top: 285px;
    width: 157px;
    height: 160px;
}

.persona .large-left {
    left: 18px;
    top: 448px;
    width: 342px;
    height: 352px;
}

.persona .center {
    left: 370px;
    top: 391px;
    width: 264px;
    height: 261px;
}

.persona .large-right {
    left: 601px;
    top: 420px;
    width: 379px;
    height: 381px;
}

@media screen and (max-width:860px) {

    /* スマホ専用レイアウト（375px基準・画面幅に比例スケール）PCは未変更 */
    .persona {
        --persona-sp-w: 375;
        --persona-sp-h: 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        padding: 28px 0 48px;
        padding: max(28px, 28 * var(--calc-ratio-sp)) 0 max(48px, 48 * var(--calc-ratio-sp));
        overflow-x: hidden;
        overflow-y: visible;
    }

    .persona__canvas-host {
        width: 100%;
        max-width: 100vw;
        height: calc(var(--persona-sp-h) * 100vw / var(--persona-sp-w));
        margin: 0 auto;
        display: flex;
        justify-content: center;
        overflow: visible;
    }

    .persona .canvas {
        position: relative;
        flex-shrink: 0;
        width: 375px;
        height: 520px;
        transform: scale(calc(100vw / 375));
        transform-origin: top center;
        overflow: visible;
        background: transparent;
    }

    .persona .white-box {
        display: none;
    }

    .persona .title {
        left: 0;
        top: 2px;
        width: 100%;
        text-align: center;
        font-size: 21px;
        font-weight: 400;
        z-index: 10;
    }

    .persona .circle p {
        white-space: normal;
        letter-spacing: 0.03em;
        line-height: 1.5;
    }

    .persona .circle>div>p:first-child {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 3px;
    }

    .persona .circle>div>p:not(:first-child) {
        font-size: 11px;
        font-size: max(11px, 11 * var(--calc-ratio-sp));
        line-height: 1.5;
    }

    /* 誠実 */
    .persona .top-left {
        left: 14px;
        top: 46px;
        width: 110px;
        height: 110px;
        z-index: 5;
    }

    /* 挑戦心 */
    .persona .top-center {
        left: 186px;
        top: 38px;
        width: 110px;
        height: 110px;
        z-index: 4;
    }

    .persona .top-center>div {
        padding: 0 6px 10px;
        box-sizing: border-box;
    }

    .persona .top-center>div>p:not(:first-child) {
        /* 「楽しむ」との重なりを避け、説明文を円の中央寄りに */
        padding-left: 6px;
    }

    /* 楽しむ：挑戦心テキスト（左下）と重ならない位置へ */
    .persona .small-center {
        left: 122px;
        top: 124px;
        width: 80px;
        height: 80px;
        z-index: 7;
    }

    .persona .small-center>div>p:first-child {
        font-size: 14px;
    }

    /* 支えるチカラ */
    .persona .center {
        left: 14px;
        top: 156px;
        width: 128px;
        height: 128px;
        z-index: 3;
    }

    .persona .center>div>p:first-child,
    .persona .center>div>p:last-child {
        font-size: 15px;
        margin-bottom: 0;
        line-height: 1.35;
    }

    /* 信頼関係 */
    .persona .large-left {
        left: 164px;
        top: 168px;
        width: 182px;
        height: 182px;
        z-index: 6;
    }

    .persona .large-left>div {
        padding: 0 8px;
    }

    .persona .large-left>div>p:first-child {
        font-size: 17px;
    }

    /* 改善力 */
    .persona .large-right {
        left: 8px;
        top: 272px;
        width: 230px;
        height: 230px;
        z-index: 2;
    }

    .persona .large-right>div>p:first-child {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .persona .large-right>div>p:not(:first-child) {
        font-size: 10.5px;
        line-height: 1.65;
        padding: 0 28px;
    }

    .persona__body {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: max(20px, 20 * var(--calc-ratio-sp)) max(14px, 14 * var(--calc-ratio-sp)) 0;
        color: #000000;
        font-family: var(--font-family-primary);
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        font-weight: 400;
        line-height: 1.85;
        letter-spacing: 0.02em;
    }
}

.top .movie {
    position: relative;
    width: 100%;
}

.top .movie .movie-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 905px;
    height: min(905px, 905 * var(--calc-ratio));
    background-image: url('../image/image_452_background_transparent.webp');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
}

.top .movie .video-container {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 1200px;
    width: min(1200px, 1200 * var(--calc-ratio));
    text-align: center;
}

.top .movie video {
    display: block;
    margin: 0 auto;
    width: 1200px;
    width: min(1200px, 1200 * var(--calc-ratio));
}

.top .movie p {
    padding: 35px 0 87px;
    padding: min(35px, 35 * var(--calc-ratio)) 0 min(87px, 87 * var(--calc-ratio));
    width: 100%;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: right;
    color: #FFFFFF;
}

.top .movie .custom-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.top .movie .play-button {
    width: 223px;
    width: min(223px, 223 * var(--calc-ratio));
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s;
}

.top .movie .play-button:hover {
    transform: scale(1.1);
}

@media screen and (max-width:860px) {
    .top {
        font-size: 24px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }

    .top .main-image .hero-site-label {
        display: none;
    }

    .top .main-image .hero-copy {
        top: 50%;
        left: 50%;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
        line-height: 1.35;
        letter-spacing: 0.04em;
        width: 80%;
        text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.5);
    }

    .top .main-image .hero-copy__line2 {
        white-space: normal;
    }

    .top .message1 {
        margin-top: 48px;
        margin-top: max(48px, 48 * var(--calc-ratio-sp));
        font-size: 38px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        line-height: 1.75;
    }

    .top .message1 .size {
        font-size: inherit;
    }

    .top .message2 {
        margin: 30px auto 0;
        margin-top: max(30px, 30 * var(--calc-ratio-sp));
        font-size: 24px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        font-weight: 500;
        line-height: 2.0;
        width: 84vw;
    }

    .top .message3 {
        margin: 24px auto 0;
        margin-top: max(24px, 24 * var(--calc-ratio-sp));
        font-size: 24px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        font-weight: 500;
        line-height: 2.0;
        width: 84vw;
    }

    .top .message3 .size {
        font-size: inherit;
        font-weight: inherit;
    }

    .top .message4 {
        margin: 24px auto 0;
        margin-top: max(24px, 24 * var(--calc-ratio-sp));
        font-size: 24px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        font-weight: 400;
        line-height: 2.0;
        width: 84vw;
    }

    .top .message5 {
        margin: 32px auto 0;
        margin-top: max(32px, 32 * var(--calc-ratio-sp));
        font-size: 38px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        line-height: 1.75;
        width: 84vw;
    }
}

@media screen and (max-width:860px) {
    .top .movie .movie-bg {
        width: 100%;
        height: 380px;
        height: max(380px, 380 * var(--calc-ratio-sp));
        background-image: url('../image/image_452_background_transparent.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 117.7% auto;
    }

    .top .movie .video-container {
        width: 90vw;
    }

    .top .movie video {
        width: 90vw;
    }

    .top .movie p {
        margin-right: 5vw;
        padding: 12px 0 26px;
        padding: max(12px, 12 * var(--calc-ratio-sp)) 0 max(26px, 26 * var(--calc-ratio-sp));
        width: 90vw;
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 32px;
        margin-bottom: min(32px, 32 * var(--calc-ratio-sp));
    }

    .top .movie .custom-controls {
        height: 75%;
    }

    .top .movie .play-button {
        width: 75px;
        width: max(75px, 75 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 紹介 */
/**********************************************************************/
.intro {
    margin-top: 140px;
    margin-top: min(140px, 140 * var(--calc-ratio));
}

.intro .main img:first-child {
    width: 100%;
    height: 667px;
    height: min(667px, 667 * var(--calc-ratio));
    object-fit: cover;
    object-position: 0 0;
}

.intro .main .add-shape {
    position: absolute;
    left: calc(50% - min(36.46vw, 700px) / 2);
    bottom: -22%;
    width: 700px;
    width: min(36.46vw, 700px);
    height: 230px;
    height: min(12vw, 230px);
    background-color: #FFFFFF;
    border-radius: 50%;
}

.intro .main .mark {
    position: absolute;
    left: calc(50% - min(8.85vw, 170px) / 2);
    bottom: -24%;
    width: 170px;
    width: min(8.85vw, 170px);
}

.intro .intro1 {
    margin: 260px auto 0;
    margin-top: min(260px, 260 * var(--calc-ratio));
    width: 1200px;
    width: min(1200px, 1200 * var(--calc-ratio));
}

.intro .intro2 {
    margin: 390px auto 0;
    margin-top: min(390px, 390 * var(--calc-ratio));
    width: 1200px;
    width: min(1200px, 1200 * var(--calc-ratio));
}

.intro .intro3 {
    margin: 237px auto 0;
    margin-top: min(237px, 237 * var(--calc-ratio));
    width: 1200px;
    width: min(1200px, 1200 * var(--calc-ratio));
}

.intro .title {
    display: inline-block;
    font-size: 55px;
    font-size: min(55px, 55 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
}

.intro .title_en {
    margin-bottom: 5px;
    margin-bottom: min(5px, 5 * var(--calc-ratio));
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: bold;
    color: #FFEB00;
}

.intro .desc {
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.8;
}

.intro .intro1 .title {
    vertical-align: top;
    padding-right: 130px;
    padding-right: min(130px, 130 * var(--calc-ratio));
}

.intro .intro1 .desc {
    display: inline-block;
    width: 620px;
    width: min(620px, 620 * var(--calc-ratio));
    text-align: justify;
}

.intro .intro2 .title {
    display: block;
    margin-bottom: 50px;
    margin-bottom: min(50px, 50 * var(--calc-ratio));
}

.intro .intro2 .desc {
    width: 677px;
    width: min(677px, 677 * var(--calc-ratio));
    text-align: justify;
}

.intro .intro2 img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 487px;
    width: min(487px, 487 * var(--calc-ratio));
}

.intro .intro3 .title {
    vertical-align: top;
    padding-right: 126px;
    padding-right: min(126px, 126 * var(--calc-ratio));
}

.intro .intro3 .desc {
    display: inline-block;
    width: 730px;
    width: min(730px, 730 * var(--calc-ratio));
    text-align: justify;
}

@media screen and (max-width:860px) {
    .intro {
        margin-top: 106px;
        margin-top: max(106px, 106 * var(--calc-ratio-sp));
    }

    .intro .main img:first-child {
        height: 223px;
        height: max(223px, 223 * var(--calc-ratio-sp));
        object-position: 0 25%;
    }

    .intro .main .add-shape {
        left: calc(50% - max(36.46vw, 290px) / 2);
        bottom: -41%;
        width: 290px;
        width: max(36.46vw, 290px);
        height: 130px;
        height: max(35.6vw, 130px);
    }

    .intro .main .mark {
        left: calc(50% - min(13vw, 49px) / 2);
        bottom: -12%;
        width: 49px;
        width: min(13vw, 49px);
    }

    .intro .intro1 {
        margin-top: 66px;
        margin-top: max(66px, 66 * var(--calc-ratio-sp));
        width: 100%;
    }

    .intro .intro2 {
        margin-top: 97px;
        margin-top: max(97px, 97 * var(--calc-ratio-sp));
        width: 100%;
    }

    .intro .intro3 {
        margin-top: 100px;
        margin-top: max(100px, 100 * var(--calc-ratio-sp));
        width: 100%;
    }

    .intro .title {
        display: block;
        margin-left: 8vw;
        font-size: 25px;
        font-size: max(25px, 25 * var(--calc-ratio-sp));
    }

    .intro .title_en {
        margin-left: 8vw;
        margin-bottom: 8px;
        margin-bottom: max(8px, 8 * var(--calc-ratio-sp));
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
    }

    .intro .desc {
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }

    .intro .intro1 .title {
        padding-right: 0;
        margin-bottom: max(35px, 35 * var(--calc-ratio-sp));
    }

    .intro .intro1 .desc {
        display: block;
        margin: 0 auto;
        width: 84vw;
    }

    .intro .intro2 .title {
        display: block;
        margin-bottom: 35px;
        margin-bottom: max(35px, 35 * var(--calc-ratio-sp));
    }

    .intro .intro2 .desc {
        margin: 0 auto;
        width: 84vw;
    }

    .intro .intro2 img {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        margin-top: max(20px, 20 * var(--calc-ratio-sp));
        width: 100vw;
    }

    .intro .intro3 .title {
        padding-right: 0;
        margin-bottom: max(35px, 35 * var(--calc-ratio-sp));
    }

    .intro .intro3 .desc {
        display: block;
        margin: 0 auto;
        width: 84vw;
    }
}

/* 紹介 - 平常時の活動/非常時の活動 */
/*********************************/
.intro .switcher>ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    margin: 110px 0 0;
    margin-top: min(110px, 110 * var(--calc-ratio));
    margin-left: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
}

.intro .switcher>ul.uk-subnav>* {
    flex: 1 1 33.333%;
    padding-left: 0;
}

.intro .switcher>ul>li {
    flex: 1 1 33.333%;
    width: 33.333%;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
}

.intro .switcher>ul li a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding: 10px 6px;
    padding: min(10px, 10 * var(--calc-ratio)) 6px;
    font-size: 24px;
    font-size: min(24px, 24 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    color: #000000;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-bottom: 0;
    border-left: none;
    box-sizing: border-box;
}

.intro .switcher>ul>li:first-child a {
    border-left: 1px solid #000000;
}

.intro .switcher .head-active,
.intro .switcher .head-urgent,
.intro .switcher .head-text {
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.intro .switcher>ul li.uk-active a {
    position: relative;
    z-index: 1;
    color: #FFFFFF;
}

.intro .switcher>ul li.uk-active.head-active a {
    background: #156082;
}

.intro .switcher>ul li.uk-active.head-urgent a {
    background: #154676;
}

.intro .switcher>ul li.uk-active.head-text a {
    background: #0e2841;
}

.intro .switcher>ul li.uk-active {
    background: transparent;
    z-index: 1;
}

@media screen and (max-width:860px) {
    .intro .switcher>ul {
        margin-top: 90px;
        margin-top: max(90px, 90 * var(--calc-ratio-sp));
    }

    .intro .switcher>ul li a {
        padding: 14px 4px;
        padding: max(14px, 14 * var(--calc-ratio-sp)) 4px;
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
    }

    .intro .switcher>ul>li {
        flex: 1 1 33.333%;
        width: 33.333%;
    }
}

/* 紹介 - 補償・支援制度 */
/*********************************/
.intro .intro3 .reward {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-top: min(50px, 50 * var(--calc-ratio));
    padding-top: 140px;
    padding-top: min(140px, 140 * var(--calc-ratio));
}

.intro .intro3 .reward div {
    width: calc(99.6% / 3);
    height: 500px;
    height: min(500px, 500 * var(--calc-ratio));
    text-align: center;
    vertical-align: top;
    border: 1px #707070 solid;
    border: min(1px, 1 * var(--calc-ratio)) #707070 solid;
}

.intro .intro3 .reward div:nth-child(3n+2) {
    border-left: none;
    border-right: none;
}

.intro .intro3 .reward div:nth-child(-n+3) {
    border-top: none;
    border-bottom: none;
}

.intro .intro3 .reward div:nth-child(n+4) {
    border-bottom: none;
}

.intro .intro3 .reward div:nth-child(1) {
    border-left: none;
}

.intro .intro3 .reward div:nth-child(3) {
    border-right: none;
}

.intro .intro3 .reward div:nth-child(4) {
    border-left: none;
}

.intro .intro3 .reward div:nth-child(6) {
    border-right: none;
}

.intro .intro3 .reward div img {
    margin-top: 70px;
    margin-top: min(70px, 70 * var(--calc-ratio));
    height: 70px;
    height: min(70px, 70 * var(--calc-ratio));
}

.intro .intro3 .reward div p:nth-child(2) {
    margin: 50px auto 50px;
    margin: min(50px, 50 * var(--calc-ratio)) auto min(50px, 50 * var(--calc-ratio));
    font-size: 30px;
    font-size: min(30px, 30 * var(--calc-ratio));
    font-weight: 600;
}

.intro .intro3 .reward div p:nth-child(3) {
    padding: 0 50px 0;
    padding: 0 min(50px, 50 * var(--calc-ratio)) 0;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.2;
    text-align: justify;
}

@media screen and (max-width:1220px) {
    .intro .intro3 .reward {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width:860px) {
    .intro .intro3 .reward {
        margin: 0 auto;
        margin-top: 0;
        width: 84vw;
        padding-top: 0;
        text-align: center;
    }

    .intro .intro3 .reward div {
        width: 100%;
        height: auto;
        text-align: left;
        border: none;
    }

    .intro .intro3 .reward div img {
        margin-top: 50px;
        margin-top: max(50px, 50 * var(--calc-ratio-sp));
        float: left;
        width: 33px;
        width: max(33px, 33 * var(--calc-ratio-sp));
        height: auto;
        text-align: left;
    }

    .intro .intro3 .reward div p:nth-child(2) {
        margin: 60px 0 30px 65px;
        margin-top: max(60px, 60 * var(--calc-ratio-sp));
        margin-bottom: max(30px, 30 * var(--calc-ratio-sp));
        margin-left: max(65px, 65 * var(--calc-ratio-sp));
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .intro .intro3 .reward div p:nth-child(3) {
        margin-bottom: 40px;
        margin-bottom: max(40px, 40 * var(--calc-ratio-sp));
        padding: 0 0;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }
}

/**********************************************************************/
/* 情報 */
/**********************************************************************/
.info {
    display: flex;
    margin-top: 220px;
    margin-top: min(220px, 220 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    color: #FFFFFF;
    overflow: hidden;
}

.info>p {
    position: absolute;
    left: calc(1730 * var(--calc-ratio));
    top: 0;
    width: 1700px;
    width: min(1700px, 1700 * var(--calc-ratio));
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
    white-space: nowrap;
    font-size: 200px;
    font-size: min(200px, 200 * var(--calc-ratio));
    font-weight: 400;
    text-align: left;
    color: var(--color-info);
    line-height: 1;
}

.info>div {
    display: block;
    padding: 102px 175px 142px 192px;
    padding-top: min(102px, 102 * var(--calc-ratio));
    padding-right: min(175px, 175 * var(--calc-ratio));
    padding-bottom: min(142px, 142 * var(--calc-ratio));
    padding-left: min(192px, 192 * var(--calc-ratio));
    max-width: calc(1730px - 175px - 192px);
    background-color: var(--color-info);
    border-radius: 0 70px 70px 0;
    border-radius: 0 min(70px, 70 * var(--calc-ratio)) min(70px, 70 * var(--calc-ratio)) 0;
}

@media screen and (max-width:1920px) {
    .info>div {
        --calc-base: min(1730px, 1730 * var(--calc-ratio));
        margin-right: calc(100% - var(--calc-base));
    }
}

@media screen and (min-width:1920px) {
    .info>p {
        left: 1730px;
    }
}

@media screen and (max-width:860px) {
    .info {
        margin-top: 97px;
        margin-top: max(97px, 97 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }

    .info>p {
        left: 90vw;
        top: 30px;
        top: max(30px, 30 * var(--calc-ratio-sp));
        width: auto;
        font-size: 37px;
        font-size: max(37px, 37 * var(--calc-ratio-sp));
    }

    .info>div {
        padding: 46px 8vw 49px 6.6vw;
        padding-top: max(46px, 46 * var(--calc-ratio-sp));
        padding-bottom: max(49px, 49 * var(--calc-ratio-sp));
        margin-right: 10vw;
        max-width: calc(90vw - 8vw - 6.6vw);
        border-radius: 0 20px 20px 0;
        border-radius: 0 max(20px, 20 * var(--calc-ratio-sp)) max(20px, 20 * var(--calc-ratio-sp)) 0;
    }
}

/* 情報 - 団員数情報・女性消防団員募集 */
/*********************************/
.info .member .title,
.info .support .title {
    padding: 20px 0;
    padding: min(20px, 20 * var(--calc-ratio)) 0;
    width: 464px;
    width: min(464px, 464 * var(--calc-ratio));
    font-size: 30px;
    font-size: min(30px, 30 * var(--calc-ratio));
    font-weight: 600;
    text-align: center;
    color: var(--color-info);
    background-color: #FFFFFF;
}

.info .member>div {
    display: flex;
}

.info .member .graph {
    display: flex;
    margin-top: 64px;
    margin-top: min(64px, 64 * var(--calc-ratio));
    margin-right: 50px;
    margin-right: min(50px, 50 * var(--calc-ratio));
    margin-bottom: 64px;
    margin-bottom: min(64px, 64 * var(--calc-ratio));
    width: 480px;
    width: min(480px, 480 * var(--calc-ratio));
}

.info .member .note1 {
    display: flex;
    margin-top: 54px;
    margin-top: min(54px, 54 * var(--calc-ratio));
}

.info .member .note1 p {
    line-height: 2.5;
    text-align: justify;
}

.info .recruit {
    display: flex;
    align-items: stretch;
    min-height: 265px;
    min-height: min(265px, 265 * var(--calc-ratio));
    text-align: justify;
}

.info .recruit div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 286px;
    width: min(286px, 286 * var(--calc-ratio));
    font-size: 45px;
    font-size: min(45px, 45 * var(--calc-ratio));
    font-weight: 800;
    line-height: 1.5;
    color: #DF1717;
    background: #FFEB00;
}

.info .recruit div:last-child {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0 65px;
    padding: 0 min(65px, 65 * var(--calc-ratio));
    line-height: 3.0;
    color: var(--color-text);
    background: #FFFFFF;
}

@media screen and (max-width:860px) {

    .info .member .title,
    .info .support .title {
        margin: 0 auto;
        padding: 9px 0;
        padding: max(9px, 9 * var(--calc-ratio-sp)) 0;
        width: 67vw;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .info .member>div {
        display: block;
    }

    .info .member .graph {
        display: block;
        margin-top: 32px;
        margin-top: max(32px, 32 * var(--calc-ratio-sp));
        width: 100%;
    }

    .info .member .note1 {
        display: block;
        margin-top: 6px;
        margin-top: max(6px, 6 * var(--calc-ratio-sp));
    }

    .info .member .note1 p {
        line-height: 2.6;
    }

    .info .recruit {
        display: block;
        align-items: normal;
        margin-top: 42px;
        margin-top: max(42px, 42 * var(--calc-ratio-sp));
        min-height: auto;
    }

    .info .recruit div:first-child {
        display: block;
        padding: 13px 0;
        padding: max(13px, 13 * var(--calc-ratio-sp)) 0;
        width: 100%;
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        line-height: 1.0;
        text-align: center;
    }

    .info .recruit div:last-child {
        display: block;
        padding: 18px 17px;
        padding: max(18px, 18 * var(--calc-ratio-sp)) max(17px, 17 * var(--calc-ratio-sp));
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        line-height: 2.5;
    }
}

/* 情報 - 数字で見る多度津町消防団 */
/*********************************/
.info .analysis {
    display: flex;
    flex-wrap: wrap;
    margin: 100px auto 143px;
    margin: min(100px, 100 * var(--calc-ratio)) auto min(143px, 143 * var(--calc-ratio));
    width: 100%;
}

.info .analysis>div {
    display: flex;
    padding: 35px;
    padding: min(35px, 35 * var(--calc-ratio));
    align-items: flex-end;
    /* width: calc((100% / 3) - 71.5px); */
    width: 340.5px;
    width: min(340.5px, 339.0 * var(--calc-ratio));
    /* height: calc(209px - 35px * 2); */
    height: min(139px, 139 * var(--calc-ratio));
    border: 1px #FFFFFF solid;
    border: min(1px, 1 * var(--calc-ratio)) #FFFFFF solid;
    justify-content: space-between;
    order: 1;
}

.info .analysis .d6 {
    /* width: calc((100% / 3) - 71.5px + 22px); */
    width: 362.5px;
    width: min(362.5px, 361.0 * var(--calc-ratio));
    padding-right: 13px;
    padding-right: min(13px, 13 * var(--calc-ratio));
}

.info .analysis>div:nth-child(3n+2) {
    border-left: none;
    border-right: none;
}

.info .analysis>div:nth-child(n+4):nth-child(-n+6) {
    border-top: none;
    border-bottom: none;
}

.info .analysis>div p {
    font-size: 35px;
    font-size: min(35px, 35 * var(--calc-ratio));
    font-weight: 800;
    color: #FFFFFF;
}

.info .analysis>div .item {
    letter-spacing: 0;
    line-height: 1.2;
}

.info .analysis>div .number {
    font-size: 120px;
    font-size: min(120px, 120 * var(--calc-ratio));
    font-weight: 700;
    letter-spacing: -0.05em;
    transform: scale(1.2, 1) translateY(5%);
}

.info .analysis>div .number span {
    font-size: 60px;
    font-size: min(60px, 60 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .info .analysis {
        margin: 74px auto 82px;
        margin-top: max(74px, 74 * var(--calc-ratio-sp));
        margin-bottom: max(82px, 82 * var(--calc-ratio-sp));
    }

    .info .analysis>div {
        padding: 7px;
        padding: max(7px, 7 * var(--calc-ratio-sp));
        /* width: calc(50% - 15.5px); */
        /* width: 33.564vw; */
        --calc-base: max(15.5px, 15.5 * var(--calc-ratio-sp));
        width: calc(50% - var(--calc-base));
        height: auto;
        min-height: 60px;
        min-height: max(60px, 60 * var(--calc-ratio-sp));
        border: max(1px, 1 * var(--calc-ratio-sp)) #FFFFFF solid;
        order: 1;
    }

    .info .analysis .d6 {
        /* width: calc(50% - 10.5px); */
        /* width: 34.897vw; */
        --calc-base: max(10.5px, 10.5 * var(--calc-ratio-sp));
        width: calc(50% - var(--calc-base));
        padding-right: 2px;
        padding-right: max(2px, 2 * var(--calc-ratio-sp));
    }

    .info .analysis>div:nth-child(-n+2) {
        border-top: none;
    }

    .info .analysis>div:nth-child(2),
    .info .analysis>div:nth-child(5) {
        border-right: 1px #FFFFFF solid;
        border-right: max(1px, 1 * var(--calc-ratio-sp)) #FFFFFF solid;
    }

    .info .analysis>div:nth-child(6) {
        border-top: 1px #FFFFFF solid !important;
        border-top: max(1px, 1 * var(--calc-ratio-sp)) #FFFFFF solid !important;
    }

    .info .analysis>div:nth-child(7) {
        border-bottom: none;
        border-left: none;
    }

    .info .analysis>div:nth-child(8) {
        border-left: 1px #FFFFFF solid;
        border-left: max(1px, 1 * var(--calc-ratio-sp)) #FFFFFF solid;
    }

    .info .analysis>div p {
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
    }

    .info .analysis>div .item {
        letter-spacing: 0;
        line-height: 1.2;
    }

    .info .analysis>div .number {
        font-size: 44px;
        font-size: max(44px, 44 * var(--calc-ratio-sp));
        letter-spacing: -0.075em;
    }

    .info .analysis>div .number span {
        font-size: 32px;
        font-size: max(32px, 32 * var(--calc-ratio-sp));
    }
}

.info .analysis .header {
    display: block;
    padding: 0;
    /* width: calc((100% / 3) - 1.5px); */
    width: 410.5px;
    width: min(410.5px, 409.0 * var(--calc-ratio));
    height: 209px;
    height: min(209px, 209 * var(--calc-ratio));
    background: #FFFFFF;
    align-items: center;
}

.info .analysis .header p:first-child {
    margin: 24px 14px 0;
    margin: min(24px, 24 * var(--calc-ratio)) min(14px, 14 * var(--calc-ratio)) 0;
    font-size: 48px;
    font-size: min(48px, 48 * var(--calc-ratio));
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.0;
    color: var(--color-info);
}

.info .analysis .header p:last-child {
    margin: 10px 14px 0;
    margin: min(10px, 10 * var(--calc-ratio)) min(14px, 14 * var(--calc-ratio)) 0;
    font-size: 53px;
    font-size: min(53px, 53 * var(--calc-ratio));
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.0;
    color: var(--color-info);
}

.info .analysis .header .now {
    font-size: 30px;
    font-size: min(30px, 30 * var(--calc-ratio));
    font-weight: 800;
    line-height: 1.0;
}

@media screen and (max-width:860px) {
    .info .analysis .header {
        display: flex;
        padding: 9px 0;
        padding: max(9px, 9 * var(--calc-ratio-sp)) 0;
        margin: 0 auto;
        width: 100%;
        min-height: auto;
        height: auto;
        text-align: center;
        order: 0;
        align-items: flex-start;
    }

    .info .analysis .header p:first-child {
        margin: 0;
        margin-left: auto;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 1.0;
        text-align: left;
    }

    .info .analysis .header p:last-child {
        margin-left: auto;
        margin: 0;
        margin-right: auto;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 0.8;
        text-align: right;
    }

    .info .analysis .header .now {
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
        line-height: 1.0;
    }
}

.info .analysis .d1 .note {
    position: absolute;
    top: 35px;
    top: min(35px, 35 * var(--calc-ratio));
    left: 35px;
    left: min(35px, 35 * var(--calc-ratio));
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: 400;
}

.info .analysis .d6 .note {
    position: absolute;
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
}

.info .analysis .d7 .note {
    position: absolute;
    top: 53px;
    top: min(53px, 53 * var(--calc-ratio));
    left: 37%;
    font-size: 70px;
    font-size: min(70px, 70 * var(--calc-ratio));
    font-weight: 800;
}

.info .analysis .d3 img {
    position: absolute;
    top: 8%;
    right: 0;
    width: 250px;
    width: min(250px, 250 * var(--calc-ratio));
}

.info .analysis .d3 .number span {
    font-size: 62px;
    font-size: min(62px, 62 * var(--calc-ratio));
}

.info .analysis .d8 .item span {
    font-size: 46px;
    font-size: min(46px, 46 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .info .analysis .d1 .note {
        top: 15%;
        left: 5%;
        font-size: 11px;
        font-size: max(11px, 11 * var(--calc-ratio-sp));
    }

    .info .analysis .d6 .note {
        top: 10%;
        left: 5%;
        font-size: 11px;
        font-size: max(11px, 11 * var(--calc-ratio-sp));
    }

    .info .analysis .d7 .note {
        top: 35%;
        left: 37%;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .info .analysis .d3 img {
        top: 8%;
        right: 3%;
        width: 60%;
    }

    .info .analysis .d3 .number span {
        font-size: 24px;
        font-size: max(24px, 24 * var(--calc-ratio-sp));
    }

    .info .analysis .d8 .item span {
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
    }
}

/* 情報 - 消防団応援の店/企業 */
/*********************************/
.info .support {
    display: flex;
}

.info .support .note2 {
    margin-top: 71px;
    margin-top: min(71px, 71 * var(--calc-ratio));
    width: 630px;
    width: min(630px, 630 * var(--calc-ratio));
    line-height: 2.5;
    text-align: justify;
}

.info .support button {
    margin-top: 70px;
    margin-top: min(70px, 70 * var(--calc-ratio));
    padding: 19px 0;
    padding: min(19px, 19 * var(--calc-ratio)) 0;
    width: 286px;
    width: min(286px, 286 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-info);
    background: #FFFFFF;
    border: none;
    border-radius: 29px;
}

.info .support button::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 10%;
    width: 27.5px;
    width: min(27.5px, 27.5 * var(--calc-ratio));
    border: 2.5px var(--color-info) dotted;
    border: min(2.5px, 2.5 * var(--calc-ratio)) var(--color-info) dotted;
}

.info .support button:hover {
    color: #FFFFFF;
    background: var(--color-info);
    outline: 1px #FFFFFF solid;
    outline: min(1px, 1 * var(--calc-ratio)) #FFFFFF solid;
    outline-offset: -1px;
    outline-offset: max(-1px, -1 * var(--calc-ratio));
}

.info .support button:hover::after {
    border: 2.5px #FFFFFF dotted;
    border: min(2.5px, 2.5 * var(--calc-ratio)) #FFFFFF dotted;
}

.info .support .photo {
    flex-grow: 1;
    padding-left: 0;
}

.info .support .photo img:first-child {
    display: flex;
    width: 370px;
    width: min(370px, 370 * var(--calc-ratio));
    margin-left: 50px;
    margin-left: min(50px, 50 * var(--calc-ratio));
    justify-content: flex-end;
}

.info .support .photo img:nth-child(2) {
    display: flex;
    width: 330px;
    width: min(330px, 330 * var(--calc-ratio));
    margin-left: auto;
    margin-top: -80px;
    margin-top: min(-80px, -80 * var(--calc-ratio));
    justify-content: flex-end;
}

.info .support .photo img:last-child {
    position: absolute;
    bottom: 0px;
    left: 50px;
    left: min(50px, 50 * var(--calc-ratio));
    width: 260px;
    width: min(260px, 260 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .info .support {
        display: block;
    }

    .info .support .note2 {
        margin-top: 28px;
        margin-top: max(28px, 28 * var(--calc-ratio-sp));
        width: 100%;
        line-height: 2.6;
    }

    .info .support button {
        margin-top: 36px;
        margin-top: max(36px, 36 * var(--calc-ratio-sp));
        padding: 11px 0;
        padding: max(11px, 11 * var(--calc-ratio-sp)) 0;
        width: 200px;
        width: max(200px, 200 * var(--calc-ratio-sp));
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
    }

    .info .support button::after {
        top: 45%;
        right: 10%;
        width: 16px;
        width: max(16px, 16 * var(--calc-ratio-sp));
        border: 2px var(--color-info) dotted;
        border: max(2px, 2 * var(--calc-ratio-sp)) var(--color-info) dotted;
    }

    .info .support .photo {
        margin-top: 38px;
        margin-top: max(38px, 38 * var(--calc-ratio-sp));
        margin-bottom: -24px;
        margin-bottom: min(-24px, -24 * var(--calc-ratio-sp));
        width: 100%;
    }

    .info .support .photo img:first-child {
        display: block;
        width: 50vw;
        max-width: 50vw;
        margin: auto;
        margin-left: 0px;
    }

    .info .support .photo img:nth-child(2) {
        display: block;
        left: auto;
        bottom: 60px;
        width: 35vw;
        max-width: 35vw;
        margin-left: auto;
        margin-top: auto;
    }

    .info .support .photo img:last-child {
        margin-left: -16px;
        margin-left: min(-16px, -16 * var(--calc-ratio-sp));
        width: 29vw;
        max-width: 31vw;
        bottom: 10px;
        left: 9vw;
    }
}

/**********************************************************************/
/* インタビュー */
/**********************************************************************/
.interview {
    margin-top: 207px;
    margin-top: min(207px, 207 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.6;
    color: #FFFFFF;
}

.interview>p {
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    transform: rotate(90deg) translateY(-100%);
    font-size: 200px;
    font-size: min(200px, 200 * var(--calc-ratio));
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    color: var(--color-interview);
    line-height: 1;
}

.interview>div {
    display: block;
    padding: 110px 155px 148px 100px;
    padding-top: min(110px, 110 * var(--calc-ratio));
    padding-right: min(155px, 155 * var(--calc-ratio));
    padding-bottom: min(148px, 148 * var(--calc-ratio));
    padding-left: min(155px, 155 * var(--calc-ratio));
    max-width: calc(1730px - 155px - 100px);
    margin-left: calc(100% - 1730px);
    background-color: var(--color-interview);
    border-radius: 70px 0 0 70px;
}

@media screen and (max-width:1920px) {
    .interview>div {
        --calc-base: min(1730px, 1730 * var(--calc-ratio));
        margin-left: calc(100% - var(--calc-base));
    }
}

.interview .title {
    width: 743px;
    padding: 18px 0;
    font-size: 43px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
    border: 1px #FFFFFF solid;
}

.interview .desc {
    margin-top: 46px;
    margin-top: min(46px, 46 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.8;
}

@media screen and (max-width:860px) {
    .interview {
        margin-top: 111px;
        margin-top: max(111px, 111 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }

    .interview>p {
        left: 0;
        top: 0;
        font-size: 37px;
        font-size: max(37px, 37 * var(--calc-ratio-sp));
    }

    .interview>div {
        padding: 33px 8vw 64px 6.6vw;
        padding-top: max(33px, 33 * var(--calc-ratio-sp));
        padding-bottom: max(64px, 64 * var(--calc-ratio-sp));
        margin-left: 10vw;
        max-width: calc(90vw - 8vw - 6.6vw);
        border-radius: 20px 0 0 20px;
        border-radius: max(20px, 20 * var(--calc-ratio-sp)) 0 0 max(20px, 20 * var(--calc-ratio-sp));
    }

    .interview .title {
        padding: 11px 0;
        padding: max(11px, 11 * var(--calc-ratio-sp)) 0;
        width: 100%;
        font-size: 19px;
        font-size: max(19px, 19 * var(--calc-ratio-sp));
    }

    .interview .desc {
        margin-top: 24px;
        margin-top: max(24px, 24 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }
}

/* インタビュー - ケース外枠 */
/*********************************/
.interview .case {
    margin-top: 180px;
    margin-top: min(180px, 180 * var(--calc-ratio));
}

.interview .case:nth-child(3) {
    margin-top: 149px;
    margin-top: min(149px, 149 * var(--calc-ratio));
}

.interview .case .head {
    display: flex;
}

.interview .case .head .number {
    display: flex;
    position: relative;
    top: -8px;
    top: max(-8px, -8 * var(--calc-ratio));
    font-size: 130px;
    font-size: min(130px, 130 * var(--calc-ratio));
    font-weight: bold;
    letter-spacing: -0.05em;
    justify-content: center;
}

.interview .case .head .name {
    display: flex;
    margin-left: 30px;
    margin-left: min(30px, 30 * var(--calc-ratio));
    width: 485px;
    width: min(485px, 485 * var(--calc-ratio));
    font-size: 30px;
    font-size: min(30px, 30 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.8;
    align-items: center;
}

.interview .case .head .work {
    width: 571px;
    width: min(571px, 571 * var(--calc-ratio));
    padding: 17px 0 17px 71px;
    padding-top: min(17px, 17 * var(--calc-ratio));
    padding-bottom: min(17px, 17 * var(--calc-ratio));
    padding-left: min(71px, 71 * var(--calc-ratio));
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.0;
    border-top: 1px #FFFFFF solid;
    border-top: min(1px, 1 * var(--calc-ratio)) #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    border-bottom: min(1px, 1 * var(--calc-ratio)) #FFFFFF solid;
}

.interview .case .head .work a.pc-only {
    display: inline;
}

.interview .case .head .work a.sp {
    color: #FFFFFF;
    pointer-events: none;
}

.interview .case .head .work img {
    margin-left: 39px;
    margin-left: min(39px, 39 * var(--calc-ratio));
    width: 152px;
    width: min(152px, 152 * var(--calc-ratio));
    position: relative;
    top: -2px;
    top: max(-2px, -2 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .interview .case {
        margin-top: 70px;
        margin-top: max(70px, 70 * var(--calc-ratio-sp));
    }

    .interview .case:nth-child(3) {
        margin-top: 82px;
        margin-top: max(82px, 82 * var(--calc-ratio-sp));
    }

    .interview .case .head {
        flex-wrap: wrap;
    }

    .interview .case .head .number {
        font-size: 60px;
        font-size: max(60px, 60 * var(--calc-ratio-sp));
        position: relative;
        top: 0;
    }

    .interview .case .head .name {
        margin-left: 15px;
        margin-left: max(15px, 15 * var(--calc-ratio-sp));
        width: auto;
        font-size: 18px;
        font-size: max(18px, 18 * var(--calc-ratio-sp));
        line-height: 1.9;
    }

    .interview .case .head .work {
        margin-top: 35px;
        margin-top: max(35px, 35 * var(--calc-ratio-sp));
        padding: 15px 0;
        padding: max(15px, 15 * var(--calc-ratio-sp)) 0;
        width: 100%;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.3;
    }

    .interview .case .head .work a.sp {
        color: #FFFFFF;
        pointer-events: auto;
    }

    .interview .case .head .work a.sp::after {
        content: "";
        display: inline-block;
        width: 1.25em;
        height: 1.25em;
        background-image: url(../image/link-arrow.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        top: 5px;
        top: max(5px, 5 * var(--calc-ratio-sp));
        left: 3px;
        left: max(3px, 3 * var(--calc-ratio-sp));
    }

    .interview .case .head .work img {
        margin-left: 4px;
        margin-left: max(4px, 4 * var(--calc-ratio-sp));
        width: 94px;
        width: max(94px, 94 * var(--calc-ratio-sp));
        left: 6px;
        left: max(6px, 6 * var(--calc-ratio-sp));
        top: -2px;
        top: max(-2px, -2 * var(--calc-ratio-sp));
    }
}

/* インタビュー - ケース内容 */
/*********************************/
.interview .case .contents {
    display: flex;
    margin-top: 69px;
    margin-top: min(69px, 69 * var(--calc-ratio));
}

.interview .case .contents>div {
    width: 50% !important;
}

.interview .case .contents div {
    width: 615px;
    width: min(615px, 615 * var(--calc-ratio));
}

.interview .case .contents>div:first-child {
    margin-right: 41px;
    margin-right: min(41px, 41 * var(--calc-ratio));
    flex-basis: 615px;
    flex-basis: min(615px, 615 * var(--calc-ratio));
}

.interview .case .contents>div:last-child {
    flex-grow: 1;
}

.interview .case .contents .q {
    padding: 15px 0 15px 23px;
    padding-top: min(15px, 15 * var(--calc-ratio));
    padding-bottom: min(15px, 15 * var(--calc-ratio));
    padding-left: min(23px, 23 * var(--calc-ratio));
    width: 615px;
    width: min(615px, 615 * var(--calc-ratio));
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: 600;
    letter-spacing: 0;
    background: var(--color-active);
}

.interview .case .contents .q-margin {
    margin-top: 32px;
    margin-top: min(32px, 32 * var(--calc-ratio));
}

.interview .case .contents .q-margin.q12 {
    margin-top: 50px;
    margin-top: min(50px, 50 * var(--calc-ratio));
}

.interview .case .contents .a {
    margin-top: 35px;
    margin-top: min(35px, 35 * var(--calc-ratio));
    margin-bottom: 32px;
    margin-bottom: min(32px, 32 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.2;
    text-align: justify;
}

.interview .case .contents .head {
    margin: 18px auto;
    margin: min(18px, 18 * var(--calc-ratio)) auto;
    font-family: var(--font-family-primary);
    font-size: 35px;
    font-size: min(35px, 35 * var(--calc-ratio));
    font-weight: normal;
    line-height: 2.5;
    justify-content: center;
}

.interview .case .contents .img-case1-pc,
.interview .case .contents .img-case3-pc {
    display: flex;
    margin-top: 30px;
    margin-top: min(30px, 30 * var(--calc-ratio));
    width: 100%;
    justify-content: space-between;
}

.interview .case .contents .img-case1-sp,
.interview .case .contents .img-case3-sp {
    display: none;
}

.interview .case .contents .img-case1-pc img:first-child {
    width: 57%;
}

.interview .case .contents .img-case1-pc img:last-child {
    width: 38%;
}

.interview .case .contents .img-case3-pc img {
    width: 50%;
}

@media screen and (min-width:860px) {
    .interview .case .contents div:not(:first-child) {
        flex: 1;
    }
}

@media screen and (max-width:860px) {
    .interview .case .contents {
        display: block;
        margin-top: 35px;
        margin-top: max(35px, 35 * var(--calc-ratio-sp));
    }

    .interview .case .contents>div {
        width: 100% !important;
    }

    .interview .case .contents div {
        width: 100%;
    }

    .interview .case .contents>div:first-child {
        margin-right: 0;
    }

    .interview .case .contents .q {
        padding: 9px;
        padding: max(9px, 9 * var(--calc-ratio-sp));
        padding-right: 0;
        width: 100%;
        font-size: 17px;
        font-size: max(17px, 17 * var(--calc-ratio-sp));
        line-height: 1.7;
    }

    .interview .case .contents .q-margin {
        margin-top: 0;
    }

    .interview .case .contents .q-img {
        margin-bottom: 30px;
        margin-bottom: max(30px, 30 * var(--calc-ratio-sp));
    }

    .interview .case .contents .a {
        margin-top: 20px;
        margin-top: max(20px, 20 * var(--calc-ratio-sp));
        margin-bottom: 40px;
        margin-bottom: max(40px, 40 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }

    .interview .case .contents .head {
        margin: 16px auto;
        margin: max(16px, 16 * var(--calc-ratio-sp)) 0;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
        line-height: 2.25;
    }

    .interview .case .contents .case-sp {
        display: flex;
        flex-wrap: wrap;
    }

    .interview .case .contents .case-sp>* {
        order: 2;
    }

    .interview .case .contents .case-sp img {
        order: 1;
    }

    .interview .case .contents .img-case1-pc,
    .interview .case .contents .img-case3-pc {
        display: none;
    }

    .interview .case .contents .img-case2-sp {
        margin-left: -6.6vw;
        width: 90vw;
        max-width: 90vw;
    }

    .interview .case .contents .img-case1-sp,
    .interview .case .contents .img-case3-sp {
        display: flex;
        margin-top: 30px;
        margin-top: max(30px, 30 * var(--calc-ratio-sp));
        margin-left: -6.6vw;
        width: 90vw !important;
        justify-content: space-between;
    }

    .interview .case .contents .img-case1-sp img:first-child {
        width: 199px;
        width: max(199px, 199 * var(--calc-ratio-sp));
    }

    .interview .case .contents .img-case1-sp img:last-child {
        width: 135px;
        width: max(135px, 135 * var(--calc-ratio-sp));
    }

    .interview .case .contents .img-case3-sp img {
        width: 50%;
    }
}

/**********************************************************************/
/* 第三の場所 */
/**********************************************************************/
.third-place {
    margin-top: 247px;
    margin-top: min(247px, 247 * var(--calc-ratio));
    width: 100%;
    height: 550px;
    height: min(550px, 550 * var(--calc-ratio));
    background-image:
        linear-gradient(rgba(78, 78, 78, 0.49), rgba(78, 78, 78, 0.49)),
        url(../image/third-place.webp);
    background-size: cover;
    background-position: 0 38%;
}

.third-place p {
    position: absolute;
    margin: auto;
    width: fit-content;
    height: fit-content;
    inset: 0;
    font-size: 40px;
    font-size: min(40px, 40 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
    line-height: 1.75;
    color: #FFFFFF;
}

.third-place p span {
    font-family: var(--font-family-primary);
    font-size: 55px;
    font-size: min(55px, 55 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .third-place {
        margin-top: 120px;
        margin-top: max(120px, 120 * var(--calc-ratio-sp));
        height: 237px;
        height: max(237px, 237 * var(--calc-ratio-sp));
    }

    .third-place p {
        font-size: 16px;
        font-size: max(16px, 16 * var(--calc-ratio-sp));
        line-height: 1.8;
    }

    .third-place p span {
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* Q&A */
/**********************************************************************/
.faq {
    margin-top: 186px;
    margin-top: min(186px, 186 * var(--calc-ratio));
}

.faq>p {
    text-align: center;
}

.faq>p:first-child {
    font-size: 200px;
    font-size: min(200px, 200 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
}

.faq>p:first-child span {
    font-size: 160px;
    font-size: min(160px, 160 * var(--calc-ratio));
}

.faq>p:nth-child(2) {
    display: block;
    margin: 43px auto 0;
    margin-top: min(43px, 43 * var(--calc-ratio));
    padding: 11px 0;
    padding: min(11px, 11 * var(--calc-ratio)) 0;
    width: 419px;
    width: min(419px, 419 * var(--calc-ratio));
    font-size: 35px;
    font-size: min(35px, 35 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
    background-color: var(--color-text);
}

.faq>div {
    margin: 55px auto 0;
    margin-top: min(55px, 55 * var(--calc-ratio));
    width: 100%;
    text-align: center;
}

.faq .box {
    display: inline-block;
    margin-top: 94px;
    margin-top: min(94px, 94 * var(--calc-ratio));
    width: 700px;
    width: min(700px, 700 * var(--calc-ratio));
    text-align: left;
    vertical-align: top;
}

.faq .box:nth-child(odd) {
    margin-right: 25px;
    margin-right: min(25px, 25 * var(--calc-ratio));
}

.faq .box:nth-child(even) {
    margin-left: 25px;
    margin-left: min(25px, 25 * var(--calc-ratio));
}

.faq .box img {
    position: absolute;
    top: -60px;
    top: max(-60px, -60 * var(--calc-ratio));
    left: 35px;
    left: min(35px, 35 * var(--calc-ratio));
    width: 201px;
    width: min(201px, 201 * var(--calc-ratio));
    z-index: 1;
}

.faq .box .q {
    padding: 38px 0 27px 55px;
    padding-top: min(38px, 38 * var(--calc-ratio));
    padding-bottom: min(27px, 27 * var(--calc-ratio));
    padding-left: min(55px, 55 * var(--calc-ratio));
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(#003366 0%, #1a5276 100%);
    border-radius: 10px 10px 0 0;
    border-radius: min(10px, 10 * var(--calc-ratio)) min(10px, 10 * var(--calc-ratio)) 0 0;
}

.faq .box .a {
    display: flex;
    align-items: center;
    padding: 24px 49px;
    padding: min(24px, 24 * var(--calc-ratio)) min(49px, 49 * var(--calc-ratio));
    min-height: 192px;
    min-height: min(192px, 192 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.2;
    text-align: justify;
    border: 0.5px var(--color-info) solid;
    border: min(0.5px, 0.5 * var(--calc-ratio)) var(--color-info) solid;
    border-radius: 0 0 10px 10px;
    border-radius: 0 0 min(10px, 10 * var(--calc-ratio)) min(10px, 10 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .faq {
        margin-top: 108px;
        margin-top: max(108px, 108 * var(--calc-ratio-sp));
    }

    .faq>p:first-child {
        font-size: 58px;
        font-size: max(58px, 58 * var(--calc-ratio-sp));
    }

    .faq>p:first-child span {
        font-size: 46px;
        font-size: max(46px, 46 * var(--calc-ratio-sp));
    }

    .faq>p:nth-child(2) {
        margin-top: 15px;
        margin-top: max(15px, 15 * var(--calc-ratio-sp));
        padding: 8px 0;
        padding: max(8px, 8 * var(--calc-ratio-sp)) 0;
        width: 68vw;
        font-size: 20px;
        font-size: max(20px, 20 * var(--calc-ratio-sp));
    }

    .faq>div {
        margin-top: 98px;
        margin-top: max(98px, 98 * var(--calc-ratio-sp));
    }

    .faq .box {
        display: block;
        margin-top: 52px;
        margin-top: max(52px, 52 * var(--calc-ratio-sp));
        margin-right: auto;
        margin-left: auto;
        width: 92vw;
    }

    .faq .box:nth-child(odd) {
        margin-right: auto;
    }

    .faq .box:nth-child(even) {
        margin-left: auto;
    }

    .faq .box img {
        position: absolute;
        top: -33px;
        top: min(-33px, -33 * var(--calc-ratio-sp));
        left: 24px;
        left: max(24px, 24 * var(--calc-ratio-sp));
        width: 28vw;
        z-index: 1;
    }

    .faq .box .q {
        padding: 16px 0 16px 45px;
        padding: max(16px, 16 * var(--calc-ratio-sp)) 0 max(16px, 16 * var(--calc-ratio-sp)) max(45px, 45 * var(--calc-ratio-sp));
        font-size: 17px;
        font-size: max(17px, 17 * var(--calc-ratio-sp));
        line-height: 1.9;
        border-radius: max(5px, 5 * var(--calc-ratio-sp)) max(5px, 5 * var(--calc-ratio-sp)) 0 0;
    }

    .faq .box .a {
        padding: 22px 15px;
        padding: max(22px, 22 * var(--calc-ratio-sp)) max(15px, 15 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
        border-radius: 0 0 max(5px, 5 * var(--calc-ratio-sp)) max(5px, 5 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 多度津 */
/**********************************************************************/
.tadotsu {
    display: flex;
    margin-top: 184px;
    margin-top: min(184px, 184 * var(--calc-ratio));
    padding: 116px 350px;
    padding: min(116px, 116 * var(--calc-ratio)) min(350px, 350 * var(--calc-ratio));
    background-image: url(../image/tadotsu-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    justify-content: space-between;
}

.tadotsu .slide {
    display: inline-block;
    width: 563px;
    width: min(563px, 563 * var(--calc-ratio));
}

.tadotsu .position-small {
    margin: 15px;
    margin: min(15px, 15 * var(--calc-ratio));
    padding: 10px;
    padding: min(10px, 10 * var(--calc-ratio));
}

.tadotsu .slide svg {
    width: 14px;
    width: min(14px, 14 * var(--calc-ratio));
    color: var(--color-text);
}

.tadotsu .slidelist {
    list-style: none;
    display: inline-block;
    display: flex;
}

.tadotsu .slidelist img {
    margin: 0 4px;
    margin: 0 min(4px, 4 * var(--calc-ratio));
    height: 74px;
    height: min(74px, 74 * var(--calc-ratio));
}

.tadotsu .text {
    display: inline-block;
    width: 560px;
    width: min(560px, 560 * var(--calc-ratio));
    vertical-align: top;
}

.tadotsu .text p:first-child {
    font-size: 45px;
    font-size: min(45px, 45 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.7;
    color: #FFFFFF;
    text-align: left;
}

.tadotsu .text p:first-child span {
    font-family: var(--font-family-primary);
    font-size: 55px;
    font-size: min(55px, 55 * var(--calc-ratio));
    font-weight: 400;
    font-weight: bolder;
}

.tadotsu .text rt {
    font-family: var(--font-family-primary);
}

.tadotsu .text p:last-child {
    margin-top: 44px;
    width: 526px;
    width: min(526px, 526 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.6;
    text-align: justify;
    color: #FFFFFF;
}

@media screen and (max-width:860px) {
    .tadotsu {
        margin-top: 115px;
        margin-top: max(115px, 115 * var(--calc-ratio-sp));
        padding: 51px 0 55px;
        padding-top: max(51px, 51 * var(--calc-ratio-sp));
        padding-bottom: max(55px, 55 * var(--calc-ratio-sp));
        flex-direction: column;
    }

    .tadotsu .slide {
        display: block;
        margin: 0 auto;
        padding-right: 0;
        width: 78vw;
    }

    .tadotsu .position-small {
        margin: 7px;
        margin: max(7px, 7 * var(--calc-ratio-sp));
        padding: 10px;
        padding: max(10px, 10 * var(--calc-ratio-sp));
    }

    .tadotsu .slide svg {
        width: 14px;
        width: max(14px, 14 * var(--calc-ratio-sp));
    }

    .tadotsu .slidelist img {
        margin: 0 0;
        height: 41px;
        height: max(41px, 41 * var(--calc-ratio-sp));
    }

    .tadotsu .text {
        display: block;
        margin: 24px auto 0;
        margin-top: max(24px, 24 * var(--calc-ratio-sp));
        width: 84vw;
    }

    .tadotsu .text p:first-child {
        font-size: 25px;
        font-size: max(25px, 25 * var(--calc-ratio-sp));
        line-height: 2.2;
    }

    .tadotsu .text p:first-child span {
        font-size: 31px;
        font-size: max(31px, 31 * var(--calc-ratio-sp));
    }

    .tadotsu .text p:last-child {
        margin-top: 24px;
        margin-top: max(24px, 24 * var(--calc-ratio-sp));
        width: 84vw;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 挨拶 */
/**********************************************************************/
.comment {
    display: flex;
    margin-top: 185px;
    margin-top: min(185px, 185 * var(--calc-ratio));
    width: 100%;
    height: 560px;
    height: min(560px, 560 * var(--calc-ratio));
}

.comment>div:first-child {
    display: block;
    flex-shrink: 1;
    padding-top: 70px;
    padding-top: min(70px, 70 * var(--calc-ratio));
    background: #F4F7F2;
}

.comment>div:first-child p {
    margin: auto;
    width: 85%;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 2.6;
    text-align: justify;
}

.comment>div:first-child .signature {
    position: absolute;
    bottom: 40px;
    bottom: min(40px, 40 * var(--calc-ratio));
    left: 425px;
    left: min(425px, 425 * var(--calc-ratio));
    width: 300px;
    width: min(300px, 300 * var(--calc-ratio));
}

.comment>div:first-child .leader {
    position: absolute;
    left: 86%;
    bottom: 0;
    width: 270px;
    width: min(270px, 270 * var(--calc-ratio));
    z-index: 10;
}

.comment>div:last-child {
    width: 50%;
    flex-shrink: 0;
    background-image:
        linear-gradient(rgba(244, 247, 242, 0.77), rgba(244, 247, 242, 0.77)),
        url(../image/comment-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width:860px) {
    .comment {
        margin-top: 104px;
        margin-top: max(104px, 104 * var(--calc-ratio-sp));
        flex-wrap: wrap;
        height: auto;
    }

    .comment>div:first-child {
        padding-top: 36px;
        padding-top: max(36px, 36 * var(--calc-ratio-sp));
        padding-bottom: 129px;
        padding-bottom: max(129px, 129 * var(--calc-ratio-sp));
        order: 2;
    }

    .comment>div:first-child p {
        margin-right: 30px;
        margin-right: max(30px, 30 * var(--calc-ratio-sp));
        margin-left: 30px;
        margin-left: max(30px, 30 * var(--calc-ratio-sp));
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
    }

    .comment>div:first-child .signature {
        bottom: 33px;
        bottom: max(33px, 33 * var(--calc-ratio-sp));
        left: 48%;
        width: 180px;
        width: max(180px, 180 * var(--calc-ratio-sp));
    }

    .comment>div:first-child .leader {
        position: relative;
        float: right;
        left: auto;
        bottom: auto;
        margin-top: -80px;
        margin-top: min(-80px, -80 * var(--calc-ratio-sp));
        margin-left: 20px;
        margin-left: max(20px, 20 * var(--calc-ratio-sp));
        width: 158px;
        width: max(158px, 158 * var(--calc-ratio-sp));
    }

    .comment>div:last-child {
        width: 100vw;
        height: 240px;
        height: max(240px, 240 * var(--calc-ratio-sp));
        order: 1;
    }
}


/**********************************************************************/
/* スライド */
/**********************************************************************/
.slider {
    margin-top: 174px;
    margin-top: min(174px, 174 * var(--calc-ratio));
}

.slider img {
    margin: 0 20px;
    margin: 0 min(20px, 20 * var(--calc-ratio));
    width: 800px;
    width: min(800px, 800 * var(--calc-ratio));
}

@media screen and (max-width:860px) {
    .slider {
        margin-top: 84px;
        margin-top: max(84px, 84 * var(--calc-ratio-sp));
    }

    .slider img {
        margin: 0 15px;
        margin: 0 max(15px, 15 * var(--calc-ratio-sp));
        width: 79vw;
    }
}

/**********************************************************************/
/* お問い合わせ */
/**********************************************************************/
.contact {
    display: block;
    margin-top: 204px;
    margin-top: min(204px, 204 * var(--calc-ratio));
    padding-left: 0;
}

.contact-main {
    display: flex;
    padding-left: 360px;
    padding-left: min(360px, 360 * var(--calc-ratio));
}

.cta-band {
    width: 100%;
    margin-bottom: 120px;
    margin-bottom: min(120px, 120 * var(--calc-ratio));
    padding: 80px 360px 88px;
    padding: min(80px, 80 * var(--calc-ratio)) min(360px, 360 * var(--calc-ratio)) min(88px, 88 * var(--calc-ratio));
    background: linear-gradient(135deg, #002244 0%, var(--color-active) 55%, var(--color-info) 100%);
    color: #FFFFFF;
    box-sizing: border-box;
}

.cta-band__label {
    margin: 0 0 16px;
    font-size: 16px;
    font-size: min(16px, 16 * var(--calc-ratio));
    font-weight: 400;
    letter-spacing: 0.2em;
    opacity: 0.85;
}

.cta-band__title {
    margin: 0 0 48px;
    margin-bottom: min(48px, 48 * var(--calc-ratio));
    font-size: 42px;
    font-size: min(42px, 42 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.55;
}

.cta-band__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    gap: min(20px, 20 * var(--calc-ratio));
    margin-bottom: 20px;
    margin-bottom: min(20px, 20 * var(--calc-ratio));
}

.cta-band__cards--wide {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 40px;
    margin-bottom: min(40px, 40 * var(--calc-ratio));
}

.cta-band__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 148px;
    min-height: min(148px, 148 * var(--calc-ratio));
    padding: 24px 28px;
    padding: min(24px, 24 * var(--calc-ratio)) min(28px, 28 * var(--calc-ratio));
    background: #FFFFFF;
    border-radius: 8px;
    color: var(--color-text);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-band__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    color: var(--color-text);
}

.cta-band__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    width: min(44px, 44 * var(--calc-ratio));
    height: 44px;
    height: min(44px, 44 * var(--calc-ratio));
    border-radius: 50%;
    background: var(--color-active);
    color: #FFFFFF;
    font-size: 18px;
    font-size: min(18px, 18 * var(--calc-ratio));
    font-weight: 400;
}

.cta-band__card-title {
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-active);
}

.cta-band__card-desc {
    font-size: 14px;
    font-size: min(14px, 14 * var(--calc-ratio));
    font-weight: 500;
    line-height: 1.7;
    color: #444444;
}

.cta-band__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 420px;
    min-width: min(420px, 420 * var(--calc-ratio));
    padding: 22px 48px;
    padding: min(22px, 22 * var(--calc-ratio)) min(48px, 48 * var(--calc-ratio));
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    font-weight: 400;
    color: var(--color-active);
    transition: background 0.2s, transform 0.2s;
}

.cta-band__button:hover {
    background: #eef3f8;
    transform: translateY(-2px);
    color: var(--color-active);
}

.contact .outline {
    width: 416px;
    width: min(416px, 416 * var(--calc-ratio));
}

.contact .outline .title {
    font-size: 55px;
    font-size: min(55px, 55 * var(--calc-ratio));
    font-weight: 400;
    line-height: 1.6;
}

.contact .outline .desc {
    margin-top: 74px;
    margin-top: min(74px, 74 * var(--calc-ratio));
    width: 361px;
    width: min(361px, 361 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 3.0;
    text-align: justify;
}

.contact .outline .box {
    margin-top: 59px;
    margin-top: min(59px, 59 * var(--calc-ratio));
    width: 100%;
    min-height: 134px;
    min-height: min(134px, 134 * var(--calc-ratio));
    border: 1px var(--color-active) solid;
    border: min(1px, 1 * var(--calc-ratio)) var(--color-active) solid;
}

.contact .outline .name {
    margin-top: 25px;
    margin-top: min(25px, 25 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 400;
    text-align: center;
}

.contact .outline .tel {
    margin-top: 24px;
    margin-top: min(24px, 24 * var(--calc-ratio));
    font-size: 38px;
    font-size: min(38px, 38 * var(--calc-ratio));
    font-weight: 600;
    text-align: center;
    color: var(--color-active);
}

.contact .outline .tel img {
    margin-right: 15px;
    margin-right: min(15px, 15 * var(--calc-ratio));
    width: 28px;
    width: min(28px, 28 * var(--calc-ratio));
    vertical-align: middle;
}

@media screen and (max-width:860px) {
    .contact {
        display: block;
        margin-top: 64px;
        margin-top: max(64px, 64 * var(--calc-ratio-sp));
        padding-left: 0;
        padding-right: 0;
    }

    .contact-main {
        display: block;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .cta-band {
        margin-bottom: 48px;
        padding: 40px 4vw;
    }

    .cta-band__title {
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        margin-bottom: 24px;
    }

    .cta-band__cards,
    .cta-band__cards--wide {
        grid-template-columns: 1fr;
    }

    .cta-band__button {
        width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .contact .outline {
        display: block;
        width: 84vw;
        margin: 0 0;
    }

    .contact .outline .title {
        margin-left: 4vw;
        font-size: 22px;
        font-size: max(22px, 22 * var(--calc-ratio-sp));
        line-height: 2.2;
    }

    .contact .outline .desc {
        margin-top: 12px;
        margin-top: max(12px, 12 * var(--calc-ratio-sp));
        margin-left: 4vw;
        width: 100%;
        font-size: 15px;
        font-size: max(15px, 15 * var(--calc-ratio-sp));
        line-height: 2.6;
    }

    .contact .outline .box {
        margin-top: 40px;
        margin-top: max(40px, 40 * var(--calc-ratio-sp));
        margin-right: 4vw;
        margin-left: 4vw;
        min-height: 98px;
        min-height: max(98px, 98 * var(--calc-ratio-sp));
    }

    .contact .outline .name {
        margin-top: 20px;
        margin-top: max(20px, 20 * var(--calc-ratio-sp));
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
    }

    .contact .outline .tel {
        margin-top: 16px;
        margin-top: max(16px, 16 * var(--calc-ratio-sp));
        font-size: 32px;
        font-size: max(32px, 32 * var(--calc-ratio-sp));
        font-weight: 800;
    }

    .contact .outline .tel img {
        margin-right: 5px;
        margin-right: max(5px, 5 * var(--calc-ratio-sp));
        width: 20px;
        width: max(20px, 20 * var(--calc-ratio-sp));
    }
}

/* お問い合わせ - 入力フォーム */
/*********************************/
.contact .input {
    display: flex;
    margin-left: 94px;
    margin-left: min(94px, 94 * var(--calc-ratio));
    vertical-align: top;
}

.contact .input form {
    display: inline-block;
    padding: 61px 55px;
    padding: min(61px, 61 * var(--calc-ratio)) min(55px, 55 * var(--calc-ratio));
    width: 611px;
    width: min(611px, 611 * var(--calc-ratio));
    font-size: 22px;
    font-size: min(22px, 22 * var(--calc-ratio));
    background: #F8F8F8;
}

.contact .input form>div:nth-child(n+2) {
    margin-top: 10px;
    margin-top: min(10px, 10 * var(--calc-ratio));
}

.contact .input .check-adjust {
    margin-left: 108px;
    margin-left: min(108px, 108 * var(--calc-ratio));
    margin-right: 10px;
    margin-right: min(10px, 10 * var(--calc-ratio));
}

.contact .input form button {
    display: block;
    padding: 18px 0;
    padding: min(18px, 18 * var(--calc-ratio)) 0;
    margin: 53px auto 0;
    margin-top: min(53px, 53 * var(--calc-ratio));
    width: 341px;
    width: min(341px, 341 * var(--calc-ratio));
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 300;
    text-align: center;
    color: #FFFFFF;
    background: var(--color-active);
    border: none;
    border-radius: 14px;
    border-radius: min(14px, 14 * var(--calc-ratio));
}

.contact .input form button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -50px;
    right: max(-50px, -50 * var(--calc-ratio));
    transform: translateY(-50%);
    width: 100px;
    width: min(100px, 100 * var(--calc-ratio));
    height: 1px;
    background: var(--color-info);
}

.contact .input form button::before {
    content: "";
    position: absolute;
    top: 40%;
    right: -50px;
    right: max(-50px, -50 * var(--calc-ratio));
    transform: translateY(-50%) rotate(30deg);
    width: 22px;
    width: min(22px, 22 * var(--calc-ratio));
    height: 1px;
    background: var(--color-info);
}

.contact .input form button-contact {
    background: #E6D82C;
}

/* データ属性による制御 */
.contact .input form button[data-type="contact"]::after,
.contact .input form button[data-type="contact"]::before {
    background: #FFEB00;
}

.contact .input .form-type-tab {
    display: inline-block;
    width: 65px;
    width: min(65px, 65 * var(--calc-ratio));
    vertical-align: top;
}

.contact .input .form-type-tab p {
    font-size: 25px;
    font-size: min(25px, 25 * var(--calc-ratio));
    font-weight: 300;
    color: #FFFFFF;
    text-align: center;
    border-radius: 0 20px 0 0;
    border-radius: 0 min(20px, 20 * var(--calc-ratio)) 0 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
}

.contact .input .form-type-tab a:first-child p {
    padding: 45px 21px;
    padding: min(45px, 45 * var(--calc-ratio)) min(21px, 21 * var(--calc-ratio));
    background: var(--color-active);
}

.contact .input .form-type-tab a:last-child p {
    padding: 21px;
    padding: min(21px, 21 * var(--calc-ratio));
    margin-top: 43px;
    margin-top: min(43px, 43 * var(--calc-ratio));
    background: #E6D82C;
}

@media screen and (max-width:860px) {
    .contact .input {
        display: flex;
        margin-top: 38px;
        margin-top: max(38px, 38 * var(--calc-ratio-sp));
        margin-left: 0;
        width: 100%;
    }

    .contact .input form {
        padding: 35px 4vw;
        padding: max(35px, 35 * var(--calc-ratio-sp)) 4vw;
        width: 75.7vw;
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
    }

    .contact .input form * {
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
    }

    .contact .input form>div:nth-child(n+2) {
        margin-top: 10px;
        margin-top: max(10px, 10 * var(--calc-ratio-sp));
    }

    .contact .input .check-adjust {
        margin-left: 0;
        margin-right: 10px;
        margin-right: max(10px, 10 * var(--calc-ratio-sp));
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
    }

    .contact .input form button {
        padding: 11px 0;
        padding: max(11px, 11 * var(--calc-ratio-sp)) 0;
        margin: 53px auto 0;
        margin-top: max(53px, 53 * var(--calc-ratio-sp));
        width: 230px;
        width: max(230px, 230 * var(--calc-ratio-sp));
        font-size: 13px;
        font-size: max(13px, 13 * var(--calc-ratio-sp));
        border-radius: 14px;
        border-radius: max(14px, 14 * var(--calc-ratio-sp));
    }

    .contact .input form button::after {
        top: 47%;
        right: -25px;
        right: min(-25px, -25 * var(--calc-ratio-sp));
        width: 80px;
        width: max(80px, 80 * var(--calc-ratio-sp));
        height: 1px;
        height: max(1px, 1 * var(--calc-ratio-sp));
    }

    .contact .input form button::before {
        top: 32%;
        right: -26px;
        right: min(-26px, -26 * var(--calc-ratio-sp));
        width: 22px;
        width: max(22px, 22 * var(--calc-ratio-sp));
        height: 1px;
        height: max(1px, 1 * var(--calc-ratio-sp));
    }

    .contact .input .form-type-tab {
        width: 27px;
        width: max(27px, 27 * var(--calc-ratio-sp));
    }

    .contact .input .form-type-tab p {
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
        border-radius: 0 10px 0 0;
        border-radius: 0 max(10px, 10 * var(--calc-ratio-sp)) 0 0;
    }

    .contact .input .form-type-tab a:first-child p {
        padding: 23px 8px;
        padding: max(23px, 23 * var(--calc-ratio-sp)) max(8px, 8 * var(--calc-ratio-sp));
    }

    .contact .input .form-type-tab a:last-child p {
        padding: 11px 8px;
        padding: max(11px, 11 * var(--calc-ratio-sp)) max(8px, 8 * var(--calc-ratio-sp));
        margin-top: 21px;
        margin-top: max(21px, 21 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* 関連リンク */
/**********************************************************************/
.related-link {
    margin: 128px 0 0;
    margin-top: min(128px, 128 * var(--calc-ratio));
    padding: 32px 16px;
    padding: min(32px, 32 * var(--calc-ratio)) min(16px, 16 * var(--calc-ratio));
    background-color: #ccd4a4;
}

.related-link>div {
    display: flex;
    margin: auto;
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    align-items: center;
    justify-content: space-evenly;
}

.related-link p:first-child {
    margin-right: 32px;
    margin-right: min(32px, 32 * var(--calc-ratio));
    margin-bottom: 8px;
    margin-bottom: min(8px, 8 * var(--calc-ratio));
    font-size: 32px;
    font-size: min(32px, 32 * var(--calc-ratio));
    font-weight: 400;
    color: #FFFFFF;
}

.related-link p:last-child {
    margin-right: 32px;
    margin-right: min(32px, 32 * var(--calc-ratio));
    font-size: 18px;
    font-size: min(18px, 18 * var(--calc-ratio));
    font-weight: 400;
    color: #FFFFFF;
}

.related-link .hr {
    width: 1px;
    width: min(1px, 1 * var(--calc-ratio));
    height: 64px;
    height: min(64px, 64 * var(--calc-ratio));
    background-color: #FFFFFF;
}

.related-link a {
    display: block;
    width: 320px;
    width: min(320px, 320 * var(--calc-ratio));
    height: 64px;
    height: min(64px, 64 * var(--calc-ratio));
    background: #FFFFFF;
}

.related-link a img {
    padding: 12px;
    padding: min(12px, 12 * var(--calc-ratio));
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width:860px) {
    .related-link {
        margin: 128px 0 0;
        margin-top: max(128px, 128 * var(--calc-ratio-sp));
        padding: 32px 16px;
        padding: max(32px, 32 * var(--calc-ratio-sp)) max(16px, 16 * var(--calc-ratio-sp));
    }

    .related-link>div {
        max-width: 100%;
        flex-direction: column;
    }

    .related-link p:first-child {
        margin-right: 0;
        margin-bottom: 8px;
        margin-bottom: max(8px, 8 * var(--calc-ratio-sp));
        font-size: 26px;
        font-size: max(26px, 26 * var(--calc-ratio-sp));
    }

    .related-link p:last-child {
        margin-right: 0;
        font-size: 14px;
        font-size: max(14px, 14 * var(--calc-ratio-sp));
        text-align: center;
    }

    .related-link .hr {
        margin: 18px 0;
        margin: max(18px, 18 * var(--calc-ratio-sp)) 0;
        width: 75%;
        height: 1px;
        height: max(1px, 1 * var(--calc-ratio-sp));
    }

    .related-link a {
        display: block;
        width: 240px;
        width: max(240px, 240 * var(--calc-ratio-sp));
        max-width: 100%;
        height: 48px;
        height: max(48px, 48 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* フッター */
/**********************************************************************/
footer .index {
    width: 100%;
    height: 330px;
    height: min(330px, 330 * var(--calc-ratio));
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
        url(../image/footer-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 65%;
    background-color: #FFFFFF;
}

footer .index ul {
    max-width: 1200px;
    max-width: min(1200px, 1200 * var(--calc-ratio));
    margin: auto;
    padding: 64px 0;
    padding: min(64px, 64 * var(--calc-ratio)) 0;
}

footer .index ul li {
    display: inline-block;
    padding-left: 10px;
    padding-left: min(10px, 10 * var(--calc-ratio));
    width: 260px;
    width: min(260px, 260 * var(--calc-ratio));
    list-style: none;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    font-weight: 500;
    line-height: 5.0;
}

footer .index ul .short {
    width: 150px;
    width: min(150px, 150 * var(--calc-ratio));
}

footer .index ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 1em;
    border-left: 2px solid var(--color-text);
    border-left: min(2px, 2 * var(--calc-ratio)) solid var(--color-text);
}

footer .copy {
    padding: 8px 0;
    padding: min(8px, 8 * var(--calc-ratio)) 0;
    font-size: 16px;
    font-size: min(16px, 16 * var(--calc-ratio));
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    background-color: var(--color-active);
}

@media screen and (max-width:860px) {
    footer .index {
        height: 204px;
        height: max(204px, 204 * var(--calc-ratio-sp));
        background-position: 50% 100%;
    }

    footer .index ul {
        margin: auto;
        padding: 30px 15px;
        padding: max(30px, 30 * var(--calc-ratio-sp)) max(15px, 15 * var(--calc-ratio-sp));
        max-width: 100%;
    }

    footer .index ul li {
        position: relative;
        left: 22px;
        left: max(22px, 22 * var(--calc-ratio-sp));
        width: 160px;
        width: max(160px, 160 * var(--calc-ratio-sp));
        font-size: 10px;
        font-size: max(10px, 10 * var(--calc-ratio-sp));
        line-height: 3.0;
    }

    footer .index ul .short {
        width: 150px;
        width: max(150px, 150 * var(--calc-ratio-sp));
    }

    footer .copy {
        padding: 5px 0;
        padding: max(5px, 5 * var(--calc-ratio-sp)) 0;
        font-size: 10px;
        font-size: max(10px, 10 * var(--calc-ratio-sp));
    }
}

/**********************************************************************/
/* サイトフッター（現行サイト iwamakokuban.co.jp 再現）                  */
/*  ・現行サイトの rem 基準(15px)を px 換算し、LP のスケーリング         */
/*    （min(px, px*var(--calc-ratio))）に合わせて移植                    */
/**********************************************************************/
.site-footer {
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-family-primary);
    line-height: 1.8;
    letter-spacing: normal;
}

.site-footer ul,
.site-footer ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer dl,
.site-footer dt,
.site-footer dd {
    margin: 0;
    padding: 0;
}

.site-footer p {
    margin: 0;
    line-height: 1.8;
}

/* TOPへ戻るボタン */
.pagetop {
    position: fixed;
    bottom: 20px;
    bottom: min(20px, 20 * var(--calc-ratio));
    right: 20px;
    right: min(20px, 20 * var(--calc-ratio));
    margin: 0;
    z-index: 260;
}

.pagetop a {
    font-size: 12px;
    font-size: min(12px, 12 * var(--calc-ratio));
    background-color: #0071c5;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    width: min(60px, 60 * var(--calc-ratio));
    height: 60px;
    height: min(60px, 60 * var(--calc-ratio));
    border-radius: 50%;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #fff;
}

.pagetop a span {
    text-align: center;
    display: block;
}

.pagetop a span::before {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.344%22%20height%3D%2211.84%22%20viewBox%3D%220%200%2010.344%2011.84%22%3E%3Cpath%20id%3D%22icon_arrow.svg%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M164.028%2C1050.1l3.6-6.01-3.6-5.83%2C10.333%2C5.92Z%22%20transform%3D%22translate%28-164.031%20-1038.25%29%22%2F%3E%3C%2Fsvg%3E");
    display: block;
    transform: rotate(270deg);
    text-align: center;
    margin: 0 -4px 0 -2px;
}

.pagetop a:hover {
    sukiu background-color: #50565c;
    text-decoration: none;
    color: #fff;
}

/* PC: TOPアイコンを写真付き常駐CTAのすぐ上に配置 */
@media screen and (min-width:861px) {
    .pagetop {
        bottom: 132px;
        right: 20px;
        z-index: 260;
    }
}

@media screen and (min-width:1921px) {
    .pagetop {
        bottom: 100px;
    }
}

/* インナー：左右2カラム */
.site-footer>.inner {
    max-width: 1120px;
    max-width: min(1120px, 1120 * var(--calc-ratio));
    padding: 0 128px;
    padding: 0 min(128px, 128 * var(--calc-ratio));
    margin: 0 auto;
    display: flex;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;

}

.site-footer .area {
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* 左右パネル背景を画面端まで延長 */
.site-footer .area::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

/* 左カラム（濃グレー） */
.site-footer .-left {
    background: #393b3c;
    padding: 70px 70px 70px 0;
    padding: min(70px, 70 * var(--calc-ratio)) min(70px, 70 * var(--calc-ratio)) min(70px, 70 * var(--calc-ratio)) 0;
}

.site-footer .-left::before {
    right: 100%;
    background: #393b3c;
}

.site-footer .-left .head .logo {
    margin-bottom: 30px;
    margin-bottom: min(30px, 30 * var(--calc-ratio));
}

.site-footer .-left .head .logo img {
    height: 78px;
    height: min(78px, 78 * var(--calc-ratio));
    width: auto;
}

.site-footer .-left .head .name .sub,
.site-footer .-left .head .name .main {
    display: block;
    font-weight: bold;
}

.site-footer .-left .head .name .sub {
    font-size: 13px;
    font-size: min(13px, 13 * var(--calc-ratio));
}

.site-footer .-left .head .name .main {
    font-size: 17px;
    font-size: min(17px, 17 * var(--calc-ratio));
}

.site-footer .-left .head .address {
    font-size: 12px;
    font-size: min(12px, 12 * var(--calc-ratio));
}

.site-footer .-left .head .address>a {
    color: inherit;
    text-decoration: none;
}

.site-footer .-left .foot {
    margin-top: auto;
}

.site-footer .-left .foot .sns-list {
    display: flex;
}

.site-footer .-left .foot .sns-list>li {
    margin-left: 30px;
    margin-left: min(30px, 30 * var(--calc-ratio));
}

.site-footer .-left .foot .sns-list>li:first-child {
    margin-left: 0;
}

.site-footer .-left .foot .sns-list>li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-size: min(20px, 20 * var(--calc-ratio));
    line-height: 1;
    font-weight: 700;
}

.site-footer .-left .foot .sns-list>li a svg {
    display: block;
    width: 20px;
    width: min(20px, 20 * var(--calc-ratio));
    height: 20px;
    height: min(20px, 20 * var(--calc-ratio));
    fill: #fff;
    vertical-align: middle;
}

.site-footer .-left .foot .sns-list>li a.x-link {
    width: 20px;
    width: min(20px, 20 * var(--calc-ratio));
    height: 20px;
    height: min(20px, 20 * var(--calc-ratio));
    font-size: 18px;
    font-size: min(18px, 18 * var(--calc-ratio));
    line-height: 20px;
    line-height: min(20px, 20 * var(--calc-ratio));
    letter-spacing: 0;
    padding-top: 1px;
    box-sizing: border-box;
    top: -4px;
}

.site-footer .-left .foot .copyright {
    font-size: 10px;
    font-size: min(10px, 10 * var(--calc-ratio));
    color: #a6a7a7;
    display: block;
    margin-top: 30px;
    margin-top: min(30px, 30 * var(--calc-ratio));
}

/* 右カラム（グレー） */
.site-footer .-right {
    background: #50565c;
    padding: 70px 0 70px 70px;
    padding: min(70px, 70 * var(--calc-ratio)) 0 min(70px, 70 * var(--calc-ratio)) min(70px, 70 * var(--calc-ratio));
}

.site-footer .-right::before {
    left: 100%;
    background: #50565c;
}

.site-footer .-right .head {
    display: flex;
    margin-bottom: 40px;
    margin-bottom: min(40px, 40 * var(--calc-ratio));
}

.site-footer .-right .head .site-map {
    border-left: 1px solid #8d9195;
    padding: 30px 0 30px 35px;
    padding: min(30px, 30 * var(--calc-ratio)) 0 min(30px, 30 * var(--calc-ratio)) min(35px, 35 * var(--calc-ratio));
    margin-left: 35px;
    margin-left: min(35px, 35 * var(--calc-ratio));
}

.site-footer .-right .head .site-map:first-child {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
}

.site-footer .-right .head .site-map .page-title {
    margin-top: 30px;
    margin-top: min(30px, 30 * var(--calc-ratio));
}

.site-footer .-right .head .site-map .page-title:first-child {
    margin-top: 0;
}

.site-footer .-right .head .site-map .page-title>a {
    font-size: 15px;
    font-size: min(15px, 15 * var(--calc-ratio));
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.site-footer .-right .head .site-map .page-title>a::before {
    content: "";
    width: 20px;
    width: min(20px, 20 * var(--calc-ratio));
    height: 20px;
    height: min(20px, 20 * var(--calc-ratio));
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    margin-right: min(6px, 6 * var(--calc-ratio));
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.344%22%20height%3D%2211.84%22%20viewBox%3D%220%200%2010.344%2011.84%22%3E%3Cpath%20id%3D%22icon_arrow.svg%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M164.028%2C1050.1l3.6-6.01-3.6-5.83%2C10.333%2C5.92Z%22%20transform%3D%22translate%28-164.031%20-1038.25%29%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
    background-size: 6px 7px;
    flex-shrink: 0;
}

.site-footer .-right .head .site-map .page-list {
    margin-top: 20px;
    margin-top: min(20px, 20 * var(--calc-ratio));
    padding-left: 6px;
    padding-left: min(6px, 6 * var(--calc-ratio));
}

.site-footer .-right .head .site-map .page-list>li {
    margin-bottom: 10px;
    margin-bottom: min(10px, 10 * var(--calc-ratio));
}

.site-footer .-right .head .site-map .page-list>li:last-child {
    margin-bottom: 0;
}

.site-footer .-right .head .site-map .page-list>li>ul {
    padding-left: 15px;
    padding-left: min(15px, 15 * var(--calc-ratio));
}

.site-footer .-right .head .site-map .page-list>li a {
    font-size: 13px;
    font-size: min(13px, 13 * var(--calc-ratio));
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.site-footer .-right .head .site-map .page-list>li a::before {
    content: "";
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.344%22%20height%3D%2211.84%22%20viewBox%3D%220%200%2010.344%2011.84%22%3E%3Cpath%20id%3D%22icon_arrow.svg%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M164.028%2C1050.1l3.6-6.01-3.6-5.83%2C10.333%2C5.92Z%22%20transform%3D%22translate%28-164.031%20-1038.25%29%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
    background-size: 6px 7px;
    width: 6px;
    width: min(6px, 6 * var(--calc-ratio));
    height: 7px;
    height: min(7px, 7 * var(--calc-ratio));
    display: block;
    margin-right: 6px;
    margin-right: min(6px, 6 * var(--calc-ratio));
    flex-shrink: 0;
}

.site-footer .-right .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.site-footer .-right .foot .certification {
    display: flex;
    align-items: center;
}

.site-footer .-right .foot .certification .mark {
    display: flex;
    margin-right: 6px;
    margin-right: min(6px, 6 * var(--calc-ratio));
}

.site-footer .-right .foot .certification .mark img {
    margin-right: 10px;
    margin-right: min(10px, 10 * var(--calc-ratio));
}

.site-footer .-right .foot .certification .description {
    font-size: 11px;
    font-size: min(11px, 11 * var(--calc-ratio));
    color: #a6a7a7;
}

.site-footer .-right .foot .utility-list>li a {
    font-size: 12px;
    font-size: min(12px, 12 * var(--calc-ratio));
    display: block;
    color: #a6a7a7;
    text-decoration: underline;
}

.site-footer .-right .foot .utility-list>li a:hover {
    text-decoration: none;
}

/* SP 固定ナビ（現行サイト iwamakokuban.co.jp 参考） */
.only-sp {
    display: none;
}

.fixed-nav {
    display: none;
}

@media screen and (max-width:860px) {
    .only-sp {
        display: block;
    }

    .fixed-nav {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        display: block;
    }

    .fixed-nav>.inner {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .fixed-nav .item {
        width: 50%;
        text-align: center;
    }

    .fixed-nav .item>a {
        font-size: 12px;
        font-size: max(12px, 12 * var(--calc-ratio-sp));
        font-weight: 400;
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 16px 8px;
        padding: max(16px, 16 * var(--calc-ratio-sp)) max(8px, 8 * var(--calc-ratio-sp));
        line-height: 1.2;
    }

    .fixed-nav .item>a::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
        margin-right: max(8px, 8 * var(--calc-ratio-sp));
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .fixed-nav .item>a.-contact {
        background: linear-gradient(to right, #008df6, #0078d0);
        height: 100%;
    }

    .fixed-nav .item>a.-contact::before {
        width: 18px;
        height: 14px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath fill='%23FFFFFF' d='M0 0h18v14H0V0zm1.5 1.5v11h15v-11H1.5zm1.8 1.2 5.7 4.3 5.7-4.3H3.3zm12.9 1.4-5.4 4.1a1 1 0 0 1-1.2 0L3.3 4.1v7.4h11.4V4.1z'/%3E%3C/svg%3E");
    }

    .fixed-nav .item>a.-tell {
        background: linear-gradient(to right, #006dbe, #0081e1);
    }

    .fixed-nav .item>a.-tell::before {
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M6.6 10.8c1.8 3.6 4.8 6.6 8.4 8.4l2.8-2.8c.4-.4 1-.5 1.5-.3 1.6.5 3.4.8 5.2.8.8 0 1.5.7 1.5 1.5V22c0 .8-.7 1.5-1.5 1.5C10.1 23.5.5 13.9.5 2c0-.8.7-1.5 1.5-1.5h4.5c.8 0 1.5.7 1.5 1.5 0 1.8.3 3.6.8 5.2.1.5 0 1.1-.4 1.5l-2.8 2.8z'/%3E%3C/svg%3E");
    }
}

@media screen and (max-width:860px) {
    .site-footer {
        padding-bottom: 55px;
        z-index: 999;
    }

    .site-footer>.inner {
        width: 100%;
        max-width: 100%;
        padding: 0;
        display: block;
    }

    .site-footer .area {
        display: block;
    }

    .site-footer .area::before {
        display: none;
    }

    .site-footer .-left {
        width: 100%;
        padding: 40px 20px;
    }

    .site-footer .-left::before {
        display: none;
    }

    .site-footer .-left .head {
        padding: 0 20px;
    }

    .site-footer .-left .head .logo {
        margin-bottom: 20px;
    }

    .site-footer .-left .head .logo img {
        height: 88px;
    }

    .site-footer .-left .head .name .sub {
        font-size: 15px;
    }

    .site-footer .-left .head .name .main {
        font-size: 19px;
    }

    .site-footer .-left .head .address {
        font-size: 14px;
    }

    .site-footer .-left .head .address>a {
        text-decoration: underline;
    }

    .site-footer .-left .foot .sns-list {
        justify-content: center;
        margin-top: 30px;
        gap: 24px;
        width: calc(100vw - 44px);
    }

    .site-footer .-left .foot .sns-list>li a svg {
        width: 20px;
        height: 20px;
    }

    .site-footer .-left .foot .sns-list>li a.x-link {
        font-size: 24px;
        top: -1.1px;
    }

    .site-footer .-left .foot .copyright {
        font-size: 10px;
        text-align: center;
        margin-top: 30px;
        width: calc(100% - 60px);
    }

    /* 現行サイト同様、SP ではサイトマップ列（右カラム）は非表示 */
    .site-footer .-right {
        display: none;
    }

    .pagetop {
        bottom: 70px;
        right: 10px;
        z-index: 1000;
    }

    .pagetop a {
        font-size: 8px;
        width: 40px;
        height: 40px;
    }

    .pagetop a span::before {
        margin: 0 -6px 0 -2px;
    }
}

/**********************************************************************/
/* 共通：セクション余白・プレースホルダー（PC優先） */
/**********************************************************************/
section.top,
section.intro,
section.comment,
section.contact,
section.tadotsu,
section.info,
section.third-place {
    scroll-margin-top: 80px;
}

img[data-photo-no].image-placeholder,
.image-placeholder {
    background-color: var(--color-gray-light);
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}

/**********************************************************************/
/* lp-source-1200 方針メモ（CSS実装）                                   */
/* - 通常コンテンツ: max-width 1200px（--content-max-width）             */
/* - フルブリード: width/max-width 100vw はそのまま                     */
/* - 設計スケール --calc-ratio の分母（1920）は維持（文字・余白用）       */
/**********************************************************************/