@charset "UTF-8";
    /*====================================================================================================

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。
　- all.min.css         Font Awesome を利用するためのCSS。基本触らないこと。
　- aos.css             AOSを利用するためのCSS。基本触らないこと。

　//基本的には変更しないCSS
　- base.css            基本の文字設定や、Webフォントの読み込みなど。基本触らなくてもOK。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS

====================================================================================================*/
    /*  MV
------------------------------------------------------------------*/

    .mv {
        position: relative;
        z-index: 5;
        width: 100%;
        height: fit-content;
        background-color: transparent;
    }

    .mv .heroSwiper {
        width: 100%;
        aspect-ratio: 2000 / 1041;
        overflow: hidden;
        -webkit-mask: url("../images/mv_mask.svg") no-repeat center / 100% 100%;
        mask: url("../images/mv_mask.svg") no-repeat center / 100% 100%;
        background-color: transparent;
    }

    .mv .heroCatch,
    .mv .heroDeco {
        z-index: 2;
    }

    .mv .heroCatch {
        position: absolute;
        top: 16.5vw;
        left: 5vw;
        width: 60vw;
        z-index: 2;
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.1);
    }

    .mv .heroCatch .jp,
    .mv .heroCatch .en {
        display: flex;
        flex-direction: column;
        color: var(--white-color)
    }

    .mv .heroCatch .jp {
        font-size: 3.575rem;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .1em;
    }

    .mv .heroCatch .en {
        font-family: var(--en-font);
        font-size: 1.875rem;
        font-weight: 500;
        letter-spacing: .03em;
        margin-top: .5rem;
    }

    @media print,
    screen and (max-width: 1399px) {
        .mv .heroCatch {
            width: 70vw;
        }

        .mv .heroCatch .jp {
            font-size: 3rem;
        }

        .mv .heroCatch .en {
            font-size: 1.5rem;
        }
    }

    @media screen and (max-width: 1199px) {
        .mv .heroCatch .jp {
            font-size: 2.75rem;
        }

        .mv .heroCatch .en {
            font-size: 1.5rem;
        }
    }

    @media screen and (max-width: 1099px) {
        .mv .heroCatch .jp {
            font-size: 2.5rem;
        }

        .mv .heroCatch .en {
            font-size: 1.25rem;
        }
    }

    @media screen and (max-width: 991px) {
        .mv .heroCatch .jp {
            font-size: 2.25rem;
        }

        .mv .heroCatch .en {
            font-size: 1.25rem;
        }
    }

    @media screen and (max-width: 845px) {
        .mv .heroCatch .jp {
            font-size: 1.85rem;
        }

        .mv .heroCatch .en {
            font-size: 1rem;
        }
    }

    @media screen and (max-width: 767px) {
        .mv .heroSwiper {
            width: 100%;
            aspect-ratio: 9 / 14;
            overflow: hidden;
            -webkit-mask: url("../images/mv-mask.svg") no-repeat center / 200% 100%;
            mask: url("../images/mv-mask.svg") no-repeat center / 200% 100%;
            background-color: transparent;
        }

        .mv .heroCatch {
            position: absolute;
            top: initial;
            bottom: 20vw;
            left: 5vw;
            width: 90vw;
            z-index: 2;
            text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.2);
        }

        .mv .heroCatch .jp {
            font-size: 2.5rem;
        }

        .mv .heroCatch .en {
            font-size: 1.375rem;
        }
    }

    @media screen and (max-width: 575px) {
        .mv .heroCatch .jp {
            font-size: 2rem;
        }

        .mv .heroCatch .en {
            font-size: 1.1rem;
        }
    }

    @media screen and (max-width: 449px) {
        .mv .heroCatch .jp {
            font-size: 1.5rem;
        }

        .mv .heroCatch .en {
            font-size: .827rem;
        }
    }

    /* =================================
HIGHLIGHT AREA
================================= */

    .l-highlight {
        position: relative;
        background: var(--gradient-cream-1);
        z-index: 2;
    }

    /* 下の波 */

    .l-highlight::after {
        content: "";
        position: absolute;
        bottom: 1px;
        left: 0;
        right: 0;
        height: 7vw;
        background: url("../images/wave_2.png") no-repeat center bottom / cover;
        z-index: 0;
        transform: translateY(100%);
    }

    .l-highlight .section {
        position: relative;
        z-index: 1;
    }

    .sec-thoughts,
    .sec-risk {
        background: transparent;
    }

    /* =================================================
   p-mv
================================================= */

    .p-mv {
        position: relative;
        z-index: 5;
        width: 100%;
    }

    .p-mv__deco img {
        position: absolute;
        bottom: -2.5vw;
        z-index: -1;
        width: 100vw;
    }

    /* 画像 */

    .p-mv__image {
        display: block;
        width: 100%;
        aspect-ratio: 2000 / 1041;
        overflow: hidden;
        -webkit-mask: url("../images/mv_mask.svg") no-repeat center / 100% 100%;
        mask: url("../images/mv_mask.svg") no-repeat center / 100% 100%;
    }

    .p-mv__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* コンテンツ */

    .p-mv__content {
        position: absolute;
        top: 15.5vw;
        left: 6vw;
        z-index: 2;
    }

    /* キャッチ */

    .p-mv__catch {
        display: flex;
        flex-direction: column;
        gap: 0.15em;
        font-size: clamp(2rem, 2.5vw, 3rem);
        font-weight: 700;
        letter-spacing: .1em;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.6);
    }

    .p-mv__accent {
        color: var(--primary-light-color);
    }

    .p-mv__label {
        display: inline-flex;
        align-items: center;
        gap: 1.2rem;
        margin-top: 2rem;
        padding: .5rem 2rem;
        border-radius: 0.6rem;
        background: var(--primary-light-color);
        color: var(--white-color);
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: .4em;
    }

    .p-mv__label span:last-child {
        font-size: 1.5rem;
        letter-spacing: .1em;
    }

    .p-mv__scroll {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 2vw;
        bottom: 8vw;
        writing-mode: vertical-rl;
        font-size: 1rem;
        font-family: var(--en-font);
        font-style: italic;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .p-mv__scroll::before {
        content: "";
        background-image: url(../images/scroll_deco.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1.25rem;
    }

    .p-mv__scroll::after {
        content: "";
        display: block;
        width: 2px;
        height: 7rem;
        margin-top: .5rem;
        background: linear-gradient(to bottom, transparent 40%, var(--primary-light-color) 50%, transparent 100%);
        background-size: 100% 200%;
        animation: scroll-line 2.5s linear infinite;
    }

    @keyframes scroll-line {
        0% {
            background-position: 0 100%;
        }

        100% {
            background-position: 0 -100%;
        }
    }

    /* ===============================
   responsive
=============================== */

    @media screen and (max-width: 767px) {
        .p-mv__image {
            aspect-ratio: 9 / 14;
            -webkit-mask: url("../images/mv_mask.svg") no-repeat center / 220% 100%;
            mask: url("../images/mv_mask.svg") no-repeat center / 220% 100%;
        }

        .p-mv__image img {
            position: relative;
            display: block;
            object-position: 36%;
        }

        .p-mv__content {
            top: auto;
            bottom: 30%;
            left: 5vw;
            right: initial;
            width: 90vw;
        }

        .p-mv__catch {
            font-size: clamp(1.2rem, 4.7vw, 2.6rem);
        }

        .p-mv__label {
            font-size: clamp(1.25rem, 2vw, 1.5rem);
            padding: .5rem 1.2rem;
            margin-top: 1rem;
            letter-spacing: .06em;
            gap: .5em;
        }

        .p-mv__label span:last-child {
            font-size: 1.125rem;
        }

    }

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

        .p-mv__catch {
            text-shadow: 0 0 5px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, .6), 0 0 8px rgba(255, 255, 255, .4), 0 0 10px rgba(255, 255, 255, .4), 0 0 2px rgba(255, 255, 255, 1);
        }


        .p-mv__content {
            top: auto;
            bottom: 20%;
            left: 5vw;
            right: initial;
            width: 90vw;
        }

        .p-mv__label {
            margin-top: .5em;
        }

        .p-mv__label, .p-mv__label span:last-child {
            font-size: .925rem;
            line-height: 1.65;
            letter-spacing: 0.04em;
        }

        .p-mv__scroll {
            display: none;
        }

    }

    /* =================================
TOP RISK GRID
================================= */

    .l-risk {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        margin-top: 6rem;
    }

    .l-risk__row {
        display: grid;
        gap: 2.5rem;
    }

    .l-risk__row--top {
        grid-template-columns: repeat(3, 1fr);
    }

    .l-risk__row--bottom {
        grid-template-columns: repeat(2, 1fr);
        width: calc((100% - 2.5rem) * 2 / 3);
        margin: 0 auto;
    }

    .grid-tbsp {
        display: none;
    }

    .sec-company {
        background: var(--gradient-cream-2);
    }

    @media screen and (max-width:1399px) {
        .l-risk {
            gap: 2rem;
        }

        .l-risk__row {
            display: grid;
            gap: 1rem;
        }

        .l-risk__row .c-card__title {
            font-size: 1.5rem;
        }

        .grid-tbsp {
            display: none;
        }

    }

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

        .sec-risk .c-heading__en {
            flex-direction: column;
            gap: 0;
            align-items: center;
        }

        .c-green {
            margin-left: 0 !important;
        }

        .l-risk__row--top.grid-pc,
        .l-risk__row--bottom.grid-pc {
            display: none;
        }

        .grid-tbsp {
            display: grid;
        }


        .l-risk__row--top {
            gap: 3rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .l-risk__row--top .c-card--risk:last-of-type {
            width: 100%;
            transform: translateX(calc(50% + 1.5rem));
        }

    }

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

        .sec-risk .c-heading__jp {
            text-align: center;
            line-height: 1.4;
        }

        .l-risk {
            margin-top: 4rem;
        }

        .l-risk__row--top {
            gap: 2.5rem;
            grid-template-columns: 1fr;
        }

        .l-risk__row--top .c-card--risk,
        .l-risk__row--top .c-card--risk:last-of-type {
            max-width: 540px;
            margin-inline: auto;
            width: 100%;
            transform: translateX(0);
        }

        .l-risk__row .c-card__title {
            font-size: 1.15rem;
        }
    }

    @media screen and (max-width:575px) {
        .sec-risk .c-heading__en {
            text-align: center;
        }
    }

    /* =================================
insurance
================================= */

    .sec-handled__intro {
        margin: 2.5rem auto 0;
    }

    .sec-handled__intro-text {
        text-align: center;
        line-height: 2;
        letter-spacing: .04em;
    }

    .l-handled {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        margin-top: 6rem;
    }

    .l-handled__row {
        display: grid;
        gap: 2.5rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .c-card--handled {
        padding-top: 60px;
    }

    .c-card--handled .c-card__badge {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 8rem;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .c-card--handled .c-card__badge::before {
        content: none;
    }

    .c-card--handled .c-card__badge img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .c-card--handled .c-card__title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.15em;
    }

    .c-card--handled .c-card__text {
        text-align: justify;
        width: fit-content;
        margin: 0 auto;
    }

    @media screen and (max-width:1199px) {
        .l-handled {
            margin-top: 3rem;
        }

        .l-handled__row {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
    }

    @media screen and (max-width:991px) {
        .l-handled__row {
            grid-template-columns: repeat(2, 1fr);
        }

        .sec-handled__intro-text {
            text-align: justify;
        }

        .c-card__title {
            font-size: 1.25rem;
            letter-spacing: .05em;
        }
    }

    @media screen and (max-width:767px) {
        .l-handled__row {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    /* ========================================
   p-company-insurance
======================================== */

    .p-company-insurance__text {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 4rem;
    }

    .p-company-insurance__block {
        padding: 1.75rem 2rem;
        background-color: var(--white-color);
        border-radius: .5rem;
        filter: drop-shadow(0px 0px 6px rgba(151, 129, 67, 0.1));
    }

    .p-company-insurance__lead {
        font-size: 1.25rem;
        padding-bottom: .75rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--primary-soft-color);
        letter-spacing: .04em;
    }

    .p-company-insurance__lead span {
        color: var(--primary-color);
        padding-inline: .5rem;
    }

    .p-company-insurance__list {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin: 0;
        list-style: none;
    }

    .p-company-insurance__item {
        position: relative;
        padding-left: 1rem;
        font-size: 1.25rem;
        line-height: 2;
    }

    .p-company-insurance__item::before {
        content: "";
        position: absolute;
        top: .95rem;
        left: 0;
        width: .5rem;
        height: .5rem;
        background-color: var(--primary-color);
        border-radius: 50%;
    }

    @media screen and (max-width:991px) {
        .p-company-insurance__lead {
            font-size: 1.125rem;
            line-height: 1.5;
        }

        .p-company-insurance__item {
            font-size: 1.125rem;
        }
    }

    @media screen and (max-width:767px) {
        .p-company-insurance__item {
            font-size: 1.025rem;
        }

        .p-company-insurance__item::before {
            content: "";
            position: absolute;
            top: .75em;
            left: 0;
            width: .5rem;
            height: .5rem;
        }
    }

    /* =========================================
company info
========================================= */

    .p-company__table {
        margin-top: 8rem;
        width: 100%;
        padding: 2rem 3rem 3rem 3rem;
        background-color: var(--white-color);
        filter: drop-shadow(0px 0px 6px rgba(151, 129, 67, 0.1));
        border-radius: .5rem;
    }

    .p-access__text {
        background-color: var(--primary-light-color);
        padding-inline: 3rem;
        border-radius: .5rem;
        filter: drop-shadow(0px 0px 8px rgba(151, 129, 67, 0.1));
        font-size: 1.25rem;
        color: var(--white-color);
    }

    .p-access__text span {
        line-height: 1;
    }

    .p-access__text span:last-of-type {
        font-size: 1.5rem;
        font-weight: 700;
        margin-left: .5rem;
    }

    .p-access__map {
        margin-top: 4rem;
        width: 100%;
    }

    .p-access__map iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 1;
    }

    @media screen and (max-width:991px) {
        .p-company__table {
            padding: 1.5rem 1rem 1rem 1rem;
        }
    }

    @media screen and (max-width:767px) {
        .p-access__text {
            margin-top: 2rem;
            padding-block: .5rem;
            padding-inline: 1.25rem;
            width: fit-content;
        }

        .p-access__map {
            margin-top: 1rem;
        }

        .p-access__map iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
        }
    }

    @media screen and (max-width:575px) {
        .p-access__text {
            font-size: .9rem;
        }

        .p-access__text span:last-of-type {
            font-size: 1.125rem;
            letter-spacing: 0;
            margin-left: 6px;
        }

        .p-access__map iframe {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1.5;
        }
    }

    /* =========================================
thoughts 
========================================= */

    .l-manege__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
        margin-top: 8rem;
    }

    .l-manege__list-item {
        background-color: var(--white-color);
        border-radius: .5rem;
        filter: drop-shadow(0px 0px 8px rgba(151, 129, 67, 0.1));
        padding: .5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
    }

    .l-manege__list-ttl {
        display: flex;
        align-items: center;
        text-align: justify;
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: .1em;
        border-bottom: 1px solid var(--primary-soft-color);
        margin-bottom: 1.5rem;
        line-height: 1.3;
    }

    .l-manege__num {
        width: 8rem;
        padding-right: 1rem;
        flex-shrink: 0;
    }

    .l-manege__num img {
        width: 100%;
        height: auto;
    }

    .l-manege__list-text h5 {
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: .05em;
        margin-bottom: 1.25rem;
        text-align: justify;
        line-height: 1.5;
    }

    .l-manege__list-text ul li {
        position: relative;
        display: flex;
        gap: .5rem;
        text-align: justify;
    }

    .l-manege__list-text ul li::before {
        position: relative;
        content: "";
        display: block;
        line-height: 1;
        transform: translateY(.6em);
        width: .5em;
        height: .5em;
        flex-shrink: 0;
        border-radius: 100%;
        background-color: var(--primary-color);
    }

    .l-manege__list-text ul li:nth-of-type(even) {
        margin-top: .5rem;
    }

    .p-thoughts__solicit {
        background: var(--gradient-silver);
    }

    .l-solicit__list {
        background-color: var(--white-color);
        filter: drop-shadow(0px 0px 8px rgba(129, 127, 103, 0.1));
        padding: 2rem;
        margin-top: 8rem;
        border-radius: .5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
        max-width: 1100px;
        margin-inline: auto;
    }

    .l-solicit__list-item {
        border-bottom: 1px solid var(--primary-soft-color);
        padding-bottom: 1.5rem;
    }

    .l-solicit__list-ttl h4 {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        line-height: 1.6;
        font-size: 1.25rem;
        margin-bottom: .75rem;
        text-align: justify;
    }

    .l-solicit__list-ttl span {
        flex: 0 0 auto;
        margin-right: .5rem;
        color: var(--primary-color);
        font-weight: 600;
    }

    .l-solicit__list-text ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .l-solicit__list-text li {
        position: relative;
        padding-left: 1em;
        line-height: 1.8;
        text-align: justify;
    }

    .l-solicit__list-text li::before {
        content: "・";
        position: absolute;
        left: 0;
        top: 0;
    }

    @media screen and (max-width: 991px) {
        .l-manege__list {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }

        .l-manege__num {
            width: 5rem;
            padding-right: .25rem;
        }

        .l-manege__list-ttl {
            font-size: 1.2rem;
        }

        .l-manege__list-text h5 {
            font-size: 1rem;
        }
    }

    /* =========================================
contact 
========================================= */

    .p-contact__contact {
        text-align: center;
    }

    .p-contact__contact-list {
        display: flex;
        justify-content: center;
        gap: 3rem;
        margin-block: 4rem;
    }

    .p-contact__contact-item {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        background: rgba(255, 255, 255, 1);
        overflow: hidden;
        border-radius: .5rem;
        padding: 2rem 2rem;
        filter: drop-shadow(0px 0px 8px rgba(151, 129, 67, 0.1));
    }

    .p-contact__contact-label {
        font-size: 2rem;
        font-weight: 700;
        font-family: var(--en-font);
        font-style: italic;
        color: var(--accent-color);
        letter-spacing: .1em;
        border-bottom: 1px solid var(--gray-light-color);
        padding-bottom: .75rem;
        margin-bottom: .5rem;
    }

    .p-contact__contact-number {
        display: flex;
        justify-content: center;
        gap: .5rem;
        font-size: 2.25rem;
        font-weight: 600;
        padding-inline: 1.5rem;
    }

    .sec-mail {
        background-color: var(--white-color);
    }

    .contact-info {
        font-size: 1.05rem;
        line-height: 2;
    }

    .h-adr {
        max-width: 1200px;
        margin: 0 auto;
    }

    @media screen and (max-width: 991px) {
        .p-contact__contact-list {
            margin-block: 4rem 0;
        }

        .p-contact__contact-item {
            width: 320px;
        }

        .p-contact__contact-number {
            font-size: 1.65rem;
        }
    }

    @media screen and (max-width: 767px) {
        .p-contact__contact-list {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .p-contact__contact-item {
            width: 80%;
            min-width: 320px;
            padding: 1rem 1rem;
        }

        .contact-info {
            font-size: 1rem;
            line-height: 2;
        }
    }