body {
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    color: #888!important;
}

.fv-wrapper {
  width: 100%;
}

.pin-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;         /* 最初は透明 */
  visibility: hidden; /* クリック等もできない状態 */
  z-index: 5;         /* 必要に応じて調整 */
}

.pin-inner {
    height: 100%;
}

.pin-content {
    height: 100%;
    display: flex;
    width: 80%;
    max-width: 1280px;
    margin: 0 auto;
    align-items: center;
}

.pin-content .left {
    width: 50%;
    color: #888;
    line-height: 1.6;
}

.pin-content .right {
    width: 50%;
}

.right {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 行間 */
      font-size: 19px;
    letter-spacing: 0.2em;
}

/* 1行ごとの初期状態 */

.scroll-text {
    opacity: 0;
  /* 左下にずらしておく */
  transform: translateY(30px); 
  color: #fff; 
  will-change: transform, opacity, color;
}
/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root{
    --color1: #cebc72;
    --color2: #ddd2bf;
    --color3: #ddd2bf;
	/*--color4: #f5f2e9;*/
    --color6: #f7f3e3;
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
/*.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}*/
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/
.bg_color6, .hvr_bg_color6:hover{background-color: var(--color6);}

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .trans_logo {
        background-color: var(--color6);
    }
    
    .trans_logo a {
        display: inline-block;
        margin-top: 2%;
    }

    
    
    
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        
    .trans_logo a {
        display: inline-block;
        margin-top: 4%;
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.fv {
  position: relative;
    height: 48vw!important;
overflow: hidden;
}

/* 背景のアニメーション */
.ripple {
  --anim-time: 8s;
/*   --ripple-color: #cbcbcb; */
    --ripple-color: #ddd2bf;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #f4f5f9;
  background: #fff;
  overflow: hidden;
}

.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 5%;
  width: 200%;
  aspect-ratio: 1 /1;
  background: radial-gradient(
    circle,
    var(--ripple-color) 5%,
    transparent 10%,
    var(--ripple-color) 15%,
    transparent 20%,
    var(--ripple-color) 30%,
    transparent 40%,
    var(--ripple-color) 60%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: ripple-effect var(--anim-time) linear infinite;
}
.ripple::after {
  animation-delay: calc(var(--anim-time) / 2);
}
.ripple-text {
  position: relative;
  z-index: 1;
}
@keyframes ripple-effect {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}


/* テキストのアニメーション */

.fv-text {
    width: 28%;
    left: 9%;
    bottom: 10%;
}

.delay1 {
        width: 59%;
}

.delay2 {
    margin-top: 3%;
    width: 40%;
}

.delay3 {
    margin-top: 3%;
}

.fv-text .line img {
  display: block;

  /* 初期状態：沈んでいる */
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  filter: blur(3px);

  transition:
  opacity 1.4s ease,
  transform 2.2s cubic-bezier(.16,1,.3,1),
  filter 2.2s ease;
}

/* ロード後 */
.fv-text.is-loaded .line img {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* サブテキスト */
.fv-text .shop img {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(2px);

  transition:
    opacity 1.2s ease,
    transform 2s cubic-bezier(.16,1,.3,1),
    filter 2s ease;
}

.fv-text.is-loaded .shop img {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* 右側の画像 */
.fv_right_img {
    width: 66%;
/*     top: 0; */
    bottom: 0;
    right: 0;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #main_img {
        height: 100vh !important;
    }
    
    .fv_right_img {
        width: 100%;
        bottom: 9%;
    }
    
    .fv-text {
width: 58%;
        left: 9%;
        top: 13%;
        z-index: 2;
    }
    
    .shop_tb_txt {
        width: 52%;
        bottom: 5%;
        left: 10%;
    }
    
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img {
        height: 590px !important;
        }
    
    .fv-text {
        width: 68%;
        left: 9%;
        top: 20%;
        z-index: 2;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* TOP画像アニメション
 */

.wave-water a {
  display: block;
  overflow: hidden !important;
  background: transparent;
}

.wave-img {
  width: 100%;
  display: block;
  opacity: 0; /* 最初は透明 */
  transform: scale(1.15); /* 揺れ幅が大きいので、少し余裕を持って拡大しておく */
  will-change: transform, opacity;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
        .pin-content {
            display: block;
        padding-left: 10%;
        margin-top: 20vh;
    }
    
    .pin-content .left {
        width: 100%;
    }
    
    .pin-content .right {
        width: 100%;
            gap: 1.2em;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
        
    .pin-content .right {
        font-size: 16px;
        line-height: 1.6;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}