@charset "UTF-8";
*{
	margin: 0;
	padding: 0;
	}

body{
font-family: "Shippori Mincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;	
/*margin-left: 10px;
margin-right: 10px;*/
background-color: #ffffff;
}

/*余分な余白を無くす*/
.yohaku_hidden{
	overflow: hidden;
	}
	
	
/** -----------------------------------
    PCの表示設定
-------------------------------------**/

/**********ヘッダー**********/
#header {
	background-color:#691C2A;
	width: 100%;
	height: 65px;
	align-items: center;
	padding: 0 60;
	display: flex; /*ロゴとメニューを横並びにする*/
	justify-content: space-between; /*ロゴとメニューが左右に分かれるように配置*/
	position: fixed; /* ヘッダーを固定 */
	top: 0; /*固定の位置を上から0pxに指定*/
	z-index: 1;/*要素のレイヤーを1つ上に指定 */
}

.Logo {
	display: flex;
    align-items: center;
}

.Logo a img {
	display: flex;
	margin: 0 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	cursor: pointer;
	width: 100px;
}


.MenuBar {
	background-color:#691C2A;
	text-align: right;
	width:100%;
	height: 40px;
}

.MenuBar ul li {
	display: inline-block;
	width: 80px;
	margin: 0 35px;
	padding-top: 15px;
	padding-bottom: 25px;
	cursor: pointer;
	transition: all 0,2s;
}

.MenuBar ul li a {
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	color: #ffffff;
}


/*カーソルが当たったら文字にグラデーションを付ける*/
.MenuBar ul li a:hover {
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	/*オレンジ系*/
	background: -webkit-linear-gradient(left, #ffa500, #ffff00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*各項目のタイトルの書式*/
.title {
	padding-top: 30px;
	color: #ff26fb;
	font-size: 35px;
	text-align: center;
	font-weight: bold;
	
	/*文字にグラデーションを付ける*/
	/*オレンジ系*/
	background: -webkit-linear-gradient(left, #ffa500, #ffff00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/**********HOME**********/
#HOME {
	font-weight: bold;
	font-size: 20px;
}
	
.main_background{
	background-image: url(image/top.jpg);
	position: relative;
	top:65px;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100vh;
   display:flex;
   justify-content: center;
   align-items: center;
}


.about_us{
	display:flex;
	text-align:center;
}

.about_us p{
	writing-mode: vertical-rl;
	font-size: 30.5px;
	font-weight:bold;
	text-align: left;
	/* 配置したい要素にposition:absolute;を指定 */
	position: absolute;
	/* 上から10%,右から10%の位置に配置 */
	top: 10%;
	right: 10%;
	color:#FFC800;
	text-shadow: -2px -3px 4px #691c2a,2px 3px 4px #691c2a;
}



.main_title{
	font-size: 120px;
	color:#FFC800;
	/* 配置したい要素にposition:absolute;を指定 */
	position: absolute;
	/* 上から10%,右から40%の位置に配置 */
	top: 10%;
	right: 40%;
}



/*NEWSのリストの黒丸を消す*/
ul {
  list-style: none;
}

.news{
	font-size: 21px;
	text-align: left;
	/* 配置したい要素にposition:absolute;を指定 */
	position: absolute;
	/* 上から70%,右から38%の位置に配置 */
	top: 70%;
	right: 38%;
	text-stroke:#691c2a;
	/*文字にグラデーションを付ける*/
	/*オレンジ系*/
	background: -webkit-linear-gradient(left, #ffa500, #ffff00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



.news news_list{
	font-size: 30px;
	text-align: center;
	/*文字にグラデーションを付ける*/
	/*オレンジ系*/
	background: -webkit-linear-gradient(left, #ffa500, #ffff00);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/**********料金**********/
#charge {
		background-color:#000000;
		font-weight: bold;
		font-size: 15px;
		margin-top: 65px;
		display:block;
	}

.charge_contents{
	padding:1em 21em;
	margin:2em 2em;
	display:flex;
	text-align:center;
}


#charge img{
	width:65%;
}

.charge_text{
	display: inline-block;
	padding-top: 30px;
	padding-bottom: 20px;
	color: #ffffff;
	font-size: 25px;
	text-align: left;
}



/**********店員紹介**********/
#staff {
	background-color: #ffffff;
	text-align:center;
	
}


.staff_corner{
	text-align: center;
}

.square {
    padding: 1em 25em;
    margin: 2em 0;
    color: #2c2c2f;
	background: #ffffff;
	width:1100px;
	display:flex;
}

.square img{
	width:30%;
}


.introduce {
	text-align: left;
	margin-top: 10px;
	font-size: 20px;
	margin-left:10px;
}


/**********店内**********/
/*スライダー部分の設定*/
.autoplay {
	max-width:2000px;
	margin: 0 auto;
	padding-bottom: 20px;
}

/*スライダー内の画像の重なりを解消するため、slickのimgタグを上書き*/
.slick-slide img {
	width: 100%;
}


/**********アクセス**********/
#access{
	background-color: #ffffff;
	text-align:center;

}
.access_contents{
	display:flex;
}

.map{
	padding-left:180px;
}

.map iframe{
	width:100%;
	aspect-ratio:16/9;
}
.access_text{
	font-size:25px;
	text-align:left;
	margin-top:20px;
	margin-left:10px;
}


/**********ギャラリー**********/
#gallery {
	background-color: #ffffff;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 10px;
	text-align:center;
}

.gal_text{
	font-size: 20px;
	text-align:right;
}

.gal_pic{
	align-items:center;
	text-align:center;
}


.gal_pic img{
	width:25%;
}


/**********問い合わせ**********/
#contact {
	text-align:center;
}
.contact_text{
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #000000;
	font-size: 25px;
	text-align: left;
}

.input-area{
	font-size: 20px;
}

input[type="text"],input[type="email"] {
		width: 300px;
		height: 30px;
	}
	
textarea {
	width: 300px;
	height:250px;
}

.confirm_btn {
	display:inline-block;
	width:180px;
	text-align:center;
	font-size: 12px;
	color:#ffffff;
	background:#363434;
	text-decoration: none;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 4px;
	transition: .4s;
}

/**********フッター**********/
#footer{
	text-align: center;
	background-color:#691C2A;
	color: #ffffff;
	font-size: 20px;
}

/** -----------------------------------
    スマートフォンの表示設定
-------------------------------------**/
@media screen and (max-width: 450px) {

	/*スマホの時は横並びをなくす*/
	
	  .side {
		display:inline-block;
		}
	
	.semi_title {
		padding-top: 0px;
		/*文字にグラデーションを付ける*/
		background: -webkit-linear-gradient(left, #ff26fb, #00b3ff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;
		font-size: 21px;
	}
	
	/**********ヘッダー**********/

	#header {
		background-color:#691C2A;
		width: 100%;
		height: 40px;
		align-items: center;
		padding: 0 0;
		display: flex; /*ロゴとメニューを横並びにする*/
		justify-content: space-between; /*ロゴとメニューが左右に分かれるように配置*/
		position: fixed; /* ヘッダーを固定 */
		top: 0; /*固定の位置を上から0pxに指定*/
		z-index: 1;/*要素のレイヤーを1つ上に指定 */
	}
	
	.Logo {
	display: block;
    align-items: center;
	}

	.Logo a img {
	display: flex;
	margin: 0 10px;
	cursor: pointer;
	width: 40px;
	}

	.MenuBar {
		background-color:#691C2A;
		text-align: rleft;
		width:750px;
		height: 40px;
	}
	
	.MenuBar ul{
		width:400px;
		text-align:left;
	
	}
	
	
	.MenuBar ul li {
		display: inline-block;
		width: 38px;
		margin: 0 5px;
		padding-top: 5px;
		padding-bottom: 10px;
		cursor: pointer;
		transition: all 0,2s;
		text-align:center;
	}
	
	.MenuBar ul li a {
		text-decoration: none;
		font-weight: bold;
		font-size: 7.6px;
		color: #ffffff;
	}

	/*スマホの画面をクリックしたら文字にグラデーションを付ける*/
	.MenuBar ul li a:hover {
		text-decoration: none;
		font-weight: bold;
		font-size: 7px;
		
		/*オレンジ系*/
		background: -webkit-linear-gradient(left, #ffa500, #ffff00);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.title {
		padding-bottom: 5px;
		padding-top:28px;
		color: #ff26fb;
		font-size: 15px;
		text-align: center;
		font-weight: bold;
	
		/*文字にグラデーションを付ける*/
		/*オレンジ系*/
		background: -webkit-linear-gradient(left, #ffa500, #ffff00);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/**********HOME**********/
		#HOME {
			font-weight: bold;
			font-size: 10px;
		}
		
		.main_background{
			background-image: url(image/top.jpg);
			position: relative;
			top:40px;
			/*デバイスに合わせて画像サイズを変更*/
			background-size:cover;
 			background-repeat: no-repeat;
			width: 100%;
			height:220px;
		}

		.main_title {
			font-size: 35px;;
			color:#FFC800;
			/* 配置したい要素にposition:absolute;を指定 */
			position: absolute;
			/* 上から5%,右から40%の位置に配置 */
			top: 5%;
			right: 40%;
		}

		/*簡単な紹介と新着情報の装飾*/
		/*スマートフォン画面用に、簡単な紹介と新着情報の横並びを解除*/
		.about_us{
				display:flex;
				text-align:center;
			}

		.about_us p{
			writing-mode: vertical-rl;
			font-size: 10px;
			font-weight:bold;
			text-align: left;
			/* 配置したい要素にposition:absolute;を指定 */
			position: absolute;
			/* 上から4%,右から10%の位置に配置 */
			top: 4%;
			right: 10%;
			color:#FFd700;
			text-shadow: -2px -3px 4px #691c2a,2px 3px 4px #691c2a;
		}
		

		/*リストの黒丸を消す*/
		ul {
		  list-style: none;
		}
		
		.news{
			font-size: 11px;
			text-align: left;
			/* 配置したい要素にposition:absolute;を指定 */
			position: absolute;
			/* 上から67%,右から10%の位置に配置 */
			top: 65%;
			right: 22%;
			font-weight:bold;
			
			/*文字にグラデーションを付ける*/
			/*オレンジ系*/
			background: -webkit-linear-gradient(left, #ffa500, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.news news_list{
			font-size: 30.5px;
			font-weight:10px;
			text-align: right;
			/*文字にグラデーションを付ける*/
			/*オレンジ系*/
			background: -webkit-linear-gradient(left, #ffa500, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		/**********料金**********/
		#charge {
			background-color:#000000;
			font-weight: bold;
			font-size: 20px;
			padding: 18px 16px;
			margin-top: 30px;
			margin-bottom: 30px;

		}
		
		.charge_contents{
			padding:0em 0em;
			margin:0em 0em;
			display:flex;
			text-align:center;
		}


		#charge img{
			width:52%;
		}

		.charge_text{
			display: inline-block;
			padding-top: 30px;
			padding-bottom: 20px;
			color: #ffffff;
			font-size: 13px;
			text-align: left;
		}
		
		/*スマホの時は改行を解除*/
		.charge_text br{
		display:none;
		}

		/**********店員紹介**********/
		#staff {
			background-color: #ffffff;
			text-align:center;
		}
		.staff_corner{
			display: block;
			text-align:center;		
		}
		
		.square {
			padding: 0.5em 1em;
			margin: 2em 0;
			color: #2c2c2f;
			background: #ffffff;/*背景色*/
			width:300px;
			display:inline-block;
			padding-right:1px;
			padding-left:1px;
		}
		
		.square img{
			width:35%;
		}


		.introduce {
			text-align: left;
			padding-top: 5px;
			padding-left: 10px;
			font-size: 17px;
		}

		/**********店内**********/
		/*スライダー部分の設定*/
		.autoplay {
			max-width:2000px;
			margin: 0 auto;
			padding-bottom: 20px;
		}

		/*スライダー内の画像の重なりを解消するため、slickのimgタグを上書き*/
		.slick-slide img {
			width: 100%;
		}


		/**********アクセス**********/
		#access{
			background-color: #ffffff;
			text-align:center;
		}
		
		/*スマホ用に横並びを解除*/
		.access_contents{
			display:block;
		}

		.map{
			padding-left:5px;
		}
		
		.map iframe{
			width:100%;
			aspect-ratio:16/9;
		}

		.access_text{
			font-size:20px;
			text-align:center;
			}
		/**********ギャラリー**********/
		
		#gallery{
			background-color: #ffffff;
			text-align:center;
		}
		
		.gal_text{
			font-size: 20px;
			text-align:center;
		}
		
		/*スマホの時は画像長押しで拡大するようにする*/
		.gal_pic{
			align-items:center;
		}


		.gal_pic img{
			width:30%;
		}
		
		.gal_pic img:hover{
    		transform:scale(2);
		}


		/**********問い合わせ**********/
		#contact {
			text-align:center;
		}
		.contact_text{
			display: inline-block;
			padding-top: 20px;
			padding-bottom: 20px;
			color: #000000;
			font-size: 20px;
			text-align: left;
		}
		
		.input-area{
			font-size: 18px;
		}
		
		input[type="text"],input[type="email"] {
			width: 280px;
			height: 30px;
		}
	
		textarea {
			width: 280px;
			height:200px;
		}
		

		/**********フッター**********/
		#footer{
			background-color:#691C2A;
			text-align: center;
			color: #ffffff;
			font-size: 15px;
		}
}