@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* メインビジュアルを基準に */
.p-mainVisual {
  position: relative;
  z-index: 0; /* 背景として最背面 */
}

/* ===== MV Scroll Hint ===== */
.p-mainVisual { 
  position: relative; 
  z-index: 0;
  --line-h: 60px;          /* PCの線の長さ */
  --line-color: #f8f8f8;   /* ご指定色 */
}

/* テキスト "SCROLL" */
.p-mainVisual::before {
  content: "SCROLL";
  position: absolute;
  left: 50%;
  bottom: 10px; 
  transform: translateX(-50%);
  padding-bottom: calc(var(--line-h) + 10px);
  text-align: center;
  font-family: serif;
  color: var(--line-color);  /* ← f8f8f8 */
  font-size: 12px;          /* PC時 */
  line-height: 1;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  pointer-events: none;
  z-index: 10;              /* MV画像より前、ヘッダーより下 */
}

/* 縦のグラデーションライン */
.p-mainVisual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* アニメーションで伸ばす */
  background: linear-gradient(to bottom, transparent, var(--line-color));
  animation: mv-extend 2s infinite;
  z-index: 10;
}

@keyframes mv-extend {
  0%, 100% { height: 0; }
  50%      { height: var(--line-h); }
}

/* SP調整 */
@media (max-width: 767px) {
  .p-mainVisual { --line-h: 40px; }   /* SP時の線を短く */
  .p-mainVisual::before { font-size: 8px; } /* SPでは8px */
}