@charset "UTF-8";


/*PC*/
@media print, screen and (min-width: 769px) {

.smart { background: #80cce6 !important;}

.ttl { text-align: center; position: relative; padding: 0; margin: 30px auto 50px; height: 162px; align-content: center;}
.ttl::before { content: ""; top: 0; bottom: 0; left: -100px; right: -100px;  position: absolute; background: #FFF; transform-origin: 50% 50%;}
.ttl::after { content: ""; top: 0; bottom: 0; left: -100px; right: -100px;  position: absolute; background: #5554a1; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl h1 { font-size: 45px; color: #FFF; position: relative; z-index: 10; letter-spacing: 0.5em;}

.cont { padding: 0 0 50px;}
.cont .txt { font-size: 26px; color: #5554A1; text-align: center; margin: 0 auto 40px;}
.cont .img01 { width: 410px; margin: 0 auto 30px; border: solid 5px #5554A1; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.3);}

.cont .story { width: 450px; height: 2827px; margin: auto; position: relative; /*background: url("../images/seimeiryou/all.png") 0 0 no-repeat; background-size: cover;*/}
.cont .story01 { position: absolute; top: 0; left: 0; width: 450px;}
.cont .story02 { position: absolute; top: 212px; left: 0; width: 450px;}
.cont .story03 { position: absolute; top: 505px; left: 0; width: 257px;}
.cont .story04 { position: absolute; top: 505px; right: 0; width: 257px;}
.cont .story05 { position: absolute; top: 820px; left: 0; width: 450px;}
.cont .story06 { position: absolute; top: 1072px; left: 0; width: 450px;}
.cont .story07 { position: absolute; top: 1405px; left: 0; width: 450px;}
.cont .story08 { position: absolute; top: 1700px; left: 0; width: 430px;}
.cont .story09 { position: absolute; top: 1925px; left: 0; width: 450px;}
.cont .story10 { position: absolute; top: 2175px; left: 0; width: 450px;}
.cont .story11 { position: absolute; top: 2510px; left: 0; width: 450px;}


}



/*PC*/
/*@media print, screen and (min-width: 769px) and ( max-width: 1919px) {}*/



/*sp*/
@media only screen and (max-width: 768px) {

.smart { background: #80cce6 !important;}

.ttl { text-align: center; position: relative; padding: 0; margin: 6.122vw auto 10.204vw; height: 33.061vw; align-content: center;}
.ttl::before { content: ""; top: 0; bottom: 0; left: -20.408vw; right: -20.408vw;  position: absolute; background: #FFF; transform-origin: 50% 50%;}
.ttl::after { content: ""; top: 0; bottom: 0; left: -20.408vw; right: -20.408vw;  position: absolute; background: #5554a1; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl h1 { font-size: 9.184vw; color: #FFF; position: relative; z-index: 10; letter-spacing: 0.5em;}

.cont { padding: 0 0 10.204vw;}
.cont .txt { font-size: 5.306vw; color: #5554A1; text-align: center; margin: 0 auto 8.163vw;}
.cont .img01 { width: 83.673vw; margin: 0 auto 6.122vw; border: solid 1.02vw #5554A1; box-shadow: 2.041vw 2.041vw 0px 0px rgba(0, 0, 0, 0.3);}

.cont .story { width: 91.837vw; height: 576.939vw; margin: auto; position: relative; /*background: url("../images/seimeiryou/all.png") 0 0 no-repeat; background-size: cover;*/}
.cont .story01 { position: absolute; top: 0; left: 0; width: 91.837vw;}
.cont .story02 { position: absolute; top: 43.265vw; left: 0; width: 91.837vw;}
.cont .story03 { position: absolute; top: 103.061vw; left: 0; width: 52.449vw;}
.cont .story04 { position: absolute; top: 103.061vw; right: 0; width: 52.449vw;}
.cont .story05 { position: absolute; top: 167.347vw; left: 0; width: 91.837vw;}
.cont .story06 { position: absolute; top: 218.776vw; left: 0; width: 91.837vw;}
.cont .story07 { position: absolute; top: 286.735vw; left: 0; width: 91.837vw;}
.cont .story08 { position: absolute; top: 346.939vw; left: 0; width: 87.755vw;}
.cont .story09 { position: absolute; top: 392.857vw; left: 0; width: 91.837vw;}
.cont .story10 { position: absolute; top: 443.878vw; left: 0; width: 91.837vw;}
.cont .story11 { position: absolute; top: 512.245vw; left: 0; width: 91.837vw;}


}



/*sp*/
@media screen and (width: 490px) {

.smart { background: #80cce6 !important;}

.ttl { text-align: center; position: relative; padding: 0; margin: 30px auto 50px; height: 162px; align-content: center;}
.ttl::before { content: ""; top: 0; bottom: 0; left: -100px; right: -100px;  position: absolute; background: #FFF; transform-origin: 50% 50%;}
.ttl::after { content: ""; top: 0; bottom: 0; left: -100px; right: -100px;  position: absolute; background: #5554a1; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl h1 { font-size: 45px; color: #FFF; position: relative; z-index: 10; letter-spacing: 0.5em;}

.cont { padding: 0 0 50px;}
.cont .txt { font-size: 26px; color: #5554A1; text-align: center; margin: 0 auto 40px;}
.cont .img01 { width: 410px; margin: 0 auto 30px; border: solid 5px #5554A1; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.3);}

.cont .story { width: 450px; height: 2827px; margin: auto; position: relative; /*background: url("../images/seimeiryou/all.png") 0 0 no-repeat; background-size: cover;*/}
.cont .story01 { position: absolute; top: 0; left: 0; width: 450px;}
.cont .story02 { position: absolute; top: 212px; left: 0; width: 450px;}
.cont .story03 { position: absolute; top: 505px; left: 0; width: 257px;}
.cont .story04 { position: absolute; top: 505px; right: 0; width: 257px;}
.cont .story05 { position: absolute; top: 820px; left: 0; width: 450px;}
.cont .story06 { position: absolute; top: 1072px; left: 0; width: 450px;}
.cont .story07 { position: absolute; top: 1405px; left: 0; width: 450px;}
.cont .story08 { position: absolute; top: 1700px; left: 0; width: 430px;}
.cont .story09 { position: absolute; top: 1925px; left: 0; width: 450px;}
.cont .story10 { position: absolute; top: 2175px; left: 0; width: 450px;}
.cont .story11 { position: absolute; top: 2510px; left: 0; width: 450px;}


}