@charset "utf-8";

html{font-size:10px;}
.container {width:100%; margin:0 auto; max-width:1000px; position:relative;}
.cf:after{content:''; display: block; clear:both; visibility:hidden; height:0px;}
.volcanic{max-width:2560px; width: 100%; margin:0 auto; text-align:center; letter-spacing:-0.5px; line-height:1.5;background:#f6f6f6;}

/* ! ================== con01 ==================  */
.con01{position:relative; height:886px; text-align:center; background:url(images_my/con01_bg.jpg) center top / cover;}

.con01 h2{position:absolute; left:-9999px; top:-9999px; text-indent:-9999px}

/* ! ================== con02 ==================  */
/* .con02 {position:relative; padding:70px 0; text-align:center; background:url(images_my/con02_bg.jpg) center top / cover;}
.con02 .box {max-width: 799px; margin: auto; border:2px solid #000; background:#fff; box-shadow:3px 3px 0 #000}
.con02 .box .con {position:relative; line-height:1.5}
.con02 .box .tit { padding: 3% 0; border: 2px solid #000; border-width: 0px 0 1px 0 ; background-color: #ffba00;}
.con02 .box .tit h2 {padding: 0 25px;}
.con02 .box .info {}
.con02 .box .info li {padding: 27px 0;}
.con02 .box .info li > div {float: left;}
.con02 .box .info li div.img {}
.con02 .box .info li div.txt {padding: 44px 41px; font-size: 2.4rem; color: #222222; font-weight: bold; letter-spacing: -1px;}
.con02 .box .info li div.txt em {background-color: #fcff00;}
.con02 .ft {padding: 0 0 37px;}


.con02 .info li:nth-child(1) .img {float: right; text-align: right;}
.con02 .info li:nth-child(2) .txt {padding: 59px 0;} */


/* ! ================== con03 ==================  */
.con03 {position:relative; padding:45px 0 0; text-align:center; background:url(images_my/con02_bg.jpg) no-repeat center top / cover; height: 1342px; overflow: hidden; background-color: #dfdbd7;}
.con03 .container {position: relative;}
.con03 .container::after {content: ''; position: absolute; width: 211px; height: 374px; top: -96px; right: 59px; background: url('images_my/con02_deco.png')no-repeat top /100%; transform: translateX(-10px);}
.con03 .box {position: relative; padding: 0 0 0; top: 261px; max-width: 799px; margin: auto; border:2px solid #000; background:#fff; box-shadow:3px 3px 0 #000}
.con03 .box .con {position:relative; line-height:1.5}
.con03 .box .tit { padding: 3% 0; border: 2px solid #000; border-width: 0px 0 1px 0 ; background-color: #ffba00;}
.con03 .box .tit h2 {padding: 0 25px;}

.con03 .box .con .info {padding: 50px 0;}
.con03 .box .con .info li {}
.con03 .box .con .info li > div {float: left; width: 50%;} 
.con03 .box .con .info li > div.img {position: relative;}
/* .con03 .box .con .info li > div.txt {padding: 100px 0;} */
.con03 .box .con .info li > div.txt p {padding-top: 10px; font-size: 1.6rem; color: #6a6a6a;}

.con03 .box .con .info li:nth-child(1) .txt {padding: 50px 0;} 
.con03 .box .con .info li:nth-child(2) {margin-top: 50px;}
.con03 .box .con .info li:nth-child(2) .img {float: right; }

/* *Gif */
.gif01 {position: absolute; width: 70%; left: 16%; top: 9px; box-shadow:-10px -10px 0 #ffba00}
.gif02 {position: absolute; width: 70%; left: 16%; top: 9px; box-shadow:-10px -10px 0 #ffba00}



/* ! ================== con04 ==================  */
.con04 {position:relative; padding:70px 0; text-align:center; background:url(images_my/con03_bg.jpg) center top / cover;}

.con04 .tit p {font-size: 2.2rem; color: #000; margin-bottom: 10px;}
/* .con04 .box {position: relative; padding: 50px 0 0; top: -61px; max-width: 799px; margin: auto; border:2px solid #000; background:#fff; box-shadow:3px 3px 0 #000}
.con04 .box .con {position:relative; line-height:1.5}
.con04 .box .con .info {}
.con04 .box .con .info li {}
.con04 .box .con .info li > div {float: left; width: 50%;} 
.con04 .box .con .info li > div.img {}
.con04 .box .con .info li > div.txt {padding: 100px 0;}
.con04 .box .con .info li > div.txt p {padding-top: 10px; font-size: 2.6rem; color: #101010;}

.con04 .box .con .info li:nth-child(2) {}
.con04 .box .con .info li:nth-child(2) .img {float: right; position: relative;
top: -50px;} */

/* ! ================== con05 ==================  */
.con05 {position:relative; padding:70px 0; text-align:center; background:url(images_my/con04_bg.jpg) center top / cover;}
.con05 .box {position: relative; padding: 50px 0 0; margin: auto}
.con05 .box .con {position:relative; line-height:1.5}

.con05 .box .con p {position: relative; top: -19px; font-size: 1.6rem; color: #868583; letter-spacing: -1px;}

/* ! ================== con06 ==================  */
.con06 {position:relative; padding:70px 0; text-align:center; background-color: #cbcbcb;}
.con06 .box {position: relative; padding: 0; max-width: 799px; margin: 10px auto; background-color: #fff; border:2px solid #000; box-shadow:4px 4px 0 #f9ff4c}
.con06 .box .con {position:relative; line-height:1.5}
/* .con06 .box .con dl {padding: 15px;} */
.con06 .box .con dl dt {padding:10px 10px 25px; font-size: 8.2rem; font-weight: bold; line-height: 1.1; color: #fff;}
.con06 .box .con dl dd.txt {position: relative; padding: 30px 10px; font-size: 2rem; border-top: 2px solid #000; color: #222;}

.con06 .box .con dl dd.txt::after {content: ''; position: absolute; width: 33px; height: 33px; top: -19px; left: 47%; transform: translateX(-50%); background: #fff; border: 1px solid #000; border-width: 2px 2px 0 0 ; transform: rotate(-45deg);}

.con06 .warn {padding: 10px 0 20px; font-size: 1.6rem; color: #8c8c8c;}

/* .con06 .box:nth-child(1) .txt {margin-top: -35px;} */
.con06 .box.two {margin-top: 25px; background-color: #6f582c; box-shadow:4px 4px 0 #ffb900}
.con06 .box.two dl {padding: 15px;}


@media screen and (max-width: 1040px){
	html {font-size: 8px;}
	.container{padding:0 20px; box-sizing:border-box}
	.con01{height:auto; padding:44% 0}
	.con02 .box .info li > div {width: 44%;}
	.con03 .box::after {width: 170px; background-position-y: -35px}
	.con03 {height: auto;padding: 16% 0 0;}
	/* .con03 {background-size: 256%;} */

	.con03 {height: auto; padding: 20% 0 16%;}
	.con03 .container::after {top: -208px; width: 188px;}
	.con03 .box {top: 105px;}
}

@media screen and (max-width: 768px){
	html {font-size: 7px;}
	.con02, .con03, .con04, .con05, .con06
	{padding:50px 0}

	/* .con03, .con04 {padding:50px 0 30px} */

	.con02 .box, .con03 .box, .con04 .box, .con05 .box, .con06 .box 
	{max-width: 500px;}
	.con02 .box, .con03 .box, .con04 .box, .con06 .box 
	{max-width: 500px; border: 1px solid #000;}


	.con02 .box .con .info li > div, 
	.con03 .box .con .info li > div, 
	.con04 .box .con .info li > div 
	{float: none !important; width: 100%;} 

	.con02 .box .info li div.txt {padding: 0;}

	.con02 .box .con img {max-width: 70%;}
	.con03 .box .con img, .con04 .box .con img {max-width: 60%;} 
	.con03 .box .con h3 img {max-width: 50%;}
	.con05 h2 img {max-width: 50%;}
	
	.con02 .box .con .info li:nth-child(2) .img {margin-left: 0;}
	.con02 .box .con .info li:nth-child(2) .txt {margin-top: 10px;}

	.con02 .box .tit h2 img {max-width: 100%;}
	
	.con03 .box .con .info li > div.txt,
	.con04 .box .con .info li > div.txt 
	{padding: 10px 0;}

	.con03 .box, .con04 .box 
	{top: -40px; padding: 50px 0;}


	.con06 .box .con dl dd.txt {border-top: 1px solid #000;}
	.con06 .box .con dl dd.txt::after {width: 20px; height: 20px; top: -11px; border: 1px solid #000; border-width: 1px 1px 0 0;}


	.con03 {padding: 6% 0 226px; background-size: 250%;}
	.con03 .box {top: 176px; padding: 0;}
	.con03 .container::after {top: -62px; right: 7px; width: 141px;}
	.con03 .box .con .info li:nth-child(1) .txt {padding: 15px 0;}
	.con03 .box .con .info li {padding: 15px 0;}
	.con03 .box .con .info li .txt {padding: 20px 0;}

	.gif01 {width: 56%; left:23%; top: 9px;}
	.gif02 {width: 56%; left:23%; bottom: 9px;}

	.con03 .box .con .info li > div.txt p {padding-top: 35px;}

	.con05 {padding: 0 0 50px;}
	.con05 .box .con p {top: -1px;}

	.con06 .box .con dl dt {font-size: 5.2rem;}


	.con03 .box .con .info li:nth-child(2) {margin-top: 20px;}

}

@media screen and (max-width: 480px){
	/* html {font-size: 6.5px;} */

	/* .con03 .box, .con04 .box {top: -20px; padding: 50px 0 30px;} */
	/* .con05 .box {padding: 30px 0 0;} */

	/* .con03 {padding: 34% 0 5%;} */
	.con03 {background-size: 283%; padding: 12% 0 140px;}
	.con03 .box {padding: 0; top: 91px;}
	.con03 .container::after {top: -55px; right: -21px; width: 76px;}
	.con03 .box .con .info {padding: 35px 0;}

	.con06 {padding: 50px 0 30px;}
	.con06 .box .con dl dt {font-size: 4.2rem;}



}