@charset "utf-8";
/* CSS Document */

:root{
	--wh:#e8ecef;
	--bro:#8d6449;
	--nezu:#e8ecef;
	--black1:#343434;
	--black2:#000000;
}

/*top*/

.load{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: black;
	transition: 0.7s;
	pointer-events: none;
}

#video{
	background-color: black;
}

.only{
	padding: 1.7vw 1.2vw;
    opacity: 0.7;
}

.contents1 {
        background-image: url(../img/tyasitu.jpg);
    height: 100vw;
    background-attachment: fixed;
    padding: 10vw 0 20vw;
    box-sizing: border-box;
    position: relative;
    background-size: cover;
	
}

.contents1:before{
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(0,0,0);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
}

.contents1 h2{
	    display: block;
    margin: auto;
    color: white;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    text-indent: -2em;
    font-size: 23px;
}

.contents2 > .d_flex:not(.btns){
	    background-color: black;
    padding: 8% 13vw 10% 7%;
    color: var(--nezu);
	max-width: 1280px;
	margin: auto;
}

.btns{
	padding-bottom: 8%;
}

.time, .season, .happy, .sec{
	top: 0;
}

.contents2{
	background-color: black;
	margin-top: -1px;
}

.contents2 > .d_flex img{
	max-width: 530px;
}

.contents2 .txt_area h3{
	font-size: max(2vw, 24px);
	/*transform: translateY(-20px);*/
	    height: 450px;
}

.contents2 .txt_area p{
	font-size: max(1vw, 16px);
	margin-top: 10px;
	margin-right: 10px;
	height: 330px;
}


.contents2 .txt_area, .contents4 .txt_area{
	    text-align: right;
    flex-flow: row-reverse;
}

.contents2 .txt_area h3, .contents2 .txt_area p, .contents4 .txt_area h3, .contents4 .txt_area p{
	    text-align: left;
    display: inline-block;
}

.contents3 .room1, .contents3 .room2, .contents3 .room3, .contents3 .room4{
	position: relative;
	margin-bottom: 100px;
}

.contents3{
	background-image: url(../img/back.jpg);
	color: var(--nezu);
	padding: 280px 0 150px;
    position: relative;
}

.contents3:before{
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,0) 20%, rgba(55, 19, 0, 0.7) 90%);
    z-index: 0;
    mix-blend-mode: darken;
}

.contents3:after{
	    content: "";
    display: block;
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , 0%);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: normal;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 95%);
}

.contents3 h2{
	text-align: right;
    position: absolute;
    right: 8%;
    border-left: 1px solid #ba7b50;
    padding-left: 15px;
    padding-bottom: 80px;
    box-sizing: border-box;
	z-index: 1;
}

.contents3 h2 img{
	max-width: 70px;
    text-align: right;
}

.contents4{
	padding: 20px 10%;
    margin-bottom: 6%;
}

.contents4 .grid_4{
	margin-top: 10%;
}

.jp{
	opacity: 1;
	padding-top: 0;
}

.contents4 h3{
	width: 25%;
}

.contents4 .txt_area p.txt_vertical{
	margin-right: 10%;
}

.contents4 h3 img{
	max-width: 70px;
}


.btns li{
	max-width: 50px;
    width: 25%;
    cursor: pointer;
    margin: 10px 5px;
    position: relative;
}
.btns li:before{
	    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #a9a48f;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%) rotate(45deg);
    z-index: 1;
    pointer-events: none;
}

.tyu{
	text-align: center;
	display: block;
	margin: auto;
	padding: 20px 30px;
	border: 1px solid rgba(205, 198, 196, 0.5);
	max-width: 400px;
	font-size: 22px;
	box-sizing: border-box;
	width: 90%;
	z-index: 1;
    position: relative;
}



.tyu_pare span{
	font-size: 14px;
	display: block;
    z-index: 1;
    position: relative;
    text-align: center;
    line-height: 1.2em;
    margin-top: 20px;
}

.adj{
	    max-width: 1280px;
    margin: left;
    /* margin-left: 1% !important; */
    margin: auto;
    margin-right: 20%;
}

.sub{
	font-size: max(1.8vw, 21px);
}

/*page3*/

.eye img{
	    max-width: 210px;
    margin-bottom: 50px;
}

/*#page3 .cate_wrap .box_wrap.grid_9{
	padding-left: 8.33333%;
    border-left: 1px solid black;
}*/

#page3 .cate_box h3{
	border-bottom: 1px solid #959595;
}

.posi_sti{
	position: sticky;
    top: 20px;
}

#page3 .cate_wrap .cate .txt{
	border-top: 1px solid #cecece;
    margin-bottom: 100px;
    text-align: center;
    padding: 20px;
    padding-top: 100px;
	    margin-top: 100px;
}

#page3 .txt h3{
	    font-size: 28px;
    margin-bottom: 30px;
    color: #8f8667;
}

/*page4*/

#page4 .history h2{
	font-size: max(4.2vw, 36px);
	line-height: 1.2em;
}

.sean .history h2, .room h2{
	font-size: max(2.3vw, 36px);
	line-height: 1.2em;
}

#page4 .history h2 span, .sean .history h2 span, .room h2 span{
	font-size: 1.5rem;
}

#page4 .history > div div.d_flex{
	height: 500px;
}

#page4 .history > div figure{
	height: 100%;
}

#page4 .history > div figure img{
	    object-fit: cover;
    background-color: lightgrey;
    width: 100% !important;
    height: 100% !important;
    object-position: center;
}

#page4 .test{
	margin-bottom: 25%;
}



#page4 .history > div:nth-of-type(2) p.txt_vertical{
	height: 500px;
}

.page4 .old{
	background-color: var( --nezu);
}

.page4 .old .txt_area{
	    padding: 5% 0;
}

.page4 .old .txt_area h3{
	font-size: max(2vw, 28px);
	    line-height: 1.4em;
}

.pic{
	background-position: center;
	background-size: cover;
}

.yuino{
	margin-top: 100px;
}

.sean{
	background-image: url(../img/wasi.jpg);
}

.sean .test:nth-of-type(1) figure{
	max-height: 600px;
	overflow: hidden;
}

.sean h3, .contents3 h3 {
	font-size: max(2.5vw, 26px);
	letter-spacing: 0.15em;
	padding-right: 5.5vw;
	/* display: inline-block; */
	box-sizing: border-box;
	line-height: 1.5em;
	text-indent: -1em;
	margin-top: 1em;
}

.sean .cus h3{
	padding-right: 1.5vw;
}

.sean img{
	    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}

/*page5*/
#page5 .room1, .room2,.room3,.room4 {
	top: 0;
	transition: all 0.3s;
	/*position: relative;*/
}

.room ul li{
	    padding: 5px 20px;
    background-color:var(--nezu);
    cursor: pointer;
	transition: all 0.3s;
}

.room ul li:hover{
	background-color: #8d6449;
	transition: all 0.3s;
	color: white;
}

/*page6*/

.recomend{
	background-image: url( "../img/back.jpg");
}

.recomend > div{
	    flex-flow: row-reverse;
    color: white;
	background-image: url( "../img/miyage_ko.jpg");
	    background-size: cover;
    background-position: center;
}

.recomend p{
	filter: drop-shadow(0px 0px 7px black);
}

#page6.page_content figure img{
	object-fit: contain;
    width: 100%;
    background-color: #e8ecef;
}

#page6.page_content .price h4{
	font-size: 26px;
    line-height: 1.2em;
}

/*page7*/

#page8.page_content h3{
	    font-size: 1.2em;
    margin-bottom: 0;
}

/*page09*/

#page9.page_content h3{
	    font-size: 1.7em;
    margin-bottom: 20px;
}

/*page10*/
#page10 figure.catch{
	    overflow: hidden;
    height: 100vh;
}

#page10 figure.catch img{
	object-fit: cover;
    height: 100%;
    object-position: center;
    width: 100%;
}

#page10.page_content .btn{
	    max-width: 100%;
    margin-top: 20%;
	
}

#page10.page_content ul li a{
	    font-size: 25px;
    letter-spacing: 0.1em;
}

#page10.page_content ul li a span{
	    font-size: 14px;
    vertical-align: baseline;
    margin-left: 0.5em;
}

#cms_1-a{}
#cms_1-a .cate_box:last-of-type{margin-bottom: 0;}
#cms_1-a .pager li{margin-right: 10px;}
#cms_1-a .pager li:last-of-type{margin-right: 0px;}
.cms_1-a .box_wrap{align-items:flex-start!important}

#page2{
	max-width: 860px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	.pic {
    height: 500px;
}
	
	.contents3 h2 {
    text-align: center;
    position: relative;
    right: 0%;
    border-left: none;
    padding-left: 0;
    padding-bottom: 60px;
    box-sizing: border-box;
    margin: auto;
}
	
	.contents3 h2 img {
    max-width: 300px;
    text-align: center;
    margin: auto;
}
	
	#page10 .catch{
		display: none;
	}
	
	.gift_banner {
    left: auto;
    right: 0;
    padding: 30px 5px;
    font-size: 17px;
}
	
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

.contents4 h3 {
	/*width: 25%;
	max-width: 60px;*/
	width: 100%;
    max-width: 160px;
    margin-bottom: 20px;
}
	
.contents1 {
    height: 100vh;
	padding: 30% 0;
}

.contents1 h2 {
    position: relative;
}
	
.main_img{
	height: 100vh;
	background-color: black;
}
	
#video {
    background-color: black;
    transform: translateY(-50%);
    top: 50%;
    position: relative;
}	
	
.contents3 {
   padding: 150px 10px;
	    margin-top: -10px;
}
	
.contents2 .txt_area p {
    height: 230px;
}
	
.contents2 .txt_area h3 {
    height: 300px;
}
	
.time, .season, .happy, .sec{
		padding: 8% 7% 10% 7% !important;
	}
	
.sean h3, .contents3 h3 {
    line-height: 1.25em;
    text-indent: 0em;
}
	
.contents2 .txt_area, .contents4 .txt_area {
    text-align: left;
    flex-flow: wrap;
}
	
	.contents4 .txt_area p.txt_vertical{
		width: 100%;
		display: block;
		margin: 0;
	}
	
.contents4 {
    padding: 100px 10%;
}	

.contents4 h3 img {
    max-width: 100%;
}
	.cms_1-a .cate_box:last-of-type{margin-bottom: 0;border-bottom: none;}
	
	
	#page10.page_content ul li a span {
		margin-left: 0;
	}
	
	#page10.page_content ul li a {
    line-height: 1.2em;
}
	
	.sean .history .txt_area-l {
		padding: 0;
	}
	
	#page4 .history .txt_area-l{
		padding: 15px 0;
	}
	
	.sean .history .taka{
		height: 460px;
	}
	
	.sean .history .yuino {
		margin-top: 0px;
	}
	
	.sean .history .test{
		margin-bottom: 50px;
	}
	
	.sean .history h2 {
		font-size: max(2.3vw, 26px);
	}
	
	.sean .history h2 span {
    font-size: 1rem;
}
	
	#page4 .history > div div.d_flex {
    height: auto;
}
	
	#page4 .history > div:nth-of-type(2) p.txt_vertical {
		height: auto;
	}
	
}