@charset "utf-8";

.p-spot {
    background-color: #d0e6f2;
    padding-block-end: 0;
}

.p-spot .slant01 {
    height: clamp(128px, calc(360 * var(--fluid-px)), 336px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    top: 0;
}

.p-spot__title {
    position: relative;
    width: min(90%,clamp(240px, calc(480 * var(--fluid-px)), 480px));
    margin-inline: auto;
    text-align: center;
}

.p-box__title {
    margin-block-end: var(--space-rg);
}

.p-conaiter__title {
    position: relative;
    width: min(98%, clamp(36px, calc(720 * var(--fluid-px)), 720px));
    margin-inline: auto;
    margin-block-end: clamp(25px, calc(50 * var(--fluid-px)), 50px);
}

.p-conaiter__title--adjustment {
    margin-block-end: clamp(41px, calc(84 * var(--fluid-px)), 84px);
}

.p-conaiter__title--takahatafudo {
    margin-block-end: clamp(16px, calc(32 * var(--fluid-px)), 32px);
}

.p-container {
    width: 100%;
    padding-block: clamp(25px, calc(50 * var(--fluid-px)), 50px);
}

.p-container__shinjuku {
    padding-block: 0;
}

.p-container__chofu_takahatafudo {
    background-color: #d7ede3;
    padding-block-end: clamp(20px, calc(40 * var(--fluid-px)), 40px);
}

.p-container__takao {
    background-color: #feead3;
    margin-block-end: 0;
}

.p-spot__heaging {
    position: absolute;
    width: min(98%, clamp(218px, calc(536 * var(--fluid-px)), 536px));
    height: fit-content;
    margin-inline: auto;
    inset: 0;
    margin-block-start: clamp(-34px, calc(-34 * var(--fluid-px)), 17px);
}

.p-box--white {
    position: relative;
    width: clamp(36px, calc(720 * var(--fluid-px)), 720px);
    margin-inline: auto;
    margin-block-end: clamp(16px, calc(32 * var(--fluid-px)), 32px);
    background-color: var(--color-white);
    border-radius: clamp(9px, calc(18 * var(--fluid-px)), 18px);
}

.p-box--white--adjustment{
    margin-block-start: clamp(42px, calc(84 * var(--fluid-px)), 84px);
}

.p-container .p-box--white:last-of-type {
    margin-block-end: 0;
}

.box-inner {
    padding-block: clamp(20px, calc(40 * var(--fluid-px)), 40px);
}

.box-inner--adjustment {
    padding-block-start: clamp(40px, calc(80 * var(--fluid-px)), 80px);
}

.p-spot__image {
    margin-inline: clamp(10px, calc(20 * var(--fluid-px)), 20px);
    margin-block-end: clamp(15px, calc(30 * var(--fluid-px)), 30px);
}

.p-spot__name {
    margin-inline: clamp(30px, calc(60 * var(--fluid-px)), 60px);
    margin-block-end: clamp(10px, calc(20 * var(--fluid-px)), 20px);
}

.p-spot__time{
    margin-inline: clamp(30px, calc(60 * var(--fluid-px)), 60px);
    margin-block-end: clamp(15px, calc(30 * var(--fluid-px)), 30px);
}

.btn-wrap {
    width: clamp(240px, calc(470 * var(--fluid-px)), 480px);
    margin-inline: auto;
}

.btn-wrap__close {
    width: clamp(240px, calc(470 * var(--fluid-px)), 480px);
    margin-inline: auto;
}

.p-btn__open, .p-btn__close {
    width: 100%;
    padding-block: clamp(8px, calc(16 * var(--fluid-px)), 16px);
    display: inline-grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    cursor: pointer;
    justify-content: space-between;
    border: none;
    border-radius: 9999px;
}

.p-btn__text {
    width: clamp(83px, calc(166 * var(--fluid-px)), 166px);
    display: block;
    height: fit-content;
    margin-inline: auto;
}

.p-btn__text--close {
    width: clamp(32px, calc(75 * var(--fluid-px)), 75px);
    display: block;
    height: fit-content;
    margin-inline: auto;
}

.p-btn__open::before,
.p-btn__close::before {
    content:"";
    display: block;
}

.p-btn__icon {
    width: clamp(20px, calc(40 * var(--fluid-px)), 40px);
    height: auto;
    justify-self: end;
    display: block;
    transform: translateX(clamp(-24px, calc(-24 * var(--fluid-px)), -12px));
}

.p-btn__open--blue,
.p-btn__close {
    background-color: var(--color-smokyblue);
}

.p-btn__open--green {
    background-color: var(--color-green);
}

.p-btn__open--orange {
    background-color: #f89623;
}

.p-spot__reccomend {
    position: relative;
    margin-inline: clamp(30px, calc(60 * var(--fluid-px)), 60px);
    margin-block-start: clamp(22px, calc(44 * var(--fluid-px)), 44px);
}

.p-illust {
    position: absolute;
    height: fit-content;
    z-index: 5;
}

.p-illust-01 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    top: clamp(-46px, calc(-46 * var(--fluid-px)), -23px);
    right: clamp(16px, calc(32 * var(--fluid-px)), 32px);
} 

.p-illust-02 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    bottom: clamp(-34px, calc(-34 * var(--fluid-px)), -17px);
    right: clamp(-26px, calc(-26 * var(--fluid-px)), -13px);
} 

.p-illust-03 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    bottom: clamp(-60px, calc(-60 * var(--fluid-px)), -30px);
    left: clamp(-14px, calc(-14 * var(--fluid-px)), -7px);
} 

.p-illust-04 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    top: clamp(-42px, calc(-42 * var(--fluid-px)), -21px);
    right: clamp(23px, calc(46 * var(--fluid-px)), 46px);
}

.p-illust-05 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    bottom: clamp(-28px, calc(-28 * var(--fluid-px)), -14px);
    left: clamp(-30px, calc(-30 * var(--fluid-px)), -15px);
} 

.p-illust-06 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    top: clamp(-44px, calc(-44 * var(--fluid-px)), -22px);
    right: clamp(-10px, calc(-10 * var(--fluid-px)), -5px);
}

.p-illust-07 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    top: clamp(-40px, calc(-40 * var(--fluid-px)), -21px);
    left: clamp(23px, calc(47 * var(--fluid-px)), 47px);
}

.p-illust-08 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    bottom: clamp(-35px, calc(-35 * var(--fluid-px)), -18px);
    right: clamp(-22px, calc(-22 * var(--fluid-px)), -11px);
}

.p-illust-09 {
    width: clamp(68px, calc(141 * var(--fluid-px)), 141px);
    bottom: clamp(-40px, calc(-40 * var(--fluid-px)), -20px);
    left: clamp(-37px, calc(-37 * var(--fluid-px)), -23px);
} 

/*---- add_modal ----*/

.modal-content {
    padding-inline: clamp(8px, calc(32 * var(--fluid-px)), 40px);
    line-height: 1.6;
}

.p-window__pic{
    margin-block-end: clamp(15px, calc(28 * var(--fluid-px)), 30px);
}

.p-window__time{
    margin-block-end: clamp(6px, calc(12 * var(--fluid-px)), 12px);
}

.p-window__text_time {
    letter-spacing: -0.04em;
    line-height: 1.4;
    --clamp-min:13;
    --clamp-max:14;
    font-size: var(--clamp);
    text-align: center;
    font-weight: var(--font-weight-medium);
    margin-block-end: clamp(12px, calc(26 * var(--fluid-px)), 26px);
}

.modal-content h5 {
    letter-spacing: -0.04em;
    --clamp-min:15;
    --clamp-max:22;
    font-size: var(--clamp);
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-darkblue);
    margin-block-end: clamp(2px, calc(4 * var(--fluid-px)), 4px);
}

.p-window__text {
    letter-spacing: -0.04em;
    --clamp-min:12;
    --clamp-max:16;
    font-size: var(--clamp);
    font-weight: var(--font-weight-medium);
    margin-block-end: clamp(12px, calc(26 * var(--fluid-px)), 26px);
}

.p-window__link {
    text-align: center;
    --clamp-min:20;
    --clamp-max:26;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.p-window__line {
    margin-block: clamp(16px, calc(28 * var(--fluid-px)), 32px);
    font-weight: var(--font-weight-medium);
}

.p-window__link a {
    color: var(--color-link);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;    
}

.flex__container {
    letter-spacing: -0.02em;
    --clamp-min:12;
    --clamp-max:16;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.flex__container--normal {
    letter-spacing: -0.04em;
    --clamp-min:12;
    --clamp-max:16;
    font-size: var(--clamp);
    font-weight: var(--font-weight-medium);
    margin-block-start: clamp(-26px, calc(-26 * var(--fluid-px)), 12px);
}

.p-window__list {
    letter-spacing: -0.02em;
    --clamp-min:10;
    --clamp-max:16;
    font-weight: var(--font-weight-medium);
    margin-block-end: clamp(12px, calc(26 * var(--fluid-px)), 26px);
}

.p-window__list li {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.6;
    font-weight: 500;
}

.p-window__list li::before {
    margin-right: -0.05em
}

.p-window__text--blue {
    color: var(--color-darkblue);
    font-weight: var(--font-weight-bold);
}

.p-window__text-info a {
    text-decoration: underline;
}

.p-shop__main {
    margin-block-end: 0.5em;
}

.p-window__text_caption {
    text-align: center;;
    line-height: 1.4;
    --clamp-min: 12;
    --clamp-max: 18;
    font-size: var(--clamp);
    font-weight: var(--font-weight-regular);
    margin-block-end: clamp(15px, calc(30 * var(--fluid-px)), 30px);
}

.sp_view .flex__container {
    display: flex;
    align-items: flex-start;
}

.sp_view .label {
    display: flex;
    white-space: nowrap;
}

@media screen and (min-width: 1025px) { 
    .flex__container {
        display: flex;
        align-items: flex-start;
    }

    .label {
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .modal-content {
        padding-inline: 8px;
    }
    h5.small {
        letter-spacing: -0.05em;
    }
}

@media (max-width: 374px) {
    .modal-content {
        padding-inline: 8px;
    }
    h5.small {
        font-size: 94%;
    }
}