@charset "UTF-8";
/* CSS Document */
/*WordPress対策・全ページ余白なし*/
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		margin: 0;
		padding: 0;
		color: #fff;
		background: #000;
	}
	
	img {
		vertical-align: bottom; /*下に余白を作らない*/
		max-width: 100%;
		width: 100vw;
	}
	
	p,h1,h2,h3,h4,span {
	}
	
    ul li{
		list-style: none;
	}

	a {
		text-decoration: none;
		color:#000;
	}

	.wpcf7-spinner{
		margin: 0 auto !important;
		display: block !important;
	}

	/* input全体に指定する場合は以下 */
input{
    -webkit-appearance: none;
}

input[type="checkbox"] {
    appearance: auto !important;
}
	
	.wrap {
		overflow: hidden;
	}
	
	/*floatを解除する*/
	.clear {
		clear: both;
	}

	.all-page {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}

/*SP*/
	@media only screen and (max-width: 768px) {
		.pc { display: none !important; }
		.sp { display: block !important; }
		.pcbr{
		display: none !important;
		}
		.spbr{display: block !important;}
		
		.main_wrap {
			width: 92%;
			margin: 0 auto;
		}
	}
		
/*SP*/
	@media only screen and (max-width: 768px) {
		/*グローバルメニュー*/
		header {
			position: fixed;
			z-index: 100;
			width: 100%;
			height: 60px;
		}
		
		#logo {
			position: relative;
			z-index: 101;
			width: 280px;
			height: auto;
			margin-left: 30px;
			margin-top: -5px;
		}
		
		.cont_wrap{
			position: relative;
			width: 90%;
			margin:0 auto;
		}
		
		.menu-sp {
			position: absolute;
			z-index: 104;
			top: 0;
			left: 3%;
			width: 50px;
			height: 60px;
		}
		
		nav.globalMenuSp {
    position: fixed;
    z-index: 104;
    top: 0;
    left: 0;
    color: #404040;
    text-align:center;
    transform: translateX(100%);
    transition: all 0.6s;
    width: 100%;
	height: 100%;
	overflow-y: scroll;
}
 
nav.globalMenuSp ul {
    background:rgba(0, 0, 0, 0.9);
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding-top: 60px;
}

nav.globalMenuSp ul li {
	position: relative;
    font-size: 16px;
    list-style-type: none;
    width: 60%;
    height: auto;
    color: #fff;
    display: inline-block;
    border-bottom: 1px solid #fff;
}

nav.globalMenuSp ul li:first-child{
	position: relative;
    font-size: 16px;
    list-style-type: none;
    width: 60%;
    height: auto;
    color: #fff;
    display: inline-block;
    border-top: 1px solid #fff;
}
		
		.head-menu-top{
			padding-top: 60px;
			margin: 10px 0;
			font-size: 28px !important;
			font-weight: bold;
		}
 
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
}
 
nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 16px 0;
    font-size: 18px;
    font-weight: bold;
}
		
		nav.globalMenuSp ul li a span {
			display: block;
			font-size: 12px;
		}
		
		nav.globalMenuSp ul li a font {
			color: #de0415;
			font-size: 12px;
			position: absolute;
			top: 20px;
			right: 20px;
		}
 
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateX(0%);
}
	
	.navToggle {
    display: block;
    position: absolute;    /* bodyに対しての絶対位置指定 */
    left: 0%;
    top: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 999;
    text-align: center;
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 34px;
	border-radius: 6px;
    border-bottom: solid 1px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	left: 7px;
}
 
.navToggle span:nth-child(1) {
    top: 8px;
}
 
.navToggle span:nth-child(2) {
    top: 20px;
}
 
.navToggle span:nth-child(3) {
    top: 32px;
}
	
	/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
	width: 26px;
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
	width: 26px;
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*メニュー2階層*/	
	nav.globalMenuSp ul .second-menu {
	color:#e61869;
	position: relative;
    width: 90%;
	height:auto;
    border-bottom:  solid 2px #fff;
	padding: 10px 0;
    padding-left: 10%;
}	
	nav.globalMenuSp ul .second-menu span{
	font-size: 16px;
    font-weight: bold;
    margin-right: 16px;
	float: right;
	line-height: 1;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 16px solid #de0415;
	transition: all 0.2s ease-in-out;
}			
	
	nav.globalMenuSp ul .second-menu span.open{
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 45%;
		}
		
		.accordion__content {
			display: none;
			padding: 0px !important;
		}
		
		.header_accordion{
			display: block;
			color: #fff;
			padding: 26px 0;
			font-size: 18px;
			font-weight: bold;
		}
		
		.head-menu span{
			display: block;
			font-size: 12px;
		}
		
		.accordion_a a{
			width: 120px !important;
			padding: 4px 20px !important;
			margin: 10px auto;
			font-size: 16px !important;
			text-align: center;
			letter-spacing: 4px;
			border: 1px solid #fff;
		}
		
		/*フッター*/
		footer {
			position: relative;
			z-index: 1;
			width: 100%;
			height:auto;
		}
		
		.logo-area {
			position: relative;
			display: block;
	    }
	
	    .footer-box{
			position: relative;
			width:100%;
			height: auto;
			text-align: center;
			margin: 0 auto;
			padding: 40px 0;
			background: #72274b;
		}
		
	    .logo-area {
			position: relative;
			display: block;
			margin: 20px auto;
	    }
	
	    .logo-area img{
		    width: 220px;
		    height: auto;
	    }
	
		.add-area{
			text-align: center;
			color: #fff;
			font-size: 16px;
		}
	
		.add-area span{
			display: block;
			font-size: 12px;
			margin-bottom: 20px;
		}
		
		.logo_sub {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 20px;
		}
		
		.footer-credit {
			background: #8b6239;
			color: #fff;
			text-align: center;
			padding: 20px 0;
		}
}

/*SP*/
	@media only screen and (max-width: 768px){
	.top_page {
		padding-top: 68px;
	}
		
	/*トップページ*/
	.top-keyvisual{
		position: relative;
	}
	
	.slide-catch{
		position: absolute;
		z-index: 10;
		top: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
	}
	
	.slide-catch02{
		position: absolute;
		z-index: 10;
		top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
	}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
}

/*　背景画像設定　*/
		.slider {
		    position: relative;
			width: 100%;
			height: 600px;
		    overflow: hidden;
			z-index: 1;
		}

		.slide-image {
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100vh;
		}

		.slide-image:nth-child(1) {
		  background-image:url(https://test02.d-sky-n.com/wp-content/themes/yotumugi/images/slide/top-slide-1@4x.png);
		}

		.slide-image:nth-child(2) {
		  background-image:url(https://test02.d-sky-n.com/wp-content/themes/yotumugi/images/slide/top-slide-2@4x.png);
		}

		.slide-image:nth-child(3) {
		  background-image:url(https://test02.d-sky-n.com/wp-content/themes/yotumugi/images/slide/top-slide-3@4x.png);
		}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}
		
	.slide_in{
		position: absolute;
        top: 320px;
        left: 50%;
        width: 300px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.sublogo{
		width: 80%;
        height: auto;
        margin: 0 auto;
	}
	
	.sublogo02{
		width: 60%;
        height: auto;
        margin: 0 auto;
	}
	
	.sublogo2_1{
		width: 70%;
        height: auto;
        margin: 0 auto;
	}
	
	.sublogo2_2{
		width: 51%;
        height: auto;
        margin: 0 auto;
	}
	
	.lbox {
		position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        min-width: 230px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);	
	}
	
	.slide_in p{
		writing-mode: vertical-rl;
        margin: 20px auto;
        font-size: 24px;
        line-height: 40px;
	}
		
		.head_btn{
			vertical-align: top;
			display: inline-block;
			margin: 0 auto;
		}
		
		.head_btn a{
			position: relative;
			display: block;
			width: 180px;
			height: auto;
			padding: 0.6em 0;
			text-align: center;
			color: #fff;
			margin: 14px 20px;
			font-size: 16px;
			font-weight: bold;
			background: rgba(0, 0, 0, 0.7); 
			border: 1px solid #fff;
			border-radius: 30px;
		}
	
		.head_btn02{
			display: none;
			vertical-align: top;
		}
		
		.head_icon{
			position: absolute;
			z-index: 104;
    		top: 0;
			right: 0;
		}
	
		.head_icon img {
			display: block;
			width: 50px;
			margin: 10px;
		}
		
		.content-top {
			padding: 40px 0;
		}
		
		.content-top h2{
			position: relative;
			text-align: center;
			width: 100%;
			font-size: 30px;
			margin: 0 auto;
			padding: 6px 0;
			font-weight: 100;
			letter-spacing: 4px;
			font-family: 'Shippori Mincho B1', serif;
		}
	
		.content-top h2:after{
			content: "";
			position: absolute;
			display: block;
			top: 50px;
			left: 49%;
        	transform: translateX(-50%);
			width: 200px;
			height: 1px;
			background: #000;
		}
		
		.title_img{
			width: 200px !important;
		}
	
		.title_img02{
			width: 290px !important;
		}
	
		.content-top p{
			display: block;
			text-align: center;
			font-size: 14px;
        	padding-top: 12px;
		}
	
		#catch_area{
			text-align: center;
			margin-bottom: 60px;
		}
	
		#catch_area img{
			margin: 40px auto;
			width: 90%;
			height: auto;
		}
	
		.catch {
			font-size: 14px;
			font-weight: bold;
			line-height: 24px;
			text-align: center;
		}
	
		.catch span {
			display: block;
			font-size: 12px;
		}
		
		.kei {
		  position: relative;
		  display: inline-block;
		  font-size: 16px;
		  height: 50px;
		  margin: 60px 0;
		}

		.kei::before {
		  content: '';
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  width: 1px;
		  height: 50px;
		  margin: auto;
		  background-color: #fff;
		}
	
	
		.room_link{
			display: flex;
			justify-content: center;
			flex-flow: column;
			margin-bottom: 60px;
		}
	
		.link_area{
			position: relative;
			width: 100%;
			height: auto;
		}
	
		.stay_pa{
			display: flex;
			justify-content: center;
			flex-flow: column;
			margin: 20px 0;
		}
	
		#terms-top {
			padding-bottom: 120px;
		}
	
		.term_btn{
			vertical-align: top;
			width: 180px;
			display: block;
			margin: 40px auto;
			margin-top: 0;
		}
	
		.term_btn a{
			position: relative;
			display: block;
			padding: 0.6em 0;
			text-align: center;
			color: #fff;
			font-size: 16px;
			font-weight: bold;
			background: rgba(0, 0, 0, 0.7);
			border: 1px solid #fff;
			border-radius: 30px;
		}
	
		.bline{
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
		}
	
		.marn{
			margin: 0 !important;
		}
	
		.top-image{
			background-image:url(https://test02.d-sky-n.com/wp-content/themes/yotumugi/images/room/iyasaka_sp.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			width: 100%;
			height: 100vh;
		}
	
		.top-image02{
			background-image:url(https://test02.d-sky-n.com/wp-content/themes/yotumugi/images/room/sakazuki_sp.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			width: 100%;
			height: 100vh;
		}
	
		#gallery-top{
			margin-bottom: 60px;
		}
	
		.gallery_area{

		}
	
		.gallery_area h3{
			position: relative;
			font-size: 28px;
			text-align: center;
			padding: 6px 0;
			font-weight: 100;
			color: #000;
			font-family: 'Shippori Mincho B1', serif;
		}
	
		.gallery_area h3 span{
			display: block;
			font-size: 6px;
		}
	
		.img_box{
			display: flex;
			justify-content: space-between;
			padding: 20px 0;
			flex-wrap: wrap;
			box-sizing: border-box;
			margin-bottom: 30px;
		}

		.img_box a{
			padding: 2% 0;
			width: 48%;
		}
	
		#room-top{
			margin-bottom: 60px;
		}
	
		.room_area{
			display: flex;
        	justify-content: space-between;
		}
	
		.photo{ 
			width: 100%;
			height: auto;
		}
	
		.photo img{
			margin-bottom: 10px;
		}
		
		.inline{
			display: inline-block;
			width: 48%;
		}
		
		.le_spa {
			margin-right: 2%;
		}
	
		.room_de{
			width: 100%;
			height: auto;
		}
	
		.room_area h3{
			position: relative;
			font-size: 28px;
			text-align: center;
			padding-bottom: 6px;
			font-weight: 100;
			color: #000;
			font-family: 'Shippori Mincho B1', serif;
		}
	
		.room_area h3 span{
			display: block;
			font-size: 6px;
		}
	
		.room_li li{
			position: relative;
			padding-left: 14px;
			line-height: 22px;
			
		}
	
		.room_li li:before {
			position: absolute;
			content: '';
			top: 7px;
			left: 0;
			width: 10px;
			height: 10px;
			background: #000;
		}
	
		.de_caption{
			margin-top: 20px;
		}
		
		.de_caption02{
			margin: 20px 0;
		}
		
		.eng_accordion{
			display: block;
			position: relative;
			width: 260px;
			padding: 0.6em 0;
			text-align: center;
			color: #000;
			margin: 40px auto;
			font-size: 18px;
			border: 1px solid #000;
			background: #fff;
		}
		
		.accordion__content {
			display: none;
			padding: 0px !important;
		}
	
		#stay-top{
			margin-bottom: 60px;
		}
	
		.bnb{
			margin: 20px auto;
			width: 260px;
			height: auto;
		}
	
		#access-top{
			margin-bottom: 60px;
		}
	
		.map{
			width: 100%;
			height: 250px;
		}
	
		.map_add{
			text-align: center;
			margin: 20px 0;
		}
		
		.btn2 {
			display: block;
			position: relative;
			width: 260px;
			padding: 0.6em 0;
			text-align: center;
			color: #000;
			margin: 40px auto;
			font-size: 18px;
			border: 1px solid #000;
			background: #fff;
		}
		
		#qa-top{
			margin-bottom: 60px;
		}
		
		.faq_de {
			position: relative;
        	margin: 20px auto;
		}
	
		.q_aq{
			position: relative;		
		}
	
		.q_aq:before{
			position: absolute;
			content: 'Q：';
			left: -36px;
		}
	
		.q_aa{
			position: relative;
			margin-bottom: 20px;
		}
	
		.q_aa:before{
			position: absolute;
			content: 'A：';
			left: -36px;
		}
	
		.accordion-title {
			position: relative;
			font-size: 16px;
			padding: 20px 0;
			letter-spacing: 2px;
			border: 1px solid #fff;
			margin: 0px auto;
			text-align: center;
		}
	
		.accordion-title:before,.accordion-title:after {
			position: absolute;
			content: '';
			width: 15px;
			height: 1px;
			top: 34px;
			right: 20px;
			background-color: #fff;
		}
	
		.accordion-title:after {
		  	top: 34px;
        	transform: rotate(90deg);
		}
	
		.accordion-title.open:after {
		  	top: 34px;
        	transform: rotate(0deg);
		}

		.accordion-content {
		  display: none;
		}
	
		.accordion-content {
			position: relative;
			font-size: 16px;
			padding: 20px 10px 20px 50px;
			margin: 0px auto;
			letter-spacing: 2px;
			color: #fff;
			border: 1px solid;
			background: #000;
		}
		
		#terms-top{
			padding-bottom: 60px;
		}
		
		.content {
			padding-top: 60px;
		}
	
		/*infoエリアをはじめは非表示*/
.mod{
	display: none;
}
	
.modal-open {
  overflow: hidden;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
		
		.moda_cont{
    		margin: 0 auto;
			font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
		}
	
		.moda_cont h2{
			position: relative;
			text-align: center;
			width: 100%;
			font-size: 26px;
			margin: 0 auto;
			padding: 6px 0;
			font-weight: 100;
			color: #fff;
			letter-spacing: 4px;
			font-family: 'Shippori Mincho B1', serif;
		}
	
		.moda_cont h2:after{
			content: "";
			position: absolute;
			display: block;
			top: 50px;
			right: 84px;
			width: 200px;
			height: 1px;
			background: #fff;
		}
	
		.moda_cont p{
			display: block;
			text-align: center;
			font-size: 14px;
        	padding-top: 12px;
		}
	
		.teamp{
			margin: 60px 0;
		}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translate(0px, 50px);
  }

  to {
    opacity: 1;
	transform: translate(0px, 0px);
  }
}

/*アーカイブページ*/
@media only screen and (max-width: 768px){
	
	/*新着情報*/
		
		#news-top{
			position: relative;
    		padding: 90px 0;
		}
		
		.news_menu {
			position: relative;
			width: 80%;
			height: auto;
			margin: 0px auto;
			border-radius: 40px;
			padding: 8% 4%;
		}
		
		.news_archive{
			margin-bottom: 40px;
		}
		
		.news_area{
			padding: 12px 0;
			border-bottom: 1px solid #000;
		}
		
		.news_archi_date {
			display: inline-block;
			width: 120px;
			background: #10345f;
			color: #fff;
			padding: 6px;
			vertical-align: top;
			text-align: center;
		}
		
		.news_textarea{
			
		}
		
		.cate {
			display: inline-block;
			width: 120px;
			padding-left: 20px;
			vertical-align: top;
		}
		
		.cate li{
			border: 1px solid #8cd8ff;
			background: #fff;
			border-radius: 4px;
			text-align: center;
			padding: 6px 0;
			font-size: 14px;
		}
		
		.cate li a{
			color:#8cd8ff;
		}
		
		.news_archi_title{
			display: block;
			width: 100%;
			margin-top: 8px;
			line-height: 20px;
		}
	
		.single_wrap {
			width: 90%;
			margin: 0px auto;
    		margin-bottom: 60px;
			font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
		}
	
		.single_title {
			margin: 20px 0;			
			color: #000;
			font-size: 24px;
			font-weight: 100;
			font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
		}
	
	.news_menu02 {
		width: 90%;
		margin: 0px auto 60px auto;
	}
	
	.news_key{
		border-bottom: 10px solid #0055be;
	}
	
	.pagination {
		width: 80%;
		margin: 20px auto;
	}
	
	.page-numbers {
		display: flex;
		justify-content: center;
		position: relative;
		list-style: none;
		line-height: 48px;
	}
	
	.pagination li {
		position: relative;
		display: block;
		padding: 0 16px;
		margin: 0 10px;
	}
	
	.pagination li a{
		width: 50px;
    	justify-content: center;
	}
	
	.current {
		background: #fff;
		border: 1px solid #f89c9d;
    	color: #f89c9d;
		width: 50px;
		justify-content: center;
	}
	
	.prev_btn {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 10px;
		line-height: 50px !important;
		text-align: center;
		color: #f89c9d;
		font-size: 26px;
	}
	
	.next_btn {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 10px;
		line-height: 50px !important;
		text-align: center;
		color: #f89c9d;
		font-size: 26px;
	}
}