@charset "UTF-8";

/* ====================================================
base
==================================================== */
.fr-contents *,
.pagemodal * {
    box-sizing: border-box;
}

.fr-contents,
.pagemodal {
    --main-color: #121212;
    --brand-color: #b0a79d;
    --text-color: #837665;
    --en: "Montserrat", sans-serif;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    text-align: center;
}

.fr-textcolor {
    color: var(--text-color);
}

#siteWrapper .cmnRecomWrap {
    padding-top: 0 !important;
}


/* ====================================================
common
==================================================== */

.fr-contents .pc,
.mfp-wrap .pc {
    display: block;
}

.fr-contents .sp,
.mfp-wrap .sp {
    display: none;
}

@media (max-width:767px) {

    .fr-contents .pc,
    .mfp-wrap .pc {
        display: none;
    }

    .fr-contents .sp,
    .mfp-wrap .sp {
        display: block;
    }
}

.iblock {
    display: inline-block;
}

.fr-contents .text-center {
    text-align: center;
}

.fr-contents .mbtm1 {
    margin-bottom: 1em;
}

.fr-contents .mbtm2 {
    margin-bottom: 2em;
}

.fr-contents .en,
.pagemodal .en {
    font-family: var(--en);
}

.fr-contents sup,
.pagemodal sup {
    display: inline-block;
    font-size: .7em;
    text-align: top;
    transform: translateY(-.5em);
}

.fr-contents img,
.pagemodal img {
    max-width: 100%;
    vertical-align: top;
}


.objectfit-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.objectfit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: min(80px, 15vw) min(2em, 5vw);
    overflow: clip;
}

.fr-contents .border-hd {
    width: fit-content;
    padding: .5em .75em;
    margin: 0 auto 2em;
    font-size: min(1.1em, 3.8vw);
    font-weight: 600;
    border-top: solid 1px;
    border-bottom: solid 1px;
    letter-spacing: .1em;
}

.fr-contents .title {
    font-size: min(2.4em, 5.4vw);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 2em;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}

.fr-contents .title-lead {
    font-size: min(1.2em, 4vw);
    line-height: 1.8;
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: .05em;
    margin-bottom: 1em;
}


/* note style */
ul.note {
    line-height: 1.6em;
}

ul.note li {
    padding-left: 1.1em;
    position: relative;
}

ul.note li:not(:last-child) {
    margin-bottom: .3em;
}

ul.note li::before {
    content: '※';
    display: inline-block;
    position: absolute;
    left: 0;
}

ul.numnote {
    counter-reset: numnote;
}

ul.numnote li {
    padding-left: 2em;
}

ul.numnote li::before {
    content: '※' counter(numnote);
    counter-increment: numnote;
    letter-spacing: .1em;
}

ul.numnote.countreset-2 {
    counter-reset: numnote 1;
}

ul.numnote.countreset-3 {
    counter-reset: numnote 2;
}

ul.numnote.countreset-4 {
    counter-reset: numnote 3;
}

ul.numnote.countreset-5 {
    counter-reset: numnote 4;
}

ul.numnote.countreset-6 {
    counter-reset: numnote 5;
}


/* ====================================================
header
==================================================== */
.fr-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 3em;
    padding-left: 0;
    position: relative;
    background-color: var(--brand-color);
}

@media (max-width:680px) {
    .fr-header {
        padding: 1.5em 1.5em 2em;
        flex-wrap: wrap;
    }
}

/* main textbox */
.fr-contents .main-title-box {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:767px) {
    .fr-contents .main-title-box {
        width: 50%;
    }

    @media (max-width:680px) {
        .fr-contents .main-title-box {
            width: 100%;
            padding: 2em 0 3em;
        }
    }
}

.fr-contents .main-title-box-inner {
    width: 75%;
    margin: 0 auto;
    max-width: 520px;
}

@media (max-width:680px) {
    .fr-contents .main-title-box-inner {
        width: 85%;
    }
}

.fr-contents .main-title-box .main-logo {
    width: 100%;
    animation: startAnime .8s .5s ease-in both;
    opacity: 0;
}

@keyframes startAnime {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.fr-contents .main-title-box .main-lead {
    font-size: min(1.4em, 4vw);
    text-align: center;
    margin-bottom: .4em;
    letter-spacing: .1em;
    text-indent: .25em;
    color: #fff;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
}

.fr-contents .main-title {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
}

.fr-contents .main-title .main-lead {
    width: 100%;
    font-size: min(2.5em, 6vw);
    color: #fff;
    font-weight: 500;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: .2em;
    text-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

/* main img */
.fr-contents .main-wrp {
    width: 60%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

@media (max-width:767px) {
    .fr-contents .main-wrp {
        width: 50%;
    }

    @media (max-width:680px) {
        .fr-contents .main-wrp {
            width: 100%;
        }
    }
}

.fr-contents .main {
    display: block;
    width: 100%;
    height: fit-content;
    aspect-ratio: 4.5/3;
    overflow: hidden;
    position: relative;
}

@media (max-width:767px) {

    .fr-contents .main-wrp,
    .fr-contents .main {
        aspect-ratio: 1/1;
        height: max-content;
    }

    @media (max-width:680px) {
        .fr-contents .main-wrp,
        .fr-contents .main {
            aspect-ratio: 1/.62;
        }
    }
}

.main.scrl_zoom-start,
.main.scrl_zoom-start.on {
    transition: all 2s .1s ease;
}

.fr-contents .main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-wrp-btn {
    position: absolute;
    right: 4em;
    bottom: 4em;
    z-index: 10;
}

@media (max-width:680px) {
    .main-wrp-btn {
        right: min(2.5em, 7.5vw);
        bottom: min(3em, 9vw);
    }
}

.main-wrp-btn .slick-pause {
    width: min(2em, 10vw);
    height: min(2em, 10vw);
    border-radius: 100%;
    border: solid 2px;
    color: #fff;
    background-color: rgb(50 50 50/.3);
    box-shadow: 0 1px 4px 0 rgb(0 0 0/.3);
    cursor: pointer;
    position: relative;
}

.main-wrp-btn .slick-pause::before,
.main-wrp-btn .slick-pause::after {
    position: absolute;
    inset: 50%;
}

.main-wrp-btn .slick-pause.paused::before {
    content: none;
}

.main-wrp-btn .slick-pause::before {
    content: '';
    width: 20%;
    aspect-ratio: 1/1.8;
    border-left: solid 3px;
    border-right: solid 3px;
    transform: translate(-50%, -50%);
}

.main-wrp-btn .slick-pause.paused::after {
    content: '';
}

.main-wrp-btn .slick-pause::after {
    content: none;
    width: 33%;
    aspect-ratio: 1/1.2;
    background-color: currentcolor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-36%, -50%);
}

/* ====================================================
page nav
==================================================== */
.sticky-area {
    position: relative;
}

.fr-nav {
    width: 100%;
    background-image: url(../img/wood.webp);
    backdrop-filter: blur(6px);
    z-index: 99;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

@media (max-width:680px) {
    .fr-nav {
        top: 0;
    }
}

.fr-nav ul {
    width: min(1200px, 100%);
    margin: 0 auto;
    flex-wrap: nowrap;
}

.fr-nav li {
    width: 25%;
}

@media (max-width:680px) {
    .fr-nav li:nth-child(1) {
        width: 23%;
    }

    .fr-nav li:nth-child(2) {
        width: 30%;
    }

    .fr-nav li:nth-child(3) {
        width: 22%;
    }
}

.fr-nav a {
    width: 100%;
    height: 100%;
    display: block;
    padding: min(1.5em, 4vw) min(1em, 1vw);
    font-size: min(1.1em, 3vw);
    transition: all .25s ease;
    font-weight: 600;
    color: #222;
}

@media (max-width:680px) {
    .fr-nav a {
        display: grid;
        place-items: center;
    }
}

.fr-nav a:hover {
    background-color: rgba(255, 255, 255, .7);
    color: var(--brand-color);
}

/* ====================================================
contents - lead
==================================================== */
.fr-lead .lead {
    font-size: min(1.8em, 4.6vw);
    line-height: 2;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin-bottom: 1em;
}

.fr-lead .lead2 {
    font-size: min(1.1em, 3.6vw);
    line-height: 2.2;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin-bottom: 1em;
}

@media (max-width:767px) {
    .fr-lead .lead {
        letter-spacing: 0;
    }
}

.fr-lead .img {
    width: min(710px, 100%);
    margin: 4em auto 0;
}

.fr-cp {
    position: relative;
}

.fr-cp.fr-banner .inner {
    padding-top: min(40px, 5vw);

}

/* bg bubble */
.pattern-bg-lt {
    display: block;
    width: 30%;
    position: absolute;
    top: -20%;
    right: 0;
    z-index: 0;
    opacity: .7;
    overflow: hidden;
    z-index: -1;
}

@media (max-width:767px) {
    .pattern-bg-lt {
        width: 58%;
        top: -12%;
        right: -6%;
    }
}

.pattern-bg-rb {
    display: block;
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    opacity: .3;
    text-align: right;
}

@media (max-width:767px) {
    .pattern-bg-rb {
        width: 60%;
    }
}

.pattern-table-bg {
    display: block;
    width: 140%;
    position: absolute;
    top: -10%;
    left: -20%;
    z-index: 0;
    opacity: .6;
}

@media (max-width:767px) {
    .pattern-table-bg {
        width: 70%;
        top: -20%;
        left: 8%;
    }
}


/* concept */
.fr-concept {
    overflow: hidden;
}

.fr-concept .title {
    margin-bottom: 1em;
}

.fr-concept .title-concept {
    font-size: min(2em, 5.5vw);
    letter-spacing: .1em;
    margin-bottom: 1em;
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: .05em;
}

.fr-concept .lead {
    font-size: min(1.1em, 4vw);
    line-height: 2;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
}

.fr-concept .lead .i-block {
    display: inline-block;
}

/* banner */
.fr-banner .banner {
    width: 100%;
    display: flex;
    max-width: 720px;
    margin: 0 auto;
    border: 2px solid var(--brand-color);
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(93, 83, 83, 0.1);
    transition: background .3s 0s ease;
}

.fr-banner .banner:hover {
    /* box-shadow: 0 2px 8px rgba(93, 83, 83, 0.5); */
    background-color: rgba(93, 83, 83, 0.05);
}

@media (max-width:640px) {
    .fr-banner .banner {
        display: block;
        width: min(360px, 90%);
    }
}

.fr-banner .banner .img-box {
    width: 40%;
    position: relative;
}

@media (max-width:640px) {
    .fr-banner .banner .img-box {
        width: 100%;
        padding: 1em;
    }
}

.fr-banner .banner .box-shadow {
    display: block;
    width: 254px;
    max-width: 95%;
    position: absolute;
    right: 0;
    bottom: 1em;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    z-index: 1;
}

@media (max-width:640px) {
    .fr-banner .banner .box-shadow {
        width: 100%;
        max-width: 100%;
        position: static;
    }
}


.fr-banner .banner .txt-box {
    width: 60%;
    padding: 1em 1em 1.5em;
}

@media (max-width:640px) {
    .fr-banner .banner .txt-box {
        width: 100%;
        padding: 0 1em 1.5em;
    }
}

.fr-banner .banner-logo {
    display: block;
    width: 70%;
    max-width: 560px;
    margin: 1em auto 1.5em;
}

.fr-banner .banner-title {
    display: block;
    font-size: min(1.4em, 3.5vw);
    font-weight: 600;
    margin: -.2em auto .75em;
}

.fr-banner .banner-lead {
    display: block;
    font-size: min(.9em, 3.5vw);
    font-weight: 400;
    margin-bottom: 1.5em;
}

.fr-banner .banner-btn {
    display: block;
    width: 17em;
    background-color: var(--text-color);
    padding: .75em 3.5em;
    font-size: min(.95em, 3.6vw);
    border-radius: 2em;
    margin: 0 auto;
    color: #fff;
    font-weight: 500;
    transition: background-color .3s 0s ease;
}

.fr-banner .banner:hover .banner-btn {
    background-color: #222;
}

/* ====================================================
contents - fr-technology / fr-comfortable
==================================================== */
.fr-technology {
    background-color: #ebe5de;
}

/* slider */
.design-slider-nav .slider-thumb {
    cursor: pointer;
    padding: 2em 1em 0;
}

.design-slider-nav .slick-track {
    transform: none !important;
    margin: auto;
}

.design-slider-nav img {
    width: 100%;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    opacity: .5;
    transition: opacity .5s;
}

.design-slider-nav .slick-current img {
    opacity: 1;
}

.fr-technology1 {
    background-color: #fff;
    /* background-color: #f4f4f3; */
}

.fr-technology1 .inner {
    padding-bottom: 0;
}

.fr-comfortable {
    background-color: #fff;
    padding-bottom: 3em;
}

.tech-img-wrp {
    max-width: 980px;
    margin: 0 auto;
    padding: min(80px, 15vw) min(1em, 5vw);
}

.tech-img-wrp .img-wrp {
    overflow: hidden;
    border-radius: 1em;
}

.rbox {
    overflow: hidden;
    border-radius: 1em;
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

.features-wrp {
    margin-bottom: 5em;
}

@media (max-width:767px) {
    .features-wrp {
        margin-bottom: 3em;
        flex-direction: column;
    }

    .features-wrp+.features-wrp {
        margin-bottom: 2em;
    }
}

.features-wrp .img-box {
    border-radius: 1em;
    overflow: hidden;
}

.features-wrp .txt-box,
.features-wrp .img-box {
    width: 49%;
    aspect-ratio: 4/3;
}

@media (max-width:767px) {

    .features-wrp .txt-box,
    .features-wrp .img-box {
        width: 100%;
    }

    .features-wrp .img-box {
        order: 1;
    }
}

.features-wrp .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.features-wrp.comfortable1 .img-box {
    align-self: flex-start;
    aspect-ratio: unset;
}

.features-wrp.comfortable1 .img-box img {
    height: auto;
    object-fit: unset;
}

.features-wrp .txt-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 3em 0;
}

@media (max-width:767px) {
    .features-wrp .txt-box {
        order: 2;
        padding-bottom: 0;
        aspect-ratio: unset;
    }
}

.features-wrp .txt-box-inner {
    text-align: left;
    width: 80%;
    max-width: 500px;
    margin: auto;
    position: relative;
}

@media (max-width:767px) {
    .features-wrp .txt-box-inner {
        width: 96%;
    }
}

.features-thumb-wrp {
    width: 80%;
    margin: 2em auto;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
}

@media (max-width:767px) {
    .features-thumb-wrp {
        width: 96%;
    }
}

.features-thumb-wrp .thumb {
    border-radius: .4em;
    overflow: hidden;
}

.features-thumb-wrp.flex-between .thumb {
    width: 48%;
    height: fit-content;
    aspect-ratio: 1/1;
}

.features-thumb-wrp.flex-between .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-title {
    font-size: min(1.6em, 4.5vw);
    line-height: 1.6;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin-bottom: 1em;
    position: relative;
    z-index: 2;
}

.feature-lead {
    font-size: min(.9em, 3.5vw);
    line-height: 1.8;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    margin-bottom: 1em;
    text-align: justify;
    position: relative;
    z-index: 2;
}

.features-wrp .note {
    font-size: min(.8em, 3.2vw);
    line-height: 1.7;
    letter-spacing: .05em;
}

.features-wrp .note .sml {
    display: inline-block;
    margin-right: .2em;
    font-size: .7em;
    vertical-align: .1em;
}

/* ====================================================
contents - fr-interior
==================================================== */
.fr-interior {
    background-color: #e9e7e3;
}

.interior-selection-wrp .interior-img {
    width: 200px;
    height: auto;
}

.interior-selection-wrp {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    border-radius: 1em;
    position: relative;
    overflow: hidden;
}

.interior-selection-wrp .interior {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    position: relative;
    overflow: hidden;
}

.interior-selection-wrp .interior-img {
    width: 50%;
    flex-grow: 1;
}

@media (max-width: 767px) {
    .interior-selection-wrp .interior-img {
        width: 100%;
        order: 1;
    }
}

.interior-selection-wrp .interior-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interior-selection-wrp .interior-text {
    width: min(420px, 40%);
    padding: 3em;
    text-align: left;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .interior-selection-wrp .interior-text {
        width: 100%;
        padding: 2em 2em 5em;
        order: 2;
    }
}

.interior-selection-wrp .interior-text .interior-type-hd {
    font-size: min(1em, 3.4vw);
}

.interior-selection-wrp .interior-text .interior-type-title {
    margin: .2em 0 1em;
    font-size: min(1.8em, 5.8vw);
}

.interior-selection-wrp .interior-text .interior-color {
    display: inline-block;
    width: 3em;
    font-family: var(--en);
    font-weight: 300;
}

.interior-selection-wrp .interior-text .cross {
    display: inline-block;
    position: relative;
    width: .5em;
    height: .5em;
    margin: 0 .3em;
}

.interior-selection-wrp .interior-text .cross::before,
.interior-selection-wrp .interior-text .cross::after {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 1px solid;
}

.interior-selection-wrp .interior-text .cross::before {
    transform: translate(-50%) rotate(45deg);
}

.interior-selection-wrp .interior-text .cross::after {
    transform: translate(-50%) rotate(-45deg);
}

.interior-selection-wrp .interior-text .interior-type {
    font-size: .5em;
    vertical-align: .1em;
}

.interior-selection-wrp .interior-text .interior-lead {
    font-size: min(.9em, 3.6vw);
    line-height: 2;
}

.interior-selection-wrp .slick-dotted.slick-slider {
    margin: 0;
}


/* slider arrows/dots */
.interior-selection-wrp .arrow-box {
    --border-width: 1.5px;
    position: absolute;
    left: min(210px, 20%);
    bottom: 2.5em;
    top: unset;
    transform: translate(80px, 50%);
}

@media (max-width: 767px) {
    .interior-selection-wrp .arrow-box {
        left: 50%;
    }
}

/* pause */
.interior-selection-wrp .arrow-box .slick-pause {
    width: min(1.2em, 8vw);
    height: min(1.2em, 8vw);
    font-size: min(1.4em, 2.3vw);
    border-radius: 100%;
    border: solid var(--border-width);
    color: #666;
    position: relative;
    cursor: pointer;
    z-index: 2;
    transition: color .2s 0s ease;
}

@media (max-width: 767px) {
    .interior-selection-wrp .arrow-box .slick-pause {
        font-size: min(1.5em, 5.8vw);
    }
}

.interior-selection-wrp .arrow-box .slick-pause:hover {
    color: var(--hover-color);
}

.interior-selection-wrp .arrow-box .slick-pause::before,
.interior-selection-wrp .arrow-box .slick-pause::after {
    position: absolute;
    inset: 50%;
}

.interior-selection-wrp .arrow-box .slick-pause.paused::before {
    content: none;
}

.interior-selection-wrp .arrow-box .slick-pause::before {
    content: '';
    width: 25%;
    aspect-ratio: 1/1.5;
    border-left: solid var(--border-width);
    border-right: solid var(--border-width);
    transform: translate(-50%, -50%);
}

.interior-selection-wrp .arrow-box .slick-pause.paused::after {
    content: '';
}

.interior-selection-wrp .arrow-box .slick-pause::after {
    content: none;
    width: 33%;
    aspect-ratio: 1/1.2;
    background-color: currentcolor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-36%, -50%);
}

/* dots */
.interior-selection-wrp .slick-dots {
    width: min(420px, 40%);
    padding-right: 2em;
    position: absolute;
    left: 0;
    bottom: 2.5em;
    top: unset;
    transform: translate(0, 50%);

}

@media (max-width:767px) {
    .interior-selection-wrp .slick-dots {
        width: 100%;
    }
}

.slick-dots {
    --dot-color: #f9f9f9;
    --dot-opacity: 1;
    --dot-size: 14px;
    --dot-notactivecolor: #ddd;
    --dot-activeopacity: 1;
    --dot-notactiveopacity: 1;
    top: calc(100% + 1.5em);
    bottom: unset;
}

.slick-dots li button::before {
    border: solid 1px var(--brand-color) !important;
    background-color: var(--dot-activecolor) !important;
    transform: scale(.7);
    transition: transform .3s;
}

.slick-dots li.slick-active button::before {
    transform: scale(1);
}

.slick-dots li:nth-child(1) button::before {
    --dot-activecolor: #fff;
}

.slick-dots li:nth-child(2) button::before {
    --dot-activecolor: #d0bda0;
}

.slick-dots li:nth-child(3) button::before {
    --dot-activecolor: #60494a;
}

.slick-dots li:nth-child(4) button::before {
    --dot-activecolor: #000;
}


/* ====================================================
contents - fr-plan
==================================================== */
.fr-plan .plan-img-wrp {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 4em;
}

@media (max-width:767px) {
    .fr-plan .plan-img-wrp {
        margin-bottom: 0;
        flex-wrap: wrap;
    }
}

.fr-plan .plan-img-wrp .fig-note {
    width: 100%;
    margin-bottom: .5em;
    font-size: .9em;
    display: none;
}

.fr-plan .plan-img-wrp .fig-note .num {
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: 0 .5em;
    background-color: #516953;
    color: #fff;
    line-height: 2;
    font-size: 1em;
    position: relative;
    z-index: 1;
}

@media (max-width:767px) {
    .fr-plan .plan-img-wrp .fig-note {
        display: block;
    }
}

.fr-plan .plan {
    width: 50%;
    position: relative;
    overflow: hidden;
}

@media (max-width:767px) {
    .fr-plan .flor1 {
        width: 65%;

    }

    .fr-plan .flor2 {
        width: 35%;

    }

    @media (max-width:680px) {

        .fr-plan .flor1,
        .fr-plan .flor2 {
            width: min(360px, 100%);
            margin: 0 auto;
        }
    }
}

.fr-plan .plan::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    background-color: #fff;
    color: var(--brand-color);
    border: 2px solid;
    border-radius: 100%;
    font-weight: 600;
    font-family: var(--en);
    font-size: min(1em, 4vw);
    position: absolute;
    bottom: 2.5em;
    left: 1.5em;

}

.fr-plan .flor1::after {
    content: '1F';
}

.fr-plan .flor2::after {
    content: '2F';
}

@media (max-width:767px) {
    .fr-plan .plan::after {
        bottom: 2em;
        left: 1em;
    }
}

.fr-plan .plan .num {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: none;
}

@media (max-width:767px) {
    .fr-plan .plan .num {
        display: block;
    }
}


.fr-plan .plan .num1 {
    left: 55%;
    top: 61%;
}

.fr-plan .plan .num2 {
    left: 56%;
    top: 44%;
}

.fr-plan .plan .num3 {
    left: 54%;
    top: 33%;
}

.fr-plan .plan .num4 {
    left: 30%;
    top: 50%;
}

@media (max-width:680px) {
    .fr-plan .plan .num1 {
        left: 55%;
        top: 62%;
    }

    .fr-plan .plan .num2 {
        left: 56%;
        top: 44%;
    }

    .fr-plan .plan .num3 {
        left: 55%;
        top: 26%;
    }

    .fr-plan .plan .num4 {
        left: 39%;
        top: 67%;
    }
}

.fr-plan .plan .num span {
    display: block;
    width: 1.7em;
    height: 1.7em;
    background-color: #516953;
    color: #fff;
    line-height: 1.7;
    font-size: 1.2em;
    position: relative;
    z-index: 1;
}

.fr-plan .plan .num::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    transform: scale(1.3);
    filter: blur(3px);
    z-index: -1;
    animation: blurLoop 2.4s 0s infinite linear;
}

@keyframes blurLoop {
    5% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(.9);
    }

    95% {
        transform: scale(1.3);
    }
}

.fr-plan .plan img {
    position: relative;
}

.fr-plan .flor2 img {
    margin-left: -25%;
}

@media (max-width:767px) {
    .fr-plan .flor2 img {
        max-width: 178%;
        height: auto;
        margin-left: -40%;
    }

    @media (max-width:680px) {
        .fr-plan .flor2 img {
            max-width: 100%;
            margin: -20% 0 -10%;
        }
    }
}

/* plan info table */
.fr-plan .plan-info-wrp {
    width: 15%;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media (max-width:767px) {
    .fr-plan .plan-info-wrp {
        width: min(25em, 100%);
        margin: 0 auto;
        position: relative;
    }
}

.fr-plan .plan-info-wrp .plan-info-table-wrp {
    width: 100%;
}

@media (max-width:767px) {
    .fr-plan .plan-info-wrp .plan-info-table-wrp {
        display: flex;
        align-items: flex-start;
        gap: 0 2em;

    }
}

.fr-plan .plan-info-wrp .plan-info {
    width: 100%;
    margin-bottom: 1em;
}

.fr-plan .plan-info-wrp .plan-info tr {
    border-bottom: 1px solid var(--brand-color);
}

.fr-plan .plan-info-wrp .plan-info th,
.fr-plan .plan-info-wrp .plan-info td {
    padding: .5em;
    font-size: min(.8em, 3.5vw);
    line-height: 1.4;
    vertical-align: middle;
    text-align: left;
}

.fr-plan .plan-info-wrp .plan-info td.label {
    font-size: min(.75em, 3.3vw);
}

.fr-plan .plan-info-wrp .plan-info th {
    color: var(--brand-color);
    font-weight: 600;
}

.fr-plan .dot-title {
    display: block;
    position: relative;
    padding-left: .75em;
}

.fr-plan .dot-title::before {
    content: '';
    width: .25em;
    height: .25em;
    border: 4px solid;
    border-radius: 100%;
    position: absolute;
    top: .3em;
    left: -.5em;
}

.fr-plan .plan-info-wrp .unit {
    font-size: .8em;
}

/* point */
.fr-plan .point-box {
    width: 22%;
}

@media (max-width:767px) {
    .fr-plan .point-box {
        display: none;
    }
}

.fr-plan .point-number,
.pagemodal .point-number {
    margin-bottom: 1em;
    font-weight: 600;
}

.fr-plan .img-box,
.pagemodal .img-box {
    width: 100%;
    height: fit-content;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5em;
}

.fr-plan .img-box img,
.pagemodal .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-plan .txt-box,
.pagemodal .txt-box {
    width: 100%;
    text-align: left;
    margin-bottom: 1em;
    padding: 0 1em;
}

.fr-plan .point-title,
.pagemodal .point-title {
    font-size: min(.9em, 3.8vw);
    margin-bottom: 1em;
    /* white-space: nowrap; */
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
}

.fr-plan .point-lead,
.pagemodal .point-lead {
    font-size: min(.8em, 3.4vw);
    margin-bottom: 1em;
}

/* web plan banner */
.fr-banner-plan {
    background-color: #f4f4f3;
}

.fr-banner-plan .banner {
    width: min(640px, 100%);
    margin: 0 auto;
    display: flex;
    border: 2px solid var(--brand-color);
    background-color: var(--brand-color);
    box-shadow: 0 1px 4px rgba(93, 83, 83, 0.1);
    position: relative;
    transition: background-color .3s 0s ease;
}

.fr-banner-plan .banner:hover {
    background-color: color-mix(var(--brand-color), #fff 20%);
}

@media (max-width:600px) {
    .fr-banner-plan .banner {
        width: min(400px, 100%);
    }
}

.fr-banner-plan .banner .txt-box {
    width: 65%;
    padding: 2em 1em 3em;
}

@media (max-width:600px) {
    .fr-banner-plan .banner .txt-box {
        width: 60%;
        padding: min(1.5em, 3.5vw) .5em min(2em, 7vw);
    }
}

.fr-banner-plan .banner .banner-logo {
    display: block;
    width: 70%;
    max-width: 460px;
    margin: 1em auto 0;
}

@media (max-width:600px) {
    .fr-banner-plan .banner .banner-logo {
        width: 85%;
    }
}

.fr-banner-plan .banner .banner-title {
    display: block;
    font-size: min(1.4em, 3.5vw);
    font-weight: 600;
    color: #fff;
    margin: 0 auto .75em;
}

.fr-banner-plan .banner .banner-btn {
    display: inline-block;
    margin-left: 1em;
    padding-bottom: .5em;
    position: relative;
}

@media (max-width:600px) {
    .fr-banner-plan .banner .banner-btn {
        font-size: min(.95em, 3.6vw);
    }
}

.fr-banner-plan .banner .banner-btn::before ,
.fr-banner-plan .banner .banner-btn::after {
    content: '';
    border-bottom: solid 1px;
    position: absolute;
    right: -1.5em;
    transition: right .3s 0s ease;
}

.fr-banner-plan .banner .banner-btn::before {
    bottom: 0;
    left: -.5em;
}

.fr-banner-plan .banner .banner-btn::after {
    width: 1em;
    bottom: 0;
    transform: rotate(45deg);
    transform-origin: right bottom;
}

@media (max-width:600px) {
    .fr-banner-plan .banner .banner-btn::before ,
    .fr-banner-plan .banner .banner-btn::after {
        right: -1.2em;
    }
}

.fr-banner-plan .banner:hover .banner-btn::before ,
.fr-banner-plan .banner:hover .banner-btn::after {
    right: -2em;
}

@media (max-width:600px) {
    .fr-banner-plan .banner:hover .banner-btn::before ,
    .fr-banner-plan .banner:hover .banner-btn::after {
        right: -1.75em;
    }
}


.fr-banner-plan .banner .img-box {
    width: 35%;
    position: relative;
}

@media (max-width:600px) {
    .fr-banner-plan .banner .img-box {
        width: 40%;
    }
}

.fr-banner-plan .banner .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8em;
    height: 8em;
    font-size: min(.9em, 3vw);
    border: 1.5px solid var(--brand-color);
    background-color: #fff;
    color: var(--text-color);
    font-weight: 600;
    border-radius: 100%;
    position: absolute;
    bottom: -1em;
    right: -2.5em;
    box-shadow: 0 1px 4px rgba(131, 118, 101, 0.5);

}

@media (max-width:767px) {
    .fr-banner-plan .banner .circle {
        right: -1.75em;
    }

    @media (max-width:600px) {
        .fr-banner-plan .banner .circle {
            width: 7.5em;
            height: 7.5em;
            bottom: -2em;
            right: -1.5em;
        }
    }
}

.fr-banner-plan .banner .box-shadow {
    width: calc(100% - 4em);
    position: absolute;
    right: 4em;
    bottom: 1.5em;
    /* transform: translate(-50%); */
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);

}

@media (max-width:600px) {
    .fr-banner-plan .banner .box-shadow {
        width: calc(100% - 3em);
        right: 1.75em;
    }
}


/*==============================================================
modal-contents
==============================================================*/
.modal-contents {
    display: none;
}

.pagemodal-bg,
.pagemodal-bg *,
.pagemodal,
.pagemodal * {
    box-sizing: border-box;
}

.pagemodal-bg {
    width: 100dvw;
    height: 100dvh;
    padding: min(5em, 15vw) min(4em, 5vw) min(4em, 15vw);
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(233, 231, 227, 0.85);
    overflow-y: scroll;
    z-index: 80001;
    display: none;
    cursor: pointer;

}

.pagemodal-bg .close-btn {
    width: 3.5em;
    height: 3.5em;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    position: fixed;
    right: min(1em, 3vw);
    top: min(1em, 2vw);
    z-index: 8003;
}

.pagemodal-bg .close-btn::before,
.pagemodal-bg .close-btn::after {
    content: "";
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    border-top: solid 3px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-top-width: solid 3px #000;
}

.pagemodal-bg .close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pagemodal {
    width: min(1100px, 100%);
    margin: 0px auto;
    cursor: default;
    overflow: unset;
    position: relative;
    z-index: 8002;
    display: none;
    pointer-events: none;
}

.pagemodal img {
    max-width: 100%;
}

.pagemodal-inner {
    width: 100%;
    margin: 0px auto;
    padding: min(2em, 8vw) min(2em, 5vw);
    border-radius: 1em;
    background-color: #fff;
    box-shadow: rgba(30, 30, 30, 0.4) 0px 0px 3px 0px;
    position: relative;
    pointer-events: auto;
}

html.pagemodal-open {
    overflow: clip;
    width: 100%;
    height: 100%;
}