@charset "utf-8";

/* ========================================================
   1. Variables (CSS変数定義)
   サイト全体の共通設定です。ここを変更すれば全体に反映されます。
   ======================================================== */
:root {
  /* --- Typography: Font Family (ft_) --- */
  --ft_base: "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* --- Colors (cl_) --- */
  --cl_text:   #333333;       /* 基本文字色 */
  --cl_link:   #000000;       /* リンク色 */
  --cl_main:   #003762;       /* メインカラー */
  --cl_accent: #C00000;       /* アクセントカラー */
  --cl_bg:     #ffffff;       /* 背景色 */

  /* --- Layout: Sizes (wd_) --- */
  --wd_pc: 1200px;
  --wd_sp: 37.5rem;
}

/* ========================================================
   2. Base Style (基本設定)
   ======================================================== */
html {
  font-size: 62.5%; /* 1rem = 10px */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--ft_base);
  font-size: 1.6rem; /* 16px */
  line-height: 1.8;
  color: var(--cl_text);
  background-color: var(--cl_bg);
  text-align: justify;
  
  /* 文字詰め・レンダリング最適化 */
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* リンク設定 */
a {
  color: var(--cl_main);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a {transition: 0.3s transform}
a:hover {transform: scale(1.03);}

/* 画像のレスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================================
   3. Layout (レイアウト共通)
   ======================================================== */

/* コンテンツ幅制限用ラッパー */
main, .p-fv .l-inner,footer {
  width: 100%;
  max-width: calc(var(--wd_sp) + 2px);
  margin: 0 auto;
  border-right: 1px solid;
  border-left: 1px solid;
  box-sizing: content-box;
  position: relative;
}

/* ========================================================
   4. Utility (汎用クラス)
   ======================================================== */

   /* 監視対象の初期状態 */
.u-fade-in {
  opacity: 0;
  transform: translateY(5rem); /* 下から少し浮き上がらせる */
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform; /* 動作を滑らかにするおまじない */
}

/* 画面内に入った（クラスがついた）時の状態 */
.u-fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* --- Display Switching (PC/SP切り替え) --- */
@media screen and (min-width: 751px) {
	.u-pc-only { display: block; }
	.u-sp-only { display: none; }
}

/* --- Text Alignment --- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

/* --- Flex Helpers (横並び)  --- */
.u-flex { display: flex; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }

.u-satsuma {
  font-family: Kosugi, sans-serif !important;
}

/* ========================================================
   5. Component (コンポーネントの基底)
   ======================================================== */

/* ボタンのベーススタイル */
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ========================================================
   6. Media Queries (SP対応)
   max-width: 750px
   ======================================================== */
@media screen and (max-width: 750px) {
  html {
	font-size: calc(1.333vw*2); 
  }
  body {
	font-size: 1.6rem;
    line-height: 1.6;
  }
  /* 表示切り替え */
  .u-pc-only { display: none; }
  .u-sp-only { display: block }

  /* FlexカラムをSPで1列に戻す（リセット） */
  .u-flex_col2,
  .u-flex_col3,
  .u-flex_col4 {
    width: calc(100%/1);
  }
  
}



/* body {
    background: url(../img/body_bg.webp) repeat center top/contain;
} */
.l-header {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    /* max-width: calc(var(--wd_sp) + 2px); */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.l-header .l-header__logo {
    width: 20rem;
    max-width: 20%;
    padding: 1.6rem 1.4rem;
    box-sizing: content-box;
}
.l-header.is-menu-open {
  mix-blend-mode: normal !important;
}

.l-header.is-menu-open .l-header__logo {
  color: #fff;
  filter: brightness(0) invert(1);
}

.l-header.is-menu-open .c-hamburger span {
  background-color: #fff !important;
}

.p-nav-list {
  display: flex;
  gap: 2rem;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.p-nav-list li a {
  writing-mode: vertical-rl;
  width: 3.8rem;
  max-height: 29.2rem;
  display: block;
}
.p-nav-list li a img {
    width: auto;
    height: 100%;
    display: block;
}

/* --- PC版：900px以上 --- */
@media (min-width: 901px) {
  .c-hamburger {
    display: none; /* ボタンを隠す */
  }
  .p-nav-overlay {
    position: fixed;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99;
    width: calc(50% - 18.75rem);
    height: 55.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
  }
}

/* --- SP版：900px以下 --- */
@media (max-width: 900px) {
.c-hamburger {
  display: block;
  position: relative;
  width: 2.2rem;
  height: 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  margin: 0 2rem;
}
.c-hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff; /* 藍色にするならここを調整 */
  transition: all 0.4s;
  left: 0;
  border-radius: 0.5rem;
}
.c-hamburger span:nth-child(1) { top: 0; }
.c-hamburger span:nth-child(2) { top: 0.8rem; }
.c-hamburger span:nth-child(3) { top: 1.6rem; }

.c-hamburger.is-active span:nth-child(1) {
  transform: translateY(0.8rem) rotate(45deg);
}
.c-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.c-hamburger.is-active span:nth-child(3) {
  transform: translateY(-0.8rem) rotate(-45deg);
}
  .p-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/mv_bg-sp.webp) repeat left top / 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 90;
    flex-wrap: wrap;
  }
  .p-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
.p-nav-overlay .u-sp-only {
    width: 25rem;
    margin-top: auto;
    margin-bottom: 2rem;
    display: block;
}
  .p-nav-overlay .p-nav-list {
    margin-bottom: auto;
    width: 100%;
    justify-content: center;
  }
}



.p-fv {
    position: relative;
    z-index: 1;
}
.p-content-bg{
  position: fixed;
  width: 100%;
  pointer-events: none;
  background: url(../img/body_bg.webp) repeat top left / 75rem;
  height: 100%;
}
.p-content-bg .p-fv {
    width: 100%;
}
.p-content-bg__fukikinzan {
    width: calc(50% - (37.5rem/2));
    position: absolute;
    z-index: 1;
    top: 21rem;
    left: 0;
}
.p-content-bg__fukikinzan img {
    width: 31rem;
    margin: 0 7rem 0 auto;
    display: block;
}
.p-content-bg .p-fv,.p-fv .l-inner {
    height: 55.6rem;
    padding-bottom: 14rem;
    box-sizing: content-box;
}
.p-content-bg .p-fv:after {
    content: '';
    display: block;
    width: 50%;
    height: 95%;
    position: absolute;
    left: 0;
    bottom: -1rem;
    background: url(../img/mv_bg02-pc.webp) no-repeat center top/cover;
    z-index: -1;
    mix-blend-mode: screen;
}
.p-content-bg .p-fv:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(55.6rem + 17.5rem);
    background: url(../img/mv_bg-pc.webp) center top / 120rem;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}

.u-kinpun {
  position: absolute;
  width: 100%;
  height: 80%; /* 下半分 */
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.p-product_mv .u-kinpun {
  height: 100%;
  z-index: -1;
  overflow: visible;
}
.u-kinpun.right {
  width: 50%;
  right: 0;
  left: auto;
}
.u-kinpun.left {
  width: 50%;
}
/* --- 金粉の共通設定 --- */
.u-kinpun [class^="kinpun"] {
  position: absolute;
  display: block;
  opacity: 1;
}
.u-kinpun .kinpun01 {
  width: 54.6rem;
  height: 36rem;
  background: url(../img/kinpun01.webp) no-repeat center/contain;
  top: 17%;
  left: 18%;
  animation: drifting 4s ease-in-out infinite alternate;
}
.u-kinpun .kinpun03 {
  width: 48rem;
  height: 36rem;
  background: url(../img/kinpun02.webp) no-repeat center/contain;
  top: 40%;
  left: 0%;
  animation: drifting 5.2s ease-in-out infinite alternate-reverse;
  animation-delay: -1s;
}
.u-kinpun .kinpun02 {
  width: 40rem;
  height: 40rem;
  background: url(../img/kinpun03.webp) no-repeat center/contain;
  top: 45%;
  left: 50%;
  animation: drifting 4s ease-in-out infinite alternate;
  animation-delay: -2s;
}
.p-product_mv .u-kinpun .kinpun01 {
  width: 61rem;
  height: 50rem;
  background: url(../img/kinpun04.webp) no-repeat center/contain;
  top: -12%;
  left: -41%;
  animation: drifting 4s ease-in-out infinite alternate;
}
.p-product_mv .u-kinpun .kinpun02 {
  width: 55.5rem;
  height: 60rem;
  background: url(../img/kinpun05.webp) no-repeat center/contain;
  top: -33%;
  left: -37%;
  animation: drifting 5.2s ease-in-out infinite alternate-reverse;
  animation-delay: -1s;
}

/* --- アニメーション：上下左右に漂うだけ --- */
@keyframes drifting {
  0% {
    /* 初期位置 */
    transform: translate(0, 0);
  }
  100% {
    /* 右に3rem、下に2remほど移動した地点へ */
    transform: translate(3rem, 2rem);
  }
}



.p-fv .l-inner {
    background: url(../img/mv_bg.webp) no-repeat center top/contain,url(../img/mv_bg-bottom.webp) repeat-y center top/contain;
}

.p-fv h1 {
    width: 30rem;
    margin: 0 auto;
    padding: 6.7rem 0;
}

.u-wave {
  position: absolute;
  width: 100%;
  bottom: -62rem;
  left: 0;
  padding-top: 7em;
  overflow: hidden;
}
.u-wave span {
  display: block;
  width: 100%;
}
.p-fv .l-inner {
  position: relative;
  z-index: 1;
}
/* 波全体のコンテナ */
.u-wave .wave-wrapper {
  animation: moveHorizontal-Vertical 2.5s ease-in-out infinite alternate;
}
.u-wave .wave-wrapper:nth-child(2) {
  z-index: 2 !important;
  position: relative;
  animation: moveHorizontal-Vertical02 2s ease-in-out infinite alternate-reverse;
  animation-duration: 3s;
}
.u-wave .wave01 {
  width: calc(100% + 60rem);
  margin: 0 -30rem 48rem;
  height: 40rem;
  background: url(../img/fv_wave01.webp?set2) repeat-x calc(50% + 41rem) top / 163rem;
  position: relative;
  left: -5rem;
  animation: moveHorizontalIntense 1.3s ease-in-out infinite alternate,
  waveSwell 4.7s ease-in-out infinite alternate;
  transform-origin: center -200px;
}
.u-wave .wave02 {
  width: 260vw;
  margin: 0 calc(50% - 130vw);
  height: 80rem;
  background: url(../img/fv_wave02.webp?set2) repeat-x calc(50% + 50rem) top / 219.2rem;
  position: absolute;
  bottom: 0;
  z-index: 2;
  animation: 
  swingPendulum 1.3s ease-in-out infinite alternate;
  transform-origin: center bottom;
}


@keyframes bgLoopRight01 {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 163rem center;
  }
}
@keyframes bgLoopLeft02 {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -219.2rem center;
  }
}

@keyframes Bobbing {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1.5rem);
  }
}
/* 横揺れ（右に2rem、左に2rem。数値がそのまま動きになる！） */
@keyframes moveHorizontal {
  from { transform: translateX(-2rem); }
  to { transform: translateX(2rem); }
}

/* 縦揺れ */
@keyframes moveVertical {
  from { transform: translateY(-2rem); }
  to { transform: translateY(3rem); }
}
@keyframes moveVertical02 {
  from { transform: translateY(-1rem); }
  to { transform: translateY(1.5rem); }
}

@keyframes moveHorizontal-Vertical {
  from { transform: translate(-12rem,-2rem); }
  to { transform: translate(12rem,2rem); }
}
@keyframes moveHorizontal-Vertical02 {
  from { transform: translate(-25rem,-3rem); }
  to { transform: translate(25rem,3rem); }
}

/* 2. 激しい横揺れ ＋ 振り子（波01用） */
@keyframes moveHorizontalIntense {
  from { 
      transform: translateX(-5rem) rotate(-3deg); 
  }
  to {
      transform: translateX(5rem) rotate(3deg);
  }
}

/* 3. 振り子のみ（波02用：角度を少し変える） */
@keyframes swingPendulum {
  from { transform: rotate(-4deg); }
  to { transform: rotate(2deg); }
}
@keyframes waveSwell {
  0% { transform: scale(0.95, 0.9); } /* 少し縮む */
  50% { transform: scale(1.05, 1.15); } /* 縦にぐわっと伸びる */
  100% { transform: scale(1.02, 0.95); } /* 横に少し広がる */
}

section.p-inheritance {
    position: relative;
}
section.p-inheritance:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../img/body_bg.webp) repeat top left / 75rem;
    z-index: 0;
}
section.p-inheritance .l-inner {
    position: relative;
    z-index: 2;
}

.p-inheritance__collabo {
  padding: 2rem 0 12rem;
  text-align: center;
  font-weight: 700;
  background: url(../img/inheritance_collabo-bg.webp) no-repeat center 6%/contain;
  margin: 1rem auto 0;
}
.p-inheritance__collabo h3 {
  font-size: 2.8rem;
  line-height: 1.4;
  color: var(--cl_main);
  margin-bottom: 2rem;
}
.p-inheritance__collabo > p {
    font-size: 1.5rem;
    width: 74%;
    margin: 0 1rem;
    line-height: 2.4;
}
.p-inheritance__collabo > p span {
    display: block;
    width: fit-content;
    margin: 0 auto;
    border-bottom: 2px solid;
}

.supervised {
    font-size: 1.4rem;
    text-align: justify;
    margin: 7rem auto;
    position: relative;
}
.supervised:before,.supervised:after {
    content: '';
    display: block;
    width: 100%;
    height: 3rem;
    position: absolute;
    left: 0;
    background: url(../img/inheritance_supervised-top.webp) no-repeat center/contain;
}
.supervised:before {
    top: -3rem;
}
.supervised:after {
    bottom: -3rem;
    background-image: url(../img/inheritance_supervised-bottom.webp) ;
}


.supervised p {
    padding: 2rem 3rem;
    z-index: 1;
    position: relative;
    background: url(../img/body_bg.webp) repeat top left / 75rem;
    color: var(--cl_main);
    font-weight: 500;
}
.supervised p:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #e6dfc0;
    mix-blend-mode: multiply;
    z-index: -1;
}

section.p-method {
  position: relative;
  margin-top: -7rem;
}
section.p-method::before {
  content: '';
  display: block;
  width: 100%;
  height: 7rem;
  margin-bottom: -2px;
  background: url(../img/mv_bg-sp.webp) repeat left top / 100%;
  mask: url(../img/mv_bg_wave.webp) repeat center top / 100%;
}
section.p-method .l-inner, section.p-product .l-inner, section.p-hokusai .l-inner {
  position: relative;
  z-index: 1;
  padding-bottom: 5rem;
}
section.p-method .l-inner:before,section.p-product .l-inner:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/mv_bg-sp.webp) repeat left top / 100%;
    z-index: -1;
}
.p-method__mv {
    transform: translateY(-12rem);
    margin-bottom: -10rem;
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 0;
}
.p-method__mv:before {
    content: '';
    display: block;
    width: 40rem;
    height: 40rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/method_mv-bg.webp) no-repeat center/contain;
    z-index: -1;
    animation: rotationLoop 60s linear infinite;
    will-change: transform;
}
@keyframes rotationLoop {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}

.u-card-wrap {margin: 1rem auto;padding: 0 2.4rem;}
.u-card-item {
    background-color: #f6f5ee!important;
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 3rem;
    font-weight: 500;
    position: relative;
}
.p-method .u-card-item.method_item {
    background: url(../img/method_dec01.webp) no-repeat 0.3rem 0.3rem/2.2rem,url(../img/method_dec02.webp) no-repeat calc(100% - 0.3rem) calc(100% - 0.3rem)/2.2rem;
}
.u-card-item:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: -1;
}
.u-card-item + .u-card-item {
    margin-top: 2rem;
}
.u-card-item dt {width: calc(100% + (4.8rem + 6rem));margin: -3rem -5.4rem 2.5rem;}



section.p-product .l-inner {
    padding: 5rem 0 21.5rem;
    color: #fff;
    overflow: hidden;
}
section.p-product h2 {
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5rem;
    margin: 0 0 3rem;
    background: url(../img/product_title-bg.webp) no-repeat center /contain;
    padding: 0.3rem 0;
}
.p-product_mv {
  position: relative;
}
section.p-product table {
    width: 85%;
    margin: 4rem auto;
    font-size: 1.4rem;
    line-height: 1.5;
}
section.p-product table tbody th {
    width: 36%;
    background: #4c7391;
    text-align: justify;
    border-color: #83b2d1!important;
}
section.p-product table tbody th,section.p-product table tbody td {
    padding: 1.5rem;
    font-weight: 500;
    border-bottom: 1px solid #4c7391;
}
section.p-product table tbody tr:first-child th,section.p-product table tbody tr:first-child td {
    border-top: 1px solid #4c7391;
}
section.p-product table tbody td .type {
    color: #d4b987;
}


section.p-hokusai {
    position: relative;
    margin-top: -21.5rem;
    overflow: hidden;
}


.p-hokusai .u-wave {
  bottom: auto;
  position: relative;
  padding-top: 4em;
}
.p-hokusai .u-wave .wave01 {
  width: calc(100% + 10rem);
  height: 28.4rem;
  margin: 0 auto;
  background: url(../img/hokusai_wave01.webp) repeat-x calc(50% + 21rem) top /149.4rem;
  /* animation: bgLoopLeft03 15s linear infinite,Bobbing 5s ease-in-out infinite alternate; */
  animation: moveHorizontal 2s ease-in-out infinite alternate;
  margin-bottom: 0;
}
.p-hokusai .u-wave .wave02 {
  height: 33rem;
  background: url(../img/hokusai_wave02.webp) repeat-x calc(50% + 50rem)  top /150rem;
  animation: bgLoopLeft04 15s linear infinite,Bobbing 3s ease-in-out infinite alternate;
}
@keyframes bgLoopLeft03 {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -149.4rem center;
  }
}
@keyframes bgLoopLeft04 {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -150rem center;
  }
}

.p-hokusai .u-wave .wave-wrapper {
    z-index: 1;
    position: relative;
    animation: moveVertical02 1s ease-in-out infinite alternate;
}

section.p-hokusai:before {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 23.5rem);
    position: absolute;
    top: 23.5rem;
    left: 0;
    background: url(../img/hokusai_bg.webp) repeat left top / 100%;
    z-index: 2;
}



section.p-hokusai .l-inner {
    padding-top: 0;
    margin-top: -11.1rem;
    z-index: 2;
}
section.p-hokusai h2 {
    position: relative;
    opacity: 0.4;
    margin-bottom: 1.6em;
}
section.p-hokusai h2:before {
    content: '';
    display: block;
    width: 110%;
    height: 110%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: url(
    ../img/hokusai_bg.webp) repeat left top / 100%;
    z-index: -1;
    filter: blur(2px);
}
section.p-hokusai h2 img {mix-blend-mode: color-burn;}
section.p-hokusai .u-card-item:before {
    background: #c17400;
}

footer {
  background-color: #fff;
  text-align: center;
}
.p-banner {
    background: url(../img/mv_bg-sp.webp) repeat left top / 100%;
    padding: 2rem 0 0;
}
ul.p-banner_wrap {
    width: 88%;
    margin: 1rem auto;
}

ul.p-banner_wrap li a {
    margin: 2.6rem auto;
    display: block;
    filter: drop-shadow(0.2rem 0.2rem 0.2rem rgba(0,0,0,0.4));
}
a.contact-btn {
    width: 20.4rem;
    display: block;
    margin: 5rem auto 0;
}
a.privacy-btn {
    display: block;
    border-top: 2px solid #dbbe83;
    padding: 2rem 0;
    color: #fff;
}
.p-other {
    padding: 1rem 0;
    font-size: 1.3rem;
    font-weight: 600;
}
.p-other .copy {
    font-size: 1rem;
    margin: 1rem auto 0;
}





.loading-content {
  background: #016D9D;
  background: linear-gradient(0deg,rgba(1, 109, 157, 1) 50%, rgba(0, 58, 105, 1) 100%);
  height: 100dvh;
  position: fixed;
  left: 50%;
  z-index: 9999;
  width: 100%;
  transition: 3s 1.5s,1.5s 4.5s opacity,0s height;
  pointer-events: none;
  transform: translateX(-50%);
  overflow: hidden;
  box-sizing: content-box;
}
.loading-content.is-active {
  opacity: 0;
  /* height: 55.9rem; */
  width: calc(var(--wd_sp) + 2px);
}
.loading-content .title {
  margin: 0 auto;
  text-align: center;
  width: 40rem;
  max-width: 80%;
  height: 100%;
  position: relative;
  opacity: 1;
  transition: 3s 1.5s;
  padding: 10% 0;
  box-sizing: border-box;
}
 body.is-active .loading-content .title {
  width: 30rem;
  padding: 6.7rem 0;
} 
.loading-content .title img {
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}
.loading-mv {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 1;
    filter: blur(10px);
    transform: scale(1.2);
    margin: 0 auto;
    opacity: 0;
    transition: 1.5s 1.5s,5s transform,4.5s height,2s filter,2.5s opacity;
}
body.is-active .loading-mv {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
    /* height: 55.9rem; */
}
.loading-mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
/* スクロールを禁止するクラス */
body.is-locked {
  overflow: hidden;
  height: 100%;
}

.p-inheritance .l-inner, section.p-fv .l-inner h1 {
    opacity: 0;
    transition: 1.5s 2.5s opacity;
}
main, section.p-fv .l-inner {
  border-color: transparent;
  transition: 1.5s 2.5s border-color;
}
body.is-active main,
body.is-active .p-inheritance .l-inner,
body.is-active section.p-fv .l-inner,
body.is-active section.p-fv .l-inner h1 {
    opacity: 1;
    border-color: #000;
}

@media screen and (max-width: 750px) {
main, .p-fv .l-inner, footer {border: 0;}
	.sp_wrap {
  overflow: hidden;
}
.l-header .l-header__logo {
    width: 12.5rem;
    padding: 1.6rem 1.4rem;
    max-width: max-content;
}

.l-header.is-blend {
  mix-blend-mode: difference;
}
body .loading-content .title {
    padding: 6.7rem 0 0;
}
body.is-active .loading-mv {
    height: 55.9rem;
}
.loading-content:after {content: '';display: block;width: 100%;height: calc(100% - 55.6rem);position: absolute;bottom: 0;left: 0;/* background: url(../img/mv_bg-bottom.webp) repeat center top/contain; */}
}




/* is-stoppedがついたら、その時点の場所でピタッと止める */
section.p-fv.is-stopped .u-wave .wave-wrapper,
section.p-fv.is-stopped .u-wave .wave01,
section.p-fv.is-stopped .u-wave .wave02 {
    animation: none !important;
}
section.p-fv.is-stopped .u-wave .wave01 {
    background-position: calc(50% + 46rem) top;
    top: 1.4rem;
}
section.p-fv.is-stopped .u-wave .wave02 {
    background-position: calc(50% + 44.5rem) top;
    bottom: -1rem;
}