@charset "utf-8";
/* ===================================================
dog_glamping CSS
====================================================== */
@media screen and (max-width: 600px) {
	br.br_pc { display: none;}
	br.br_sp { display: inline;}

	#contents a.btn_link{ padding: 15px 35px 15px 20px; border-radius: 50px;}
	#contents a.btn_link span{ text-align: center; font-size: 18px; line-height: 1.4;}
}

/*------------------------------------------------------------
main_slide
------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#main_slide h2 {
		width: 70%; max-width: 70%; top: 50%; left: 50%; 
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	#main_slide .flex-control-nav { bottom: 5px;}
}
@media screen and (max-width: 500px) {
	#main_slide h2 { width: 86%; max-width: 86%;}
}




/*------------------------------------------------------------
lead
------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#lead{ margin-bottom: 10vw; padding-top: 7vw;}
	#lead::before,
	#lead::after{ display: none;}
	#lead h3{ margin-bottom: 5vw; text-align: center;}
	#lead h3::before{ width: 90px; height: 48px;}
	#lead h3 img{ margin: 0 auto 30px; width: 80%;}
	#lead h3 span{ font-size: 24px;}
	#lead h3 + p{ margin-bottom: 5vw; text-align: left;}
	#lead ul{ margin-bottom: 7vw;}
	#lead ul li:nth-of-type(2) img:last-of-type{ left: -4vw; bottom: -25px; width: 35%;}
	#lead ul li:nth-of-type(5) img:last-of-type{ top: 45px; right: -3vw; width: 33%;}
}


/*------------------------------------------------------------
sec01
------------------------------------------------------------*/
@media screen and (max-width: 1196px) {
	#sec01 .detail_right .inner_col{ margin-left: 4vw;}
	#sec01 .detail_left .inner_col{ margin-right: 4vw;}
}
@media screen and (max-width: 1100px) {
	#sec1e .inner_col .photo .icon{ left: -25px;}
	#sec1f .inner_col .photo .icon{ right: -10px;}
}
@media screen and (max-width: 1015px) {
	#sec1g .inner_col .photo .icon{ left: -160px;}
}
@media screen and (max-width: 900px) {
	#sec01 [id^="sec1"]{ padding: 0 0 50px;}
	#sec01 #sec1a{ padding: 50px 0;}
	#sec01 [id^="sec1"] .sec_tit{ display: none;}
	#sec01 .detail_right .inner_col,
	#sec01 .detail_left .inner_col{
		margin: 0 4vw;
		padding: 30px 4vw;
		flex-direction: column;
		border-radius: 20px;
	}
	#sec01 .detail{ margin-bottom: 25px; width: 100%;}
	#sec01 .detail h4 .eng { margin-bottom: 15px;}
	#sec01 .photo { width: 100%; max-width: 100%; height: auto;}
	#sec01 .photo .icon{
		width: 28%; height: auto;
		max-width: 210px; max-height: 210px; border-radius: 50%;
	}

	#sec1b .inner_col .icon{ right: -3vw; bottom: -30px;}
	#sec1e .inner_col .detail .icon{ left: 0; bottom: 0;}
	#sec1e .inner_col .photo{ position: static;}
	#sec1e .inner_col .photo .icon{ left: auto; right: -3vw; bottom: -30px;}

	#sec1f .inner_col .photo{ position: static;}
	#sec1f .inner_col .photo .icon{ right: -3vw; bottom: -30px;}

	#sec1g .inner_col{ position: relative;}
	#sec1g .inner_col .detail .icon{ left: 30%; bottom: 0;}
	#sec1g .inner_col .photo .icon{ left: -3vw; bottom: -30px;}

	#sec01 .flex_col{ margin: 0 auto; width: 98%; flex-wrap: wrap;}
	#sec01 .flex_col li:first-of-type{ margin: 0 auto; width: 92%; max-width: 562px;}
	#sec01 .flex_col li:first-of-type img:last-of-type{ width: 21.6%; max-width: 162px;}
	#sec01 .flex_col li:nth-of-type(2){
		margin: -55px 0 0; padding-top: 0;
		margin-left: -20px; padding-top: 0; width: 51.5%; max-width: 51.5%;
	}
	#sec01 .flex_col li:last-of-type{ margin-left: -9.3%; width: 50%; max-width: 50%;}
}

@media screen and (max-width: 600px) {
	#sec01{ padding-bottom: 25vw;}
	#sec01 .tit_col h3::before{ width: 120px; height: 60px;}
	#sec01 h3 + p{ line-height: 1.6;}
	#sec01 .detail h4 .eng{ font-size: 48px;}
	#sec01 .detail h4 .eng span{ font-size: 18px;}
	#sec01 .detail h4 .sub_tit{ font-size: 18px;}
	#sec01 .detail p{ line-height: 1.6;}

	#sec1a .detail{ padding-top: 0;}
	#sec1c .detail{ padding-top: 0;}
	#sec1d .detail{ padding-top: 0;}
}


/*------------------------------------------------------------
sec02
------------------------------------------------------------*/
@media screen and (max-width: 900px) {
	#sec02::before{ display: none;}
	#sec02 .inner_col{ margin: 0 auto 200px; padding: 30px 4vw;}
	#sec02 .summary{ margin-right: 0;}
	#sec02 img{ width: 30%; right: 0; bottom: -176px;}
}

@media screen and (max-width: 600px) {
	#sec02{ padding: 10vw 0 7vw;}
	#sec02 .inner_col{ margin: 0 auto 120px;}
	#sec02 h3{ margin-bottom: 35px; padding-bottom: 15px; font-size: 24px;}
	#sec02 img{ bottom: -90px;}
	#sec02 ul li{ font-size: 16px;}
	#sec02 .note{ line-height: 1.6;}
	#sec02 .outlink a{ font-size: 18px;}
}