@charset "UTF-8";
/* CSS Document */

.lower-layer{
background-color: #fcecdb;
}
.lower-layer .contents header{
position: relative;

}
.lower-layer .contents header .lineup-animation{
position: relative;
margin: 0 auto;
width: 80%;
}

.lower-layer .contents header .mokuba-animation {
position: absolute;
display: block;
width: 16vw;
line-height: 1;
height: 100%!important;
top:2%;
left: 5%;
padding: 0;
margin: 0;
background: url("../images/logo-animation.png") no-repeat;
background-size: 80vw auto;
animation: mokuba-animation-02 4s steps(5) infinite;
}
@keyframes mokuba-animation-02 {
to {
background-position: -80vw 0;
}
}
.lower-layer header .image-box{
padding: 10% 10% 5%;
}

h2{
font-family: "Jost", sans-serif;
font-weight: 400;
font-size: 2em;
text-align: center;
line-height: 1;
padding-bottom: 2%;
color: #87bdbc;
margin-top: 0;
}

.sub-title-jp{
font-size: 80%;
text-align: center;
margin-bottom: 8%;
}

section.item-wrap{
width: 100%;
padding:8% 0;
}

.point-wrap{
display: flex;
flex-wrap: wrap;
margin-bottom: 10%;
}
.point-wrap .image-box{
width: 50%;
}
.point-wrap .image-box img{
display: block;
}
.point-wrap .text-box{
position: relative;
width: 50%;
border-radius: 20px;
font-size: .8em;
}
.point-wrap .text-box p{
position: absolute;
width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
word-wrap: break-word;
}
.point-wrap .text-box a{
border-bottom: dotted 1px #717171;
}
.ending .text-box a{
border-bottom: dotted 1px #717171;
}
.point-wrap.sax .text-box{
background-color: #d7ebea;
}
.point-wrap.sax .text-box span{
color: #87bdbc;
border-color: #87bdbc; 
}
.point-wrap.coral .text-box{
background-color: #f3cdc5;
}
.point-wrap.coral .text-box span{
color: #d88878;
border-color: #d88878; 
}
.point-wrap.mustard .text-box{
background-color: #f4dca5;
}
.point-wrap.mustard .text-box span{
color: #d8af56;
border-color: #d8af56; 
}

.point-wrap.sax .image-box img{
border-radius: 20px 0 0 20px;
}
.point-wrap.coral .image-box img{
border-radius: 0 20px 20px 0;
}
.point-wrap.mustard .image-box img{
border-radius: 20px 0 0 20px;
}

.ending .text-box{
padding: 8%;
padding-bottom: 0;
text-align: justify;
}
#cta .image-box{
padding: 0 10%;
}
#cta .image-box.stroke .border.top,
#cta .image-box.stroke .border.right,
#cta .image-box.stroke .border.bottom,
#cta .image-box.stroke .border.left{
border: 1px solid #e0c6a9
}
.lower-layer .cta-wrap .lineup-animation{
position: relative;
margin: 0 auto 5%;
width: 70%;
}

#cta .text-box{
padding: 10% 0 0;
}

.price {
text-align: center;
font-size: 1.2em;
letter-spacing: 2px;
padding: 3% 0 0;
}
.color{
margin: 8% 0 12%;
width: 100%;
text-align: center;

}
.color th{
font-size: 1.1em;
vertical-align: middle;
width: 35%;
text-align: left;
padding: 5% 0;
border-top: 1px solid #e0c6a9;
border-bottom: 1px solid #e0c6a9;
}
.color td{
padding: 5% 0;
border-top: 1px solid #e0c6a9;
border-bottom: 1px solid #e0c6a9;
}
.color span{
vertical-align: middle;
text-align: left;
line-height: 1;
}
.color span img{
width: 20px;
padding-left: 3%;
}
#cta .text-box a{
position: relative;
display: block;
margin: 0 auto 8%;
max-width: 400px;
}
.back-to-top a{
position: relative;
display: block;
margin: 0 auto 8%;
max-width: 280px;
}
#cta h3{
padding-top: 10%;
font-size: 1.8em;

}
#cta .text-box a span,
.back-to-top a span{
position: relative;
display: block;
background-color: #da8977;
color: #fff;
padding: 8% 0;
text-align: center;
line-height: 1;
font-size: 1.2em;
font-weight: 700;
width: 100%;
border-radius: 20px;
}
#cta .text-box a img{
position: absolute;
right: 0;
}
#cta .text-box a span{
line-height: 1.4;
}
.active{
opacity: 0.3;
}
.back-to-top a span{
background-color: #fff;
color: #717171;
font-weight: 400;
}

@media screen and (min-width:480px) {

section#cta{
padding-top: 0;
}
.wrapper{
font-size: 120%;
}
.item-wrap{
font-size: 1em;
}
#cta h3{
font-size: 2em;
}
#cta .text-box a{
font-size: 120%;
}
#cta .text-box a span{
line-height: 1;
}
#cta .text-box a span br{
display: none;
}
}
@media screen and (min-width:768px) {
.wrapper{
background: linear-gradient(90deg, #f3cdc5 0%, #f3cdc5 50%, #d7ebea 50%, #d7ebea 100%);
}
.lower-layer .contents header .mokuba-animation{
width: 12vw;
background-size: 60vw auto;
}
@keyframes mokuba-animation-02 {
to {
background-position: -60vw 0;
}
}
.pc-nav{
font-size: medium;
}
.contents{
background-color: #fcecdb;
width: 600px;
margin: 0 auto;
overflow-x: hidden;
}
}
@media screen and (min-width:1080px) {
.lower-layer .contents header .logo{
display: none;
}
}