@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

====================================================================================================*/

.sp.tb,
.sp {
    display: none;
}

.tb {
    display: none;
}

.pc.tb,
.pc {
    display: block;
}

@media print, screen and (max-width:1199px) {
    .sp {
        display: none;
    }

    .sp.tb,
    .pc.tb,
    .tb {
        display: block;
    }

    .pc {
        display: none;
    }
}

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

    .sp.tb,
    .sp {
        display: block;
    }

    .pc.tb,
    .tb {
        display: none;
    }

    .pc {
        display: none;
    }
}

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

.t-border {
    border-top: 1px solid var(--gray-light-color);
}

/* animation-delay
------------------------------------------------------------------*/
.delay-100ms,
.delay-100ms::before,
.delay-100ms::after {
    animation-delay: .1s;
    transition-delay: .1s;
}

.delay-200ms,
.delay-200ms::before,
.delay-200ms::after {
    animation-delay: .2s;
    transition-delay: .2s;
}

.delay-300ms,
.delay-300ms::before,
.delay-300ms::after {
    animation-delay: .3s;
    transition-delay: .3s;
}

.delay-400ms,
.delay-400ms::before,
.delay-400ms::after {
    animation-delay: .4s;
    transition-delay: .4s;
}

.delay-500ms,
.delay-500ms::before,
.delay-500ms::after {
    animation-delay: .5s;
    transition-delay: .5s;
}

.delay-600ms,
.delay-600ms::before,
.delay-600ms::after {
    animation-delay: .6s;
    transition-delay: .6s;
}

.delay-800ms,
.delay-800ms::before,
.delay-800ms::after {
    animation-delay: .8s;
    transition-delay: .8s;
}

.delay-1000ms,
.delay-1000ms::before,
.delay-1000ms::after {
    animation-delay: 1s;
    transition-delay: 1s;
}

/* image-reveal
------------------------------------------------------------------*/
.view {
    --view-delay: 0s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.view-delay-100ms {
    --view-delay: .1s;
}

.view-delay-200ms {
    --view-delay: .2s;
}

.view-delay-300ms {
    --view-delay: .3s;
}

.view-delay-400ms {
    --view-delay: .4s;
}

.view-delay-500ms {
    --view-delay: .5s;
}

.view-delay-600ms {
    --view-delay: .6s;
}

.view-delay-800ms {
    --view-delay: .8s;
}

.view-delay-1000ms {
    --view-delay: 1s;
}

@media screen and (max-width:575px) {
    .view-delay-1000ms {
        --view-delay: 0s;
    }
}

.view::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--gradient-view);
    opacity: 1;
    transform: translateX(-101%);
    pointer-events: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.view img {
    display: block;
    vertical-align: middle;
    opacity: 0;
    transform: none;
}

.view.js-on::after,
.view.is-view-active::after {
    -webkit-animation-name: viewinMaskSafari;
    animation-name: viewinMaskSafari;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.view.js-on img,
.view.is-view-active img {
    -webkit-animation-name: viewinImgSafari;
    animation-name: viewinImgSafari;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes viewinMaskSafari {
    0% {
        transform: translateX(-101%);
    }

    40% {
        transform: translateX(0);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(101%);
    }
}

@keyframes viewinMaskSafari {
    0% {
        transform: translateX(-101%);
    }

    40% {
        transform: translateX(0);
    }

    60% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(101%);
    }
}

@-webkit-keyframes viewinImgSafari {
    0% {
        opacity: 0;
    }

    39.99% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes viewinImgSafari {
    0% {
        opacity: 0;
    }

    39.99% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .view::after {
        display: none;
    }

    .view img {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

/*------------------------------------------------------------------
　header
------------------------------------------------------------------*/


/*  header
------------------------------------------------------------------*/

header {
    --header-height: 116px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 3rem;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .2s ease-out;
    z-index: 1000;
    gap: 1.5rem;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image:
        url(../images/common/silver.svg),
        var(--gradient-silver);
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;

    opacity: 0;
    transition: opacity .35s ease;
}

header.scroll::before {
    opacity: 1;
}

@media print, screen and (max-width:1199px) {
    header {
        --header-height: 2.5rem;
        padding: 20px 20px 20px 30px;
        justify-content: space-between;
        width: 100vw;
    }
}

/*  header-logo
------------------------------------------------------------------*/

.logo {
    display: block;
    margin: 0;
}

.logo a {
    width: 13.5vw;
    min-width: 10rem;
}

.logo a img {
    width: 100%;
    height: auto;
}

@media print, screen and (max-width:1199px) {
    .logo a {
        width: 10rem;
    }
}

@media screen and (max-width: 576px) {
    .logo a {
        min-width: initial;
        width: 8rem;
    }
}

/*  header-gnav
------------------------------------------------------------------*/

.header-gnav {
    display: flex;
    align-items: center;
    column-gap: 5rem;
    flex-shrink: 0;
}

.header-gnav div {
    transition: .2s ease-in-out;
}

@media screen and (max-width:1199px) {
    .header-gnav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        display: block;
        width: 100%;
        max-width: 280px;
        height: auto;
        padding: 84px 0 100px;
        background: var(--gradient-silver);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        -webkit-transition:
            -webkit-transform .55s cubic-bezier(.25, .8, .25, 1),
            opacity .35s ease-out,
            visibility 0s linear .55s;
        transition:
            transform .55s cubic-bezier(.25, .8, .25, 1),
            opacity .35s ease-out,
            visibility 0s linear .55s;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 3;
    }

    .header-gnav::before {
        content: "";
        position: absolute;
        inset: 0;
        display: block;
        background-image: url(../images/common/silver.svg);
        background-size: cover;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .header-gnav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .header-gnav::-webkit-scrollbar {
        display: none;
    }

    header .header-gnav-list-item.active,
    header.scroll .header-gnav-list-item.active {
        background-color: rgb(178 205 255 / 30%);
    }

    header.scroll .header-gnav-list-item:hover {
        background-color: rgb(178 205 255 / 30%);
    }
}

/*  header-gnav
------------------------------------------------------------------*/

.header-gnav-list {
    display: flex;
    align-items: center;
    column-gap: 4.5rem;
}

@media print, screen and (max-width:1399px) {
    .header-gnav-list {
        /* column-gap: 45px; */
    }
}

@media screen and (max-width:1200px) {
    .header-gnav-list {}
}

@media screen and (max-width:1199px) {
    .header-gnav-list {
        display: block;
        margin-bottom: 20px;
    }
}


/*  header-gnav-list-item
------------------------------------------------------------------*/

.header-gnav-list-item {
    position: relative;
    transition: .1s ease-in-out;
    z-index: 1;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
}

.header-gnav-list-item .icon--arrow {
    width: 1rem;
    height: 1rem;
    transition: .15s ease-in;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .25rem;
}

.header-gnav-list-item .icon--arrow::before {
    content: "";
    display: block;
    mask-image: url(../images/common/icon-arrow.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--white-color);
    width: .7rem;
    aspect-ratio: 1;
}

.header-gnav-list-item .material-symbols-outlined {
    margin-top: .25rem;
}

.header-gnav-list-item::before {
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: 0;
    background-color: var(--black-color);
    transition: .15s ease-in;
}

.header-gnav-list .has-dropdown .header-gnav-list-item:hover::before {
    display: none;
    opacity: 0;
}

.header-gnav-list-item.active::before,
.header-gnav-list-item:hover::before {
    opacity: 1;
}

.footer-nav-1 .header-gnav-list-item::before {
    display: none;
}


/* ホバー時動作 */

@media (hover:hover) and (pointer:fine) {
    .header-gnav-list-item:hover::before {
        opacity: 1;
    }
}

@media screen and (max-width:1199px) {
    .header-gnav-list-item {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        column-gap: .5em;
        height: auto;
        padding: .75em 1rem;
        border-bottom: 1px solid var(--white-color);
        color: var(--black-color);
        transition: .2s ease-out;
        z-index: 1;
        font-weight: 500;
    }

    .header-gnav-list>li:first-of-type {
        border-top: 1px solid var(--white-color);
    }

    .header-gnav-list-item::before {
        display: none;
    }

    .header-gnav-list-item.active {
        color: var(--primary-color);
    }

    .header-gnav-list a.header-gnav-list-item {
        position: relative;
        padding-right: 2.2rem;
    }

    .header-gnav-list a.header-gnav-list-item::after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%) rotate(270deg);
        width: .9rem;
        height: .9rem;
        mask-image: url(../images/common/icon--arrow.png);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: var(--gray-dark-color);
    }

    .header-gnav-list-item .icon--arrow::before {
        display: none;
    }

}


/*  header-gnav-mail
------------------------------------------------------------------*/
.header-gnav-mail {
    display: flex;
    gap: 2.5rem;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: .2s ease-out;
    background-color: var(--btn-color);
    color: var(--white-color);
    padding: .4rem .4rem .4rem 2rem;
    border-radius: 10rem;
    z-index: 10;
    position: relative;
}

.header-gnav-mail .icon {
    width: 2.75rem;
    background-color: var(--white-color);
    border-radius: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-gnav-mail .icon::before {
    content: "";
    mask-image: url(../images/common/icon-mail.svg);
    -webkit-mask-image: url(../images/common/icon-mail.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--black-color);
    width: 1.15rem;
    aspect-ratio: 1;
}

@media screen and (max-width:1199px) {
    .header-gnav-mail {
        margin: 0 1rem;
    }

    @media (hover:hover) and (pointer:fine) {
        .header-gnav.open .header-gnav-mail:hover .icon {
            background-color: var(--white-color);
        }

        .header-gnav.open .header-gnav-mail:hover .icon::before {
            background-color: var(--primary-color);
        }
    }
}

header .mail-area a {
    display: flex;
    background-color: var(--primary-color);
    border-radius: 10rem;
    color: var(--white-color);
    padding: 1.25rem 3.5rem;
    font-size: 1.125rem;
    gap: .5rem;
    transition: .15s ease-in;
    line-height: 1;
}

.header-gnav-mail:hover {
    background-color: var(--primary-color);
}

.header-gnav-mail:hover .icon {
    background-color: var(--white-color);
}

.header-gnav-mail .icon,
.header-gnav-mail .icon::before {
    transition: .2s ease-out;
}

.header-gnav-mail:hover .icon::before {
    background-color: var(--primary-color);
}

.header-gnav-mail:hover span,
header.scroll .header-gnav-mail:hover span {
    color: var(--white-color) !important;
}

.mail-area .icon {
    width: 1.275rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .025rem;
    transition: all .5s ease-in;
}

.mail-area .icon::before {
    content: "";
    mask-image: url(../images/common/icon-mail.svg);
    -webkit-mask-image: url(../images/common/icon-mail.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--primary-color);
    width: 1.275rem;
    aspect-ratio: 1;
}


/*  header-hamburger
------------------------------------------------------------------*/

.header-hamburger {
    display: none;
}

@media screen and (max-width:1199px) {
    .header-hamburger {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--header-height);
        aspect-ratio: 1 / 1;
        background: var(--btn-color);
        border-radius: 100%;
        transition: .2s ease-out;
        cursor: pointer;
        z-index: 4;
    }

    .header-hamburger .lines {
        position: relative;
        width: 18px;
        height: 13px;
    }

    .header-hamburger .lines .line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--white-color);
        border-radius: 999px;
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform, opacity;
        -webkit-transition:
            -webkit-transform .45s cubic-bezier(.25, .8, .25, 1),
            opacity .3s ease-out;
        transition:
            transform .45s cubic-bezier(.25, .8, .25, 1),
            opacity .3s ease-out;
    }

    .header-hamburger .lines .line#line1 {
        top: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
    }

    .header-hamburger .lines .line#line2 {
        top: 6px;
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
    }

    .header-hamburger .lines .line#line3 {
        top: 12px;
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(1);
    }

    /* オープン時動作 */
    .header-hamburger.open .lines .line#line1 {
        -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg) scaleX(1);
        transform: translate3d(0, 6px, 0) rotate(-45deg) scaleX(1);
    }

    .header-hamburger.open .lines .line#line2 {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scaleX(0);
        transform: translate3d(0, 0, 0) rotate(0deg) scaleX(0);
    }

    .header-hamburger.open .lines .line#line3 {
        -webkit-transform: translate3d(0, -6px, 0) rotate(45deg) scaleX(1);
        transform: translate3d(0, -6px, 0) rotate(45deg) scaleX(1);
    }
}

@media print, screen and (max-width:1199px) {
    .header-hamburger {
        min-width: 40px;
    }
}

@media screen and (max-width:575px) {
    .header-hamburger .lines .line {
        -webkit-transition:
            -webkit-transform .45s cubic-bezier(.25, .8, .25, 1),
            opacity .3s ease-out;
        transition:
            transform .45s cubic-bezier(.25, .8, .25, 1),
            opacity .3s ease-out;
    }
}

/*  header-overlay
------------------------------------------------------------------*/
.header-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    background-image: url(../images/mv_1.jpg);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition:
        opacity .4s ease-out,
        visibility 0s linear .4s;
    transition:
        opacity .4s ease-out,
        visibility 0s linear .4s;
    z-index: 2;
}

.header-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}


/*------------------------------------------------------------------
  footer
------------------------------------------------------------------*/

footer {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--gradient-silver);
}

footer a {
    opacity: 1;
    transition: .25s ease;
}

footer a:hover {
    opacity: .6;
}


/*  .footer
------------------------------------------------------------------*/

footer .footer .footer-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

@media screen and (max-width: 991px) {
    footer .footer .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
}

/*  footer-left
------------------------------------------------------------------*/
footer .logo .logo-img {
    width: 13.5vw;
    min-width: 10rem;
    display: block;
}

footer .logo img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

.footer-left .address {
    line-height: 1.5;
}

.footer-left .address a {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.footer-left .address a::after {
    content: "";
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: var(--black-color);
    mask: url(../images/common/icon-map.svg) no-repeat center / contain;
    -webkit-mask: url(../images/common/icon-map.svg) no-repeat center / contain;
    transition: background-color .3s ease;
}

.footer-left .telfax p {
    line-height: 1.5;
}

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

    .footer-left {
        text-align: center;
    }

    footer .logo .logo-img {
        max-width: 90%;
        margin: 0 auto;
    }
}

/*  footer-right
------------------------------------------------------------------*/
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3.5rem;
    transition: all .5s ease;
}

.footer-right ul {
    display: flex;
}

.footer-nav li {
    line-height: 1.2;
    padding-inline: 1.8vw;
    padding-bottom: 1px;
    border-left: 1px solid var(--black-color);
}

.footer-nav li:last-of-type {
    border-right: 1px solid var(--black-color);
}

.footer-nav li a {
    opacity: 1;
    transition: .2s ease-out;
}

.footer-nav li a:hover {
    opacity: .6;
}

@media screen and (max-width:991px) {
    .footer-right {
        align-items: center;
        justify-content: center;
        gap: 2.75rem;
    }


    .footer-right ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .footer-right ul li,
    .footer-right ul li:last-of-type {
        border: none;
        padding: 0;
    }

    .footer-right ul li,
    .footer-right ul li:last-of-type {
        border-bottom: 1px solid var(--black-color);
        width: 100%;
        text-align: center;
        line-height: 2.75;
        padding-inline: .75em;
    }

}

/* ホバー時動作 */
@media (hover:hover) and (pointer:fine) {
    .footer-right ul li a:hover {
        color: var(--primary-color);
    }
}

/*  footer-bottom txt
------------------------------------------------------------------*/
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-color);
    padding-top: 1rem;
}

/*  copyright
------------------------------------------------------------------*/
.copyright {
    font-size: .75rem;
    line-height: 1;
    color: var(--gray-dark-color);
}

/* =================================================
page top
================================================= */

.c-pagetop {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--black-color);
    font-family: var(--en-font);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(.75rem);
    transition: opacity .2s ease-out, filter .2s ease-out, transform .2s ease-out, visibility 0s linear .2s;
}

.c-pagetop::before {
    content: "TOP";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 0rem .5rem rgba(23, 49, 101, .15);
    transition: box-shadow .3s ease-out;
}

.c-pagetop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.c-pagetop__image {
    display: none;
}

@media (hover:hover) and (pointer:fine) {
    .c-pagetop:hover {
        filter: brightness(1.05);
        transform: translateY(-.25rem);
    }

    .c-pagetop:hover::before {
        box-shadow: 0 .25rem .5rem rgba(23, 49, 101, .15);
    }
}

@media screen and (max-width:575px) {
    .c-pagetop {
        right: .75rem;
        bottom: .75rem;
        width: 3rem;
        height: 3rem;
        font-size: .75rem;
        letter-spacing: .08em;
    }
}

/*-----------------------------------------------------------------
  child page
------------------------------------------------------------------*/
/*  page-top
------------------------------------------------------------------*/

.child-page .page-top {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--section-padding);
    overflow: hidden;
    margin-top: 80px;
    aspect-ratio: 4 / 1;
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - 5vw),
            0 100%);
}

.child-page .page-top::before {
    background-repeat: no-repeat;
    animation: page-top-zoom-in .75s ease-out both;
    transform-origin: center center;
    will-change: transform;
}

.child-page.p-business .page-top::before {
    content: "";
    inset: 0;
    background-image: url(../images/pt-business.jpg);
    position: absolute;
    background-size: cover;
    background-position: bottom;
}

.child-page.p-facilities .page-top::before {
    content: "";
    inset: 0;
    background-image: url(../images/pt-facilities.jpg);
    position: absolute;
    background-size: cover;
    background-position: bottom right 90%;
}

.child-page.p-company .page-top::before {
    content: "";
    inset: 0;
    background-image: url(../images/pt-company.jpg);
    position: absolute;
    background-size: cover;
    background-position: bottom;
}

.child-page.p-contact .page-top::before {
    content: "";
    inset: 0;
    background-image: url(../images/pt-contact.jpg);
    position: absolute;
    background-size: cover;
    background-position: bottom;
}

.page-top .img-area img {
    height: 100%;
    width: auto;
}

.page-top .img-area {
    height: 120%;
    transform: translateY(15%);
}

@keyframes page-top-zoom-in {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .child-page .page-top::before {
        animation: none;
    }
}

@media print, screen and (max-width:1199px) {
    .child-page .page-top {
        aspect-ratio: 3 / 1;
    }
}

@media screen and (max-width:991px) {
    .child-page .page-top {
        aspect-ratio: 2 / 1;
    }
}

@media screen and (max-width:767px) {
    .child-page .page-top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .page-top .img-area {
        height: 25rem;
        transform: none;
    }
}

@media screen and (max-width:575px) {
    .child-page .page-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        aspect-ratio: 1 / 1;
    }

    .page-top .img-area {
        height: 100%;
        transform: translateY(-2.5%);
    }
}

@media screen and (max-width:499px) {
    .child-page .page-top {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


/*  page-top-image
------------------------------------------------------------------*/

.page-top-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 1;
}

.page-top-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    animation: pageTopImage .8s forwards ease-out;
}

@keyframes pageTopImage {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (max-width:575px) {
    .page-top-image {
        height: 100%;
    }
}

@media screen and (max-width:374px) {
    .page-top-image {
        width: 100%;
        height: 100%;
    }
}

.contents-03 .txtanimation {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 60px;
    left: 0;
}

.contents-03 .txtanimation p {
    font-size: 22rem;
    line-height: 1.2;
    flex: 0 0 auto;
    font-family: "Outfit", sans-serif;
    color: #f9f9f9;
    text-shadow: 1px 1px 0 #adadad, -1px 1px 0 #adadad, -1px -1px 0 #adadad, 1px -1px 0 #adadad;
}

.contents-03 p+p {
    margin-top: 0;
}

.contents-03 .txtanimation p:nth-of-type(1) {
    animation: loop_01 120s -60s linear infinite;
}

.contents-03 .txtanimation p:nth-of-type(2) {
    animation: loop_02 120s linear infinite;
}


/*------------------------------------------------------------------
  c-diagonal-split
  斜め区切りセクション　画像＋テキスト

  役割：
  ・PCでは「画像 | テキスト背景」の2カラム
  ・テキスト背景の端を clip-path で斜めにする
  ・.is-reverse を付けると左右反転
  ・SPでは斜めを解除して「画像 → テキスト」の縦積み
------------------------------------------------------------------*/
/*------------------------------------------------------------------
  外側ラッパー
  セクションを画面幅いっぱいに見せるための指定
------------------------------------------------------------------*/
.c-full-bleed-section {
    overflow: hidden;
}

.c-full-bleed-section+.c-full-bleed-section {
    margin-top: -1px;
}

.c-full-bleed-section .container-wide {
    max-width: none;
    padding-inline: 0;
}

/*------------------------------------------------------------------
  本体
  画像エリアとテキストエリアを横並びにする
------------------------------------------------------------------*/
.c-diagonal-split {
    /* テキスト背景の色 */
    --diagonal-split-surface: var(--gradient-blue);
    /* テキストエリア内の文字色 */
    --diagonal-split-color: var(--white-color);
    /* 斜め部分の幅 */
    --diagonal-split-angle: 5rem;
    /* 画像とテキストを横並びにする */
    display: grid;
    /* 左：画像を少し広め、右：テキストを少し狭め */
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .9fr);
    /* 画像とテキストの高さを揃える */
    align-items: stretch;
    /* 中身がはみ出した場合に隠す */
    overflow: hidden;
}

/*------------------------------------------------------------------
  色違い用 modifier
------------------------------------------------------------------*/
.c-diagonal-split--orange {
    --diagonal-split-surface: var(--gradient-orange);
    --diagonal-split-color: var(--white-color);
}

/*------------------------------------------------------------------
  左右反転用
  .is-reverse を付けると「テキスト | 画像」になる
------------------------------------------------------------------*/
.c-diagonal-split.is-reverse {
    grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.2fr);
}

/*------------------------------------------------------------------
  画像エリア
------------------------------------------------------------------*/
.c-diagonal-split__media {
    margin: 0;
    overflow: hidden;
}

.c-diagonal-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top left;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .8s ease-out, opacity .4s ease-out;
    will-change: transform, opacity;
}

.c-diagonal-split__media.__contact img {
    object-position: top right;
}

.c-diagonal-split__media.is-diagonal-split-media-active img {
    opacity: 1;
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .c-diagonal-split__media img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*------------------------------------------------------------------
  テキスト背景エリア
  背景を作って、左端を斜めにカット
------------------------------------------------------------------*/
.c-diagonal-split__surface {
    /* z-indexを効かせるためのposition */
    position: relative;
    /* 画像より前面に出す */
    z-index: 1;
    /* grid内で中身が潰れすぎないようにする */
    min-width: 0;
    /* 中のテキストを上下中央寄せにする */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 背景を画像側に食い込ませる */
    margin-left: calc(var(--diagonal-split-angle) * -1);
    /*
      左paddingは、
      通常の余白 4.5rem + 斜めの食い込み分 5rem
      にして、文字が斜め部分にかぶらないようにする
    */
    padding: 7.25rem 4.5rem 7.25rem calc(4.5rem + var(--diagonal-split-angle));

    background: var(--diagonal-split-surface);
    color: var(--diagonal-split-color);

    /*
      左端を斜めに切る

      左上：斜め幅ぶん右から開始
      右上：右上
      右下：右下
      左下：左下

      結果：左側だけ斜めになる
    */
    clip-path: polygon(var(--diagonal-split-angle) 0,
            100% 0,
            100% 100%,
            0 100%);
}

/*------------------------------------------------------------------
  左右反転時：画像エリア
------------------------------------------------------------------*/
.c-diagonal-split.is-reverse .c-diagonal-split__media {
    /* 画像を2番目に表示する */
    order: 2;
}

/*------------------------------------------------------------------
  左右反転時：テキスト背景エリア
  通常とは逆に、右端を斜めに切る
------------------------------------------------------------------*/
.c-diagonal-split.is-reverse .c-diagonal-split__surface {
    /* テキスト背景を1番目に表示する */
    order: 1;
    /* 通常時の左食い込みを解除 */
    margin-left: 0;
    /* 反転時は右側に食い込ませる */
    margin-right: calc(var(--diagonal-split-angle) * -1);
    /* 左右反転のため右側を基準に余白をとる*/
    justify-content: flex-start;

    /*
      右paddingを多めにする
      理由：右側の斜め部分に文字がかぶらないようにするため
    */
    padding: 7.25rem calc(4.5rem + var(--diagonal-split-angle)) 7.25rem 4.5rem;

    /*
      右端を斜めに切る

      左上：左上
      右上：右上
      右下：斜め幅ぶん左に入る
      左下：左下

      結果：右側だけ斜めになる
    */
    clip-path: polygon(0 0,
            100% 0,
            calc(100% - var(--diagonal-split-angle)) 100%,
            0 100%);
}

.c-diagonal-split.is-reverse .c-diagonal-split__inner {
    margin-left: auto;
}

/*------------------------------------------------------------------
  テキスト
------------------------------------------------------------------*/
.c-diagonal-split__inner {
    width: 100%;
    max-width: 33rem;
}

.c-diagonal-split__text {
    /* タイトルとの余白 */
    margin-top: 2rem;

    /* 本文をゆったり読ませる */
    line-height: 2;

    text-align: justify;
}

/*------------------------------------------------------------------
  ボタン
------------------------------------------------------------------*/
.c-diagonal-split .c-btn {
    /* 本文とボタンの余白 */
    margin-top: 3.5rem;
}

@media screen and (max-width:1199px) {
    .c-diagonal-split {
        /* 画像側を少しだけ狭める */
        grid-template-columns: minmax(0, 1fr) minmax(18rem, .92fr);
    }

    .c-diagonal-split__surface {
        /*
          PCより余白を少し小さくする
          左は斜め分を足して、文字が斜めにかぶらないようにする
        */
        padding: 4rem 3rem 4rem calc(3rem + var(--diagonal-split-angle));
    }

    .c-diagonal-split.is-reverse .c-diagonal-split__surface {
        /*
          反転時は右側に斜めがあるので、
          右paddingに斜め分を足す
        */
        padding: 4rem calc(3rem + var(--diagonal-split-angle)) 4rem 3rem;
    }
}

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

    .c-diagonal-split,
    .c-diagonal-split.is-reverse {
        /* 横並びをやめて1カラムにする */
        grid-template-columns: 1fr;
    }

    .c-diagonal-split__media,
    .c-diagonal-split.is-reverse .c-diagonal-split__media {
        /* スマホでは必ず画像を下にする */
        order: 2;
        /* 画像の縦横比を固定 */
        aspect-ratio: 3 / 1;
    }

    .c-diagonal-split__surface,
    .c-diagonal-split.is-reverse .c-diagonal-split__surface {
        /* スマホでは必ずテキストを上にする */
        order: 1;
        /* PC用の食い込みを解除 */
        margin-inline: 0;
        /* スマホ用の余白 */
        padding: 3.5rem 1.5rem 3.5rem;
        /* スマホでは斜めカットを解除 */
        clip-path: none;
    }

    .c-diagonal-split__inner {
        width: 100%;
        max-width: initial;
    }

    .c-diagonal-split__text {
        /* タイトルと本文の余白をPCより少し小さくする */
        margin-top: 2.5rem;
    }

    .c-diagonal-split .c-btn {
        /* 本文とボタンの余白 */
        margin-top: 1.75rem;
    }
}

/*------------------------------------------------------------------
  small sp
  575px以下の微調整
------------------------------------------------------------------*/
@media screen and (max-width:575px) {

    .c-diagonal-split.is-reverse .c-diagonal-split__media,
    .c-diagonal-split__media {
        /* 小さいスマホでは画像を少し縦長にする */
        aspect-ratio: 2 / 1;
    }

    .c-diagonal-split__surface,
    .c-diagonal-split.is-reverse .c-diagonal-split__surface {
        /* 小さいスマホ用の余白 */
        padding: 3.5rem 1.25rem 3.5rem;
    }
    .c-diagonal-split .c-btn {
        position: relative;
        margin-top: 1.75rem;
    }
}

/*------------------------------------------------------------------
  c-slant-card-set
  斜めカードを並べる一覧パーツ
------------------------------------------------------------------*/
.c-slant-card-set {
    --slant-card-shape: polygon(0 11%, 100% 0, 100% 89%, 0 100%);
    --slant-card-surface: linear-gradient(180deg, #f8fbff 0%, #e7eff9 100%);
}

.c-slant-card-set__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.c-slant-card-set__item {
    position: relative;
    min-width: 0;
}

.c-slant-card-set__item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(72, 74, 77, .04);
    clip-path: var(--slant-card-shape);
    transform: translate(1em, 1em);
}

.c-slant-card-set__card {
    position: relative;
    z-index: 1;
    /* min-height: clamp(18rem, 28vw, 21rem); */
    /* padding: clamp(2.75rem, 4vw, 3.5rem) clamp(1.5rem, 2.2vw, 2rem) clamp(2rem, 3vw, 2.75rem); */
    padding-block: 7rem 7.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 2vw, 2rem);
    text-align: center;
    background: url(../images/common/silver__ru.jpg) center / cover no-repeat,
        var(--gradient-silver__lb);
    clip-path: var(--slant-card-shape);
}

.c-slant-card-set__icon {
    width: 10rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-slant-card-set__copy {
    display: grid;
    gap: .7rem;
    align-content: start;
}

.c-slant-card-set__index,
.c-slant-card-set__label {
    margin: 0;
}

.c-slant-card-set__index {
    font-family: var(--en-font);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .1em;
}

.c-slant-card-set__label {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
}

.c-slant-card-set__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(2rem, 3vw, 3rem);
}

@media screen and (max-width:1199px) {
    .c-slant-card-set__card {
        min-height: 17rem;
        padding-inline: 1.25rem;
    }

    .c-slant-card-set__label {
        font-size: 1rem;
    }
}

@media screen and (max-width:991px) {
    .p-advantage__title {
        margin-inline: auto;
        text-align: center;
    }

    .p-advantage__title .en,
    .p-advantage__title .jp {
        text-align: center;
    }

    .c-slant-card-set__title .en {
        font-size: clamp(2.6rem, 6.4vw, 3.75rem);
    }

    .c-slant-card-set__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .c-slant-card-set__item {
        width: min(100%, 28rem);
        margin-inline: auto;
        padding: 0 .9rem .9rem 0;
    }

    .c-slant-card-set__item::before {
        transform: translate(1.2%, 1.2%);
    }

    .c-slant-card-set__card {
        min-height: 0;
        aspect-ratio: 5 / 4;
        padding: 2.5rem 1.25rem 2rem;
    }

    .c-slant-card-set__icon {
        width: 4.5rem;
    }

    .c-slant-card-set__index {
        font-size: .75rem;
    }

    .c-slant-card-set__actions {
        justify-content: center;
        margin-top: 2rem;
    }
}

@media screen and (max-width:767px) {
    .c-slant-card-set__title .en {
        font-size: clamp(2.5rem, 11vw, 3.4rem);
    }

    .c-slant-card-set__title .jp {
        font-size: .95rem;
        margin-top: .5rem;
    }

}

@media screen and (max-width:575px) {
    .c-slant-card-set__card {
        aspect-ratio: auto;
        min-height: 16rem;
    }

    .c-slant-card-set__label {
        font-size: .95rem;
    }
}

/*------------------------------------------------------------------
  c-layered-band
  タイトル、重なり画像、帯テキストで構成するレイアウト
------------------------------------------------------------------*/
.c-layered-band {
    --layered-band-surface: var(--gradient-orange);
    --layered-band-text: var(--white-color);
    --layered-band-media-shape: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
    --layered-band-media-scale: 1.2;
    --layered-band-title-width: 57%;
    --layered-band-copy-width: 55%;
    --layered-band-media-width: 50%;
    --layered-band-body-offset: 2.75rem;
    --layered-band-body-padding-top: 4.5rem;
    --layered-band-body-padding-bottom: 4rem;
    position: relative;
    padding-top: 1.75rem;
}

.c-layered-band--blue {
    --layered-band-surface: var(--gradient-blue);
    --layered-band-text: var(--white-color);
}

.c-layered-band--warm {
    --layered-band-surface: var(--gradient-orange);
    --layered-band-text: var(--white-color);
}

.c-layered-band--child {
    --layered-band-surface: var(--gradient-white);
    --layered-band-text: var(--black-color);
}

.c-layered-band--silver {
    --layered-band-surface: url(../images/common/silver.png);
    --layered-band-text: var(--black-color);
}

.c-layered-band__media {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    right: -10%;
    width: var(--layered-band-media-width);
    max-width: var(--layered-band-media-max-width);
    margin: 0;
    z-index: 3;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    clip-path: var(--layered-band-media-shape);
}

.c-layered-band__media.__philo {
    transform: translateY(40%);
}

.c-layered-band--silver .c-layered-band__media,
.c-layered-band--child .c-layered-band__media {
    aspect-ratio: 6 / 4;
}

.c-layered-band__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 50%;
    transform: scale(var(--layered-band-media-scale));
    transform-origin: 35% 50%;
}

.c-layered-band__body {
    position: relative;
    z-index: 1;
    margin-top: var(--layered-band-body-offset);
    padding: var(--layered-band-body-padding-top) 0 var(--layered-band-body-padding-bottom);
    color: var(--layered-band-text);
}

.c-layered-band__body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--layered-band-surface);
    z-index: -1;
}

.c-layered-band__copy {
    width: 100%;
    width: var(--layered-band-copy-width);
    max-width: var(--layered-band-copy-max-width);
}

.c-layered-band__lead,
.c-layered-band__text {
    margin: 0;
}

.c-layered-band__lead {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .075em;
    text-align: justify;
}

.c-layered-band__text {
    margin-top: 1.5rem;
    text-align: justify;
    line-height: 2;
}

@media screen and (max-width:1199px) {
    .c-layered-band {
        --layered-band-title-width: 57%;
        --layered-band-copy-width: 60%;
        --layered-band-media-width: 45%;
        --layered-band-body-offset: 2rem;
        --layered-band-body-padding-top: 4rem;
        --layered-band-body-padding-bottom: 3.5rem;
        padding-top: 1.25rem;
    }

    .c-layered-band__media {
        aspect-ratio: 1 / 1;
    }

    .c-layered-band--silver .c-layered-band__media,
    .c-layered-band--child .c-layered-band__media {
        aspect-ratio: 5 / 4;
    }

    .c-layered-band__media.__top img {
        object-position: 65% 50%;
    }

    .c-layered-band--silver .c-layered-band__media img {
        object-position: initial;
    }
}

@media screen and (max-width:991px) {
    .c-layered-band {
        --layered-band-media-scale: 1.08;
        padding-top: 0;
    }

    .c-layered-band__title {
        width: 100%;
        max-width: none;
        padding-left: 0;
    }

    .c-layered-band__title .en {
        font-size: 2.5rem;
    }

    .c-layered-band__title .jp,
    .c-layered-band__title .jpen {
        margin-top: .5rem;
        font-size: .95rem;
    }

    .c-layered-band__media.__philo,
    .c-layered-band--silver .c-layered-band__media,
    .c-layered-band--child .c-layered-band__media,
    .c-layered-band__media {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        max-width: none;
        aspect-ratio: 2 / 1;
        margin: 0;
        margin-top: 1.5rem;
        z-index: 2;
        transform: initial;
    }

    .c-layered-band__media img {
        object-position: center;
    }

    .c-layered-band__body {
        width: 100%;
        margin-top: -10rem;
        padding: 2.25rem 0 2.5rem;
    }

    .c-layered-band__copy {
        width: 100%;
        max-width: none;
        padding: 11rem 0 1.5rem;
    }

    .c-layered-band__lead {
        line-height: 1.8;
    }

    .c-layered-band__text {
        margin-top: 2rem;
        line-height: 1.9;
    }
}

@media screen and (max-width:575px) {
    .c-layered-band__body {
        padding: 2rem 0 2.25rem;
        margin-top: -5rem;
    }

    .c-layered-band__copy {
        padding-top: 6rem;
    }

    .c-layered-band__lead {
        font-size: 1rem;
    }
}