@charset "UTF-8";


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

.smart { background: #fad6b9 !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: #f3994f; 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 0 0;}
.cont .txt { text-align: center; margin: 0 0 30px}

.box01 { padding: 20px 0;}
.box01 .head { display: flex; width: 400px; margin: 0 auto 10px; position: relative;}
.box01 .head::after { content: ""; position: absolute; bottom: 30px; left: 20px; right: 0; height: 3px; background: #004892; border-radius: 4px;}
.box01 .head .head_img { width: 120px; position: relative; z-index: 10;}
.box01 .head .head_txt { width: 280px; display: flex; flex-direction: column; justify-content: flex-end;}
.box01 .head .head_txt .position { width: 252px; height: 38px; text-align: center; align-content: center; font-size: 20px; border-radius: 50px; background: #004892; color: #FFF; margin: 0 auto 30px;}
.box01 .head .head_txt .name { font-size: 26px; text-align: center; margin-bottom: 40px;}
.box01 .head .head_txt .name span { font-size: 14px; margin-right: 1em;}
.box01 dl { margin: 0 45px;}
.box01 dl dt { color: #004892; font-size: 18px; /*letter-spacing: -1px;*/}
.box01 dl dd { margin-bottom: 10px;}
.box01 h2 { font-size: 43px; font-weight: 500; color: #004892; text-align: center; margin: 30px 0 20px;}
.box01 .movie { width: 430px; margin: 0 auto 30px; border-radius: 30px; overflow: hidden;}


.box02 { padding: 20px 0; background: #FFF;}
.box02 .head { display: flex; width: 400px; margin: 0 auto 10px; position: relative; flex-direction: row-reverse;}
.box02 .head::after { content: ""; position: absolute; bottom: 30px; left: 0; right: 20px; height: 3px; background: #004892; border-radius: 4px;}
.box02 .head .head_img { width: 120px; position: relative; z-index: 10;}
.box02 .head .head_txt { width: 280px; display: flex; flex-direction: column; justify-content: flex-end;}
.box02 .head .head_txt .position { width: 252px; height: 38px; text-align: center; align-content: center; font-size: 20px; border-radius: 50px; background: #004892; color: #FFF; margin: 0 auto 30px;}
.box02 .head .head_txt .name { font-size: 26px; text-align: center; margin-bottom: 40px;}
.box02 .head .head_txt .name span { font-size: 14px; margin-right: 1em;}
.box02 dl { margin: 0 45px;}
.box02 dl dt { color: #004892; font-size: 18px; /*letter-spacing: -1px;*/}
.box02 dl dd { margin-bottom: 10px;}
.box02 h2 { font-size: 43px; font-weight: 500; color: #004892; text-align: center; margin: 30px 0 20px;}
.box02 .movie { width: 430px; margin: 0 auto 30px; border-radius: 30px; overflow: hidden;}


}



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



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

.smart { background: #fad6b9 !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: #f3994f; 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 0 0;}
.cont .txt { text-align: center; margin: 0 0 6.122vw}

.box01 { padding: 4.082vw 0;}
.box01 .head { display: flex; width: 81.633vw; margin: 0 auto 2.041vw; position: relative;}
.box01 .head::after { content: ""; position: absolute; bottom: 6.122vw; left: 4.082vw; right: 0; height: 0.612vw; background: #004892; border-radius: 0.816vw;}
.box01 .head .head_img { width: 24.49vw; position: relative; z-index: 10;}
.box01 .head .head_txt { width: 57.143vw; display: flex; flex-direction: column; justify-content: flex-end;}
.box01 .head .head_txt .position { width: 51.429vw; height: 7.755vw; text-align: center; align-content: center; font-size: 4.082vw; border-radius: 10.204vw; background: #004892; color: #FFF; margin: 0 auto 6.122vw;}
.box01 .head .head_txt .name { font-size: 5.306vw; text-align: center; margin-bottom: 8.163vw;}
.box01 .head .head_txt .name span { font-size: 2.857vw; margin-right: 1em;}
.box01 dl { margin: 0 9.184vw;}
.box01 dl dt { color: #004892; font-size: 3.673vw; /*letter-spacing: -0.204vw;*/}
.box01 dl dd { margin-bottom: 2.041vw;}
.box01 h2 { font-size: 8.776vw; font-weight: 500; color: #004892; text-align: center; margin: 6.122vw 0 4.082vw;}
.box01 .movie { width: 87.755vw; margin: 0 auto 6.122vw; border-radius: 6.122vw; overflow: hidden;}


.box02 { padding: 4.082vw 0; background: #FFF;}
.box02 .head { display: flex; width: 81.633vw; margin: 0 auto 2.041vw; position: relative; flex-direction: row-reverse;}
.box02 .head::after { content: ""; position: absolute; bottom: 6.122vw; left: 0; right: 4.082vw; height: 0.612vw; background: #004892; border-radius: 0.816vw;}
.box02 .head .head_img { width: 24.49vw; position: relative; z-index: 10;}
.box02 .head .head_txt { width: 57.143vw; display: flex; flex-direction: column; justify-content: flex-end;}
.box02 .head .head_txt .position { width: 51.429vw; height: 7.755vw; text-align: center; align-content: center; font-size: 4.082vw; border-radius: 10.204vw; background: #004892; color: #FFF; margin: 0 auto 6.122vw;}
.box02 .head .head_txt .name { font-size: 5.306vw; text-align: center; margin-bottom: 8.163vw;}
.box02 .head .head_txt .name span { font-size: 2.857vw; margin-right: 1em;}
.box02 dl { margin: 0 9.184vw;}
.box02 dl dt { color: #004892; font-size: 3.673vw; /*letter-spacing: -0.204vw;*/}
.box02 dl dd { margin-bottom: 2.041vw;}
.box02 h2 { font-size: 8.776vw; font-weight: 500; color: #004892; text-align: center; margin: 6.122vw 0 4.082vw;}
.box02 .movie { width: 87.755vw; margin: 0 auto 6.122vw; border-radius: 6.122vw; overflow: hidden;}


}



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

.smart { background: #fad6b9 !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: #f3994f; 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 0 0;}
.cont .txt { text-align: center; margin: 0 0 30px}

.box01 { padding: 20px 0;}
.box01 .head { display: flex; width: 400px; margin: 0 auto 10px; position: relative;}
.box01 .head::after { content: ""; position: absolute; bottom: 30px; left: 20px; right: 0; height: 3px; background: #004892; border-radius: 4px;}
.box01 .head .head_img { width: 120px; position: relative; z-index: 10;}
.box01 .head .head_txt { width: 280px; display: flex; flex-direction: column; justify-content: flex-end;}
.box01 .head .head_txt .position { width: 252px; height: 38px; text-align: center; align-content: center; font-size: 20px; border-radius: 50px; background: #004892; color: #FFF; margin: 0 auto 30px;}
.box01 .head .head_txt .name { font-size: 26px; text-align: center; margin-bottom: 40px;}
.box01 .head .head_txt .name span { font-size: 14px; margin-right: 1em;}
.box01 dl { margin: 0 45px;}
.box01 dl dt { color: #004892; font-size: 18px; /*letter-spacing: -1px;*/}
.box01 dl dd { margin-bottom: 10px;}
.box01 h2 { font-size: 43px; font-weight: 500; color: #004892; text-align: center; margin: 30px 0 20px;}
.box01 .movie { width: 430px; margin: 0 auto 30px; border-radius: 30px; overflow: hidden;}


.box02 { padding: 20px 0; background: #FFF;}
.box02 .head { display: flex; width: 400px; margin: 0 auto 10px; position: relative; flex-direction: row-reverse;}
.box02 .head::after { content: ""; position: absolute; bottom: 30px; left: 0; right: 20px; height: 3px; background: #004892; border-radius: 4px;}
.box02 .head .head_img { width: 120px; position: relative; z-index: 10;}
.box02 .head .head_txt { width: 280px; display: flex; flex-direction: column; justify-content: flex-end;}
.box02 .head .head_txt .position { width: 252px; height: 38px; text-align: center; align-content: center; font-size: 20px; border-radius: 50px; background: #004892; color: #FFF; margin: 0 auto 30px;}
.box02 .head .head_txt .name { font-size: 26px; text-align: center; margin-bottom: 40px;}
.box02 .head .head_txt .name span { font-size: 14px; margin-right: 1em;}
.box02 dl { margin: 0 45px;}
.box02 dl dt { color: #004892; font-size: 18px; /*letter-spacing: -1px;*/}
.box02 dl dd { margin-bottom: 10px;}
.box02 h2 { font-size: 43px; font-weight: 500; color: #004892; text-align: center; margin: 30px 0 20px;}
.box02 .movie { width: 430px; margin: 0 auto 30px; border-radius: 30px; overflow: hidden;}


}