@charset "UTF-8";


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

.smart { background: #99e3f8 !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: #00b9ef; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl p { font-size: 43px; color: #FFF; position: relative; z-index: 10; margin-bottom: 5px;}
.ttl p span { color: #ffff00;}
.ttl h1 { font-size: 22px; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 30px 50px;}
.cont .box { width: 100%; margin: 0 auto 25px; text-align: center;}
.cont .box01,
.cont .box03,
.cont .box05,
.cont .box07 { background: #FFF; box-shadow: 8px 8px 0px 0px #00b9ef; padding: 20px 0;}

.cont .box02,
.cont .box04,
.cont .box06 { display: flex; justify-content: space-between;}

.cont .box02 .box02L { background: #FFF; width: 280px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box02 .box02R { background: #FFF; width: 130px; box-shadow: 8px 8px 0px 0px #00b9ef;}

.cont .box04 .box04L { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box04 .box04R { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}

.cont .box06 .box06L { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box06 .box06R { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}


}



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



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

.smart { background: #99e3f8 !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: #00b9ef; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl p { font-size: 8.776vw; color: #FFF; position: relative; z-index: 10; margin-bottom: 1.02vw;}
.ttl p span { color: #ffff00;}
.ttl h1 { font-size: 4.49vw; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 6.122vw 10.204vw;}
.cont .box { width: 100%; margin: 0 auto 5.102vw; text-align: center;}
.cont .box01,
.cont .box03,
.cont .box05,
.cont .box07 { background: #FFF; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef; padding: 4.082vw 0;}

.cont .box02,
.cont .box04,
.cont .box06 { display: flex; justify-content: space-between;}

.cont .box02 .box02L { background: #FFF; width: 57.143vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}
.cont .box02 .box02R { background: #FFF; width: 26.531vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}

.cont .box04 .box04L { background: #FFF; width: 41.837vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}
.cont .box04 .box04R { background: #FFF; width: 41.837vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}

.cont .box06 .box06L { background: #FFF; width: 41.837vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}
.cont .box06 .box06R { background: #FFF; width: 41.837vw; box-shadow: 1.633vw 1.633vw 0px 0px #00b9ef;}



 
}



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

.smart { background: #99e3f8 !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: #00b9ef; transform-origin: 50% 50%; transform: rotate(-5deg);}
.ttl p { font-size: 43px; color: #FFF; position: relative; z-index: 10; margin-bottom: 5px;}
.ttl p span { color: #ffff00;}
.ttl h1 { font-size: 22px; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 30px 50px;}
.cont .box { width: 100%; margin: 0 auto 25px; text-align: center;}
.cont .box01,
.cont .box03,
.cont .box05,
.cont .box07 { background: #FFF; box-shadow: 8px 8px 0px 0px #00b9ef; padding: 20px 0;}

.cont .box02,
.cont .box04,
.cont .box06 { display: flex; justify-content: space-between;}

.cont .box02 .box02L { background: #FFF; width: 280px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box02 .box02R { background: #FFF; width: 130px; box-shadow: 8px 8px 0px 0px #00b9ef;}

.cont .box04 .box04L { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box04 .box04R { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}

.cont .box06 .box06L { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}
.cont .box06 .box06R { background: #FFF; width: 205px; box-shadow: 8px 8px 0px 0px #00b9ef;}


}