/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 23 2026 | 08:22:23 */
/* 共通の見出しコンポーネント */
/* Positioning, Box Model, Typography, Visual, Misc の順で記述しています */

.p-vertical-heading {
  position: relative;
  display: inline-flex;
  padding-top: clamp(70px, 8vw, 100px);
  color: #000000;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0.15em;
  /* 縦書きの指定 */
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.p-vertical-heading::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(60px, 7vw, 85px);
  /* 黒と青（シアン）を割合で区切って1本の線にする */
  background: linear-gradient(to bottom, #000000 0%, #000000 65%, #00a0e9 65%, #00a0e9 100%);
  content: "";
}

/* スマホ表示時の上書き設定 (767px以下) */
@media (max-width: 767px) {
  .p-vertical-heading {
    display: inline-block;
    /* 上から伸びる線の長さを確保 */
    padding-top: clamp(50px, 12vw, 70px);
    /* 線と文字の隙間を確保 */
    padding-left: clamp(15px, 4vw, 24px);
    font-size: clamp(20px, 5vw, 24px);
    letter-spacing: 0.1em;
    /* 横書きにリセット */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  
  .p-vertical-heading::before {
    /* 線を左端に配置し、要素の高さ分まで伸ばす */
    left: 0;
    transform: none;
    height: 100%;
  }
}