@charset "UTF-8"; 

/*▼背景と全体▼*/ 
html {
  font-size: 75%;/* 12px */
  scroll-behavior: smooth;
  box-sizing: border-box;
}

:root {
  scroll-padding: 5rem;
  scroll-behavior: smooth;
  --readbun: 1.25rem;/* 住所とニュース↓のリード文の文字サイズ */
}

/*▼フォント類の基本セット。上が明朝系、下がゴシック系。どちらかは消すこと！▼*/ 
body {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* body {
  font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
} */
/*▲フォント類の基本セット▲*/

body *,
*,
*:before,
*:after 
{
  box-sizing: inherit;
}

body {
  /* background: #888; */
  box-sizing: border-box;
  line-height: 1.5em;
}

/* body p {
  font-size: 75%;
} */
/* 12px */


a {
	transition: 0.8s;
}

a:hover {/* リンクはほばーで透明度、別のホバーアクションやるなら削除 */
  opacity: 0.7;
}

.mobile {
	display:block;
}

.pc {
	display:none;
}

.yoko {
  display: flex;
  flex-direction: column;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
}

.yokores {
  display: flex;
  flex-direction: column;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
  align-items: center;
}

/* 太字細字くらす、JPENのあれ */
.futozi {
  font-weight: bold;
}
.hosozi {
  font-weight: 100;
}

.wrapper {
  display: block;
  margin: 0 auto;
}

#wrapper {
  width: 100%;
}
img {
  /* この2呪文大事 */
  max-width: 100%;
  vertical-align: bottom;
}

.menugazo {
  max-width: 100%;
  width: 80%;
  margin-right: 3%;
}

.tenpo_img {
  max-width: 100%;/* 上の方にもimg全体の設定あり */
  width: 100%;
  display: block;
  padding: 1rem 0 1rem 0;
}

.insta_icon {
  max-width: 100%;
  width: 6%;
  align-items: center;
  /* baseline-shift: sup; */
  vertical-align: top;
}
  /* baseline-shift: sup;=ベースラインシフトできるとかなんとか、動かないけど */

  
iframe {
  display: block;
  width: 80%;
  height: 30rem;/* 高さそのままでもよさそう、％できたりWに対応できたらもっといいけど */
  margin: 0 auto;
}

.logo img {
  /* width: 100%; */
  /* width: 2rem; */
  max-height: 3.5rem;/* やっとロゴが小さくなった！へだ突き破ってた */
  vertical-align: bottom;
}

/* ボタンデザイン▼ */

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;/* ボタンだけコピペ不可にする呪文が入ってる */
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}


.cuoo {
  /* padding: 30px 0; */
  text-align: center;
  transition: 0.6s;
}
.cuoo:hover {
  transform: scale(1.1);/* まうすおばでデカボタン */
}

/* ボタンデザイン▲ */

/*▲背景と全体▲*/ 

/*▼ヘッダー▼*/ 
header {
  display: block;/* たむたむにはなかったやつ、ぐろなびの押せる範囲広げる意味でもあるといい。 */
  background-color: #590f10;
  width: 100%;
  box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}
/* header h1 {
  color: #FFF;
  text-align: center;
  font-size: 2em;
  line-height: 1.5em;
} */

header a {
  text-decoration: none;
}

.inner {
  width: 100%;/* へだの中の要素きゅってしたくて90%にしたら、ヒラキハンバガ狭くなった */
  margin: 0 auto;
  /* display: flex;
  align-items: center; */
  /* justify-content: space-around; */
}

.header_semaku {
  width: 100%;/*へだの中きゅってしたけど、ハンバガが右にずれちゃう*/
  margin: 0 auto;
  display: block;
  position: relative;
}

nav {
  display: block;
  margin-left: auto;
}

/* #global-nav {

} */




/*▲ヘッダー▲*/ 

/*▼メインブロック▼*/


h3 {
  font-size: 3rem;
  padding: 6rem 0 1rem 0;
  color: #590f10;
}

h4 {
  font-size: 2rem;
  padding: 2.5rem 0 0.5rem 0;
  line-height: 2.5rem;
}

h5 {
  font-size: var(--readbun,1.25rem);
}

/* div#contents {
  background: #CCC;
} */

/* .mainvisu {
  background: url(../image/1349x800px_mainvisu.jpg) no-repeat center top;
  display: block;
  flex-wrap: wrap;
  width: 100%;
  max-height: 50rem;
  box-sizing: border-box;
} */

.mainvisual {
  display: block;
  box-sizing: border-box;
  /* padding: 1em; */
  width: 100%;
  background: #444;
}

/* img.mainvisual {
  display: block;
  box-sizing: border-box;
  /* padding: 1em; */
  /* width: 100%;
  background: #444;} */

.kasaneru {
  position: relative;
}

.kasaneru p {
  position: absolute;
  top: 40%;
  right: 10%;
  font-size: 3rem;
  font-weight: 900;
  color: #eff0e0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
  line-height: 3.5rem;
}


/* めいんびじゅスリックもどきCSSここから▼ */
/* 複数画像切り替え---------------------------------------------- */
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 40rem;
  /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	/* width: 100%;  */
  /* スライド画像の幅を100%に */
  width: calc(100vw - calc(100vw - 100%));
	height: 100%; /* スライド画像の高さを100%に */
	top: 0; /* 上からの位置を0に */
	left: 0; /* 左からの位置を0に */
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 15秒で1サイクルのアニメーションを無限ループ */
}

.spFull {
	/* margin: 0 calc(50% - 50vw); */
	/* width: 100vw; */
  width: 100%;
  overflow: hidden;
  /* width: calc(100vw - calc(100vw - 100%)); */
  /* 広がってくれるしすくろるばーも消えるけど、左寄せになるんなんでやろ？？ */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	10%, 20% { opacity: 1; } /* 表示されるタイミングを設定 */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1){
	background-image: url('../image/1349x800px_mainvisu.jpg'); /* 1枚目の画像を指定 */
	animation-delay: 0s; /* アニメーション開始を0秒遅延 */
}

.slideimg:nth-of-type(2) {
	background-image: url('../image/1349x800px_maramen1.jpg'); /* 2枚目の画像を指定 */
	animation-delay: 3s; /* アニメーション開始を3秒遅延 */
}

.slideimg:nth-of-type(3) {
	background-image: url('../image/1349x800px_mainvisu.jpg'); /* 3枚目の画像を指定 */
	animation-delay: 6s; /* アニメーション開始を6秒遅延 */
}

.slideimg:nth-of-type(4) {
	background-image: url('../image/1349x800px_maramen1.jpg'); /* 4枚目の画像を指定 */
	animation-delay: 9s; /* アニメーション開始を9秒遅延 */
}

.slideimg:nth-of-type(5) {
	background-image: url('../image/1349x800px_mainvisu.jpg'); /* 5枚目の画像を指定 */
	animation-delay: 12s; /* アニメーション開始を12秒遅延 */
}

/* めいんびじゅスリックもどきCSSここまで▲ */

/* ▼メインブロックぼく加筆▼ */
.main_soto {
  width: 90%;
  margin: 0 auto;
  /* background-color: #ccc; */
}




.tabelog {
  max-width: 450px;
  /* margin: 0 auto; */
  margin: 1rem 0 3rem 2rem;/* ふたとのすきま、いんすたとのすきま、リード文とのすきまも制御。ぱでんぐのほうがいい？ */
}

.tenpo_bun p {
  font-size: var(--readbun,1.25rem);
}
address {
  font-size: var(--readbun,1.25rem);/* .tenpo_bun pと同じにすること、TEL番 */
}

.news-solid {
  /* font-size: var(--readbun,24px); */
  font-size: var(--readbun,1.25rem);
  /* font-size: 1rem; */
  width: 90%;
  /* background-color: #6252b7;クラス名だけにしたら、下線ついた */
  border-bottom: 1px solid #000;
  margin-bottom: 15px;
}

/* ▲メインブロックぼく加筆▲ */


/*▲メインブロック▲*/ 

/*▼フッター▼*/

footer {
	background-color:#590f10;
	color:#fff;
	padding: 1rem;
	text-align: right;
	position:relative;
}

#gotop {
	position:fixed;
	/* top: -5rem;
	right:1rem; */
  bottom: 4rem;
  right: 1rem;
  z-index: 50;
	}

#gotop a {
	display:flex;
	justify-content: center;
	align-items: center;
	box-sizing:border-box;
	width: 4rem;
	height: 4rem;
	color:#fff;
	text-decoration:none;
	background-color:#590f10;
	border-radius: 2rem;
	text-align: center;
	}

#gotop a:hover,
#gotop a:active {
	color:#ff9;
	background-color:#556;
	}

/*▲フッターー▲*/ 

/*▼ めであくえり ▼*/
/* tablet */
@media screen and (min-width: 744px) {
	html {
	font-size: 87.5%;/* 14px */
}

  div#contents {
    display: flex;
    flex-wrap: wrap;
  }

  .header_semaku {
    width: 98%;/*さっきまで80％。へだの中きゅってしたけど、ハンバガが右にずれちゃう、はんばがとへだ両立ないかもね媒体によって*/

  }

  main {
    display: block;
    width: 100%;
  }

  .yoko {
    display: flex;
    flex-direction: row;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
  }

  .yokores {
    display: flex;
    flex-direction: row;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
    align-items: center;
  }

  .kasaneru p {
    position: absolute;
    top: 15%;
    right: 10%;
    font-size: 5rem;
    font-weight: 900;
    line-height: 6rem;
  }

  .tenpo_img {
    max-width: 100%;/* 上の方にもimg全体の設定あり */
    width: 30%;
    display: block;
    padding: 1rem 0 1rem 0;
  }

  /* タブレットもPCもインスタアイコン30％なる */
  .insta_icon {
    max-width: 100%;
    width: 30%;
  }

  .tenpo_bun {
    padding-left: 2rem;
  }

  .news-solid {
    /* font-size: var(--readbun,24px); */
    font-size: var(--readbun,1.25rem);
    /* font-size: 1rem; */
    width: 70%;
    /* background-color: #6252b7;クラス名だけにしたら、下線ついた */
    border-bottom: 1px solid #000;
    margin-bottom: 15px;
  }

  #gotop {
    bottom: 4rem;
    right: 2rem;
    }

}/* タブレットここまで、閉じ忘れ注意 */





/* pc */
@media screen and (min-width: 1280px) {
	html {
	font-size: 100%;
  }

  #wrapper {
    width: 100%;/* 93.75%=960/1024 */
    margin: 0 auto;
  }


.main_soto {
  width: 960px;
  margin: 0 auto;
}

.yoko {
  display: flex;
  flex-direction: row;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
}

.yokores {
  display: flex;
  flex-direction: row;/* スマホだけ、yokoをflex解除の縦並びカラムに。 */
  align-items: center;
}

  .kasaneru p {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 6rem;
    font-weight: 900;
    line-height: 8rem;
  }

  .header_semaku {
    width: 90%;/*さっきまで80％。へだの中きゅってしたけど、ハンバガが右にずれちゃう、はんばがとへだ両立ないかもね媒体によって*/

  }


  .tenpo_img {
    max-width: 100%;/* 上の方にもimg全体の設定あり */
    width: 30%;
  }

  .tenpo_bun {
    padding-left: 2rem;
  }


.mobile {
	display:none;
}

.pc {
	display:block;
}

#gotop {
  bottom: 4rem;
  right: 2rem;
	}

}/* pcここまで、閉じ忘れ注意 */

/*▼ タブレット対応 ▼*/ 
/* @media screen and (min-width:768px) {
  html {
    font-size: 87.5%;
  }
  div#contents {
    display: flex;
    flex-wrap: wrap;
  }
  main {
    display: block;
    width: 100%;
  } */
  /* aside {
    width: 33.3333%;
  }
} */
/*▲ タブレット対応 ▲*/ 

/*▼ デスクトップPC対応 ▼*/ 
/* @media screen and (min-width:960px) {
  html {
    font-size: 100%;16px
  } */
  /* #wrapper {
    width: 960px;
    margin: 0 auto;
  } */
  /* aside div a img {
    width: auto;
    margin: 0;
  } */

/*▲ デスクトップPC対応 ▲*/

/*▼ デスクトップPC対応02 ▼*/ 
/* @media screen and (min-width:1024px) {
  #wrapper {
    width: 100%;93.75%=960/1024
    margin: 0 auto;
  }
}

.main_soto {
  width: 960px;
  margin: 0 auto;
} */
/*▲ デスクトップPC対応02 ▲*/