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

    eveplena.css

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

/* common
========================================== */

html,body {
	width: 100%;
    margin: 0;
}
body {
  min-width: 1080px;
  overflow-x: hidden;
}
main,main img,main p,main div,main ul,main li,main a,main p,main dl,main dt,main dd {
    box-sizing: border-box;
    line-height: 1.8;
    letter-spacing: 0.05em;
}
body#eveplena main {
    font-family: 'Noto Sans JP', sans-serif;
    color: #313131;
}
body#eveplena main p,
body#eveplena main dt,
body#eveplena main dd,
body#eveplena main li,
section.tvcm h3,
.modaal-content {
}
main {
    color: #000;
    padding-bottom: 100px;
}
main strong {
    font-weight: normal;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
img,h1,h2,h3,p,li,a,div,span {
    transition: all .1s ease;
}
a:hover {
    opacity: 0.8;
}
section img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}
section img.lazyloaded {
  opacity: 1;
}

/* fv
========================================== */

.fv.pc {
    margin: 0 auto;
    position: relative;
    z-index: 3;
    background: #e3e3e5;
    width: 100%;
    height: 544px;
    overflow: hidden;
    margin-bottom: 100px;
}
.fv.pc h1 {
    margin: 150px 0 0 50px;
}
.fv.pc .inner {
    width: 1000px;
    height: 544px;
    display: table;
    position: absolute;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    left: 50%;
    right: 0;
    bottom: 0;
}
.fv.pc .inner.title:after {
    content: "";
    width: 951px;
    height: 835px;
    display: block;
    position: absolute;
    left: -30%;
    top: -20%;
    background: url(../images/fv_circle.png) no-repeat 0 0;
    z-index: -1;
}
.fv.pc .inner.pic {
    z-index: 2;
}
.fv.pc .logo {
    background: #fdd703;
    padding: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    bottom: 50px;
    position: absolute;
    bottom: 50px;
    z-index: 1;
}
.fv.pc .inner picture {
    position: absolute;
    bottom: 0;
    right: 70px;
    display: table;
}
.fv.pc .logo .wrap {
    width: 1000px;
    margin: 0 auto;
}
.fv.pc .logo .wrap img {
    margin: 0 0 0 120px;
}

/* ====================================== */
/* title */

section.qa {
    padding: 100px 0 0 0;
}

/* section */

section.about p {
    max-width: 1000px;
    margin: 0 auto 50px auto;
}

.youtube {
    margin: 0 auto 50px auto;
    max-width: 1000px;
    position: relative;
}
.youtube iframe {
    opacity: 0;
    transition: 2s;
}
.youtube iframe.lazyloaded {
    opacity: 1;
}
section.tvcm {
    padding: 100px 0 0 0;
}
section.tvcm h2 img,
section.about h2 img {
    margin: 0 auto 2em auto;
}
section.aremo {
    background: url(../images/bg_paper.jpg) repeat;
    height: 855px;
    position: relative;
    margin: 100px 0 200px 0;
}
section.aremo .inner {
    width: 1000px;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    left: 50%;
    right: 0;
}
section.aremo .inner picture {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
}
section.aremo .inner .text {
    background: rgba(255,255,255,0.9);
    padding: 3em 4em;
    position: relative;
    display: table;
    margin: 50px 0 0 0;
}
section.aremo .inner .text:after {
    content: "";
    display: table;
    width: 357px;
    height: 140px;
    background: url("../images/aremo_brush.png") no-repeat;
    position: absolute;
    left: -2em;
    top: 0;
    bottom: 0;
    margin: auto;
}
section.aremo .inner .text p {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
}
section.waku h2 img {
    margin: 0 auto 2.5em auto;
}
section.waku h3 {
    width: 506px;
    height: 127px;
    background: url("../images/waku_subtitle.png") no-repeat;
    margin: 0 auto 2.5em auto;
}
section.waku p {
    text-align: center;
}
section.waku .lead {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 auto 0.5em auto;
}
section.waku .sublead {
    font-size: 2.2rem;
}
section.kime {
    margin: 100px 0 250px 0;
}
section.kime .inner {
    background: url(../images/bg_paper.jpg) repeat;
    height: 1290px;
    position: relative;
    margin: 200px 0 150px 0;
}
section.kime .subinner {
    width: 1000px;
    position: relative;
    margin: 0 auto;
}
section.kime picture {
    display: block;
    position: relative;
}
section.kime picture.one {
    top: -150px;
}
section.kime picture.two {
    top: -120px;
}
section.kime h2 {
    width: 333px;
    height: 223px;
    background: url("../images/kime_title.png") no-repeat;
    text-indent: -999em;
}
section.option .titlewrap {
    margin-bottom: 1em;
}
section.option h2 {
    width: 478px;
    height: 223px;
    background: url("../images/option_title.png") no-repeat;
    text-indent: -999em;
}
section.option .text {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
section.option .series {
    width: 1000px;
    margin: 0 auto;
}
section.option .series ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 80px auto;
}
section.option .series ul li {
    width: 473px;
    position: relative;
    margin-bottom: 50px;
}
section.option picture.circle {
    margin: 0 auto 1em auto;
    display: table;
}
section.option .text p {
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: bold;
    padding-left: 1em;
}
section.option .series .photo {
    height: 100%;
    display: block;
    position: relative;
}
section.option .series .photo .ribbon {
    width: 157px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../images/option_ribbon.png") no-repeat;
    position: absolute;
    left: -10px;
    bottom: -10px;
}
section.option .series .photo .ribbon p {
    color: white;
    font-size: 2.5rem;
    position: relative;
    display: block;
    width: 70%;
    padding-right: 0.5em;
    text-align: center;
}
section.option .series .photo .ribbon p:before,
section.option .series .photo .ribbon p:after {
    content: "";
    background: white;
}
section.option .series .photo .ribbon p:before {
    width: 100%;
    height: 1px;
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: all .3s;
}
section.option .series .photo .ribbon p:after {
    width: 0.7em;
    height: 1px;
    display: inline-block;
    transition: all .3s;
    position: absolute;
    right: 0;
    transform: rotate(35deg);
    top: 1.5em;
}
section.option .series li .detail {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    background: rgba(255,255,255,0.9);
    height: 100%;
    padding: 2em;
    cursor: pointer;
    transition: all .5s ease;
}
section.option .series li .detail:hover {
    left: 0;
    opacity: 1;
}
section.option .series li .detail .title {
    text-align: center;
    color: white;
    background: url("../images/option_mouseon_bg.png") no-repeat center;
    background-size: contain;
    margin: 0 auto 1em auto;
    padding: 0.5em 3em;
    line-height: 1em;
    font-size: 2rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.option .series li .detail .sentence {
    background: white;
    padding: 1em;
    font-weight: 600;
    border-top: 2px dotted #008565;
    border-bottom: 2px dotted #008565;
}
section.option .series li .detail .sentence p span {
    position: relative;
    background: linear-gradient(transparent 60%, #ffe173 60%);
}
section.option .anshin {
    display: table;
    margin: 0 auto 30px auto;
}
section.option .click {
    display: none;
}
section.qa {
    width: 1000px;
    margin: 0 auto;
}
section.qa .titlewrap {
    margin-bottom: 3em;  
}
section.qa ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.3em; 
}
section.qa ul li:first-child {
    background: #b7d7d5;
}
section.qa ul li:first-child .q-text p {
    font-weight: bold;
    font-size: 2.3rem;
}
section.qa ul li:nth-child(2) {
    padding-bottom: 1em;
    border-bottom: 3px dotted #b7d7d5;
    margin-top: 1em;
    margin-bottom: 3em
}
section.qa ul li i {
    width: 60px;
    height: 60px;
    margin-right: 1.5em;
    display: table;
    flex-shrink: 0;
}
section.qa ul li:first-child i {
    background: url("../images/qa_q.png");
}
section.qa ul li:nth-child(2) i {
    background: url("../images/qa_a.png");
}
section.qa ul.coucil {
    margin-top: 1em;
    display: flex;
    justify-content: flex-start;
}
section.qa ul.coucil li {
    background: none;
    border: 1px solid #b7d7d5;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 1em;
    text-align: center;
}
section.qa ul.coucil li dt {
    font-size: 1.8rem;
}
section.qa ul.coucil li:first-child dd {
    font-size: 3rem;
    font-weight: bold;
    color: #ee501b;
    line-height: 1em;
}
section.qa ul.coucil li:nth-child(2) dd a {
    background: url(../images/qa_bg_council.png) no-repeat;
    background-size: 100% 100%;
    padding: 1.2em 1em;
    margin-top: 0.5em;
    line-height: 0;
    display: flex;
    align-items: center;
    color: white;
}
section.otameshiwig {
    display: table;
    margin: 0 auto;
}

/* ====================================== */
/* button */

.apply {
    transition: none;
    padding: 0 0 80px 0;
}
.apply a {
    text-indent: -999em;
    display: table;
    position: relative;
    top: 0;
    background-repeat: no-repeat;
}
.apply a:hover {
   top: 0.8em;
   opacity: 1;
}
.apply a {
    width: 520px;
    aspect-ratio: 260 / 71;
    margin: 0 auto;
    line-height: 0;
    background-image: url("../images/apply_btn.png");
}

/* common */

section h3 {
    background-repeat: no-repeat;
    margin: 0 auto;
    display: table;
    text-indent: -999em
}
section h2 {
    margin: 0 auto;
    display: table;
}


/* ====================================== */
/* media query */

@media screen and (max-width : 64em) {
	
    body {
        min-width: 1200px;
    }
    .fv h1 {
        display: block;
    }
    .ipad {
        display: block;
    }
    .sp {
        display: none;
    }
	.youtube {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
        max-width: initial;
        margin: 0 auto 2em auto;
	}
	.youtube iframe {
		position: absolute;
		top: 0;
		right: 0;
		max-width: 100% !important;
		width: 100% !important;
		height: 100% !important;
	} 
}

@media screen and (max-width : 42em) {
    /* common */
    body {
        min-width: 100%;
    }
    body,html {
        overflow-x: hidden;
    }
    .pc {
        display: none;
    }
	.sp {
		display: block;
	}
    .ipad {
        display: none;
    }
    section {
        padding: 10% 0;
    }
    main,img,p,div,ul,li,a,p,dl,dt,dd {
        line-height: 1.6;
        letter-spacing: 0em;
    }
    body#eveplena main {
        padding-bottom: 10%;
    }
    /* fv */
    .fv-sp {
        width: 100%;
    }
    
    /* section */
    
    section.tvcm h2 img,
    section.about h2 img {
        transform: scale(0.7);
        margin: 0 auto 1em auto;    
    }
    section.about p {
        padding: 0 5%;
        margin: 0 auto 5% auto;
    }
    section.tvcm,
    section.about {
        padding: 10% 0 0 0;
    }
    section.aremo {
        height: 25em;
        margin: 15% 0;
    }  
    section.aremo .inner picture {
        width: 75vw;
        right: 0vw;
    }    
    section.aremo .inner {
        width: 90%;
    }
    section.aremo .inner .text {
        margin: 0 0 0 0;
        top: -0.5em;
        left: 0;
        padding: 1em;
        position: absolute;
        border: 1px solid #d8e4d1;
    }
    section.aremo .inner .text:after {
        zoom: 0.5;
    }    
    section.aremo .inner .text p {
        font-size: 3.2vw;
    }   
    section.waku h2 img {
        margin: 0 auto 1.5em auto;
    }
    section.waku .titlewrap.big {
        padding: 0 5%;
    }    
    section.waku .titlewrap.small {
        padding: 0 20%;
    } 
    section.waku h3 {
        line-height: 0;
        margin-bottom: 1em !important;
    }
    section.waku h3 {
        padding-top: 29.5774647887%;
        background: url("../images/waku_subtitle_sp.png") no-repeat;
        margin: 0 auto 1.5em auto;
    }
    section.waku .lead {
        font-size: 5vw;
    }
    section.waku .sublead {
        font-size: 4vw;
        text-align: left;
        padding: 0 5%;
    }  
    section.kime {
        margin: 0 0 5% 0;
        padding: 0 0 10% 0;
    }    
    section.kime .inner {
        width: 100%;
        height: 50em;
        margin: 5em 0 10% 0;
    }
    section.kime .subinner {
        width: 90%;
    } 
    section.kime .titlewrap {
        width: 40vw;
        margin: 0 auto;
    }  
    section.kime h2 {
        padding-top: 66.8674698795%;
        background-image: url("../images/kime_title_sp.png");
    } 
    section.kime picture.one {
        top: -5em;
    }
    section.kime picture.two {
        top: -3em;
    }  
    section.option .titlewrap {
        width: 55vw;
        margin: 0 auto;
    } 
    section.option h2 {
        padding-top: 46.4435146444%;
        background-image: url("../images/option_title_sp.png");
    }
    section.option picture.circle {
        width: 65vw;
    }  
    section.option .text p {
        font-size: 4vw;
    }   
    section.option .text picture {
        width: 30vw;
    }   
    section.option .series {
        width: 85%;
    }
    section.option .series ul {
        margin: 10% auto 5% auto;
    }    
    section.option .series .photo .ribbon {
        zoom: 0.7;
    } 
    section.option .series .photo .ribbon p {
        font-size: 5vw;
        padding-bottom: 0.2em;
    }
    section.option .series .photo .ribbon p:after {
        width: 0.5em;
    }
    section.option .series li .detail .title {
        font-size: 4vw;
    }
    section.option .series li .detail .sentence p {
        font-size: 3.5vw;
    }    
    section.option .anshin {
        width: 90%;
        margin: 0 auto 5% auto;
    }
    section.option .click {
        position: absolute;
        top: 0;
        right: 0;
        display: table;
        background: rgba(255,255,255,0.8);
        padding: 1em;
        border: 1px solid #92afbb;
        height: 1em;
        z-index: 2;
    }   
    section.option .click p {
        color: #405a64;
    }    
    section.qa {
        width: 90%;
        padding: 0 0 0 0;
    }
    section.qa .titlewrap {
        margin: 0 auto 3em auto;
        width: 50vw;
    }
    section.qa ul li:first-child .q-text p {
        font-size: 4vw;
    } 
    section.qa ul li i {
        zoom: 0.6;
    }
    section.qa ul li {
        padding: 1em;
    }  
    section.qa ul li:nth-child(2) {
        margin-top: 0;
        margin-bottom: 2em;
    }
    section.qa ul.coucil {
        flex-direction: column;
        margin: 1em 0 0 0;
    }  
    section.qa ul.coucil li {
        display: table;
    }    
    section.qa ul.coucil li:first-child {
        margin-bottom: 1em;
    }
    section.qa ul.coucil li:nth-child(2) {
        margin-bottom: 0;
    }
    section.qa ul.coucil li:first-child dd a {
        color: #ee501b;
    } 
    section.qa ul.coucil li:nth-child(2) dd a {
        justify-content: center;
    } 
    section.otameshiwig {
        width: 90%;
    }
    
    /* button */
    
    .apply {
        width: 90%;
        margin: 0 auto;
        padding: 0 0 5% 0;
    }
    .apply a {
        background-image: url("../images/apply_btn_sp.png");
        padding-top: 24.2343541944%;
    }
    
    /* section common */
    
    section.qa h2,
    .apply a,
    section.waku h3,
    section.kime h2,
    section.option h2 {
        width: 100%;
        height: 0;
        margin-bottom: 0.5em;
        background-size: contain;
        background-repeat: no-repeat;
        line-height: 0;
    }    
    
    
    

}