@charset "utf-8";
/*========= 背景動画設定のCSS ===============*/


html,body{
    width: 100%;
    font-size: 14px;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
    color: #313131;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f3f1ea;
}

a { text-decoration:none; color: #313131;}
a:hover{color : #A2977B;}
img { max-width: 100%; height: auto;}
nav ul li.current a,nav ul li a:hover{color:#A2977B;}
ul {list-style: none;}
footer small{font-weight: 300;}
h2,h3,h4,h6 {font-weight: 300;}

/* =========Loading背景画面設定============*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#f3f1ea;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:260px;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1.1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: scale(0, 0);
  }

  to {
    opacity: 1;
	transform: scale(1, 1);
  }
}

/* =========TOP============*/
.top_logo{
    position: absolute;
    z-index: 2;
    top: 50px;
    left: 50px;
}

.top_logo img{width: 200px;}

.page-top{
	position: fixed;
	z-index: 10;
	top:10px;
	left:10px;
}
.page-top img{width: 200px;}
.page-top {display: none;}
.sp_logo{display: none;}

.side-position{
    webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
    right: 0;
    position: fixed;
    top: 0;
    width: 200px;
    z-index: 9999;
    color: #fff;
    /*background: rgba(255,255,255,0.2);*/
    padding-left: 20px;
    border-left: 1px solid #FFFFFF;
	mix-blend-mode: difference;
}
navi{
	position: fixed;
	top:180px;
	right:40px;	
	z-index: 1;
	
}
navi li {
    line-height: 3em;
    font-size: 14px;
    letter-spacing: 0.1em;
}
navi li a{
    font-weight: 500;
    color: #fff;
}
.top_messege {
    position: relative;
    z-index: 4;
    font-size: 16px;
    line-height: 2em;
    color: #000;
    letter-spacing: 0.1em;
    margin-bottom: 100px;

}
.top_messege h3{
    font-size: 30px;
    line-height: 1.5em;
    margin-bottom: 30px;
    letter-spacing: 0.2em;
    font-weight: 500;
}

#lineyoyaku {
    right: 0px;
    position: fixed;
    top: 0px;
    z-index: 10;
    left: auto;
    bottom: auto;
    width: 220px;
    background-color: #4D4D4D;
    height: 65px;
    text-align: center;
    padding-top: 20px;
    border-bottom: 1px solid #FFFFFF;
}
#linetomo {
    right: 20px;
    position: fixed;
    top: 40px;
    z-index: 5;
    left: auto;
    bottom: auto;
}
#lineyoyaku img,#linetomo img {width: 250px;}

.insta{
    width: 100%;
    text-align: left;
    margin-top: 20px;
    height: 30px;
}
.insta img{
    width: 30px;
}


#top_space{
    padding-top: 50px;
    padding-bottom: 5%;
  }

/*スクロールダウン全体の場所*/
.scrolldown2{
	position:absolute;
	bottom:2%;
	right:35px;
	z-index: 100;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:0px;
	bottom:0px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-3px;
    /*丸の形状*/
	width:7px;
	height:7px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:75px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 80px;
	background:#fff;
}

.reverse {
	width: 20px;
	display: none;  
	position: fixed;
	right: 15px;
	bottom: 20px;
	text-align: center;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index: 20;
	mix-blend-mode: difference;
}

/*========= mainコンテンツ ============*/
.main,.main2 {
	background-attachment: ;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
    padding-right: 220px;
    padding-top: 50px;
}

.main {background-color:#f3f1ea;}
.main2 {background-color: #FCF9F2;}

.wrap600,.wrap900,.wrap1080{
    position: relative;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 0px;
    margin-right: 2em;
    margin-left: 2em;
    margin-bottom: 2%;
    padding: 2% 0;
    z-index: 8;
}

.wrap{
    position: relative;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 0px;
    margin-bottom: 2%;
    padding: 2% 0;
	width: 100%;
	z-index: 8;
}
.wrap600{width: 600px;}
.wrap900{width: 900px;}
.wrap1080{width:1080px;}

.title {
    font-size: 40px;
    text-align: center;
    color: #712020;
    margin-bottom: 20px;
    line-height: 1.3em;
    letter-spacing: 0.2em;
	font-weight: 800;
}
.title_mini{
    font-size: 15px;
    text-align: center;
    color: #712020;
    margin-bottom: 50px;
    line-height: 1.3em;
    letter-spacing: 0.4em;
    font-weight: 500;
}
.wave{position: relative;}
.wave canvas{
    position: absolute;
    bottom: -1px;
	left:0;
    width: 100%;
	z-index: 3;
}

/*========= お知らせ欄 ============*/
#topcoment {
    padding-top: 2%;
    padding-bottom: 7%;
}

#topcoment h1 {
    color: #A78250;
    font-size: 45px;
    text-align: center;
    line-height: 1.3em;
    margin-bottom: 20px;
}

#topcoment h3 {
    color: #000;
    font-size: 20px;
    text-align: center;
	margin-bottom: 20px;
}
#topcoment p {
    color: #000;
    font-size: 15px;
    text-align: center;
    line-height: 1.8em;
}


.news-item {
    display: flex;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.news-item:not(:last-child){border-bottom: 1px solid #fff;}

.news-date {
    width: 120px;
    font-size: 10px;
    background-color: #454545;
    color: #FFFFFF;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    font-weight: 500;
    line-height: 1em;
}

.news-title {
    width: calc(100% - 120px);
    padding-left: 50px;
    line-height: 1.5em;
    font-size: 14px;
    font-weight: 300;
    padding-top: 4px;
}

.news-title a {color: #000000;}



/*========= フッター ============*/
#contact {
    background-color: #3A3A3A;
    padding-top: 2%;
    padding-bottom: 7%;
}
.contact_left{
    width: 35%;
    float: left;
    text-align: right;
    margin-right: 10%;
}
.contact_left img {width: 40%;}

.contact_right{
    width: 55%;
	font-weight: 100;
    float: left;
	font-size: 18px;
	letter-spacing: 0.1em;
    color: #FFFFFF;
	line-height: 2em;
	font-weight: 300;
}
.contact_right h3{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
    float: left;
    width: 100%;
    line-height: 2em;
}

.contact_right span { float: left;width: 20%;}
.contact_right p { float: left;width: 80%;}


/*========= サブコンテンツ ============*/

figure.side_image {
    display: inline-block;
    position: absolute;
    float: left;
    margin-left: 0;
	width: 70%;
    max-width: 900px;
    top: 200px;
}

figure.side_image img {
	width: 100%;
	float: left;
}
 
.text_box {
    display: inline-block;
    width: calc(55% - 80px);
    max-width: 900px;
    background-color: rgba(243,241,234, 0.8);
    position: relative;
	float: left;
    z-index: 3;
    padding: 40px;
    line-height: 2em;
    font-size: 16px;
    margin-top: 160px;
    margin-left: 40%;
    margin-right: 5%;
}
.charm_box{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-bottom: 60px;
    position: relative;
}

.charm_left{
    width: 10%;
    float: left;
    font-weight: 300;
    font-size: 20px;
	line-height: 2em;
	letter-spacing: 0.2em;
    text-align: center;
    border-bottom: 1px solid #000000;
    margin-right: 5%;
}
.charm_right{
    width: 85%;
    float: left;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 2em;
    padding-top: 3px;
}
.half_left{
	width: 47%;
	margin-right: 3%;
    float: left;
    margin-bottom: 40px;
}

.half_right{
	width: 47%;
	margin-left: 3%;
    float: left;
}
#map_info {
	font-weight: 300;
    letter-spacing: 0em;
    font-size: 14px;
}
#map_info h3{font-size: 18px;}

.yoyakusei{
    border: 1px solid #BB0000;
    color: #BB0000;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 2em;
    margin-bottom: 15px;
}

.reserve_box_out{width: 100%;float: left;}

.reserve_box{
    width: 46%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4%;
    float: left;
    text-align: center;
    background-color: #f3f1ea;
    padding-bottom: 30px;
}
.reserve_box h3{
    color: #000;
    font-size: 30px;
    line-height: 2em;
    font-weight: 300;
    margin-top: 40px;
    margin-bottom: 35px;
}
.reserve_box p{
	line-height: 140px;
	height: 160px;
	font-weight: 500;
	font-size: calc(1vw + 1.5rem);
}
.reserve_line img {width:150px;}
.reserve_box_in{
    border-top: 1px solid #000;
	border-bottom: 1px solid #000;
    width: 50%;
    float: left;
    font-size: 16px;
    text-align: left;
    margin-left: 22%;
    line-height: 1.8em;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 20px;
}
.reserve_hosoku{
    width: 100%;
	font-size: 14px;
    text-align: center;
    float: left;
    margin-bottom: 50px;
	line-height: 1.8em;
}

.reserve_hosoku a{
    color: #A09C8D;
    text-decoration: underline;
}
.items {
  display: flex;
  justify-content: space-between;
}
.item {
    width: 33.3%;
    margin-bottom: 50px;
}
.item-img,.item-icom{text-align: center;}
.item-icom{
    margin-top: 5%;
    margin-bottom: 5%;
}
.item-img img{width: 100%;}
.item-icom img{width: 50%;}

.item-title{
	font-size: 23px;
	text-align: center;
	line-height: 1.2em;
	margin-bottom: 10px;
	height: 50px;
}
.item-title span{
	font-size: 70%;
	display: block;	
}
.item p{
    margin-left: 10%;
    margin-right: 10%;
}
.howto h2{font-weight: normal;}
.howto span{
	padding: 0.5em 0.5em;
    margin: 0 0.5em 0 0;
    color: #fff;
    background: #770005;
}
.howtoimage{
	text-align: center;
	margin: 1.5em;
	padding: auto 0;
}
.howtoimage img{
	text-align: center;
	width: 70%;
}

.title-border {
	display: flex;
	align-items: center;
	width: 50%;
	margin: 0 auto ;
}
.title-border:before,
.title-border:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}
.title-border:before {margin-right: 1rem;}
.title-border:after {margin-left: 1rem;}


/* ゲストハウス */
#guesthouse{ background-color: #DDD4B0;}

.cowork_photo {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
    padding: 0;
    overflow: hidden;
    position: relative;
    float: left;
    font-size: 14px;
}
.cowork_photo img {width:100%;}


#cowork{
    background-color: #CAD6D3;
}


.price_text {
    font-size: 20px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 20px;
}
.price_text span{
    font-size: 14px;
    margin-left: 10px;
}

.googleMap {
 	margin-bottom: 48px;
 	position: relative;
 	width: 600px;
 	height: 450px;
 	&:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ff6c00;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: hue;
    pointer-events: none;
	}
}

/*============= infoページ用 ================*/
.information_in {
	background-attachment: ;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.information_in h3{
    font-size: 20px;
    text-decoration: underline;
    margin-top: 20px;
    margin-bottom: 20px;
}

.information_in h2{
    font-size: 30px;
    line-height: 1.5em;
}

.info_head{
    width: 100%;
    position: relative;
	display: flex;
}
.information_logo{
    width: 80%;
    margin-top: 30px;
    margin-left: 2%;
    float: left;
}
.information_logo img{
    width: 300px;
}
.info_modoru{
    width: 16%;
    margin-right: 2%;
    margin-top: 30px;
    text-align: right;
    float: right;
    font-size: 16px;
}

/*============= その他 ================*/
.pc{display: block;}
.sm{display: none;}
.qr{
    margin-right: 10px;
}







/*========================= SP用 ============================*/

@media screen and (max-width: 850px){
	
body {line-height: 2em!important;}	

.top_logo{display: none;}
.sp_logo{
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 160px;
	display: block;
	transform: translate(-80px, -80px);
	
    /*position: absolute;
    z-index: 2;
    top: 2%;
	left: 5%;
    display: block;
    width: 120px;*/
 }
	
.sp_logo img {width: 100%;}
.page-top img{width: 150px;}
	
	
.side-position{display: none;}
navi{display: none;}
.menu{display: none;}
	
.top_messege {
    font-size: 14px;
    width: calc(100% - 60px);
    text-align: left;
    color: #000;
    position: relative;
	margin-bottom: 150px;
}
.top_messege h3{font-size: 20px;}

#lineyoyaku {
    top: auto;
    left: auto;
    bottom: 0px;
    width: 100%;
	height: 60px;
	padding-top: 5px;
	border-top: 1px solid #FFFFFF;
	border-bottom: none;
	}
#linetomo {
    left: 19%;
	top: auto;
    right: auto;
    bottom: 0px;
	width: 30%;
}
#linetomo img {width: 100%;}

.insta{text-align: center;}

.scrolldown2{bottom:12vh;}
	
.reverse {right: 1px;bottom:12vh;}

.main,.main2 {padding-right: 0px;padding-bottom: 0px;}
.wrap600,.wrap900,.wrap1080,.wrap{
    width: 100%;
    padding-top: 0%;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 30%;
    left: 0px;
}

.title {font-size: 20px;margin-bottom: 10px;}
.title_mini{font-size: 9px; letter-spacing: 0.2em;}

.howto h2{line-height: 2em;}
.howtoimage{margin: 0em 0;}
.howtoimage img{width:100%;}
.items {display: block;}
.items .item {width: 100%;}
.item {
    border-bottom: 1px solid #000000;
    padding-bottom: 10%;
}

figure.side_image {
	display: initial;
	position: relative;
	float: left;
	margin: 0px;
	width: 100%;
	top: 0px;
}

.text_box {
    width: calc(100% - 60px);
    padding: 30px;
    font-size: 14px;
    margin-top: 0px;
    margin-left: 0%;
    margin-right: 0%;
}
	
.charm_box{
    margin-right: 30px;
    margin-left: 30px;
    margin-top: 40px;
 }

.charm_left{
    width: 100%;
    text-align: left;
    margin-right: 0%;
    margin-bottom: 10px;
}
.charm_right{ width: 100%;padding-top: 0px;font-size: 14px;}
.reserve_box{
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
	margin-bottom: 5%;
	padding-bottom: 10px;
}
.reserve_box h3{margin-top: 15px;margin-bottom: 10px;}
.reserve_box p{line-height: 30px;height: 40px;}
.reserve_line img{width: 120px;}
.reserve_box_in{
    width: 96%;
    margin-left: 0%;
	font-size: 14px;
}
	
.reserve_hosoku{margin-bottom: 0px;}
	
.half_left{
	width: 100%;
	margin-right: 0%;
    margin-bottom: 40px;
}

.half_right{
	width: 100%;
	margin-left: 0%;
}
.contact_left{
    width: 100%;
    text-align: center;
	margin-top: 30px;
    margin-right: 0%;
	margin-bottom: 0px;
}
.contact_left img {width: 40%;}
.contact_right{ width: 100%;font-size: 4vw; margin-top: 40px;}
.contact_right h3{ font-size: 5vw;}
.contact_right span {width: 25%;}
.contact_right p { width: 75%;}
	
.item-img img{width: 100%;}
	
.news-item { display: block;}
.news-date { width: 100px;}
.news-title {width: 100%;padding-left: 0;}
	
.information_logo{
    width: 68%;
    margin-top: 30px;
    margin-left: 2%;
    float: left;
}
.information_logo img{ width: 100%;}
	
.info_modoru{
    width: 25%;
    margin-right: 5%;
    margin-top: 35px;
    text-align: right;
    float: right;
    font-size: 16px;
}
.information_in h2{ font-size: 20px; line-height: 1.5em;}
	
.pc{display: none;}
.qr{display: none;}
}


@media screen and (min-width: 768px){
.br-sp {display: none; }
}
 
@media screen and (max-width: 850px) {
.reverse {width: 5%;}
.reserve span{line-height: 2.5em;}

}