@charset "utf-8";

/* -----------------共通部分----------------- */
html {
  font-size: 100%;
}

body {
  font-family: serif;
  color: #fff;
  background-color: #000;
  line-height: 2rem;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  width: 100%;
}

/*↓見出し囲み罫追加*/
h2 {
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #afadad;
  border-radius: 5px;
  padding: auto;
  text-align: center
}

/* -----------------ヘッダー部分----------------- */
header {
  background-color: black;
  height: 85px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper {
  max-width: 1006px;
  margin: 0 auto;
  padding: 0 7.5%;
}

.logo {
  max-height: 85px;
}

.main-nav {
  display: flex;
  font-size: 1.2rem;
  list-style: none;
  text-align: center;
  align-items: center;
}

.main-nav li {
  margin-left: 20px;
}

.main-nav a {
  color: #fff;
}

.main-nav a:hover {
  color: #aaa;
}

/* --------------スライドショー部分--------------------- */
.slide {
  position: relative;
  width: 100%;
  padding-top: 40%;
  overflow: hidden;
  background-color: #c6c6c6;
}

@keyframes slideshow {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  28% {
    opacity: 1
  }

  38% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/*==============================================
@keyframesはアニメーション全体のコマ割り。100コマ（０％から１００％）のアニメーションのイメージ。
opacityは「０」が透明度０，「1」が透明度100％。
０％（0コマ目）は透明、10％～28％（10～28コマ目）は完全に現れる、38～100%（38～100コマ目）は透明という意味。
下にあるanimation-delayで2枚目以降が遅れてスタートする設定のため、このコマ割りになっているようです（伊藤）
参考：https://weblasts.com/css/css-slideshow
==============================================*/
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation: slideshow 35s linear infinite;
  /*アニメーション全体で35秒（35s)という意味*/
}

.slide img:nth-child(2) {
  animation-delay: 7s;
}

/*2枚目のimgが7s(秒)遅れでスタートという意味*/
.slide img:nth-child(3) {
  animation-delay: 14s;
}

/*3枚目のimgが14s(秒)遅れでスタートという意味*/
.slide img:nth-child(4) {
  animation-delay: 21s;
}

/*4枚目のimgが21s(秒)遅れでスタートという意味*/
.slide img:last-child {
  animation-delay: 28s;
}

/*5枚目のimgが28s(秒)遅れでスタートという意味*/

/*------------------あいさつ部分------------------*/
.aisatu-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: auto;
  padding-left: auto;
}

.aisatu {
  max-width: 1006px;
  max-height: 320px;
  writing-mode: vertical-rl;
}

.aisatu-yasuragii {
  font-size: 1.5rem;
}

.aisatu-akari {
  font-size: 2rem;
  text-indent: 1em;
}

.goaisatu {
  font-size: 1.2rem;
  padding-right: 2rem;
}

.aisatu-mae {
  text-indent: 1em;
}

.aisatu-ushiro {
  text-indent: 1em;
}

.aisatu-logo {
  max-height: 295px;
  width: auto;
  padding-right: 40px;
}

/*---客室部分---*/
.room {
  max-width: 1006px;
  display: flex;
  margin: auto;
  padding: 10% 0;
  justify-content: space-between;
}

.loom_photo {
  width: 70%;
}

.room_text {
  width: 25%;
}

/*---温泉部分---*/
.onsen {
  max-width: 1006px;
  display: flex;
  margin: auto;
  padding: 10% 0;
  justify-content: space-between;
}

.onsen_photo {
  width: 70%;
}

.onsen_text {
  width: 25%;
}

/*---料理部分---*/
.ryouri {
  max-width: 1006px;
  display: flex;
  margin: auto;
  padding: 10% 0;
  justify-content: space-between;
}

.ryouri_photo {
  width: 70%;
}

.ryouri_text {
  width: 25%;
}

/*---アクセス部分---*/
.kinugawa {
  max-width: 1006px;
  display: flex;
  margin: auto;
  padding: 10% 0;
  justify-content: space-between;
}

.jusyo {
  width: 32%;
}

/* フォームの設定 */
.contact {
  max-width: 1006px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 80px;
  margin-right: 80px;
  align-items: center;
  min-height: 100vh;
}

.sub-title {
  font-size: 0.8rem;
  font-weight: bold;
}

/* お名前・メール・メッセージの設定 */
form div {
  margin-bottom: 14px;
}

label {
  font-size: 1.125rem;
  margin-bottom: 10px;
  font-weight: bold;
  display: block;
}

/* お名前・メール・メッセージの設定 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea {
  border: 1px solid rgba(163, 163, 163, 1.00);
  border-radius: 5px;
  padding: 2px;
  font-size: 1rem;
}

/* お名前・メールの設定 */
#email {
  width: 100%;
}

input[type="text"],
input[type="email"] {
  max-width: 240px;
}

/* メッセージの設定 */
textarea {
  width: 100%;
  max-width: 480px;
  height: 6rem;
}

/* 送信ボタンの設定 */
.button {
  /* ボタンデザイン */
  background-color: dimgrey;
  color: #fff;
  padding: 5px 10px;
  font-size: 1.2rem;
  border-radius: 5px;
}

iframe{
		width:500px;
		height: 300px;
	}

.kinugawa {
  max-width: 1006px;
  display: flex;
  margin: auto;
  padding: 12% 0;
  justify-content: space-between;
}

h3 {
  margin-bottom: 2rem
}

/*---------Footerのお店情報---------- */
.hooter-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: auto;
  padding-left: auto;
}

.hooter-text {
  text-align: center;
  padding-left: 5%;
}

.footer-yasuragi {
  font-size: 1.2rem;
}

.footer-akari {
  font-size: 2rem;
  margin-bottom: 1.6rem;
}

.footer-denwa {
  font-size: 1.125rem;
  line-height: 1rem;
}

.footer-jushoi {
  font-size: 1.125rem;
}

.hooter-logo {
  max-height: 235px;
  width: auto;
}

/* Footerエリアの設定 ---------- */
footer {
  background-color: #272727;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 0
}

footer a {
  color: azure;
  font-size: 0.875rem;
  /* 16 × 0.875 = 14 */
}

.footer-icon{
	font-size:1.125rem;
	text-transform: uppercase;
	border: 1px solid #fff;
	display:inline-block;
	padding: 0.25rem 1rem;
	background-color: #FFFFFF;
	color:#000;
}

.footer-icon:hover{
	background-color: #000;
	color:#fff;
}


/*レシポンシブここから*/
@media(max-width:768px){
	.aisatu{
	height: 50%;
	}

	/*.main-nav{
		font-size: 50%;

	}
*/
	.logo{
		width: 80%;
	}

/*以下スマホでメニューが消える*/
  .pc{
    display:none
  }
  /*以下スマホの予約ボタン*/
  .mb{
    font-size: 1.5rem;
    border: 1px solid #afadad;
    padding: 0px 18px;
    background: #444;
  
  }

	.room{background-color: #ccc;
		color:#000;
		width: 100%;
		flex-direction:column;
		align-items:center;
	}

	.room_text{
		width:80%;
	}

	.loom_photo{
		width: 80%;
	}

	.onsen{
		background-color: #999999;
		color: #000;
		width: 100%;
		flex-direction:column;
		align-items:center;
		flex-direction: column-reverse;
	}
	.onsen_photo{
		width:  80%;
	}

	.onsen_text{
		width:80%;
	}

	.ryouri{
		background-color: #ccc;
		color:#000;
		width: 100%;
		flex-direction:column;
		align-items:center;

	}

	.ryouri_text{
		width:80%;
	}

	.ryouri_photo{
		width:  80%;
	}

	.kinugawa{
		background-color: #999999;
		color: #000;
		width: 100%;
		flex-direction:column;
		align-items:center;
		flex-direction: column-reverse;
	}
	.jusyo {
		width: 80%;
		padding: 30px;
	}

	iframe{
		width:100%;
		height: 200px;
	}

.map {
	position: relative;
	width: 100%;
	padding-top: 75%; /* = height ÷ width × 100 */
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	h2{
		border: 1px solid #afadad;
	}

	.hooter-wrap {
		width: 100%;
		flex-direction:column;
		align-items:center;
	}
	.hooter-logo {
		width: 80%;
		height:80%;
		align-items:center;
		margin-left: 2rem;
		margin-bottom: 2rem;
	}
	.aisatu {
  max-width: 1006px;
  max-height: 320px;
}
    .aisatu-wrap {
		width: 100%;
		flex-direction:column;
		align-items:center;
		flex-direction: column-reverse;
	}
	.aisatu-logo {
		display: none;
	}

	.aisatu-right{
		display: none;
	}

	.goaisatu {
		padding-right: 0;
}
/*レシポンシブここまで*/