#spot.spot {height: auto;}

#area4 {position: relative; padding-bottom: 40%;}
#area4 .item {background-color: #fff;}
#area4 .tit_mf1 {color: #4d3836; 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;  flex-grow:1; border-radius: 0; width: 100%; margin-left: 30px; background-color: rgba(255,255,255,.8); border-radius: 1em; background: rgba(255,255,255,.7) url('/2025_07/images/warm2/box.png') right bottom no-repeat;}
.boxs:first-child {margin-left: 0;}
.boxs .txt {padding: 2em 2em 4em 2em; word-break:keep-all; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;}
.boxs .txt p {padding-right: 5em;}
.boxs .tit_mf1 {position: relative; padding-top: 0; font-weight: 300;}
.boxs .tit_mf1 strong {display: inline-block; color: #e54459; margin-right: .3em;}
.boxs .img {position: absolute; z-index: 1;}
.boxs .img.icon1 {width: 50%; left: 8%; bottom: 12px; }
.boxs .img.icon1 img {max-height: 160px;}
.boxs .img.icon2 {width: 30%; right: 0; top: 0; text-align: right;}
.boxs .img.icon3 {width: 25%; right: 5%; top: -20%; text-align: right;}
.boxs .img.icon4 {width: 30%; right: 2%; top: -20%; text-align: right;}
.boxs .img.icon4_1 {width: 30%; left: 2%; bottom:2%;}
.boxs .img.icon5 {width: 60%; left: 2%; bottom:2%;}
.boxs .img.icon6 {width: 30%; left: 2%; bottom:10%;}
.boxs .img.icon7 {width: 30%; right: 2%; top: -10%; text-align: right;}



.item {margin-bottom: 2em;}
.item p {position: relative; z-index: 1;}



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


.area_1,
.area_2,
.area_3,
.area_4,
.area_5 {display: flex; flex-direction:row; margin-bottom: 50px;}

.area_1 {padding-top: 40px;}
.area_2 .boxs {flex:1;}
.area_2 .boxs:first-child p {padding-bottom: 140px;}
.area_3 {padding-top: 40px;}
.area_3 .boxs:first-child {width: 60%;}
.area_3 .boxs {width: 40%;}
.area_3 .boxs p {padding-bottom: 100px;}
.area_4 {padding-top: 30px;}
.area_4 .boxs:first-child {width: 30%;}
.area_4 .boxs {width: 70%;}
.area_4 .boxs .txt p {padding-right: 40%;}
.area_4 .boxs:first-child .txt p {padding-right: 0; padding-bottom: 100px;}


#spot.spot .tit {padding-top: 10px;}
#spot.spot .tit em {position: relative;}
#spot.spot .tit em::after {content:""; position: absolute; left: 50%; top: -.4em; width: .2em; height: .2em; background-color: #e54459; border-radius: 50%; transform:translateX(-50%);}


@media all and (max-width:1120px){
	.boxs .img.icon3 {width: 20%;}
	.boxs .img.icon4 {top: -17%;}
} 



@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 {margin-right: 0; }
.p_summary {margin-top: 2px !important;}

.tit_mf1 {margin-bottom: .6em;}
.tit_mf1 > span {display: block; font-size: .75em; letter-spacing:-0.0325em;}


.area_1, .area_2, .area_3, .area_4, .area_5 {display: block; margin-bottom: 0;}
 .boxs {width: 100% !important; margin-left: 0 !important; margin-bottom: 30px; background-size: 100% auto;}
.boxs .txt p {padding-right: 0;}
.area_2 .boxs:first-child p {padding-bottom: 70px;}
.area_3 .boxs p {padding-bottom: 60px;}
.area_4 .boxs:first-child .txt p {padding-bottom: 60px;}

.boxs .img.icon1 {width: 30%;}
.boxs .img.icon1 img {max-height: 120px;}
.boxs .img.icon4 {top: -10%; width: 30%;}
.boxs .img.icon4 img {max-height: 100px;}
.boxs .img.icon4_1 {width: 30%; left: 2%; bottom:2%;}
.boxs .img.icon4_1 img {max-height: 80px;}
.boxs .img.icon5 {width: 30%;}
.boxs .img.icon5 img {max-height: 100px;}
.boxs .img.icon6 {width: 20%; bottom: 5%;}
.boxs .img.icon6 img {max-height: 70px;}
.boxs .img.icon7 {top: -5%;}

.boxs .img.icon3 {width: 30%; top: -10%;}
.boxs .img.icon3 img {max-height: 100px;}

.tit_icon {width: 12%;}

.area_1,
.area_3,
.area_4 {padding-top: 0;}
}