@charset "utf-8";
/* レイアウトのためのCSS */

html {
  font-size: 62.5%;
  overflow-x: hidden;
}


*{-webkit-box-sizing: border-box;box-sizing: border-box;}

body{
    font-family: sans-serif;
    letter-spacing:0.1em;
	line-height:1.85;
	word-wrap: break-word;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	text-decoration: none;
    outline: none;
}

img, iframe {
    max-width: 100%;
	vertical-align: bottom;
	
}

/* =================================================
メインカラー
#F85215/ rgba(248,82,21,1)
#FF4C0A/ rgba(255,76,10,1)
中和カラー
#F4EEE8(ライトグレー)
#F99874/ rgba(249,152,116,1)
アクセントカラー(茶色系)
rgba(117, 68, 51, 0.9)
#170802/ rgba(23,8,2,1)

====================================================*/

/* =================================================
期間限定のパーツ
====================================================*/

/* ----------アルバイト募集----------*/
#parttime {
	text-align: center;
	margin: 0 auto;
	background-color: #fff;
}

/* =================================================
共通定義
====================================================*/

/* ----------sec-title----------*/
.sec-title {
	font-size: 4rem;
	color: #F85215;
}

	/* ----------sec-title-2---------*/
.sec-header {
	background: rgba(117, 68, 51, 0.9);
	color: #fff;
}

.sec-title-2 {
	padding-left: 10px;
	font-size: 4rem;
	margin: 0;
	color: #fff;
}

.sec-description {
	padding: 0 10px 10px 10px;
	font-size: 20px;
	margin: 0;
}

/*============お問い合わせボタン===============*/

.title24-bar {
	margin: 0 auto;
	background:#fff;
	display: flex;
	justify-content: space-around;
}

.item-24-right {
	padding-top: 10px;
}

/* ==========sub-title==========*/

.subtitle-caption {
	background: #fff;
	color: #F85215;
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 0;
}



/* ====================wrapper ====================*/

#wrapper {
	margin: 0 auto;

}

/*================ header-CSS ===============*/

#header{
	width:100%;
	height: 100vh;
	position: relative;
} 

#header:before{
	/*headerの疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("/img/pc-top-mv.jpg?2023-04-11") no-repeat center;
	background-size:cover;
}



/*ロゴを中央に配置*/
h1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-align: center;
  }

/* ====================main====================*/

    /* ==========container==========*/


#container{
	position: relative;
	z-index:1;
	font-family: sans-serif;
	padding-top: 50px;
	background: linear-gradient(-45deg, rgba(244,238,232,0.7), rgba(244,238,232,0.7)),
  url(/img/sakura-02.jpg?2023-04-11);
	background-size: contain;
}

	


/* ====================concept====================*/

#concept {
	max-width: 1055px;
	margin: 0 auto;	
}

.concept-logo {
	text-align: center;
	margin-top: 0;
}

.concept-inner {
	padding: 20px 70px;
	display: flex;
}

.concept-heading {
	font-size: 1.5rem;
}

.concept-left {
	padding-top: 60px;
}

picture, .concept-img  {
	max-width: 350px;
}

.concept-txt {
	font-size: 1.5rem;
	margin-top: 30px;
}

.concept-right {
	margin-left: 40px;
	padding: 0 20px;
	background: #F4EEE8;
}


/* ====================price====================*/

#price {
	max-width: 1055px;
	margin: 70px auto 100px auto;
	
}


.price-inner {
	max-width: 970px;
	margin: 0 auto;
}

.price-item {
	display: flex;
	margin-top: 70px;
}

.price-item:nth-child(even) {
	flex-direction: row-reverse;
}

.price-item-l {
	padding: 20px 0;
	align-items: center;
} 

.price-item-r {
	padding: 20px;
	background:#F4EEE8;
}


.price-txt {
	padding: 20px;
	font-size: 1.5rem;
}

.price-title {
	text-align: center;
	font-size: 2rem;
}

.price-button, .reserve-button {
	text-align: center;	
}


/*--------------gallery----------------*/

#room {
	max-width: 1055px;
	margin: 100px auto  50px auto ;
}

.room-txt, .service-txt {
	background:#F4EEE8;
	padding: 50px;
	font-size: 1.7rem;
}




/*-------------sevice---------------*/

#service {
	max-width: 1055px;
	margin: 70px auto 50px auto;
}

.service-box {
	margin-top: 30px;
}

.service-icon {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.service-icon li {
	margin: 15px;
}

/* -----------contact-------------*/

#contact {
	max-width: 1055px;
	margin: 70px auto 50px auto;	
}

.contact-box {
	margin: 0 auto;
	padding-top: 20px;
	background:#F4EEE8;
	display: flex;
	justify-content: space-evenly;
}

.map {
	margin-top: 40px;
}

.access {
	font-weight: bold;
	padding: 20px 0;
}

.name {
	font-size: 2rem;
}

.tel, .address {
	font-size: 1.6rem;
}

.address {
	margin: 30px 0;
}

.access-button {
	text-align: center;
	margin-top: 15px;
}

.btn-tel{
	position: relative;
	display: block;
	border-radius: 50px;
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background: #F85215;
	padding: 5px 0;
	margin: 20px auto;
	max-width: 250px;
  }
  
  .btn-tel::after{
	content: "";
	background: url(/img/icon-tel.png?2023-04-11) no-repeat center;
	background-size: contain;
	width: 25px;
	height: 30px;
	position: absolute;
	top: calc(45% - 12px);
	left: 17px;
  }

/*--------------footer--------------*/

footer {
	background: url(/img/footer-pc.png?2023-04-11);
	background-repeat: no-repeat;
	color: #fff;
	margin: 0 auto;
}

.copyright {
	background: #f3794c;
	text-align: center;
}


.footer-box {
	display: flex;
	justify-content: space-evenly;
	padding-top: 100px;
	padding-left: 30px;
}

.sns {
	text-align: center;
}

.site-three a {
	color: #fff;
}

.three-title {
	font-size: 1.5rem;;
}

.footer-right {
	padding-top: 20px;
}

.footer-logo {
	text-align: center;
}


.footer-right img {
	max-width: 150px;
}

.sns img {
	max-width: 50px;
}


/*====================
　　メディアクエリ
====================*/

/*-------------------------------------------
SP/TB 980px未満
-------------------------------------------*/
@media screen and (max-width: 980px) {

	picture, .concept-img  {
		max-width: 300px;
	}


	.concept-inner {
		padding: 20px 40px;
	}

	.concept-txt {
		font-size: 1.5rem;
	}


}





/*-------------------------------------------
SP/TB 768px未満
-------------------------------------------*/
@media screen and (max-width: 767px) {

	/*----------concept-------*/

	.concept-inner {
		flex-direction: column;
		padding: 10px;
	}

	.concept-left {
		text-align: center;
	}

	.concept-right {
		margin: 20px auto;
	}
	
	picture, .concept-img  {
		max-width: 400px;
	}
	

	/*----------price-------*/
	.price-item, .price-item:nth-child(even) {
		flex-direction: column;
	}

	
	.price-item-l {
		text-align: center;
	}

	.price-img img {
		max-width: 300px;
	}

	/*----------contact-------*/
	.contact-box {
		flex-direction: column;
	}

	.map, .access {
		text-align: center;
	}


}


/*-------------------------------------------
SP/TB 520px未満
-------------------------------------------*/
@media screen and (max-width: 520px) {

/*--------緊急お知らせ-------*/



/*--------共通定義-------*/
	
	.sec-description {
		font-size: 1.3rem;
	}

	.item-24-right {
		padding-top: 5px;
	}
	


	
/*--------header-------*/

	.title24-bar {
		flex-direction: column;
		text-align: center;
	}

	#header h1 img {
		max-width: 300px;
	}

/*----------concept-------*/


	.concept-txt {
		font-size: 1.3rem;
	}

	picture, .concept-img  {
		max-width: 330px;
	}

/*---------price--------*/

.price-item-l {
	margin-bottom: 50px;
}

/*-------sevice--------*/
.service-icon li img {
	max-width: 100px;
}

.room-txt, .service-txt {
	padding: 20px;
	font-size: 1.5rem;
}

/*--------contact-------*/



/*-------footer-------*/
footer {
	background: url(/img/footer-sp.png?2023-04-11);
}

.footer-box {
	padding-top: 50px;
}

.footer-right {
	padding-top: 30px;
}

/*===============topページ以外のRWD==============*/

/*-------galleryページ-------*/

.orange-box {
	flex-direction: column;
	text-align: center;
}

.orange-box li img {
	max-width: 210px;
	margin-bottom: 20px;
}

.gallery-photo-box li {
	width: calc(100%/2);
}


.access-map iframe {
	max-width: 300px;
	max-height: 300px;
}

.way-box {
	flex-direction: column;
	
}

.way-img, .way-txt {
	margin: 0 auto;
}

}