:root {
    --blu01: #004EA2;
    --zHeader: 10;
}

/* -----------------------------------------------------------------------
	base
----------------------------------------------------------------------- */
html {
    box-sizing: border-box;
    width: 100%;
    font-size: 62.5%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    position: relative;
    min-width: 320px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    line-height: 1;
    letter-spacing: normal;
    overflow: clip auto;
}

body.popup {
    overflow: clip;
}

a {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity 300ms ease;
}

a:hover {
    opacity: 0.7;
}

button {
    font: inherit;
    transition: opacity 300ms ease;
}

button:hover {
    opacity: 0.7;
}

picture, img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    vertical-align: bottom;
}

picture[src*=".svg"], img[src*=".svg"] {
    width: 100%;
    max-width: none;
}

video {
    vertical-align: middle;
}

.contentIn {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
    background: #fff;
}

@keyframes shine {
    0% {
        opacity: 0;
        translate: -100% 0;
    }

    40% {
        opacity: 0;
        translate: -100% 0;
    }

    50% {
        opacity: 1;
        translate: 0;
    }

    60% {
        opacity: 0;
        translate: 100% 0;
    }

    100% {
        opacity: 0;
        translate: 100% 0;
    }
}

.shiny .shine {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: min(0.9302325581vw, 4px);
    overflow: hidden;
    translate: -50% 0;
    mix-blend-mode: overlay;
}

.shiny .shine::after {
    content: "";
    display: block;
    width: 100%;
    height: 150%;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, white 45%, white 55%, rgb(255 255 255 / 0%) 100%);
    rotate: 45deg;
    animation: shine 3s linear infinite;
}

/* -----------------------------------------------------------------------
	main
----------------------------------------------------------------------- */
#main .buttonStyle01, #footer .buttonStyle01 {
    position: absolute;
    left: 50%;
    width: min(97.2093023256vw, 418px);
    translate: -50% 0;
}

#main .buttonSet01, #footer .buttonSet01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    translate: -50% 0;
}

#main .buttonSet01 .button, #footer .buttonSet01 .button {
    position: relative;
    left: 0;
    translate: 0;
}

#main .buttonSet01 .button .shine, #footer .buttonSet01 .button .shine {
    top: 14%;
    width: 95%;
    height: 76%;
    border-radius: min(1.8604651163vw, 8px);
}

#main .buttonSet01 .link, #footer .buttonSet01 .link {
    width: min(32.3255813953vw, 139px);
}

#main .sliderStyle01, #footer .sliderStyle01 {
    position: absolute;
    left: 50%;
    width: min(92.5581395349vw, 398px);
    translate: -50% 0;
}

#main .sliderStyle01 .slick-arrow, #footer .sliderStyle01 .slick-arrow {
    position: absolute;
    top: 30%;
    right: 0;
    width: min(5.5813953488vw, 24px);
    background: url("../images/arrow.webp") no-repeat center/contain;
    color: transparent;
    font-size: 0;
    z-index: 10;
    translate: 50% 0;
    aspect-ratio: 1;
}

#main .sliderStyle01 .slick-arrow.slick-prev, #footer .sliderStyle01 .slick-arrow.slick-prev {
    right: auto;
    left: 0;
    translate: -50% 0;
    rotate: 180deg;
}

#main .sliderStyle01 .slick-arrow.slick-prev {
    top: 18%;
}

#header {
    position: relative;
    z-index: var(--zHeader);
}

#header .contentIn {
    box-shadow: 0 0 min(2.3255813953vw, 10px) 0 rgb(0 0 0 / 10%);
}

#header .reserve {
    position: absolute;
    top: 50%;
    right: min(1.8604651163vw, 8px);
    width: min(27.2093023256vw, 117px);
    translate: 0 -50%;
}

#sec01 .buttons {
	top: 45%;
}

#sec01 .compare {
    position: absolute;
    bottom: 30.5%;
    left: 50%;
    width: min(36.976744186vw, 159px);
    translate: -50% 0;
}

#sec01 .notsign {
    position: absolute;
    bottom: 42.107658%;
    left: 50%;
    width: min(36.976744186vw, 159px);
    translate: -50% 0;
}

#sec02 .buttons {
    top: -2%;
}

#sec02 .notsign {
    top: 3.5%;
    position: absolute;
    left: 50%;
    width: min(36.976744186vw, 159px);
    translate: -50% 0;
}

#sec02 .slider {
    bottom: 0.8614748449%;
}

#sec03 .buttons {
    top: 58.5%;
}

#sec04 .slider {
    bottom: 4.8433048433%;
}

#sec04 .buttons {
    bottom: 0.3%;
}

#sec06 .popup01 {
    position: absolute;
    top: 28.57%;
    left: 69.6%;
    width: min(21.8vw, 94px);
}

#sec06 .popup02 {
    position: absolute;
    top: 49.5%;
    left: 69.6%;
    width: min(21.8vw, 94px);
}

#sec06 .reserve {
    position: absolute;
    top: 37.0825147348%;
    left: 50%;
    width: min(83.2558139535vw, 358px);
    translate: -50% 0;
}

#sec06 .reserve + .reserve {
    top: 56.9253438114%;
}

#sec06 .reserve + .reserve + .reserve {
    top: auto;
    bottom: 21.6110019646%;
}

#sec06 .reserve + .reserve + .reserve + .reserve {
    top: auto;
    bottom: 3.1925343811%;
}

#sec06 .reserve .shine {
    border-radius: min(1.3953488372vw, 6px);
}

#footer .buttons {
    top: 5.1020408163%;
}

#sticky {
    position: sticky;
    bottom: -100%;
    transition: .5s;
    z-index: 5;
}

#sticky.visible {
    bottom: 0;
    /* アニメーションで表示される位置 */
}

#sticky .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: min(2.3255813953vw, 10px);
}

#sticky .button {
    flex: 0 0 auto;
    width: min(45.3488372093vw, 195px);
}

#sticky .button + .button {
    margin-left: min(2.3255813953vw, 10px);
}

#popup, #popup01, #popup02 {
    top: 50%;
    left: 50%;
    max-width: 95dvw;
    max-height: 95dvh;
    translate: -50% -50%;
}

#popup {
    aspect-ratio: 430/633;
}

#popup form, #popup01 form, #popup02 form {
    position: absolute;
    top: 0;
    right: 0;
    width: 10.6976744186%;
}

#popup > p, #popup01 > p, #popup02 > p {
    width: 430px;
    max-width: 100%;
}

#popup::backdrop, #popup01::backdrop, #popup02::backdrop {
    background: rgb(0 0 0 / 50%);
}

#secMap .areaContents .area {
    display: none;
}

#secMap .areaContents .area.active {
    display: block;
}

#secMap .areaContents .area.all .mapContainer {
    margin: min(12.3255813953vw, 53px) 0 min(13.2558139535vw, 57px);
}

#secMap .areaContents .area.all .button {
    width: min(31.6279069767vw, 136px);
}

/****/
#secMap .areaContents .area.all .button.fukuoka {
    top: 60.8%;
    left: 11.813953%;
    width: min(35.2558139535vw, 152px);
}

#secMap .areaContents .area.all .button.kitakyu {
    top: 30.570439%;
    left: 61.604651%;
    width: min(30.2558139535vw, 152px);
}


/***/
#secMap .areaContents .area.fukuoka .button.fukuoka_001 {
    top: 8.348837%;
    left: 9.860465%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_002 {
    top: 20.348837%;
    left: 3.5%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_003 {
    top: 50.348837%;
    left: 3.5%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_004 {
	top: 63.348837%;
    left: 3.5%;
    width: min(23.2558139535vw, 112px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_005 {
    top: 84.348837%;
    left: 17.860465%;
    width: min(23.2558139535vw, 120px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_006 {
    top: 80.348837%;
    left: 62.860465%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_007 {
    top: 31.348837%;
    left: 71.8604651163%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_008 {
    top: 20.348837%;
    left: 71.8604651163%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.fukuoka .button.fukuoka_009 {
    top: 8.6%;
    left: 71.8604651163%;
    width: min(23.2558139535vw, 114px);
}

/****/
#secMap .areaContents .area.kitakyu .button.kitakyu_001 {
    top: 10.6%;
    left: 2.860465%;
    width: min(23.2558139535vw, 102px);
}
#secMap .areaContents .area.kitakyu .button.kitakyu_002 {
    top: 10.6%;
    left: 69.860465%;
    width: min(23.2558139535vw, 116px);
}
#secMap .areaContents .area.kitakyu .button.kitakyu_003 {
    top: 24.6%;
    left: 69.860465%;
    width: min(23.2558139535vw, 100px);
}
#secMap .areaContents .area.kitakyu .button.kitakyu_004 {
    top: 35.6%;
    left: 69.860465%;
    width: min(23.2558139535vw, 100px);
}
#secMap .areaContents .area.kitakyu .button.kitakyu_005 {
    top: 78.6%;
    left: 65.860465%;
    width: min(23.2558139535vw, 100px);
}
#secMap .areaContents .area.kitakyu .button.kitakyu_006 {
    top: 81.6%;
    left: 16.860465%;
    width: min(23.2558139535vw, 100px);
}






#secMap .areaContents .area.hokusetsu .button.takatsukiekimae {
    top: 27.348837%;
    left: 71.8604651163%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.hokusetsu .button.kandaimae {
    top: 72.197674%;
    left: 5.3488372093%;
    width: min(23.2558139535vw, 100px);
}


/*
#secMap .areaContents .area.kawachi .mapContainer {
    margin: min(26.2790697674vw, 113px) 0 min(13.488372093vw, 58px);
} */
#secMap .areaContents .area.kawachi .button.korien {
    top: 15.008086%;
    left: 10.4651162791%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.kawachi .button.higashiosakayaenosato {
    top: 52%;
    left: 66.2790697674%;
    width: min(29.046512vw, 116px);
}

#secMap .areaContents .area.kawachi .button.arioyao {
    top: 79.444744%;
    left: 8.1395348837%;
    width: min(23.2558139535vw, 100px);
}

#secMap .areaContents .area.kawachi .sliderTitle {
    width: min(46.511627907vw, 200px);
}

#secMap .areaContents .mapContainer {
    position: relative;
}

#secMap .areaContents .button {
    display: block;
    position: absolute;
}

#secMap .areaContents .sliderTitle {
    margin: 0 auto;
}

#secMap .sliderTitle {
    margin: 40px 0 80px;
}

#secMap .sliderTitle li span {
    margin: 0 auto 15px;
    display: block;
}


#secMap .sliderTitle li:first-child span ,#secMap .sliderTitle li:nth-child(2) span,#secMap .sliderTitle li:nth-child(3) span {
    width: min(48.511628vw, 309px);
}


#secMap .slider {
    margin: min(6.7441860465vw, 29px) 0;
    text-align: center;
    line-height: 1;
}

#secMap .slider .item.hide {
    display: none;
}

#secMap .slider .name {
    margin-top: min(2.3255813953vw, 10px);
    font-size: min(7.4418604651vw, 32px);
    font-weight: bold;
}

#secMap .slider .link {
    margin-top: min(2.3255813953vw, 10px);
    font-size: min(3.2558139535vw, 14px);
}

#secMap .areaSelector {
    display: flex;
    justify-content: center;
    align-items: stretch;
    /* position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 0; */
}

#secMap .areaSelector .area {
    flex: 0 0 auto;
}

#secMap .areaSelector button {
    display: block;
    padding: min(0.9302325581vw, 4px) min(2.7906976744vw, 12px);
    border-bottom: min(0.2325581395vw, 1px) solid currentcolor;
    color: #b2b2b2;
    font-size: min(3.7209302326vw, 16px);
    line-height: 1;
}

#secMap .areaSelector button:hover, #secMap .areaSelector button.active {
    color: var(--blu01);
    opacity: 1;
}

#secMap .areaSelector button.active {
    border-bottom-width: min(0.4651162791vw, 2px);
    font-weight: bold;
    cursor: default;
}

#secMap .areaSlider {
    color: #004EA2;
}

#secMap .areaSlider .item {
    padding: 0 10px;
}

#secMap .areaSlider .block .map {
    height: 206px;
    margin: 0 0 15px;
}

#secMap .areaSlider .block .map iframe {
    width: 100%;
    height: 100%;
}

#secMap .areaSlider .block {
    border-radius: 0 30px;
    overflow: hidden;
    position: relative;
}

#secMap .areaSlider .block::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 2px #004EA2;
    box-sizing: border-box;
    pointer-events: none;
    border-radius: 0 0 0 30px;
}

#secMap .areaSlider .block .inner {
    padding: 25px 15px 15px;
}

#secMap .areaSlider .block .name {
    background: #004EA2;
    color: #fff;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    padding: 15px;
}

#secMap .areaSlider .block .gallery {
    display: flex;
    justify-content: space-between;
    margin: 0 0 15px;
}

#secMap .areaSlider .block .gallery div {
    width: 48%;
}

#secMap .areaSlider .block .photo {
    margin: 0 0 25px;
}

#secMap .areaSlider .block .info {
    margin: 0 0 15px;
}

#secMap .areaSlider .block .info dd {
    font-size: 14px;
    padding: 5px 0 0;
    line-height: 1.3;
}

#secMap .areaSlider .slick-next, #secMap .areaSlider .slick-prev {
    position: absolute;
    content: "";
    top: 22%;
    width: 67px;
    height: 133px;
    z-index: 1;
}

#secMap .slick-next:before, #secMap .slick-prev:before {
    opacity: 0;
}

#secMap .areaSlider .slick-next {
    right: 0;
    background: url("../images/next.webp") no-repeat center/cover;
}

#secMap .areaSlider .slick-prev {
    left: 0;
    background: url("../images/prev.webp") no-repeat center/cover;
}

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
}

#modal-overlay .modal-mask {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: rgb(0 0 0 / 70%);
}

#modal-overlay .modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 430px;
    transform: translate(-50%, -50%);
}

#modal-overlay .modal-inner {
    position: relative;
    width: 100%;
    height: auto;
}

#modal-overlay .modal-text {
    width: 100%;
    box-sizing: border-box;
}

#modal-overlay button {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    cursor: pointer;
}

#main .sliderStyle01 .slick-next:before, #footer .sliderStyle01 .slick-next:before, #main .sliderStyle01 [dir=rtl] .slick-prev:before, #footer .sliderStyle01 [dir=rtl] .slick-prev:before, #main .sliderStyle01 .slick-prev:before, #footer .sliderStyle01 .slick-prev:before {
    content: '';
}

.block__inner-text{
	font-size: 16px;
	text-align: center;
	margin: 12px auto 19px;
}