@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*——————————————————————
base
——————————————————————*/
html{
  font-size: 10px;
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    font-family: 'Zen Old Mincho', sans;
    color: #3E3E3E;
    /*全体バックに画像を配した場合以下を記載*/
    background-image: url("../img/top/23728699_s.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position:center center;
    background-size: 20% 20%;
    margin: auto;
    
  }
  *
  {
    margin: 0;
    padding: 0;
  }
  
  a,
  a:active {
    text-decoration: none;
    color: #3E3E3E;
  }

  a:link,
  a:visited{
    text-decoration: none;
  }

  * {
  box-sizing: border-box;
  }

  ol,ul,li,a{
    list-style-type: none;
  }

  /*
.body_wrapper{
  overflow: hidden;
}
*/

/*——————————————————————
————————————————————————
全体設定
————————————————————————
——————————————————————*/


.display_flex,.display_flex-s,.display_flex-r{
  display: flex;
}

.display_flex.space-between{
  justify-content: space-between;
}


.space._00{
  height: 0.4rem;
}

.space._01{
  height: 1rem;
}

.space._02{
  height: 2rem;
}

.space._03{
  height: 3rem;
}

.space._04{
  height: 4rem;
}

.space._06{
  height: 6rem;
}

.space._08{
  height: 8rem;
}

.space._16{
  height: 16rem;
}


/*——————————————————————
hタグフォント指定講習
hタグは基本そのままで使うこと
hタグの前にclass名をつけない
——————————————————————*/

h1{
    font-size: 2.2rem;
}

h2{
  font-size: 4rem;
  line-height: normal;
}

h3{
  font-size: 2.8rem;  
}

/*——————————————————————
tableの基礎設定
——————————————————————*/
/*
.tables_item td{
  font-size: 1.8rem;
  font-weight: 300;
  padding: 1.6rem;
}

.tables_item._01 td,.tables_item._02 td{
  border-bottom: solid #B7B7B7 1px;
}
.tables_item._02 td:first-child{
  border-top: solid #B7B7B7 1px;
}
*/

/*——————————————————————
メインBOX指定
——————————————————————*/
/*-----------------------------
fieldはセンター配置指示のみ
field基本幅指定のみで使用する
幅等の支持は._00〜を付与し指定すること
-----------------------------*/

.field,.entry,.inner,.topic{
  margin: 0 auto;
}

/*-------------------------------------------
.entry,.innerは.field._01等で指示した幅(高)に対し
色・写真等の配置、paddingの指定をする
-------------------------------------------*/
.field._01{
  height: 100%;
}

.entry._00,.field._00._a,.topic._00{
  margin: initial;
}

.entry._02{
  position: relative;
  width: 100vw;
  /*height: 100vh;*/
  z-index: 0;
  top: 0;
  left: 0;
  background: linear-gradient(45deg,rgba(120,91,83,1)0%,rgba(47,37,34,1)100%);
  background-size: cover;
}

.entry._02::after{
  top: 0;
  position: absolute;
  content: '';
  width: 100vw;
  height: 100%;
  background-image: url("../img/top/pattern.png");
  background-repeat: repeat;
  background-position:top center;
  background-size: 20%;
  mix-blend-mode: color-burn;
  opacity: .1;
  z-index: -1;
}

.entry._03{
  width: 100vw;
  height: 400vh;
  height: calc(var(--vh, 1vh)*100*10);
  min-height: 400vh;
  min-height: calc(var(--vh, 1vh)*10)
}

.entry._04{
  width: 100vw;
  height: 400vh;
  height: calc(var(--vh, 1vh) * 100 * 14);
  min-height: 400vh;
  min-height: calc(var(--vh, 1vh) * 100 * 14);
}



.entry._05{
  width: 100vw;
  height: 300vh;
  height: calc(var(--vh, 1vh) * 100 * 6);
  min-height: 300vh;
  min-height: calc(var(--vh, 1vh) * 100 * 6);
}




.inner._01{
  position: absolute;
  width: 100%;
}

.inner._02{
  justify-content: center;
}

.inner._02._a{
  padding: 12rem 0;
  background: rgba(255, 255, 255, 1);
}

.inner._04{
  padding: 12rem 0;
  justify-content: center;
}

.inner._05{
  max-width: 70rem;
}



.topic._01{
  width: 76.6rem;
}

.topic._01._a{
  margin: 0;
}

.topic._01._c{
  margin: 0 auto;
}

.topic._02{
  height: 40rem;
}



/*————————————————————————————————
border設定 ※基本的にmarginは入れない
————————————————————————————————*/

.border{
  width: 100%;
  height: 1px;
  background: rgba(47, 47, 47, 1);
}

.border._01{
  background: rgba(180, 62, 43, 1);
  margin: 2rem 0;
}

.border._02{
  width: 10px;
}

/*———————————————————————————————————
オープニングアニメーション
———————————————————————————————————*/

#splash {
	position: fixed;
  top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#eee;
	text-align:center;
	color:#fff;
}

/*——————————— ゆげ ———————————*/

@keyframes steam01 {
  0% {
    bottom: -600px;
    filter: blur(16px);
    transform: rotateY(0deg);
    transform: scale(0.6, 1);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(1, 1.4);
    opacity: 0.5
  }
  66% {
    transform: rotateY(10deg);
    transform: scaleY(1.8, 1);
    opacity: 0.4
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(60deg);
    transform: scaleY(2, 1.8);
    opacity: 0
  }
}

/*
@keyframes steam02 {
  0% {
    bottom: -400px;
    filter: blur(16px);
    transform: rotateY(0deg);
    transform: scale(0.6, 0.6);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(0.8, 1);
    opacity: 0.4
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1, 1.2)
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(50deg);
    transform: scaleY(1.2, 1.4);
    opacity: 0
  }
}
*/

.steamWrap {
  width: 100%;
  height: 100%;
  background: rgba(130, 50, 40, 1);
}

/*
.steamBox{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}
*/

.steamBox > img {
  display: flex;
  justify-content: center;
  /*
  width: 100%;
  display: block
  */
}
.steam01 {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  /*right: 0;*/
  animation: steam01 18s infinite linear;
  opacity: 0
}

.steam02 {
  position: absolute;
  left: 0;
  animation: steam02 14s infinite linear;
  opacity: 0
}
.steam03 {
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  animation: steam02 12s infinite linear;
  animation-delay: 6s;
  opacity: 0
}
.steam01 img, .steam03 img {
  width: 532px;
  height: 800px
}
/*
.steam02 img {
  width: 399px;
  height: 600px
}
*/

/*——————————— ゆげ ここまで ———————————*/


/*——————————— オープニング文字 ———————————*/
.titles {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.8rem;
  color: #f7f7f7;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .character {
    display: inline-block;
    animation: fade 6s var(--ease-in-out-sine) calc(var(--index) * 0.15s) both
    infinite;
  }
}

.character:not(:lang(ja)) {
  display: none;
}

.alternative:lang(ja) {
  position: fixed !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  contain: strict !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

@keyframes fade {
  0% {
    filter: blur(4px);
    opacity: 0;
  }

  50% {
    filter: blur(0);
    opacity: 1;
  }

  100% {
    filter: blur(4px);
    opacity: 0;
  }
}

.background {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

:root {
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);

  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/*——————————— オープニング文字ここまで ———————————*/



/*———————————————————————————————————————
fadeInアクションの一例
translateの()内で縦軸・横軸の
移動量を指示する(.is-showのclass付与)でJQ発動
.inBoxはjQ発動前の位置
————————————————————————————————————————*/


.fadeIn_up{
  opacity: 0;
  transform: translate(0, 20%);
  transition: 1s;
}

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.inBox {
  margin: 2.2rem 0;
}


/*——————————————————————
scroll_down 設定の一例
——————————————————————*/
.scroll_down{
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 10rem;
    background-color: #3E3E3E;
    left: 50%;
    bottom: 0;
  }
  
  .scroll_down p{
    margin: 0 auto;
    margin-left: -18px;
    margin-top: -16px;
  }
  
  .scroll_down span {
    position: absolute;
    top: 8px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /*-webkit-animation: sdb 2s infinite;*/
    animation: sdb 2s infinite;
    border: 1px solid #3E3E3E;
  }
  
  
  @keyframes sdb {
    0% {
      transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(-68px, 68px);
      opacity: 0;
    }
  }
  /*scroll_down一例 ここまで*/


/*——————————————————————
ナビメニュー
——————————————————————*/
.navArea{
  position: relative;
  width: 100%;
  height: 100%;
  flex-flow: column;
  justify-content: flex-start;
  padding-top: 4rem;
  transition: .4s;
}

.header_inner{
  position: absolute;
  left: 0;
  width: 22%;
  height: 100%;
  background: rgba(255, 255, 255, .8);
  z-index: 2;
}

.fs-logo{
  margin: 0 auto;
  width: 9.8rem;
  height: auto;
  /*overflow: hidden;*/
  transition: .4s;
}

.logo{
  transition: .3s;
}

.logo:hover{
  opacity: 0.6;
}

.logo img{
  width: 100%;
  height: auto;
  /*padding-top: 6rem;*/
}


.global_menu{
  margin: 0 auto;
  width: 17.6rem;
  transition: .4s;
}

.header_nav li{ 
  padding: 1.2rem 0;
}

.header_nav ul li {
  height: 80px;
  text-align: center;
}

.header_nav li a{
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 1.6rem;
  font-weight:500;
  letter-spacing: .1rem;
  transition: .4s;
  cursor: pointer;
}

.header_nav li a:hover{
  letter-spacing: 0.3rem;
  opacity: 0.4;
}


/*—————navタブにopen classがついた時の動作—————*/

.header_inner .open_mask{
  display: none;
}

.header_inner.open{
  overflow-y: auto;
  height: 100%;
}

.header_inner.open .open_mask{
  display: block;
}

.navArea.display_flex{
  align-items: initial;
}


/*————————————ここまで————————————*/

/*————————————————————————————
  ハンバーガー トグル形状とアクション
————————————————————————————*/

.toggle_btn.pc-only{
  position: fixed;
  width: 6rem;
  height: 6rem;/*高さ必ず指定してタップ領域確保*/
  display: block;
  top: 0rem;
  right: 4rem;
  transition: .3s;
  z-index: 9999;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
  outline: none;
  margin: 2.4rem;
  filter: drop-shadow(0px 0px 6px rgba(133, 133, 133, 0.3));
  transform: translateY(-100px);
}

.btn01{
  width: 100%;
  height: 2.2rem;
  padding: 0 1.2rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.toggle_btn span {
  display: block;
  left: 0;
  height: 2px;
  background-color: rgba(96, 96, 96, 1);
  transition: .4s;
  cursor: pointer;
  z-index: 9999;
}

.toggle_btn.open span {
  background-color: rgba(96, 96, 96, 1);
}

.toggle_btn.open span:nth-child(1) {
  -webkit-transform: translateY(1.2rem) rotate(30deg);
  transform: translateY(1.0rem) rotate(30deg);
}
.toggle_btn.open span:nth-child(2) {
  opacity: 0;
}
.toggle_btn.open span:nth-child(3) {
  -webkit-transform: translateY(-1.2rem) rotate(-30deg);
  transform: translateY(-1.0rem) rotate(-30deg);
}
/*————————————ここまで————————————*/


/*———————————————————————————————————
ナビメニュー スクロールダウンでハンバーガー
———————————————————————————————————*/

/*====== 上に消えるアニメ ======*/
.header_inner.navArea.UpMove, .toggle_btn.pc-only.UpMove,.mask .UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
  opacity: 1;
  transform: translateY(0);
}
to {
  opacity: 0;
  transform: translateY(-100px);
}
}

/*====== 下に消えるアニメ ======*/
.header_inner.navArea.DownMove, .toggle_btn.pc-only.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
  opacity: 0;
  transform: translateY(-100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.header_inner.navArea.UpMove{
  left: -37.6rem;
}

.header_inner.navArea.DownMove{
  left: 0;
}


/*====== 下に消えるアニメ ここまで======*/


.mask {
position: fixed;
left: -37.6rem;
transition: 0.4s;
}

@media screen and (min-width:768px){
.open .mask{
  display: block;
  top: 0;
  left: 0;
  width: 37.6rem;
  height: 100vh;
  background: rgba(255, 255, 255, 1);
/*border-left: solid rgba(203, 51, 45, 1) 2px;*/
z-index: -1;
}
}


.header_inner.open{
  position: fixed;
  min-width: 0;
  width: 37.6rem;
  animation: none;
  transform: none;
  margin-right: 0;
  background: none;
}

.open_button{
  position: relative;
  width: 100%;
  padding: 1.3rem 1rem;
  font-size: 1.2rem;
  text-align: center;
  cursor: pointer;
}

.open_button img{
  height: 1.2rem;
  width: auto;
  margin-right: 0.6rem;
}


.open_button._a{
  background: rgba(180, 62, 43, 1);
  border: solid rgba(180, 62, 43, 1) 1px;
}

.open_button._b{
  background: rgba(255, 255, 255, 1);
  border: solid rgba(180, 62, 43, 1) 1px;
}

.open_button a{
  font-size: 1.4rem;
}

.open_button::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  top: 4px;
  left: 0;
}

.open_button::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  bottom: 4px;
  left: 0;
}

.open_button._a::before,
.open_button._a::after{
  background: rgba(255, 255, 255, 1);  
}

.open_button._b::before,
.open_button._b::after{
  background: rgba(180, 62, 43, 1);  
}

.open_button._a a{
  color: rgba(255, 255, 255, 1);
}

.open_button._b a{
  color: rgba(180, 62, 43, 1);
}


.language{
  align-items: center;
  font-size: 1.6rem;
}

.language img{
  width: 2rem;
  height: auto;
  margin-right: 1rem;
}

.language a{
  display: inline-block;
  position: relative;
  color: rgba(62, 62, 62, 1);
  text-decoration: none;
  cursor: pointer;
  transition: 3s;
}

.language a::after {
  content: '';
  position: absolute;
  bottom: -0.6rem;
  left: 0;
  width: 0;
  height: 1px; /* アンダーラインの太さ */
  background-color: black; /* アンダーラインの色 */
  transition: width 0.3s ease; /* アニメーション効果 */
}

.language a:hover::after {
  width: 100%;
}


/*——————————————————————
Side Menu
——————————————————————*/

.inquiry{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 4.8rem;
  height: 17.8rem;
  background: rgba(255, 255, 255, 1);
  border: solid rgba(180, 62, 43, 1)1px;
  transition: .4s;
}

.inquiry a{
  height: 100%;
  writing-mode: vertical-rl;
  font-size: 1.6rem;
  color: rgba(180, 62, 43, 1);
  border-left: solid rgba(180, 62, 43, 1) 1px;
  border-right: solid rgba(180, 62, 43, 1) 1px;
  margin: 0 0.66rem;
  padding: 0.6rem;
  display: flex;
  justify-content: center;
  transition: .4s;
}

.inquiry:hover{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 4.8rem;
  height: 17.8rem;
  background: rgba(180, 62, 43, 1);
  border: solid rgba(180, 62, 43, 1)1px;
  transition: .4s;
}

.inquiry:hover a{
  color: rgba(255, 255, 255, 1);
  border-left: solid rgba(255, 255, 255, 1) 1px;
  border-right: solid rgba(255, 255, 255, 1) 1px;
}


/*——————————————————————————————————
詳細はこちらbutton指示
——————————————————————————————————*/

.itemss {
  position: relative;
  margin: 0 auto;
  width: 28rem;
  height: 6.4rem;
  background: rgba(180, 62, 43, 1);
  transition: 0.4s;
}

.itemss::before,
.itemss::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 6.2rem;
  margin: auto;
  background-color: rgba(255, 255, 255, 1);
}

.itemss::before{
  margin-left: 1rem;
}

.itemss::after{
  margin-left: 26.8rem;
}


.moji_hover p {
  font-weight: 600;
  letter-spacing: 4px;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrown{
  display: block;
  width: 1.2rem;
	height: 1.2rem;
	border-top: 0.2rem solid rgba(58, 109, 173, 1);
	border-right: 0.2rem solid rgba(58, 109, 173, 1);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
  transition: 0.4s;
}

.itemss:hover{
  background: rgba(130, 50, 40, 1);
}

/*——————————————ここまで—————————————*/

/*——————————————ここまで—————————————*/

/*———————————————————————————
first-view 時間差スライドイン
———————————————————————————*/

/* @keyframes ルールでスライドインアニメーションを定義 */
@keyframes slideIn_a {
  0% {
      transform: translateX(-100%); /* 画面外 */
      opacity: 0; /* 最初は非表示 */
  }
  100% {
      transform: translateX(0); /* 画面内 */
      opacity: 1; /* 表示 */
  }
}

@keyframes slideIn_b {
  0% {
      transform: translateY(100%); /* 画面外 */
      opacity: 0; /* 最初は非表示 */
  }
  60% {
    transform: translateY(0%); /* 画面内 */
    opacity: 0.1; /* 表示 */
  }
  100% {
      transform: translateY(0); /* 画面内 */
      opacity: 1; /* 表示 */
  }
}


/* スライドインさせる要素に適用するCSS */
.slide-in-element {
  position: relative; /* 位置を制御するために必要 */
  opacity: 0; /* 最初は非表示 */
  animation: slideIn_a 2s ease-in-out 0.4s forwards; /* アニメーションの設定 */
}

.slide-in-element:nth-child(2) { /* 2番目の要素に異なるdelayを設定 */
  animation-delay: 0.8s; /* 0.3秒遅れ */
}

.slide-in-element-s {
  position: relative; /* 位置を制御するために必要 */
  opacity: 0; /* 最初は非表示 */
  animation: slideIn_b 2.4s ease-in-out .8s forwards; /* アニメーションの設定 */
}


/*———————————————————————————
画面いっぱいfirst-view フェードイン
———————————————————————————*/

.blurTrigge{
  padding: 6rem 10rem 0 0;
  writing-mode: vertical-rl;
  line-height: 6.8rem;
  letter-spacing: .33rem;
  color: rgba(233, 238, 244, 1);
  filter: drop-shadow(4px 4px 6px rgba(62,62,62,1));
}


[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}


.mv02 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.mv02 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.mv02 .slide {
  display: flex;
  justify-content: right;
  height: 100vh;
}
.mv02 .slide-media {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 78%;
  height: 100%;
}
.mv02 .slide-media img {
  -webkit-transition: 7s 1s linear;
  transition: 7s 1s linear;
  -webkit-transform: translateX(-1.5%) scale(1.1);
          transform: translateX(-1.5%) scale(1.1);
}

.mv02 .swiper-slide[class*=-active] .slide-media img {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: translateX(1.5%) scale(1.05);
          transform: translateX(1.5%) scale(1.05);
}

@media only screen and (max-width: 1024px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0 4rem;
  }
  .pc {
    display: none !important;
  }

  /*
  .mv02 {
    margin-bottom: 8rem;
  }
  */
  .mv02 .slide {
    /*height: max(70vh, 70vw);*/
  }
  .mv02 .slide-title {
    font-size: 4rem;
  }
  .mv02 .slide-text {
    font-size: 1.6rem;
    margin: 3.2rem 0;
  }
}
@media only screen and (max-width: 599px) {
  html {
    font-size: 50%;
  }
  .pc-tab {
    display: none !important;
  }
}
@media only screen and (min-width: 1025px) {
  .tab-sp {
    display: none !important;
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@media only screen and (min-width: 600px) {
  .sp {
    display: none !important;
  }
}
/*———————————————————————————
スクロールアイコン指示
———————————————————————————*/

.scroll_icon{
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
  /*align-items: flex-end;*/
  z-index: 2;
}

.scroll_icon img{
  width: 27.6rem;
  height: auto;
}

.svg-s{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}


.arrowsss {
  position: absolute;
  width: 8rem;
  height: 8rem;
  bottom: 0;
}

.arrowsss path {
  stroke: rgba(227, 127, 42, 1);
  fill: transparent;
  stroke-width: 0.4rem;  
  animation: arrow 2s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}


.arrowsss path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; 
}

.arrowsss path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s;
}

.arrowsss path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s;
}


/*—————————————————————————————————
———————————————————————————————————
牛たん料理閣とはエリア
———————————————————————————————————
—————————————————————————————————*/

.kaku_all_height.space._08{
  width: 100vw;
  height: 400vh;
  height: calc(var(--vh, 1vh)*100*8);
  min-height: 400vh;
  min-height: calc(var(--vh, 1vh)*100*8)
}

.kaku_all_height.space._04{
  width: 100vw;
  height: 400vh;
  height: calc(var(--vh, 1vh)*100*4);
  min-height: 400vh;
  min-height: calc(var(--vh, 1vh)*100*4)
}

.kaku_all_height._03{
  height: calc(var(--vh, 1vh)*100*3);
  min-height: calc(var(--vh, 1vh)*100*3)
}


.kaku_all_height._02{
  height: calc(var(--vh, 1vh)*100*2);
  min-height: calc(var(--vh, 1vh)*100*2)
}

.kaku_sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0
}

.kaku_con_back{
  width: 100vw;
  height: 100vh;
  z-index: 0;
  top: 0;
  left: 0;
  background-image: url("../img/top/sab_img_01.jpg");
  background-repeat: no-repeat;
  background-position:center center;
  background-size: cover;
  overflow: hidden;
}

.kaku_con_back::before{
  position: absolute;
  content: '';
  background: rgba(47,37,34,0.8);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.concept_base{
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.concept_title{
  margin: 0 auto;
  height: 100%;
  width: 92.6rem;
  padding: 9rem 0;
}

.concept-copy{
  position: relative;
  top: 6rem;
  line-height: 3.6rem;
  letter-spacing: 0.6rem;
  color: rgba(255, 255, 255, 1);
  font-size: 2.8rem;
  writing-mode: vertical-rl;
}

.concept-copy::before{
  content: '';
  position: absolute;
  top: -6rem;
  left: 0;
  right: 0;
  width: 2px;
  height: 4rem;
  margin: auto;
  background-color: rgba(201, 201, 201, 1);
}

.concept_next{
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100*2);
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100*2);
}

.concept_a{
  position: absolute;
  width: 100%;
  height: 100vh;
}

.concept-cops{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 1);
  line-height: 3.6rem;
  letter-spacing: 0.3rem;
  position: sticky;
}


.concept-cops._01{
  align-items: center;
}

.concept_a._01{
  top: 9rem;
  text-align: center;
}

.concept_a._02{
  top: 22rem;
}

.concept_a._03{
  top: 38rem;
  padding-left: 10rem;
}

.concept_a._04{
  top: 54rem;
}










/*
.kaku_con_back {
  height: 100vh;
  height: calc(var(--vh, 1vh)*100);
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100)
}


.kaku_base_box{
  
  flex-direction: column;
  align-items: center;
  
  justify-content: center;
  width: 100%;
  height: 100%
}
*/

.kaku_theme{
  padding: 0rem 0 0 0;
  justify-content: flex-start;
}

.kaku_concept{
  align-items: center;
}

.kaku_concept._x{
  justify-content: flex-end;
}

.kaku_concept._01{
  position: sticky;
  top: 270px;
}

.kaku_concept._02{
  position: sticky;
  top: 460px;
}

.kaku_concept._03{
  position: sticky;
  top: 640px;
}


.kaku_concept_head{
  padding: 2rem;
}

.kaku_concept_center{
  flex-flow: column;
  justify-content: flex-start;
  top: 0;
  width: 68rem;
}

.kaku_height{
  position: absolute;
  top: 0;
  height: 100vh;
}


.kaku_concept_left,.kaku_concept_right{
  width: 14%;
  justify-content: flex-start;
  letter-spacing: 0.6rem;
}

.left_copy{
  font-size: 2.8rem;
  writing-mode: vertical-rl;
}

.kaku_concept-copy{
  line-height: 3.6rem;
  color: rgba(255, 255, 255, 1);
}

.kaku_concept-copy.left_copy{
  position: relative;
  display: inline-block;
  padding-top: 6rem;
  position: sticky;
  top: 140px;
}

.kaku_concept-copy.left_copy::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 2px;
  height: 4rem;
  margin: auto;
  background-color: rgba(201, 201, 201, 1);
}
.kaku_pict{
  width: 13.6rem;
  height: auto;
  margin-right: 1rem;
}

.kaku_pict img{
  width: 100%;
}

.kaku_concept-copy.-pict{
  font-size: 1.6rem;
}

.kaku_concept-copy.-top{
  font-size: 2.4rem;
  text-align: center;
  letter-spacing: 0.3rem;
  position: sticky;
  top: 140px;
}


/*——————————————————————————————————
————————————————————————————————————
お品書きエリア
————————————————————————————————————
——————————————————————————————————*/


.h2-sab{
  position: relative;
  font-size: 2.8rem;
  writing-mode: vertical-rl;
  letter-spacing: 0.6rem;
  padding-top: 5rem;
  margin-right: 5rem;
}

.h2-sab::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 2px;
  height: 4rem;
  margin: auto;
  background-color: rgba(180,62,43,1);
}

.h2-sab._a{
  color: rgba(255, 255, 255, 1);
}

.h2-sab._a::before{
  background-color: rgba(255,255,255,1);
}

.h2-sab.-a{
  color: rgba(180,62,43,1);
}

.kaku_menu{
  position: relative;
  width: 100%;
  height: auto;
  transition: .4s;
}

.kaku_menu img{
  width: 32.8rem;
  height: auto;
}

.kaku_menu_copy{
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  bottom: 0;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  transition: .4s;
}

.kaku_menu_copy::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height:50%;
  margin: auto;
  background: linear-gradient(0deg,rgba(180,62,43,1)0%,rgba(180,62,43,0)100%);
  transition: .3s;
}

.kaku_menu_copy:hover::before{
  height:100%;
}

.kaku_menu_copy:hover .menu_detail{
  opacity: 1;
}

.kaku_menu_list{
  width: 106rem;
  justify-content: space-between;
}

.menu_title{
  position: absolute;
  width: 100%;
  bottom: 4rem;
}

.kaku_menu_name{
  position: relative;
  font-size: 2.8rem;
  padding: 2rem 0;
}

.kaku_menu_name::before,
.kaku_menu_name::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 2.4rem;
  margin: auto;
  background-color: rgba(255,255,255,1);
}

.kaku_menu_name::before{
  margin-left: -1rem;
}

.kaku_menu_name::after{
  margin-left: 1rem;
}

.kaku_menu_sab{
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.3;
}

.menu_detail{
  position: absolute;
  width: 100%;
  height: 80%;
  font-size: 2.4rem;
  writing-mode: vertical-rl;
  letter-spacing: 0.6rem;
  flex-flow: column;
  justify-content: center;
  opacity: 0;
  transition: .4s ease;
}


/*——————————————————————————————————
————————————————————————————————————
お知らせ エリア
————————————————————————————————————
——————————————————————————————————*/
.news_base{
  width: 106rem;
}

.positions{
  text-align: center;
}

/*———————————button内設定———————————*/
.info-item{
  position: relative;
  height: 7.2rem;
  text-align: center;
  font-size: 1.6rem;
  border-top: solid rgba(180, 62, 43, 1) 1px;
}

.info-item-inner{
  position: absolute;
  justify-content: space-between;
  padding: 1rem 4rem;
  width: 100%;
  height: 100%;
  align-items: center;
}

.info-item:last-child{
  border-bottom: solid rgba(180, 62, 43, 1) 1px;
}

.info-time{
  align-items: center;
}

.date{
  color: #B7B7B7;
}

.info_etc{
  width: 10rem;
  height: 3.2rem;
  margin: 0 1rem 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid #3E3E3E;
  background: #fff;
}

.info_texts{
  width: 68rem;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.info.arrow01{
  width: 2.4rem;
}

.item-info:hover .info.arrow01{
  left: 1.6rem;
}

.arrow01{
  display: block;
  position: relative;
  width: 100%;
  height: 8rem;
  left: 0;
  margin-right: 8.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .4s;
}

.arrow01::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5.6rem;
  margin: auto;
  width: 4.8rem;
  height: 1px;
  background: #3E3E3E;
  transition: .4s;
}

.arrow01::after {
  content: '';
  position: absolute;
  top: 3.6rem;
  right: -5.6rem;
  width: 0.9rem;
  height: 1px;
  transform: rotate(42deg);
  background: #3E3E3E;
  transition: .4s;
}
.btn_base a:hover .arrow01{
  left: 1.6rem;
}
.info-item:hover .arrow01{
  left: 1.6rem;
}

.info-item-inner::before {
  opacity: 0;
  content: "";
  width: 100%;
  height: 7.2rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(45deg,rgba(0,147,233,0.3),rgba(128,208,199,0.3));
  z-index: -1;
  transition: .4s;
}
.info-item:hover .info-item-inner::before{
  opacity: 1;
}
/*———————————ここまで———————————*/

/*—————————————————————————————————
———————————————————————————————————
こだわりエリア
———————————————————————————————————
—————————————————————————————————*/

.h2-sab.-b{
  margin-right: 0;
}

.thumbnail{
  /*position: absolute;*/
  top: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}


.thumbnail img,.thumbnail video{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.commit_next{
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100*2);
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100*2);
}

.commit_next._a{
  position: static;
  top: 0;
  width: 100%;
}

.commit_base{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.commit{
  position: absolute;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  right: 4rem;
  width: 44rem;
  height: 100vh;
}


.commit._a::before,
.commit._b::before,
.commit._a::after,
.commit._b::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  margin: auto;
}

.commit._a::before,
.commit._b::before{
  margin-left: -41rem;
}

.commit._a::after,
.commit._b::after{
  margin-left: 41rem;
}

.commit._a::before,
.commit._a::after{
  background-color: rgba(180, 62, 43, 1);
}

.commit._b::before,
.commit._b::after{
  background-color: rgba(255, 255, 255, 1);
} 


.commit._a{
  color: rgba(180, 62, 43, 1);
  background: rgba(255, 255, 255, 1);
}

.commit._b{
  color: rgba(255, 255, 42553, 1);
  background: rgba(180, 62, 43, 1);
}

.commit_title{
  font-size: 2.4rem;
  line-height: 4rem;
  text-align: center;
}

.commit_text{
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: .05rem;
  text-align: center;
}

.ima_cow img{
  width: 18rem;
  height: auto;
}

.ima_menu img{
  width: 36rem;
  height: auto;
}


/*—————————————————————————————————
———————————————————————————————————
牛たんの秘密エリア
———————————————————————————————————
—————————————————————————————————*/

.secret-back{
  position: relative;
  /*パララックスで背景画像を固定する(セクション内で)際以下の一文を入れる*/
  background-attachment: fixed;
  background-image: url("/assets/img/top/back-image-01.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

.secret-title{
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.secret-title img{
  width: 156.6rem;
  height: auto;
  margin-left: 6rem;
}

.h2-sab._01{
  position: absolute;
  color: rgba(255, 255, 255, 1);
  margin-right: 0;
}

.secret-text{
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.05rem;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}



.accordion{
  height: 30rem;
  padding: 3%;
  background: #FFFEEE;
  border-radius: 1rem;
  overflow-y: scroll;
}

/*Q&A全体を囲む場合ここも指示を入れる*/
.accordion .lead{
  margin-bottom: 4rem;
  border-bottom: dotted #000 1px;
  /*
  padding: 2rem;
  background: #34AACD;
  border-radius: 1rem;
  */
}

.lead{
  position: relative;
  border-top: solid rgba(255, 255, 255, 1) 1px;
  border-bottom: solid rgba(255, 255, 255, 1) 1px;
  padding: 2rem 0;
}


.quest{
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  font-family: serif;
  font-weight: 400;
  transition: all .5s ease; 
}


.quest::before,.quest::after{
  position: absolute;
  content: '';
  right: 0;
  width: 3.2rem;
  height: 3.2rem;
}


.quest::before{
  background-image: url("/assets/img/top/icon_down.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 3.2rem;
  height: 3.2rem;
  transform: rotate(0deg);
  transition: 0.3s;
}

.quest img{
  width: 3.2rem;
}


.quest::after{
  top: 2rem;
  right: 1.5rem;
  transform: rotate(90deg);
}


.quest.close::before{
  transform: rotate(180deg);
}

.quest.close::after{
  display: none;
}

.quest p{
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 1);
  margin-left: 2rem;
}


.box{
  display: none;
  justify-content: space-between;
}

.box_open{
  justify-content: space-between;
  padding: 2rem 0;
}

.box_ime img{
  width: 24rem;
  height: auto;
}

.box_lead{
  color: rgba(255, 255, 255, 1);
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.04rem;
  width: 64%;
}

/*—————————————————————————————————
———————————————————————————————————
ご利用シーンエリア
———————————————————————————————————
—————————————————————————————————*/
.scene-space{
  justify-content: space-between;
}

.scene-box{
  width: 37rem;
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: 0.05rem;
}

.scene{
  width: 36rem;
}

.scene img{
  width: 100%;
  height: auto;
}

.scene-title{
  font-size: 2.8rem;
  letter-spacing: .2rem;
  color: rgba(180, 62, 43, 1);
}

/*—————————————————————————————————
———————————————————————————————————
ご利用シーンエリア
———————————————————————————————————
—————————————————————————————————*/

.kaku_con_back{
  background-image: url("../img/top/sab_img_02.jpg");
}

.concept_title._a{
  width: 100%;
  display: flex;
  justify-content: center;
}

.concept-cops._a{
  font-size: 1.6rem;
}

.concept_a._05{
  top: 36rem;
  text-align: center;
}

.concept_a._06{
  top: 48rem;
  text-align: center;
}

.concept_next._a{
  height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}



/*——————————————————————————————————
————————————————————————————————————
footerベーシック
————————————————————————————————————
——————————————————————————————————*/
.f_field,.f_nav,.f_bottom{
  margin: 0 auto;
}

.f_field{
  position: relative;
  width: 76.7rem;
}

.f_front_top,.f_nav{
  justify-content: space-between;
}

.f_front_top{
  position: relative;
  justify-content: center;
}

.f_rogo,.f_nav li,.sns_icon img{
  display: block;
  padding: 1rem 0;
  transition: .3s;
}

.f_rogo:hover,.f_nav li:hover,.sns_icon img:hover{
  opacity: .6;
}

.f_front_top::before,.f_front_top::after{
  position: absolute;
  content: '';
  width: 100vw;
}

.f_front_top::before{
  border-top: solid rgba(180, 62, 43, 1)1px;
  top: 0;
  margin-top: -4rem;
}

.f_front_top::after{
  border-bottom: solid rgba(180, 62, 43, 1)1px;
  bottom: 0;
  margin-bottom: -4rem;
}

.f_rogo{
  width: 100%;
  height: auto;
}

.f_rogo img{
  width: 12.2rem;
  height: auto;
}

.f_nav a{
  font-size: 1.6rem;
  color: rgba(62, 62, 62, 1);
  text-align: center;
}

.f_nav._01{
  width: 29.6rem;
}

.f_nav._01 a{
  writing-mode: vertical-rl;
}

.f_nav._02{
  text-align: center;
  width: 46rem;
}


.f_bottom{
  justify-content: space-between;
}

.sns_icon{
  width: 25.4rem;
  height: auto;
  justify-content: space-between;
}

.sns_icon img{
  width: 5.3rem;
  height: auto;
}

.copyright{
  font-size: 1.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  width: 100%;
  padding: 1rem;
  background: rgba(180, 62, 43, 1);
}


/*——————————————————————————————————
page_topアイコン指示
——————————————————————————————————*/

.page_top{
  position: fixed;
  font-size: 1.6rem;
  color: #000;
  /*writing-mode: vertical-rl;*/
  letter-spacing: 0.1rem;
  bottom: 2rem;
  right: 1.4rem;
  z-index: 1;
  opacity: 1;
  cursor: pointer;
  transition: all 3s;

  /*filter: drop-shadow(0 0 6px rgba(80,80,80,0.9));
  transform: translateY(100px);*/
}

.page-top-width img{
  width: 8.8rem;
  height: auto;
}


/*——————————————————————
————————————————————————
ここから下層ページ
————————————————————————
——————————————————————*/

/*——————————————————————
————————————————————————
下層ファーストビュー エリア
————————————————————————
——————————————————————*/

#first-view_bg._under{
  position: relative;
  /*margin: 0 auto;*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  background-size: cover;
  width: 100%;
  right: 0;
  height: 29.2rem;
  /*—————————————————————————————————————————
  以下を入れないと左右に不明な隙間が—できる場合がある
  —————————————————————————————————————————*/
  overflow: hidden;
}

.top_pic{
  position: absolute;
  width: 78%;
  height: 100%;
  right: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.top_pic._01{
  background-image: url(../img/menu/under_img_01.jpg);
}

.top_pic._02{
  background-image: url(../img/store_info/under_img_02.jpg);
}



.h2_under_title{
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  /*border: solid rgba(255, 255, 255, 1)3px;*/
}

.h2-sab._a._01{
  filter: drop-shadow(4px 4px 10px rgba(62, 62, 62, 1));
}


/*——————————————————————
————————————————————————
メニューエリア
————————————————————————
——————————————————————*/

/*—————————————————————————————————————————
メニューナビ メインタイトル
—————————————————————————————————————————*/
.under_sub_menu{
  position: relative;
  justify-content: center;
}

.under_sub_menu p{
  letter-spacing: .4rem;
}

.under_sub_menu p::before,
.under_sub_menu p::after{
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  background: rgba(47, 47, 47, 1);
}

.under_sub_menu p::before{
  margin: 0 -1.8rem;
}

.under_sub_menu p::after{
  margin: 0 1.8rem;
}
/*————————————ここまで————————————*/


/*—————————————————————————————————————————
目次ハイライト
—————————————————————————————————————————*/
.kaku_menu_navi{
  position: fixed;
  top: 30rem;
  /*top: 0;*/
  right: 0;
  padding: 10rem 8rem 4rem 6rem;
  /*height: 100%;*/
  background: rgba(255, 255, 255, .8);
  /*background: rgba(255, 255, 255, 1.0);
  display: flex;
  align-items: center;
  /*filter: drop-shadow(0px 0px 5px rgba(133, 133, 133, .2));*/
  z-index: 1;
  transition: .4s;
}

/*特定のセクションまで来たら、以下がフェードアウト ※js使う*/
.kaku_menu_navi.fixed.none{
  opacity: 0;
}

.menu_gradation{
  position: absolute;
  width: 100%;
  height: 8rem;
  top: 0;
  left: 0;
  background: linear-gradient(180deg,rgba(249,217,210,1)20%,rgba(255,255,255,0)100%);
  z-index: -1;
}

.kaku_menu_navi li{
  font-size: 1.6rem;
  padding: 1rem 0;
}


.kaku_menu_navi .toc-highlight{
  color: rgba(180, 62, 43, 1);
  font-weight: bold;
}

.kaku_menu_navi span img{
  width: 2.2rem;
  height: auto;
  margin-left: 0.6rem;
}

.kaku_menu_navi span{
  opacity: 0;
}

.kaku_menu_navi .toc-highlight span{
  opacity: 1;
}


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

.sab_mission::before{
  content: '';
  width: 2rem;
  height: 1px;
  background: #000;
  margin-left: -2.2rem;
}
/*————————————ここまで————————————*/

/*—————————————————————————————————————————
メニューサブタイトル
—————————————————————————————————————————*/
.sab_explanation{
  text-align: center;
  font-size: 1.6rem;
  line-height: 3.2rem;
}

.sub_menu_title{
  width: 100%;
  font-size: 2rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sub_menu_title::before,
.sub_menu_title::after{
  content: '';
  width: 2rem;
  height: 1px;
  background: #000;
  margin: 0 1.2rem;
}
/*————————————ここまで————————————*/



.menu_flex{
  justify-content: space-between;
  gap: 4rem;
}

.left_side,
.right_side{
  width: 50%;
}

.main_pho{
  position: relative;
  width: 33rem;
  height: auto;
}

.menu_pho_w{
  position: absolute;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, .8);
  padding: .6rem;
  bottom: 0;
}

.main_pho img{
  width: 100%;
  height: auto;
}

.right_side._p{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.title_pho img{
  height: 4.4rem;
  width: auto;
}

.product,.price{
  font-size: 2rem;
  padding: 0.4rem;
}

.annotation,.product._a,.price._a{
  font-size: 1.8rem;
}

.annotation{
  color: rgba(180, 62, 43, 1);
}

.annotation,.product{
  margin-left: 2rem;
}

.price{
  margin-left: 4.2rem;
}

.narration p,.course p,.oder_banner p{
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: .05rem;
  padding: 0 4rem;
}

.course p{
  text-align: center;
}

.narration p{
  border-left: solid rgba(180, 62, 43, 1);
  border-right: solid rgba(180, 62, 43, 1);
}

.narration span,.oder_banner span{
  color: rgba(180, 62, 43, 1);
}

.narration._a p{
  border-left:none;
  border-right: none;
  padding: 0rem;
}

.menu_banner{
  height: auto;
  transition: .3s;
}

.menu_banner:hover{
  opacity: .8;
}

.menu_banner img{
  width: 100%;
  height: auto;
}

.oder_banner{
  text-align: center;
  width: 100%;
  border: solid rgba(180, 62, 43, 1)1px;
  padding: 4rem
}


/*——————————————————————
————————————————————————
店舗案内 エリア
————————————————————————
——————————————————————*/

.kaku_menu_navi.-info{
  padding: 4rem;
}

.menu_gradation.-info{
  background: linear-gradient(180deg, rgba(248, 212, 163, .8) 20%, rgba(255, 255, 255, 0) 100%);
}

.tenpo_title{
  justify-content: center;
}

.under_sub_menu._a{
  margin-right: 4rem;
}

.h3_moji{
  font-size: 1.6rem;
  text-align: center;
  margin-left: 1rem;
  display: flex;
  align-items: center;
}

.h3_moji._tab{
  background: rgba(180, 62, 43, 1);
  color: rgba(255, 255, 255, 1);
  padding: 1rem 1.6rem;
}

.h3_moji._aka{
  margin-left: 4rem;
}


/*——————画像サムネイル クリック切替——————*/
.main li:nth-child(n+2){
  display: none;
}

.sub-img {
  display: flex;
  margin-top: 10px;
}
.sub-img li {
  margin-right: 1%;
  width: calc(97% / 4);
}

.sub-img img {
  cursor: pointer;
  width: 100%;
}

.sub-img li.active{
  border: 2px solid red;
}


.right_side._w{
  font-size: 1.6rem;
  line-height: 3.2rem;
  letter-spacing: .05rem;
}

.topic_base{
  padding: 1rem;
}

.topic_base._a{
  background: rgba(253, 245, 243, 1);
}

.topic_base._b{
  background: rgba(249, 238, 233, 1);
}

.topic_title,.g-map-moji,.h3_moji{
  color: rgba(180, 62, 43, 1);
}

.g-map{
  align-items: center;
}

.g-map img{
  width: 1.6rem;
  height: auto;
  margin-right: .6rem;
}


/*——————————————————————
display: none
——————————————————————*/
/* 
<br class>などに対して
基本的に (max-width:767px)は sp-only
(max-width:767px)以下 sp-only_02で使用すること
*/
.abc_icon._02,.form3,.leads._02,.sp-only,.sp-only_01,.sp-only_02,.icon-e,.menu._03._a,.br-sp,.space._04._sp,.kaku_menu_navi_sp{
  display: none;
}