@charset "UTF-8";

/* CSS Document */

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

.sec01 { margin: 0;}
.sec01 .txt { margin: 0 0 50px;}
.sec01 .txt h3 { margin: 0 0 40px;}
.sec01 .txt h3 img { width: auto; height: 92px; margin: 0; padding: 0; vertical-align: top;}
.sec01 .txt p { font-size: 1.6rem; line-height: 3.2rem;}

.sec01 ul { list-style: none; margin: 0; padding: 0;}
.sec01 ul li:nth-child(2n+1) { display: flex; margin: 0 0 90px;}
.sec01 ul li:nth-child(2n+2) { display: flex; flex-direction: row-reverse; margin: 0 0 90px;}
.sec01 ul li:nth-child(2n+1) .img { position: relative; margin: 0 30px 0 0; width: 408px;}
.sec01 ul li:nth-child(2n+2) .img { position: relative; margin: 0 0 0 30px; width: 408px;}
.sec01 ul li .img::before { content: ""; position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; border-top: 202px solid #FFF; border-left: 38px solid #FFF; border-right: 38px solid transparent; border-bottom: 202px solid transparent;}
.sec01 ul li .img::after { content: ""; position: absolute; z-index: 5; top: 0; right: 0; width: 0; height: 0; border-top: 202px solid transparent; border-left: 38px solid transparent; border-right: 38px solid #FFF; border-bottom: 202px solid #FFF;}
.sec01 ul li .img img { width: auto; position: relative;}
.sec01 ul li .txt01 { width: 410px;}
.sec01 ul li .txt01 .ttl { border-bottom:  solid 1px #0070B3; margin: 0 0 10px;}
.sec01 ul li .txt01 .ttl h4 { font-size: 4.0rem; color: #0070B3; margin: 0 0 5px; font-family: 'Noto Serif JP', serif;}
.sec01 ul li .txt01 .ttl p { font-size: 2.4rem; color: #0070B3; margin: 0 0 0; font-family: 'Bebas Neue', cursive; font-weight: normal;}
.sec01 ul li .detail {}
.sec01 ul li .detail h5 { font-size: 2.2rem; line-height: 3.4rem; margin: 0 0 10px; letter-spacing: -0.05em;}
.sec01 ul li .detail p { font-size: 1.6rem; line-height: 2.6rem; margin: 0 0 10px;}



}



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

.sec01 { margin: 0 5% 50px;}
.sec01 .txt { margin: 0 0 50px;}
.sec01 .txt h3 { margin: 0 0 20px;}
.sec01 .txt h3 span { font-size: 2.0rem; line-height: 3.5rem; color: #0070B3; font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em;}
.sec01 .txt p { font-size: 1.6rem; line-height: 2.2rem;}

.sec01 ul { list-style: none; margin: 0; padding: 0;}
.sec01 ul li:nth-child(2n+1) { display: inherit; margin: 0 0 50px;}
.sec01 ul li:nth-child(2n+2) { display: inherit; flex-direction: row-reverse; margin: 0 0 50px;}
.sec01 ul li:nth-child(2n+1) .img { position: relative; margin: 0 0 10px 0; width: 100%;}
.sec01 ul li:nth-child(2n+2) .img { position: relative; margin: 0 0 10px 0; width: 100%;}
/*.sec01 ul li .img::before { content: ""; position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; border-top: 202px solid #FFF; border-left: 38px solid #FFF; border-right: 38px solid transparent; border-bottom: 202px solid transparent;}
.sec01 ul li .img::after { content: ""; position: absolute; z-index: 5; top: 0; right: 0; width: 0; height: 0; border-top: 202px solid transparent; border-left: 38px solid transparent; border-right: 38px solid #FFF; border-bottom: 202px solid #FFF;}*/
.sec01 ul li .img img { width: auto; position: relative;}
.sec01 ul li .txt01 { width: 100%;}
.sec01 ul li .txt01 .ttl { border-bottom:  solid 1px #0070B3; margin: 0 0 10px;}
.sec01 ul li .txt01 .ttl h4 { font-size: 3.0rem; color: #0070B3; margin: 0 0 5px; font-family: 'Noto Serif JP', serif;}
.sec01 ul li .txt01 .ttl p { font-size: 1.6rem; color: #0070B3; margin: 0 0 0; font-family: 'Bebas Neue', cursive; font-weight: normal;}
.sec01 ul li .detail {}
.sec01 ul li .detail h5 { font-size: 1.8rem; line-height: 3.0rem; margin: 0 0 10px; letter-spacing: -0.05em;}
.sec01 ul li .detail p { font-size: 1.6rem; line-height: 2.2rem; margin: 0 0 10px;}



}