#spot.spot {height: auto;}

#area4 {position: relative;}
#area4 .item {background-color: #fff;}
#area4 .tit_mf1 {position: absolute; left: 5%; bottom: 1em; width: 90%; color: #ff7a8c; font-family: 'GmarketSans'; letter-spacing:-0.03em;}
#area4 .tit_mf1 span {font-size: 1.2em; letter-spacing:-0.075em;}


.boxs {position: relative; border-radius: 0; height: 100%; background-color: #fff;}
.boxs .txt {padding: 2em; 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; color: #ff7a8c; font-weight: 300;}
.boxs .tit_mf1 strong {display: inline-block; margin-top: .1em;}

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

.area_1 {display: flex; gap:2em;}
.area_1 .item .txt {padding-bottom: 0;}
.area_1 .item:first-child {width: 55%;}
.area_1 .item:first-child .img {margin-top: 2em;}
.area_1 .item:first-child .txt {display: flex; height: 100%; flex-direction: column; justify-content: space-between;}
.area_1 .item:last-child {width: 45%;}
.area_1 .item:last-child .txt {display: flex; height: 100%; flex-direction: column; justify-content: space-between;}

.area_2 {position: relative;}
.area_2 .tit_mf1 {position: relative; z-index: 1;}
.area_2 .img {z-index: 0; position: absolute; right: 0; top: 0; height: 100%; max-width: 40%;}
.area_2 .img img {max-height: 100%;}

.area_3 {position: relative; padding-top: 5%;}
.area_3 .img {position: absolute; right: 0; top: -15.5%; max-width: 40%;}

.area_4 {display: flex; gap:2em;}
.area_4 .item:first-child {width: 65%;}
.area_4 .item:first-child .img {position: absolute; right: -5%; top: -5%;}
.area_4 .item:last-child {width: 35%;}
.area_4 .item:last-child .txt {padding-bottom: 0;}
.area_4 .item:last-child .txt {display: flex; height: 100%; flex-direction: column; justify-content: space-between;}
.area_4 .item:last-child img {width: 100%;}


.spot .tit {display: inline-block; padding: 0 1em;}
.spot .img {margin: 0 auto;}
.warm2_wrap {max-width:1235.99px; margin: 0 auto 5%; background-color: #ffa8c9;}

#area1 {padding: 0;}

.tit_icon {position: absolute; left: 0; bottom: 100%;}



@media all and (max-width:1130px){ 
	 #area4 .item {height: 0; padding-bottom: 60%;}
	 #area4 .tit_mf1 span {font-size: 1em;}
}

@media all and (max-width:798px){ 
	 #area4 .item {height: auto; padding-bottom: 0;}
	 #area4 .inr-c {background-color: #fff;}
	 #area4 .tit_mf1 {position: static; margin-top: -7em; width: 100%; font-size: .9em; padding: 1em; box-sizing:border-box;}

	 .area_1,
	 .area_4 {display: block;}
	 .area_1 .item:first-child,
	 .area_1 .item:last-child {width: 100%;}
	 .area_4 .item:first-child,
	 .area_4 .item:last-child {width: 100%;}

	 .boxs .txt {padding: 1.5em;}

	 .area_2 .img {right: 0; top: auto; bottom: 0;}

	 .area_3 .img {top: -5%;}
	 .area_4 .item:first-child .img {max-width: 40%;}

	 .warm2_wrap .tit_mf1 strong {font-size: 1em;}

	#spot.spot {flex-direction: column;}
	 .spot .ttt {position: static !important; background-color: #ffa8c9; padding: 0 5%; width: 90% !important;}
	 .spot .ttt > div {background-color: #fff; margin: 0 auto 2em !important; padding: 1.5em 1em; width: 100%;}
	 .spot .t1 {font-size: 0.9em !important;}
	 .spot .tit2 {font-size: 1.2em !important;}

	 .tit_icon {width: 1em;}
}