@charset "UTF-8";


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

.main { background: #FFF;}

.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: #004892; 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;}

.cont { padding: 0 25px;}
.cont .box { margin-top: 30px;}
.cont .box:nth-of-type(1) { margin-top: 0;}
.cont .box h2 { color: #004892; font-size: 18px; font-weight: 500;}
.cont .box p { margin: 0 0 0; font-size: 18px; font-weight: 500;}
.cont .box ol { margin: 20px 0 0; font-size: 18px; font-weight: 500;}
.cont .contact { margin: 20px 0 50px; font-size: 18px; font-weight: 500;}
.cont .contact h2 { font-size: 18px; font-weight: 500;}
.cont .contact p { margin: 0 0 0; font-size: 18px; font-weight: 500;}

}



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



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

.main { background: #FFF;}

.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: #004892; 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;}

.cont { padding: 0 5.102vw;}
.cont .box { margin-top: 6.122vw;}
.cont .box:nth-of-type(1) { margin-top: 0;}
.cont .box h2 { color: #004892; font-size: 3.673vw; font-weight: 500;}
.cont .box p { margin: 0 0 0; font-size: 3.673vw; font-weight: 500;}
.cont .box ol { margin: 4.082vw 0 0; font-size: 3.673vw; font-weight: 500;}
.cont .contact { margin: 4.082vw 0 10.204vw; font-size: 3.673vw; font-weight: 500;}
.cont .contact h2 { font-size: 3.673vw; font-weight: 500;}
.cont .contact p { margin: 0 0 0; font-size: 3.673vw; font-weight: 500;}

}



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

.main { background: #FFF;}

.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: #004892; 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;}

.cont { padding: 0 25px;}
.cont .box { margin-top: 30px;}
.cont .box:nth-of-type(1) { margin-top: 0;}
.cont .box h2 { color: #004892; font-size: 18px; font-weight: 500;}
.cont .box p { margin: 0 0 0; font-size: 18px; font-weight: 500;}
.cont .box ol { margin: 20px 0 0; font-size: 18px; font-weight: 500;}
.cont .contact { margin: 20px 0 50px; font-size: 18px; font-weight: 500;}
.cont .contact h2 { font-size: 18px; font-weight: 500;}
.cont .contact p { margin: 0 0 0; font-size: 18px; font-weight: 500;}

}