

/*######################################################################
共通設定
######################################################################*/

:root {
    --width__main-content: min(100%, 1000px);
    --color__accent: #FF7BAC;
}

/* 特有フォント読み込み */
/* @font-face {
    font-family: 'Didot';
    src: url('../fonts/didot.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  } */

/* コンテンツ全体の調整 */
body {
    width: min(100%, 1440px);
    margin-inline: auto;
    font-family: "shippori-mincho", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    color: #333333;
    background-color: #fff;

    &.page { /* bodyが .page というクラス名を持っているときだけ */
        margin: 0 auto;
    }
}




h1 {
    margin: 0;
}

p, a, ul, ol, table {
    /* 400-768 */
    font-size: clamp(0.875rem, 0.739rem + 0.543vw, 1rem);
}

/* imgタグの調整 */
img {
    vertical-align: top;
    width: 100%;
}

.sp {
    display: none;
}

@media (max-width: 767px) {
    .pc {
        display: none;

    }
 }




.pc-only {
    display: block; /* PCでは表示 */
}

@media (max-width: 767px) {
    .pc-only {
        display: none; /* SPでは非表示 */
    }
}
/* SP版でのみ表示 */
.sp-only {
    display: none; /* PCでは非表示 */
}

@media (max-width: 767px) {
    .sp-only {
        display: block; /* SPでは表示 */
    }
}



/* 折り返し */
/* PC版でのみ表示 */
.pc {
    display: inline; /* PCでは表示 */
}

@media (max-width: 767px) {
    .pc {
        display: none; /* SPでは非表示 */
    }
}
/* SP版でのみ表示 */
.sp {
    display: none; /* PCでは非表示 */
}

@media (max-width: 767px) {
    .sp {
        display: inline; /* SPでは表示 */
    }
}

span.strong {
    font-weight: bold; /* 太字にする */
    font-size: 1em;  /* 強調のためにサイズを若干大きく（任意） */
}

/*------------------------------------------------------------
スクロールアニメーション
------------------------------------------------------------*/

/* フェードイン */
.fadein {
    opacity: 0;
    animation: fadein 1s ease-in forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadein-scrollin {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;


    &.scrollin-left {
        transform: translate(-30px, 0);
    }

    &.scrollin-right {
        transform: translate(30px, 0);
    }

    &.scrollin-bottom {
        transform: translate(0, 30px);
    }

    &.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/*######################################################################
コンテンツ
######################################################################*/

/*------------------------------------------------------------
fv
------------------------------------------------------------*/
.fv {
    position: relative;
    margin-inline: auto;
}
.fv-value {
    position: absolute;
    top: 78.5%;
    left: 35%;
    /* 110-60px */
    font-size: clamp(3.75rem, 0.179rem + 7.44vw, 6.875rem);
    color: #a8342e;
    text-align: right;
    letter-spacing: -0.05em;
}
@media (max-width: 767px) {
    .fv-value {
        top: 74.7%;
        left: 45%;
        /* 100-53px */
        font-size: clamp(3.313rem, 0.502rem + 11.99vw, 6.25rem);
        letter-spacing: 0;
    }
}
.fv-cta {
    position: absolute;
    width: min(25%, 360px);
    top: 83%;
    left: 73.5%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .fv-cta {
        width: min(85%, 319px);
        top: 85%;
        left: 50%;
    }
}

/*------------------------------------------------------------
reason 
------------------------------------------------------------*/
.reason {
    background-color: #f9eadd;
}


/*------------------------------------------------------------
cta
------------------------------------------------------------*/
.cta01, .cta02, .cta03 {
    position: relative;
    margin-inline: auto;
}
.cta01-value {
    position: absolute;
    top: 35%;
    right: 27%;
    /* 140-75px */
    font-size: clamp(4.688rem, 0.045rem + 9.673vw, 8.75rem);
    color: #a8342e;
    text-align: right;
    letter-spacing: -0.02em;
}
@media (max-width: 767px) {
    .cta01-value {
        top: 43%;
        left: 47%;
        /* 53-110px */
        font-size: clamp(3.313rem, -0.096rem + 14.541vw, 6.875rem);
        letter-spacing: 0;
    }
}
.cta01-btn {
    position: absolute;
    width: min(59%, 857px);
    top: 61%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta01-btn {
        width: min(88%, 332px);
        top: 64%;
    }
 }
.cta02-value {
    position: absolute;
    top: 23%;
    right: 46%;
    transform: translateX(-50%);
    /* 45-25px */
    font-size: clamp(1.563rem, 0.134rem + 2.976vw, 2.813rem);
    color: #fff;
    text-align: right;
}
@media (max-width: 767px) {
    .cta02-value {
        width: auto;
        top: 21.3%;
        right: 41.7%;
        /* 40-20px */
        font-size: clamp(1.25rem, 0.054rem + 5.102vw, 2.5rem);
    }
}
.cta02-btn {
    position: absolute;
    width: min(59%, 857px);
    top: 69%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta02-btn {
        width: min(88%, 331px);
        top: 68%;
    }
 }

.cta03-value {
    position: absolute;
    top: 51%;
    left: 21%;
    transform: translateX(-50%);
    /* 76-40 */
    font-size: clamp(2.5rem, -0.071rem + 5.357vw, 4.75rem);
    color: #a8342e;
    text-align: right;
}
@media (max-width: 767px) {
    .cta03-value {
        top: 38%;
        right: 48%;
        /* 80-40 */
        font-size: clamp(2.5rem, 0.108rem + 10.204vw, 5rem);
    }
}
.cta03-btn {
    position: absolute;
    width: min(28%, 412px);
    top: 45%;
    left: 72%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta03-btn {
        position: absolute;
        width: min(89%, 332px);
        top: 59%;
        left: 50%;
    }
 }



/*------------------------------------------------------------
menu
------------------------------------------------------------*/
.menu01, .menu02 {
    position: relative;
    margin-inline: auto;
}
.menu01-value, .menu02-value {
    position: absolute;
    right: 24%;
    color: #a8342e;
    text-align: right;
}
@media (max-width: 767px) {
    .menu01-value, .menu02-value {
        right: 22%;
    }
}
.menu01-value {
    top: 19%;
    /* 50-25px */
    font-size: clamp(1.563rem, -0.223rem + 3.72vw, 3.125rem);
}
@media (max-width: 767px) {
    .menu01-value {
        top: 22%;
        /* 30-60px */
        font-size: clamp(1.875rem, 0.081rem + 7.653vw, 3.75rem);
    }
}
.menu02-value {
    top: 11%;
    /* 50-25px */
    font-size: clamp(1.563rem, -0.223rem + 3.72vw, 3.125rem);
}
@media (max-width: 767px) {
    .menu02-value {
        top: 13.5%;
        /* 30-60px */
        font-size: clamp(1.875rem, 0.081rem + 7.653vw, 3.75rem);
    }
}


/*------------------------------------------------------------
access
------------------------------------------------------------*/
.access {
    position: relative;
    margin-inline: auto;
}
.access__picture {
    position: absolute;
    width: min(75%, 1080px);
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .access__picture {
        width: min(92%, 345px);
        top: 9.5%;
    }
}

.access__inner {
    position: absolute;
    width: min(66%, 950px);
    top: 29%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .access__inner {
        width: min(92%, 345px);
        top: 28.5%;
    }
}

.table__list {
    display: grid;
    gap: clamp(0.938rem, 0.295rem + 1.339vw, 1.5rem);
}
@media (max-width: 767px) {
    .table__list {
        gap: 0.6rem;
    }
}

.table__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}
@media (max-width: 767px) {
    .table__row {
        gap: 0.7rem;
    }
}

.table__term {
    background-color: #f5d8c2;
    padding: 0.5rem 1rem;
    width: min(25%, 240px);
    text-align: center;
    border-radius: 4px;
    /* 30-15px */
    font-size: clamp(0.938rem, -0.134rem + 2.232vw, 1.875rem);
    font-weight: normal;
}
@media (max-width: 767px) {
    .table__term {
        padding: 0.4rem 0;
        width: 28%;
        font-size: 14px;
    }
}

.table__desc {
    /* 30-15px */
    font-size: clamp(0.938rem, -0.134rem + 2.232vw, 1.875rem);
    line-height: 1.8;
    margin: 0 0 0 1.5rem !important;
    letter-spacing: 0.06em;
}
@media (max-width: 767px) {
    .table__desc {
        width: 72%;
        font-size: 14px;
        line-height: 1.6;
        margin: 2% 0 0 0 !important;
        letter-spacing: 0.06em;
    }
}
.table__desc a {
    /* 30-15px */
    font-size: clamp(0.938rem, -0.134rem + 2.232vw, 1.875rem);
    text-decoration: none;
}
@media (max-width: 767px) {
    .table__desc a {
        font-size: 14px;
        text-decoration: none;
    }
}


/* SP 表示：縦並び */
/* @media (max-width: 767px) {
    .table__row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .table__term {
        width: fit-content;
        text-align: left;
    }
} */

.map {
    position: absolute;
    width: min(66%, 950px);
    top: 54%;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 2 / 1;
    overflow: hidden;
}
@media (max-width: 767px) {
    .map {
        top: 56%;
        width: min(92%, 345px);
        height: 224px;
        aspect-ratio: 2 / 1.3 !important ;
        overflow: hidden;
    }
 }

/*------------------------------------------------------------
footer
------------------------------------------------------------*/
.footer {
    padding: 1.5rem 0;
    background-color: #d6b1a4;
    color: #ffffff;
}
@media (max-width: 767px) {
    .footer {
        padding: 0.7rem 0;
    }
 }


.footer__nav {
    font-size: clamp(0.875rem, 0.765rem + 0.49vw, 1rem);
    letter-spacing: 0.8px;
    
    ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        li:not(:last-child)::after {
            content: "　　";
        }
    }

    a {
        text-decoration: none;
        transition: 0.2s;
        /* 24-12 */
    font-size: clamp(0.75rem, -0.105rem + 1.783vw, 1.5rem);

        &:hover {
            color: lightgray;
        }
    }
}
@media (max-width: 767px) {
    .footer__nav a {
        font-size: 14px!important;
    }
 }

.copyright__p {
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.6px;
    margin: 0 !important;
    /* 24-12 */
    font-size: clamp(0.75rem, -0.105rem + 1.783vw, 1.5rem);
}
@media (max-width: 767px) {
    .copyright__p {
        margin-top: 0;
        font-size: 10px;
        font-weight: 400;
        font-size: 14px!important;
    }
 }

