@charset "UTF-8";


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

.smart { background: #f7c5c7 !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: #ec6d74; 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;}

.cont { padding: 0 0 80px;}
.cont .movie { width: 430px; margin: 0 auto 40px; border-radius: 20px; overflow: hidden;}

.cont h2 { width: 111px; margin: 0 auto 20px;}

.cont ul {}
.cont ul li { margin-top: 48px;}
.cont ul li:nth-of-type(1) { margin-top: 0;}
.cont ul li h3 { width: 420px; min-height: 36px; background: #ec6d74; color: #FFF; align-content: center; padding: 5px 0 5px 30px; border-radius: 0 30px 30px 0; position: relative; z-index: 10;}
.cont ul li .txt { margin: -16px 25px 0; background: #FFF; padding: 40px 30px 30px; border-radius: 30px;}


}



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



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

.smart { background: #f7c5c7 !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: #ec6d74; 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;}

.cont { padding: 0 0 16.327vw;}
.cont .movie { width: 87.755vw; margin: 0 auto 8.163vw; border-radius: 4.082vw; overflow: hidden;}

.cont h2 { width: 22.653vw; margin: 0 auto 4.082vw;}

.cont ul {}
.cont ul li { margin-top: 9.796vw;}
.cont ul li:nth-of-type(1) { margin-top: 0;}
.cont ul li h3 { width: 85.714vw; min-height: 7.347vw; background: #ec6d74; color: #FFF; align-content: center; padding: 1.02vw 0 1.02vw 6.122vw; border-radius: 0 6.122vw 6.122vw 0; position: relative; z-index: 10;}
.cont ul li .txt { margin: -3.265vw 5.102vw 0; background: #FFF; padding: 8.163vw 6.122vw 6.122vw; border-radius: 6.122vw;}


}



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

.smart { background: #f7c5c7 !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: #ec6d74; 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;}

.cont { padding: 0 0 80px;}
.cont .movie { width: 430px; margin: 0 auto 40px; border-radius: 20px; overflow: hidden;}

.cont h2 { width: 111px; margin: 0 auto 20px;}

.cont ul {}
.cont ul li { margin-top: 48px;}
.cont ul li:nth-of-type(1) { margin-top: 0;}
.cont ul li h3 { width: 420px; min-height: 36px; background: #ec6d74; color: #FFF; align-content: center; padding: 5px 0 5px 30px; border-radius: 0 30px 30px 0; position: relative; z-index: 10;}
.cont ul li .txt { margin: -16px 25px 0; background: #FFF; padding: 40px 30px 30px; border-radius: 30px;}


}