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

body {
    padding: 0;
    margin: 0;
    font-family: "FP-ヒラギノ角ゴ","砧明朝体 StdN R", "CezanneBokutohPro-M", serif;
}
h1, h2, h3, h4, h5 {
  font-family:"MR楷書体マール", "FOT-グレコ Std B", "SMotoyaSeikaiStd-W5", "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;
}
/* ボタン */
.btn-flat a.elementor-button{
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 0;
  background: #000;
}

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

.btn-flat a.elementor-button: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: #B9001F;
}

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



/*　見出し　フレーム*/
.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: #D9BD75;
  /* 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; /* 画面外で完全に透明にする */
    }
}

.menu-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em;
}