@import url('https://fonts.googleapis.com/css2?family=Alata&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Manrope:wght@200..800&display=swap');

:root{
    --vw: 750;
    --base: 100vw;
    --bk: #000000;
    --gr: #009A53;
    --lg: #44B475;
    --bl: #2E79DF;
    --bg: #F6FAFB;
    --border: #cccccc;

    /* Swiper */
    --swiper-scrollbar-border-radius: 0px;
    --swiper-scrollbar-top: auto;
    --swiper-scrollbar-bottom: 0px;
    --swiper-scrollbar-left: auto;
    --swiper-scrollbar-right: 0px;
    --swiper-scrollbar-sides-offset: 0px;
    --swiper-scrollbar-bg-color: #AEAEAE;
    --swiper-scrollbar-drag-bg-color: #009A53;
    --swiper-scrollbar-size: 3px;

    interpolate-size: allow-keywords;
}

@media (min-width: 769px) {
    :root {
        --vw: 1440;
        --base: 100vw;
    }
}

@media (min-width: 1441px) {
    :root {
        --vw: 1;
        --base: 1px;
    }
}

/* Font Style */
.ibm-plex-sans-jp-regular {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.ibm-plex-sans-jp-medium {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.ibm-plex-sans-jp-semibold {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.ibm-plex-sans-jp-bold {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.manrope-regular {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.manrope-medium {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.manrope-semibold {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.manrope-bold {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.alata-regular {
    font-family: "Alata", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Common Style */
html{
    margin: 0;
    scroll-behavior: smooth;
    scroll-padding-top: calc(110 / var(--vw) * var(--base));
    font-size: calc(23 / var(--vw) * var(--base));
}

@media (min-width: 769px) {
    html {
        width: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: 168px;
        font-size: calc(16 / var(--vw) * var(--base));
    }
}

@media (max-width: 768px) {
    html {
        width: 100%;
    }
}

body {
    margin: 0;
    color: var(--bk);
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.1em;
}

main{
    position: relative;
    overflow: hidden;
    width: 100%;
}

@media (max-width: 768px) {
    body {
        width: 100%;
        font-size: 1.0rem;
        line-height: calc(40/23);
    }

    main {
        padding-block-start: calc(110 / var(--vw) * var(--base));
    }
}

@media (min-width: 769px) {
    body {
        width: auto;
        font-size: 1.0rem;
        line-height: calc(41/16);
    }

    main {
        padding-block-start: calc(146 / var(--vw) * var(--base));
    }
}

main:before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    background: linear-gradient(36.69deg, rgba(172, 200, 237, 0) 39.28%, rgba(68, 180, 117, 0.2) 87.19%);
    width: 1920px;
    height: 1610px;
}

@media (min-width: 769px) {
    main:before {
        left: inherit;
        right: 0;
    }
}

:first-child {
    margin-block-start: 0;
}

:last-child {
    margin-block-end: 0;
}

:where(h1){
    font-size: calc(32 / var(--vw) * var(--base));
    line-height: 1.5;
}

:where(h2){
    font-size: calc(28 / var(--vw) * var(--base));
    line-height: 1.5;
}

:where(h3){
    font-size: calc(25 / var(--vw) * var(--base));
    line-height: 1.5;
}

:where(h4){
    font-size: calc(23 / var(--vw) * var(--base));
    line-height: 1.5;
}

@media (min-width: 769px) {
    :where(h1){
        font-size: calc(25 / var(--vw) * var(--base));
    }

    :where(h2){
        font-size: calc(20 / var(--vw) * var(--base));
    }

    :where(h3){
        font-size: calc(18 / var(--vw) * var(--base));
    }

    :where(h4){
        font-size: calc(16 / var(--vw) * var(--base));
    }
}

:where(p, ul, ol){
    margin-block-start: 1.0em;
    margin-block-end: 1.0em;
}

:where(ul, ol) {
    list-style: none;
    padding-inline-start: 0;
}

@media (min-width: 769px) {
    :where(p, ul, ol) {
        margin-block-start: 1.0em;
        margin-block-end: 1.0em;
    }
}

picture {
    display: block;
}

:where(figure){
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

:where(img) {
    max-width: 100%;
    vertical-align: bottom;
}

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.4em;
}

@media (min-width: 769px) {
    a {
        transition: 0.6s ease;
    }

    a:hover {
        text-decoration: underline;
        opacity: 0.75;
    }
}

.noscroll {
    overflow: hidden;
}

.nowrap{
    white-space: nowrap;
}

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

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

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

.text-green{
    color: var(--gr);
}

.text-white {
    color: #ffffff;
}

.weight-bold{
    font-weight: bold;
}

.weight-semibold {
    font-weight: 600;
}

.weight-medium {
    font-weight: 500;
}

.weight-regular {
    font-weight: 400;
}

.weight-thin {
    font-weight: 300;
}

@media (max-width: 768px) {
    .size-extralarge{
        font-size: calc(41 / var(--vw) * var(--base));
    }

    .size-xlarge{
        font-size: calc(32 / var(--vw) * var(--base));
    }

    .size-large{
        font-size: calc(28 / var(--vw) * var(--base));
    }

    .size-medium{
        font-size: calc(25 / var(--vw) * var(--base));
    }

    .size-regular{
        font-size: calc(23 / var(--vw) * var(--base));
    }

    .size-small{
        font-size: calc(18 / var(--vw) * var(--base));
    }
}

@media (min-width: 769px) {
    .size-extralarge{
        font-size: calc(28 / var(--vw) * var(--base));
    }

    .size-xlarge{
        font-size: calc(25 / var(--vw) * var(--base));
    }

    .size-large{
        font-size: calc(20 / var(--vw) * var(--base));
    }

    .size-medium{
        font-size: calc(18 / var(--vw) * var(--base));
    }

    .size-regular{
        font-size: calc(16 / var(--vw) * var(--base));
    }

    .size-small{
        font-size: calc(14 / var(--vw) * var(--base));
    }
}

.line-height-low{
    line-height: calc(37/23);
}

@media (min-width: 769px) {
    .line-height-low{
        line-height: calc(31/18);
    }
}

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

@media (min-width: 769px) {
    .sp {
        display: none !important;
    }
}

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

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

.grid-1column{
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(30 / var(--vw) * var(--base));
}

@media (max-width: 768px) {
    .grid-2column-sp{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: calc(30 / var(--vw) * var(--base));
    }

    .grid-2column-btn {
        display: grid;
        grid-template-columns: 1fr;
        gap: calc(55 / var(--vw) * var(--base));
    }
}

@media (min-width: 769px) {
    .grid-2column-pc {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(32 / var(--vw) * var(--base));
        row-gap: calc(30 / var(--vw) * var(--base));
    }
    
    .grid-3column-pc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: calc(32 / var(--vw) * var(--base));
        row-gap: calc(30 / var(--vw) * var(--base));
    }

    .grid-4column-pc {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: calc(32 / var(--vw) * var(--base));
        row-gap: calc(30 / var(--vw) * var(--base));
    }

    .grid-2column-btn {
        display: grid;
        grid-template-columns: 1fr calc(380/1420*100%);
        gap: calc(176 / var(--vw) * var(--base));
    }
}

@media (min-width: 1600px) {
    .grid-2column-pc {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(76 / var(--vw) * var(--base));
        row-gap: calc(60 / var(--vw) * var(--base));
    }

    .grid-3column-pc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: calc(76 / var(--vw) * var(--base));
        row-gap: calc(60 / var(--vw) * var(--base));
    }

    .grid-4column-pc {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: calc(65 / var(--vw) * var(--base));
        row-gap: calc(60 / var(--vw) * var(--base));
    }
}

/* Loader Style */

#js-loader {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100000;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {
    margin: auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(0, 0, 0, 0.2);
    border-right: 1.1em solid rgba(0, 0, 0, 0.2);
    border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

/* Header Style */

#header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: calc(10 / var(--vw) * var(--base));
    left: calc(14 / var(--vw) * var(--base));
    z-index: 9999;
    box-sizing: border-box;
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.1);
    background-color: #fff;
    width: calc(100% - (24 / var(--vw) * var(--base)));
    height: calc(88 / var(--vw) * var(--base));
    padding-left: calc(25 / var(--vw) * var(--base));
    padding-right: calc(25 / var(--vw) * var(--base));
}

.customize-support #header {
    top: calc(46px + (10 / var(--vw) * var(--base)));
}

.header-logo{
    width: calc(152 / var(--vw) * var(--base));
    line-height: 1;
}

.header-logo > a{
    display: inline-block;
}

@media (max-width: 768px) {
    #menu {
        width: calc(42 / var(--vw) * var(--base));
        height: calc(42 / var(--vw) * var(--base));
        background-image: url("../img/menu.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
    }

    #menu.active{
        background-image: url("../img/menu-close.svg");
    }

    .header-nav {
        position: fixed;
        top: calc(98 / var(--vw) * var(--base));
        right: calc(12 / var(--vw) * var(--base));
        overflow: auto;
        background: var(--gr);
        box-sizing: border-box;
        transition: 0.4s ease;
        width: 75%;
        width: calc(100% - (23 / var(--vw) * var(--base)));
        height: 0;
    }

    .header-nav.active {
        height: calc(100dvh - (98 / var(--vw) * var(--base)));
    }

    .customize-support .header-nav {
        top: calc(46px + (98 / var(--vw) * var(--base)));
    }

    .header-nav-inner {
        padding-block-start: calc(54 / var(--vw) * var(--base));
        padding-block-end: calc(108 / var(--vw) * var(--base));
        padding-inline-start: calc(34 / var(--vw) * var(--base));
        padding-inline-end: calc(34 / var(--vw) * var(--base));
    }

    .header-nav-list{
        margin-block-end: calc(85 / var(--vw) * var(--base));
    }

    .header-nav-list-column{
        border-top: 1px solid #fff;
        padding-block-start: calc(45 / var(--vw) * var(--base));
        padding-block-end: calc(45 / var(--vw) * var(--base));
    }

    .header-nav-list-column:last-child {
        border-bottom: 1px solid #fff;
    }

    .header-nav-list-column > a {
        display: block;
        position: relative;
        color: #fff;
        font-size: calc(34 / var(--vw) * var(--base));
        font-weight: 700;
        letter-spacing: 0.26em;
        line-height: 1;
    }

    .header-nav-list-column > a small {
        display: block;
        margin-block-end: 0.5em;
        font-size: calc(22 / var(--vw) * var(--base));
        font-weight: 700;
        letter-spacing: 0.14em;
    }

    .header-nav-list-column > a:has(+ .header-nav-toggle):after{
        content: "";
        display: inline-block;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: 0;
        background: url("../img/icon-open.svg") no-repeat center/contain;
        width: calc(53 / var(--vw) * var(--base));
        height: calc(53 / var(--vw) * var(--base));
        margin-right: calc(15 / var(--vw) * var(--base));
    }

    .header-nav-list-column > a.active:after {
        background: url("../img/icon-close.svg") no-repeat center/contain;
    }
}

@media (min-width: 769px) {
    #header {
        top: calc(32 / var(--vw) * var(--base));
        left: calc(40 / var(--vw) * var(--base));
        width: calc(100% - (80 / var(--vw) * var(--base)));
        height: calc(104 / var(--vw) * var(--base));
        padding-left: calc(16 / var(--vw) * var(--base));
        padding-right: calc(16 / var(--vw) * var(--base));
    }

    .customize-support #header {
        top: calc(64 / var(--vw) * var(--base));
    }

    .header-logo {
        width: calc(243 / var(--vw) * var(--base));
    }

    #menu {
        display: none;
    }

    .header-nav{
        align-self: stretch;
        width: 75%;
        max-width: 1240px;
    }

    .header-nav-inner{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
    }

    .header-nav-inner > .header-nav-list{
        display: flex;
        justify-content: flex-end;
        width: auto;
        height: 100%;
        margin-block-end: 0;
    }

    .header-nav-list-column > a{
        display: flex;
        align-items: center;
        position: relative;
        height: 100%;
        padding: 0 1.14em;
        font-size: calc(14 / var(--vw) * var(--base));
        font-weight: 300;
        text-decoration: none;
        white-space: nowrap;
    }

    .header-nav-list-column > a small{
        display: none;
    }

    .header-nav-list-column > a.current,
    .header-nav-list-column:hover > a{
        opacity: 1;
        color: var(--gr);
    }

    .header-nav-list-column > a:after {
        content: "";
        display: inline-block;
        width: 0%;
        height: 2px;
        background-color: var(--lg);
        position: absolute;
        bottom: calc(32 / var(--vw) * var(--base));
        right: 0;
        transition: 0.3s ease;
    }

    .header-nav-list-column > a.current:after,
    .header-nav-list-column:hover > a:after{
        width: calc(100% - 2.28em);
        left: 1.14em;
        right: inherit;
    }

    .header-nav-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(449/1240*100%);
        min-width: calc(343 / var(--vw) * var(--base));
        max-width: 449px;
        height: 100%;
        margin-block-start: 0;
        margin-inline-start: min(48px, (32/1240*100%));
    }

    .header-nav-btn-column:nth-of-type(1){
        width: calc(235 / 449 * 100%);
        min-width: calc(180 / var(--vw) * var(--base));
    }

    .header-nav-btn-column:nth-of-type(2) {
        width: calc(194 / 449 * 100%);
        min-width: calc(148 / var(--vw) * var(--base));
    }

    .header-nav-btn-column a:hover{
        text-decoration: none;
    }

    .btn-download,
    .btn-contact{
        display: inline-block;
        align-content: center;
        box-sizing: border-box;
        width: 100%;
        height: calc(64 / var(--vw) * var(--base));
        padding-block-start: calc(2 / var(--vw) * var(--base));
        color: #fff;
        font-size: calc(14 / var(--vw) * var(--base));
        font-weight: 500;
        letter-spacing: 0.14em;
        text-align: center;
    }

    .btn-download{
        background: var(--lg);
    }

    .btn-contact {
        background: var(--bl);
    }
}

/* Toggle Nav Style */

@media (max-width: 768px) {
    .header-nav-toggle {
        height: 0;
        overflow: hidden;
        transition: 0.4s ease;
    }

    .header-nav-toggle-head {
        display: none;
    }

    .header-nav-toggle-list{
        margin-block-start: 0;
        padding-block-start: calc(30 / var(--vw) * var(--base));
    }

    .header-nav-toggle-list-column {
        font-size: calc(30 / var(--vw) * var(--base));
        font-weight: 400;
        letter-spacing: 0.33em;
        line-height: calc(87/30);
    }

    .header-nav-toggle-list-column a {
        color: #fff;
    }

    .header-nav-btn{
        display: grid;
        row-gap: calc(60 / var(--vw) * var(--base));
        width: 100%;
        justify-content: center;
    }

    .header-nav-btn-column > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(538 / var(--vw) * var(--base));
        height: calc(162 / var(--vw) * var(--base));
        border: 1px solid #fff;
        color: #fff;
        font-size: calc(25 / var(--vw) * var(--base));
        font-weight: 500;
        letter-spacing: 0.23em;
        line-height: 1;
        text-align: center;
    }
}

@media (min-width: 769px) {
    .header-nav-toggle {
        position: fixed;
        top: calc(136 / var(--vw) * var(--base));
        right: calc(40 / var(--vw) * var(--base));
        overflow: hidden;
        background: rgba(0, 154, 83, 0.97);
        transition: 0.4s ease;
        width: 75%;
        max-width: calc(1152 / var(--vw) * var(--base));
        height: 0px;
    }

    .customize-support .header-nav-toggle {
        top: calc(168 / var(--vw) * var(--base));
    }

    .header-nav-list-column:hover .header-nav-toggle {
        height: calc(420 / var(--vw) * var(--base));
    }

    .header-nav-toggle-inner{
        padding-block-start: calc(55 / var(--vw) * var(--base));
        padding-block-end: calc(55 / var(--vw) * var(--base));
        padding-inline-start: calc(60 / var(--vw) * var(--base));
        padding-inline-end: calc(60 / var(--vw) * var(--base));
    }

    .header-nav-toggle-head{
        border-bottom: 1px solid #fff;
        padding-block-end: 1.0em;
        color: #fff;
        font-size: calc(31 / var(--vw) * var(--base));
        font-weight: 600;
        letter-spacing: 0.3em;
        line-height: 1;
    }

    .header-nav-toggle-head small{
        display: block;
        margin-block-end: 0.5em;
        font-size: calc(20 / var(--vw) * var(--base));
        font-weight: 700;
        letter-spacing: 0.14em;
    }

    .header-nav-toggle-head a{
        display: block;
        position: relative;
        width: calc(306/ var(--vw) * var(--base));
    }

    .header-nav-toggle-head a:hover{
        opacity: 1;
        text-decoration: none;
    }

    .header-nav-toggle-head a:after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        background: url("../img/arrow-wh.svg") no-repeat center/contain;
        border-radius: 50%;
        border: 1px solid #fff;
        transition: 0.6s ease;
        width: calc(49 / var(--vw) * var(--base));
        height: calc(49 / var(--vw) * var(--base));
    }

    .header-nav-toggle-list{
        display: grid;
        grid-template-columns: repeat(3, calc(296 / 1032 * 100%));
        row-gap: calc(60 / var(--vw) * var(--base));
        justify-content: space-between;
        width: 100%;
        margin-block-start: calc(56 / var(--vw) * var(--base));
    }

    .header-nav-toggle-list-column{
        border-bottom: 1px solid #fff;
        padding-block-end: 1.0em;
    }

    .header-nav-toggle-list-column a{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        vertical-align: bottom;
        width: 100%;
        height: calc(27 / var(--vw) * var(--base));
        color: #fff;
        font-size: calc(16 / var(--vw) * var(--base));
        letter-spacing: 0.3em;
    }

    .header-nav-toggle-list-column a:hover{
        opacity: 1;
        text-decoration: none;
    }

    .header-nav-toggle-list-column a:after{
        content: "";
        display: inline-block;
        background: url("../img/arrow-wh.svg") no-repeat center/contain;
        border-radius: 50%;
        border: 1px solid #fff;
        transition: 0.6s ease;
        width: calc(27 / var(--vw) * var(--base));
        height: calc(27 / var(--vw) * var(--base));
    }

    .header-nav-toggle-head a:hover:after,
    .header-nav-toggle-list-column a:hover:after {
        animation-duration: 0.4s;
        animation-name: arrow;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.19, 1, .22);
    }
}

/* Footer Style */

#footer{  
    background: var(--gr);
}

.footer-inner{
    width: calc(100% - (68 / var(--vw) * var(--base)));
    margin: auto;
    padding-block-start: calc(93 / var(--vw) * var(--base));
    padding-block-end: calc(60 / var(--vw) * var(--base));
}

.footer-logo {
    width: calc(548 / var(--vw) * var(--base));
    margin: auto;
}

.copyright{
    margin-block-start: calc(60 / var(--vw) * var(--base));
    color: #fff;
    text-align: center;
}

@media (min-width: 769px) {
    .footer-inner {
        width: calc(100% - (200 / var(--vw) * var(--base)));
        max-width: 1420px;
        margin: auto;
        padding-block-start: calc(112 / var(--vw) * var(--base));
        padding-block-end: calc(60 / var(--vw) * var(--base));
    }

    .footer-logo {
        grid-row: span 2;
        width: calc(344 / var(--vw) * var(--base));
        margin: 0; 
    }
}

.footer-sns{
    margin-block-start: calc(97 / var(--vw) * var(--base));
    margin-block-end: calc(93 / var(--vw) * var(--base));
}

.footer-sns-head{
    color: #fff;
    font-size: calc(28 / var(--vw) * var(--base));
    letter-spacing: 0.26em;
    line-height: calc(40/28);
    text-align: center;
}

.footer-sns-list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(48 / var(--vw) * var(--base));
    margin-block-start: calc(30 / var(--vw) * var(--base));
}

.footer-sns-list img[alt="Instagram"]{
    width: calc(80 / var(--vw) * var(--base));
}

.footer-sns-list img[alt="YouTube"] {
    width: calc(89 / var(--vw) * var(--base));
}

@media (min-width: 769px) {
    .footer-sns {
        width: max-content;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .footer-sns-head {
        color: #fff;
        font-size: calc(20 / var(--vw) * var(--base));
        line-height: 1;
        text-align: left;
    }

    .footer-sns-list {
        justify-content: flex-start;
        gap: calc(30 / var(--vw) * var(--base));
        margin-block-start: calc(32 / var(--vw) * var(--base));
    }

    .footer-sns-list img[alt="Instagram"] {
        width: calc(53 / var(--vw) * var(--base));
    }

    .footer-sns-list img[alt="YouTube"] {
        width: calc(67 / var(--vw) * var(--base));
    }
}

.footer-inner .btn-list{
    margin-block-end: calc(120 / var(--vw) * var(--base));
}

.btn-footer {
    display: inline-block;
    align-content: center;
    width: 100%;
    height: calc(120 / var(--vw) * var(--base));
    padding-block-start: calc(2 / var(--vw) * var(--base));
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    font-size: calc(22 / var(--vw) * var(--base));
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: calc(34/22);
    text-align: center;
}

@media (min-width: 769px) {
    .footer-inner .btn-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1420px;
        margin-block-end: calc(132 / var(--vw) * var(--base));
    }

    .footer-inner .btn-list-column {
        width: calc(398 / var(--vw) * var(--base));
    }

    .btn-footer{
        height: calc(164 / var(--vw) * var(--base));
        font-size: calc(18 / var(--vw) * var(--base));
        letter-spacing: 0.2em;
    }

    .btn-footer:hover{
        opacity: 1;
        background-color: #fff;
        color: var(--gr);
        text-decoration: none;
    }
}

@media (max-width: 768px) {
    .footer-nav-head{
        border-top: 1px solid #fff;
    }

    .footer-nav-head a{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: calc(117 / var(--vw) * var(--base));
        color: #fff;
        font-weight: 700;
        font-size: calc(25 / var(--vw) * var(--base));
        line-height: calc(40/25);
        letter-spacing: 0.26em;
    }

    .footer-nav-head:has(+ .footer-nav-toggle) a:after {
        content: "";
        display: inline-block;
        background: url("../img/icon-open.svg") no-repeat center/contain;
        width: calc(53 / var(--vw) * var(--base));
        height: calc(53 / var(--vw) * var(--base));
        margin-right: calc(15 / var(--vw) * var(--base));
    }

    .footer-nav-head.active > a:after{
        background: url("../img/icon-close.svg") no-repeat center/contain;
    }

    .footer-nav-toggle{
        overflow: hidden;
        height: 0;
        transition: 0.6s;
    }

    .footer-nav-list{
        border-top: 1px solid #fff;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-block-start: calc(20 / var(--vw) * var(--base));
        padding-block-end: calc(20 / var(--vw) * var(--base));
    }

    .footer-nav-list li{
        font-size: calc(21 / var(--vw) * var(--base));
        line-height: calc(54/21);
    }

    .footer-nav-list li a{
        display: block;
        color: #fff;
    }

    .footer-nav-column:last-child .footer-nav-list{
        display: flex;
        column-gap: calc(47 / var(--vw) * var(--base));
        row-gap: 0;
        justify-content: center;
        padding-block-start: calc(67 / var(--vw) * var(--base));
    }

    .footer-nav-column:last-child .footer-nav-list li a{
        text-decoration: underline;
    }
}

@media (min-width: 769px) {
    .footer-nav {
        display: grid;
        grid-template-columns: 1fr max-content max-content max-content;
        grid-template-rows: max-content 1fr;
        column-gap: calc(148/1420*100%);
        row-gap: calc(60 / var(--vw) * var(--base));
        border-top: 1px solid #fff;
        padding-block-start: calc(132 / var(--vw) * var(--base));
    }

    .footer-nav-head{
        margin-block-end: calc(20 / var(--vw) * var(--base));
    }

    .footer-nav-head a {
        color: #fff;
        font-weight: 700;
        font-size: calc(20 / var(--vw) * var(--base));
        line-height: 1.5;
        letter-spacing: 0.26em;
    }

    .footer-nav-column:not(:last-child){
        grid-row: span 2;
    }

    .footer-nav-list li {
        font-size: calc(14 / var(--vw) * var(--base));
        line-height: calc(40/14);
    }

    .footer-nav-list li a {
        display: inline;
        color: #fff;
    }

    .footer-sns{
        grid-column: 4/5;
        grid-row: 1/2;   
    }
}

/* Block Editor Style */

.wp-block-group:not(:last-child){
    margin-block-end: calc(40 / var(--vw) * var(--base));
}

@media (min-width: 769px) {
    .wp-block-group:not(:last-child){
        margin-block-end: calc(70 / var(--vw) * var(--base));
    }
}

.is-layout-flex{
    gap: 0;
}

.wp-block-columns{
    margin-block-end: calc(50 / var(--vw) * var(--base));
}

.wp-block-columns:last-of-type{
    margin-block-end: calc(120 / var(--vw) * var(--base));
}

.wp-block-columns.is-layout-flex{
    row-gap: calc(10 / var(--vw) * var(--base));
    column-gap: calc(10 / var(--vw) * var(--base));
}

.wp-block-list{
    padding-inline-start: 2.0em;
}

ul.wp-block-list{
    list-style-type: disc;
}

ol.wp-block-list{
    list-style-type: decimal;
}

@media (min-width: 769px) {
    .wp-block-columns{
        margin-block-end: calc(70 / var(--vw) * var(--base));
    }

    .wp-block-columns:last-of-type{
        margin-block-end: calc(200 / var(--vw) * var(--base));
    }

    .wp-block-columns.is-layout-flex{
        row-gap: 0;
    }
}

.smf-form .smf-text-control__control,
.smf-form .smf-select-control__control{
    width: 100%;
    height: calc(66 / var(--vw) * var(--base));
    background-color: #44B4751A !important;
    border: 1px solid var(--border) !important;
    font-size: calc(23 / var(--vw) * var(--base));
    letter-spacing: 0.1em;
}

.smf-form .smf-select-control__control{
    background-image: url("../img/icon-open-bk.svg") !important;
    background-size: calc(41 / var(--vw) * var(--base)) !important;
    background-position-x: calc(100% - 1.5rem) !important;
    background-position-y: center !important;
    background-repeat: no-repeat !important;
}

.smf-form .smf-select-control__control:active,
.smf-form .smf-select-control__control:focus,
.smf-form .smf-select-control__control:focus-within,
.smf-form .smf-select-control__control[aria-selected=true] {
    background-image: url("../img/icon-close-bk.svg") !important;
}

.smf-form .smf-select-control{
    width: 100%;
}

.smf-form .smf-select-control__toggle:before{
    display:none !important;
}

.smf-form .smf-radio-button-control,
.smf-form .smf-checkbox-control{
    gap: calc(30 / var(--vw) * var(--base)) !important;
    font-size: calc(23 / var(--vw) * var(--base));
    letter-spacing: 0.1em;
    line-height: 1.5;
    accent-color: var(--gr);
}

.smf-form .smf-radio-button-control__control:checked,
.smf-form .smf-checkbox-control:checked{
    background-color: var(--gr) !important;
    border-color: var(--gr) !important;
}

.smf-form .smf-textarea-control__control{
    width: 100%;
    height: calc(400 / var(--vw) * var(--base));
    background: #44B4751A !important;
    border: 1px solid var(--border) !important;
    font-size: calc(23 / var(--vw) * var(--base));
    letter-spacing: 0.1em;
    line-height: 1.5;
}

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

.smf-placeholder{
    font-size: calc(23 / var(--vw) * var(--base));
}

.smf-action .smf-button-control__control{
    background-color: var(--gr) !important;
    background-image: none !important;
    border: none !important;
    height: calc(87 / var(--vw) * var(--base)) !important;
    color: #fff !important;
    font-size: calc(20 / var(--vw) * var(--base)) !important;
    letter-spacing: 0.1em;
}

button[data-action="confirm"]{
    width: calc(360 / var(--vw) * var(--base)) !important;
}

button[data-action="complete"],
button[data-action="back"]{
    width: calc(280 / var(--vw) * var(--base)) !important;
}

button[data-action="confirm"]:after,
button[data-action="complete"]:after,
button[data-action="back"]:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: calc(20 / var(--vw) * var(--base));
    transform: translateY(-50%);
    background: url("../img/arrow-wh.svg") no-repeat center/contain;
    border-radius: 50%;
    border: 1px solid #fff;
    transition: 0.6s ease;
    width: calc(39/23*1rem);
    height: calc(39/23*1rem);
}

button[data-action="back"]:after{
    transform: translateY(-50%) rotateY(180deg);
    right: inherit;
    left: calc(20 / var(--vw) * var(--base));
}

form[data-screen="confirm"] .contact-lead,
form[data-screen="invalid"] .contact-lead{
    display: none;
}

@media (min-width: 769px) {
    .smf-form .smf-text-control__control,
    .smf-form .smf-select-control__control{
        padding: .75rem 2rem !important;
        font-size: calc(18 / var(--vw) * var(--base));
    }

    .smf-form .smf-radio-button-control,
    .smf-form .smf-checkbox-control{
        font-size: calc(18 / var(--vw) * var(--base));
    }

    .smf-form .smf-textarea-control__control{
        padding: .75rem 2rem !important;
        font-size: calc(18 / var(--vw) * var(--base));
        background-size: calc(31 / var(--vw) * var(--base)) !important;
    }   

    .smf-placeholder{
        font-size: calc(18 / var(--vw) * var(--base));
    }

    .smf-action .smf-button-control__control{
        width: calc(400 / var(--vw) * var(--base)) !important;
        height: calc(77 / var(--vw) * var(--base)) !important;
    }

    button[data-action="confirm"]:after,
    button[data-action="complete"]:after,
    button[data-action="back"]:after{
        width: calc(37 / var(--vw) * var(--base));
        height: calc(37 / var(--vw) * var(--base));
    }

    button[data-action="confirm"]:hover:after,
    button[data-action="complete"]:hover:after,
    button[data-action="back"]:hover:after{
        animation-duration: 0.4s;
        animation-name: arrow;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.19, 1, .22);
    }
}