/*#region var*/
:root {
    --pxunit: 1.1rem;
    --fontB: 'Noto Sans JP';
    --fontH: 'Hiragino Mincho ProN';
    --fontS: 'Source+Serif+4';
    --fontJ: 'Noto Serif JP';
    --fontM: 'Microsoft Sans Serif';
    /* Base font */
    --headerH: 16rem;
    --bg-black-color: #000000;
    --bg-font-color: #303030;
    --bg-white-color: #FFFFFF;
    --bg-orange-color: #FF8228;
    --bg-yellow-color: #F6C199;
    --font-size14: 1.2rem;
    --font-size14: 1.4rem;
    --font-size16: 1.6rem;
    --font-size18: 1.8rem;
    --font-size20: 2rem;
    --font-size22: 2.2rem;
    --font-size24: 2.4rem;
    --font-size26: 2.6rem;
    --font-size28: 2.8rem;
    --font-size30: 3rem;
    --font-size32: 3.2rem;
    --font-size32: 3.4rem;
    --font-size36: 3.6rem;
    --font-size38: 3.8rem;
    --font-size40: 4rem;
    --gap-unit: .8rem;
    --margin: 13rem;
    --border-radius: .8rem;
}

* {
    box-sizing: border-box;

}

html {
    font-size: .625vw;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    html {
        font-size: 2.5vw;
    }
}

body {
    margin: 0;
    padding: 0;
    font-size: var(--font-size16);
    font-family: var(--fontB);
    font-weight: 400;
    color: var(--bg-font-color);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--bg-white-color);
}

.hx1 {
    content: "";
    height: var(--pxunit);
}

.hx2 {
    content: "";
    height: calc(var(--pxunit)*2);
}

.hx3 {
    content: "";
    height: calc(var(--pxunit)*3);
}

.hx4 {
    content: "";
    height: calc(var(--pxunit)*4);
}

.hx5 {
    content: "";
    height: calc(var(--pxunit)*5);
}

.hx6 {
    content: "";
    height: calc(var(--pxunit)*6);
}

.hx7 {
    content: "";
    height: calc(var(--pxunit)*7);
}

.hx8 {
    content: "";
    height: calc(var(--pxunit)*8);
}

.hx9 {
    content: "";
    height: calc(var(--pxunit)*9);
}

.hx10 {
    content: "";
    height: calc(var(--pxunit)*10);
}

.hx11 {
    content: "";
    height: calc(var(--pxunit)*11);
}

.hx12 {
    content: "";
    height: calc(var(--pxunit)*12);
}

.hx13 {
    content: "";
    height: calc(var(--pxunit)*13);
}

.hx14 {
    content: "";
    height: calc(var(--pxunit)*14);
}

.hx15 {
    content: "";
    height: calc(var(--pxunit)*15);
}

.hx16 {
    content: "";
    height: calc(var(--pxunit)*16);
}

.hx17 {
    content: "";
    height: calc(var(--pxunit)*17);
}

.hx18 {
    content: "";
    height: calc(var(--pxunit)*18);
}

.hx19 {
    content: "";
    height: calc(var(--pxunit)*19);
}

.hx20 {
    content: "";
    height: calc(var(--pxunit)*20);
}

/*#endregion var*/

/*#region RESET*/
html,
body {
    overselling-x: hidden;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}

p {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

a:hover,
a:focus,
a:active {
    outline: none;
    text-decoration: none;
}

input {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

input:hover,
input:focus,
input:active {
    outline: none;
}

input::-webkit-input-placeholder {
    color: #333333;
}

input::-moz-placeholder {
    color: #333333;
}

input:-ms-input-placeholder {
    color: #333333;
}

input:-moz-placeholder {
    color: #333333;
}

textarea::-webkit-input-placeholder {
    color: #333333;
}

textarea::-moz-placeholder {
    color: #333333;
}

textarea:-ms-input-placeholder {
    color: #333333;
}

textarea:-moz-placeholder {
    color: #333333;
}

button:focus {
    outline: 0;
}

ul {
    margin: 0px;
    padding: 0px;
}

strong {
    font-weight: bold;
}

ul li {
    list-style-type: none;
}

img {
    border: 0px;
    pointer-events: auto;
    user-drag: none;
    -webkit-user-drag: none;
}

.clearfix {
    clear: both;
    overselling: hidden;
}

/*#endregion RESET*/

/*#region pspander*/
.pspander_header {
    cursor: pointer;
}

.pspander_opened {
    display: block;
}

.pspander_closed {
    display: none;
}

.pspander.pst_show .pspander_opened {
    display: none;
}

.pspander.pst_show .pspander_closed {
    display: block;
}

.pspander_collapse {
    display: none;
}

/*#endregion pspander*/
/*#region ANIMATION*/
/*#region opacity animation*/
.js_opac {
    opacity: 0;
    transition: all .6s;
    transition-delay: .3s;
}

.js_opac.on {
    opacity: 1;
}

/*#endregion opacity animation*/
/*#region spin animation*/
/* spin1 */
@keyframes spin1 {
    0% {
        transform: rotate(0deg)translate3d(7px, 0, 0);
    }

    100% {
        transform: rotate(360deg)translate3d(7px, 0, 0);
    }
}

/* spin2 */
@keyframes spin2 {
    0% {
        transform: rotate(0deg)translate3d(5px, 0, 0);
    }

    100% {
        transform: rotate(360deg)translate3d(5px, 0, 0);
    }
}

/* spin3 */
@keyframes spin3 {
    0% {
        transform: rotate(0deg)translate3d(6px, 0, 0);
    }

    100% {
        transform: rotate(360deg)translate3d(6px, 0, 0);
    }
}

/* spin4 */
@keyframes spin4 {
    0% {
        transform: rotate(0deg)translate3d(3px, 0, 0);
    }

    100% {
        transform: rotate(-360deg)translate3d(3px, 0, 0);
    }
}

/* spin5 */
@keyframes spin5 {
    0% {
        transform: rotate(0deg)translate3d(2px, 0, 0);
    }

    100% {
        transform: rotate(-360deg)translate3d(2px, 0, 0);
    }
}

.circleWrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.circle {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.c_pos01 {
    top: 0;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.9);
    -webkit-animation: spin1 5s linear infinite;
    -moz-animation: spin1 5s linear infinite;
    -ms-animation: spin1 5s linear infinite;
    -o-animation: spin1 5s linear infinite;
    animation: spin1 5s linear infinite;
    /*  	animation: bo-co1 10s infinite;
        -webkit-animation: bo-co1 10s infinite; */
}

.c_pos02 {
    top: 0;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.9);
    -webkit-animation: spin2 4s linear infinite;
    -moz-animation: spi2 4s linear infinite;
    -ms-animation: spin2 4s linear infinite;
    -o-animation: spin2 4s linear infinite;
    animation: spin2 4s linear infinite;
    /* 	animation: bo-co2 9s infinite;
        -webkit-animation: bo-co2 9s infinite; */
}

.c_pos03 {
    top: 0;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.9);
    -webkit-animation: spin3 7s linear infinite;
    -moz-animation: spi3 7s linear infinite;
    -ms-animation: spin3 7s linear infinite;
    -o-animation: spin3 7s linear infinite;
    animation: spin3 7s linear infinite;
    /* 	animation: bo-co3 11s infinite;
        -webkit-animation: bo-co3 11s infinite; */
}

.c_pos04 {
    top: 0;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.9);
    -webkit-animation: spin4 7s linear infinite;
    -moz-animation: spi4 7s linear infinite;
    -ms-animation: spin4 7s linear infinite;
    -o-animation: spin4 7s linear infinite;
    animation: spin4 7s linear infinite;
    /* 	animation: bo-co1 12s infinite;
        -webkit-animation: bo-co1 12s infinite; */
}

.c_pos05 {
    top: 0;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.9);
    -webkit-animation: spin5 8s linear infinite;
    -moz-animation: spi5 8s linear infinite;
    -ms-animation: spin5 8s linear infinite;
    -o-animation: spin5 8s linear infinite;
    animation: spin5 8s linear infinite;
    /* 	animation: bo-co2 10s infinite;
        -webkit-animation: bo-co2 10s infinite; */
}

/*#endregion spn animation*/
/*#region rotate animation*/
.rot360 {
    transform: rotate(0deg);
    animation: anim_rotate360 10s linear infinite;
}

@keyframes anim_rotate360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*#endregion rotate animation*/
/*#region clip-left-right animation*/
.panir3 {
    display: inline-block;
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);
    vertical-align: middle;
}

.panir3.on {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
}

.panil3 {
    display: inline-block;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);
    transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);
    vertical-align: middle;
}

.panil3.on {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
}

/*#endregion clip-left-right animation*/
/*#region pani text rising animation*/
.pani4 {
    display: flex;
    overselling: hidden;
}

.pani4 span {
    display: block;
    transform: translateY(100%);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: transparent;
}

.pani4.on span {
    color: #222;
    transform: translateY(0);
}

.pani4 span:nth-child(0) {
    transition-delay: 0ms;
}

.pani4 span:nth-child(1) {
    transition-delay: 80ms;
}

.pani4 span:nth-child(2) {
    transition-delay: 160ms;
}

.pani4 span:nth-child(3) {
    transition-delay: 240ms;
}

.pani4 span:nth-child(4) {
    transition-delay: 320ms;
}

.pani4 span:nth-child(5) {
    transition-delay: 400ms;
}

.pani4 span:nth-child(6) {
    transition-delay: 480ms;
}

.pani4 span:nth-child(7) {
    transition-delay: 560ms;
}

.pani4 span:nth-child(8) {
    transition-delay: 640ms;
}

.pani4 span:nth-child(9) {
    transition-delay: 720ms;
}

.pani4 span:nth-child(10) {
    transition-delay: 800ms;
}

.pani4 span:nth-child(11) {
    transition-delay: 880ms;
}

.pani4 span:nth-child(12) {
    transition-delay: 960ms;
}

.pani4 span:nth-child(13) {
    transition-delay: 1040ms;
}

.pani4 span:nth-child(14) {
    transition-delay: 1120ms;
}

.pani4 span:nth-child(15) {
    transition-delay: 1200ms;
}

.pani4 span:nth-child(16) {
    transition-delay: 1280ms;
}

.pani4 span:nth-child(17) {
    transition-delay: 1360ms;
}

.pani4 span:nth-child(18) {
    transition-delay: 1440ms;
}

.pani4 span:nth-child(19) {
    transition-delay: 1520ms;
}

.pani4 span:nth-child(19) {
    transition-delay: 1600ms;
}

/*endregion pani text rising animation*/
/*#region evelit animaiton*/
.initani {
    overselling: hidden;
    position: relative;
}

.initani::before,
.initani::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.initani_bw::before {
    background-color: #2b3f6c;
}

.initani_bw::after {
    background-color: #fff;
}

.initani.initani_ww::before {
    background-color: #fff;
}

.initani.initani_ww::after {
    background-color: #fff;
}

.initani.initani_wb::before {
    background-color: #fff;
}

.initani.initani_wb::after {
    background-color: #2b3f6c;
}

.initani.initani_wbk::before {
    background-color: #fff;
}

.initani.initani_wbk::after {
    background-color: #1A1A1A;
}

.initani.initani_bkw::before {
    background-color: #1A1A1A;
}

.initani.initani_bkw::after {
    background-color: #fff;
}

.initani.initani_bg::before {
    background-color: #2b3f6c;
}

.initani.initani_bg::after {
    background-color: #DEE9EC;
}

.initani.initani_bc::before {
    background-color: #2b3f6c;
}

.initani.initani_bc::after {
    background-color: #E9F9FA;
}

.initani.initani_wg::before {
    background-color: #fff;
}

.initani.initani_wg::after {
    background-color: #A9CD36;
}

.initani.initani_wy::before {
    background-color: #fff;
}

.initani.initani_wy::after {
    background-color: #A9CD36;
}

.initani.initani_wc::before {
    background-color: #fff;
}

.initani.initani_wc::after {
    background-color: #E9F9FA;
}

.initani.initani_tw::before {
    background-color: transparent;
}

.initani.initani_tw::after {
    background-color: #fff;
}

.initani.initani_tb::before {
    background-color: transparent;
}

.initani.initani_tb::after {
    background-color: #2b3f6c;
}

.initani::before {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.initani::after {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0) translateX(0);
    -ms-transform: scaleX(0) translateX(0);
    transform: scaleX(0) translateX(0);
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.anistart::before {
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transform: translateX(101%);
}

.anistart::after {
    -webkit-transform: scaleX(1) translateX(101%);
    -ms-transform: scaleX(1) translateX(101%);
    transform: scaleX(1) translateX(101%);
}

/*#endregion evelit animaiton*/
/*region coiran animation*/
@keyframes slideShow {
    0% {
        opacity: 0;
        transform: scale(1);
        -ms-transform: scale(1);
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        transform: scale(1.1);
        -ms-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
        -ms-transformm: scale(1);
    }
}

@-o-keyframes slideShow {
    0% {
        opacity: 0;
        -o-transform: scale(1);
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -o-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -o-transformm: scale(1);
    }
}

@-moz-keyframes slideShow {
    0% {
        opacity: 0;
        -moz-transform: scale(1);
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -moz-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -moz-transformm: scale(1);
    }
}

@-webkit-keyframes slideShow {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 0;
        -webkit-transformm: scale(1);
    }
}

/*endregion coiran animation*/
/*#region io animation*/
.pioup {
    -webkit-transition: color 0.4s ease 0s, background-color 0.4s ease 0s, opacity 1.0s ease 0s, -webkit-transform 1.0s ease 0s;
    transition: color 0.4s ease 0s, background-color 0.4s ease 0s, opacity 1.0s ease 0s, transform 1.0s ease 0s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.pioup.on {
    opacity: 1 !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
}

/*#endregion io animation*/
/*#endregion ANIMATION*/

/*#region COMMON*/
.pmh_anchor {
    transform: translateY(-100px);
    content: "";
    width: 100%;
    height: 0;
}

.jp_wbr {
    word-break: keep-all;
}

.disb_sp {
    display: none !important;
}

.disb_pc {
    display: block !important;
}

/*#endregion COMMON*/

/*#region HEADER*/

.header {
    display: contents;
}

.menu__button {
    position: fixed;
    top: 10dvh;
    top: 10svh;
    top: 10vh;
    right: var(--margin);
    z-index: 1001;
    mix-blend-mode: difference;
    padding: 0;
}

.menu__button-body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.6);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.menu__button-line-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.2);
}

.menu__button-line {
    position: relative;
    display: flex;
    width: 5rem;
    height: 1px;
    background-color: var(--bg-white-color);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu__button-line::before,
.menu__button-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-white-color);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: rotate(0deg);
    opacity: 0;
}

.menu__button.is-open .menu__button-line:nth-child(2) {
    background-color: transparent;
}

.menu__button.is-open .menu__button-line:nth-child(2):before,
.menu__button.is-open .menu__button-line:nth-child(2)::after {
    opacity: 1;
}

.menu__button.is-open .menu__button-line:nth-child(2):before {
    transform: rotate(25deg);
}

.menu__button.is-open .menu__button-line:nth-child(2)::after {
    transform: rotate(-25deg);
}

.menu__button.is-open .menu__button-line:nth-child(1),
.menu__button.is-open .menu__button-line:nth-child(3) {
    opacity: 0;
}

.menu__button-txt {
    font-size: var(--font-size14);
    font-family: var(--fontM);
    color: var(--bg-white-color);
    letter-spacing: .3rem;
}

.header__menu {
    position: fixed;
    top: 5vh;
    right: 10rem;
    min-width: 35rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 0 100%);
    transform: translate3d(0, 0, 0);
    transition:
        clip-path 0.48s cubic-bezier(0.33, 1, 0.32, 1),
        opacity 0.32s ease,
        visibility 0s linear 0.48s;
    will-change: clip-path;
    background-color: var(--bg-white-color);
    z-index: 999;
}

.header__menu.pst_open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transition:
        clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.36s ease 0.04s,
        visibility 0s linear 0s;
}

.header__menu-inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    padding: 8rem 6rem 6rem;
    transform-origin: 100% 0%;
    transition:
        opacity 0.35s ease 0.1s,
        transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) 0.06s;
}

.header__menu:not(.pst_open) .header__menu-inner {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.94);
}

.header__menu.pst_open .header__menu-inner {
    opacity: 1;
    transform: scale(1);
}

.header__menu-label {
    font-size: var(--font-size14);
    font-family: var(--fontM);
    font-weight: 500;
    color: #303030;
    letter-spacing: .3em;
}

.menu__nav {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3.5);
}

.menu__nav-item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*1.3);
    font-size: var(--font-size18);
    line-height: 1;
    color: var(--bg-font-color);
    text-decoration: none;
    transition: color 0.25s ease;
}

.menu__nav-item:hover,
.menu__nav-item:focus-visible {
    color: var(--bg-orange-color);
}

.menu__nav-item:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 0.35rem;
    border-radius: 2px;
}

.menu__nav-txt {
    position: relative;
    display: inline-block;
}

.menu__nav-txt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.28em;
    width: 100%;
    height: 1px;
    background-color: var(--bg-orange-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu__nav-item:hover .menu__nav-txt::after,
.menu__nav-item:focus-visible .menu__nav-txt::after {
    transform: scaleX(1);
}

.menu__nav-arrow {
    display: flex;
    width: .8rem;
    flex-shrink: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu__nav-item:hover .menu__nav-arrow,
.menu__nav-item:focus-visible .menu__nav-arrow {
    transform: translateX(0.4rem);
}

.menu__nav-arrow svg {
    width: 100%;
    transition: filter 0.25s ease;
}

.menu__nav-item:hover .menu__nav-arrow svg,
.menu__nav-item:focus-visible .menu__nav-arrow svg {
    filter: brightness(0.88);
}

@media (prefers-reduced-motion: reduce) {

    .header__menu,
    .header__menu.pst_open {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        clip-path: none !important;
        will-change: auto;
    }

    .header__menu:not(.pst_open) {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .header__menu-inner,
    .header__menu.pst_open .header__menu-inner {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .header__menu:not(.pst_open) .header__menu-inner {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .menu__nav-item,
    .menu__nav-arrow,
    .menu__nav-arrow svg,
    .menu__nav-txt::after {
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .menu__button-line {
        width: 3rem;
    }

    .header__menu {
        right: 1rem;
        min-width: 20rem;
    }

    .header__menu-inner {
        padding: 4rem 3rem 3rem;
    }

    .menu__nav-arrow {
        width: .5rem;
    }
}

@media (max-width: 450px) {
    .menu__button {
        top: 8dvh;
        top: 8svh;
        top: 8vh;
    }

    .menu__button-line {
        width: 4.5rem;
    }

    .menu__button-txt {
        font-size: 1.3rem;
        letter-spacing: .2rem;
    }

    .header__menu {
        top: 0;
        right: 0;
        min-width: 100%;
        height: 100%;
    }

    .header__menu-inner {
        padding: 15vh 5rem 3rem;
    }

    .menu__nav-arrow {
        width: .8rem;
    }

    .menu__nav-item {
        font-size: 1.7rem;
    }
}

.hide-scroll {
    overflow-x: hidden !important;
}

/*#endregion HEADER*/


/* -----------img animation---------- */
.animated__overlay {
    position: relative;
    overselling: hidden;
}

.animated__overlay:hover::before,
.animated__overlay:hover::after {
    translate: 0% 0%;
}

.animated__overlay::before {
    background: rgba(255, 255, 255, .3);
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    transition: all .4s cubic-bezier(0.46, 0.16, 0.24, 0.77);
    width: 101%;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: 0;
    top: 0;
    translate: 100% -100%;
    z-index: 99;
}

.animated__overlay::after {
    background: rgba(255, 255, 255, .3);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .4s cubic-bezier(0.46, 0.16, 0.24, 0.77);
    width: 101%;
    bottom: 0;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    right: 0;
    translate: -100% 100%;
    z-index: 99;
}

/* -----------brush animation---------- */
.brush.on {
    animation: brush01 2.4s 0.2s steps(22) forwards;
}

.brush {
    -webkit-mask: url("../img/brush.png");
    mask: url("../img/brush.png");
    -webkit-mask-size: 2500% 100%;
    mask-size: 2500% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

@keyframes brush01 {
    0% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    100% {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

/* -------fade up animation----- */
.fade_y.on {
    opacity: 1;
    transform: translateY(0%);
}

.fade_y {
    transform: translateY(30%);
    opacity: 0;
    transition: 0.8s;
}

/* -------clip path animation----- */
.clip_path {
    clip-path: inset(0% 100% 0% 0%);
    transition: clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.clip_path.on {
    clip-path: inset(0% 0% 0% 0%);
}

/* -------inview animation------ */
[data-inview] {
    mask-image: linear-gradient(270deg, transparent 35%, #000 60%, #000);
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0
}

[data-inview].inview,
[data-inview] * {
    transition: opacity 2.5s, -webkit-mask-position 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 2.5s, mask-position 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 2.5s, mask-position 2.5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-mask-position 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    opacity: 1;
}

[data-fade="up"] {
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

[data-fade="up"].fade-up {
    transform: translateY(0);
    opacity: 1;
}

/* --------txt blur animation------ */
.animation_txt span {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: var(--color-white);
}

.animation_txt>span {
    display: block;
    color: var(--color-white) !important;
}

/* -------rich fade animation------ */
.rich-fade {
    -webkit-mask: url(../img/mask.webp);
    mask: url(../img/mask.webp);
    -webkit-mask-size: 500% 100%;
    mask-size: 500% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
}

.rich-fade.on {
    animation: richFade 3.5s cubic-bezier(0.1, 1, 0.25, 1) .6s forwards;
}

@keyframes richFade {
    0% {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    100% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

/* --------txtin animation------- */
.anim-txtin {
    transform: translateY(clamp(0px, 7%, 300px)) scaleY(0.95);
    opacity: 0;
    filter: blur(10px);
}

.anim-txtin.on {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
    transition: transform 0.26s ease-out, opacity 0.26s ease-out, filter 0.26s ease-out;
}

/* ------js_bg animation----- */
.js_bg {
    position: relative;
    background-color: #E6E6E6
}

.js_bg::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: var(--bg-url);
    -webkit-background-size: cover !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    opacity: 0;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transition: opacity 0.6s, -webkit-transform 1.2s cubic-bezier(0, 0.54, 0, 1);
    transition: opacity 0.6s, -webkit-transform 1.2s cubic-bezier(0, 0.54, 0, 1);
    -o-transition: opacity 0.6s, transform 1.2s cubic-bezier(0, 0.54, 0, 1);
    transition: opacity 0.6s, transform 1.2s cubic-bezier(0, 0.54, 0, 1);
    transition: opacity 0.6s, transform 1.2s cubic-bezier(0, 0.54, 0, 1), -webkit-transform 1.2s cubic-bezier(0, 0.54, 0, 1);
    transition-delay: .2s;
}

.js_bg.on::before {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.js_bg img {
    opacity: 0;
    visibility: hidden;
}


/*#region pg specials*/
.display-flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.justify-content-end {
    display: flex;
    justify-content: flex-end;
}

.justify-content-center {
    display: flex;
    justify-content: center;
}

.justify-content-start {
    display: flex;
    justify-content: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-center {
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-flex-end {
    display: flex;
    justify-content: flex-end;
}

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

.text-right {
    text-align: right;
}

.row_reverse {
    flex-direction: row-reverse;
}

/* -----theme block start------- */
.w_50 {
    width: 50%;
}

.w_45 {
    width: 45%;
}

.w_48 {
    width: 48%;
}

.w_60 {
    width: 60%;
}

.w_35 {
    width: 35%;
}

.w_25 {
    width: 25%;
}

.w_100 {
    width: 100%;
}

.w_70 {
    width: 70%;
}

img {
    object-fit: cover;
    margin: 0;
    padding: 0;
}

.blue-color {
    color: var(--bg-blue-color);
    font-weight: 700;
}

.sp_break {
    display: none;
}

.tb_hide {
    display: block;
}

.bolder {
    font-weight: bold;
}

@media (max-width: 768px) {
    .tb_hide {
        display: none;
    }
}

@media (max-width: 450px) {
    .sp_hide {
        display: none;
    }

    .sp_break {
        display: block;
    }
}

/* ------block title------- */




/* -----------page common style---------- */
.container {
    width: 100%;
    padding: 0 var(--margin);
}

.page__heading {
    position: relative;
}

.page__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.page__img img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 45%;
    height: 100%;
    background-color: #000000A6;
    clip-path: polygon(0 0,
            100% 0,
            85% 100%,
            100% 100%,
            0 100%,
            0 0);
    pointer-events: none;
}

.page__heading-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    padding: 12rem var(--margin) 15rem;
    z-index: 2;
}

.page__title {
    display: flex;
    flex-direction: column;
    color: var(--bg-white-color);
}

.page__title-en {
    font-size: var(--font-size36);
    font-weight: 500;
    letter-spacing: .2em;
}

.page__title-jp {
    font-size: var(--font-size32);
    font-family: var(--fontH);
    font-weight: 600;
}

.page__cta-btn {
    display: flex;
    gap: 1px;
    width: fit-content;
    text-decoration: none;
    cursor: pointer;
    border-radius: 9999px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.page__cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255, 130, 40, 0.42);
}

.page__cta-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 130, 40, 0.3);
}

.page__cta-btn:focus-visible {
    outline: 2px solid var(--bg-white-color);
    outline-offset: 4px;
}

.page__cta-txt {
    flex: 1;
    display: inline-block;
    font-size: var(--font-size16);
    font-weight: 500;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*1.6) calc(var(--gap-unit)*2) calc(var(--gap-unit)*.9) calc(var(--gap-unit)*3);
    background-color: var(--bg-orange-color);
    line-height: 1.4;
    transition: background-color 0.25s ease;
    border-radius: 9999px 0 0 9999px;
}

.page__cta-btn:hover .page__cta-txt,
.page__cta-btn:hover .page__cta-arrow {
    background-color: #e86f1f;
}

.page__cta-txt span {
    position: relative;
    font-size: var(--font-size20);
}

.page__cta-txt span::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--bg-white-color);
}

.page__cta-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--gap-unit)*2);
    padding-left: calc(var(--gap-unit)*1.5);
    background-color: var(--bg-orange-color);
    transition: background-color 0.25s ease;
    border-radius: 0 9999px 9999px 0;
}

.page__cta-arrow svg {
    width: 1.1rem;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}

.page__cta-btn:hover .page__cta-arrow svg {
    transform: translateX(5px);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75));
}

@media (max-width: 768px) {
    .page__heading-inner {
        padding: 5rem var(--margin) 4rem;
    }

    .page__title-en {
        font-size: var(--font-size30);
    }

    .page__title-jp {
        font-size: var(--font-size28);
    }

    .page__cta-arrow svg {
        width: .6rem;
    }
}

@media (max-width: 450px) {
    .page__heading-inner {
        padding: 5rem var(--margin) 4rem;
    }

    .page__title-en {
        font-size: var(--font-size28);
        letter-spacing: .15em;
    }

    .page__title-jp {
        font-size: var(--font-size24);
    }

    .page__cta-txt span {
        font-size: 1.7rem;
    }

    .page__cta-txt {
        font-size: 1.5rem;
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*.8) calc(var(--gap-unit)*2.5);
    }

    .page__cta-arrow {
        padding: calc(var(--gap-unit)*1.5);
    }

    .page__cta-arrow svg {
        width: .9rem;
    }
}




/* --------------page home-------------- */
.banner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
}

.banner__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner__video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000010;
}

.banner__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner__video-sound {
    position: absolute;
    bottom: 8vh;
    right: var(--margin);
    z-index: 4;
    box-sizing: border-box;
    width: 5rem;
    height: 5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--bg-white-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, transform 0.2s ease;
    z-index: 5;
}

.banner__video-sound:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.banner__video-sound:active {
    transform: scale(0.96);
}

.banner__video-sound:focus-visible {
    outline: 2px solid var(--bg-white-color);
    outline-offset: 3px;
}

.banner__video-sound__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.banner__video-sound__icon svg {
    width: 2rem;
}

.banner__video-sound__icon--unmuted {
    display: none;
}

.banner__video-sound.is-unmuted .banner__video-sound__icon--muted {
    display: none;
}

.banner__video-sound.is-unmuted .banner__video-sound__icon--unmuted {
    display: flex;
}

.banner__video-sp {
	display: none;
}

.banner__title {
    position: absolute;
    top: 8vh;
    left: var(--margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*.5);
    font-size: var(--font-size16);
    color: var(--bg-white-color);
    line-height: 1.5;
    text-align: center;
    z-index: 2;
}

.banner__title-line01 {
    font-size: var(--font-size20);
    line-height: 1.6;
}

.banner__title-line02 {
    font-size: 7.4rem;
    font-family: var(--fontH);
    font-weight: 600;
    line-height: 1;
}

.banner__main {
    position: absolute;
    bottom: 8vh;
    left: var(--margin);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(var(--gap-unit)*5);
    margin-top: auto;
    z-index: 3;
}

.banner__lead {
    font-size: 1.7rem;
    line-height: 1.8;
    font-weight: 500;
    color: var(--bg-white-color);
}

.banner__btn {
    display: flex;
    gap: 1px;
    width: fit-content;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
    border-radius: 9999px;
}

.banner__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255, 130, 40, 0.42);
}

.banner__btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 130, 40, 0.3);
}

.banner__btn:focus-visible {
    outline: 2px solid var(--bg-white-color);
    outline-offset: 4px;
}

.banner__btn-txt {
    flex: 1;
    display: inline-block;
    font-size: var(--font-size16);
    font-weight: 500;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*1.7) calc(var(--gap-unit)*2) calc(var(--gap-unit)*1) calc(var(--gap-unit)*3);
    background-color: var(--bg-orange-color);
    line-height: 1.4;
    transition: background-color 0.25s ease;
    border-radius: 9999px 0 0 9999px;
}

.banner__btn:hover .banner__btn-txt,
.banner__btn:hover .banner__btn-arrow {
    background-color: #e86f1f;
}

.banner__btn-txt span {
    position: relative;
    font-size: var(--font-size20);
}

.banner__btn-txt span::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--bg-white-color);
}

.banner__btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--gap-unit)*2);
    padding-left: calc(var(--gap-unit)*1.5);
    background-color: var(--bg-orange-color);
    transition: background-color 0.25s ease;
    border-radius: 0 9999px 9999px 0;
}

.banner__btn:hover .banner__btn-arrow svg {
    transform: translateX(5px);
}

.banner__btn-arrow svg {
    width: 1.1rem;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}

.banner__btn:hover .banner__btn-arrow svg {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75));
}

@media (max-width: 768px) {
    .banner__title-line02 {
        font-size: 3.7rem;
    }

    .banner__main {
        gap: calc(var(--gap-unit)*3);
    }

    .banner__lead {
        font-size: var(--font-size18);
    }

    .banner__btn-arrow svg {
        width: .6rem;
    }
	
	.banner__video-sound {
        width: 3rem;
        height: 3rem;
    }

    .banner__video-sound__icon svg {
        width: 1.2rem;
    }
}

@media (max-width: 450px) {
	.banner__video-pc {
		display: none;
	}
	
	.banner__video-sp {
		display: block;
	}
	
    .banner__title {
        top: 7vh;
        left: 1.5rem;
    }

    .banner__title-line01 {
        font-size: 1.5rem;
    }

    .banner__title-line02 {
        font-size: 5.5rem;
    }

    .banner__title {
        font-size: 1.2rem;
    }

    .banner__lead {
        font-size: 1.4rem;
        line-height: 1.6;
    }

    .banner__main {
        left: 0;
        padding: 0 1.5rem;
        gap: calc(var(--gap-unit)*2.5);
        bottom: 5vh;
    }

    .banner__btn-txt {
        font-size: 1.5rem;
    }

    .banner__btn-txt span {
        font-size: var(--font-size18);
    }

    .banner__btn-arrow svg {
        width: 1rem;
    }
	
	.banner__video-sound {
        bottom: 6vh;
        width: 4rem;
        height: 4rem;
    }

    .banner__video-sound svg {
        width: 2rem;
    }
}

/* Home: banner video loading overlay + bottom-right spinner */
body.resort-home-loading {
    overflow: hidden;
}

body.resort-subpage-intro:not(.resort-intro-done) .wrapper {
    opacity: 0;
}

.resort-home-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: var(--bg-white-color);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.resort-home-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.resort-home-loader__spinner {
    position: fixed;
    right: 2.5rem;
    bottom: 2.5rem;
    z-index: 10001;
    width: 4.8rem;
    height: 4.8rem;
    border: 0.4rem solid rgba(255, 130, 40, 0.22);
    border-top-color: var(--bg-orange-color);
    border-radius: 50%;
    animation: resort-home-loader-spin 0.72s linear infinite;
}

@keyframes resort-home-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.resort-home-loader__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 450px) {
    .resort-home-loader__spinner {
        right: 1.5rem;
        bottom: 1.5rem;
        width: 4rem;
        height: 4rem;
    }
}










.reason__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
}

.reason__heading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
}

.reason__title {
    font-size: var(--font-size32);
    text-align: center;
}

.reason__title span {
    font-size: 4.8rem;
    font-family: var(--fontH);
    font-weight: 600;
}

.reason__lead {
    font-size: var(--font-size20);
    text-align: center;
}

.reason__lead span {
    text-decoration: underline;
    text-decoration-color: #FF822882;
    text-decoration-thickness: 1rem;
    text-underline-offset: -.2rem;
}

.reason__content {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*8);
}

.reason__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1.5);
    width: fit-content;
}

.reason__item:first-child {
    margin-right: calc(var(--gap-unit)*3);
}

.reason__img {
    display: flex;
    width: 14rem;
}

.reason__item:nth-child(2) .reason__img {
    width: 13rem;
}

.reason__item:nth-child(3) .reason__img {
    width: 9rem;
}

.reason__img img {
    width: 100%;
}

.reason__txt {
    text-align: center;
}

@media (max-width: 768px) {
    .reason__heading {
        gap: calc(var(--gap-unit)*4);
    }

    .reason__title {
        font-size: var(--font-size24);
    }

    .reason__title span {
        font-size: 2.4rem;
    }

    .reason__content {
        gap: calc(var(--gap-unit)*4);
    }

    .reason__img {
        width: 6rem;
    }

    .reason__item:nth-child(2) .reason__img {
        width: 4.5rem;
    }

    .reason__item:nth-child(3) .reason__img {
        width: 3rem;
    }

    .reason__lead {
        font-size: var(--font-size18);
    }

    .reason__lead span {
        text-decoration-thickness: .5rem;
        text-underline-offset: -.1rem;
    }
}

@media (max-width: 768px) {
    .reason__heading {
        gap: calc(var(--gap-unit)*4);
    }

    .reason__title {
        font-size: var(--font-size24);
    }

    .reason__title span {
        font-size: 2.4rem;
    }

    .reason__content {
        gap: calc(var(--gap-unit)*5);
    }

    .reason__img {
        width: 6rem;
    }

    .reason__item:nth-child(2) .reason__img {
        width: 5.5rem;
    }

    .reason__item:nth-child(3) .reason__img {
        width: 4rem;
    }

    .reason__lead {
        font-size: var(--font-size18);
    }

    .reason__lead span {
        text-decoration-thickness: .5rem;
        text-underline-offset: -.1rem;
    }

    .reason__item:first-child {
        margin-right: calc(var(--gap-unit)*2);
    }
}

@media (max-width: 450px) {
    .reason__inner {
        gap: calc(var(--gap-unit)*4);
    }

    .reason__heading {
        gap: calc(var(--gap-unit)*4);
    }

    .reason__title {
        font-size: var(--font-size24);
    }

    .reason__title span {
        font-size: 4rem;
    }

    .reason__content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2);
    }

    .reason__item {
        width: 100%;
        gap: calc(var(--gap-unit)*1);
    }

    .reason__img {
        width: 14rem;
    }

    .reason__item:nth-child(2) .reason__img {
        width: 13rem;
    }

    .reason__item:nth-child(3) .reason__img {
        width: 9rem;
    }

    .reason__lead {
        font-size: 1.7rem;
    }

    .reason__lead span {
        text-decoration-thickness: .5rem;
        text-underline-offset: -.1rem;
    }

    .reason__item:first-child {
        margin-right: 0;
    }
}



.solution__inner {
    position: relative;
}

.solution__bg {
    display: flex;
    width: 100%;
}

.solution__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.solution__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.solution__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000000A6;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.solution.inview .solution__overlay {
    transform: scaleX(1);
}

.solution__content-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    justify-content: center;
    padding-right: 9rem;
    box-sizing: border-box;
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.solution.inview .solution__content-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.62s;
}

@media (prefers-reduced-motion: reduce) {

    .solution__overlay {
        transform: scaleX(1);
        transition: none;
    }

    .solution__content-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.solution__title {
    position: relative;
    font-size: var(--font-size20);
    font-weight: 500;
    color: var(--bg-white-color);
    width: 100%;
    text-align: right;
}

.solution__title span {
    font-size: var(--font-size32);
    font-family: var(--fontH);
    font-weight: 600;
}

.solution__main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--gap-unit)*2.5);
}

.solution__item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*.5) calc(var(--gap-unit)*3);
    border: 1px solid var(--bg-white-color);
    width: fit-content;
}

@media (max-width: 768px) {
    .solution__bg {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
    }

    .solution__content {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .solution__content-inner {
        gap: calc(var(--gap-unit)*4);
        align-items: center;
        padding: 2.5rem;
    }

    .solution__title {
        text-align: center;
    }

    .solution__main {
        align-items: flex-start;
        gap: calc(var(--gap-unit)*2);
    }
}

@media (max-width: 450px) {
    .solution__content-inner {
        gap: calc(var(--gap-unit)*3);
        padding: 4rem 2rem;
    }

    .solution__title {
        font-size: var(--font-size18);
    }

    .solution__title span {
        font-size: 3rem;
        line-height: 1.5;
    }

    .solution__item {
        justify-content: flex-start;
        font-size: 1.5rem;
        padding: calc(var(--gap-unit)*.5) calc(var(--gap-unit)*2);
        width: 100%;
    }
}

.support {
    position: relative;
}

.support::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/gray_bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: repeat-y;
    z-index: 1;
}

.support__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding: 10rem 23rem;
    z-index: 3;
}

.support__heading {
    position: relative;
    z-index: 5;
}

.support__title {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-weight: 500;
}

.support__title-jp {
    font-size: var(--font-size36);
}

.support__title-en {
    font-size: var(--font-size28);
}

.area__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 26.3px 0px #0000004D;
    padding: calc(var(--gap-unit)*5) 10rem calc(var(--gap-unit)*1) 7rem;
}

.area__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7);
    padding-top: 4rem;
}

.area__heading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
}

.area__title {
    font-size: var(--font-size28);
    font-weight: 500;
}

.area__lead {
    font-size: var(--font-size18);
    font-weight: 500;
}

.area__main {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*3.5);
    z-index: 1;
}

.area__item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size20);
    font-weight: 500;
    color: var(--bg-black-color);
    line-height: 1;
    width: 14rem;
    padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2.5);
    background-color: var(--bg-white-color);
    border: 2px solid #FF8228;
}

.area__map {
    display: flex;
    width: 40rem;
}

.area__map img {
    width: 100%;
}

.type__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7.5);
    margin-top: calc(var(--gap-unit)*6);
    padding: 0 10rem;
}

.type__heading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
}

.type__title {
    font-size: var(--font-size32);
    font-weight: 500;
}

.type__lead {
    font-size: var(--font-size18);
    font-weight: 500;
}

.type__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--gap-unit)*6) calc(var(--gap-unit)*3);
}

.type__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.8);
    padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4);
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 26.3px 0px #0000004D;
}

.type__number {
    font-size: 7rem;
    font-family: var(--fontS);
    line-height: .8;
    color: var(--bg-yellow-color);
    border-bottom: 1px solid var(--bg-yellow-color);
    text-align: center;
}

.type__subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1);
    text-align: center;
}

.type__subtitle-jp {
    font-size: var(--font-size20);
    font-weight: bold;
}

.type__subtitle-en {
    font-size: var(--font-size14);
    font-weight: 500;
}

@media (max-width: 768px) {
    .support__inner {
        padding: 5rem var(--margin);
        gap: 3rem;
    }

    .support__title-jp {
        font-size: var(--font-size32);
    }

    .support__title-en {
        font-size: var(--font-size24);
    }

    .area__inner {
        padding: 4rem 2.5rem 6rem;
        flex-direction: column;
    }

    .area__lead {
        font-size: var(--font-size16);
    }

    .area__content {
        position: relative;
        padding: 0;
        z-index: 2;
    }

    .area__item {
        width: auto;
        font-size: var(--font-size18);
        padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*2.5);
    }

    .area__map {
        position: absolute;
        bottom: -.5rem;
        right: 0;
        width: auto;
        height: 100%;
    }

    .area__map img {
        width: auto;
        height: 100%;
    }

    .type__inner {
        padding: 0;
        margin-top: 1rem;
        gap: calc(var(--gap-unit)*5);
    }

    .type__title {
        font-size: var(--font-size30);
    }

    .type__lead {
        font-size: var(--font-size16);
    }

    .type__content {
        gap: calc(var(--gap-unit)*3);
    }

    .type__number {
        font-size: 3rem;
    }
}

@media (max-width: 450px) {
    .support__inner {
        padding: 8rem var(--margin);
        gap: 5rem;
    }

    .support__title-jp {
        font-size: var(--font-size26);
    }

    .support__title-en {
        font-size: var(--font-size18);
    }

    .area__inner {
        padding: 6rem 2rem 0;
        flex-direction: column;
    }

    .area__title {
        font-size: var(--font-size26);
    }

    .area__content {
        gap: calc(var(--gap-unit)*5);
    }

    .area__main {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap-unit)*2);
    }

    .area__map {
        position: static;
        margin-top: -4rem;
        width: 100%;
        height: auto;
    }

    .area__map img {
        width: 100%;
        height: auto;
    }

    .type__inner {
        padding: 0;
        margin-top: 1rem;
        gap: calc(var(--gap-unit)*5);
    }

    .type__title {
        font-size: var(--font-size26);
    }

    .type__lead {
        font-size: var(--font-size16);
    }

    .type__content {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap-unit)*2);
    }

    .type__item {
        padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*2);
    }

    .type__subtitle-jp {
        font-size: var(--font-size18);
    }

    .type__number {
        font-size: 6rem;
    }
}



.free__inner {
    position: relative;
}

.free__bg {
    position: relative;
    z-index: 0;
    display: flex;
    width: 100%;
}

.free__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.free.inview .free__bg img {
    transform: scale(1);
}

.free__content {
    position: absolute;
    top: 8rem;
    left: 10rem;
    bottom: 8rem;
    right: 10rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--gap-unit)*4);
    padding: calc(var(--gap-unit)*6) 9rem;
    overflow: hidden;
    background-color: transparent;
}

.free__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000000B2;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.free.inview .free__content::before {
    transform: scaleX(1);
}

.free__heading {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
        opacity 0.5s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.free.inview .free__heading {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.5s;
}

.free__form {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
        opacity 0.5s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.free.inview .free__form {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.68s;
}

@media (prefers-reduced-motion: reduce) {

    .free__bg img {
        transform: scale(1);
        transition: none;
    }

    .free__content::before {
        transform: scaleX(1);
        transition: none;
    }

    .free__heading,
    .free__form {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.free__title {
    font-size: var(--font-size32);
    font-family: var(--fontH);
    font-weight: 600;
    color: var(--bg-white-color);
}

.free__lead {
    font-size: var(--font-size18);
    color: var(--bg-white-color);
}

.free__form-wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
}

.free__row {
    display: flex;
    gap: calc(var(--gap-unit)*3);
    width: 100%;
}

.free__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
    width: 100%;
}

.free__cap {
    font-size: var(--font-size16);
    color: var(--bg-white-color);
}

.free__control {
    width: 100%;
}

.free__control input {
    font-size: var(--font-size18);
    color: #787878;
    padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*3);
    background-color: #FFFFFFB2;
    border: 2px solid transparent;
    outline: none;
    border-radius: calc(var(--gap-unit)*1);
    width: 100%;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.free__control input::placeholder {
    color: #787878;
}

.free__control input:focus,
.free__control input:focus-visible {
    background-color: #FFFFFF;
    border-color: var(--bg-orange-color);
}

.free__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*1.5);
    padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*3);
    background-color: var(--bg-orange-color);
    border: 2px solid var(--bg-orange-color);
    outline: none;
    border-radius: calc(var(--gap-unit)*1);
    width: 100%;
    cursor: pointer;
    margin-top: calc(var(--gap-unit)*3);
    box-sizing: border-box;
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        transform 0.2s ease,
        box-shadow 0.28s ease;
}

.free__btn:hover {
    background-color: var(--bg-white-color);
    border-color: var(--bg-orange-color);
    box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.free__btn:hover .free__btn-txt {
    color: var(--bg-orange-color);
}

.free__btn:hover .free__btn-icon svg path {
    fill: var(--bg-orange-color);
}

.free__btn:active {
    transform: translateY(0);
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.12);
}

.free__btn:focus-visible {
    outline: 2px solid var(--bg-white-color);
    outline-offset: 3px;
}

.free__btn-txt {
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--bg-white-color);
    line-height: 1;
}

.free__btn-icon {
    display: flex;
    width: 1.5rem;
}

.free__btn-icon svg {
    width: 100%;
    display: block;
}

.free__note {
    text-align: center;
    color: var(--bg-white-color);
}

@media (max-width: 768px) {
    .free .container {
        padding: 0;
    }

    .free__bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .free__content {
        position: relative;
        padding: 4rem 2.5rem 2.5rem;
        z-index: 2;
        top: unset;
        left: unset;
        bottom: unset;
        right: unset;
    }

    .free__btn-txt {
        font-size: var(--font-size20);
    }

    .free__btn-icon {
        width: .8rem;
    }
}

@media (max-width: 450px) {
    .free__content {
        position: relative;
        padding: 6rem 2rem 4rem;
    }

    .free__heading {
        gap: calc(var(--gap-unit)*1);
    }

    .free__title {
        font-size: var(--font-size28);
    }

    .free__lead {
        font-size: var(--font-size14);
    }

    .free__row {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2.5);
    }

    .free__form-wrap {
        gap: calc(var(--gap-unit)*2.5);
    }

    .free__cap {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .free__control input {
        font-size: var(--font-size16);
        padding: calc(var(--gap-unit)*2);
    }

    .free__btn-txt {
        font-size: var(--font-size18);
    }

    .free__btn-icon {
        width: 1.3rem;
    }

    .free__note {
        font-size: 1.5rem;
    }
}


.strength__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
}

.strength__heading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7.5);
}

.strength__title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.strength__title-logo {
    display: flex;
    width: 24rem;
}

.strength__title-logo img {
    width: 100%;
}

.strength__title-txt {
    font-size: var(--font-size32);
    font-weight: 500;
}

.strength__lead {
    font-size: var(--font-size24);
    font-weight: 500;
    text-align: center;
}

.strength__top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    padding: 0 15rem;
}

.strength__des {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*5);
}

.strength__left {
    flex: 1;
    font-size: 1.7rem;
}

.strength__left span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.strength__shape {
    display: flex;
    width: 24rem;
}

.strength__shape img {
    width: 100%;
}

.strength__video {
    display: flex;
    width: 100%;
    aspect-ratio: 16/9;
}

.strength__video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.strength__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.strength__content-desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--gap-unit)*5);
    padding: 0 15rem;
}

.strength__content-mobile {
    display: none;
    width: 100%;
    padding-bottom: calc(var(--gap-unit)*2);
}

.strength__content-mobile .swiper-pagination {
    position: relative;
    margin-top: calc(var(--gap-unit)*3);
}

.strength__content-mobile .swiper-slide {
    height: auto;
}

.strength__item {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white-color);
    box-shadow: 5px 5px 0px 0px #F6C199B2;
}

.strength__content-desktop .strength__item:nth-child(5) .strength__subtitle,
.strength-swiper .swiper-slide:nth-child(5) .strength__subtitle {
    margin-top: 3rem;
}

.strength__img {
    display: flex;
    width: 100%;
    aspect-ratio: 310/215;
    overflow: hidden;
}

.strength__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.strength__main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
    padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*2.5);
}

.strength__subtitle {
    font-size: 1.7rem;
    font-weight: bold;
    color: var(--bg-orange-color);
    padding-bottom: calc(var(--gap-unit)*1);
    border-bottom: 1px solid var(--bg-font-color);
}

.strength__number {
    position: absolute;
    top: 0;
    right: calc(var(--gap-unit)*3.5);
    font-size: 6.5rem;
    font-family: var(--fontJ);
    font-weight: 500;
    line-height: 1;
    color: #FF822840;
}

.strength__txt {
    font-size: 1.5rem;
    color: var(--bg-black-color);
}

.strength__btn {
	margin-top: calc(var(--gap-unit)*9);
}

@media (max-width: 768px) {
    .strength__heading {
        gap: calc(var(--gap-unit)*3);
    }

    .strength__title-logo {
        width: 11rem;
    }

    .strength__top {
        padding: 0;
        gap: calc(var(--gap-unit)*5);
    }

    .strength__des {
        flex-direction: column;
        align-items: center;
        gap: calc(var(--gap-unit)*2);
    }

    .strength__left {
        font-size: var(--font-size16);
    }

    .strength__subtitle {
        font-size: var(--font-size18);
    }

    .strength__content-desktop .strength__item:nth-child(5) .strength__subtitle,
    .strength-swiper .swiper-slide:nth-child(5) .strength__subtitle {
        margin-top: 1.5rem;
    }

    .strength__txt {
        font-size: var(--font-size16);
    }

    .strength__shape {
        width: 14rem;
    }

    .strength__content-desktop {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: calc(var(--gap-unit)*5);
    }

    .strength__main {
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*2.5);
    }

    .strength__number {
        font-size: 3.5rem;
    }
}

@media (max-width: 450px) {
    .strength__inner {
        gap: calc(var(--gap-unit)*6);
    }

    .strength__heading {
        gap: calc(var(--gap-unit)*1.5);
    }

    .strength__title-logo {
        width: 20rem;
    }

    .strength__title-txt {
        font-size: 3rem;
    }

    .strength__lead {
        font-size: var(--font-size20);
    }

    .strength__top {
        gap: calc(var(--gap-unit)*3);
    }

    .strength__left {
        font-size: 1.5rem;
    }

    .strength__shape {
        width: 70%;
    }

    .strength__content-desktop {
        display: none !important;
    }

    .strength__content-mobile.strength-swiper {
        display: block;
        overflow: hidden;
        margin-top: 3rem;
    }

    .strength-swiper .swiper-slide:nth-child(5) .strength__subtitle {
        margin-top: 0;
    }

    .strength__main {
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*2.5);
    }

    .strength__subtitle {
        font-size: 1.9rem;
    }

    .strength__content-desktop .strength__item:nth-child(5) .strength__subtitle {
        margin-top: 0;
    }

    .strength__number {
        font-size: 6rem;
    }
}


.point__inner {
    position: relative;
    margin: 0 20rem 10rem;
}

.point__bg {
    position: relative;
    z-index: 0;
    display: flex;
    width: 100%;
}

.point__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.point__content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.point__left {
    flex: 1;
    display: flex;
    padding-top: 10rem;
    padding-left: 10rem;
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.point.inview .point__left {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.58s;
}

.point__list {
    display: flex;
    flex-direction: column;
}

.point__item {
    font-size: 4.8rem;
    font-family: var(--fontM);
    line-height: 1.3;
    letter-spacing: .3em;
    color: var(--bg-white-color);
}

.point__main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5rem;
    padding-right: 8rem;
    width: 50%;
    overflow: hidden;
    background-color: transparent;
}

.point__main-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #000000A6;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.point.inview .point__main-overlay {
    transform: scaleX(1);
}

.point__main-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
    flex: 1;
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.point.inview .point__main-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.62s;
}

@media (prefers-reduced-motion: reduce) {

    .point__left {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .point__main-overlay {
        transform: scaleX(1);
        transition: none;
    }

    .point__main-inner {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .point__content::before {
        transform: scaleX(1);
        transition: none;
    }
}

.point__title {
    font-size: var(--font-size26);
    color: var(--bg-white-color);
}

.point__title span {
    font-size: 4rem;
    font-family: var(--fontH);
    font-weight: 600;
    line-height: 1.4;
}

.point__txt {
    font-size: var(--font-size16);
    color: var(--bg-white-color);
    margin-top: calc(var(--gap-unit)*5);
    padding-top: calc(var(--gap-unit)*5);
    border-top: 1px solid var(--bg-white-color);
    width: 90%;
}

.point__btn {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--gap-unit)*4);
}

.point__link:hover {
    background-color: var(--bg-orange-color);
    color: var(--bg-white-color);
}

.point__link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size18);
    font-weight: 500;
    line-height: 1.5;
    color: var(--bg-font-color);
    padding: calc(var(--gap-unit)) calc(var(--gap-unit)*4);
    background-color: var(--bg-white-color);
    border-radius: 9999px;
    transition: all .3s;
}

@media (max-width: 768px) {
    .point__inner {
        margin: 0 var(--margin) 4rem;
    }

    .point__content {
        position: relative;
        flex-direction: column;
        z-index: 1;
        overflow: hidden;
        background-color: transparent;
        padding: 3rem;
    }

    .point__content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: #000000A6;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }

    .point.inview .point__content::before {
        transform: scaleX(1);
    }

    .point__main-overlay {
        display: none;
    }

    .point__left,
    .point__main {
        position: relative;
        z-index: 1;
    }

    .point__bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    .point__left {
        padding: 0;
        padding-bottom: calc(var(--gap-unit)*4);
    }

    .point__item {
        font-size: 1.8rem;
    }

    .point__main {
        width: 100%;
        background-color: transparent;
        padding: 0;
    }

    .point__txt {
        width: 100%;
    }

    .point__title {
        font-size: var(--font-size24);
    }

    .point__title span {
        font-size: 1.8rem;
    }
}

@media (max-width: 450px) {
    .point__inner {
        margin: 0 var(--margin) 8rem;
    }

    .point__content {
        padding: 5rem 2.5rem;
    }

    .point__left {
        padding-bottom: calc(var(--gap-unit)*2.5);
    }

    .point__item {
        font-size: 3rem;
    }

    .point__main {
        width: 100%;
        background-color: transparent;
        padding: 0;
    }

    .point__txt {
        font-size: 1.5rem;
        width: 100%;
        padding-top: calc(var(--gap-unit)*2.5);
        margin-top: calc(var(--gap-unit)*2.5);
    }

    .point__title {
        font-size: var(--font-size18);
    }

    .point__title span {
        font-size: 3.2rem;
    }

    .point__link {
        font-size: var(--font-size16);
    }
}

.selling {
    position: relative;
    background-color: #F4F4F4;
}

.selling__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    padding: 0 20rem;
}

.selling__heading {
    display: flex;
    flex-direction: column;
}

.selling__deadline {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*1);
    font-size: var(--font-size20);
    font-weight: bold;
    color: var(--bg-orange-color);
    text-align: center;
}

.selling__title {
    font-size: var(--font-size30);
    font-weight: 500;
    text-align: center;
    color: var(--bg-black-color);
}

.selling__title span {
    font-size: var(--font-size20);
}

.selling__content {
    display: flex;
    gap: calc(var(--gap-unit)*3);
}

.selling__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--bg-font-color);
    background-color: var(--bg-white-color);
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s ease;
}

.selling__item:hover,
.selling__item:focus-visible {
    transform: translateY(-0.45rem);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.12);
}

.selling__item:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 0.35rem;
}

.selling__top {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selling__img {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.selling__img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000008C;
    opacity: 1;
    pointer-events: none;
    /* Default = leaving hover: opacity 0→1; ease-out would slow the end — use short + ease-in */
    transition: opacity 0.1s;
}

.selling__img img {
    width: 100%;
    transition: transform 0.28s;
}

.selling__item:hover .selling__img img,
.selling__item:focus-visible .selling__img img {
    transform: scale(1.05);
    transition: transform 0.5s;
}

.selling__item:hover .selling__img::before,
.selling__item:focus-visible .selling__img::before {
    opacity: 0;
    /* Entering hover: opacity 1→0 */
    transition: opacity 0.18s;
}

.selling__subtitle {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size28);
    color: var(--bg-white-color);
    text-align: center;
}

.selling__subtitle span {
    font-size: 7rem;
    font-family: var(--fontH);
    font-weight: 600;
    line-height: 1;
}

.selling__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*3);
    padding: calc(var(--gap-unit)*4);
    padding-top: calc(var(--gap-unit)*3);
}

.selling__txt {
    font-size: var(--font-size18);
}

.selling__txt span {
    font-weight: bold;
}

.selling__detail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.5);
	margin-top: auto;
}

.selling__detail-item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*.8);
}

.selling__detail-check {
    display: flex;
    width: 1.6rem;
}

.selling__detail-check svg {
    width: 100%;
}

.selling__detail-txt {
    font-size: 1.7rem;
}

.selling__detail-txt span {
    font-weight: bold;
}

.selling__btn {
    display: flex;
    justify-content: center;
}

.selling__link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size16);
    font-weight: bold;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*1) calc(var(--gap-unit)*3.5);
    border-radius: 9999px;
    background-color: var(--bg-font-color);
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s ease;
}

.selling__item:hover .selling__link,
.selling__item:focus-visible .selling__link {
    background-color: var(--bg-orange-color);
    transform: translateY(-0.1rem);
}

@media (prefers-reduced-motion: reduce) {

    .selling__item,
    .selling__img img,
    .selling__link {
        transition-duration: 0.01ms !important;
    }

    .selling__item:hover,
    .selling__item:focus-visible {
        transform: none;
        box-shadow: none;
    }

    .selling__item:hover .selling__img img,
    .selling__item:focus-visible .selling__img img {
        transform: none;
    }

    .selling__item:hover .selling__link,
    .selling__item:focus-visible .selling__link {
        transform: none;
    }
}

@media (max-width: 768px) {
    .selling__inner {
        padding: 2rem 0;
    }

    .selling__subtitle {
        font-size: var(--font-size20);
    }

    .selling__subtitle span {
        font-size: 2.5rem;
    }

    .selling__main {
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2.5);
        gap: calc(var(--gap-unit)*2.5);
    }

    .selling__txt {
        font-size: var(--font-size16);
    }

    .selling__detail-check {
        width: 1rem;
    }

    .selling__detail-txt {
        font-size: .75rem;
    }

    .selling__link {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .selling__inner {
        padding: 3rem 0;
    }

    .selling__deadline {
        font-size: var(--font-size18);
    }

    .selling__title {
        font-size: 3rem;
    }

    .selling__content {
        flex-direction: column;
    }

    .selling__subtitle {
        font-size: var(--font-size18);
    }

    .selling__subtitle span {
        font-size: 5rem;
    }

    .selling__main {
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2.5);
        gap: calc(var(--gap-unit)*2.5);
    }

    .selling__txt {
        font-size: 1.7rem;
    }

    .selling__detail-check {
        width: 2rem;
    }

    .selling__detail-txt {
        font-size: var(--font-size16);
    }

    .selling__link {
        font-size: var(--font-size18);
    }
}





.flow {
    position: relative;
    background-image: url(../img/gray_bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: repeat-y;
}

.flow__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5.5);
    padding: 8rem 20rem;
}

.flow__title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.flow__title-en {
    font-size: var(--font-size32);
    font-weight: 500;
}

.flow__title-jp {
    font-size: var(--font-size20);
    font-weight: 500;
}

.flow__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
}

.flow__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow__item::before {
    content: '';
    position: absolute;
    left: 0;
    display: flex;
    width: 10rem;
    height: 10rem;
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 19.08px 0px #0000004D;
    border-radius: 50%;
    z-index: 1;
}

.flow__main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2.5);
    width: 100%;
    padding: calc(var(--gap-unit)*4);
    padding-bottom: calc(var(--gap-unit)*6);
    padding-left: 8rem;
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 19.08px 0px #0000004D;
    margin-left: -5.5rem;
    z-index: 2;
}

.flow__order {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--font-size20);
    font-weight: 500;
    line-height: 1;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    z-index: 3;
    background-color: var(--bg-white-color);
}

.flow__order span {
    font-size: 4rem;
}

.flow__subtitle {
    position: relative;
    font-size: var(--font-size24);
    font-weight: bold;
    color: var(--bg-orange-color);
    padding-bottom: calc(var(--gap-unit)*2.5);
    text-align: center;
    line-height: 1;
}

.flow__subtitle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 1px;
    background-color: var(--bg-font-color);
}

.flow__txt {
    font-size: var(--font-size18);
}

@media (max-width: 786px) {
    .flow__inner {
        padding: 4rem 0;
    }

    .flow__order,
    .flow__item::before {
        width: 5rem;
        height: 5rem;
    }

    .flow__order span {
        font-size: 1.8rem;
    }

    .flow__subtitle::before {
        width: 100%;
    }

    .flow__main {
        margin-left: -3rem;
        padding: calc(var(--gap-unit)*5);
        padding-right: calc(var(--gap-unit)*4);
        padding-left: 3rem;
    }

    .flow__subtitle {
        font-size: var(--font-size22);
    }

    .flow__txt {
        font-size: var(--font-size16);
    }

    .flow__btn {
        margin-top: 2rem;
    }
}

@media (max-width: 450px) {
    .flow__inner {
        padding: 8rem 0;
    }

    .flow__title-jp {
        font-size: var(--font-size18);
    }

    .flow__content {
        gap: calc(var(--gap-unit)*2);
    }

    .flow__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .flow__order {
        font-size: var(--font-size16);
        width: 8rem;
        height: 8rem;
        margin-left: 1.5rem;
    }

    .flow__item::before {
        left: 1.5rem;
        top: 0;
        width: 8rem;
        height: 8rem;
    }

    .flow__order span {
        font-size: 3rem;
    }

    .flow__subtitle::before {
        width: 100%;
    }

    .flow__main {
        margin-left: 0;
        margin-top: -4rem;
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*3.5);
        padding-top: 4rem;
    }

    .flow__subtitle {
        font-size: var(--font-size20);
        line-height: 1.5;
        padding-bottom: calc(var(--gap-unit)*1.5);
    }

    .flow__btn {
        margin-top: 2rem;
    }
}

.more__btn {
    display: flex;
    justify-content: center;
    width: fit-content;
    background-color: var(--bg-font-color);
    border-radius: 9999px;
    margin: 0 auto;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.32s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease;
}

.more__btn:hover {
    background-color: var(--bg-orange-color);
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(255, 130, 40, 0.35),
        0 20px 48px rgba(255, 130, 40, 0.45);
}

.more__btn:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.3),
        0 4px 16px rgba(255, 130, 40, 0.4);
}

.more__btn:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 3px;
}

.more__btn-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size18);
    font-weight: 500;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*1) calc(var(--gap-unit)*3);
    padding-right: calc(var(--gap-unit)*2);
    border-right: 1px solid var(--bg-white-color);
}

.more__btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--gap-unit)*2);
    padding-left: calc(var(--gap-unit)*1.5);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.more__btn:hover .more__btn-arrow {
    transform: translateX(10px);
}

.more__btn-arrow svg {
    width: 1.1rem;
    transition: filter 0.32s ease;
}

.more__btn:hover .more__btn-arrow svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
}

@media (max-width: 768px) {
    .more__btn-arrow svg {
        width: .5rem;
    }

    .more__btn-txt {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .more__btn-arrow svg {
        width: .8rem;
    }

    .more__btn-txt {
        font-size: 1.6rem;
        padding: calc(var(--gap-unit)*1.1) calc(var(--gap-unit)*2.7);
        padding-right: calc(var(--gap-unit)*2);
    }
}






.faq {
    display: flex;
    flex-direction: column;
    min-height: 70vh;
    background-color: #FFEEE1;
    overflow: visible;
}

.faq__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    overflow: visible;
}

.faq__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.faq__title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: fit-content;
}

.faq__title-en {
    font-size: var(--font-size36);
    font-weight: bold;
}

.faq__title-en span {
    display: inline-block;
    font-size: var(--font-size20);
    padding: 0 calc(var(--gap-unit)*1);
}

.faq__title-jp {
    font-size: var(--font-size20);
    font-weight: bold;
}

.faq__title-icon {
    position: absolute;
    top: -1rem;
    right: -5rem;
    display: flex;
    width: 6.5rem;
}

.faq__title-icon svg {
    width: 100%;
}

.faq__content {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--gap-unit)*4.5);
    overflow: visible;
}

.faq__item {
    --faq-corner-cut: calc(var(--gap-unit)*5);
    --faq-cut-h: var(--faq-corner-cut);
    --faq-cut-v: calc(var(--faq-cut-h) * tan(48deg));
    --faq-cut-border-w: 1px;
    --faq-cut-l: hypot(var(--faq-cut-h), var(--faq-cut-v));
    --faq-cut-border-dx: calc(var(--faq-cut-border-w) * var(--faq-cut-v) / var(--faq-cut-l));
    --faq-cut-border-dy: calc(var(--faq-cut-border-w) * var(--faq-cut-h) / var(--faq-cut-l));
    --faq-cut-line-scale: 1.6;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
    padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*4.5) calc(var(--gap-unit)*5);
    background-color: transparent;
    overflow: visible;
    clip-path: none;
    isolation: isolate;
}

.faq__item>* {
    position: relative;
    z-index: 1;
}

.faq__item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-white-color);
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% - var(--faq-cut-v)),
            calc(100% - var(--faq-cut-h)) 100%,
            0 100%);
    box-shadow: 0px 0px 20px 0px #F0843780;
}

.faq__item::after {
    content: '';
    position: absolute;
    left: calc(100% - var(--faq-cut-h));
    bottom: 0;
    z-index: 2;
    width: calc(var(--faq-cut-l) * var(--faq-cut-line-scale));
    height: var(--faq-cut-border-w);
    pointer-events: none;
    background-color: var(--bg-orange-color);
    transform-origin: left bottom;
    transform: rotate(atan2(calc(-1 * var(--faq-cut-v)), var(--faq-cut-h))) translateX(calc(-0.5 * (var(--faq-cut-line-scale) - 1) * var(--faq-cut-l)));
}

.faq__question {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*1);
}

.faq__question::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 2rem);
    height: 1px;
    background-color: var(--bg-font-color);
}

.faq__question-mark {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.6rem;
    height: 4.6rem;
    font-size: var(--font-size26);
    font-weight: bold;
    color: var(--bg-white-color);
    line-height: .8;
    background-color: var(--bg-font-color);
    border-radius: 50%;
}

.faq__question-txt {
    font-size: var(--font-size20);
    font-weight: 500;
    color: var(--bg-black-color);
}

.faq__answer {
    margin-top: auto;
    font-size: var(--font-size16);
    padding-left: 5rem;
}

.faq__answer span {
    font-size: var(--font-size18);
    font-weight: bold;
    color: var(--bg-orange-color);
    line-height: 2;
}

@media (max-width: 768px) {
    .faq__title-icon {
        top: 0;
        right: -2rem;
        width: 3rem;
    }

    .faq__title-jp {
        font-size: var(--font-size18);
    }

    .faq__title-en {
        font-size: 2rem;
    }

    .faq__content {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq__item {
        padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*4) calc(var(--gap-unit)*5);
    }

    .faq__question-mark {
        width: 2.5rem;
        height: 2.5rem;
    }

    .faq__answer {
        padding-left: 3rem;
    }
}

@media (max-width: 450px) {
    .faq__title-icon {
        top: .5rem;
        right: -4rem;
        width: 5rem;
    }

    .faq__title-jp {
        font-size: var(--font-size18);
    }

    .faq__title-en {
        font-size: var(--font-size36);
        line-height: 1.4;
    }

    .faq__content {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq__item {
        padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*3) calc(var(--gap-unit)*4);
    }

    .faq__question {
        align-items: flex-start;
    }

    .faq__question::before {
        width: 100%;
    }

    .faq__question-txt {
        flex: 1;
        font-size: 1.6rem;
    }

    .faq__question-mark {
        font-size: var(--font-size20);
        width: 3.5rem;
        height: 3.5rem;
        line-height: .8;
    }

    .faq__answer {
        font-size: var(--font-size14);
        padding-left: 0;
    }

    .faq__answer span {
        font-size: 1.5rem;
        line-height: 1.6;
    }
}



.about__inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about__bg {
    display: flex;
    width: 100%;
}

.about__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about__content {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*6.5);
}

.about__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*4);
    width: 26rem;
    padding: calc(var(--gap-unit)*3.5);
    background-color: var(--bg-white-color);
    border-radius: calc(var(--gap-unit)*1.5);
    box-shadow: 0px 10px 0px 0px #00000040;
    transition: all .2s;
}

.about__item:hover {
    box-shadow: 0px 0 0px 0px #00000040;
    transform: translateY(10px);
}

.about__subtitle {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--bg-font-color);
}

.about__subtitle-ja {
    font-size: calc(var(--font-size22) - .1rem);
    font-weight: bold;
    line-height: 1.3;
}

.about__subtitle-en {
    font-size: var(--font-size18);
}

.about__img {
    display: flex;
}

.about__item:first-child .about__img {
    width: 15rem;
}

.about__item:nth-child(2) .about__img {
    width: 15rem;
}

.about__item:last-child .about__img {
    width: 14rem;
}

.about__img img {
    width: 100%;
}

@media (max-width: 768px) {
    .about__content {
        position: relative;
        gap: calc(var(--gap-unit)*2);
        z-index: 1;
        padding: 3rem 1.5rem;
    }

    .about__item {
        flex: 1;
        width: auto;
        padding: calc(var(--gap-unit)*2);
        gap: calc(var(--gap-unit)*1.5);
    }

    .about__subtitle-ja {
        font-size: var(--font-size18);
    }

    .about__subtitle-en {
        font-size: var(--font-size16);
    }

    .about__item:nth-child(2) .about__img {
        width: 100%;
    }

    .about__item:last-child .about__img {
        width: 100%;
    }

    .about__item:first-child .about__img {
        width: 100%;
    }

    .about__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 450px) {
    .about .hx8 {
        display: none;
    }

    .about .container {
        padding: 0;
    }

    .about__inner {
        padding: 8rem 3rem;
    }

    .about__content {
        flex-direction: column;
        align-items: center;
        gap: calc(var(--gap-unit)*4);
        padding: 0;
        width: 80%;
    }

    .about__item {
        width: 100%;
        padding: calc(var(--gap-unit)*3);
        gap: calc(var(--gap-unit)*1.5);
    }

    .about__subtitle-ja {
        font-size: var(--font-size18);
    }

    .about__subtitle-en {
        font-size: var(--font-size16);
    }

    .about__img {
        width: 80% !important;
    }

    .about__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}



.post__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
}

.post__title {
    display: flex;
    align-items: center;
    gap: var(--gap-unit);
    font-size: 4.8rem;
    font-weight: 500;
    padding-bottom: calc(var(--gap-unit)*2);
    border-bottom: 1px solid var(--bg-orange-color);
    line-height: 1;
}

.post__title-icon {
    display: flex;
    width: 3.6rem;
}

.post__title-icon svg {
    width: 100%;
}

.post__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.post__content-desktop {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*7.5);
}

.post__content-mobile {
    display: none;
    width: 100%;
    padding-bottom: calc(var(--gap-unit)*2);
}

.post__content-mobile .swiper-pagination {
    position: relative;
    margin-top: calc(var(--gap-unit)*3);
}

.post__content-mobile .swiper-slide {
    height: auto;
}

.post__left {
    flex: 1;
    display: flex;
    gap: calc(var(--gap-unit)*4);
}

.post__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.post__img {
    display: flex;
    width: 100%;
    aspect-ratio: 10/7;
    background-color: #D9D9D9;
    border-radius: 0 calc(var(--gap-unit)*4.5) 0 calc(var(--gap-unit)*4.5);
    overflow: hidden;
}

.post__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
}

.post__meta {
    display: flex;
    flex-direction: column;
}

.post__time {
    font-size: var(--font-size18);
    font-weight: bold;
    color: var(--bg-orange-color);
}

.post__category-list {
    display: flex;
    gap: calc(var(--gap-unit)*3);
}

.post__category {
    font-size: var(--font-size16);
    font-weight: bold;
    color: #787878;
}

.post__detail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.5);
}

.post__article-title {
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--bg-font-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    min-width: 0;
    transition: color 0.25s ease;
}

.post__item:hover .post__article-title {
    color: var(--bg-orange-color);
}

.post__txt {
    color: var(--bg-font-color);
}

.post__left .post__txt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    min-width: 0;
}

.post__right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*4);
    width: 40%;
}

.post__right .post__txt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    min-width: 0;
}

.post__right .post__item {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*2);
    padding-bottom: calc(var(--gap-unit)*3);
    border-bottom: 1px solid var(--bg-orange-color);
}

.post__right .post__img {
    width: 33%;
    aspect-ratio: 16/11;
}

.post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.post__item:hover .post__img img {
    transform: scale(1.05);
}

.post__right .post__main {
    gap: calc(var(--gap-unit)*1.5);
}

.post__right .post__time {
    font-size: var(--font-size16);
}

.post__right .post__category {
    font-size: var(--font-size16);
}

.post__right .post__detail {
    gap: 4px;
}

.post__right .post__article-title {
    font-size: var(--font-size20);
}

.post__btn {
    margin-left: auto;
    margin-top: calc(var(--gap-unit)*2);
}

@media (max-width: 768px) {
    .post__inner {
        gap: calc(var(--gap-unit)*4);
    }

    .post__left {
        display: none;
    }

    .post__right {
        width: 100%;
    }

    .post__right .post__detail {
        gap: calc(var(--gap-unit)*.5);
    }

    .post__title {
        font-size: 2.4rem;
    }

    .post__title-icon {
        width: 1.8rem;
    }
}

@media (max-width: 450px) {
    .post__inner {
        gap: calc(var(--gap-unit)*4);
    }

    .post__content-desktop {
        display: none !important;
    }

    .post__content-mobile.home-post-swiper {
        display: block;
        overflow: hidden;
    }

    .home-post-swiper .swiper-slide .post__item {
        flex: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--gap-unit)*1.5);
        padding-bottom: calc(var(--gap-unit)*2);
        border-bottom: 1px solid var(--bg-orange-color);
    }

    .home-post-swiper .swiper-slide:last-child .post__item {
        border-bottom: none;
        padding-bottom: 0;
    }

    .home-post-swiper .swiper-slide .post__img {
        width: 100%;
        border-radius: 0;
    }

    .home-post-swiper .swiper-slide .post__main {
        width: 100%;
        gap: calc(var(--gap-unit)*1.5);
    }

    .post__right {
        gap: calc(var(--gap-unit)*5);
    }

    .post__right .post__item {
        flex-direction: column;
        gap: calc(var(--gap-unit)*1.5);
        padding-bottom: calc(var(--gap-unit)*2);
    }

    .post__right .post__main {
        gap: calc(var(--gap-unit)*1.5);
    }

    .post__right .post__img {
        width: 100%;
        border-radius: 0;
    }

    .post__article-title {
        font-size: var(--font-size20);
    }

    .post__title {
        font-size: 4rem;
    }

    .post__title-icon {
        width: 3rem;
    }

    .post__detail {
        gap: calc(var(--gap-unit)*1);
    }

    .post__time {
        font-size: 1.7rem;
    }

    .post__category {
        font-size: 1.5rem;
    }

    .post__txt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        min-width: 0;
    }

    .post__btn {
        margin-top: 0;
    }
}







/* ------------page point style------------ */
.page__point .page__title {
    display: block;
    font-size: var(--font-size22);
    color: var(--bg-white-color);
}

.page__point .page__title span {
    font-size: var(--font-size36);
    font-family: var(--fontH);
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .page__point .page__title {
        font-size: var(--font-size20);
    }
}

@media (max-width: 450px) {
    .page__point .page__title {
        font-size: var(--font-size18);
    }

    .page__point .page__title span {
        font-size: 3rem;
    }
}

.analysis__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8);
}

.analysis__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.analysis__title-jp {
    font-weight: bold;
    font-size: var(--font-size24);
}

.analysis__title-jp span {
    font-size: var(--font-size32);
}

.analysis__title-en {
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--bg-orange-color);
}

.analysis__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7);
}

.analysis__item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    padding: calc(var(--gap-unit)*9) 10rem;
    background-color: #F4F4F4;
}

.analysis__head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
}

.analysis__head::before,
.analysis__head::after {
    content: '';
    flex: 1;
    display: flex;
    height: 1px;
    background-color: #303030;
}

.analysis__subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit));
    font-size: var(--font-size26);
    font-weight: bold;
    line-height: 1;
}

.analysis__subtitle-check {
    display: flex;
    width: 2.6rem;
}

.analysis__subtitle-check svg {
    width: 100%;
}

.analysis__subtitle-txt span {
    color: var(--bg-orange-color);
}

.analysis__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*2.5);
    background-color: var(--bg-white-color);
}

.analysis__des {
    font-size: var(--font-size18);
    padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*5) 0;
}

.analysis__period {
    position: relative;
}

.analysis__period-content {
    position: relative;
    display: flex;
    z-index: 2;
}

.analysis__period-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    padding: 0 calc(var(--gap-unit)*2.5);
    width: calc(72%/3);
    border-right: 1px dashed var(--bg-font-color);
    padding-bottom: 18rem;
}

.analysis__period-item:last-child {
    border: none;
}

.analysis__period-item:nth-child(3) {
    width: 28%;
}

.analysis__period-label {
    font-size: var(--font-size20);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: calc(var(--gap-unit)) calc(var(--gap-unit)*2);
    background-color: #FFEEE1;
    box-shadow: 0px 0px 7.83px 0px #0000004D;
    border-radius: calc(var(--border-radius)*1.5);
    width: 100%;
}

.analysis__period-txt {
    font-size: 1.7rem;
}

.analysis__period-txt span {
    font-weight: bold;
}

.analysis__period-chart {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
}

.analysis__period-chart img {
    width: 100%;
}

.analysis__popularity {
    position: relative;
}

.analysis__popularity-content {
    display: flex;
    width: 100%;
}

.analysis__popularity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    padding: 0 calc(var(--gap-unit)*3);
    border-right: 1px dashed var(--bg-font-color);
}

.analysis__popularity-item:first-child {
    width: 32%;
}

.analysis__popularity-item:nth-child(2) {
    width: 30%;
}

.analysis__popularity-item:last-child {
    flex: 38%;
    border: none;
}

.analysis__popularity-label {
    font-size: var(--font-size20);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: calc(var(--gap-unit)) calc(var(--gap-unit)*2);
    background-color: #FFEEE1;
    box-shadow: 0px 0px 7.83px 0px #0000004D;
    border-radius: calc(var(--border-radius)*1.5);
    width: 100%;
}

.analysis__popularity-txt {
    font-size: var(--font-size18);
}

.analysis__popularity-txt span {
    font-weight: bold;
}

.analysis__popularity-note {
    margin: 0 auto;
    margin-top: 9rem;
    margin-bottom: 3rem;
    text-align: right;
}

.analysis__popularity-note span {
    display: block;
    font-weight: bold;
    color: #2BAD1B;
    text-align: left;
}

.analysis__popularity-shape {
    display: flex;
}

.analysis__popularity-man {
    width: 9rem;
}

.analysis__popularity-house {
    margin-top: 6.5rem;
    width: 27rem;
}

.analysis__popularity-shape svg {
    width: 100%;
}

.analysis__popularity-chart {
    position: absolute;
    left: 0;
    bottom: 4rem;
    display: flex;
    width: 100%;
}

.analysis__popularity-chart img {
    width: 100%;
}

@media (max-width: 768px) {
    .analysis__inner {
        gap: calc(var(--gap-unit)*5);
    }

    .analysis__title-jp {
        font-size: var(--font-size22);
    }

    .analysis__title-jp span {
        font-size: var(--font-size28);
    }

    .analysis__title-en {
        font-size: var(--font-size20);
    }

    .analysis__item {
        padding: calc(var(--gap-unit)*7) calc(var(--gap-unit)*5);
    }

    .analysis__subtitle {
        font-size: var(--font-size24);
    }

    .analysis__subtitle-check {
        width: 1.3rem;
    }

    .analysis__period-label {
        font-size: var(--font-size14);
    }

    .analysis__period-txt {
        font-size: var(--font-size16);
    }

    .analysis__period-item {
        padding-bottom: 5rem;
    }

    .analysis__popularity-item {
        padding: 0 calc(var(--gap-unit)*2);
    }

    .analysis__popularity-label {
        font-size: var(--font-size14);
    }

    .analysis__popularity-man {
        width: 4rem;
    }

    .analysis__popularity-txt {
        font-size: var(--font-size16);
    }

    .analysis__popularity-house {
        width: 10rem;
        margin-top: 2.5rem;
    }

    .analysis__popularity-note {
        margin-top: 4rem;
        margin-bottom: 2rem;
    }

    .analysis__popularity-chart {
        bottom: 0;
    }
}

@media (max-width: 450px) {
    .point__analysis .container {
        padding: 0;
    }

    .analysis__inner {
        gap: calc(var(--gap-unit)*5);
    }

    .analysis__title {
        gap: 4px;
        padding: 0 var(--margin);
    }

    .analysis__title-jp {
        font-size: var(--font-size20);
    }

    .analysis__title-jp span {
        font-size: var(--font-size26);
    }

    .analysis__title-en {
        font-size: var(--font-size18);
        line-height: 1.4;
    }

    .analysis__item {
        padding: calc(var(--gap-unit)*6) calc(var(--gap-unit)*2);
    }

    .analysis__subtitle {
        font-size: var(--font-size22);
        line-height: 1.5;
        text-align: center;
    }

    .analysis__head::before,
    .analysis__head::after {
        display: none;
    }

    .analysis__subtitle-check {
        display: none;
    }

    .analysis__period-label {
        font-size: var(--font-size18);
    }

    .analysis__des {
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2.5) 0;
        font-size: 1.5rem;
    }

    .analysis__period-content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2);
    }

    .analysis__period-txt {
        font-size: 1.5rem;
    }

    .analysis__period-item {
        gap: calc(var(--gap-unit)*1.5);
        width: 100% !important;
        border: none !important;
        padding: 0 calc(var(--gap-unit)*2.5);
    }

    .analysis__period-chart {
        position: static;
        margin-top: 2rem;
    }

    .analysis__popularity-content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2.5);
        padding-bottom: 3rem;
    }

    .analysis__popularity-item {
        padding: 0 calc(var(--gap-unit)*2);
        width: 100% !important;
        border: none !important;
        gap: calc(var(--gap-unit)*1);
    }

    .analysis__popularity-label {
        font-size: var(--font-size18);
    }

    .analysis__popularity-man {
        width: 8rem;
    }

    .analysis__popularity-txt {
        font-size: 1.5rem;
    }

    .analysis__popularity-house {
        width: 20rem;
        margin-top: 2.5rem;
    }

    .analysis__popularity-note {
        font-size: 1.5rem;
        margin: 1rem auto;
    }

    .analysis__popularity-chart {
        display: none;
    }
}


.property__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
}

.property__heading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.property__title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.property__title-jp {
    font-weight: bold;
    font-size: var(--font-size24);
    padding-right: 8.5rem;
}

.property__title-jp span {
    font-size: var(--font-size32);
}

.property__title-en {
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--bg-orange-color);
}

.property__title-icon {
    position: absolute;
    top: -3rem;
    right: 0;
    display: flex;
    width: 7.8rem;
}

.property__title-icon svg {
    width: 100%;
}

.property__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7);
}

.property__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*4);
    padding: calc(var(--gap-unit)*6) 0 calc(var(--gap-unit)*6);
    background-color: var(--bg-white-color);
    border-radius: calc(var(--border-radius)*2);
    box-shadow: 0px 4px 8.8px 0px #00000040;
    margin-top: 16rem;
}

.property__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--gap-unit)*2.5);
    background-image: linear-gradient(92.14deg, #FFCE64 3.67%, #FF8228 98.2%);
    border-radius: calc(var(--border-radius)*2) calc(var(--border-radius)*2) 0 0;
}

.property__head {
    position: relative;
    display: flex;
    width: 44%;
    background-color: #FFEEE1;
    padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*3);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.property__subtitle {
    position: relative;
    font-size: var(--font-size26);
    font-weight: bold;
    z-index: 2;
}

.property__main {
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--gap-unit)*5.5);
}

.property__detail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
}

.property__img {
    position: absolute;
    top: -16rem;
    right: calc(var(--gap-unit)*5.5);
    display: flex;
    width: 47%;
    aspect-ratio: 570/260;
    overflow: hidden;
}

.property__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.property__txt {
    font-size: var(--font-size18);
    line-height: 1.8;
}

.property__txt span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.property__model {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*4);
}

.property__model-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: fit-content;
    background-color: var(--bg-orange-color);
    padding: calc(var(--gap-unit)*1.3) calc(var(--gap-unit)*4);
    border-radius: 9999px;
    line-height: 1.4;
}

.property__model-title {
    font-size: var(--font-size24);
    font-weight: bold;
    color: var(--bg-white-color);
}

.property__model-txt {
    font-size: var(--font-size18);
    color: var(--bg-white-color);
}

.property__resort {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
}

.property__resort-item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    font-size: var(--font-size24);
    font-weight: bold;
    line-height: 1.5;
    padding: calc(var(--gap-unit)*1.5);
    border-bottom: 1.5px dashed var(--bg-font-color);
}

.property__resort-check {
    display: flex;
    width: 3rem;
}

.property__resort-check svg {
    width: 100%;
}

.property__item:nth-child(3) .property__txt:last-child {
    text-align: center;
}

@media (max-width: 768px) {
    .property__title-jp {
        font-size: var(--font-size22);
        padding-right: 4.5rem;
    }

    .property__title-jp span {
        font-size: var(--font-size28);
    }

    .property__title-icon {
        top: -1.5rem;
        width: 4rem;
    }

    .property__title-en {
        font-size: var(--font-size20);
    }

    .property__item {
        margin-top: 5rem;
        padding: calc(var(--gap-unit)*5) 0 calc(var(--gap-unit)*4);
    }

    .property__head {
        width: 55%;
    }

    .property__subtitle {
        font-size: var(--font-size18);
    }

    .property__img {
        top: -5rem;
        right: calc(var(--gap-unit)*3);
        aspect-ratio: 3/2;
    }

    .property__main {
        padding: 0 calc(var(--gap-unit)*3);
    }

    .property__model {
        gap: calc(var(--gap-unit)*2);
    }

    .property__model-item {
        padding: calc(var(--gap-unit)*1.3) calc(var(--gap-unit)*2.5);
    }

    .property__model-title {
        font-size: var(--font-size18);
    }

    .property__model-txt {
        font-size: var(--font-size14);
    }

    .property__resort-check {
        width: 1.5rem;
    }

    .property__resort-item {
        font-size: var(--font-size22);
    }
}

@media (max-width: 450px) {
    .property__title-jp {
        font-size: var(--font-size18);
        padding-right: 4.5rem;
    }

    .property__title-jp span {
        font-size: var(--font-size24);
    }

    .property__title-icon {
        top: -2rem;
        width: 6rem;
    }

    .property__title-en {
        font-size: var(--font-size18);
    }

    .property__item {
        margin-top: 0;
        gap: calc(var(--gap-unit)*3);
        padding: calc(var(--gap-unit)*5) 0 calc(var(--gap-unit)*3);
    }

    .property__main {
        gap: calc(var(--gap-unit)*1.5);
    }

    .property__txt {
        font-size: 1.5rem;
    }

    .property__img {
        position: static;
        width: 100%;
    }

    .property__head {
        width: 90%;
    }

    .property__subtitle {
        font-size: 1.7rem;
    }

    .property__img {
        top: -5rem;
        right: calc(var(--gap-unit)*3);
        aspect-ratio: 3/2;
    }

    .property__main {
        padding: 0 calc(var(--gap-unit)*3);
    }

    .property__model {
        flex-direction: column;
        gap: calc(var(--gap-unit)*1);
    }

    .property__model-item {
        width: 100%;
        padding: calc(var(--gap-unit)*1.2) calc(var(--gap-unit)*2.5);
    }

    .property__model-title {
        font-size: 1.7rem;
    }

    .property__resort-check {
        width: 1.5rem;
    }

    .property__resort-item {

        gap: calc(var(--gap-unit)*1);
        padding: calc(var(--gap-unit)*1) 0;
        font-size: var(--font-size16);
    }
}


.summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rem 10rem;
    background-color: #F4F4F4;
}

.summary__title {
    position: relative;
    display: flex;
    width: 17rem;
}

.summary__title img {
    width: 100%;
}

.summary__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
    width: 100%;
    padding: calc(var(--gap-unit)*5.5);
    padding-top: 8.5rem;
    background-color: var(--bg-white-color);
    border: 2.5px solid var(--bg-orange-color);
    border-radius: 5rem;
    margin-top: -5rem;
}

.summary__lead {
    font-size: var(--font-size18);
    line-height: 1.8;
}

.summary__lead span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.summary__shape {
    display: flex;
    width: 100%;
    padding: 0 calc(var(--gap-unit)*4);
}

.summary__shape img {
    width: 100%;
}

.summary__chart {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*5.5);
}

.summary__chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1.3);
    width: 25%;
}

.summary__chart-arrow {
    display: flex;
    width: 6rem;
}

.summary__chart-arrow svg {
    width: 100%;
}

.summary__chart-txt {
    font-size: var(--font-size30);
    font-weight: bold;
    text-align: center;
    color: var(--bg-white-color);
    line-height: 1;
    padding: calc(var(--gap-unit)*3);
    border-radius: calc(var(--border-radius)*2);
    background-color: var(--bg-orange-color);
    width: 100%;
}

.summary__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: calc(var(--gap-unit)*4);
}

.summary__txt {
    display: flex;
    font-size: var(--font-size18);
    width: 63%;
}

.summary__txt span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.summary__img {
    display: flex;
    width: 43%;
    margin-left: -7%;
}

.summary__img img {
    width: 100%;
}

@media (max-width: 768px) {
    .summary__inner {
        padding: 2rem;
    }

    .summary__title {
        width: 10rem;
    }

    .summary__content {
        margin-top: -3rem;
        border-radius: 2rem;
        padding: calc(var(--gap-unit)*3);
        padding-top: 3rem;
    }

    .summary__shape {
        padding: 0;
    }

    .summary__chart {
        gap: calc(var(--gap-unit)*3);
    }

    .summary__chart-item {
        flex: 1;
    }

    .summary__chart-arrow {
        width: 3rem;
    }

    .summary__chart-txt {
        font-size: var(--font-size24);
    }
}

@media (max-width: 450px) {
    .point__summary .container {
        padding: 0;
    }

    .summary__inner {
        padding: 2rem;
        padding-bottom: 4rem;
    }

    .summary__title {
        width: 15rem;
    }

    .summary__content {
        margin-top: -4rem;
        border-radius: 2rem;
        padding: calc(var(--gap-unit)*2.2);
        padding-top: 5rem;
    }

    .summary__lead {
        font-size: var(--font-size16);
    }

    .summary__shape {
        padding: 0;
    }

    .summary__chart {
        gap: calc(var(--gap-unit)*2);
    }

    .summary__chart-item {
        flex: 1;
        gap: calc(var(--gap-unit)*1);
    }

    .summary__chart-arrow {
        width: 3rem;
    }

    .summary__chart-txt {
        font-size: var(--font-size18);
        padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*1.5);
    }

    .summary__main {
        flex-direction: column;
        margin-top: 0;
    }

    .summary__txt {
        width: 100%;
        font-size: var(--font-size16);
    }

    .summary__img {
        margin: 0;
        width: 100%;
    }
}



/* ------------page story style------------ */
.story__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*7.5);
    padding: 8rem 30rem 12rem;
    background-image: url(../img/gray_bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: repeat-y;
}

.story__heading {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.story__title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.story__title {
    font-size: var(--font-size26);
    font-weight: 700;
}

.story__title-en {
    font-size: var(--font-size24);
    color: var(--bg-orange-color);
}

.story__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8.5);
}

.story__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.story__item::before {
    content: '';
    position: absolute;
    top: 6rem;
    left: 0;
    width: 10rem;
    height: 10rem;
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 19.08px 0px #0000004D;
    border-radius: 50%;
    z-index: 1;
}

.story__item:nth-child(even)::before {
    left: unset;
    right: 0;
}

.story__order {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size20);
    font-weight: 500;
    width: 10rem;
    height: 10rem;
    background-color: var(--bg-white-color);
    border-radius: 50%;
    margin-right: -4rem;
    margin-top: 6rem;
    line-height: 1;
    z-index: 3;
}

.story__item:nth-child(even) {
    flex-direction: row-reverse;
}

.story__item:nth-child(even) .story__order {
    margin-right: 0;
    margin-left: -4rem;
}

.story__order span {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1;
}

.story__main {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3.5);
    padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*7);
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 21.69px 0px #0000004D;
    z-index: 2;
}

.story__subtitle {
    position: relative;
    font-size: var(--font-size26);
    font-weight: bold;
    color: var(--bg-orange-color);
    text-align: center;
    line-height: 1;
    padding-bottom: calc(var(--gap-unit)*2);
    border-bottom: 1px solid var(--bg-font-color);
}

.story__detail {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*4);
}

.story__item:nth-child(even) .story__detail {
    flex-direction: row-reverse;
}

.story__txt {
    flex: 1;
    font-size: 1.7rem;
    line-height: 1.7;
}

.story__img {
    display: flex;
    width: 40%;
}

.story__img img {
    width: 100%;
}

@media (max-width: 768px) {
    .story__inner {
        padding: 5.5rem 3rem;
    }

    .story__title {
        font-size: var(--font-size30);
    }

    .story__order {
        font-size: var(--font-size20);
        width: 4.5rem;
        height: 4.5rem;
        margin-right: -2.5rem;
    }

    .story__item::before {
        width: 4.5rem;
        height: 4.5rem;
    }

    .story__order span {
        font-size: 1.8rem;
    }

    .story__main {
        gap: calc(var(--gap-unit)*2.5);
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*4);
    }

    .story__item:nth-child(even) .story__order {
        margin-left: -2.5rem;
    }

    .story__main:nth-child(odd) {
        padding-left: 2.5rem;
    }

    .story__main:nth-child(even) {
        padding-right: 2.5rem;
    }

    .story__detail {
        gap: calc(var(--gap-unit)*2);
    }

    .story__subtitle {
        font-size: var(--font-size22);
        line-height: 1.5;
        padding-bottom: calc(var(--gap-unit)*1.5);
    }

    .story__txt {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .story__inner {
        padding: 8rem 3rem;
        gap: calc(var(--gap-unit)*6);
    }

    .story__content {
        gap: calc(var(--gap-unit)*4);
    }

    .story__title {
        font-size: var(--font-size28);
    }

    .story__title-en {
        font-size: var(--font-size22);
    }

    .story__item,
    .story__item:nth-child(even) {
        flex-direction: column;
    }

    .story__order {
        font-size: var(--font-size16);
        width: 9rem;
        height: 9rem;
        margin-left: 2rem !important;
        margin-top: 0;
        margin-right: 0 !important;
        margin-bottom: -4.5rem;
    }

    .story__item::before {
        top: 0 !important;
        left: 2rem !important;
        right: unset !important;
        width: 9rem;
        height: 9rem;
    }

    .story__order span {
        font-size: 3rem;
    }

    .story__main {
        gap: calc(var(--gap-unit)*2.5);
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*3) calc(var(--gap-unit)*4) !important;
    }

    .story__main:nth-child(even) {
        padding-right: 2.5rem;
    }

    .story__detail {
        flex-direction: column-reverse !important;
        gap: calc(var(--gap-unit)*2);
    }

    .story__subtitle {
        font-size: var(--font-size20);
        line-height: 1.5;
    }

    .story__img {
        width: 100%;
    }

    .story__txt {
        font-size: 1.5rem;
    }
}




/* ------------page feature style------------ */
.page__strength {
    background-color: #F4F4F4;
}

.page__strength .page__title-en {
    font-size: var(--font-size26);
}

.strength__mission {
    position: relative;
}

.mission__inner {
    position: relative;
    padding: 12rem var(--margin) 0;
}

.mission__content {
    display: flex;
    flex-direction: column;
    gap: 7rem;
    padding: 8rem 11rem 8rem 6rem;
    background-color: var(--bg-white-color);
}

.mission__title {
    display: flex;
    align-items: flex-end;
    font-size: var(--font-size26);
    font-weight: 500;
}

.mission__title-highlight {
    position: relative;
    display: flex;
    font-size: var(--font-size32);
    font-weight: bold;
}

.mission__title-border {
    position: absolute;
    left: -3%;
    bottom: -1px;
    display: flex;
    width: 108%;
}

.mission__title-border svg {
    width: 100%;
}

.mission__des {
    position: relative;
    font-size: var(--font-size18);
    line-height: 1.8;
    z-index: 2;
}

.mission__des span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.mission__map {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 65rem;
}

.mission__map img {
    width: 100%;
}

@media (max-width: 768px) {
    .mission__inner {
        padding: 6rem var(--margin) 0;
    }

    .mission__map {
        width: 21em;
    }

    .mission__title {
        position: relative;
        font-size: var(--font-size24);
        z-index: 2;
    }

    .mission__title-highlight {
        font-size: var(--font-size30);
    }

    .mission__content {
        position: relative;
        gap: 2rem;
        padding: 4rem 3rem 3rem;
    }

    .mission__des {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .mission__inner {
        padding: 10rem var(--margin) 0;
    }

    .mission__title {
        position: relative;
        font-size: 1.5rem;
        z-index: 2;
    }

    .mission__title-highlight {
        font-size: var(--font-size22);
    }

    .mission__content {
        gap: 3rem;
        padding: 4rem 2rem 3rem;
    }

    .mission__des {
        font-size: 1.4rem;
    }
}






.feature__inner {
    display: flex;
    flex-direction: column;
}

.feature__item,
.feature__item-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature__img {
    display: flex;
    width: 51.5%;
    aspect-ratio: 62/40;
    margin-left: -3%;
    overflow: hidden;
}

.feature__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Strength feature: img column first (overlay + fade), then main. Odd: main L→R / img R→L. Even: main R→L / img L→R. */
.page__strength .feature__main {
    position: relative;
    overflow: hidden;
    background-color: #D9D9D9;
}

.page__strength .feature__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #FFFFFF;
    transform: scaleX(0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.14s;
    pointer-events: none;
}

.page__strength .feature__item:nth-child(odd) .feature__main::before {
    transform-origin: left center;
}

.page__strength .feature__item:nth-child(even) .feature__main::before {
    transform-origin: right center;
}

.page__strength .feature__main>* {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__strength .feature__item.feature__item--visible .feature__main::before {
    transform: scaleX(1);
}

.page__strength .feature__item.feature__item--visible .feature__main>* {
    opacity: 1;
    transform: none;
    transition-delay: 0.54s;
}

.page__strength .feature__img {
    position: relative;
    overflow: hidden;
}

.page__strength .feature__img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #D9D9D9;
    transform: scaleX(0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0s;
    pointer-events: none;
}

.page__strength .feature__item:nth-child(odd) .feature__img::before {
    transform-origin: right center;
}

.page__strength .feature__item:nth-child(even) .feature__img::before {
    transform-origin: left center;
}

.page__strength .feature__img img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__strength .feature__item.feature__item--visible .feature__img::before {
    transform: scaleX(1);
}

.page__strength .feature__item.feature__item--visible .feature__img img {
    opacity: 1;
    transform: none;
    transition-delay: 0.34s;
}

.page__strength .feature__inner>.feature__item>.feature__portals {
    position: relative;
    overflow: hidden;
    background-color: #F4F4F4;
}

.page__strength .feature__inner>.feature__item>.feature__portals::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.26s;
    pointer-events: none;
}

.page__strength .feature__item:nth-child(odd)>.feature__portals::before {
    transform-origin: left center;
}

.page__strength .feature__item:nth-child(even)>.feature__portals::before {
    transform-origin: right center;
}

.page__strength .feature__inner>.feature__item>.feature__portals>* {
    position: relative;
    opacity: 0;
    transform: translate3d(0, 1.15rem, 0);
    transition:
        opacity 0.52s ease,
        transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__strength .feature__item.feature__item--visible>.feature__portals::before {
    transform: scaleX(1);
}

.page__strength .feature__item.feature__item--visible>.feature__portals>* {
    opacity: 1;
    transform: none;
    transition-delay: 0.7s;
}

@media (prefers-reduced-motion: reduce) {

    .page__strength .feature__main::before,
    .page__strength .feature__img::before,
    .page__strength .feature__inner>.feature__item>.feature__portals::before {
        transform: scaleX(1);
        transition: none;
    }

    .page__strength .feature__main>*,
    .page__strength .feature__img img,
    .page__strength .feature__inner>.feature__item>.feature__portals>* {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.feature__main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2.5);
    width: 51.5%;
    padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*6);
    padding-right: calc(var(--gap-unit)*9);
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 10px 0px #00000040;
}

.feature__head {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--gap-unit)*1.5);
    border-bottom: 1px solid #F6C199;
}

.feature_number {
    font-size: 8.5rem;
    font-family: var(--fontS);
    color: #F6C199;
    line-height: .65;
}

.feature__title {
    font-size: var(--font-size22);
    font-weight: bold;
    line-height: 1.4;
}

.feature__txt {
    font-size: 1.7rem;
    line-height: 1.8;
}

.feature__txt span {
    font-weight: bold;
    color: var(--bg-orange-color);
}

.feature__item:nth-child(even) {
    flex-direction: row-reverse;
}

.feature__item:nth-child(even) .feature__img {
    position: relative;
    margin-left: 0;
    margin-right: -3%;
}

.feature__item:first-child {
    z-index: 10;
}

.feature__item:nth-child(2) {
    position: relative;
    margin-top: calc(var(--gap-unit)*-2);
    z-index: 9;
}

.feature__item:nth-child(2) .feature__main {
    padding: 5rem 7rem;
    padding-left: 9rem;
}

.feature__item:nth-child(3) {
    position: relative;
    flex-direction: column;
    margin-top: calc(var(--gap-unit)*-2);
    z-index: 8;
}

.feature__item:nth-child(3) .feature__main {
    padding: 5rem 6rem;
    padding-right: 8rem;
}

.feature__portals {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6rem auto;
    width: fit-content;
}

.feature__portals-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc(var(--gap-unit)*3.5);
    font-size: var(--font-size16);
    font-weight: bold;
    color: var(--bg-orange-color);
    background-color: var(--bg-white-color);
    border-radius: 999px;
    border: 2px solid var(--bg-orange-color);
    line-height: 1.8;
    z-index: 5;
}

.feature__portals-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*4);
    padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*4);
    background-color: var(--bg-white-color);
    border-top: 4px solid var(--bg-orange-color);
    box-shadow: 0px 1.98px 13.22px 0px #36558133;
    border-radius: calc(var(--border-radius)*.5);
    margin-top: -2rem;
    z-index: 2;
}

.feature__portals-item {
    display: flex;
    width: 14rem;
}

.feature__portals-item img {
    width: 100%;
}

.feature__portals-txt {
    font-size: var(--font-size18);
    font-weight: 500;
}

.feature__item:nth-child(4) {
    position: relative;
    z-index: 7;
}

.feature__item:nth-child(4) .feature__main {
    padding: 4rem 4rem 4rem 6rem;
}

.feature__rate {
    display: flex;
    gap: calc(var(--gap-unit)*3.5);
}

.feature__rate-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*.5);
    padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    background-color: var(--bg-white-color);
    box-shadow: 0px 0px 10px 0px #00000040;
}

.feature__rate-img {
    display: flex;
    width: 85%;
}

.feature__rate-img img {
    width: 100%;
}

.feature__rate-txt {
    font-size: var(--font-size20);
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    margin: auto 0;
}

.feature__rate-txt span {
    font-size: var(--font-size14);
}

.feature__item:nth-child(5) {
    position: relative;
    z-index: 6;
    margin-top: calc(var(--gap-unit)*-2);
}

.feature__item:nth-child(5) .feature__main {
    padding: 6rem 8rem 10rem 5rem;
}

.feature__item:nth-child(6) {
    position: relative;
    z-index: 5;
    margin-top: calc(var(--gap-unit)*-2);
}

.feature__item:nth-child(6) .feature__main {
    padding: 8rem 5rem 10rem 7rem;
}

.feature__item:nth-child(7) {
    position: relative;
    z-index: 4;
    margin-top: calc(var(--gap-unit)*-2);
}

.feature__item:nth-child(7) .feature__main {
    padding: 8rem 8rem 12rem 5rem;
}

.feature__item:nth-child(8) {
    position: relative;
    z-index: 3;
    margin-top: calc(var(--gap-unit)*-2);
}

.feature__item:nth-child(8) .feature__main {
    padding: 8rem 5rem 14rem 8rem;
}

.feature__item:nth-child(9) {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--gap-unit)*-2);
}

.feature__item:nth-child(9) .feature__main {
    padding: 5rem 8rem 5rem 6rem;
}

@media (max-width: 768px) {
    .feature__inner {
        gap: calc(var(--gap-unit)*10);
    }

    .feature__item,
    .feature__item-wrap {
        flex-direction: column-reverse !important;
        margin: 0 !important;
    }

    .feature__item:nth-child(3) {
        flex-direction: column !important;
    }

    .feature__img {
        width: 100%;
        margin: 0 !important;
    }

    .feature__main {
        width: 100%;
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4) !important;
    }

    .feature_number {
        font-size: 4.5rem;
    }

    .feature__title {
        font-size: var(--font-size20);
    }

    .feature__txt {
        font-size: var(--font-size16);
        margin: 0 !important;
    }

    .feature__portals {
        margin-top: calc(var(--gap-unit)*6);
        margin-bottom: 0;
    }

    .feature__portals-content {
        margin-top: -1rem;
    }

    .feature__portals-item {
        width: 5rem;
    }
}

@media (max-width: 450px) {
    .feature__inner {
        gap: calc(var(--gap-unit)*8);
    }

    .feature__main {
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2) !important;
        gap: calc(var(--gap-unit)*2);
    }

    .feature__head {
        gap: calc(var(--gap-unit));
    }

    .feature_number {
        font-size: 7rem;
    }

    .feature__title {
        font-size: 1.7rem;
    }

    .feature__txt {
        font-size: 1.4rem;
    }

    .feature__portals {
        margin-top: calc(var(--gap-unit)*6);
        margin-bottom: 0;
    }

    .feature__portals-label {
        font-size: 1.5rem;
        padding: 0 calc(var(--gap-unit)*1.5);
    }

    .feature__portals-content {
        flex-wrap: wrap;
        margin-top: -2rem;
        gap: calc(var(--gap-unit)*1) calc(var(--gap-unit)*2.5);
        padding: calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*3) calc(var(--gap-unit)*1.5);
    }

    .feature__portals-item {
        width: 42%;
    }

    .feature__portals-txt {
        text-align: center;
        width: 100%;
        font-size: var(--font-size16);
    }

    .feature__rate {
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--gap-unit)*1.5);
    }

    .feature__rate-item {
        width: 48%;
        flex: none;
    }

    .feature__rate-img {
        width: 70%;
    }

    .feature__rate-txt {
        font-size: var(--font-size16);
    }

    .feature__rate-txt span {
        font-size: 1.2rem;
    }
}
















/* ------------page sale style------------  */
.sale__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*5);
    padding: 0 12rem;
}

.sale__heading {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
}

.sale__title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sale__title-jp {
    font-size: var(--font-size32);
    font-weight: bold;
}

.sale__title-en {
    font-size: var(--font-size24);
    font-weight: bold;
    color: var(--bg-orange-color);
    line-height: 1.3;
}

.sale__lead {
    font-size: var(--font-size20);
    text-align: center;
}


.sale__merit {
    display: flex;
    justify-content: center;
    gap: calc(var(--gap-unit)*7.5);
}

.sale__merit-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    width: 36rem;
    padding: calc(var(--gap-unit)*3);
    background-color: var(--bg-white-color);
    border-radius: calc(var(--border-radius)*2);
    box-shadow: 0px 0px 20px 0px #FF8228CC;
}

.sale__merit-item--disadvantage {
    box-shadow: 0px 0px 20px 0px #00000080;
}

.sale__merit-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*1);
    font-size: var(--font-size30);
    font-weight: 500;
    width: fit-content;
    margin: 0 auto;
    line-height: 1;
}

.sale__merit-label .border {
    display: flex;
    height: 2.2rem;
}

.sale__merit-label .border svg {
    height: 100%;
}

.sale__merit-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
}

.sale__merit-txt {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*1);
    font-size: var(--font-size20);
}

.sale__merit-txt span {
    font-weight: bold;
    color: var(--bg-orange-color);
}


.sale__merit-txt .txt div {
	display: inline !important;
	font-size: var(--font-size22);
}

.sale__merit-txt .icon {
    display: flex;
    width: 1.2rem;
    margin-top: 1rem;
}

.sale__merit-txt .icon svg {
    width: 100%;
}

.sale__merit-txt .txt {
    flex: 1;
}

.sale__merit-item--disadvantage .sale__merit-txt {
    color: #BFBFBF;
}

.sale__merit-item--disadvantage .sale__merit-txt span {
	font-weight: 400;
    color: #303030;
}

.sale__content {
    display: flex;
    flex-direction: column;
    gap: 9rem;
    padding: calc(var(--gap-unit)*9) calc(var(--gap-unit)*8);
    padding-right: calc(var(--gap-unit)*4);
    background-color: #FFEEE1;
    margin-top: calc(var(--gap-unit)*5);
}

.sale__flow {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*10);
}

.sale__flow-title {
    position: relative;
    font-size: var(--font-size32);
    font-weight: bold;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}

.sale__flow-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: var(--bg-orange-color);
}

.sale__flow-title span {
    font-size: var(--font-size24);
}

.sale__flow-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8.5);
}

.sale__flow-line {
    position: absolute;
    left: 43%;
    top: 0;
    z-index: 0;
    width: 2px;
    height: 0;
    background-color: var(--bg-orange-color);
    transform-origin: top center;
    pointer-events: none;
}

.sale__flow-line.sale__flow-line--complete {
    height: 94%;
}

.sale__purchase .sale__flow-line.sale__flow-line--complete {
    height: 86%;
}

.sale__flow-item {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 9rem;
    pointer-events: none;
}

.sale__flow-item.sale__flow-item--visible {
    pointer-events: auto;
}

.sale__flow-left,
.sale__flow-right {
    opacity: 0;
    transform: translate3d(0, 1.35rem, 0);
    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sale__flow-item.sale__flow-item--visible .sale__flow-left {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.1s;
}

.sale__flow-item.sale__flow-item--visible .sale__flow-right {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.24s;
}

.sale__flow-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(43% - var(--gap-unit)*.9 + 1px);
    display: flex;
    width: calc(var(--gap-unit)*1.8);
    height: calc(var(--gap-unit)*1.8);
    border-radius: 50%;
    background-color: var(--bg-orange-color);
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
    transition:
        opacity 0.35s ease,
        transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.sale__flow-item.sale__flow-item--visible::before {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

    .sale__flow-line {
        height: 94%;
    }

    .sale__purchase .sale__flow-line {
        height: 86%;
    }

    .sale__flow-item {
        pointer-events: auto;
    }

    .sale__flow-left,
    .sale__flow-right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sale__flow-item::before {
        opacity: 1;
        transform: scale(1);
        transition: none;
    }
}

.sale__flow-right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
    width: 47%;
}

.sale__flow-shape {
    display: flex;
    width: 11rem;
}

.sale__flow-shape svg {
    width: 100%;
}

.sale__flow-left {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*2.5);
}

.sale__flow-meta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit));
}

.sale__flow-order {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size22);
    font-weight: bold;
    color: var(--bg-white-color);
    padding: 0 calc(var(--gap-unit));
    background-color: var(--bg-orange-color);
    border-radius: calc(var(--border-radius)*.5);
    width: fit-content;
}

.sale__flow-label {
    font-size: var(--font-size22);
    font-weight: bold;
}

.sale__flow-right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit));
}

.sale__flow-subtitle {
    font-size: var(--font-size20);
    font-weight: 600;
}

.sale__flow-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit));
}

.sale__flow-txt {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit));
    font-size: var(--font-size16);
}

.flow__portals {
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--gap-unit)*1) calc(var(--gap-unit)*2);
    background-color: var(--bg-white-color);
    border-radius: calc(var(--border-radius)*1.5);
    padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*11) calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*6);
}

.flow__portals-item {
    display: flex;
    width: 100%;
}

.flow__portals-item img {
    width: 100%;
}

.flow__portals-txt {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
}

.sale__point {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20rem;
}

.sale__point-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size20);
    font-weight: bold;
    color: var(--bg-orange-color);
    padding: 0 calc(var(--gap-unit)*4);
    border: 2px solid var(--bg-orange-color);
    border-radius: 999px;
    background-color: var(--bg-white-color);
    width: fit-content;
}

.sale__point-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2);
    padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*6) calc(var(--gap-unit)*3);
    padding-left: 19rem;
    background-color: var(--bg-white-color);
    border-top: 4px solid var(--bg-orange-color);
    box-shadow: 0px 2.42px 16.17px 0px #E8680C80;
    width: 100%;
    border-radius: calc(var(--border-radius)*.5);
    margin-top: -2rem;
}

.sale__point-item {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*1.5);
    font-size: var(--font-size18);
    font-weight: bold;
    line-height: 1;
    border-bottom: 1.3px dashed var(--bg-font-color);
    padding-bottom: calc(var(--gap-unit)*1);
}

.sale__point-check {
    display: flex;
    width: 2rem;
}

.sale__point-check svg {
    width: 100%;
}

.sale__point-img {
    position: absolute;
    top: 4rem;
    left: 4rem;
    display: flex;
    width: 11rem;
}

.sale__point-img img {
    width: 100%;
}

.sale__point-lead {
    font-size: var(--font-size18);
    font-weight: bold;
    color: var(--bg-orange-color);
    width: fit-content;
    margin-left: auto;
    margin-top: calc(var(--gap-unit)*4);
}

.sale__point-lead span {
    color: var(--bg-black-color);
    padding-left: calc(var(--gap-unit)*1);
}

.sale__purchase .sale__title-en {
    color: #2BAD1B;
}

.sale__purchase .sale__merit-item {
    box-shadow: 0px 0px 20px 0px #2BAD1B99;
}

.sale__purchase .sale__merit-item--disadvantage {
    box-shadow: 0px 0px 20px 0px #00000080;
}

.sale__purchase .sale__merit-txt span {
	color: #2BAD1B;
}

.sale__purchase .sale__merit-item--disadvantage .sale__merit-txt span {
	font-weight: 400;
    color: #303030;
}

.sale__purchase .sale__flow-title::before {
    background-color: #2BAD1B;
}

.sale__purchase .sale__content {
    background-color: #E4F4E2;
}

.sale__purchase .sale__flow-line {
    background-color: #2BAD1B;
}

.sale__purchase .sale__flow-item::before {
    background-color: #2BAD1B;
}

.sale__purchase .sale__flow-order {
    background-color: #2BAD1B;
}

.sale__purchase .sale__point-label {
    color: #2BAD1B;
    border-color: #2BAD1B;
}

.sale__purchase .sale__point-main {
    border-color: #2BAD1B;
    box-shadow: 0px 2.42px 16.17px 0px #2B891F80;
}

.sale__purchase .sale__point-lead {
    color: #2BAD1B;
}

@media (max-width: 768px) {
    .sale__inner {
        padding: 0;
    }

    .sale__title-en {
        font-size: var(--font-size22);
    }

    .sale__lead {
        font-size: var(--font-size18);
    }

    .sale__merit {
        gap: calc(var(--gap-unit)*4);
    }

    .sale__merit-item {
        flex: 1;
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*3) calc(var(--gap-unit)*6);
        gap: calc(var(--gap-unit)*3);
    }

    .sale__merit-label {
        font-size: var(--font-size24);
    }

    .sale__merit-label .border {
        height: 1rem;
    }

    .sale__merit-txt .icon {
        width: .7rem;
        margin-top: .3rem;
    }

    .sale__merit-item--disadvantage .sale__merit-txt,
    .sale__merit-txt {
        font-size: var(--font-size18);
    }
	
	.sale__merit-txt .txt div {
		font-size: var(--font-size20);
	}

    .sale__content {
        gap: 4rem;
        padding: calc(var(--gap-unit)*8) calc(var(--gap-unit)*4);
        padding-right: calc(var(--gap-unit)*2);
    }

    .sale__flow {
        gap: calc(var(--gap-unit)*8);
    }

    .sale__flow-item {
        gap: 4rem;
    }

    .sale__flow-title {
        font-size: var(--font-size28);
    }

    .sale__flow-left {
        gap: calc(var(--gap-unit)*1.5);
    }

    .sale__flow-shape {
        width: 5rem;
    }

    .sale__flow-order {
        font-size: var(--font-size16);
    }

    .sale__flow-label {
        font-size: var(--font-size16);
    }

    .sale__flow-subtitle {
        font-size: var(--font-size16);
    }

    .sale__flow-txt {
        font-size: var(--font-size14);
    }

    .flow__portals {
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*6) calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    }

    .flow__portals-txt {
        bottom: 1rem;
        right: .5rem;
    }

    .sale__point {
        margin: 0 2rem;
    }

    .sale__point-main {
        margin-top: -1rem;
        padding-left: 12rem;
    }

    .sale__point-item {
        font-size: var(--font-size16);
    }

    .sale__point-check {
        width: 1rem;
    }

    .sale__point-img {
        top: 2rem;
        left: 2rem;
        width: 6rem;
    }

    .sale__point-lead {
        font-size: var(--font-size16);
        margin-top: calc(var(--gap-unit)*3);
    }
}

@media (max-width: 450px) {
    .sale__inner {
        padding: 0;
    }

    .sale__title-jp {
        font-size: 3rem;
    }

    .sale__title-en {
        font-size: var(--font-size20);
    }

    .sale__lead {
        font-size: var(--font-size16);
    }

    .sale__merit {
        flex-direction: column;
        gap: calc(var(--gap-unit)*3);
    }

    .sale__merit-item {
        flex: 1;
        padding: calc(var(--gap-unit)*5) calc(var(--gap-unit)*3) calc(var(--gap-unit)*6);
        gap: calc(var(--gap-unit)*2);
    }

    .sale__merit-label {
        font-size: var(--font-size26);
    }

    .sale__merit-label .border {
        height: 2.2rem;
    }

    .sale__merit-txt .icon {
        width: 1.2rem;
        margin-top: .7rem;
    }

    .sale__content {
        gap: 4rem;
        padding: calc(var(--gap-unit)*8) calc(var(--gap-unit)*6);
        padding-right: calc(var(--gap-unit)*2.5);
    }

    .sale__flow-content {
        gap: calc(var(--gap-unit)*5);
    }

    .sale__flow-line {
        left: -2.5rem;
    }

    .sale__flow-item::before {
        left: calc(-2.5rem - var(--gap-unit)*.9 + 1px);
    }

    .sale__flow {
        gap: calc(var(--gap-unit)*8);
    }

    .sale__flow-item {
        flex-direction: column;
        gap: 1rem;
    }

    .sale__flow-title {
        font-size: var(--font-size26);
    }

    .sale__flow-title span {
        font-size: var(--font-size22);
    }

    .sale__flow-left {
        gap: calc(var(--gap-unit)*1.5);
        width: 100%;
    }

    .sale__flow-right {
        width: 100%;
    }

    .sale__flow-shape {
        width: 8rem;
    }

    .flow__portals {
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*7) calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    }

    .flow__portals-txt {
        bottom: 2rem;
        right: 1.5rem;
    }

    .sale__point {
        margin: 0;
        margin-left: calc(var(--gap-unit)*-3.5);
    }

    .sale__point-label {
        font-size: var(--font-size18);
        padding: 0 calc(var(--gap-unit)*2.5);
    }

    .sale__point-main {
        margin-top: -2rem;
        padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*2.5) calc(var(--gap-unit)*3);
    }

    .sale__point-item {
        font-size: 1.5rem;
        gap: calc(var(--gap-unit)*.5);
    }

    .sale__point-check {
        width: 2rem;
    }

    .sale__point-txt {
        flex: 1;
    }

    .sale__point-img {
        display: none;
    }

    .sale__point-lead {
        font-size: var(--font-size14);
        text-align: center;
        margin-top: calc(var(--gap-unit)*2);
    }
}




















/* ------------page company style------------  */
.company__profile#profile.profile--animate .profile__inner {
    contain: layout;
}

.company__profile#profile.profile--animate .profile__heading,
.company__profile#profile.profile--animate .profile__main,
.company__profile#profile.profile--animate .profile__img {
    backface-visibility: hidden;
}

.company__profile#profile.profile--revealed .profile__heading,
.company__profile#profile.profile--revealed .profile__main,
.company__profile#profile.profile--revealed .profile__img,
.company__profile#profile.profile--revealed .profile__row {
    opacity: 1;
    transform: none;
}

.company__profile#profile.profile--revealed .profile__img {
    clip-path: none;
}

.profile__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*9);
    padding: 0 10rem;
}

.company__title {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-weight: bold;
}

.company__title-jp {
    font-size: var(--font-size32);
    font-weight: bold;
    text-align: center;
}

.company__title-en {
    font-size: var(--font-size24);
    color: var(--bg-orange-color);
    line-height: 1;
}

.profile__content {
    display: flex;
    align-items: flex-start;
}

.profile__main {
    display: flex;
    width: 55%;
    margin-right: -7%;
}

.profile__table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.profile__row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*2.5);
    padding: calc(var(--gap-unit)*2);
    margin: 0;
    border-bottom: 1.2px solid var(--bg-orange-color);
}

.profile__row:first-child {
    padding-top: 0;
}

.profile__dt,
.profile__dd {
    font-size: 1.7rem;
    margin: 0;
}

.profile__dt {
    text-align: right;
    width: 35%;
}

.profile__dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.5);
    font-weight: bold;
}

.profile__img {
    display: flex;
    width: 49%;
    overflow: hidden;
}

.profile__img picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.profile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

@media (max-width: 768px) {
    .company__title-jp {
        font-size: var(--font-size30);
    }

    .company__title-en {
        font-size: var(--font-size20);
    }

    .profile__inner {
        padding: 0;
        gap: calc(var(--gap-unit)*6);
    }

    .profile__content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*3);
    }

    .profile__main {
        width: 100%;
        margin: 0;
    }

    .profile__dt,
    .profile__dd {
        font-size: .75rem;
    }

    .profile__img {
        width: 100%;
    }

    .profile__img {
        aspect-ratio: 3/2;
    }
}

@media (max-width: 450px) {
    .company__title-jp {
        font-size: var(--font-size26);
    }

    .company__title-en {
        font-size: var(--font-size18);
    }

    .profile__inner {
        padding: 0;
        gap: calc(var(--gap-unit)*5);
    }

    .profile__content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*3);
    }

    .profile__main {
        width: 100%;
        margin: 0;
    }

    .profile__row {
        flex-direction: column;
        gap: calc(var(--gap-unit)*.5);
        padding: calc(var(--gap-unit)*1.3) calc(var(--gap-unit)*1.5);
    }

    .profile__dt {
        width: 100%;
        text-align: left;
    }

    .profile__dt,
    .profile__dd {
        font-size: 1.45rem;
    }

    .profile__img {
        width: 100%;
    }

    .profile__img {
        aspect-ratio: 3/2;
    }
}



.company__history {
    position: relative;
    background: linear-gradient(90deg, #F5F5F5 8.54%, #FFFFFF 49.93%, #EBEBEB 92.12%);
}

.company__history.history--revealed .history__content::before {
    transform: translateX(-50%) scaleY(1);
}

.company__history.history--revealed .history__item,
.company__history.history--revealed .history__arrow svg,
.company__history.history--revealed .history__heading .company__title-jp,
.company__history.history--revealed .history__heading .company__title-en {
    opacity: 1;
    transform: none;
}

.company__history.history--revealed .history__txt {
    clip-path: none;
    overflow: visible;
}

@media (max-width: 450px) {
    .company__history.history--revealed .history__content::before {
        transform: translateX(0) scaleY(1);
        transform-origin: top left;
    }
}

.company__history.history--animate .history__inner {
    contain: layout;
}

.company__history.history--animate .history__item,
.company__history.history--animate .history__heading {
    backface-visibility: hidden;
}

.history__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8);
    padding: 0 25rem;
}

.history__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    padding: calc(var(--gap-unit)*2.5) 0;
}

.history__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleY(var(--history-line-scale, 1));
    transform-origin: top center;
    width: calc(var(--gap-unit)*1.6);
    height: 100%;
    background: linear-gradient(0, #FF8228 0%, #FFD0AE 100%);
    border-radius: 99999px;
}

.history__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    width: 50%;
}

.history__item:nth-child(even) {
    padding-right: 10rem;
}

.history__item:nth-child(odd) {
    margin-left: auto;
    padding-left: 10rem;
}

.history__main {
    position: relative;
    width: 100%;
}

.history__main::before {
    content: '';
    position: absolute;
    bottom: -2rem;
    width: 2.5rem;
    height: 2.5rem;
    border: calc(var(--gap-unit)*1.5) solid #FFCDAA;
    border-radius: 50%;
    background-color: var(--bg-white-color);
}

.history__item:nth-child(even) .history__main::before {
    right: -12.35rem;
}

.history__item:nth-child(odd) .history__main::before {
    left: -12.35rem;
}

.history__arrow {
    position: absolute;
    bottom: calc(-1.5rem + var(--gap-unit)*.25);
    display: flex;
    width: 2.6rem;
}

.history__arrow svg {
    width: 100%;
}

.history__item:nth-child(even) .history__arrow {
    right: -4.6rem;
}

.history__item:nth-child(odd) .history__arrow {
    left: -4.6rem;
}

.history__year {
    position: relative;
    font-size: var(--font-size36);
    font-weight: bold;
    color: var(--bg-orange-color);
    line-height: 1.1;
    width: 100%;
    text-align: center;
    letter-spacing: .04em;
    padding-bottom: calc(var(--gap-unit)*2);
    border-bottom: calc(var(--gap-unit)*.5) dashed #673008;
}

.history__txt {
    font-size: 1.7rem;
    font-weight: 500;
}

.history__item:nth-child(even) .history__txt {
    text-align: right;
}

.history__txt span {
    font-weight: bold;
}

@media (max-width: 768px) {
    .history__inner {
        padding: 0;
    }

    .history__item:nth-child(odd) {
        padding-left: 5rem;
    }

    .history__item:nth-child(even) {
        padding-right: 5rem;
    }

    .history__main::before {
        width: 1.3rem;
        height: 1.3rem;
        bottom: -1.1rem;
    }

    .history__item:nth-child(even) .history__main::before {
        right: -6.3rem;
    }

    .history__item:nth-child(odd) .history__main::before {
        left: -6.3rem;
    }

    .history__txt {
        font-size: var(--font-size16);
    }

    .history__year {
        font-size: var(--font-size32);
    }

    .history__item .history__arrow {
        width: 1.3rem;
        bottom: -.7rem;
    }

    .history__item:nth-child(odd) .history__arrow {
        left: -2.5rem;
    }

    .history__item:nth-child(even) .history__arrow {
        right: -2.5rem;
    }
}

@media (max-width: 450px) {
    .history__inner {
        padding: 0;
    }

    .history__content {
        gap: calc(var(--gap-unit)*4);
    }

    .history__item {
        width: 90%;
        gap: calc(var(--gap-unit)*1.5);
    }

    .history__item:nth-child(even) {
        margin-left: auto;
    }

    .history__item:nth-child(odd),
    .history__item:nth-child(even) {
        padding-left: 4rem;
        padding-right: 0;
    }

    .history__year {
        font-size: var(--font-size28);
        padding-bottom: calc(var(--gap-unit)*1.5);
    }

    .history__item:nth-child(even) .history__txt {
        text-align: left;
    }

    .history__main::before {
        width: 2rem;
        height: 2rem;
        bottom: -1.5rem;
        border: calc(var(--gap-unit)*1.2) solid #FFCDAA;
    }
    
    .history__content::before {
        left: .8rem;
        transform: translateX(0) scaleY(var(--history-line-scale, 1));
        transform-origin: top left;
        width: .8rem;
    }

    .history__item:nth-child(even) .history__main::before {
        left: -8.4rem;
        right: unset;
    }

    .history__item:nth-child(odd) .history__main::before {
        left: -8.4rem;
    }

    .history__item .history__arrow {
        width: 1.8rem;
        bottom: -.8rem;
    }

    .history__item:nth-child(odd) .history__arrow {
        left: -3.5rem;
    }

    .history__item:nth-child(even) .history__arrow {
        right: unset;
        rotate: 180deg;
        left: -3.5rem;
    }
}






.concept__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    padding: 0 15rem;
}

.concept__title {
    font-size: var(--font-size30);
    font-weight: bold;
    text-align: center;
}

.concept__content {
    display: flex;
    gap: 10rem;
}

.concept__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3.5);
}

.concept__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    aspect-ratio: 8/9;
    border-radius: calc(var(--border-radius)*2);
    background-color: #FFEEE1;
    box-shadow: 0px 0px 11.66px 0px #00000040;
    padding: calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*3.5) calc(var(--gap-unit)*1.5);
}

.concept__img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--gap-unit);
    width: 95%;
    aspect-ratio: 1/1;
    border-radius: calc(var(--border-radius)*1.5);
    background-color: var(--bg-white-color);
}

.concept__img img {
    width: 100%;
}

.concept__cap {
    font-size: var(--font-size20);
    font-weight: bold;
    text-align: center;
}


.concept__lead {
    font-size: var(--font-size24);
    font-weight: bold;
    margin-top: calc(var(--gap-unit)*6);
    text-align: center;
    line-height: 2.5;
}

.concept__lead-highlight {
    font-size: var(--font-size36);
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 2;
}

.concept__lead-line {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.concept__lead-highlight .border {
    position: absolute;
    bottom: -3px;
    left: -3%;
    display: flex;
    width: 106%;
}

@media (max-width: 768px) {
    .concept__inner {
        padding: 0;
    }

    .concept__content {
        gap: calc(var(--gap-unit)*3);
    }

    .concept__main {
        padding: calc(var(--gap-unit)*2);
    }

    .concept__cap {
        font-size: var(--font-size18);
    }

    .concept__title {
        font-size: var(--font-size28);
    }
}

@media (max-width: 450px) {
    .concept__inner {
        gap: calc(var(--gap-unit)*5);
    }

    .concept__content {
        flex-direction: column;
        gap: calc(var(--gap-unit)*2);
    }

    .concept__item {
        align-items: center;
        gap: calc(var(--gap-unit)*1.5);
    }

    .concept__main {
        padding: calc(var(--gap-unit)*2);
        width: 60%;
        margin: 0 auto;
    }

    .concept__txt {
        font-size: 1.5rem;
    }

    .concept__cap {
        font-size: 1.7erm;
    }

    .concept__title {
        font-size: var(--font-size22);
    }

    .concept__lead {
        margin-top: 0;
    }

    .concept__lead {
        font-size: 1.8rem;
        line-height: 1.6;
    }

    .concept__lead-line {
        display: inline;
    }

    .concept__lead-highlight {
        font-size: 2.3rem;
        display: inline-flex;
    }
}



.company__access {
    position: relative;
    background-color: #FFEEE1;
}

.access__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    padding: 0 12rem;
}

.access__content {
    display: flex;
    justify-content: space-between;
    background-color: var(--bg-white-color);
}

.access__map {
    display: flex;
    width: 60%;
}

.access__map iframe {
    width: 100%;
    height: 100%;
}

.access__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*4);
    padding: calc(var(--gap-unit)*5);
}

.access__info {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1);
}

.access__address {
    font-size: var(--font-size20);
    font-weight: bold;
}

.access__time {
    font-size: var(--font-size18);
}

.access__way {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2.5);
}

.access__way-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*.5);
}

.access__way-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*1.5);
    font-size: var(--font-size18);
    font-weight: 500;
}

.access__way-label::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 2.3rem;
    width: calc(100% - 2.3rem);
    height: 1px;
    background-color: var(--bg-font-color);
}

.access__way-icon {
    display: flex;
    width: 2.5rem;
}

.access__way-icon svg {
    width: 100%;
}

.access__way-item:last-child .access__way-icon {
    width: 3rem;
}

.access__way-txt {
    font-weight: 500;
    margin-left: calc(var(--gap-unit)*5);
}

@media (max-width: 768px) {
    .access__inner {
        padding: 0;
    }

    .access__content {
        flex-direction: column;
    }

    .access__map {
        width: 100%;
        aspect-ratio: 5/3;
    }

    .access__main {
        flex-direction: row;
        align-items: flex-start;
        gap: calc(var(--gap-unit)*6);
    }

    .access__way-icon {
        width: 1.3rem;
    }

    .access__way-item:last-child .access__way-icon {
        width: 1.5rem;
    }

    .access__way-label::before {
        left: 1.25rem;
        width: calc(100% - 1.3rem);
    }
}

@media (max-width: 450px) {
    .access__inner {
        gap: calc(var(--gap-unit)*4);
    }
    .access__map {
        width: 100%;
        aspect-ratio: 4/3;
    }

    .access__main {
        flex-direction: column;
        gap: calc(var(--gap-unit)*3);
        padding: calc(var(--gap-unit)*3);
    }

    .access__address {
        font-size: 1.7rem;
    }

    .access__time {
        font-size: 1.5rem;
    }

    .access__way-label {
        font-size: var(--font-size16);
        gap: calc(var(--gap-unit)*1);
    }

    .access__way-icon {
        width: 2rem;
    }

    .access__way-item:last-child .access__way-icon {
        width: 2.2rem;
    }

    .access__way-label::before {
        left: 2rem;
        width: calc(100% - 2rem);
    }

    .access__way-txt {
        font-size: 1.4rem;
        margin-left: calc(var(--gap-unit)*3.5);
    }
}


.company__support {
    position: relative;
    background-image: url(../img/gray_bg.png);
}





/* ------------page faq style------------  */
.faq__help {
    background: linear-gradient(180deg, #FDF8F4 59.13%, #FFFFFF 100%);
}

.help__inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8);
    padding: 0 14rem;
}

.help__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap-unit)*4.5);
}

.help__title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: fit-content;
}

.help__title-en {
    font-size: var(--font-size36);
    font-weight: bold;
}

.help__title-en span {
    display: inline-block;
    font-size: var(--font-size20);
    padding: 0 calc(var(--gap-unit)*1);
}

.help__title-jp {
    font-size: var(--font-size20);
    font-weight: bold;
}

.help__title-icon {
    position: absolute;
    top: -1rem;
    right: -5rem;
    display: flex;
    width: 6.5rem;
}

.help__title-icon svg {
    width: 100%;
}

.help__lead {
    font-size: var(--font-size18);
    text-align: center;
}

.help__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit) * 4);
}

.help__item {
    flex-direction: column;
    display: flex;
    background-color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*4) calc(var(--gap-unit)*6);
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 20px 0px #F0843780;
    transition: border-left .2s ease;
}

.help__item.is-open {
    border-left: calc(var(--gap-unit)*.8) solid var(--bg-orange-color);
}

.help__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.help__question:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
}

.help__question-main {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
}

.help__question-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size24);
    font-weight: bold;
    color: var(--bg-white-color);
    line-height: .8;
    width: 4.5rem;
    height: 4.5rem;
    background-color: var(--bg-font-color);
    border-radius: 50%;
}

.help__question-txt {
    font-size: var(--font-size20);
    font-weight: 500;
}

.help__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    will-change: max-height;
}

.help__answer-wrap {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--gap-unit)*1.5);
    padding-top: calc(var(--gap-unit)*2.5);
    border-top: 1px solid var(--bg-font-color);
    padding-left: calc(var(--gap-unit)*1);
}

.help__answer-mark {
    font-size: var(--font-size32);
    font-weight: bold;
    color: var(--bg-orange-color);
    line-height: 1;
}

.help__answer-txt {
    font-size: var(--font-size18);
    line-height: 1.8;
}

.help__answer-txt span {
    font-size: var(--font-size20);
    font-weight: bold;
    color: var(--bg-orange-color);
}

.help__arrow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    margin-right: calc(var(--gap-unit)*2);
    flex-shrink: 0;
    transition: transform .5s ease-in-out;
}

.help__item.is-open .help__arrow {
    transform: rotate(180deg);
}

.help__arrow svg {
    position: absolute;
    width: 100%;
}

@media (max-width: 768px) {
    .help__inner {
        padding: 0;
    }

    .help__title-icon {
        top: -.5rem;
        right: -2rem;
        width: 3rem;
    }

    .help__item {
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4);
    }

    .help__question-mark {
        width: 2.5rem;
        height: 2.5rem;
    }

    .help__arrow {
        width: 1.2rem;
    }

    .help__answer-wrap {
        padding-left: calc(var(--gap-unit)*1.7);
    }
}

@media (max-width: 450px) {
    .help__title-icon {
        top: 0;
        right: -3.5rem;
        width: 5rem;
    }

    .help__lead {
        font-size: 1.5rem;
    }

    .help__title-jp {
        font-size: var(--font-size18);
    }

    .help__content {
        gap: calc(var(--gap-unit)*3);
    }

    .help__item {
        padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*2);
    }

    .help__item.is-open {
        border-left: 3px solid var(--bg-orange-color);
    }

    .help__question {
        gap: calc(var(--gap-unit));
    }

    .help__question-main {
        flex: 1;
        align-items: flex-start;
        gap: calc(var(--gap-unit));
    }

    .help__question-mark {
        font-size: 1.5rem;
        font-weight: 600;
        width: 3rem;
        height: 3rem;
    }

    .help__question-txt {
        flex: 1;
        font-size: 1.5rem;
        padding-top: .3rem;
    }

    .help__arrow {
        width: 1.5rem;
        margin-right: .5rem;
    }

    .help__answer-wrap {
        padding-left: calc(var(--gap-unit)*.8);
        padding-top: calc(var(--gap-unit)*2);
    }

    .help__answer-mark {
        font-size: var(--font-size22);
    }

    .help__answer-txt {
        flex: 1;
        font-size: 1.4rem;
        line-height: 1.6;
    }

    .help__answer-txt span {
        font-size: 1.5rem;
    }
}












/* ------------page news style------------  */
.page__news,
.page__blog {
    background-color: var(--bg-white-color);
}

.news__inner,
.blog__inner {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    padding: 0 12rem;
}

.news__head,
.blog__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(var(--gap-unit)*4);
    padding: calc(var(--gap-unit)*1.5);
    border-bottom: 1px solid var(--bg-orange-color);
}

.news__title,
.blog__title {
    display: flex;
    align-items: center;
    gap: var(--gap-unit);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1;
}

.news__title-icon,
.blog__title-icon {
    display: flex;
    width: 3.5rem;
}

.news__title-icon svg,
.blog__title-icon svg {
    width: 100%;
}

.news__category-list,
.blog__category-list {
    display: flex;
    gap: calc(var(--gap-unit)*2.5);
}

.news__category-link,
.blog__category-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size16);
    font-weight: bold;
    color: var(--bg-white-color);
    line-height: 1;
    padding: calc(var(--gap-unit)*1) calc(var(--gap-unit)*2);
    background-color: #D9D9D9;
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.22s ease, box-shadow 0.25s ease;
}

.news__category-link:hover,
.blog__category-link:hover {
    background-color: var(--bg-orange-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 130, 40, 0.35);
}

.news__category-link:active,
.blog__category-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 130, 40, 0.25);
}

.news__category-link:focus-visible,
.blog__category-link:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 3px;
}

.news__category-link.is-active,
.blog__category-link.is-active {
    background-color: var(--bg-orange-color);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.news__category-link.is-active:hover,
.blog__category-link.is-active:hover {
    background-color: #e86f1f;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.5),
        0 6px 18px rgba(255, 130, 40, 0.35);
}

.news__list,
.blog__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6.5);
}

.news__item,
.blog__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--gap-unit)*4);
    color: var(--bg-font-color);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.news__img,
.blog__img {
    display: flex;
    width: 30%;
    aspect-ratio: 568/350;
    border-radius: 0 4rem 0 4rem;
    overflow: hidden;
    background-color: #D9D9D9;
}

.news__img img,
.blog__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.news__item:hover .news__img img,
.blog__item:hover .blog__img img {
    transform: scale(1.05);
}

.news__content,
.blog__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*2.5);
}

.news__meta,
.blog__meta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
}

.news__date,
.blog__date {
    font-size: var(--font-size20);
    font-weight: 600;
    color: var(--bg-orange-color);
    line-height: 1;
}

.news__item-categories,
.blog__item-categories {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*3);
}

.news__item-category,
.blog__item-category {
    font-size: var(--font-size16);
    font-weight: bold;
    color: #787878;
}

.news__main,
.blog__main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
}

.news__article-title,
.blog__article-title {
    font-size: var(--font-size22);
    font-weight: bold;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    transition: color 0.25s ease;
}

.news__item:hover .news__article-title,
.blog__item:hover .blog__article-title {
    color: var(--bg-orange-color);
}

.news__txt,
.blog__txt {
    font-size: var(--font-size16);
}

.news__txt p,
.blog__txt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 35;
    overflow: hidden;
    min-width: 0;
}

@media (max-width: 768px) {

    .news__inner,
    .blog__inner {
        gap: 2rem;
        padding: 0;
    }

    .news__head,
    .blog__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
        padding: 0;
        border: none;
    }

    .news__title,
    .blog__title {
        font-size: 2rem;
        padding-bottom: calc(var(--gap-unit)*1);
        border-bottom: 1px solid var(--bg-orange-color);
        width: 100%;
    }

    .news__title-icon,
    .blog__title-icon {
        width: 2rem;
    }

    .news__item,
    .blog__item {
        align-items: flex-start;
        gap: calc(var(--gap-unit)*3);
    }

    .news__img,
    .blog__img {
        border-radius: 0 2rem;
    }

    .news__content,
    .blog__content {
        padding-top: 0;
        gap: calc(var(--gap-unit)*2.5);
    }

    .news__date,
    .blog__date {
        font-size: var(--font-size20);
    }

    .news__meta,
    .blog__meta {
        gap: var(--gap-unit);
    }

    .news__main,
    .blog__main {
        gap: calc(var(--gap-unit)*1);
    }

    .news__article-title,
    .blog__article-title {
        font-size: 1.2rem;
    }

    .news__txt p,
    .blog__txt p {
        font-size: var(--font-size16);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 450px) {

    .news__inner,
    .blog__inner {
        gap: 6rem;
    }

    .news__head,
    .blog__head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6rem;
        padding: 0;
        border: none;
    }

    .news__title,
    .blog__title {
        font-size: 4rem;
        padding-bottom: calc(var(--gap-unit)*1);
        border-bottom: 1px solid var(--bg-orange-color);
        width: 100%;
    }

    .news__title-icon,
    .blog__title-icon {
        width: 3.5rem;
    }

    .news__category-list {
        width: 100%;
        flex-direction: column;
        gap: calc(var(--gap-unit)*1) calc(var(--gap-unit)*1.5);
    }

    .news__category-link,
    .blog__category-link {
        width: 100%;
        padding: calc(var(--gap-unit)*1.5) calc(var(--gap-unit)*2);
    }

    .news__item,
    .blog__item {
        flex-direction: column;
        gap: calc(var(--gap-unit)*1.5);
    }

    .news__img,
    .blog__img {
        width: 100%;
        border-radius: 0;
        aspect-ratio: 16/10;
    }

    .news__content,
    .blog__content {
        gap: calc(var(--gap-unit)*2);
    }

    .news__date,
    .blog__date {
        font-size: var(--font-size16);
    }

    .news__item-categories,
    .blog__item-categories {
        gap: calc(var(--gap-unit)*2);
    }

    .news__item-category,
    .blog__item-category {
        font-size: var(--font-size14);
    }

    .news__main,
    .blog__main {
        gap: calc(var(--gap-unit)*1);
    }

    .news__article-title,
    .blog__article-title {
        font-size: var(--font-size20);
    }

    .news__txt p,
    .blog__txt p {
        font-size: var(--font-size14);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}















/* ------------page conatct style------------  */
.page__contact {
    --contact-page-bg: #EAEAEA;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
    background-color: var(--contact-page-bg);
}

/* Contact page: scroll-in — hero photo, staggered heading, form panel wipe + fade */
.page__contact .contact__bg img {
    opacity: 0;
    transform: scale(1.05);
    transition:
        opacity 0.85s ease,
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__contact .contact__heading .contact__title-en,
.page__contact .contact__heading .contact__title-jp,
.page__contact .contact__heading .contact__lead {
    opacity: 0;
    transform: translate3d(0, 1.15rem, 0);
    transition:
        opacity 0.55s ease,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__contact .contact__content {
    overflow: hidden;
    transition: background-color 0.45s ease;
    transition-delay: 0s;
    background-color: var(--bg-white-color);
}

.page__contact--visible .contact__content {
    background-color: var(--bg-white-color);
    transition-delay: 0.48s;
}

.page__contact .contact__content>* {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
        opacity 0.52s ease,
        transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
}

.page__contact--visible .contact__bg img {
    opacity: 1;
    transform: scale(1);
}

.page__contact--visible .contact__heading .contact__title-en {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
}

.page__contact--visible .contact__heading .contact__title-jp {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
}

.page__contact--visible .contact__heading .contact__lead {
    opacity: 1;
    transform: none;
    transition-delay: 0.26s;
}

.page__contact--visible .contact__content::before {
    transform: scaleX(1);
}

.page__contact--visible .contact__content>* {
    opacity: 1;
    transform: none;
    transition-delay: 0.52s;
}

@media (prefers-reduced-motion: reduce) {

    .page__contact .contact__bg img,
    .page__contact .contact__heading .contact__title-en,
    .page__contact .contact__heading .contact__title-jp,
    .page__contact .contact__heading .contact__lead,
    .page__contact .contact__content>* {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .page__contact .contact__content::before {
        transform: scaleX(1);
        transition: none;
    }
}

.contact__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*9);
    padding: 12rem 30rem;
}

.contact__heading {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--fontJ);
    color: var(--bg-white-color);
    line-height: 1;
    z-index: 2;
}

.contact__title {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
    font-size: var(--font-size28);
    font-weight: 600;
}

.contact__title-jp {
    font-size: 5rem;
    line-height: 1.6;
}

.contact__lead {
    font-size: var(--font-size24);
    font-family: var(--fontJ);
    font-weight: 600;
    color: var(--bg-white-color);
    line-height: 1;
}

.contact__content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*8);
    padding: 10rem 9rem 8rem;
    background-color: var(--bg-white-color);
    z-index: 2;
}

.contact__form-inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*6);
}

.contact__field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*1.5);
}

.multi__field {
    gap: calc(var(--gap-unit)*3);
}

.contact__cap {
    display: flex;
    gap: calc(var(--gap-unit)*1.5);
    font-size: var(--font-size18);
    font-family: var(--fontB);
    font-weight: 600;
    line-height: 1.3;
}

.contact__required {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size16);
    color: var(--bg-white-color);
    line-height: 1;
    padding: calc(var(--gap-unit)*0.5) calc(var(--gap-unit)*1);
    background-color: var(--bg-orange-color);
}

.contact__control {
    display: flex;
    width: 100%;
    gap: calc(var(--gap-unit)*11);
}

.contact__control textarea {
    height: 23rem;
}

.radio__btn {
    font-size: var(--font-size18);
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--gap-unit);
    width: fit-content;
    line-height: 1;
}

.radio__btn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    background-color: var(--bg-white-color);
    border-radius: 3px;
    border: 1px solid var(--bg-font-color);
}

.radio__btn input:checked~.checkbox {
    background-color: transparent;
}

.checkbox:after {
    content: "";
    display: none;
}

.radio__btn input:checked~.checkbox:after {
    display: block;
}

.radio__btn .checkbox:after {
    width: 1.1rem;
    height: 1.1rem;
    background-color: var(--bg-font-color);
    border-radius: 2px;
}

.contact__control input[type='text'],
.contact__control input[type='email'],
.contact__control input[type='tel'],
.contact__control textarea {
    font-size: var(--font-size18);
    font-weight: 400;
    padding: calc(var(--gap-unit)*2);
    width: 100%;
    line-height: 1;
    color: var(--bg-black-color);
    border: 2px solid var(--bg-font-color);
    border-radius: calc(var(--border-radius));
    outline: none;
    transition: all 0.2s ease;
}

.contact__control input:focus,
.contact__control textarea:focus {
    border-width: 2px;
    border-color: var(--bg-yellow-color);
}

.contact__control input::placeholder {
    color: #AEAEAE;
    font-weight: 500;
}

.contact__submit {
    display: flex;
    justify-content: center;
}

.contact__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size24);
    font-family: var(--fontJ);
    font-weight: bold;
    padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*15);
    background-color: var(--bg-orange-color);
    border: 2px solid var(--bg-orange-color);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--bg-white-color);
    border-radius: calc(var(--border-radius));
}

.contact__btn:hover {
    background-color: var(--bg-white-color);
    color: var(--bg-orange-color);
    border: 2px solid var(--bg-orange-color);
}

.contact__warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--gap-unit)*1.5);
    font-size: var(--font-size24);
    line-height: 1;
}

.contact__warning-icon {
    display: flex;
    width: 2.5rem;
}

.contact__warning-icon svg {
    width: 100%;
}

.contact__warning-txt {
    font-size: var(--font-size18);
    line-height: 1;
}

.contact__bg {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.contact__bg picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.contact__bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(93.34deg, rgba(0, 0, 0, 0.64) 28.23%, rgba(69, 73, 71, 0.3) 99.12%);
    z-index: 1;
}

.contact__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .contact__inner {
        padding: 5rem var(--margin);
    }

    .contact__title-jp {
        font-size: 2.2rem;
    }

    .contact__title-en {
        font-size: var(--font-size24);
    }

    .contact__bg {
        height: 20rem;
    }

    .contact__content {
        padding: 4rem var(--margin) 3rem;
        gap: calc(var(--gap-unit)*6);
    }

    .contact__form-inner {
        gap: calc(var(--gap-unit)*4);
    }

    .contact__cap {
        font-size: var(--font-size18);
    }

    .contact__required {
        font-size: var(--font-size14);
    }

    .checkbox {
        width: 1rem;
        height: 1rem;
    }

    .radio__btn {
        font-size: var(--font-size16);
    }

    .checkbox:after {
        width: .6rem;
        height: .6rem;
    }

    .contact__control input[type='text'],
    .contact__control input[type='email'],
    .contact__control input[type='tel'],
    .contact__control textarea {
        padding: calc(var(--gap-unit)*2);
        font-size: var(--font-size18);
    }

    .contact__control textarea {
        height: 12rem;
    }

    .contact__btn {
        font-size: var(--font-size24);
    }

    .contact__warning-icon {
        width: 1.3rem;
    }

    .contact__warning-txt {
        font-size: var(--font-size16);
    }
}

@media (max-width: 450px) {
    .contact__inner {
        padding: 12rem var(--margin);
    }

    .contact__heading {
        gap: calc(var(--gap-unit)*.5);
    }

    .contact__title {
        font-size: var(--font-size22);
        gap: calc(var(--gap-unit)*.5);
    }

    .contact__title-jp {
        font-size: 3.5rem;
    }

    .contact__lead {
        font-size: 1.7rem;
    }

    .page__contact--confirm .contact__lead {
        font-size: 1.5rem;
    }

    .contact__bg {
        height: 30rem;
    }

    .contact__content {
        margin-top: 5rem;
        padding: 6rem var(--margin) 5rem;
        gap: calc(var(--gap-unit)*6);
    }

    .contact__form-inner {
        gap: calc(var(--gap-unit)*4);
    }

    .contact__field {
        gap: calc(var(--gap-unit));
    }

    .contact__control {
        justify-content: space-between;
        gap: calc(var(--gap-unit)*2);
    }

    .contact__cap {
        font-size: 1.7rem;
    }

    .contact__required {
        padding: calc(var(--gap-unit)*0.5) calc(var(--gap-unit)*1);
    }

    .checkbox {
        width: 1.8rem;
        height: 1.8rem;
    }

    .radio__btn {
        gap: calc(var(--gap-unit)*.8);
    }

    .checkbox:after {
        width: .9rem;
        height: .9rem;
    }

    .contact__control input[type='text'],
    .contact__control input[type='email'],
    .contact__control input[type='tel'],
    .contact__control textarea {
        padding: calc(var(--gap-unit)*1.7) calc(var(--gap-unit)*2);
        font-size: 1.7rem;
    }

    .contact__control textarea {
        height: 20rem;
    }

    .contact__btn {
        font-size: var(--font-size18);
        width: 100%;
    }

    .contact__warning-icon {
        display: none;
    }

    .contact__warning-txt {
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: center;
    }
}

/* ----- page confirm and thanks style ----- */
.page__contact--confirm .contact__title-en,
.page__contact--thanks .contact__title-en {
    letter-spacing: 0.12em;
}

.contact-confirm__form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit) * 8);
    width: 100%;
}

.contact-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border: 2px solid #e8e4dc;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: #faf8f5;
}

.contact-summary__item {
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) 1fr;
    gap: calc(var(--gap-unit) * 3);
    padding: calc(var(--gap-unit) * 3) calc(var(--gap-unit) * 4);
    border-bottom: 1px solid #e8e4dc;
    align-items: start;
}

.contact-summary__item:last-child {
    border-bottom: none;
}

.contact-summary__item--block {
    grid-template-columns: 1fr;
    gap: calc(var(--gap-unit) * 2);
}

.contact-summary__item--block .contact-summary__value {
    max-width: 100%;
}

.contact-summary__label {
    font-size: var(--font-size18);
    font-weight: 600;
    color: var(--bg-font-color);
    line-height: 1.5;
}

.contact-summary__value {
    font-size: var(--font-size18);
    font-weight: 500;
    color: var(--bg-black-color);
    line-height: 1.65;
    word-break: break-word;
}

.contact-summary__empty {
    font-size: var(--font-size18);
    line-height: 1.75;
    color: var(--bg-font-color);
    text-align: center;
    margin: 0 0 calc(var(--gap-unit) * 4);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: calc(var(--gap-unit) * 3);
    width: 100%;
}

.contact-actions__back,
.contact-actions__submit {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-width: min(100%, 22rem);
}

.contact-actions__back .contact__btn,
.contact-actions__submit .contact__btn {
    width: 100%;
    max-width: 32rem;
    text-decoration: none;
    box-sizing: border-box;
    padding: calc(var(--gap-unit)*2) calc(var(--gap-unit)*2);
}

.contact__btn--ghost {
    background-color: var(--bg-white-color);
    color: var(--bg-orange-color);
    border: 2px solid var(--bg-orange-color);
}

.contact__btn--ghost:hover {
    background-color: var(--bg-orange-color);
    color: var(--bg-white-color);
    border-color: var(--bg-orange-color);
}

.page__contact--thanks .contact__content {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.contact-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--gap-unit) * 5);
    max-width: 72rem;
    margin: 0 auto;
    width: 100%;
}

.contact-thanks__icon {
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-thanks__icon svg {
    width: 100%;
    height: 100%;
}

.page__contact--thanks .contact-thanks > h3 {
    margin: 0;
    max-width: 52rem;
    font-family: var(--fontJ);
    font-size: var(--font-size28);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--bg-font-color);
}

.page__contact--thanks .contact-thanks > h3::after {
    content: "";
    display: block;
    width: 5rem;
    height: 0.35rem;
    margin: calc(var(--gap-unit) * 2.25) auto 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--bg-orange-color), #ffd0ae);
}

.contact-thanks__message {
    max-width: 52rem;
    font-size: var(--font-size20);
    font-weight: 500;
    line-height: 1.85;
    color: var(--bg-font-color);
    margin: 0;
}

.contact-thanks__note {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 56rem;
    text-align: left;
    font-size: var(--font-size16);
    line-height: 1.7;
    color: var(--bg-font-color);
}

.contact-thanks__note li {
    position: relative;
    padding-left: calc(var(--gap-unit) * 3);
    margin-bottom: calc(var(--gap-unit) * 1.5);
}

.contact-thanks__note li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--bg-orange-color);
}

.contact-thanks__note li:last-child {
    margin-bottom: 0;
}

.contact-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--gap-unit) * 3);
    width: 100%;
    margin-top: calc(var(--gap-unit) * 2);
}

.page__contact--thanks .thanks__btn.contact__btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-width: min(100%, 28rem);
    max-width: 38rem;
    padding: calc(var(--gap-unit) * 2.2) calc(var(--gap-unit) * 10);
    text-decoration: none;
    text-align: center;
    border-radius: 9999px;
    box-shadow: 0 0.4rem 1.8rem rgba(255, 130, 40, 0.22);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.page__contact--thanks .thanks__btn.contact__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2.6rem rgba(255, 130, 40, 0.38);
}

.page__contact--thanks .thanks__btn.contact__btn:active {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1.4rem rgba(255, 130, 40, 0.28);
}

@media (max-width: 768px) {
    .contact-summary__item {
        grid-template-columns: 1fr;
        gap: calc(var(--gap-unit) * 1.5);
        padding: calc(var(--gap-unit) * 2.5) calc(var(--gap-unit) * 3);
    }

    .contact-summary__label {
        font-size: var(--font-size16);
        padding-bottom: calc(var(--gap-unit) * 0.5);
        border-bottom: 1px dashed #d5cfc4;
    }

    .contact-summary__value {
        font-size: var(--font-size16);
    }

    .contact-actions {
        flex-direction: column;
    }

    .contact-actions__back,
    .contact-actions__submit {
        min-width: 100%;
    }

    .contact-thanks__icon {
        width: 6.4rem;
        height: 6.4rem;
    }

    .contact-thanks__message {
        font-size: var(--font-size18);
    }

    .page__contact--thanks .contact-thanks > h3 {
        font-size: var(--font-size24);
        letter-spacing: 0.04em;
    }

    .contact-thanks__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-thanks__actions .contact__btn {
        max-width: none;
    }

    .page__contact--thanks .thanks__btn.contact__btn {
        min-width: 100%;
        max-width: none;
        padding-left: calc(var(--gap-unit) * 5);
        padding-right: calc(var(--gap-unit) * 5);
    }
}

@media (max-width: 450px) {
    .page__contact--thanks .contact__content {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .contact-summary__item {
        padding: 0;
        gap: 0;
    }

    .contact-summary__label,
    .contact-summary__value {
        font-size: 1.5rem;
        padding: calc(var(--gap-unit) * 2) calc(var(--gap-unit) * 2);
    }

    .contact-summary__label {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .contact-actions {
        gap: calc(var(--gap-unit) * 2);
    }

    .contact-summary__value {
        padding-top: calc(var(--gap-unit)*1);
    }

    .contact-thanks {
        gap: calc(var(--gap-unit) * 4);
    }

    .page__contact--thanks .contact-thanks > h3 {
        font-size: var(--font-size20);
        letter-spacing: -0.02em;
    }

    .page__contact--thanks .contact-thanks > h3::after {
        width: 4rem;
        margin-top: calc(var(--gap-unit) * 1.75);
    }

    .contact-thanks__message {
        font-size: 1.6rem;
        line-height: 1.75;
    }

    .contact-thanks__note {
        font-size: var(--font-size14);
    }
}






/* ----------page single style-------- */
.pgsingle {
    background-color: #efebe4;
    padding: 40px 0;
}
.pgsingle .content {
    max-width: 900px;
    margin: 0 auto;
}
.pgsingle .breadcrumb {
    width: 100%;
}
.pgsingle .breadcrumb ul {
    display: flex;
    align-items: center;
}
.pgsingle .breadcrumb ul li:last-child {
    opacity: .75;
}
.pgsingle .breadcrumb a {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--bg-font-color);
}
.pgsingle .breadcrumb a span {
    font-size: 13px;
    line-height: 1;
}
.pgsingle .breadcrumb svg {
    width: 18px;
    height: 18px;
}
.pgsingle .breadcrumb ul > span {
    display: flex;
    line-height: 1;
    height: 6px;
    opacity: 0.75;
    transform: rotate(45deg);
    width: 6px;
    border-right: 1px solid;
    border-top: 1px solid;
    margin: 0 9px 0 7px;
    margin-top: 2px;
}
.pgsingle .article {
    background-color: #FFF;
    padding: 30px;
    margin: 40px 0;
    border-radius: 10px;
}
.article .article_header {
    display: flex;
    align-items: center;
}
.article .article_header time {
    display: flex;
    flex-direction: column;
    padding-right: 30px;
    border-right: 2px solid #030303;
    text-align: center;
}
.article_header time > span {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}
.article_header time div {
    white-space: nowrap;
}
.article_header time div span {
    font-size: 24px;
    font-weight: 600;
}
.article .article_header h1 {
    font-weight: 600;
    font-size: 26px;
    margin-left: 30px;
}
.article .article_meta {
    display: flex;
    align-items: center;
}
.article .article_meta a {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    color: var(--bg-font-color);
}
.article .article_meta span {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.article .article_image {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.article .article_image img {
    width: 100%;
}
.article main strong {
    font-weight: 700;
}
.article main h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 6px solid #FF8228;
    display: inline-block;
}
.article main h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 6px solid #FF8228;
    display: inline-block;
}
.article main h3 {
    font-size: 21px;
    padding-left: 20px;
    font-weight: 700;
    line-height: 1.3;
    display: inline-block;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 5px solid #FF8228;
}
.article main h4 {
    font-size: 20px;
    font-weight: 700;
    padding-left: 20px;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 4px solid #FF8228;
}
.article main h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding-left: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 3px solid #FF8228;
}
.article main h6 {
    font-size: 14px;
    font-weight: 700;
    padding-left: 20px;
    line-height: 1.5;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 3px solid #FF8228;
}
.article main hr {
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--bg-font-color);
    margin: 20px 0;
    margin-top: 40px;
}
.article main p {
    font-size: 15px;
    line-height: 1.6;
    margin: 20px 0;
}
.article main ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 20px 0;
}
.article main ul li {
    font-size: 16px;
    line-height: 1.6;
    list-style-type: disc;
}
.article main img {
    width: 100%;
    margin: 0 auto;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
}
.article main blockquote {
    background-color: #f5f8fa;
    margin: 0;
    padding: 25px 30px;
}
.article main blockquote p {
    margin: 0;
    font-size: 16px;
}
.article main a {
    font-size: 15px;
    color: var(--bg-blue-color);
    text-decoration: underline;
}
@media (max-width: 991px) {
    .article main h2.title strong:first-child {
        font-size: 26px;
    }
    .pgsingle .content {
        margin: 0 4vw;
    }
    .pgsingle .article {
        padding: 40px 30px;
    }
}
@media (max-width: 767px) {
    .pgsingle .breadcrumb {
        display: none;
    }
    .article .article_header {
        flex-direction: column;
        align-items: flex-start;
    }
    .article .article_header time {
        flex-direction: row;
        border: none;
        border-bottom: 2px solid #030303;
        width: 100%;
        padding-bottom: 10px;
    }
    .article .article_header h1 {
        margin: 0;
        padding-top: 10px;
    }
    .article_header time > span {
        font-size: 18px;
        font-weight: 600;
    }
    .article_header time div span {
        font-size: 18px;
        line-height: 1.6;
    }
    .article_header span:after {
        content: ".";
        font-size: 18px;
        line-height: 1.6;
        font-weight: 600;
    }
    .article_header time div :nth-child(2) {
        display: none;
    }
    .article main h1 {
        font-size: 30px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main h2 {
        font-size: 26px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main h3 {
        font-size: 20px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main h4 {
        font-size: 19px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main h5 {
        font-size: 17px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main blockquote {
        padding: 20px 30px;
    }
}
@media (max-width: 676px) {
    .pgsingle .article {
        padding: 40px 20px;
    }
    .article .article_header h1 {
        font-size: 24px;
        line-height: 1.3;
    }
}
@media (max-width: 450px) {
    .pgsingle {
        padding-top: 20px;
    }
    .pgsingle .article {
        padding: 30px 20px; 
    }
    .article_header time div span, .article_header time > span {
        font-size: 15px;
    }
    .article .article_meta {
        margin-top: 20px;
    }
    .article .article_meta span {
        font-size: 16px;
    }
    .pgsingle .content {
        margin: 0 15px;
    }
    .article main figure.post-image {
        width: 100%;
    }
    .article .article_header h1 {
        font-size: 21px;
    }
    .article main h1 {
        font-size: 24px;
    }
    .article main h2 {
        font-size: 22px;
    }
    .article main h3 {
        font-size: 20px;
    }
    .article main h4 {
        font-size: 18px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main h5 {
        font-size: 16px;
        padding-left: 15px;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .article main p {
        font-size: 14px;
    }
    .article main ul li {
        font-size: 15px;
        line-height: 2;
    }
    .article main hr {
        margin: 15px 0;
        margin-bottom: 30px;
    }
    .article main blockquote {
        padding: 20px 15px;
    }
    .article main blockquote p {
        font-size: 15px;
    }
}
.project_detail {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}
.project_detail .col {
    display: flex;
    flex-direction: column;
}
.project_detail .col h5 {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 700;
    background-color: #EFEFEF;
    padding: 15px 20px;
}
.project_detail .col p {
    font-size: 15px;
    line-height: 1.6;
    padding: 13px 20px;
    background-color: #F7F7F7;
}
@media (max-width: 450px) {
    .project_detail .col h5 {
        font-size: 16px;
        padding: 10px 15px;
    }
    .project_detail .col p {
        font-size: 14px;
        padding: 10px 15px;
    }
}






/* --------------footer style-------------- */
.footer {
    position: relative;
    background-color: var(--bg-white-color);
}

.footer__inner {
    position: relative;
    padding: 7rem var(--margin) 5rem;
}

.footer__main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-unit)*3);
    z-index: 2;
}

.footer__logo {
    display: flex;
    width: 23rem;
}

.footer__logo img {
    width: 100%;
}

.footer__info {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size22);
    font-weight: 500;
}

.footer__address {
    display: flex;
    align-items: center;
    gap: calc(var(--gap-unit)*2);
}

.footer__address-map {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size20);
    font-weight: bold;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*.3) calc(var(--gap-unit)*2.5);
    background-color: var(--bg-font-color);
    border-radius: 9999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.22s ease, box-shadow 0.25s ease, color 0.2s ease;
}

.footer__address-map:hover {
    background-color: var(--bg-orange-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 130, 40, 0.35);
}

.footer__address-map:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(255, 130, 40, 0.25);
}

.footer__address-map:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 3px;
}

.footer__nav {
    margin-top: calc(var(--gap-unit)*2);
    display: flex;
    gap: calc(var(--gap-unit)*3);
}

.footer__bg {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 80%;
    height: 100%;
}

.footer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 63.53%);
    z-index: 1;
}

.footer__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}

.footer__btn {
    position: relative;
    display: flex;
    width: 22rem;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, background-color 0.25s ease;
}

.footer__btn:hover {
    transform: translateY(-3px);
}

.footer__btn:focus-visible {
    outline: 2px solid var(--bg-orange-color);
    outline-offset: 3px;
}

.footer__btn--free {
    background-color: var(--bg-orange-color);
}

.footer__btn--free:hover {
    background-color: #e86f1f;
    box-shadow: 0 10px 28px rgba(255, 130, 40, 0.38);
}

.footer__btn--access {
    background-color: var(--bg-font-color);
}

.footer__btn--access:hover {
    background-color: var(--bg-orange-color);
    box-shadow: 0 10px 26px rgba(255, 130, 40, 0.35);
}

.footer__btn-txt {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: var(--font-size20);
    font-weight: 500;
    color: var(--bg-white-color);
    padding: calc(var(--gap-unit)*1) calc(var(--gap-unit)*2);
    padding-left: calc(var(--gap-unit)*3);
    border-right: 1px solid var(--bg-white-color);
}

.footer__btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--gap-unit)*2);
    width: fit-content;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer__btn:hover .footer__btn-arrow {
    transform: translateX(5px);
}

.footer__btn-arrow svg {
    width: 1rem;
    transition: filter 0.25s ease;
}

.footer__btn:hover .footer__btn-arrow svg {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75));
}

.footer__btn--free .footer__btn-txt {
    font-size: var(--font-size14);
    vertical-align: bottom;
}

.footer__btn-txt span {
    position: relative;
    font-size: var(--font-size20);
}

.footer__btn-txt span::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 3px;
    height: 3px;
    background-color: var(--bg-white-color);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .footer__inner {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .footer__main {
        padding: 2rem var(--margin);
        align-items: center;
    }

    .footer__logo {
        width: 12rem;
    }

    .footer__info {
        font-size: var(--font-size20);
    }

    .footer__btn {
        width: 12rem;
    }

    .footer__btn-arrow svg {
        width: .6rem;
    }

    .footer__bg {
        position: static;
        width: 100%;
    }

    .footer__overlay {
        display: none;
    }
}

@media (max-width: 450px) {
    .footer__inner {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .footer__main {
        padding: 2rem var(--margin);
        align-items: center;
    }

    .footer__logo {
        width: 20rem;
    }

    .footer__info {
        font-size: 1.7rem;
    }

    .footer__address-map {
        font-size: var(--font-size18);
    }

    .footer__btn {
        width: 25rem;
    }

    .footer__nav {
        flex-direction: column;
        gap: calc(var(--gap-unit)*1);
    }

    .footer__btn-arrow svg {
        width: 1.2rem;
    }

    .footer__bg {
        position: static;
        width: 100%;
    }

    .footer__overlay {
        display: none;
    }
}