@charset "UTF-8";


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

.smart { background: #d2c3de !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 p { font-size: 43px; color: #FFF; position: relative; z-index: 10; margin-bottom: 5px;}
.ttl h1 { font-size: 22px; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 25px 50px;}
.cont .txt { text-align: center; margin: 0 auto 40px; font-size: 17px;}
.cont ul { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cont ul li { width: 210px; margin: 20px 20px 0 0;}
.cont ul li:nth-of-type(1),
.cont ul li:nth-of-type(2) { margin-top: 0;}
.cont ul li:nth-child(2n+2) { margin-right: 0;}


}



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



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

.smart { background: #d2c3de !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 p { font-size: 8.776vw; color: #FFF; position: relative; z-index: 10; margin-bottom: 1.02vw;}
.ttl h1 { font-size: 4.49vw; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 5.102vw 10.204vw;}
.cont .txt { text-align: center; margin: 0 auto 8.163vw; font-size: 3.469vw;}
.cont ul { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cont ul li { width: 42.857vw; margin: 4.082vw 4.082vw 0 0;}
.cont ul li:nth-of-type(1),
.cont ul li:nth-of-type(2) { margin-top: 0;}
.cont ul li:nth-child(2n+2) { margin-right: 0;}


}



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

.smart { background: #d2c3de !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 p { font-size: 43px; color: #FFF; position: relative; z-index: 10; margin-bottom: 5px;}
.ttl h1 { font-size: 22px; color: #FFF; position: relative; z-index: 10;}
.ttl h1 span { color: #ffff00;}

.cont { padding: 0 25px 50px;}
.cont .txt { text-align: center; margin: 0 auto 40px; font-size: 17px;}
.cont ul { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.cont ul li { width: 210px; margin: 20px 20px 0 0;}
.cont ul li:nth-of-type(1),
.cont ul li:nth-of-type(2) { margin-top: 0;}
.cont ul li:nth-child(2n+2) { margin-right: 0;}


}