body {
font-size: 16px;
font-family: "Hiragino Kaku Gothic Std","ヒラギノ角ゴ Std W5","游ゴシック",sans-serif;
color: #000;
line-height: 1.2;
background-color: #fff;
} header{
width: 100%;
}
.header-inner-sp {
width: 100%;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .header-inner-sp {
width: 100%;
}}
@media screen and (min-width:1080px) { .header-inner-sp {
display: none;
}}
.header-logo-sp {
width: 70%;
max-width: 409px;
max-height: 90px;
display: block;
margin: 10px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .header-logo-sp {
width: 80%;
max-width: 409px;
max-height: 90px;
display: block;
margin: 25px auto 0;
}}
@media screen and (min-width:1080px) { .header-logo-sp {
display: none;
}}
.header-inner-pc {
display: none;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .header-inner-pc {
display: none;
}}
@media screen and (min-width:1080px) { .header-inner-pc {
width: 100%;
height: 145px;
display: flex;
justify-content: space-between;
margin: 0 auto;
}}
.header-logo-pc {
width: 100%;
max-width: 409px;
max-height: 90px;
margin: 35px 0 0 12%;
} nav {
margin-right: 0%;
}
@media screen and (min-width:600px) and ( max-width:1079px) { nav {
margin-right: 0%;
}}
@media screen and (min-width:1080px) { nav {
margin-right: 2%;
}}
nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
margin: 20px 0 20px 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 19px;
line-height: 1.4;
font-weight: 500;
padding-bottom: 10px;
margin: 40px 0 20px 0;
}}
@media screen and (min-width:1080px) { ul li{
display: inline-block;
font-size: 19px;
line-height: 1.4;
font-weight: 500;
margin: 80px 20px  0;
padding-bottom: 10px;
}}
li {
list-style-type: none;
flex-grow: 1;
text-align: center;
}
li + li {
border-left: 1px solid #e1e1e1;
}
@media screen and (min-width:1080px) { li + li {
border-left: 0px solid #e1e1e1;
}}
nav ul li a {
position: relative;
}
nav ul li a::after{
position: absolute;
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #41bdbd;
bottom: -14px;
left: 0; -webkit-transform: scale(0, 1);
transform: scale(0, 1); -webkit-transform-origin: center top;
transform-origin: center top; -webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
@media screen and (min-width:1080px) { nav ul li a::after{
position: absolute;
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #41bdbd;
bottom: -14px;
left: 0; -webkit-transform: scale(0, 1);
transform: scale(0, 1); -webkit-transform-origin: center top;
transform-origin: center top; -webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}}
nav ul li a:hover::after { transform: scale(1, 1);
} .mainvisual-sp {
width: 100%;
}
@media screen and (min-width:1080px) { .mainvisual-sp {
display: none;
}}
.mainvisual-img-sp {
width: 100%;
display: block;
margin: 0 auto;
}
.mainvisual-pc {
width: 100%;
}
@media screen and (min-width:1px) and ( max-width:1079px) { .mainvisual-pc {
display: none;
}}
.mainvisual-img-pc {
width: 100%;
display: block;
margin: 0 auto;
} .wrapper {
width: 100%;
max-width: 1080px;
padding: 0 1% 0 1%;
display: block;
margin: 0 auto;
} .info-erea {
max-width: 500px;
display: block;
margin: 15px auto 0;
border-bottom: dotted 2px;
padding-bottom: 8px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .info-erea {
max-width: 734px;
display: block;
margin: 20px auto 0;
border-bottom: dotted 2px;
padding-bottom: 10px;
}}
@media screen and (min-width:1080px) { .info-erea {
max-width: 734px;
display: block;
margin: 20px auto 0;
border-bottom: dotted 2px;
padding-bottom: 10px;
}}
.cat-tag {
padding: 1px 0 0 5px;
width: 100%;
color: #fff;
background-color: #469c9d;
margin: 0 1em 0 1em;
}
.info-permalink {
font-size: 16px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .info-permalink {
font-size: 18px;
}}
@media screen and (min-width:1080px) { .info-permalink {
font-size: 20px;
}}
.info-wrapper {
display: block;
margin: auto;
}
.info-sp {
width: 100%;
height: 40px;
background-color: #a1dde4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .info-sp {
width: 100%;
height: 80px;
background-color: #a1dde4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}}
@media screen and (min-width:1080px) { .info-sp {
width: 100%;
max-width: 1080px;
height: 79px;
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/h2-background-img.jpg);
background-repeat: no-repeat;
background-size:contain;
margin: 20px auto 0;
}}
.text-ja {
font-size: 10px;  
}
@media screen and (min-width:600px) and ( max-width:1079px) { .text-ja {
font-size: 16px;
}}
@media screen and (min-width:1080px) { .text-ja {
font-size: 16px;
}}
.text-en {
font-size: 19px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .text-en {
font-size: 37px;
}}
@media screen and (min-width:1080px) { .text-en {
font-size: 38px;
}}
.info-hr {
border-top: solid 3px #a1dde4;
width: 53px;
display: block;
margin: 33px auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .info-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 33px auto;
}}
@media screen and (min-width:1080px) { .info-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 33px auto;
}} .trouble-text-area {
text-align: center;
}
.trouble-text {
position: relative;
font-size: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .trouble-text {
position: relative;
font-size: 26px;
font-weight: 500;
}}
@media screen and (min-width:1080px) { .trouble-text {
position: relative;
font-size: 30px;
font-weight: 500;
}}
.trouble-text:before {
border-bottom: 9px solid #a1dde4;
border-radius: 5px;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .trouble-text:before {
border-bottom: 13px solid #a1dde4;
border-radius: 5px;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}}
@media screen and (min-width:1080px) { .trouble-text:before {
border-bottom: 13px solid #a1dde4;
border-radius: 5px;
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}}
.trouble-img {
width: 100%;
max-width: 796px;
display: block;
margin: 31px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .trouble-img {
width: 100%;
max-width: 796px;
display: block;
margin: 48px auto 0;
}}
@media screen and (min-width:1080px) { .trouble-img {
width: 100%;
max-width: 796px;
display: block;
margin: 48px auto 0;
}}
.trouble-text-area02 {
text-align: center;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .trouble-text-area02 {
text-align: center;
margin-top: 20px;
}}
@media screen and (min-width:1080px) { .trouble-text-area02 {
text-align: center;
margin-top: 40px;
}}
.trouble-text02 {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .trouble-text02 {
font-size: 24px;
font-weight: 500;
line-height: 1.5;
}}
@media screen and (min-width:1080px) { .trouble-text02 {
font-size: 30px;
font-weight: 500;
line-height: 1.5;
}} .reason-text-area {
width: 100%;
height: 40px;
background-color: #a1dde4;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-text-area {
width: 100%;
height: 80px;
background-color: #a1dde4;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}}
@media screen and (min-width:1080px) { .reason-text-area {
width: 100%;
max-width: 1080px;
height: 79px;
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/h2-background-img.jpg);
background-repeat: no-repeat;
background-size:contain;
margin: 20px auto 0;
}}
@media screen and (min-width:600px) and ( max-width:1079px) {
.reason-wrapper {
display: block;
margin: 0 0 0 4%;
}}
@media screen and (min-width:1080px) {
.reason-wrapper {
max-width: 800px;
display: block;
margin: 0 auto;
}}
.reason-h2-text {
font-size: 20px;
font-weight: 600;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-h2-text {
font-size: 30px;
font-weight: 600;
}}
@media screen and (min-width:1080px) { .reason-h2-text {
font-size: 30px;
font-weight: 600;
}}
.reason-text {
margin-top: 15px;
font-size: 15px;
line-height: 1.5;
display: block;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-text {
margin-top: 20px;
font-size: 15px;
line-height: 1.6;
}}
@media screen and (min-width:1080px) { .reason-text {
margin-top: 20px;
font-size: 16px;
line-height: 1.8;
}}
.reason-img {
display: block;
margin: 20px auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-img {
display: block;
margin: 20px auto;
}}
@media screen and (min-width:1080px) { .reason-img {
display: block;
margin: 25px auto;
}}
.reason-text02 {
font-size: 12px;
line-height: 1.5;
}
.reason-h3-number02 {
font-size: 17px;
font-weight: 600;
color: #41bdbd;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-h3-number02 {
font-size: 30px;
font-weight: 600;
color: #41bdbd;
}}
@media screen and (min-width:1080px) { .reason-h3-number02 {
font-size: 40px;
font-weight: 600;
color: #41bdbd;
}}
.reason-text-list02 {
width: 100%;
display: flex;
flex-direction: row;
border-bottom: solid 3px #41bdbd;
padding-bottom: 5px;
margin-top: 35px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-text-list02 {
max-width: 574px;
display: flex;
flex-direction: row;
border-bottom: solid 5px #41bdbd;
padding-bottom: 9px;
margin-top: 60px;
}}
@media screen and (min-width:1080px) { .reason-text-list02 {
max-width: 800px;
display: flex;
flex-direction: row;
border-bottom: solid 6px #41bdbd;
padding-bottom: 20px;
margin-top: 62px;
}}
.reason-h3-text02 {
font-size: 15px;
font-weight: 600;
color: #41bdbd;
margin-left: 5px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reason-h3-text02 {
font-size: 22px;
font-weight: 600;
color: #41bdbd;
margin-left: 15px;
margin-top: 6px;
}}
@media screen and (min-width:1080px) { .reason-h3-text02 {
font-size: 28px;
font-weight: 600;
color: #41bdbd;
margin-left: 15px;
margin-top: 10px;
}} .free {
background-color: #a1dde4;
margin-top: 96px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free {
background-color: #a1dde4;
margin-top: 96px;
}}
@media screen and (min-width:1080px) { .free {
background-color: #a1dde4;
margin-top: 147px;
}}
.free-inner {
max-width: 1080px;
padding: 0 1% 0 1%;
display: block;
margin: 0 auto;
text-align: center;
}
.free-img {
width: 100%;
max-width: 647px;
display: block;
margin: 0 auto;
padding-top: 41px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-img {
width: 100%;
max-width: 512px;
display: block;
margin: 0 auto;
padding-top: 41px;
}}
@media screen and (min-width:1080px) { .free-img {
width: 100%;
max-width: 647px;
display: block;
margin: 0 auto;
padding-top: 41px;
}}
.free-inner-text-sp {
font-size: 19px;
line-height: 1.8;
display: block;
margin-top: 35px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-inner-text-sp {
font-size: 19px;
line-height: 1.8;
display: block;
margin-top: 35px;
}}
@media screen and (min-width:1080px) { .free-inner-text-sp {
display: none; 
}}
.free-inner-text-pc {
display: none; 
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-inner-text-pc {
display: none;   
}}
@media screen and (min-width:1080px) { .free-inner-text-pc {
font-size: 20px;
display: block;
margin: 37px 0 0 0;
letter-spacing: 3px;    
}}
.free-img02 {
width: 100%;
max-width: 600px;
margin-top: 47px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-img02 {
width: 100%;
max-width: 604px;
margin-top: 54px;
}}
@media screen and (min-width:1080px) { .free-img02 {
width: 100%;
max-width: 641px;
margin-top: 54px;
}}
.free-img03 {
width: 100%;
max-width: 600px;
margin-top: 47px;
padding-bottom: 41px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-img03 {
width: 100%;
max-width: 604px;
margin-top: 54px;
padding-bottom: 41px;
}}
@media screen and (min-width:1080px) { .free-img03 {
width: 100%;
max-width: 641px;
margin-top: 54px;
padding-bottom: 41px;
}} .free-hr {
border-top: solid 3px #a1dde4;
width: 53px;
display: block;
margin: 33px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .free-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 33px auto 0;
}}
@media screen and (min-width:1080px) { .free-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 81px auto 0;
}} .contrivance {
width: 100%;
max-width: 1080px;
padding: 0 1% 0 1%;
display: block;
margin: 0 auto;
}
.contrivance-h2 {
font-size: 20px;
font-weight: 600;
letter-spacing: 2px;
margin-top: 80px;
text-align: center;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-h2 {
font-size: 26px;
font-weight: 600;
letter-spacing: 2px;
margin-top: 80px;
text-align: center;
}}
@media screen and (min-width:1080px) { .contrivance-h2 {
font-size: 35px;
font-weight: 600;
letter-spacing: 2px;
margin-top: 80px;
text-align: center;
}}
.contrivance-text-sp {
font-size: 12px;
line-height: 1.6;
display: block;
margin-top: 37px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-text-sp {
display: none;
}}
@media screen and (min-width:1080px) { .contrivance-text-sp {
display: none;
}}
.contrivance-text-area {
text-align: center;
margin-top: 32px;
} .contrivance-text-pc {
font-size: 20px;
line-height: 1.6;
}
@media screen and (max-width: 1079px) { .contrivance-text-pc {
font-size: 15px;
line-height: 1.6;
}}
@media screen and (max-width: 599px) { .contrivance-text-pc {
display: none;
}}
.contrivance-img-erea-sp {
max-width: 471px;
display: block;
margin: 47px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-img-erea-sp {
max-width: 471px;
display: block;
margin: 47px auto 0;
}}
@media screen and (min-width:1080px) { .contrivance-img-erea-sp {
display: none;
}}
.contrivance-img-erea-pc {
max-width: 796px;
display: block;
margin: 50px auto 0;
}
@media screen and (max-width: 1079px) { .contrivance-img-erea-pc {
display: none;
}}
@media screen and (max-width: 599px) { .contrivance-img-erea-pc {
display: none;
}}
.contrivance-img01 {
width: 100%;
max-width: 471px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-img01 {
width: 100%;
max-width: 471px;
}}
@media screen and (min-width:1080px) { .contrivance-img01 {
max-width: 368px;
}}
.contrivance-img02 {
width: 100%;
max-width: 471px;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-img02 {
width: 100%;
max-width: 471px;
margin-top: 36px;
}}
@media screen and (min-width:1080px) { .contrivance-img02 {
max-width: 368px;
margin-left: 5%;
}}
.contrivance-text02 {
text-align: center;
font-size: 18px;
color: #41bdbd;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .contrivance-text02 {
text-align: center;
font-size: 18px;
color: #41bdbd;
margin-top: 20px;
}}
@media screen and (min-width:1080px) { .contrivance-text02 {
text-align: center;
font-size: 20px;
color: #41bdbd;
margin-top: 20px;
}} .comparison {
width: 100%;
background-color: #ceedf1;
margin-top: 40px;
}
.comparison-inner {
width: 100%;
max-width: 1080px;
display: block;
margin: auto;
padding: 37px 1% 0 1%;
}
.comparison-text-area {
text-align: center;
}
.comparison-inner-text01 {
font-size: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .comparison-inner-text01 {
font-size: 30px;
}}
@media screen and (min-width:1080px) { .comparison-inner-text01 {
font-size: 40px;
font-weight: 500;
}}
.comparison-inner-text02 {
font-size: 15px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .comparison-inner-text02 {
font-size: 20px;
}}
@media screen and (min-width:1080px) { .comparison-inner-text02 {
font-size: 30px;
font-weight: 500;
}}
.comparison-img {
width: 100%;
max-width: 889px;
display: block;
margin: 20px auto 0;
}
.comparison-text-area02 {
width: 100%;
max-width: 1080px;
text-align: center;
margin-top: 12px;
padding-bottom: 20px;
}
.comparison-inner-text03 {
font-size: 14px;
line-height: 1.4;
color: #b90000;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .comparison-inner-text03 {
font-size: 20px;
line-height: 1.4;
color: #b90000;
}}
@media screen and (min-width:1080px) { .comparison-inner-text03 {
font-size: 20px;
line-height: 1.4;
color: #b90000;
}}
.comparison-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 81px auto 0;
} .flow-h2-area-warapper {
padding: 0 1% 0 1%;
}
.flow-h2-area {
width: 100%;
height: 40px;
background-color: #a1dde4;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .flow-h2-area {
width: 100%;
height: 79px;
background-color: #a1dde4;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}}
@media screen and (min-width:1080px) { .flow-h2-area {
width: 100%;
max-width: 1080px;
height: 79px;
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/h2-background-img.jpg);
margin: 20px auto 0;
}}
.flow-h2 {
font-size: 20px;
font-weight: 600;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .flow-h2 {
font-size: 30px;
font-weight: 600;
}}
@media screen and (min-width:1080px) { .flow-h2 {
font-size: 30px;
font-weight: 600;
}}
.flow-img01 {
width: 100%;
max-width: 852px;
display: block;
margin: 64px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .flow-img01 {
width: 100%;
max-width: 852px;
display: block;
margin: 30px auto 0;
}}
@media screen and (min-width:1080px) { .flow-img01 {
width: 100%;
max-width: 852px;
display: block;
margin: 64px auto 0;
}}
.flow-img02 {
width: 100%;
max-width: 852px;
display: block;
margin: 0px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .flow-img02 {
width: 100%;
max-width: 852px;
display: block;
margin: 30px auto 0;
}}
@media screen and (min-width:1080px) { .flow-img02 {
width: 100%;
max-width: 852px;
display: block;
margin: 64px auto 0;
}}
.flow-img03 {
width: 100%;
max-width: 852px;
display: block;
margin: 0px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .flow-img03 {
width: 100%;
max-width: 852px;
display: block;
margin: 30px auto 0;
}}
@media screen and (min-width:1080px) { .flow-img03 {
width: 100%;
max-width: 852px;
display: block;
margin: 64px auto 0;
}} .system-wrapper {
padding: 0 1% 0 1%;
}
.system-h2-area {
width: 100%;
height: 40px;
background-color: #a1dde4;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .system-h2-area {
width: 100%;
height: 79px;
background-color: #a1dde4;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60px;
}}
@media screen and (min-width:1080px) { .system-h2-area {
width: 100%;
max-width: 1080px;
height: 79px;
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/h2-background-img.jpg);
margin: 96px auto 0;
}}
.system-h2 {
font-size: 20px;
font-weight: 600;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .system-h2 {
font-size: 30px;
font-weight: 600;
}}
@media screen and (min-width:1080px) { .system-h2 {
font-size: 30px;
font-weight: 600;
}}
.system-text-area {
width: 100%;
max-width: 1080px;
margin: 50px auto;
}
.system-text {
font-size: 15px;
line-height: 1.5;
}
.system-text-under {
font-size: 15px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .system-text-under{
font-size: 15px;
}}
@media screen and (min-width:1080px) { .system-text-under {
font-size: 15px;
}}
.system-img-area-sp {
width: 100%;
max-width: 476px;
height: 102px;
display: block;
margin: auto;
}
@media screen and (min-width:686px) { .system-img-area-sp {
display: none;
}}
.system-img-area-sp-cta {
width: 100%;
}
.system-img-area-pc {
display: none;
}
@media screen and (min-width:686px) and ( max-width:1079px) { .system-img-area-pc {
width: 100%;
max-width: 669px;
display: flex;
flex-direction: row;
height: 102px;  
margin: auto;
}}
@media screen and (min-width:1080px) { .system-img-area-pc {
width: 100%;
max-width: 669px;
display: flex;
flex-direction: row;
height: 102px;  
margin: auto;
}}
.system-img-cta01-2 {
display: block;
margin: auto;
}
@media screen and (min-width:666px) and ( max-width:1079px) { .system-img-cta01-2 {
display: none;
}}
@media screen and (min-width:1080px) { .system-img-cta01-2 {
display: none;
}}
.system-img-cta01 {
display: none;
}
@media screen and (min-width:666px) and ( max-width:1079px) { .system-img-cta01 {
display: block;
margin: auto;
width: 100%;
max-width: 194px;
}}
@media screen and (min-width:1080px) { .system-img-cta01 {
display: block;
margin: auto;
width: 100%;
max-width: 194px;
}}
.system-img-cta02 {
width: 100%;
max-width: 475px;
display: block;
margin: auto;
} .reasonable {
background-color: #d9ecee;
margin-top: 50px;
padding: 0 1% 0 1%;
}
.reasonable-h3-erea {
padding-top: 50px;
max-width: 1080px;
text-align: center;
margin: 0 auto;
}
.reasonable-h3 {
font-size: 18px;
font-weight: 600;
color: #41bdbd;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reasonable-h3 {
font-size: 24px;
font-weight: 600;
color: #41bdbd;
}}
@media screen and (min-width:1080px) { .reasonable-h3 {
font-size: 30px;
font-weight: 600;
color: #41bdbd;
}} .reasonable-wrapper-sp {
width: 100%;
padding-bottom: 80px;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-wrapper-sp {
width: 100%;  
}}
@media screen and (min-width:1080px) { .reasonable-wrapper-sp {
display: none; 
}} .reasonable01-sp {
width: 100%;
max-width: 617px;
max-height: 121px;
display: flex;
margin: 49px auto 0;
}
.reasonable-img-erea-sp01 {
width: 100%;
max-width: 120px;
height: auto;
position: relative;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-erea-sp01 {
width: 100%;
max-width: 149px;
max-height: 121px;
position: relative;
}}
.reasonable-img-sp01{
width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-sp01{
width: 100%;
max-width: 149px;
max-height: 121px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}}
.reasonable-text-erea-sp01 {
width: 100%;
max-width: 431px;
height: 121px;
margin-left: 2%;
position: relative;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-text-erea-sp01 {
width: 100%;
max-width: 431px;
height: 121px;
margin-left: 6%;
position: relative;
}}
.reasonable-list-sp01 {
font-size: 16px;
font-weight: 600;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-list-sp01 {
font-size: 20px;
font-weight: 600;
}}
.reasonable-item-sp01 {
font-size: 14px;
line-height: 1.3;
margin-top: 5%;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-item-sp01 {
font-size: 18px;
line-height: 1.5;
position: absolute;
bottom: 0;
}} .reasonable02-sp {
width: 100%;
max-width: 617px;
height: 121px;
display: flex;
margin: 49px auto 0;
}
.reasonable-img-erea-sp02 {
width: 100%;
max-width: 120px;
height: auto;
margin-left: 2%;
position: relative;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-erea-sp02 {
width: 100%;
max-width: 149px;
height: 121px;
margin-left: 6%;
position: relative;
}}
.reasonable-img-sp02{
width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-sp02{
width: 100%;
max-width: 149px;
max-height: 121px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}}
.reasonable-text-erea-sp02 {
width: 100%;
max-width: 431px;
height: 121px;
position: relative;
}
@media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-text-erea-sp02 {
width: 100%;
max-width: 431px;
height: 121px;
position: relative;
}}
.reasonable-list-sp02 {
font-size: 16px;
font-weight: 600;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-list-sp02 {
font-size: 20px;
font-weight: 600;
}}
.reasonable-item-sp02 {
font-size: 14px;
line-height: 1.3;
margin-top: 5%;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-item-sp02 {
font-size: 18px;
line-height: 1.5;
position: absolute;
bottom: 0;
}} .reasonable03-sp {
width: 100%;
max-width: 617px;
height: 147px;
display: flex;
margin: 49px auto 0;
}
.reasonable-img-erea-sp03 {
width: 100%;
max-width: 120px;
height: 147px;
position: relative;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-erea-sp03 {
width: 100%;
max-width: 149px;
height: auto;
position: relative;
}}
.reasonable-img-sp03{
width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-img-sp03{
width: 100%;
max-width: 149px;
max-height: 147px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}}
.reasonable-text-erea-sp03 {
width: 100%;
max-width: 431px;
height: 147px;
margin-left: 2%;
position: relative;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-text-erea-sp03 {
width: 100%;
max-width: 431px;
height: 147px;
margin-left: 6%;
position: relative;
}}
.reasonable-list-sp03 {
font-size: 16px;
font-weight: 600;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-list-sp03 {
font-size: 20px;
font-weight: 600;
}}
.reasonable-item-sp03 {
font-size: 14px;
line-height: 1.3;
position: absolute;
margin-top: 5%;
} @media screen and (min-width:600px) and ( max-width:1079px) {
.reasonable-item-sp03 {
font-size: 18px;
line-height: 1.5;
position: absolute;
bottom: 0;
}} .reasonable-wrapper-pc {
max-width: 990px;
display: flex;
justify-content: space-between;
margin: 50px auto;
}
@media screen and (max-width: 1079px) { .reasonable-wrapper-pc {
display: none;
}}
@media screen and (max-width: 599px) { .reasonable-wrapper-pc {
display: none;
}}
.reasonable-img-area {
width: 254px;
height: 150px;
text-align: center;
vertical-align: middle;
position: relative;
}
.reasonable-img-01 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.reasonable-img-02 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.reasonable-img-03 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.reasonable01-pc {
max-width: 254px;
height: 412px;
line-height: 1.4;
}
.reasonable01-list-pc {
font-size: 20px;
margin-top: 20px;
text-align: center;
}
.reasonable01-item-pc {
font-size: 16px;
margin-top: 35px;
text-align: left;
padding: 0 2% 0 2%;
}
.reasonable-hr {
border-top: solid 3px #a1dde4;
width: 53px;
display: block;
margin: 33px auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .reasonable-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 33px auto;
}}
@media screen and (min-width:1080px) { .reasonable-hr {
border-top: solid 4px #a1dde4;
width: 107px;
display: block;
margin: 33px auto;
}} .banner-erea {
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/bg.jpg);
background-position: center center;
background-repeat:  no-repeat;     
background-size:cover;
width: 100%;
height: auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .banner-erea {
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/bg.jpg);
background-position: center center;
background-repeat:  no-repeat;     
background-size:cover;
width: 100%;
height: auto;
}}
@media screen and (min-width:1080px) { .banner-erea {
background-image: url(//www.yume-saki.com/wp/wp-content/themes/yumesaki/images/bg-pc.jpg);
background-position: center center;
background-repeat:  no-repeat;     
background-size:cover;
width: 100%;
height: auto;
}}
.banner-inner-sp {
width: 100%;
max-width: 568px;
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 1% 38px 1%;
margin: auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .banner-inner-sp {
width: 100%;
max-width: 568px;
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 1% 38px 1%;
margin: auto;
}}
@media screen and (min-width:1080px) { .banner-inner-sp {
display: none;
}}
.img-sp {
width: 100%;
display: block;
margin: 1% auto;
}
.banner-inner-pc {
display: none;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .banner-inner-pc {
display: none;
}}
@media screen and (min-width:1080px) { .banner-inner-pc {
width: 100%;
max-width: 1039px;
display: flex;
justify-content: space-around;
margin: auto;
padding: 55px 2% 55px 2%;
}}
.img-pc {
max-width: 236px;
} .access-inner-sp {
width: 100%;
max-width: 332px;
display: block;
margin: 10px auto;
}
@media screen and (min-width:674px) and ( max-width:1079px) { .access-inner-sp {
display: none;
}}
@media screen and (min-width:1080px) { .access-inner-sp {
display: none;
}}
.access-inner-pc {
width: 100%;
max-width: 662px;
display: block;
margin: 98px auto 0;
}
@media screen and (max-width: 1079px) { .access-inner-pc {
width: 100%;
max-width: 662px;
display: block;
margin: 50px auto 0;
}}
@media screen and (max-width: 673px) { .access-inner-pc {
display: none;
}} footer {
width: 100%;
height: 585px;
background-color: #41bdbd;
margin-top: 70px;
}
@media screen and (min-width:600px) and ( max-width:1079px) { footer {
width: 100%;
height: 240px;
background-color: #41bdbd;
margin-top: 50px;
}}
@media screen and (min-width:1080px) { footer {
width: 100%;
height: 240px;
background-color: #41bdbd;
margin-top: 50px;
}}
.footer-inner {
width: 100%;
max-width: 550px;
height: 240px;
display: flex;
flex-direction: column;
margin: auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .footer-inner {
width: 100%;
max-width: 663px;
height: 240px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: auto;
}}
@media screen and (min-width:1080px) { .footer-inner {
width: 100%;
max-width: 663px;
height: 240px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: auto;
}}
.footer-item01 {
width: 100%;
max-width: 350px;
height: 240px;
margin: auto;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .footer-item01 {
width: 100%;
max-width: 250px;
height: 240px;
margin: 0 0 0 0;
}}
@media screen and (min-width:1080px) { .footer-item01 {
width: 100%;
max-width: 250px;
height: 240px;
margin: 0 0 0 0;
}}
.footer-item01-img {
width: 100%;
display: block;
margin: 30px auto 10px;
}
.footer-item01-text {
font-size: 15px;
line-height: 1.7;
text-align: center;
color: #FFF;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .footer-item01-text {
font-size: 13px;
line-height: 1.8;
text-align: center;
color: #FFF;
}}
@media screen and (min-width:1080px) { .footer-item01-text {
font-size: 13px;
line-height: 1.8;
text-align: center;
color: #FFF;
}}
.footer-item02 {
width: 100%;
max-width: 350px;
height: 240px;
margin: 0px auto 0;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .footer-item02 {
width: 100%;
max-width: 270px;
height: 240px;
margin: 0 0 0 0;
}}
@media screen and (min-width:1080px) { .footer-item02 {
width: 100%;
max-width: 270px;
height: 240px;
margin: 0 0 0 0;
}}
.footer-item02-img {
width: 100%;
margin: 25px 0 10px 0;
}
.footer-item-text {
font-size: 14px;
line-height: 1.5;
color: #FFF;
}
.footer-inner02 {
margin-top: 20px;
}
.footer-item02-text {
font-size: 15px;
line-height: 1.8;
text-align: center;
color: #FFF;
}
@media screen and (min-width:600px) and ( max-width:1079px) { .footer-item02-text {
font-size: 13px;
line-height: 1.8;
text-align: center;
color: #FFF;
}}
@media screen and (min-width:1080px) { .footer-item02-text {
font-size: 13px;
line-height: 1.8;
text-align: center;
color: #FFF;
}}  #sp-fixed-menu{
position: fixed;
width: 100%;
bottom: 53px;
font-size: 0;
opacity: 0.9;
z-index: 99;
} #sp-fixed-menu ul{
display: flex;
list-style: none;
padding:0;
margin:0;
width:100%;
}
#sp-fixed-menu li{
justify-content: center;
align-items: center;
width: 50%;
padding:0;
margin:0;
font-size: 16px;
font-weight: 600;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
} #sp-fixed-menu li:first-child{
background: #1f3dc2;
} #sp-fixed-menu li:last-child{
background: #3dc21f;
} #sp-fixed-menu li a{
color: #fff;
text-align: center;
display:block;
width: 100%;
padding:17px;
}
@media (min-width: 1080px) {
.for-sp{
display:none;
}
}
.sp-fixed-menu-2 {
position: fixed;
width: 100%;
bottom: 0px;
font-size: 0;
opacity: 0.9;
z-index: 99;
}
.sp-fixed-menu-2 ul {
display: flex;
list-style: none;
padding:0;
margin:0;
width:100%;
}
.sp-fixed-menu-2 li{
justify-content: center;
align-items: center;
width: 50%;
padding:0;
margin:0;
font-size: 16px;
font-weight: 600;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
.sp-fixed-menu-2 li{
background: #ae1c37;
}
.sp-fixed-menu-2 a{
color: #fff;
text-align: center;
display:block;
width: 100%;
padding:17px;
} .mainvisual-sp img,
.mainvisual-pc img{
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9; }
.reason-img{
display:block !important;
opacity:1 !important;
visibility:visible !important;
width:auto !important;
height:auto !important;
max-width:100% !important;
} .access{
padding: 40px 0; }
.access iframe{
display: block;
width: 100%;
max-width: 1100px; height: 520px; margin: 0 auto; border: 0;
}
@media screen and (max-width: 768px){
.access{
padding: 40px 0; }
.access iframe{
max-width: 100%;
height: 320px; }
} .mainvisual{
aspect-ratio: 16 / 9; } .mainvisual-img{
width: 100%;
height: auto;
display: block;
} .mainvisual{
display: block;
width: 100%;
margin: 0 auto;
}
.mainvisual-img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;