@charset "UTF-8";

/*==========
Reset
===========*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
a{
    color: var(--Color-White);
    text-decoration: none;
    transition: .3s ease;
}
img{
    vertical-align: bottom;
    max-width: 100%;
    width: 100%;
    height: auto;
}
ol,
ul {
    list-style: none;
}

/*==========
Variable
===========*/
/*Color*/
:root{
    --Color-Primary:#999999;
    --Color-Brand:#00845C;
    --Color-Light:#CCCCCC;
    --Color-Dark:#212121;
    --Color-White:#FFFFFF;
    --Color-Gray:#f0f0f0;

    --Neutral-Border-Brand:#00845C;
    --Neutral-Border-Dark:#212121;
    --Neutral-Background-Primary:#FFFFFF;
    --Neutral-Background-Footer:#00625C;

    --Surface-Primary-Hover:#00A775;
    --Surface-Primary-Disable:#D5D5D5;
    --Surface-Primary:#00845C;
    --Surface-Secondry:#F49B0A;
    --Surface-Secondary-hover:#D84F00;
    --Surface-On-Color-Light:#FFFFFF;

    --Tag-Bg-red:#c54846;
    --Tag-Bg-blue:#00518a;

    --Border:#666666;
    --Border-Orange:#F49B0A;
}
/* Radius */
:root{
    --Radius-None:0px;
    --Radius-S:4px;
    --Radius-M:8px;
}
/* Spacing */
:root{
    --Space-XS:4px;
    --Space-S:8px;
    --Space-M:16px;
    --Space-L:24px;
    --Space-XL:32px;
}
/* Text */
:root{
     --Heading-XL:clamp(20px, 2.6vw, 34px);
     --Heading-L:clamp(18px, 2.3vw, 24px);
     --Heading-M:clamp(16px, 2.08vw, 18px);
     --Body-L:clamp(16px, 2.08vw, 24px);
     --Body-L-M:clamp(16px, 2.08vw, 20px);
     --Body-M:clamp(14px, 1.82vw, 16px);
     --Body-S:clamp(12px, 1.56vw, 14px);
     --Caption:clamp(10px, 1.3vw, 12px);
     --Footer-L:clamp(14px, 1.82vw, 16px);
     --Footer-M:clamp(12px, 1.56vw, 14px);

     --F-Serif:"Noto Serif JP", serif;
     --F-Sans:"Noto Sans JP", sans-serif;
     --F-EB:"EB Garamond";
}
body{
    background-image: url("../imgs/common/bg.webp");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--Color-Dark);
    font-family: var(--F-Serif);
    font-size: var(--Body-M);
    position: relative;
    overflow-x: hidden;
    word-break: auto-phrase;
}
section{ margin-bottom: 4rem;}
iframe{ width: 100%;}

@media (min-width: 769px) {
    .sp {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .pc {
        display: none !important;
    }
}
a:not(.header-logo a):not(.link-btn a):not(.footer-logo-list a):hover{  opacity: 0.6;}
button{ cursor: pointer;}
.caption{ font-size: var(--Caption); text-align: right;}
.inner-wrap{ max-width: 1240px; margin: 0 auto; padding: 0 20px;}
@media (max-width: 768px) { 
    .inner-wrap{ padding: 0 var(--Space-M);}
}
.reverse{ flex-direction: row-reverse;}
@media (max-width: 768px) {
    .reverse{ flex-direction: column;}
}
.tit,
.content-tit{ word-break: auto-phrase;}
/*==========
Parts
===========*/
/* bg-img */
.bg-img{ height: 100svh; background: url("../imgs/common/bg_img.webp");background-size: cover; background-position: center; background-repeat: no-repeat;}
.bg-white{ background: var(--Color-White); padding: 3rem; position: relative;}
@media (max-width: 768px) { 
    .bg-white{ padding: 2rem 1rem;}
}

/* link-btn */
.link-btn{ width: 216px; background-color: var(--Color-Brand); transition: 0.3s ease;}
.link-btn a{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; font-family: var(--F-Sans); font-style: normal; font-size: var(--Body-M); font-weight: 800; line-height: normal; padding: 10px;}
.link-btn:hover{ background-color: var(--Surface-Primary-Hover);}
.circle-arrow{ display: inline-block; width: 18px; height: 18px; background-image: url("../imgs/parts/circle_arrow.svg");}
.circle-arrow-disable{display: inline-block; width: 18px; height: 18px; background-image: url("../imgs/parts/circle_arrow-disable.svg");}
@media (max-width: 768px) {
    .link-btn{ width: 50%; height: 52px;}
}

/* intro */
.intro{ margin-bottom: 80px; font-size: var(--Heading-L); text-align: center;}
@media (max-width: 768px) {
    .intro{margin-bottom: 40px;}
}

/* tag */
.tag{ width: 235px;display: flex; color: var(--Color-White); font-size: var(--Body-S);}
.tag span{ width: 50%; display: inline-block; padding: 0.5rem 1rem; font-family: var(--F-Sans); text-align: center;}
.tag01{ background-color: var(--Tag-Bg-red)}
.tag02{ background-color: var(--Tag-Bg-blue)}

/* top-btn-function */
.top-btn-function{ display: flex; justify-content: center; gap: 12px;}
.top-btn-function-btn{ display: flex; width: 360px; height: 72px; padding: 9px 34px; justify-content: center; align-items: center; gap: 41px; border-radius: var(--Radius-S); background-color: var(--Surface-Secondry); color: var(--Surface-On-Color-Light); font-size: var(--Heading-M); font-family: var(--F-Sans); transition: 0.3s ease;}
.top-btn-function-btn:hover{ background-color: var(--Surface-Secondary-hover);}
.top-btn-function-btn .icon{ width: 36px; height: 37px; content: ''; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center;}
.top-btn-function-btn .icon01{ background-image: url("../imgs/parts/icon_09.svg");}
.top-btn-function-btn .icon02{ background-image: url("../imgs/parts/icon_10.svg");}
@media (max-width: 767px) {
    .top-btn-function{ display: block;}
    .top-btn-function-btn{ width: 100%; margin-bottom: 10px;}
    .top-btn-function-btn .icon{ width: 36px;}
}


/* bottom-cap */
.bottom-cap p{ margin-bottom: calc(var(--Space-M)* 2); font-size: var(--Caption); text-align: left;}

/* MV */
.mv { margin-top: 92px;}
@media (max-width: 768px) {
    .mv { margin-top: 75px;}
}


/* no-click */
.disable{ background-color: var(--Surface-Primary-Disable); pointer-events: none;}

/*==========
header
===========*/
header{ width: 100%; background-color: #FFF; position: fixed; top: 0; left: 0; z-index: 9}
.header-wrap{ max-width: 1440px; display: flex; justify-content: space-between; margin: 0 auto; padding: var(--Space-L) var(--Space-XL);}
.header-logo { width: 12%; min-width: 120px;}
.header-logo a { display: flex; align-items: center; height: 100%;}
.header-logo02 { width: 15.8%;}
.header-contents { display: flex; gap: 1rem; align-items: center;}
.header-btn{ display: flex; align-items: center; justify-content: right; gap: var(--Space-M);}
.header-menu { width: 34px; height: 16px; cursor: pointer; position: relative;}
.header-menu span { display: block; width: 100%; height: 2px; background-color: var(--Neutral-Border-Brand); transition: 0.3s; position: absolute;}
.header-menu span:nth-of-type(1){ top: 0;}
.header-menu span:nth-of-type(2){ background-color: var(--Neutral-Border-Dark); top: 50%; transform: translateY(-50%);}
.header-menu span:nth-of-type(3){ bottom: 0;}
.header-menu.is-active span:nth-of-type(1){ top: 50%; transform: translateY(-50%) rotate(30deg);}
.header-menu.is-active span:nth-of-type(2){ opacity: 0;}
.header-menu.is-active span:nth-of-type(3){ top: 50%; transform: translateY(-50%) rotate(150deg);}

/* hamburger-menu */
.header-nav{ width: 100vw; height: 100svh; position: fixed; top: 92px; right: -100vw; z-index: 100; opacity: 0; transition: 0.5s ease;z-index: 100;}
.header-nav.bg{ width: 100%; height: 100svh; background: url("../imgs/common/bg_header.webp");background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; z-index: 0;}
.header-nav.open { right: 0; opacity: 1; visibility: visible;}
.header-nav-contents{width: 100%; max-width: 1040px; display: flex; justify-content: space-between; margin: 0 auto; padding: 0 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -120%);}
.header-nav-box { width: 29%;}
.header-nav-title{ border-bottom: 1px solid var(--Color-White); color: var(--Color-White); font-family: var(--F-EB); font-size: var(--Footer-L); font-weight: 700; letter-spacing: 1.6px; margin-bottom: 0.5rem; padding-bottom: 0.5rem;}
.header-nav-link{ font-size: var(--Body-S); padding-top: 0.5rem;}
body.menu-open { position: fixed; width: 100%;}


@media (max-width: 768px) {
    header{ height: 75px;}
    .sp-bottom-nav{ width: 100%; background-color: var(--Neutral-Background-Primary); position: fixed; bottom: 0; left: 0; z-index: 9; }
    .header-btn{ width: 100%; gap: 1px;}
    .sp-header-logo { width: 100%; display: flex; align-items: center; justify-content: right;}
    .header-logo02 { width: 30%; min-width: 70px;}

    .header-nav.bg { top: 75px;}
    .header-nav-contents { flex-direction: column; row-gap: var(--Space-L); transform: translate(-50%, -62%);}
    .header-nav-box { width: 100%;}
}


/*==========
footer
===========*/
.footer { padding: calc(var(--Space-XL) * 1.5) 0;}
.footer.bg{ height: auto; background-image: url("../imgs/common/bg_footer.webp"); background-repeat: no-repeat; background-size: cover; background-position: top;}
.footer-contents{width: 100%; max-width: 1040px; display: flex; justify-content: space-between; margin: 0 auto; padding: 0 1rem; }
.footer-box { width: 29%;}
.footer-title{ border-bottom: 1px solid var(--Color-White); color: var(--Color-White); font-family: var(--F-EB); font-size: var(--Footer-L); font-weight: 700; letter-spacing: 1.6px; margin-bottom: 0.5rem; padding-bottom: 0.5rem;}
.footer-link{ font-size: var(--Body-S); padding-top: 0.5rem;}

.footer-logo{ background-color: var(--Neutral-Background-Primary);}
.footer-logo-contents{ max-width: 1440px; margin: 0 auto; padding: var(--Space-L) var(--Space-XL);}
.footer-logo-list{ display: flex; justify-content: center; gap: var(--Space-XL);}

.footer-logo01{ width: 13%;}
.footer-logo02{ width: 17%;}

@media (max-width: 768px) {
    .footer-contents { flex-direction: column; row-gap: var(--Space-L);}
    .footer-box { width: 100%;}
    .footer-logo { padding-bottom: 52px;}
    .footer-logo01 { width: 38%;}
    .footer-logo02 { width: 48%;}
}


/*==========
Animate
===========*/
.fade-in{opacity: 0; transition: opacity 2s;}
.fade-in.is-view{opacity: 1;}

.fade-up{opacity: 0; transform: translateY(50px); transition: opacity 1.5s, transform 1.5s;}
.fade-up.is-view{opacity: 1; transform: translateY(0);}

.fade-right{opacity: 0; transform: translateX(-50px); transition: opacity 1.5s, transform 1.5s;}
.fade-right.is-view{opacity: 1; transform: translateX(0);}

.fade-left{opacity: 0; transform: translateX(50px); transition: opacity 1.5s, transform 1.5s;}
.fade-left.is-view{opacity: 1; transform: translateX(0);}

.mockUp-slider{ display: flex; justify-content: space-between; max-width: 985px; margin: 0 auto; padding-bottom: 5rem;}
.mockUp-slider img{ width: 100%;}

/*==========
modal
===========*/
#mask { display: none;}
#mask.appear { background-color: hsla(0, 0%, 0%, 0.7); display: block; position: fixed; inset: 0; z-index: 10; animation: fadeIn 0.5s ease-out;}
/* modal01用背景 */
#modal01.appear { background: url("../../assets/imgs/common/bg_img.webp") center/cover no-repeat;}
/* modal02用背景 */
#modal02.appear { background: url("../../assets/imgs/common/bg.webp") center/cover no-repeat;}
#modal01,
#modal02 { display: none;}
#modal01.appear,
#modal02.appear { display: block; max-width: 1240px; width: 100%; max-height: 100vh; padding: 40px 24px 80px;margin-top:20px; border-radius: 4px; color: var(--Color-White); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; animation: fadeIn 0.5s ease-out; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none;}
#modal02.appear { color: var(--Color-Dark);}
#modal01.appear::-webkit-scrollbar,
#modal02.appear::-webkit-scrollbar { display: none;}

body.modal-open { position: fixed; width: 100%;}
@media (max-width: 768px) {
    #modal01.appear,
    #modal02.appear { width: 92%; padding: 0;}
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-close-btn { width: 32px; height: 32px; display: inline-block; cursor: pointer; font-size: var(--Body-L); position: absolute; right: 20px;}
.modal-close-btn span{ width: 100%; height: 2px; display: block; background-color: var(--Color-Brand);}
.modal-close-btn span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(30deg); position: absolute;}
.modal-close-btn span:nth-child(2) { top: 50%; transform: translateY(-50%) rotate(150deg); position: absolute;}

/* ご利用方法 */
.registration-container{ position: relative;}
.registration-container .intro{  margin-bottom: calc(var(--Space-XL) * 1.5); color: var(--Color-Brand);}
.registration-container .caption{ display: block; text-align: left; margin-top: var(--Space-L);}
.registration-container .inner-wrap > .bottom-cap{ margin-top: calc(var(--Space-XL) * 1.5);;}
.step{   margin-bottom: calc(var(--Space-XL) * 1.5);}
.step .tit{ margin-bottom: var(--Space-L); border-bottom: 1px solid var(--Color-Brand); color: var(--Color-Brand); font-size: var(--Body-L-M);}
.step .tit .stepTag{ margin-right: var(--Space-M); padding: 0.5rem 1rem; display: inline-block; background-color: var(--Color-Brand); color: var(--Color-White); font-family: var(--F-EB); font-weight: bold;}
.step-another .tit{ padding: 0.5rem calc(var(--Space-M) *4 ); background-color: var(--Color-Brand); color: var(--Color-White); font-size: var(--Body-L-M);}
@media (max-width: 768px) {
    .registration-container { padding: 80px 0;}
    .stepTag-txt { display: block; padding: var(--Space-S) 0;}
    .image-scroll-wrap { width: 100%; overflow-x: auto;}
    .image-scroll-wrap img { min-width: 800px; width: 100%; height: auto; display: block;}
    .step-another .tit { padding: 0.5rem 0; text-align: center;}
}

/* マイリビオ機能紹介 */
.about-function-container{ padding: 80px 0; position: relative;}
.about-function-container .modal-close-btn span{ background-color: var(--Color-White);}
.about-function-container .introBox { position: relative; width: 90%; margin: 0 auto calc(var(--Space-XL) * 1.5);}
.about-function-container .tag { position: absolute; right: 0; top: 0.5rem;}
.about-function-container .tag01,
.about-function-container .tag02{  font-family: var(--F-Serif); display: flex; justify-content: center; align-items: center; }
.about-function-container .tag01 { width: 70%; font-size: var(--Body-M); background-color: var(--Color-Brand); }
.about-function-container .tag02{ width: 40%; font-size: var(--Body-L-M); font-weight: bold; background-color: var(--Border-Orange);}
.about-function-container .intro.tit { margin-bottom: var(--Space-XL);}
.about-function-image .caption{ width: 80%; margin: var(--Space-L) auto 0; text-align: left;}
.img-about-function { width: 80%; margin: 0 auto;}

.about-function-list { margin-top: var(--Space-L); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; row-gap: 0.5rem;}
.about-function-list-item{ flex-basis: calc((100% - 30px)/ 4); padding: 10px 20px; display: flex; align-items: center; justify-content: center; background-color: var(--Color-Brand); font-size: var(--Body-S); gap: 0.5rem;}
.about-function-list-item img{ width: 31px; height: 33px; object-fit: contain;}
@media screen and (max-width:768px){
    .about-function-container .inner-wrap { padding: 0;}
    .about-function-container .introBox { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--Space-L);}
    .about-function-container .intro.tit { margin-bottom: var(--Space-M);}
    .about-function-container .tag { position: relative; }
    .about-function-image .caption,
    .img-about-function { width: 100%;}
    .about-function-list-item { flex-basis: calc((100% - 10px) / 2);}
    .about-function-list-item img { width: 20%;}
    .about-function-list-item span { width: 80%;}
}

/*==========
slider
===========*/
.swiper-slide img { height: auto; width: 100%;}
@media screen and (max-width:768px){
    .swiper-slide { width: 100%; height: 100%; object-fit: cover;}
    .swiper-slide img { width: 100%; height: auto; display: block;}
    /* 矢印：左右外側 */
    .mockUp-slider { display: block; position: relative; max-width: 375px; width: 70%; margin: 0 auto;}
    .mockUp-slider-prev,
    .mockUp-slider-next { position: absolute; top: 50%; transform: translateY(-140%); z-index: 8; width: 46px; height: 46px; border: none; background: transparent; cursor: pointer;}
    .mockUp-slider-prev { left: -55px; background: url("../../assets/imgs/parts/circle_arrow-left.png") no-repeat center / contain;}
    .mockUp-slider-next { right: -55px; background: url("../../assets/imgs/parts/circle_arrow-right.png") no-repeat center / contain;}
    /* ページネーション：下 */
    .mockUp-slider-pagination { margin-top: 16px; text-align: center;}
    .mockUp-slider-pagination .swiper-pagination-bullet { opacity: 1; background: #bbb;}
    .mockUp-slider-pagination .swiper-pagination-bullet-active { background: var(--Surface-Secondry);}
}

/* === PC(769以上)：固定（スライドなし） === */
@media screen and (min-width: 769px) {
    .swiper-wrapper { display: grid; gap: var(--Space-XL); grid-template-columns: repeat(3, 1fr);}
    .swiper-slide { max-width: 275px;}
    .swiper-button-prev,
    .swiper-button-next { display: none;}
    .mockUp-slider-prev,
    .mockUp-slider-next,
    .mockUp-slider-pagination { display: none;}
    .js-mockUp-slider-swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--Space-XL); transform: none !important;}
    .js-mockUp-slider-swiper .swiper-slide { width: auto !important; margin: 0 !important;}
}