@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: "NotoSansJP-Medium";
    font-weight: 500;
    src: url("../font/NotoSansJP-Medium-subset.woff2") format("woff2"), url("font/NotoSansJP-Medium-subset.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "NotoSansJP-Bold";
    font-weight: 700;
    src: url("../font/NotoSansJP-Bold-subset.woff2") format("woff2"), url("font/NotoSansJP-Bold-subset.woff") format("woff");
    font-display: swap;
  }

html{
	font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
	color: #333;
	font-size: 1.6rem;
	font-weight: 500;
	font-family: Arial, "NotoSansJP-Medium", sans-serif;
	line-height: 1.82;
	font-feature-settings: "palt";
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiaced;
	-moz-osx-font-smoothing: grayscale;
}
img,
video{
	max-width: 100%;
	height: auto;
}
html.fixed{
    overflow: hidden;
}
a,
button{
    transition: all 0.3s ease-in-out;
}
a:hover,
button:hover{
    filter: brightness(110%);
}

h2 span{
    display: inline-block;
}

.link{
    color: #e94f59;
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
}
.link:hover{
    text-decoration: none;
}

/* btn */
.menu-btn{
    width: 11.5%;
    padding-top: 11.5%;
}
.menu-tel{
    width: 11.5%;
}
.menu-line{
    width: 31.33%;
}
.menu-reserve{
    width: 45%;
}
.menu-tel,
.menu-line,
.menu-reserve{
    transition: 0.2s all ease-in-out;
}

.menu-tel.-ver2{
    width: 48%;
}
.menu-line.-ver2{
    width: 48%;
}

.btn-trigger_inner{
    position: absolute;
    bottom: 19%;
    left: 0.8rem;
    z-index: 20;
    width: 9.2%;
    aspect-ratio: 1;
    transition: all 0.5s ease-in-out;
}
.btn-trigger_inner.active{
    border: none;
    box-shadow: none;
}
.btn-trigger{
    display: block;
    position: absolute;
	bottom: 0;
    left: 0;
    z-index: 20;
	width: 100%;
	height: 100%;
    line-height: 1;
}
.btn-trigger_span{
    position: absolute;
    left: 0;
    width: 100%;
	height: 2px;
	background: #222;
	transition: all 0.2s ease-in-out;
}
.btn-trigger_span:first-of-type{
	top: 5%;
}
.btn-trigger_span:nth-of-type(2){
	top: 28%;
    transform: -50%;
}
.btn-trigger_span:nth-of-type(3){
	bottom: 42%;
}

.btn-trigger.active .btn-trigger_span:first-of-type{
    width: 105%;
    top: auto;
    bottom: 60%;
    left: -3%;
	transform: rotateZ(30deg);
}
.btn-trigger.active .btn-trigger_span:nth-of-type(2){
    display: none;
}
.btn-trigger.active .btn-trigger_span:nth-of-type(3){
    width: 105%;
    bottom: 60%;
    left: -3%;
	transform: rotateZ(-30deg);
}
.btn-trigger_menu{
    position: absolute;
    left: 50%;
    bottom: -10%;
    font-size: 100%;
    transform: scale(0.7) translateX(-72%);
	transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    text-align: center;
}


.nav{
    position: fixed;
    top: -100vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    padding: 0 0 12rem;
    margin: auto;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #fdf2f7;
    transition: all 0.5s ease-in-out;
    overflow: scroll;
}
.nav.open{
    top: 0;
}
.nav__header{
    padding: 2% 3%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
}

.nav__inner{
    padding: 1.5rem 1.6rem;
    margin: auto;
    background: #fdf2f7;
}

.nav-logo{
    margin-bottom: 1rem;
    padding: 1.5rem;
}
.nav-title{
    margin: 0em auto 0.8em;
    padding: 0 1.6rem; 
}

.menu{
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.7rem ;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    background: #fff;
    box-shadow: 0px -8px 8px -2px rgba(0, 0, 0, 0.1);
}
.menu-list {
    padding: 0 1.6rem;
}
/*******************
header
********************/
.header{
    position: fixed;
    top: 1.7em;
    left: 50%;
    transform: translateX(-50%);
    width: 89%;
    max-width: 1210px;
    background: #fff;
    border-radius: 3em;
    z-index: 30;
    box-shadow: 0.7rem 0.7rem 0.7rem 0px rgba(0,0,0,0.15);
}
.headerLogo{
    width: 23.9rem;
    aspect-ratio: 103 / 26;
}
.headerLogo img{
    display: block;
    width: 100%;
    height: auto;
}
.headerBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.45rem 1rem 1.4rem 1.5rem;
    margin: 0 auto;
    width: 97.7%;
    max-width: 1100px;
}

.headerBtn{
    display: flex;
    gap: 2.4rem;
    line-height: 1;
}
.headerBtn-login a,
.headerBtn-signup a{
    display: block;
    padding: 0.7em 2em;
    font-size: 2.0rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    border-radius: 3em;
}
.headerBtn-login{
    padding: 3px;
    background-image: linear-gradient(90deg, #ed5097, #f09c5a);
    border-radius: 3em;
}
.headerBtn-login a{
    background: #fff;
}
.headerBtn-login{
    transition: all 0.3s ease-in-out;
}
.headerBtn-login:hover{
    filter: brightness(120%);
}
.headerBtn-login a span{
    background:linear-gradient(90deg, #ed5097, #f09c5a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.headerBtn-signup{
    padding: 3px;
    background-image: linear-gradient(90deg, #ed5097, #f09c5a);
    border-radius: 3em;
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.headerBtn-signup:hover{
    filter: brightness(110%);
}
.headerBtn-signup a{
    display: block;
    position: relative;
    background:linear-gradient(90deg, #ed5097, #f09c5a);
}
.headerBtn-signup a::before{
    content: '';
    position: absolute;
    top: -13px;
    left: -17px;
    background: url(../images/signup-easy.svg?date=250717) no-repeat;
    background-size: cover;
    width: 51px;
    aspect-ratio: 50.23 / 49.178;
}
.headerBtn-signup a span{
    padding-left: .5em;
}

/*******************
MV
********************/
.mv{
    position: relative;
    background-image: linear-gradient(to left, #fccbe1 0%, #fdd5dd 54%, #ffe9d7 100%);
    overflow: hidden;
}
.mv-inner{
    position: relative;
    padding: 12em 1em 13em;
    background: url(../images/mv-bg.svg) center no-repeat;
    background-size: cover;
    height: 57vw;
    min-height: 900px;
    max-height: 980px;
}
.mv-outer{
    position: relative;
    margin: auto;
    width: 92%;
    max-width: 1100px;
}
.mv::before{
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(70%,-50%);
    background: url(../images/mv-visual.png) right no-repeat;
    background-size: contain;
    width: 70%;
    max-width: 882px;
    aspect-ratio: 1;
}
.mv::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(240%,40%);
    background: url(../images/mv-illust.svg) right no-repeat;
    background-size: contain;
    width: 20%;
    max-width: 323px;
    aspect-ratio: 323.2 / 266.3;
}
.mvTop-text{
    display: block;
    margin: 1em 0 1em;
    font-size: clamp(1.2rem, 2vw, 2.1rem);
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
}
.mvBottom-text{
    display: block;
    width: 48.3%;
    max-width: 657px;
}
.mvPoint{
    margin: 0 0 2.8em;
    width: 43.6%;
    max-width: 592px;
}
.mv h1{
    margin-bottom: 3em;
}

.signupBtn{
    position: relative;
    padding: 2.2rem 6rem 2.6rem 8.5rem;
    color: #fff;
    font-size: 3.15rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    background:linear-gradient(90deg, #ed5097, #f09c5a);
    border-radius: 0.5em;
    box-shadow: 0.7rem 0.7rem 1rem 0 rgba(0, 0, 0, 0.15);
}
.signupBtn img{
    position: absolute;
    top: -1em;
    left: -0.5em;
    margin-right: 0.2em;
    width: 24%;
    aspect-ratio: 38 / 37;
}

/*******************
worry
********************/
.worry{
    color: #414172;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    background: #c9c1d6;
}
.worry-inner{
    position: relative;
    padding: 5em 1em 6em;
    background: url(../images/worry-bg.svg) center no-repeat;
    background-size: cover;
}
.worry-inner::before{
    content: '';
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/down.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 6.19rem;
    aspect-ratio: 61.9 / 107.7;
    z-index: 2;
}
.worry-container{
    background-image:
    linear-gradient(0deg, transparent calc(100% - 1px), #ececec calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #ececec calc(100% - 1px));
    background-size: 2.0rem 2.0rem;
    background-repeat: repeat;
    background-position: center center;
    background-color: #fff;
    border: 1px solid #fff;
    padding: 2em;
    margin: 0 auto;
    width: 97.7%;
    max-width: 1000px;
}
.worryTitle{
    margin: 0 auto 0.5em;
    font-size: 4rem;
    text-align: center;
    line-height: 1.3;
}
.worryTitle-sub{
    display: block;
    margin: 0 auto 0.8rem;
    width: 70%;
    max-width: 700px;
}
.worryContent{
    display: flex;
    align-items: center;
}
.worryList{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.worryList li{
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 2rem;
    line-height: 1.2;
}
.worryList li::before{
    content: '';
    display: block;
    padding-bottom: 0.2em;
    background-image: url(../images/check.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.75em;
    aspect-ratio: 27.4 /  26;
    flex-shrink: 0;
}
.worryPhoto{
    width: 55%;
    max-width: 416px;
}

/*******************
resolve
********************/
.title{
    margin: 0 auto 3em;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.title p,
.signupBtn-box.-more p{
    margin-bottom: 0.5em;
    font-size: 2rem;
}
.title p::before,
.signupBtn-box.-more p::before{
    content: '＼';
    display: inline-block;
    padding-right: 0.1em;
}
.title p::after,
.signupBtn-box.-more p::after{
    content: '／';
    display: inline-block;
    padding-left: 0.1em;
}
.title h1,
.title h2{
    font-size: 4rem;
}
.-white{
    color: #fff;
}
.title.-resolveAbout{
    margin: 0 auto 1.6em;
    text-align: left;
}
.title.-resolveAbout h2>span{
    display: inline-block;
    background: #fff;
    padding: 0.1em .3em .05em;
    color: #e94f59;
    line-height: 1.1;
}
.title.-gradation p{
    color: #333;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
}
.title.-gradation h2{
    background: linear-gradient(to right, #ed5097, #f09c5a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
}

.resolve,
.bg-gradation{
    position: relative;
    background-image: linear-gradient(to right, #ed5097 0%,  #f09c5a 100%);
}
.resolve-inner{
    position: relative;
    padding: 5em 1em 6em;
    background: url(../images/resolve-bg.svg) center no-repeat;
    background-size: cover;
}
.resolve-container{
    margin: auto;
    width: 97.7%;
    max-width: 1200px;
}
.resolveList{
    margin: 0 auto 4em;
    display: flex;
    justify-content: space-between;
    width: 97.7%;
    max-width: 1200px;
}
.resolveList li{
    position: relative;
    padding: 1.2em 0.8em 0.9em;
    width: 32%;
    background: #fff;
    box-shadow: 7.3px 7.3px 5.2px 0 rgba(0, 0, 0, 0.15);
    border-radius: 0.8em;
}
.resolveList li.first::before,
.resolveList li.second::before,
.resolveList li.third::before{
    content: '';
    position: absolute;
    top: -1%;
    left: 3%;
    background-image: url(../images/01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 19%;
    aspect-ratio: 77.7 / 79.4;
}
.resolveList li.second::before{
    background-image: url(../images/02.svg);
}
.resolveList li.third::before{
    background-image: url(../images/03.svg);
}
.resolveList li h3{
    margin: 0 auto .5em;
    text-align: center;
}
.resolveIllust{
    margin: 0 auto 1em;
    width: 55%;
    max-width: 182px;
}
.resolveAbout{
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 97.7%;
    max-width: 1200px;
    overflow: hidden;
}
.resolveAbout-text{
    width: 50%;
    color: #fff;
}
.resolveAbout-photo{
    margin-right: -1em;
    width: 40%;
}

/*******************
signup
********************/
.signup{
    padding: 7em 1em;
    background-image: url(../images/signup-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.signup-inner{
    position: relative;
    padding: 4em 1.3em 3em;
    margin: 0 auto;
    width: 97.7%;
    max-width: 1200px;
    background: #fff;
    border-radius: 0.5em;
    box-shadow: 0.61rem 0.61rem 0.43rem 0 rgba(0, 0, 0, 0.15);
}
.signup-inner::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0%;
    background-image: url(../images/signup-illust.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 45%;
    aspect-ratio: 695 / 536;
}
.signup.-box .signupBtn-box{
    margin: 0 auto 2em 0;
}
.signup-outer{
    width: 50%;
    text-align: center;
}
.mediacLink{
    font-size: 2rem;
    color: #e94f59;
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
}
.mediacLink:hover{
    text-decoration: none;
}
/*******************
point
********************/
.point{
    background: #ffe6ea;
}
.point-inner{
    padding: 5em 1em 6em;
    background: url(../images/point-bg.svg) center no-repeat;
    background-size: cover;
}
.pointList{
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0 auto;
    width: 97.7%;
    max-width: 1200px;
}
.pointList li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pointList li:nth-of-type(even){
    flex-direction: row-reverse;
}
.point-text h3{
    margin-bottom: 0.5em;
    font-size: 2.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.5;
}
.point-text h3>span{
    padding: 0.07em 0.3em 0.04em;
    background: #fff46c;
}
.mediacLink.-normal{
    font-size: 1.6rem;
}
.small{
    font-size: 70%;
}

/*******************
Lineup
********************/
.lineup-inner{
    padding: 5em 1em 6em;
    background: url(../images/lineup-bg.svg) center no-repeat;
    background-size: cover;
}
.lineupList{
    margin: 0 auto 4em;
    display: flex;
    justify-content: space-between;
    width: 97.7%;
    max-width: 1200px;
}
.lineupList>li{
    padding: 1.3em;
    width: 48%;
    background: #fff;
    border-radius: 0.5em;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
}
.lineupList h3{
    color: #e94f59;
    font-size: 2.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    text-align: center;
}
.lineupText{
    height: 13em;
}
.lineupIllust img{
    margin: 0 auto .5em;
    display: block;
    border-radius: .5em;
}
.recommendBox{
    display: flex;
    gap: 0.4em;
}
.recommendList{
    display: flex;
    flex-direction: column;
    gap: .2em;
}
.recommendList li{
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: #e94f59;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.2;
}
.recommendList li::before {
    content: '';
    display: block;
    padding-bottom: 0.2em;
    background-image: url(../images/check.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.6em;
    aspect-ratio: 27.4 / 26;
    flex-shrink: 0;
}
.lineupExList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.8rem 1.2rem;
    margin: 0 auto 3em;
    width: 97.7%;
    max-width: 1200px;
}
.lineupExList li{
    padding: 1.3em;
    width: 49%;
    background: #fff;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
    border-radius: .5em;
}
.lineupExList li h3{
    padding: 0 0 .4em;
    margin: 0 auto .5em;
    color: #e94f59;
    font-size: 2.8rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    border-bottom: 2px solid #f7d2dc;
}
.lineupExList li h3>span{
    margin-left: 1em;
    display: inline-block;
    color: #333;
    font-size: 1.6rem;
}

.signupBtn-box.-more{
    margin: 0 auto;
    width: 97.7%;
    max-width: 1200px;
    text-align: center;
}
.signupBtn-box.-more .signupBtn{
    padding: 2.2rem 2.4em 2.6rem;
    color: #e94f59;
    background: #ffeb2e;
    border: 2px solid #fff;
}
.signupBtn-box.-more p{
    margin-bottom: 0.8em;
}

/*******************
movie
********************/
.movie-inner{
    padding: 5em 1em 6em;
    background: url(../images/movie-bg.svg) center no-repeat;
    background-size: cover;
}
.movieAttention{
    margin: 0 auto;
    width: 97.7%;
    max-width: 800px;
    color: #fff;
    font-size: 85%;
    text-align: right;
}
.movieList{
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin: 0 auto;
    width: 97.7%;
    max-width: 800px;
    text-align: center;
}
.movieList h3 {
    margin: 0 auto 1em;
}
.movieList h3 span{
    padding: 0.1em 1em;
    display: inline-block;
    color: #e94f59;
    font-size: 2.0rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    background: #fff;
    line-height: 1.2;
    border-radius: 1em;
}
.movieWrapper{
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
}
.movieWrapper iframe{
    width: 100%;
    height: 100%;
}
.movieList li a:hover{
    filter: brightness(115%);
}

/*******************
plan
********************/
.plan,
.bg-pink{
    background: #ffe6ea;
}
.plan-inner{
    padding: 5em 1em 6em;
    background: url(../images/plan-bg.svg) center no-repeat;
    background-size: cover;
}
.planList{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 97.7%;
    max-width: 860px;
}
.planList li{
    padding: 0 0 1.3em 0;
    width: 47%;
    background: #fff;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    text-align: center;
}
.planList h3{
    position: relative;
    color: #fff;
    font-size: 3rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    background: #f0838a;
    border-radius: 1rem 1rem 0 0;
}
.planList h3>img{
    position: absolute;
    top: -80%;
    right: 10%;
    width: 26%;
    max-width: 110px;
}
.planList h3.bg-gradation{
    position: relative;
    background-image: linear-gradient(to right, #ed5097 0%, #f09c5a 100%);
}
.planPrice{
    padding: 1.2em 0 1em;
}

/*******************
flow
********************/
.flow{
    padding: 5em 1em 6em;
    background-image:
    linear-gradient(0deg, transparent calc(100% - 1px), #ececec calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #ececec calc(100% - 1px));
    background-size: 2.0rem 2.0rem;
    background-repeat: repeat;
    background-position: center center;
    background-color: #fff;
}

.flow-inner{
    margin: 0 auto;
    width: 97.7%;
    max-width: 1200px;
}

.flow-bg span{
    padding: 0.01em 0.5em;
    display: inline-block;
    background-image: linear-gradient(to right, #ed5097 0%, #f09c5a 100%);
}
.flowList{
    display: flex;
    justify-content: space-between;
}
.flowList:first-of-type{
    margin: 0 auto 1em;
}
.flowList li{
    position: relative;
    padding: 1em;
    width: 31%;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 1rem;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
}
.flowList li.first::before,
.flowList li.second::before,
.flowList li.third::before{
    content: '';
    position: absolute;
    top: -3%;
    left: 3%;
    background-image: url(../images/01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 19%;
    aspect-ratio: 77.7 / 79.4;
}
.flowList li.second::before{
    background-image: url(../images/02.svg);
}
.flowList li.third::before{
    background-image: url(../images/03.svg);
}
.flowIllust img{
    display: block;
    margin: 0 auto 1.2em;
    width: 66%;
    min-width: 182px;
}
.flowList h3{
    margin: 0 auto 0.6em;
    color: #e94f59;
    font-size: 2.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.flowList li a{
    font-size: inherit;
}
.flowList li .attention{
    margin: 0.5em 0 0;
    display: block;
    font-size: 88%;
    line-height: 1.35;
}
.flowAttention{
    padding-right: 1rem;
    margin-bottom: 4em;
    font-size: 85%;
    text-align: right;
}

/*******************
Q&A
********************/
.qa-inner{
    padding: 5em 1em 6em;
    background: url(../images/qa-bg.svg) center no-repeat;
    background-size: cover;
}
.qaList{
    margin: 0 auto;
    width: 97.7%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.qaList li{
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 1rem;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
}
.qaList h3,
.qaItem div{
    padding: 1rem 4rem 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1em;
}
.qaList div .mediacLink{
    font-size: inherit;
}
.qaList h3{
    position: relative;
    font-size: 1.8rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.35;
}
.qaList h3::before{
    content: 'Q.';
    color: #ed5295;
    font-size: 3.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    flex-shrink: 0;
}
.qaItem div::before{
    display: block;
    content: 'A.';
    color: #f09c5a;
    font-size: 3.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    flex-shrink: 0;
}
.qaList div{
    background: #fbf1df;
    border-radius: 0 0 1rem 1rem;
}
.qaItem div{
    padding: 0 4rem 0 1.5rem;
    opacity: 0;
    height: 0;
    transition: all 0.6s ease-in-out;
}
.qaItem div p,
.qaItem div::before{
    display: none;
    height: 0;
    transition: all 0.1s ease-in-out;
}
.qaItem.open div{
    padding: 1rem 4rem 1rem 1.5rem;
    display: flex;
    align-items: center;
    opacity: 1;
    min-height: 2em;
    height: auto;
}
.qaItem.open div p{
    display: block;
    height: auto;
}
.qaItem.open div::before{
    display: block;
    height: auto;
}
.qaItem h3::after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform-origin: 100% 100%;
    transform: translateY(-50%);
    background-image: url(../images/qa.svg), url(../images/qa-a.svg);
    background-size: contain, 0 0;
    background-repeat: no-repeat;
    width: 2.7rem;
    aspect-ratio: 1;
    transition: all 0.4s ease-in-out;
}
.qaItem.open h3::after{
    background-size: 0 0, contain;
}


/*******************
footer
********************/
.footer{
    color: #fff;
    padding: 3.4em 0 4em;
    background: #414172;
    text-align: center;
}
.footerMenu{
    margin: 0 auto 2em;
    display: flex;
    justify-content: center;
}
.footerMenu li::after{
    content: '｜';
    display: inline-block;
    padding: 0 0.2em;
}
.footerMenu li:last-of-type:after{
    content: '';
}

/*******************
CP
********************/
.cp.flow{
    padding: 2.6em 1em 4em;
}
.cp__inner{
    margin: 0 auto;
    width: 97.7%;
    max-width: 1000px;
}
.cp .title{
    margin: 0 auto 2.5em;
}
.cp__banner{
    margin: 0 auto 3.5em;
}
.cp__bannerSub{
    position: relative;
    color: #414172;
    font-size: 2rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    text-align: center;
}
.cp__bannerSub>span{
    display: inline-block;
}
.cp__bannerSub::before{
    content: '＼';
    display: inline-block;
    padding-right: 0.1em;
}
.cp__bannerSub::after{
    content: '／';
    display: inline-block;
    padding-left: 0.1em;
}
.titleSub__color{
    color: #414172;
}
.cpMerit__list{
    margin: 0 auto 4em;
    display: flex;
    justify-content: space-between;
}
.cpMerit__item{
    padding: 1.3em;
    width: 48%;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.5em;
    box-shadow: 1.1rem 1.1rem 0.8rem 0 rgba(0, 0, 0, 0.15);
}
.cpMerit__illust img {
    margin: 0 auto .5em;
    display: block;
    border-radius: .5em;
}
.cpMerit__plan{
    margin-bottom: .55em;
    display: flex;
    gap: .3em;
}
.cpMerit__planItem{
    padding: .1em 1em;
    color: #fff;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    border-radius: 5rem;
    background: #f48071;
}
.cpMerit__planItem.--free{
    background: #ed5f84;
}
.cpMerit__planItem.--paid{
    background: #f48071;
}

.cpMerit__title{
    margin-bottom: 0.35em;
    color: #414172;
    font-size: 2.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    text-align: center;
}
.cpMerit__text{
    color: #414172;
}
.cpMerit__text .attention{
    font-size: .85em;
}

.cpMerit__cpBox{
    position: relative;
    margin: 0 auto 4.5em;
    text-align: center;
}
.cpMerit__cpBoxMain{
    padding: 1.5em .6em .7em;
    color: #ed5f84;
    font-size: 2.4rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.35;
    background: #fff0b3;
}
.cpMerit__cpBoxMain .attention{
    font-size: 50%;
}
.cpMerit__cpBoxMain>span{
    display: inline-block;
}
.cpMerit__cpBoxSub{
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translateX(-50%);
    padding: .05em 1.2em;
    white-space: nowrap;
    color: #fff;
    font-size: 2.0rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    background: #ed5f84;
}
.cp__planBox img{
    pointer-events: none;
    min-width: 800px;
}

/*******************
下層
********************/
.under{
    background: #ffe6ea;
}
.under-inner{
    padding: 12em 1em 6em;
    background: url(../images/movie-bg.svg);
    background-repeat: no-repeat repeat;
    background-size: 105% auto;
    background-position: center;
}
.under-container{
    margin: 0 auto;
    width: 97.7%;
    max-width: 1000px;
}
.under-container.corporate{
    display: flex;
    flex-direction: column;
    max-width: 750px;
    border: 2px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.95);
}
.under-container.corporate dl{
    display: flex;
    line-height: 1.5;
}
.under-container.corporate dl dt{
    padding: 1.2em 1em;
    width: 38%;
    flex-shrink: 0;
    color: #fff;
    font-weight: 500;
    background: #ea7a88;
    border-bottom: 2px solid rgba(255,255,255,0.95);
}
.under-container.corporate dl dd{
    padding: 1.2em 1em;
    width: calc( 100% - 38%);
    border-bottom: 2px solid rgba(255,165,175,0.7);
}
.under-container.corporate dl.-last dd,
.under-container.corporate dl.-last dt{
    border-bottom: 2px solid rgba(255,255,255,0);
}
.under-container.corporate dl dd>ul{
    display: flex;
    flex-direction: column;
    gap: .6em;
    margin: 1.6rem auto;
    padding-left: 1.6rem;
}
.under-container.corporate dl dd>ul li::before{
    content: '・';
}
.underLead{
    margin: 0 auto 3rem;
}
.underList{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.underList>li h3,
.under h3{
    padding: 0.5em 0.5em 0.5em 0.6em;
    margin-bottom: 0.7em;
    color: #e94f59;
    font-size: 2.6rem;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    border-left: 5px solid #e94f59;
    background: rgba(255,255,255,0.9);
}
.under h4{
    margin: 0.5em auto;
    font-size: 120%;
    color: #e94f59;
    font-family: Arial, "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    line-height: 1.5;
}
.underList>li ul,
.underList>li ol{
    display: flex;
    flex-direction: column;
    gap: .6em;
    margin: 1.6rem auto;
    padding-left: 1.6rem;
    counter-reset: number 0;
}
.underList>li ul>li{
    text-indent: -.7em;
    padding-left: .7em;
    line-height: 1.5;
}
.underList>li ol>li{
    text-indent: -1.2em;
    padding-left: 1.2em;
    line-height: 1.5;
}
.underList>li ol.indent{
    padding-left: 3.2rem;
}
.underList>li ul>li::before{
    content: '-';
    padding-right: 0.3em;
}
.underList>li ol>li::before{
    counter-increment: number 1;
    content: counter(number) ".";
    padding-right: 0.3em;
}
.underList address{
    display: flex;
    flex-direction: column;
    gap: .3em;
    margin: 1.6rem auto;
}
.underList dl{
    display: flex;
    gap: .2em;
    line-height: 1.5;
}
.underList dt{
    flex-shrink: 0;
    font-weight: 500;
}
.underList dt::after{
    content: '：';
}
.mail::before{
    content: 'support@migakuriaito.com';
}
.right{
    text-align: right;
}
.at::before{
    content: '@';
}
.under .attention{
    display: block;
    margin-top: .5em;
    font-size: 88%;
    line-height: 1.5;
}

/*******************
ポップアップ
********************/
.popup{
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 20;
    width: 60%;
    max-width: 430px;
    box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.3);
    background: #fff;
}
.popup.delete{
    display: none;
}
.popup a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}
.popup a:after {
    content:"";
    width: 5rem;
    height:100%;
    position:absolute;
    top: -60rem;
    left: 0;
    background: #fff;
    opacity:0;
    transform: rotate(45deg);
    animation: reflection 4s ease-in-out infinite;
}
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
.popup a:hover{
    filter: brightness(100%);
    opacity: 0.7;
}
.popupDelete{
    display: block;
    position: absolute;
    top: -15px;
    right: 5px;
    z-index: 21;
    width: 30px;
    aspect-ratio: 1;
    background: #444;
    border: 2px solid #444;
    border-radius: 50%;
}
.popupDelete::after{
    content: '×';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
    color: #fff;
    font-size: 30px;
    line-height: 1;
}

.popup.signupBtn-box.-more{
    /* right: 50%;
    transform: translateX(50%); */
    width: 91%;
    max-width: 330px;
    background: none;
    box-shadow: none;
}
.popup.signupBtn-box.-more .signupBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.6rem 1.1em 1.7rem .9em;
    font-size: 2.6rem;
    color: #e94f59;
    background: #ffeb2e;
    border: .15em solid #fff;
}
.popup.signupBtn-box.-more .signupBtn>svg{
    display: inline-block;
    margin-right: 0.4em;
    width: 2.7rem;
    aspect-ratio: 1;
}
/* .popup.signupBtn-box.-more .signupBtn::before{
    content: '▶';
    display: inline-block;
    padding-right: .5em;
} */

.popupMove {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
    will-change: opacity, transform;
}

.popupMove.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.popup.cp{
    width: 40%;
}

@media (max-width: 1060px){
    html{
        font-size: 55%;
    }
}

@media (max-width: 960px){
    .mv-inner{
        min-height: 700px;
    }
    .signupBtn{
        font-size: 2.6rem;
    }
    .lineupText {
        height: 16em;
    }
}
@media (max-width: 860px){
    html{
        font-size: 50%;
    }
    .lineupExList{
        gap: 2rem  1.6rem;
    }
}
@media (max-width: 780px){
    .signupBtn{
        padding: 2.2rem 3rem 2.6rem 7rem;
    }
    .lineupExList {
        gap: 2rem 1rem;
    }
}
@media (max-width: 690px){
    html{
        font-size: 62.5%;
    }
    body{
        font-size: 1.4rem;
    }
    .mv-inner{
        background: url(../images/mv-bg_sp.svg) center no-repeat;
        background-size: cover;
        padding: 20% 1em 13em;
        width: 100%;
        height: 178.5vw;
        min-height: 162vw;
        max-height: none;
        aspect-ratio: 78 / 137;
    }
    .worry-inner{
        background: url(../images/worry-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .resolve-inner{
        background: url(../images/resolve-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .signup{
        background-image: url(../images/signup-bg_sp.png);
    }
    .point-inner{
        background: url(../images/point-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .lineup-inner{
        background: url(../images/lineup-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .movie-inner{
        background: url(../images/movie-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .plan-inner{
        background: url(../images/plan-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .qa-inner{
        background: url(../images/qa-bg_sp.svg) center no-repeat;
        background-size: cover;
    }
    .under-inner{
        background: url(../images/resolve-bg_sp.svg) center;
        background-size: 110% auto;
        background-repeat: no-repeat repeat;
        padding: 7em 1em 6em;
    }
    .header{
        top: 1%;
    }
    .headerBox{
        padding: 2% .6rem 1.8% 1.4rem
    }
    .headerBtn-signup a::before {
        top: -53%;
        left: -19px;
        background: url(../images/signup-easy.svg?date=250717) no-repeat;
        background-size: cover;
        width: 46%;
        aspect-ratio: 50.23 / 49.178;
    }

    .mv::before{
        top: 50%;
        right: 50%;
        transform: translate(65%,-81%);
        width: 97.7%;
        max-width: 882px;
        aspect-ratio: 1;
    }
    .mv h1{
        margin-bottom: 10%; 
    }
    .mv-outer{
        width: 97.7%;
        text-align: center;
    }
    .mvPoint {
        margin: 0 0 34%;
        width: 63.2%;
    }
    .mv::after {
        top: 41%;
        right: 50%;
        transform: translate(-30%, 0);
        width: 36.6%;
    }
    .mvTop-text{
        margin: 1em auto 1.2em;
        text-align: center;
        font-size: 3.4vw;
    }
    .mvBottom-text{
        margin: 0 auto;
        width: 92%;
    }

    .signup{
        padding: 10% 1em;
    }
    .signup.-box .signupBtn-box {
        margin: 0 auto 1.1em 0;
    }
    .signupBtn{
        padding: 1.6rem 14% 2.0rem 19%;
        font-size: 2.09rem;
    }
    .signupBtn img{
        top: -1.3em;
    }
    .signup-inner{
        padding: 70% 1.3em 5.5%;
        /* padding: 70% 1.3em 8%; */
    }
    .signup-inner::before{
        top: 34%;
        /* top: 29%; */
        right: 50%;
        width: 95%;
        transform: translate(50%,-55%);
    }
    .signupBtn-box.-more .signupBtn{
        padding: 1.8rem 9% 1.9rem;
    }
    .signupBtn-box.-more p{
        margin-bottom: 1.3rem;
    }

    .mediacLink,
    .mediacLink.-normal{
        font-size: 1.4rem;
    }

    .header{
        width: 95.7%;
    }
    .headerLogo{
        width: 40%;
        max-width: 180px;
    }
    .headerBtn{
        gap: 1.2em;
    }
    .headerBtn-login a,
    .headerBtn-signup a {
        padding: 0.7em 1em;
        font-size: 1.2rem;
        border-radius: 4em;
        height: 100%;
    }
    .headerBtn-login a span,
    .headerBtn-signup a span{
        vertical-align: middle;
    }
    .headerBtn-login {
        padding: 0.2rem;
        padding-bottom: 0.2rem;
    }
    .title {
        margin: 0 auto 2em;
    }
    .cp .title{
        margin: 0 auto 1.4em;
    }
    .title h1,
    .title h2,
    .worryTitle{
        font-size: 2.2rem;
    }
    .title p,
    .signupBtn-box.-more p,
    .cp__bannerSub{
        font-size: 1.3rem;
    }
    
    .worryContent,
    .resolveList,
    .resolveAbout,
    .pointList li,
    .lineupList,
    .lineupExList,
    .planList,
    .flowList,
    .footerMenu,
    .cpMerit__list{
        flex-direction: column;
    }

    .worry-inner,
    .point-inner,
    .lineup-inner,
    .movie-inner,
    .plan-inner,
    .flow,
    .qa-inner {
        padding: 2.8em 1em 3em;
    }
    .lineup-inner{
        padding-bottom: 4em;
    }


    .pointList li:nth-of-type(even){
        flex-direction: column;
    }
    .point-text h3,
    .underList>li h3{
        font-size: 1.8rem;
    }
    .point-photo{
        display: block;
        margin-bottom: 1rem;
        width: 108%;
        overflow: hidden;
        
    }
    .resolve-inner{
        padding: 3.8em 1em 2em;
    }
    .resolveList{
        margin-bottom: 3rem;
    }
    .resolveList li h3{
        margin: 0 auto .6rem;
        height: 2.9rem;
        width: auto;
    }
    .resolveList li h3 img{
        height: 100%;
        width: auto;
    }
    .title.-resolveAbout{
        margin: 0 auto .6rem;
    }

    .lineupList h3,
    .cpMerit__title{
        font-size: 2rem;
    }
    .lineupExList{
        margin: 0 auto 1.3em;
    }
    .lineupExList li h3{
        font-size: 2.1rem;
    }
    .cpMerit__cpBoxSub{
        font-size: 1.5rem;
    }
    .cpMerit__cpBoxMain{
        font-size: 1.7rem;
    }
    .recommendList li::before{
        width: 1.39rem;
    }
    .recommendList{
        font-size: 1.22rem;
    }
    .recommendBox p{
        width: 40%;
        max-width: 120px;
    }
    .recommendBox{
        align-items: center;
    }
    .lineupList{
        margin: 0 auto 4rem;
    }
    .lineupExList li h3>span{
        font-size: 1.2rem;
    }
    .lineupText{
        margin: 0 auto 1.4rem;
        height: auto;
    }

    .worry-inner::before{
        width: 4.2rem;
    }
    .worry-container{
        padding: 6% 3%; 
    }
    .worryList li{
        font-size: 1.4rem;
    }
    .worryTitle-sub{
        width: 100%;
        max-width: 296px;
    }
    .worryPhoto{
        width: 103%;
    }
    .signup-outer,
    .resolveList li,
    .resolveAbout-text,
    .resolveAbout-photo,
    .lineupList>li,
    .lineupExList li,
    .planList li,
    .flowList li,
    .cpMerit__item{
        width: 100%;
    }

    .resolveAbout-photo{
        width: 110%;
    }

    .resolveList,
    .lineupList,
    .flowList,
    .cpMerit__list{
        gap: 2.2rem;
    }
    .planList{
        width: 86.9%;
        min-width: 280px;
        gap: 3rem;
    }
    .movieList{
        gap: 1.4rem;
    }
    .movieList h3 span{
        font-size: 1.4rem;
    }
    .planList h3{
        font-size: 2rem;
    }
    .planList h3>img {
        top: -20%;
        right: 3%;
    }
    .planPrice>img{
        display: block;
        margin: 0 auto;
        height: 5.3rem;
        width: auto;
    }

    .flowList h3{
        font-size: 2.2rem;
    }
    .resolveList,
    .flowList{
        margin-right: auto;
        margin-left: auto;
        width: 88%;
        min-width: 280px;
    }
    .flowAttention{
        text-align: center;
    }
    .movieAttention{
        text-align: left;
    }

    .qaList{
        gap: 1rem;
    }
    .flowList li,
    .qaList li{
        box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.15);
    }
    .qaList h3{
        font-size: 1.4rem; 
    }
    .qaList h3::before,
    .qaItem.open div::before{
        font-size: 2.2rem;
    }
    .qaItem h3::after{
        width: 1.82rem;
        right: 1rem;
    }
    .qaItem.open div>p{
        font-size: 1.3rem;
    }

    .footer{
        padding: 2.4rem 0 6em;
    }
    .footerMenu{
        font-size: 1.3rem;
        gap: 1.4rem;
    }
    .footerMenu li::after{
        content: '';
    }

    .popup{
        position: fixed;
        bottom: 8px;
        right: 0;
    }
    .popupDelete{
        top: -13px;
        right: 5px;
        z-index: 21;
        width: 25px;
    }
    .popupDelete::after{
        font-size: 25px;
    }

    .popup.signupBtn-box.-more{
        bottom: 8px;
        right: 50%;
        transform: translateX(50%);
    }
    .popup.signupBtn-box.-more .signupBtn{
        padding: .8rem 1em .9rem;
        font-size: 1.8rem;
    }
    .popup.signupBtn-box.-more .popupDelete{
        top: -10px;
    }
    .popup.signupBtn-box.-more .signupBtn>svg{
        margin-right: 0.7em;
        width: 2.0rem;
    }
}
@media (max-width: 500px){
    .cp__bannerSub{
        margin-bottom: .5em;
    }
    .cp__bannerSub span{
        display: block;
        line-height: 1.4;
    }
    .cp__bannerSub::before{
        content: '';
        position: absolute;
        bottom: 1.2em;
        left: 13%;
        transform: rotateZ(45deg);
        display: block;
        width: 2.5em;
        border-bottom: 1px solid #414172;
    }
    .cp__bannerSub::after{
        content: '';
        position: absolute;
        bottom: 1.2em;
        right: 13%;
        transform: rotateZ(-45deg);
        display: block;
        width: 2.5em;
        border-bottom: 1px solid #414172;
    }
}
@media (max-width: 374px){
    html{
        font-size: 56%;
    }
}