@charset "UTF-8";
/* =======================================

    evepremier_tiara.css

========================================== */

/* common
========================================== */
html,body {
	width: 100%;
    margin: 0;
}
#evepremier_tiara main,#evepremier_tiara img,#evepremier_tiara p,#evepremier_tiara div,#evepremier_tiara ul,#evepremier_tiara li,#evepremier_tiara a,#evepremier_tiara p,#evepremier_tiara dl,#evepremier_tiara dt,#evepremier_tiara dd {
    box-sizing: border-box;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-weight: 500;
}
body#evepremier_tiara main {
    font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;	
	font-style: normal;
    color: #474747;
    padding-top: 60px;
    padding-bottom: 0;
    font-size: 16px;
}
main {
    color: #5F5E5E;
    padding-top: 0;
}
main strong {
    font-weight: normal;
}
a {
    outline: 0;
}
img, h1, h2, h3, p, li, a, span, ul {
    transition: all .6s;
}
.pc {
    display: none;
}
.sp {
    display: block;
}
main img,
section img {
  opacity: 0;
}
main img {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;  
}
section {
    padding-block-end: 2.5em;
}
section img {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;  
}
main img.lazyloaded,
section img.lazyloaded {
  opacity: 1;
}
.switch{
  visibility:hidden;
}
#container {
    display: grid;
    grid-template-columns: 1fr;
}
picture {
    display: table;
}
.note p,
span.note {
    font-size: 11px;
    line-height: 1.5 !important;
    margin: 0 auto;
    display: table;
    color: #404040;
}
span.note {
    text-align: left;
    margin: 0 0 0 0;
}
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    max-width: initial;
    margin: 0 auto 0 auto;
	background: white;
}	
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}
/* modaal */
.window {
    display: none;
}
.modaal-container picture {
    display: table;
    top: 0;
    position: relative;
    margin: 0 auto;
}
.modaal-noscroll {
    overflow: visible !important;
}
/* fv
========================================== */
.fv {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #ddf1f5;
}
.fv h1 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
}
main .inner {
    padding: 0 15px;
}

/* cvbtn
========================================== */
.cvbtn {
    display: table;
    position: relative;
}
.cvbtn.fv {
    position: static;
    padding-block: 15px;
    background: url(../images/cvbtn_fv_bg.jpg) center / cover no-repeat;
}
.cvbtn img {
    transition: transform .4s ease;
}
.cvbtn img:hover {
    transform: scale(1.05);
}
.cvbtn.cta {
    z-index: 2;
    margin: 0 auto -3% auto;
    transform: translateY(-50%);
}
.cvbtn.cta img {
    width: 100%;
}
.cvbtn.middle {
    margin-bottom: 1em;
}
.cvbtn.pamph {
    margin: 1em auto 0 auto;
}
.cvbtn.pamph.style {
    margin-bottom: 3em;
    margin-top: 1em;
}
.cvbtn.pamph.style2 {
    margin-bottom: 0;
    margin-top: 1em;
}
main .buttons a:hover {
    opacity: 0.7;
}

/* section
========================================== */
/* common */
section {
    position: relative;
}
section.movie-tiara {
    padding-block-start: 2.5em;
    padding-block-end: 6em;
}
.cta-inner {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    justify-content: center;
    margin: 15px auto 0 auto;
}
.cta-inner .bg {
    position: relative;
}
.cta-inner picture {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}
.movie-title {
    margin-bottom: 1em;
}
.whitebox {
    background: white;
    padding: 15px;
    margin: 0 auto 30px auto;
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}
/* onayami */
section.onayami,
section.onayami .titlewrap {
    background-color: #C5EBF6;
}
section.onayami h2 {
    position: relative;
    top: -3em;
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -3em;
}
/* front */
section.front {
    background: url(../images/fc_bg_sp.webp) center top / 100% auto repeat-y;
    padding-block-end: 7em;
}
section.front .arrow,
section.funwari .arrow {
    position: relative;
    top: -1.5em;
    margin-right: auto;
    margin-left: auto;
    display: table;
}
section.front h2,
section.funwari h2,
section.style h2,
section.flow h2,
section.qa h2 {
    text-align: center;
    margin: 0 auto 1em auto;
}
.koko {
    position: absolute;
    top: -3em;
}
.check.whitebox {
    margin-top: 5em;
}
.check.whitebox {
    margin-top: 4.5em;
    padding: 20px 15px 15px 15px;
}
section.front picture.sp-que {
    margin-bottom: 1em;
}
section.front picture.sp-que {
    position: relative;
    top: -1.5em;
    margin-bottom: -0.25em;
}
section.front picture.sp-ans {
    margin-top: 1em;
}
.que-answer.whitebox {
    margin-top: 2em;
}
/* note-section */
section.note-section {
    position: relative;
    top: -7em;
}
section.note-section.top0 {
    top: 0;
    margin-top: 2em;
    margin-bottom: 2em;
}
/* funwari */
section.funwari {
    background: url(../images/funwari_bg_sp.jpg) center top / cover no-repeat;
    padding-block-end: 7em;
}
section.funwari ul {
    display: flex;
    flex-flow: column;
    margin-bottom: 30px;
}
section.funwari ul li {
    position: relative;
    margin: 0 auto;
}
section.funwari ul li:nth-child(2) {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.funwari ul li:nth-child(2) img {
    width: 25px;
}
section.funwari .arrow {
    margin-bottom: -1.5em;
}
/* omakase */
section.omakase {
    background: url(../images/omakase_bg_sp.webp) center bottom / 100% auto no-repeat;
    padding-block-end: 0;
}
section.omakase .o-inner {
    background: #C5EBF6;
    border-radius: 10px;
    position: relative;
    margin: 0 auto -8em auto;
    padding: 10px 10px 50px 10px;
    top: -4em;
}
section.omakase .o-inner h2 {
    position: relative;
    margin: 0 auto;
    top: -1em;
    margin-bottom: 0;
}
section.omakase .o-inner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
section.omakase .o-inner li:first-child {
    width: 100%;
    display: table;
    margin: 0 auto;
}
section.omakase .o-inner li:nth-child(2),
section.omakase .o-inner li:nth-child(3) {
    display: inline-block;
    margin: 0 auto;
    width: calc(100% / 2);
}
section.omakase .last {
    position: relative;
    display: table;
    margin: 0 auto;
}
section.omakase .last .balloon {
    position: absolute;
    right: 0;
    bottom: 0;
}
/* style */
section.style {
    background: #ECF9FF url(../images/style_bg_sp.webp) center top / 100% auto no-repeat;
    padding-block-start: 2.5em;
}
section.style picture {
    display: table;
}
section.style .before-sp {
    display: table;
    margin: 0 auto 15px auto;
}
section.style ul {
    display: flex;
    width: 90%;
    margin: 0.6em auto 0 auto;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
    font-size: 13px;
}
section.style .style-flex {
    display: flex;
    gap: 15px;
    flex-flow: column;
}
section.style .case.one {
    margin-bottom: 2em;
}
section.style .case.two .style-flex-inner.two {
    order: 1;
}
section.style .case.two .style-flex-inner.one {
    order: 2;
}
section.style p.caption {
    font-size: clamp(14px, calc(9.8214px + 1.0714vw), 20px);
    text-align: center;
    margin: 1em auto 1em auto;
}
/* flow */
section.flow,
section.qa {
    padding-block-start: 2.5em;
}
section.flow h2 {

}
section.flow .block {
    background: #DFEFEE;
    display: flex;
    flex-flow: column;
    gap: 15px;
    padding: 18px;
    margin: 0 auto 2em auto;
}
section.flow ul li:nth-child(2) .block {
    margin: 0 auto 0 auto;
}
section.flow ul li:nth-child(2) .block.last {
    margin: 0 auto 20px auto;
}
section.flow ul li h3 {
    display: table;
    margin: 0 auto 0.5em auto;
}
section.flow ul li picture {
    display: table;
    width: 80%;
    margin: 0 auto 0 auto;
}
section.flow ul li h4 {
    color: #1C8FA1;
    font-size: 17px;
    font-weight: 500;
    margin: 0 auto 0.5em auto;
    text-align: center;
    line-height: 1;
}
section.flow ul li p.normal {
    font-size: 14px;
    line-height: 1.5;
}
section.flow ul li .note p {
    margin: 0 auto 1em auto;
}
section.flow ul li:first-child .text {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
/* qa */
section.qa {
    background: #DBEEEE;
}
section.qa dl {
    margin-bottom: 1.5em;
}
section.qa dl:last-of-type {
    margin-bottom: 0;
}
section.qa dl dt,
section.qa dl dd {
    line-height: 1.5;
    padding: 15px;
}
section.qa dl dt {
    background: #4D858B;
    border-radius: 10px 10px 0 0;
}
section.qa dl dd {
    background: white;
    border-radius: 0 0 10px 10px;
}
section.qa dl dt p {
    color: white;
    font-weight: 600;
    font-size: 15px;
}
section.qa dl dd p {
    font-size: 14px;
}
section.qa dl dt p,
section.qa dl dd p.first {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
section.qa dl dt p:before,
section.qa dl dd p.first:before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline;
    margin-right: 10px;
    flex-shrink: 0;
}
section.qa dl dt p:before {
    background: url(../images/qa_q_pc.png) left / 100% 100% no-repeat;
}
section.qa dl dd p.first:before {
    background: url(../images/qa_a_pc.png) left / 100% 100% no-repeat;
}
section.qa dl:nth-of-type(3) p.first {
    margin-bottom: 1em;
}
section.qa dl:nth-of-type(3) ul li:first-child {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}
section.qa dl:nth-of-type(3) ul li:first-child picture {
    flex: 65;
    padding-right: 0.5em;
}
section.qa dl:nth-of-type(3) ul li:first-child .second {
    flex: 253;
}
section.qa dl:nth-of-type(3) ul li:first-child p.title {
    display: table;
    color: #2D6A71;
    font-weight: 600 !important;
    font-size: 15px;
}
section.qa dl:nth-of-type(3) ul li:nth-child(2) p {
    margin: 1em 0;
}
section.qa dl:nth-of-type(4) .council {
    margin-bottom: 0.5em;
}

section.qa dl:nth-of-type(4) .council, section.qa dl:nth-of-type(4) .salon-lineup {
    width: 80%;
}
section.qa dl:nth-of-type(4) .tel {
    width: 80%;
    margin-bottom: 0.5em;
}
section.qa dl:nth-of-type(4) .tel, section.qa dl:nth-of-type(4) .council, section.qa dl:nth-of-type(4) .salon-lineup {
    margin-right: auto;
    margin-left: auto;
}

/* タブレット以上 */
@media (min-width: 768px) {
    /* common */
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
    main .inner {
        padding: 0 5%;
    }
    .note p,
    .span note {
        font-size: 12px;
    }
    body#evepremier_tiara main {
        padding-top: 100px;
    }
    /* fv */
    .fv {
        height: auto;
        max-height: none;
        /* aspect-ratio: 1536 / 753; */
        margin: 0 auto;
        background: transparent;
    }
    .fv h1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* cvbtn */
    .cvbtn.fv {
        width: 45%;
        background: none;
        position: absolute;
        bottom: 5.5%;
        left: 1.5%;
        padding: 0;
    }
    .cvbtn.cta {
        width: 60%;
    }
    .cvbtn.pamph.style {
        margin-top: 4em;
    }    
    .cvbtn.pamph.style2 {
        margin-top: 2em;
    }
    /* section */
    /* common */
    section {
        padding-block-end: 60px;
    }
    section.movie-tiara {
        padding-block-start: 60px;
        padding-block-end: 8em;
    }
    .cta-inner {
        background: url(../images/wakucp_footer_bg_pc.png) top center / 100% 100% repeat-x;
        padding: 0 5%;
        margin: 30px auto 0 auto;
    }
    .cta-inner .bg {
        display: none;
    }
    .cta-inner picture {
        position: relative;
        margin: 0 auto;
    }
    .whitebox {
        border-radius: 15px;
    }
    /* onayami */
    section.onayami h2 {
        top: -4em;
        margin-bottom: -3em;
    }
    section.onayami picture {
        padding: 0 5%;
    }
    /* front */
    section.front {
        background: url(../images/fc_bg_pc.webp) center top / 100% auto repeat-y;
    }
    section.front .arrow,
    section.funwari .arrow {
        top: -2em;
        margin-bottom: -1em;
    }
    .koko {
        right: 0;
        top: -3em;    
    }
    .check.whitebox {
        display: table;
        left: -10px;
        margin-right: -10px;
        padding: 30px 15px 15px 15px;
    }
    section.front .illust-and-check {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }
    picture.anspic, figure.pc-ans {
        position: absolute;
        bottom: 15px;
    }
    figure.pc-ans {
        right: 15px;
    }
    .que-answer.whitebox {
        margin-top: 6em;
    }
    /* note-section */
    .cvbtn.middle,
    .cvbtn.pamph {
        width: 70%;
        margin-right: auto;
        margin-left: auto;
    }
    section.note-section {
        top: -5em;
        margin-bottom: 2em;
    }
    /* omakase */
    section.omakase {
        background: url(../images/omakase_bg_pc.webp) center bottom / 100% auto no-repeat;
        padding-block-start: 40px;
    }
    section.omakase .last {
        display: flex;
        align-items: flex-end;
    }
    section.omakase .o-inner {
        padding: 20px 20px 70px 20px;
    }
    section.omakase .o-inner ul {
        flex-wrap: nowrap;
        gap: 10px;
    }
    section.omakase .o-inner li:first-child,
    section.omakase .o-inner li:nth-child(2),
    section.omakase .o-inner li:nth-child(3) {
        width: calc(100% / 3);
    }  
    section.omakase .o-inner {
        top: -5em;
    }  
    section.omakase .o-inner h2 {
        top: -2em;
        margin-bottom: -1em;
    }
    /* funwari */
    section.funwari {
        background: url(../images/funwari_bg_pc.jpg) center top / 100% auto repeat-y;
    }
    section.funwari ul {
        flex-flow: initial;
        align-items: center;
        margin-bottom: 50px;
    }
    section.funwari ul li:first-child:after {
        content: none;
    }
    section.funwari ul li:nth-child(2) {
        margin-top: 0;
    }
    /* style */
    section.style {
        background: #ECF9FF url(../images/style_bg_pc.webp) center top / 100% auto repeat-y;
        padding-block-start: 60px;
    }
    section.style .style-flex {
        flex-flow: initial;
        align-items: flex-end;
        gap: 20px;
    }
    section.style .case.one {
        margin-bottom: 70px;
    }
    section.style .style-flex {
        gap: 20px;
    }
    section.style .case.one .style-flex-inner.one,
    section.style .case.two .style-flex-inner.two {
        flex: 460;
    }
    section.style .case.one .style-flex-inner.two,
    section.style .case.two .style-flex-inner.one {
        flex: 420;
    }
    section.style ul {
        width: 100%;
        margin: 1em auto 0 auto;
    }
    section.style .before-pc {
        margin-bottom: 1em;
    } 
    section.style ul li figure {
        position: relative;
    }   
    section.style ul li figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2em;
    }  
    section.style .case.two .style-flex-inner.two {
        order: 2;
    }
    section.style .case.two .style-flex-inner.one {
        order: 1;
    }
    section.style p.caption {
        margin: 1em auto 3em auto;
    }
    /* flow */
    section.flow,
    section.qa {
        padding-block-start: 60px;
    }
    section.flow .block {
        flex-flow: initial;
        align-items: center; 
        gap: 10px;
        justify-content: space-between;
    }
    section.flow ul li h4 {
        text-align: left;
        font-size: 20px;
    }
    section.flow ul li p.normal {
        font-size: 14px;
    }
    section.flow ul li:first-child .text {
        width: auto;
        margin: 0 0 0 0;
        text-align: left;
    }
    section.flow ul li picture {
        flex: 364;
        padding-right: 1em;
    }
    section.flow ul li .text {
        flex: 450;
    }
    section.flow ul li p.tel {
        display: table;
        width: 70%;
    }
    section.flow ul li .note p {
        margin: 0 0 1em 0;
    }
    section.flow ul li:nth-child(2) .block.last {
        padding: 0 18px 18px 18px;
        margin: 0 auto 60px auto;
    }
    /* qa */
    section.qa dl dt, section.qa dl dd {
        padding: 20px;
    }
    section.qa dl dd p.first {
        font-size: 16px;
    }
    section.qa dl:nth-of-type(3) ul li:first-child picture {
        flex: 134;
        padding-right: 1em;
    }
    section.qa dl:nth-of-type(3) ul li:first-child .second {
        flex: 717;
    }
    section.qa dl:nth-of-type(3) ul li:first-child {
        margin-bottom: 1.5em;
    }
    .contact-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 1em;
    }
    section.qa dl:nth-of-type(4) .tel,
    section.qa dl:nth-of-type(4) .council,
    section.qa dl:nth-of-type(4) .salon-lineup {
        margin-bottom: 0;
        width: auto;
        margin: 0 0 0 0;
    }
    section.qa dl:nth-of-type(3) ul li:first-child p.title {
        font-size: 18px;
        margin-bottom: 0.5em;
    }
    section.qa dl:nth-of-type(3) ul li:first-child p.title span {
        font-size: 80%;
    }
        
}

/* PC以上 */
@media (min-width: 1025px) {
    /* common */
    main .inner,
    section.onayami picture {
        padding: 0 0;
        max-width: 950px;
        margin: 0 auto;
    }
    /* fv */
    .cvbtn.fv {
        width: 41.5%;
    }
    /* cvbtn */
    .cvbtn.cta {
        width: auto;
        margin: 0 auto -2% auto;
    }
    .cvbtn.pamph.style {
        margin-bottom: 5em;
    }
    /* section */
    /* common */
    section {
        padding-block-end: 100px;
    }
    section.movie-tiara {
        padding-block-start: 100px;
        padding-block-end: 12em;
    }
    /* onayami */
    section.onayami {
        padding-block-end: 60px;
    }
    section.onayami h2 {
        top: -5em;
        margin-bottom: -4em;
    }
    /* front */
    section.front .arrow,
    section.funwari .arrow {
        margin-bottom: 0;
    }
    section.front h2,
    section.funwari h2,
    section.style h2,
    section.flow h2,
    section.qa h2 {
        margin: 0 auto 2em auto;
    }
    section.front .illust-and-check {
        margin-bottom: 60px;
    }
    .check.whitebox {
        display: table;
        left: -25px;
        margin-right: 0;
        padding: 40px 15px 15px;
    }
    .koko {
        top: -4em;
    }
    .que-answer.whitebox {
        margin-top: 8em;
    }
    /* note-section */
    .cvbtn.middle,
    .cvbtn.pamph {
        width: auto;
    }
    section.note-section {
        top: -5em;
        margin-bottom: 6em;    
    }
    section.note-section.top0 {
        margin-bottom: 6em;
    }
    /* omakase */
    section.omakase {
        padding-block-start: 80px;
    }
    section.omakase .o-inner {
        top: -8em;
        margin: 0 auto -11em auto;
    }    
    /* funwari */
    section.funwari {
        padding-block-end: 150px;
    }
    section.funwari ul {
        margin-bottom: 80px;
    }
    /* style */
    section.style,
    section.flow,
    section.qa {
        padding-block-start: 100px;
    }
    section.style .style-flex {
        gap: 40px;
    }
    section.style ul {
        width: 100%;
    }
    section.flow ul li h4 {
        margin: 0 0 0.8em 0;
        font-size: 25px;
    }
    section.flow .block {
        padding: 40px;
    }
    section.flow ul li:nth-child(2) .block.last {
        padding: 0 40px 40px 40px;
    }
    section.flow ul li picture {
        padding-right: 0;
    }
    section.flow ul li p.normal {
        font-size: 16px;
    }
    /* qa */
    section.qa dl dt p {
        font-size: 22px;
    }
    section.qa dl dt p:before,
    section.qa dl dd p.first:before {
        width: 50px;
        height: 50px;
    }
}