@charset "utf-8";
/* CSS Document */


/* =====================
   voiceページ専用スタイル
===================== */ 



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



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


.sec01 { border-top: solid 1px var(--color99); padding: 0 0 100px;}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.box { max-width: 1000px; border: solid 2px var(--color99); border-radius: 30px; margin: 80px auto 0; background: #FFF; padding: 50px 70px; box-shadow: 10px 10px 0px 0px var(--color01); display: flex;}
.box:nth-child(2n+1) { flex-direction: row-reverse;}
.box .txt { width: calc( 100% - 254px ); font-size: 20px;}
.box .img { width: 254px;}



}



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


.sec01 { border-top: solid 1px var(--color99); padding: 0 0 15.625vw;}

.sec01 h2 { font-size: 14.063vw; margin: 7.813vw 0 12.5vw; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.box { width: auto; min-height: 35.938vw; border: solid 2px var(--color99); border-radius: 6.25vw; margin: 12.5vw 3.125vw 0; background: #FFF; padding: 3.125vw 3.125vw 4.688vw; box-shadow: 10px 10px 0px 0px var(--color01); display: flex; position: relative;}
.box .txt { width: calc( 100% - 20.313vw ); font-size: 3.125vw;}
.box .img { position: absolute;}
.box:nth-of-type(3) .txt { width: calc( 100% - 32.813vw ); font-size: 3.125vw;}

.box:nth-of-type(1) .img { bottom: 4.688vw; right: -1.562vw; width: 25vw;}
.box:nth-of-type(2) .img { bottom: 4.688vw; right: 3.125vw; width: 20.313vw;}
.box:nth-of-type(3) .img { bottom: 20.313vw; right: 3.125vw; width: 33.594vw;}
.box:nth-of-type(4) .img { bottom: 1.563vw; right: 1.563vw; width: 22.344vw;}
.box:nth-of-type(5) .img { bottom: 4.688vw; right: -1.562vw; width: 25.156vw;}


}



/*sp_px*/
@media screen and (width: 640px) {


.sec01 { border-top: solid 1px var(--color99); padding: 0 0 100px;}

.sec01 h2 { font-size: 90px; margin: 50px 0 80px; text-align: center; color: var(--color00); -webkit-text-stroke: 1px var(--color99); text-stroke: 1px var(--color99); font-family: Arial, Helvetica, "sans-serif";}

.box { width: auto; min-height: 230px; border: solid 2px var(--color99); border-radius: 40px; margin: 80px 20px 0; background: #FFF; padding: 20px 20px 30px; box-shadow: 10px 10px 0px 0px var(--color01); display: flex; position: relative;}
.box .txt { width: calc( 100% - 130px ); font-size: 20px;}
.box .img { position: absolute;}
.box:nth-of-type(3) .txt { width: calc( 100% - 210px ); font-size: 20px;}

.box:nth-of-type(1) .img { bottom: 30px; right: -10px; width: 160px;}
.box:nth-of-type(2) .img { bottom: 30px; right: 20px; width: 130px;}
.box:nth-of-type(3) .img { bottom: 130px; right: 20px; width: 215px;}
.box:nth-of-type(4) .img { bottom: 10px; right: 10px; width: 143px;}
.box:nth-of-type(5) .img { bottom: 30px; right: -10px; width: 161px;}


}