@charset "utf-8";
/* ===================================================
dog glamping CSS
====================================================== */

body { background: #fff;}

br.br_sp { display: none;}
.ofi{ object-fit: cover;}

#contents { width: 100%; position: relative; background: #fff; color: #562e0b;}

#breadcrumbs {
	margin: 0; position: absolute; left: 50%; top: 3px; z-index: 5;
	color: #fff; text-shadow: 0 0 5px #000;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#breadcrumbs a { color: #fff;}

#contents .eng { font-family: 'Montserrat', sans-serif;}

#contents a.btn_link{
	display: block; margin: 0 auto; padding: 20px 35px 20px 20px;
	width: 490px; max-width: 92%; text-align: center; position: relative;
	background: #e67816; border-radius: 35px; box-sizing: border-box;
}
#contents a.btn_link::after{
	display: inline-block; content: ''; width: 15px; height: 15px;
	right: 20px; top: calc(50% - 7.5px); position: absolute;
	background: url(../../dog_glamping/img/icon_arrow.png) no-repeat;
	background-size: 100% auto;
}

#contents a.btn_link span{ color: #fff; font-size: 20px;}
#contents a.btn_link:hover{ background: #f1af54;}


/*------------------------------------------------------------
main_slide
------------------------------------------------------------*/
#main_slide { position: relative; z-index: 0;}

#main_slide h2 {
	width: 48%; max-width: 638px;
	position: absolute; top: 50%; left: 2.5%; z-index: 5;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#main_slide .slides { position: relative; z-index: 0;}
#main_slide .slides img {
	width: 100%; min-height: 300px;
	object-fit: cover; font-family: 'object-fit: cover;';
	object-position: right bottom;
}
#main_slide .flex-control-nav { bottom: 18px; z-index: 5;}
#main_slide .flex-control-nav li a {
	background: none; border: 1px solid #fff;
	-webkit-box-shadow: none; box-shadow: none;
}
#main_slide .flex-control-nav li a.flex-active { background: #fff;}


/*------------------------------------------------------------
lead
------------------------------------------------------------*/
#lead{ margin-bottom: 80px; padding-top: 60px; position: relative; overflow: hidden;}
#lead::before{
	display: block; content: ''; width: 233px; height: 252px;
	top: 504px; right: calc((50% - 550px) - 250px); position: absolute;
	background: url(../../dog_glamping/img/lead_bg_r.png) no-repeat left bottom;
}
#lead::after{
	display: block; content: ''; width: 223px; height: 252px;
	top: 1383px; left: calc((50% - 550px) - 250px); position: absolute;
	background: url(../../dog_glamping/img/lead_bg_l.png) no-repeat left bottom;
}

#lead .inner{ margin: 0 auto; width: 92%; max-width: 1100px;}

#lead h3{
	margin-bottom: 40px;
	display: flex; justify-content: center; align-items: center;
	flex-direction: column;
}
#lead h3::before{
	margin-bottom: 20px;
	display: block; content: ''; width: 180px; height: 95px;
	background: url(../../dog_glamping/img/icon_01.png) no-repeat;
	background-size: contain;
}
#lead h3 img{ margin-bottom: 30px;}
#lead h3 span{ color: #421f00; font-size: 35px;}
#lead h3 + p{
	margin-bottom: 45px; color: #562e0b; font-size: 16px;
	text-align: center; line-height: 2;
}

#lead ul{ margin-bottom: 60px; display: flex; justify-content: space-between; flex-wrap: wrap;}
#lead ul li{ margin-bottom: 10px; width: 49.5%; position: relative;}
#lead ul li:first-of-type{ width: 100%;}
#lead ul li:nth-of-type(2) img:last-of-type{ left: -90px; bottom: -35px; position: absolute; z-index: 2;}
#lead ul li:nth-of-type(5) img:last-of-type{ top: 99px; right: -11px; position: absolute;}


/*------------------------------------------------------------
sec01
------------------------------------------------------------*/
#sec01 {
	padding-bottom: 225px;
	background: #f1af54 url(../../dog_glamping/img/sec01_bg.png) no-repeat center bottom;
	background-size: 100% auto;
}

#sec01 .tit_col{
	padding: 0 4% 40px;
	text-align: center; background: #fff;
}

#sec01 .tit_col h3 {
	margin-bottom: 30px;
	display: flex; justify-content: center; align-items: center;
	flex-direction: column;
}
#sec01 .tit_col h3::before{
	display: block; content: ''; width: 227px; height: 111px;
	background: url(../../dog_glamping/img/icon_02.png) no-repeat;
	background-size: contain;
}
#sec01 .tit_col h3 span{
	margin-top: 26px;
	color: #a96903; font-size: 35px; font-weight: bold;
}

#sec01 h3 + p { color: #562e0b; font-size: 18px; text-align: center;}

#sec01 [id^="sec1"]{
	padding: 50px 0;
	position: relative; overflow: hidden;
}

#sec01 [id^="sec1"] .sec_tit{
	position: absolute; top: 50%;
	color: #f4c181; font-size: 110px; font-weight: 800; line-height: 85px;
	writing-mode: vertical-rl; font-feature-settings: 'palt' 0; white-space: nowrap
}
#sec01 [id^="sec1"].detail_right .sec_tit{ left: 0; transform: translate(0, -50%);}
#sec01 [id^="sec1"].detail_left .sec_tit{ right: 0; transform: translate(0, -50%) rotate(180deg);}

#sec01 .inner_col {
	padding: 50px 0;
	background: #fff;
	display: flex; justify-content: space-between;
	position: relative; z-index: 1;
}
#sec01 .detail_right .inner_col{
	margin-left: calc( 50vw - 550px);
	padding-left: 4%;
	padding-right: 2%;
	flex-direction: row;
	border-radius: 20px 0 0 20px;
}
#sec01 .detail_left .inner_col{
	margin-right: calc( 50vw - 550px);
	padding-right: 4%;
	padding-left: 2%;
	flex-direction: row-reverse;
	border-radius: 0 20px 20px 0;
}

#sec01 .detail { width: 31.4%;}
#sec01 .detail h4 { margin-bottom: 30px; text-align: center;}
#sec01 .detail h4 .eng {
	margin-bottom: 35px;
	display: flex; justify-content: center; flex-direction: column;
	color: #562e0b; font-size: 55px; font-weight: 800;
	line-height: 1; letter-spacing: 5px;
}
#sec01 .detail h4 .eng span {
	padding: 10px 0 0;
	color: #836d5a; font-size: 20px; font-weight: 500;
	letter-spacing: 2px;
}

#sec01 .detail h4 .sub_tit{
	padding: 0 25px; display: inline-block;
	color: #fff; font-size: 20px; font-weight: bold;
	line-height: 40px; background: #e67816; border-radius: 20px;
}

#sec01 .detail p{ color: #562e0b; font-size: 16px; line-height: 2;}

#sec01 .photo { width: 65.6%; max-width: 820px; height: 500px;}
#sec01 .photo > img:first-of-type { width: 100%; height: 100%;}
#sec01 .photo .icon{ border-radius: 115px; border: solid #fff 5px;}


/* 個別指定 */
#sec1a .inner_col{ position: relative;}
#sec1a .inner_col .icon{
	left: 8px; bottom: 0; position: absolute;
	width: 21%; max-width: 159px;
}

#sec1b .inner_col{ position: relative;}
#sec1b .inner_col .icon{ right: -55px; bottom: -11px; position: absolute;}
#sec1c .detail{ padding-top: 50px;}
#sec1d .detail{ padding-top: 50px;}

#sec01 #sec1e.detail_right .sec_tit{ left: 17px;}
#sec1e .inner_col{ position: relative;}
#sec1e .inner_col .detail .icon{
	left: -56px; bottom: -30px; position: absolute;
	width: 21%; max-width: 159px;
}
#sec1e .inner_col .photo{ position: relative;}
#sec1e .inner_col .photo .icon{ left: -73px; bottom: -16px; position: absolute;}

#sec1f .inner_col .photo{ position: relative;}
#sec1f .inner_col .photo .icon{ right: -28px; bottom: -33px; position: absolute;}

#sec1g .inner_col{ position: relative;}
#sec1g .inner_col .detail .icon{
	left: 99px; bottom: 10px; position: absolute;
	width: 10%; max-width: 63px;
}
#sec1g .inner_col .photo .icon{ left: -125px; bottom: -40px; position: absolute;}

/* セクション下部 */
#sec01 .flex_col{ display: flex; justify-content: center;}
#sec01 .flex_col li img{ filter: drop-shadow(0 0 13px rgba(0,0,0,0.5));}
#sec01 .flex_col li:first-of-type{
	width: 35.1%; max-width: 562px; position: relative;
}
#sec01 .flex_col li:first-of-type img:last-of-type{
	right: 37px; bottom: 3px; position: absolute;
}
#sec01 .flex_col li:nth-of-type(2){
	margin-left: -20px; padding-top: 47px;
	width: 31.5%; max-width: 504px;
	position: relative; z-index: 2;
}
#sec01 .flex_col li:last-of-type{
	margin-left: -29px; width: 28.9%; max-width: 463px;
	position: relative; z-index: 2;
}


/*------------------------------------------------------------
sec02
------------------------------------------------------------*/
#sec02{ padding: 100px 0 60px; position: relative; overflow: hidden;}
#sec02::before{
	display: block; content: ""; width: 391px; height: 241px;
	top: 0; left: 0; position: absolute;
	background: url(../../dog_glamping/img/sec02_bg.png) no-repeat left top;
	background-size: 100% auto;
}

#sec02 .inner_col{
	margin: 0 auto 80px; padding: 70px 80px 50px; width: 92%; max-width: 1100px;
	position: relative; z-index: 2;
	background: url(../../dog_glamping/img/sec02_bg.jpg);
	border-radius: 25px; box-sizing: border-box;
}

#sec02 h3{
	margin-bottom: 35px; padding-bottom: 25px;
	color: #562e0b; font-size: 35px; font-weight: bold; text-align: center;
	border-bottom: 1px solid #a08a76;
}

#sec02 ul{ margin-bottom: 35px;}
#sec02 ul li{
	margin-bottom: 15px; padding-left: 20px;
	color: #562e0b; font-size: 17px; position: relative;
}
#sec02 ul li::before{
	display: block; content: '・'; width: 20px; height: 20px;
	top: 0; left: 0; position: absolute;
}

#sec02 .note{ margin-bottom: 10px; font-size: 18px; font-weight: bold;}

#sec02 .summary{ display: flex; margin-right: 180px;}
#sec02 .summary dl{ width: calc( 100% / 3); text-align: center; box-sizing: border-box;}
#sec02 .summary dl:not(:last-of-type){ border-right: 1px solid #dcdcdc;}
#sec02 .summary dl dt{
	padding: 10px; color: #fff; font-size: 16px; font-weight: bold;
	background: #6c675b; position: relative;
}
#sec02 .summary dl dt::after{
	display: block; content: ''; width: 0; height: 0; 
  position: absolute; bottom: -10px; left: calc(50% - 6px);
  border-top: 12px solid #6c675b;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}
#sec02 .summary dl dd{
	padding: 12px 10px 10px; font-size: 15px;
	text-align: center; background: #fff;
}

#sec02 img{ right: -72px; bottom: -11px; position: absolute;}

#sec02 .outlink{ margin: 45px 0 0; text-align: center;}
#sec02 .outlink a{
	margin: 0 auto; padding: 0 0 7px; width: 325px; color: #562e0b; font-size: 20px;
	display: flex; justify-content: center; align-items: center;
	border-bottom: 1px solid #562e0b;
}
#sec02 .outlink a::after{
	display: inline-block; content: ''; margin-left: 30px; width: 15px; height: 15px;
	background: url(../../dog_glamping/img/icon_arrow_02.png) no-repeat;
	background-size: 100% auto;
}
#sec02 .outlink a:hover{ border-color: #fff;}