/*!
Theme Name: gatewing-vr16
Text Domain: gatewing-vr16
*/

body {
    padding: 0;
    margin: 0;
    font-family: "CezanneBokutohPro-M", serif;
}
h1, h2, h3, h4, h5 {
  font-family: "IwaOMinPro-Hv", serif;
  
}
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
.tategaki_outer {
  color: var(--e-global-color-text);
}
.midashi {
  mix-blend-mode: difference;
}
.easing {
  transition: all .3s;
}
.tategaki.concept h1 {
  margin: 10px 0 0 0;
  font-size: 1.3em;
}

.tategaki.concept p {
 margin: 0px;
 font-size:15px;
 line-height: 2;
}
.tategaki h1 {
  margin-bottom: 40px;
  line-height: 1.6;

}
.tategaki.concept h2 {
  font-size:19px;
}
/* ボタン */
a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #000;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #eb6877;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}


/* トップページ・こだわりページ PC時 縦書きにする */
@media screen and (min-width: 768px) {
  .tategaki_outer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tategaki {
    /* background-color: #ffffff85; */
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 30px 30px 30px 50px;
    display: inline-block;
    /* backdrop-filter: blur(5px); */
    /* border:solid #fff 1px; */
  }
  .tategaki.concept {
    padding: 30px 30px 30px 50px;
  }
  .tategaki span.text-combine {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
  }
  .tategaki a {
    text-decoration: none;
    border-right: 1px dashed;
    padding-right: 0px;
  }
  .tategaki h1 {
    margin-left: 40px;
  }
    .tategaki.concept h2 {
  font-size:22px;
}
  .tategaki.concept h1 {
    margin: 0 30px 0 10px;
        font-size: 27px;
  }
  .tategaki.concept p {
    line-height: 1.7;
    font-size:16px;
    margin-left: 20px;
  }
  .tategaki.concept p {
    line-height: 1.7;
    margin: 0px;
  }
}


/* 下層ページタイトル 縦書き */
.tategaki_outer_sub {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tategaki_sub {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 30px;
  display: inline-block;
}

/*　見出し　フレーム*/
.wa-frame-long-lines {
  position: relative;
  padding:10px;
  --line-color: #D64123;
  --line-width: 2px;
  --line-length: 80px; 
  --line-gap: 6px;
  --corner-offset: 0px;
}

.wa-frame-long-lines::before,
.wa-frame-long-lines::after {
  content: '';
  position: absolute;
  width: var(--line-length);
  height: var(--line-length);
  pointer-events: none;
  /* グラデーションで線を描く */
  background-image:
    linear-gradient(var(--line-color), var(--line-color)), /* 横線1 */
    linear-gradient(var(--line-color), var(--line-color)), /* 横線2 */
    linear-gradient(var(--line-color), var(--line-color)), /* 縦線1 */
    linear-gradient(var(--line-color), var(--line-color)); /* 縦線2 */
  background-repeat: no-repeat;
}
/* --- 左上の飾り --- */
.wa-frame-long-lines::before {
  top: var(--corner-offset);
  left: var(--corner-offset);
 
  /* 線のサイズ (幅 高さ) */
  background-size:
    50% var(--line-width), /* 横線は幅いっぱい */
    100% var(--line-width),
    var(--line-width) 100%, /* 縦線は高さいっぱい */
    var(--line-width) 100%;

  /* 線の配置位置 (固定値で指定することで間隔を固定) */
  background-position:
    0 calc(var(--line-length) / 3),           /* 横線1の位置 */
    0 calc(var(--line-length) / 3 + var(--line-gap)), /* 横線2の位置 (線1 + 間隔) */
    calc(var(--line-length) / 3) 0,           /* 縦線1の位置 */
    calc(var(--line-length) / 3 + var(--line-gap)) 0; /* 縦線2の位置 (線1 + 間隔) */
}

/* --- 右下の飾り --- */
.wa-frame-long-lines::after {
  bottom: var(--corner-offset);
  right: var(--corner-offset);

  background-size:
    100% var(--line-width),
    50% var(--line-width),
    var(--line-width) 100%,
    var(--line-width) 100%;

  background-position:
    0 calc(var(--line-length) / 3),
    0 calc(var(--line-length) / 3 + var(--line-gap)),
    calc(var(--line-length) / 3) 0,
    calc(var(--line-length) / 3 + var(--line-gap)) 0;
  /* 右下用に反転させる */
  transform: rotate(180deg);
}

/*見出し　フレーム　終了*/

/* メニュー */

.price {
  margin-bottom: 1em;
  margin-top: -10px;
  display: flex;
  align-items: center;
}
.price::before {
  border-top: 1px solid #f5e1b0;
  content: "";
  flex-grow: 1;
  margin-right: 1em;
}
.desc {
  font-size: 85%;
  line-height: 1.5em;
  margin: 0 0 10px;
  color: var(--e-global-color-accent);
  clear: both;
}

@media screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}


@keyframes fall {
    /* 画面外の上から */
    0% {
        transform: translateY(-100vh);
    }
    /* 画面外の下へ */
    100% {
        transform: translateY(100vh);
    }
}

/* ----------------------------------- */
/* 1. アニメーションの定義 (木の葉の落下) */
/* ----------------------------------- */
@keyframes leaf-fall {
    /* 0% (開始時): 画面外の上、少し左に配置。少し回転させる */
    0% {
        transform: translateY(-100vh) translateX(-10vw) rotate(0deg);
        opacity: 0.8; /* 最初は少し透明度を高く */
    }
    /* 25%: 少し右に寄りながら落下、回転も変化 */
    25% {
        transform: translateY(0vh) translateX(10vw) rotate(45deg);
        opacity: 1; /* 徐々に不透明に */
    }
    /* 50%: また左に寄りながら落下、回転も変化 */
    50% {
        transform: translateY(50vh) translateX(-5vw) rotate(90deg);
    }
    /* 75%: さらに右に寄りながら落下、回転も変化 */
    75% {
        transform: translateY(100vh) translateX(15vw) rotate(135deg);
        opacity: 0.8; /* 徐々に透明に */
    }
    /* 100% (終了時): 画面外の下、さらに右に配置。最後の回転 */
    100% {
        transform: translateY(200vh) translateX(20vw) rotate(180deg);
        opacity: 0; /* 画面外で完全に透明にする */
    }
}