@charset "utf-8";
/* CSS Document */





:root {
}
@media screen and ( max-width: 768px ) {
    :root {
    }
}





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

.position

============================== */
.position {
}
.position-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media screen and ( max-width: 768px ) {
    .position {
    }
    .position-content {
    }
}



.position-content.scene {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* デバッグ用
    background-color: #cfc;
    */
    overflow: hidden;
}
@media screen and ( max-width: 768px ) {
    .position-content.scene {
        padding-top: clamp( 36px, 12vw, 54px ); /* ヘッダー(SP)分 */
        padding: 0;
    }
}



.scene .position-content-inner {
    position: relative;
    width: 100%;
    height: 200vh;
    margin: 0;
    padding: 0;
/*
    scroll-snap-type: y mandatory;
    overflow-y: auto;
*/
}
@media screen and ( max-width: 768px ) {
    .scene .position-content-inner {
    }
}



.scene .position-content-inner-item {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: clamp( 59.2px, 5.331vw, 88.8px ) 0 0; /* ヘッダー(PC)分 */
/*
    scroll-snap-align: start;
*/
}
.scene .position-content-inner-item.item_01 {
/*
    background-color: #cfc;
*/
    opacity: 1;
}
.scene .position-content-inner-item.item_02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
/*
    background-color: #fcc;
*/
    opacity: 0;
    z-index: 5;
}
.scene .position-content-inner-item.item_03 {
    position: relative;
    width: 100%;
    height: 100vh;
}
.scene .position-content-inner-item .l-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    margin: 0;
    padding: 0 var( --l-inner_default_padding_x_180 );
    max-width: none;
}
.scene .position-content-inner-item-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: min( max( calc( 30 * 100vw / 1440 ), 30px ), 39.9px );
    width: 50%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.scene .position-content-inner-item-text__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: min( max( calc( 32 * 100vw / 1440 ), 32px ), 42.56px );
    font-size: min( max( calc( 26 * 100vw / 1440 ), 26px ), 34.58px );
    color: #333;
    line-height: 1;
    letter-spacing: 0.15em;
    letter-spacing: 0.05em;
    letter-spacing: 0.4em;
}
.scene .position-content-inner-item-text__title .text-l {
    font-size: min( max( calc( 50 * 100vw / 1440 ), 50px ), 66.5px );
    font-size: min( max( calc( 40 * 100vw / 1440 ), 40px ), 53.2px );
}
.scene .position-content-inner-item-text__text {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var( --font_size-normal );
    font-size: var( --font_size-ex_large );
    color: #333;
    line-height: 2.875;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .scene .position-content-inner-item {
        padding-top: clamp( 36px, 12vw, 54px );
        padding-top: 0;
    }
    .scene .position-content-inner-item .l-inner {
        display: block;
        padding: 0 var( --l-inner_default_padding_x_32 );
    }
    .scene .position-content-inner-item-text {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: calc( 30 * 100vw / 375 );
        width: 100%;
        z-index: 10;
    }
    .scene .position-content-inner-item-text__title {
        font-size: calc( 17 * 100vw / 375 );
        font-size: calc( 15 * 100vw / 375 );
    }
    .scene .position-content-inner-item-text__title .text-l {
        font-size: calc( 27 * 100vw / 375 );
        font-size: calc( 22 * 100vw / 375 );
    }
    .scene .position-content-inner-item-text__text {
        font-size: calc( 13 * 100vw / 375 );
        line-height: 1.84;
    }
}



.scene .position-content-inner-item-image {
    position: relative;
    width: min( max( calc( 500 * 100vw / 1440 ), 500px ), 665px );
    height: 100%;
    margin: 0;
}
.scene .item_01 .position-content-inner-item-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: min( max( calc( 120 * 100vw / 1440 ), 120px ), 159.6px ) 0 0;
    padding: 0;
}
.scene .item_02 .position-content-inner-item-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 min( max( calc( 120 * 100vw / 1440 ), 120px ), 159.6px );
    padding: 0;
}
.scene .position-content-inner-item-image figure {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;    
}
.scene .position-content-inner-item-image figure picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;    
}
.scene .position-content-inner-item-image figure picture img {
    width: 100%;
}
.scene .position-content-inner-item-image figure figcaption {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: var( --font_size-image_caption );
    color: #333;
    line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .scene .position-content-inner-item-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .scene .item_01 .position-content-inner-item-image {
        padding: 0;
    }
    .scene .item_02 .position-content-inner-item-image {
        display: block;
        padding: 0;
    }
    .scene .position-content-inner-item-image figure {
        height: 100%;
    }
    .scene .position-content-inner-item-image figure picture {
        height: 100%;
    }
    .scene .position-content-inner-item-image figure picture img {
        height: 100%;
        object-fit: cover;
    }
    .scene .position-content-inner-item-image figure figcaption {
        position: absolute;
        bottom: 0;
        right: 0;
        width: auto;
        padding: 0 1em;
        color: #333;
    }
}






































































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

.reason

============================== */
.reason {
    --reason-gradation-color: #F5F4F1;
}
.reason-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media screen and ( max-width: 768px ) {
    .reason {
    }
    .reason-content {
    }
}



.reason-content.scene {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url( '../img/location/reason-content-bg-image_pc.webp' );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.reason-content.scene::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: min( max( calc( 140 * 100vw / 1440 ), 140px ), 186.2px );
    margin: 0;
    padding: 0;
    background: linear-gradient( to bottom, var( --reason-gradation-color ), transparent );
    z-index: 5;
}
.reason-content.scene::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: min( max( calc( 140 * 100vw / 1440 ), 140px ), 186.2px );
    margin: 0;
    padding: 0;
    background: linear-gradient( to top, var( --reason-gradation-color ), transparent );
    z-index: 5;
}
.reason-content-bg {
    position: relative;
    display: none;
}
@media screen and ( max-width: 768px ) {
    .reason-content.scene {
        /*
        background-image: url( '../img/location/reason-content-bg-image_sp.webp' );
        */
        background-image: none;
        background-attachment: scroll;
        clip-path: inset( 0 );
    }
    .reason-content.scene::before {
        height: calc( 100 * 100vw / 375 );
    }
    .reason-content.scene::after {
        height: calc( 100 * 100vw / 375 );
    }
    .reason-content-bg {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100vh;
        background-image: url( '../img/location/reason-content-bg-image_sp.webp' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}



.reason-content-scene {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.reason-content-scene-image_caption {
    position: absolute;
    bottom: min( max( calc( 75 * 100vw / 1440 ), 75px ), 99.75px );
    right: 0;
    margin: 0;
    padding: 0 1em;
    color: #fff;
    font-size: var( --font_size-image_caption );
    line-height: 2;
    letter-spacing: 0.1em;
    text-align: right;
}
.l-inner.reason-content-scene-inner {
    margin: 0;
    padding: 0 var( --l-inner_default_padding_x_180 );
}
.scene_01 .l-inner.reason-content-scene-inner {
    padding-top: min( max( calc( 150 * 100vw / 1440 ), 150px ), 199.5px );
}
.scene_02 .l-inner.reason-content-scene-inner {
    padding-top: min( max( calc( 150 * 100vw / 1440 ), 150px ), 199.5px );
    padding-bottom: min( max( calc( 150 * 100vw / 1440 ), 150px ), 199.5px );
}
@media screen and ( max-width: 768px ) {
    .reason-content-scene {
    }
    .reason-content-scene-image_caption {
        bottom: calc( 50 * 100vw / 375 );
    }
    .l-inner.reason-content-scene-inner {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 var( --l-inner_default_padding_x_32 );
    }
    .scene_01 .l-inner.reason-content-scene-inner {
        padding-top: calc( 150 * 100vw / 375 );
    }
    .scene_02 .l-inner.reason-content-scene-inner {
        padding-top: calc( 150 * 100vw / 375 );
        padding-bottom: calc( 150 * 100vw / 375 );
    }
}



.reason-content-scene-inner-text {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.reason-content-scene-inner-text__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: min( max( calc( 32 * 100vw / 1440 ), 32px ), 42.56px );
    font-size: min( max( calc( 26 * 100vw / 1440 ), 26px ), 34.58px );
    line-height: 1;
    letter-spacing: 0.1em;
    letter-spacing: 0.05em;
    letter-spacing: 0.4em;
    text-align: center;
}
.reason-content-scene-inner-text__title .text-l {
    font-size: min( max( calc( 50 * 100vw / 1440 ), 50px ), 66.5px );
    font-size: min( max( calc( 40 * 100vw / 1440 ), 40px ), 53.2px );
}
.reason-content-scene-inner-text__text {
    position: relative;
    width: 100%;
    margin: min( max( calc( 30 * 100vw / 1440 ), 30px ), 39.9px ) 0 0;
    padding: 0;
    color: #fff;
    font-size: var( --font_size-normal );
    font-size: var( --font_size-ex_large );
    line-height: 2.875;
    letter-spacing: 0.1em;
    text-align: center;
}
@media screen and ( max-width: 768px ) {
    .reason-content-scene-inner-text {
        margin-top: calc( 30 * 100vw / 375 );
    }
    .reason-content-scene-inner-text__title {
        font-size: calc( 17 * 100vw / 375 );
        font-size: calc( 15 * 100vw / 375 );
        text-align: left;
    }
    .reason-content-scene-inner-text__title .text-l {
        font-size: calc( 27 * 100vw / 375 );
        font-size: calc( 22 * 100vw / 375 );
    }
    .reason-content-scene-inner-text__text {
        margin-top: calc( 30 * 100vw / 375 );
        font-size: calc( 13 * 100vw / 375 );
        line-height: 1.84;
        text-align: left;
    }
}



.reason-content-scene-inner-image {
    position: relative;
    width: 100%;
    margin: min( max( calc( 30 * 100vw / 1440 ), 30px ), 39.9px ) 0 0;
    padding: 0;
}
.reason-content-scene-inner-image figure {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.reason-content-scene-inner-image figure picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.reason-content-scene-inner-image figure picture img {
    width: 100%;
}
.reason-content-scene-inner-image figure figcaption {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: var( --font_size-image_caption );
    color: #fff;
    line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .reason-content-scene-inner-image {
        margin-top: 0;
    }
    .reason-content-scene-inner-image figure {
    }
    .reason-content-scene-inner-image figure picture {
    }
    .reason-content-scene-inner-image figure picture img {
    }
    .reason-content-scene-inner-image figure figcaption {
    }
}





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

.diagram

============================== */
.diagram {
    --diagram-gradation-color: #F5F4F1;
}
.diagram-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var( --diagram-gradation-color );
}
@media screen and ( max-width: 768px ) {
    .diagram {
    }
    .diagram-content {
    }
}



.diagram-content .l-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: min( max( calc( 80 * 100vw / 1440 ), 80px ), 106.4px );
    padding-bottom: min( max( calc( 80 * 100vw / 1440 ), 80px ), 106.4px );
}
@media screen and ( max-width: 768px ) {
    .diagram-content .l-inner {
        padding: calc( 60 * 100vw / 375 ) var( --l-inner_default_padding_x_12 );
    }
}



.diagram-content-image {
    position: relative;
    width: min( max( calc( 858 * 100vw / 1440 ), 858px ), 1141.14px );
    margin: 0 auto;
    padding: 0;
}
.diagram-content-image figure {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.diagram-content-image figure picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.diagram-content-image figure picture img {
    width: 100%;
}
.diagram-content-image figure figcaption {
    position: absolute;
    bottom: 2%;
    right: 0;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 1em;
    text-align: right;
    font-size: var( --font_size-image_caption );
    color: #333;
    line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .diagram-content-image {
        width: 100%;
    }
    .diagram-content-image figure {
    }
    .diagram-content-image figure picture {
    }
    .diagram-content-image figure picture img {
    }
    .diagram-content-image figure figcaption {
    }
}



.diagram-content-inner {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.diagram-content-inner-text__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: min( max( calc( 32 * 100vw / 1440 ), 32px ), 42.56px );
    font-size: min( max( calc( 26 * 100vw / 1440 ), 26px ), 34.58px );
    line-height: 1;
    letter-spacing: 0.1em;
    letter-spacing: 0.05em;
    letter-spacing: 0.4em;
    text-align: center;
}
.diagram-content-inner-text__title .text-l {
    font-size: min( max( calc( 50 * 100vw / 1440 ), 50px ), 66.5px );
    font-size: min( max( calc( 40 * 100vw / 1440 ), 40px ), 53.2px );
}
.diagram-content-inner-text__text {
    position: relative;
    width: 100%;
    margin: min( max( calc( 30 * 100vw / 1440 ), 30px ), 39.9px ) 0 0;
    padding: 0;
    color: #333;
    font-size: var( --font_size-normal );
    font-size: var( --font_size-large );
    line-height: 2.875;
    letter-spacing: 0.1em;
    text-align: center;
}
@media screen and ( max-width: 768px ) {
    .diagram-content-inner {
    }
    .diagram-content-inner-text__title {
        margin-top: calc( 30 * 100vw / 375 );
        padding-left: var( --l-inner_default_padding_x_20 );
        padding-right: var( --l-inner_default_padding_x_20 );
        font-size: calc( 17 * 100vw / 375 );
        font-size: calc( 15 * 100vw / 375 );
        text-align: left;
    }
    .diagram-content-inner-text__title .text-l {
        font-size: calc( 27 * 100vw / 375 );
        font-size: calc( 22 * 100vw / 375 );
    }
    .diagram-content-inner-text__text {
        padding-left: var( --l-inner_default_padding_x_20 );
        padding-right: var( --l-inner_default_padding_x_20 );
        margin-top: calc( 30 * 100vw / 375 );
        font-size: calc( 13 * 100vw / 375 );
        line-height: 1.84;
        text-align: left;
    }
}





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

.hilltop

============================== */
.hilltop {
}
.hilltop-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media screen and ( max-width: 768px ) {
    .hilltop {
    }
    .hilltop-content {
    }
}



.hilltop-content-scene {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
@media screen and ( max-width: 768px ) {
    .hilltop-content-scene {
    }
}



.hilltop-content-scene-image {
    position: relative;
    margin: 0;
    padding: 0;
}
.hilltop-content-scene-image figure {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.hilltop-content-scene-image figure picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.hilltop-content-scene-image figure picture img {
    width: 100%;
}
.hilltop-content-scene-image figure figcaption {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 1em;
    text-align: right;
    font-size: var( --font_size-image_caption );
    color: #333;
    line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .hilltop-content-scene-image {
    }
    .hilltop-content-scene-image figure {
    }
    .hilltop-content-scene-image figure picture {
    }
    .hilltop-content-scene-image figure picture img {
    }
    .hilltop-content-scene-image figure figcaption {
    }
}



.scene_01 .hilltop-content-scene-image {
    width: 100%;
}
.scene_01 .hilltop-content-scene-image figcaption{
    font-size: clamp(9.6px, 0.865vw, 14.4px);
    text-align: left;
    line-height: 1.5em;
}

@media screen and ( max-width: 768px ) {
    .scene_01 .hilltop-content-scene-image {
    }
}


.hilltop-content-scene.scene_02 {
    height: 100vh;
}
.scene_02 .l-inner.hilltop-content-scene-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    padding-top: calc( clamp(59.2px, 5.331vw, 88.8px) * 2 );
    padding-bottom: clamp(59.2px, 5.331vw, 88.8px);
    /*padding-left: var( --l-inner_default_padding_x_180 );*/
    padding-left: 8%;
    padding-right: var( --l-inner_default_padding_x_40 );
}
.scene_02 .hilltop-content-scene-inner-text {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
}
.scene_02 .hilltop-content-scene-inner-text__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: min( max( calc( 32 * 100vw / 1440 ), 32px ), 42.56px );
    font-size: min( max( calc( 26 * 100vw / 1440 ), 26px ), 34.58px );
    line-height: 1;
    letter-spacing: 0.15em;
    letter-spacing: 0.4em;
}
.scene_02 .hilltop-content-scene-inner-text__title .text-l {
    font-size: min( max( calc( 50 * 100vw / 1440 ), 50px ), 66.5px );
    font-size: min( max( calc( 40 * 100vw / 1440 ), 40px ), 53.2px );
}
.scene_02 .hilltop-content-scene-inner-text__text {
    position: relative;
    width: 100%;
    margin: min( max( calc( 30 * 100vw / 1440 ), 30px ), 39.9px ) 0 0;
    padding: 0;
    color: #333;
    font-size: var( --font_size-normal );
    font-size: var( --font_size-ex_large );
    line-height: 2.875;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .hilltop-content-scene.scene_02 {
        height: auto;
    }
    .scene_02 .l-inner.hilltop-content-scene-inner {
        display: block;
        height: auto;
        padding-top: clamp( 36px, 12vw, 54px );
        padding-bottom: clamp( 36px, 12vw, 54px );
        padding-left: var( --l-inner_default_padding_x_32 );
        padding-right: var( --l-inner_default_padding_x_12 );
    }
    .scene_02 .hilltop-content-scene-inner-text {
    }
    .scene_02 .hilltop-content-scene-inner-text__title {
        font-size: calc( 17 * 100vw / 375 );
        font-size: calc( 15 * 100vw / 375 );
        line-height: 1;
        letter-spacing: 0.1em;
        letter-spacing: 0.05em;
    }
    .scene_02 .hilltop-content-scene-inner-text__title .text-l {
        font-size: calc( 27 * 100vw / 375 );
        font-size: calc( 22 * 100vw / 375 );
    }
    .scene_02 .hilltop-content-scene-inner-text__text {
        margin-top: calc( 30 * 100vw / 375 );
        font-size: calc( 13 * 100vw / 375 );
        line-height: 1.84;
    }
}



.scene_02 .hilltop-content-scene-inner-image {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: min( max( calc( 680 * 100vw / 1440 ), 680px ), 904.4px );
    height: 100%;
    margin: 0;
    padding: 0;
}
.scene_02 .hilltop-content-scene-inner-image figure {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.scene_02 .hilltop-content-scene-inner-image figure picture {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.scene_02 .hilltop-content-scene-inner-image figure picture img {
    width: 100%;
}
.scene_02 .hilltop-content-scene-inner-image figure figcaption {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 1em;
    text-align: right;
    font-size: var( --font_size-image_caption );
    color: #333;
    line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .scene_02 .hilltop-content-scene-inner-image {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        margin-top: clamp( 36px, 12vw, 54px );
        padding-left: calc( 100 * 100vw / 375 );
    }
    .scene_02 .hilltop-content-scene-inner-image figure {
    }
    .scene_02 .hilltop-content-scene-inner-image figure picture {
    }
    .scene_02 .hilltop-content-scene-inner-image figure picture img {
    }
    .scene_02 .hilltop-content-scene-inner-image figure figcaption {
        padding: 0;
    }
}