@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;
    }
}


.lifeinfo {
    padding-top: 0;
    width: 90%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.lifeinfo .c-title--contents {
    border-top: none;
}

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

.towninfo

============================== */
.towninfo {
}
/* --- 親容器とスライダーの基本設定 --- */
.towninfo-content {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto 60px;
  padding: 0;
  overflow: hidden; /* 右側にはみ出たスライドを親要素の外でカット */
}

.visual {
  /* 
    4枚指定に対して4.3枚（+30%分）見せる計算
    paddingによる縮みを考慮して 108.5%〜109% 程度に設定します
  */
  width: 90% !important;
  margin-left: 0 !important;
}

.visual .slick-list {
  overflow: visible !important;
}

.visual .slick-track {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.visual figure {
  position: relative;
  width: 100% !important;
  padding-right: 16px; /* スライド同士の隙間 */
  box-sizing: border-box;
}

.visual figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト等のスタイル */
.visual figure figcaption {
  position: absolute;
  bottom: 30px;
  left: 15px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.visual figure figcaption span {
  font-size: 13px;
}

.visual figure p {
  position: absolute;
  bottom: 10px;
  right: 25px; /* padding-right分調整 */
  color: #fff;
  font-size: 11px;
}

/* --- レスポンシブ（スマホ: 2枚＋3枚目を10%見せる） --- */
@media screen and (max-width: 768px) {
  .visual {
    /* 
      2枚指定に対して2.1枚（+10%分）見せる計算
      105% に調整します
    */
    width: 98% !important;
  }

  .visual figure {
    padding-right: 10px; /* スマホ時の隙間 */
  }

  .visual figure figcaption {
    bottom: 18px;
    left: 10px;
    font-size: 14px;
  }

  .visual figure figcaption span {
    font-size: 11px;
  }

  .visual figure p {
    bottom: 4px;
    right: 15px;
    font-size: 11px;
  }
}

/* --- 下部コントロール（矢印・ドット）スタイル --- */
.slider-controls {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.slick-arrows {
  display: flex;
  gap: 12px;
}

.custom-prev,
.custom-next {
  position: static !important;
  transform: none !important;
  width: 44px;
  height: 44px;
  background-color: #000;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
}

.custom-prev::before,
.custom-next::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background-color: #fff;
  position: relative;
}

.custom-prev::after,
.custom-next::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  position: absolute;
}

.custom-prev { position: relative !important; }
.custom-prev::after {
  left: 14px;
  transform: rotate(-45deg);
}

  .custom-next { position: relative !important; }
.custom-next::after {
  right: 14px;
  transform: rotate(135deg);
}

.slick-dots-container .slick-dots {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slick-dots-container .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}

.slick-dots-container .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  background-color: #b0b0b0;
  border-radius: 50%;
  font-size: 0;
  border: none;
  cursor: pointer;
  opacity: 1;
}

.slick-dots-container .slick-dots li button::before {
  display: none !important;
}

.slick-dots-container .slick-dots li.slick-active button {
  background-color: #000;
}