#spot.spot {height: auto;}

#area4 {position: relative;}
#area4 .item {background-color: #fff;}
#area4 .tit_mf1 {color: #1b9420; font-family: 'GmarketSans'; letter-spacing:-0.03em;}
#area4 .tit_mf1 span {font-size: 1.2em; letter-spacing:-0.075em;}


.boxs {z-index: 1; position: relative; border-radius: 0; height: 100%; background-color: rgba(255,255,255,.8); border-radius: 1em; margin-bottom: 5%;}
.boxs:after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 2em; border-radius: 1em 1em 0 0;}
.boxs .txt {padding: 4em 3em 3em; margin-right: 200px; word-break:keep-all; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;}
.boxs .tit_mf1 {position: relative; padding-top: 0; font-weight: 300;}
.boxs .tit_mf1 strong {display: inline-block; margin-top: .1em;}
.boxs .img {position: absolute; right: 2em; top: 50%; margin-top: 1em; transform:translateY(-50%); width: 170px; text-align: center;}
.boxs .img.icon1 {z-index: 1; width: 40%; right: 20%; top: 20%; transform:translateY(0);}
.boxs .img.icon2 {z-index: 1; width: 60%; right: auto; left: 70%; top: 20%; transform:translateY(0);}



.item {margin-bottom: 2em;}
.item p {position: relative; z-index: 1;}

.area_1 {position: relative;}
.area_1 .boxs:after {background-color: #4172cf;}
.area_1 .boxs .tit_mf1 strong {color: #4172cf;}


.area_2 {}
.area_2 .boxs:after {background-color: #ff874f;}
.area_2 .boxs .tit_mf1 strong {color: #ff874f;}

.area_3 {position: relative;}
.area_3 .boxs:after {background-color: #1b9420;}
.area_3 .boxs .tit_mf1 strong {color: #1b9420;}
.area_3 .boxs .txt {margin-right: 0;}
.area_3 .boxs .img {margin-top: 0; right: 0; top: 0; transform:translateY(0);}
.area_3 .pos-r {position: relative; padding-right: 200px;}


.spot .tit {display: inline-block; }
.spot .img {margin: 0 auto;}
.warm2_wrap {max-width:1235.99px; margin: 0 auto;}

#area1 {padding: 0;}

.tit_icon {position: absolute; right: 0; bottom: 110%; width: 100%; text-align: center;}
.bg_icon {position: absolute; width: 30%;}
.bg_icon.ico1 {top: 5%; right:90%;}
.bg_icon.ico2 {z-index: 0; top: 5%; left:95%;}
.bg_icon.ico3 {top: 20%; right:95%; z-index: 2;}
.bg_icon.ico4 {bottom: -20%; left:70%; width: 60%; z-index: 2;}




@media all and (max-width:798px){ 
	 #area4 img {width: 50%;}
	 #area4 .tit_mf1 {position: static; width: 100%; font-size: .9em; padding: 1em; box-sizing:border-box;}

	 .warm2_wrap .tit_mf1 strong {font-size: 1em;}

#spot.spot .inr-c {padding-left: 0;}
#spot.spot p.t1 {font-size: 1em !important;}
#spot.spot .tit {letter-spacing:-0.0325em; font-size: 30px;}

.boxs .txt {padding: 2.5em 1.5em 1.5em; margin-right: 0; }
.boxs:after {height: .8em;}
.boxs .img {right: 1em; top: .5em; transform:translateY(0); width: 80px; white-space:nowrap;}
.p_summary {margin-top: 2px !important;}
.area_3 .pos-r  {padding-right: 0;}
.area_3 .boxs .img {top: -90px;}

.tit_mf1 {margin-bottom: 1em;}
.tit_mf1 > span {font-size: .75em; letter-spacing:-0.0325em;}

.boxs .img.icon1 {right: -22%;}
.boxs .img.icon2 {top: 90%; left: 50%;}

.bg_icon.ico2 {left: 85%;}
.bg_icon.ico4 {left: 50%; bottom: -3%;}

}