@charset "utf-8";

/* --------------------------------------
   アニメーション CSS
-------------------------------------- */

/* =========================================
   Vars（まとめて管理）
========================================= */
:root{
  /* Loader */
  --box-size: 80px;
  --edge-thick: 0.7px;
  --loader-fg: #DDD6D0; /* ローダーの線＆文字の色 */

  /* Scroll Blinds（分割写真：薄め） */
  --sb-slices: 7;              /* JSが読む */
  --sb-gap: 1px;

  /* 写真の薄さ（数値小さいほど薄い） */
  --sb-photo-opacity: 0.30;    /* 0.18〜0.45で調整 */

  /* ベージュ膜 */
  --sb-film-alpha: 0.16;       /* 0.10〜0.22 */
  --sb-overlay-darkness: 0.35;
}


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

@media (max-width: 768px){
  :root{
  --edge-thick: 1px;
    --sb-slices: 4;
    --sb-gap: 0px;
  }
}

/* --------------------------------------
   h2アニメーション
-------------------------------------- */

/* h2アニメーション（GSAPで再生） */
.fx-h2{
  display: block;
  text-align: center;
  line-height: 1.2;
}

.fx-h2 .char{
  display:inline-block;
  opacity:0;
  filter: blur(6px);
  transform: translateY(14px);
  will-change: transform, opacity, filter;
}

/* --------------------------------------
   h3アニメーション
-------------------------------------- */

/* 見出しのベース */
.information_box_inner h3{
  position: relative;
  display: inline-block;
  margin: 0 0 60px;
}

/* 下線（初期は短い） */
.information_box_inner h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:1px;
  width:0%;
  background: currentColor;
  opacity:.9;
}

/* アクティブパネルになった瞬間にアニメ */
.information_box_item.active .information_box_inner h3{
  animation: h3In .45s ease both;
}
.information_box_item.active .information_box_inner h3::after{
  animation: h3Line .45s ease .05s both;
}

@keyframes h3In{
  from{ opacity:0; transform: translateY(10px); filter: blur(6px); }
  to  { opacity:1; transform: translateY(0);  filter: blur(0); }
}
@keyframes h3Line{
  from{ width:0%; }
  to  { width:100%; }
}

/* =========================================
   Loader（黒背景 + 四角ライン）
========================================= */
#loader{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2147483647;
  opacity: 1;
  visibility: visible;
  display: block;
  pointer-events: none;
}

.loader__box{
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--box-size);
  height: var(--box-size);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: var(--loader-fg); /* 文字色を薄く */
}

.edge{
  position: absolute;
  background: var(--loader-fg); /* 線色を薄く */
  display:block;
}

.edge--top,
.edge--bottom{
  left: 0;
  width: 0;                    /* GSAPで伸ばす */
  height: var(--edge-thick);
}
.edge--top{ top: 0; }
.edge--bottom{ bottom: 0; }

.edge--left,
.edge--right{
  top: 0;
  height: 0;                   /* GSAPで伸ばす */
  width: var(--edge-thick);
}
.edge--left{ left: 0; }
.edge--right{ right: 0; }

.loader__text{
  font-family: sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  user-select: none;
}

/* =========================================
   Scroll Blinds（分割写真：薄め）
========================================= */
#scrollBlinds{
  position: fixed;
  inset: 0;
  z-index: 0;      /* 背景レイヤーへ */
  pointer-events: none;
  isolation: isolate;
}

#sbBlinds{
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--sb-gap);
}

.sb__blind{
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: scaleY(0);
  will-change: transform, opacity;
  opacity: var(--sb-photo-opacity);
}

/* 分割写真 */
.sb__blind::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("../img/main_visual.jpg"); /* ←写真パス */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: calc((var(--i) / (var(--sb-slices) - 1)) * 100%) center;
  opacity: var(--sb-photo-opacity);
}

/* ベージュマスク */
.sb__blind::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(232,224,214,var(--sb-film-alpha));
  mix-blend-mode: multiply;
}

/* 周辺減光 */
#scrollBlinds .sb__vignette{
  position: absolute;
  inset: -10%;
  opacity: 0; /* JSが0にしてるので合わせる */
  background: radial-gradient(
    60% 60% at 50% 45%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,var(--sb-overlay-darkness)) 100%
  );
  mix-blend-mode: multiply;
}

/* コンテンツはブラインドより上へ */
.header,
.menu-bar,
.main,
.main_section,
.footer,
#toTop,
#footer{
  position: relative;
  z-index: 20;
}

/* =========================================
   Aboutの左に線を引く
========================================= */
.about-services{
  position:relative;
  padding-left:70px;
}

/* 幹：親の高さに追従して伸びる */
.about-tree-trunk{
  position:absolute;
  left:28px;
  top:-70px;
  bottom:-150px;  /* オーダーガイドまで届く分だけ調整（大規模改修時は整理が必要） */
  width:1px;
  background:#111;

  transform-origin:top;
  transform:scaleY(0);
}

.service-box{
  position:relative;
}

/* 枝：横線 */
.about-tree-branch{
  position:absolute;
  left:-42px;
  top:32px;
  width:42px;
  height:1px;
  background:#111;

  transform-origin:left;
  transform:scaleX(0);
}

/* 発火（到達したら） */
.about-services.is-show .about-tree-trunk{
  animation: about-draw-v 1.7s ease-out forwards;
}
.about-services.is-show .service-box:nth-of-type(1) .about-tree-branch{
  animation: about-draw-h 0.8s ease-out forwards;
  animation-delay: 0.5s;
}
.about-services.is-show .service-box:nth-of-type(2) .about-tree-branch{
  animation: about-draw-h 0.6s ease-out forwards;
  animation-delay: 1s;
}

/* Keyframes */
@keyframes about-draw-v{
  to{ transform: scaleY(1); }
}
@keyframes about-draw-h{
  to{ transform: scaleX(1); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .about-tree-trunk,
  .about-tree-branch{
    animation: none !important;
    transform: none !important;
  }
}



/* =========================================
   オーダーガイドの３ステップアニメーション
========================================= */
/* ３ステップのカレントを目立たす動き */

/* ふわっと */
.guide_step.is-current{
  transform: translateY(-3px); 
  background: rgba(255,255,255,.82);
}
/* 非current：控えめ＋“幅ちょい狭め”は維持（自然） */
.guide_step.is-dim{
  transform: translateY(0) scaleX(0.97);
  opacity: .94;
  background: rgba(255,255,255,.6);
}
/* 見出し周りも少し締める */
.guide_step_head{
  margin-bottom: 12px;
}
.guide_step_num{
  opacity: .65;
  letter-spacing: .10em;
}
.guide_step{ box-shadow: none; }
.guide_step:hover,
.guide_step.is-current{ box-shadow: 0 10px 18px rgba(0,0,0,.05); }
.guide_details_panel{
  overflow: hidden; /* 高さアニメで中身がはみ出ない */
}


/* ==========================================================================
   保険　HEROキャッチの鏡文字がアニメーションででるように
   ========================================================================== */
@media (min-width: 701px){

  .hero-sub-inner{
    position: relative;
    overflow: visible;
  }

  .hero-catch-out-left,
  .hero-catch-out-right{
    display: inline-block ;
    visibility: visible ;
    opacity: 0.5 ; 
    z-index: 10 ;
    pointer-events: none;
  }
}