/*
Theme Name: Viralit
Theme URI: https://viralit.com
Author: Viralit
Author URI: https://viralit.com
Description: Horizontal scrolling website for Viralit - Design / WEB Marketing Agency
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viralit
*/

/* 仮フォント（cap-logo SVG化完了時にこの1行と .cap-logo--* 群を削除） */
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Nosifer&family=Pirata+One&family=UnifrakturMaguntia&family=Eater&family=Butcherman&display=swap');

/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #F5F2EC;
  color: #111;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

/* Horizontal scroll wrapper */
.horizontal-scroll-wrapper {
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Section base styles */
.section {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  vertical-align: top;
  white-space: normal;
  position: relative;
  overflow: hidden;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  padding: 8vh 10vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Section headers */
.section-header {
  margin-bottom: 8vh;
}

.section-label {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: 8vh;
  color: #111;
  opacity: 0.5;
}

.section-number {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.2em;
  margin-bottom: 1.5vh;
  color: #111;
  opacity: 0.4;
}

.section-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4rem, 10vw, 12rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: #111;
  text-transform: uppercase;
}

/* Hero Section */
.hero-section {
  background: #F5F2EC;
  position: relative;
}

#layer-2 {
  overflow: hidden;
}

/* Parallax Layers */
.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

.layer-1 {
  z-index: 10 !important;
}

.layer-2 {
  z-index: 20 !important;
}

.layer-3 {
  z-index: 30 !important;
}

.layer-4 {
  z-index: 40 !important;
}

#matrix-canvas
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15 !important;
  pointer-events: none;
}
#matrix-canvas-end {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 35 !important;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(17, 17, 17, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 5;
}

.hero-title-wrapper {
  position: relative;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(8rem, 20vw, 28rem);
  line-height: 0.85;
  letter-spacing: 0.05em;
  color: #111;
  margin: 0;
  font-weight: 400;
}

.accent-line {
  width: 40%;
  height: 12px;
  background: #C8FF00;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.hero-subtitle {
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: 0.1em;
  font-weight: 300;
  color: #111;
  opacity: 0.7;
}

.stripe {
  position: absolute;
  height: 2px;
  background: #C8FF00;
  right: 0;
}

.stripe-1 {
  top: 20%;
  width: 30%;
}

.stripe-2 {
  bottom: 25%;
  width: 20%;
}

/* About Section */
.about-section {
  background: #f6f6f6;
  backdrop-filter: blur(10px);
}

.about-section .section-label {
  color: #111;
  opacity: 0.5;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
}

.about-left {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}

.about-name {
  font-size: 2rem;
  font-weight: 400;
  color: #111;
  margin: 0;
}

.about-role {
  font-size: 0.95rem;
  color: #111;
  opacity: 0.6;
  margin: 0;
}

.about-description {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #111;
  opacity: 0.8;
  margin: 0;
  font-weight: 300;
}

.about-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2vh;
}

/* 第1層：圧縮 */
.about-right .info-group--facts {
  margin-bottom: 3.5vh;
}

.about-right .info-block--compact {
  padding: 0.7rem 0;
  border-bottom: none;
}

.about-right .info-block--compact .info-value {
  font-size: 0.85rem;
}

/* 共通 */
.info-block {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2vw;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.info-label {
  font-size: 0.85rem;
  color: #111;
  opacity: 0.5;
}

.info-value {
  font-size: 0.9rem;
  color: #111;
  font-weight: 400;
  line-height: 1.75;
}

.about-right .info-value--inline {
  letter-spacing: 0.03em;
}

/* 第3層：アクションバー */
.about-right .info-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 3.5vh;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(17, 17, 17, 0.28);
}

.about-right .info-action {
  position: relative;
  color: #111;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.about-right .info-action::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.35em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-right .info-action:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.about-right .info-actions .info-action .info-action-icon {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-right .info-action:hover .info-action-icon {
  transform: translateX(3px);
}

/* セクション共通：次のセクションへのコーナーナビ */
.section-next {
  position: absolute;
  right: 2.5rem;
  bottom: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  /* .layer-1〜4 が z-index 10/20/30/40 !important、Hero/About の
     .content-wrapper が z-index 10 のため、40超の値が必要（末尾コメント参照） */
  z-index: 50;
}

.section-next:hover { opacity: 1; }

.section-next-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-next:hover .section-next-icon {
  transform: translateX(3px);
}

/* Hero/End（暗背景・.hero-section共通クラス）: 既存の .end-copy 等と
   同じ off-white（#F5F2EC）に揃える */
.hero-section .section-next {
  color: #F5F2EC;
  opacity: 0.7;
}

.hero-section .section-next:hover {
  opacity: 1;
}

/* Replay: 進む方向のスライドではなく回転で「戻る」を表現する */
.section-next--replay:hover .section-next-icon {
  transform: rotate(-40deg) translateX(0);
}

@media (max-width: 768px) {
  .section-next {
    top: max(1.2rem, env(safe-area-inset-top));
    right: 1.2rem;
    bottom: auto;
    left: auto;
    font-size: 0.7rem;
  }
}

.vertical-lines {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}

.v-line {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(17, 17, 17, 0.1) 20%, rgba(17, 17, 17, 0.1) 80%, transparent);
}

/* Services Section */
.services-section {
  background: #111;
  color: #F5F2EC;
}

.services-section .section-label {
  color: #F5F2EC;
  opacity: 0.5;
}

.capability-number {
  position: absolute;
  top: 8vh;
  right: 10vw;
  font-family: 'Anton', sans-serif;
  font-size: clamp(4rem, 8vw, 10rem);
  color: #F5F2EC;
  opacity: 0.15;
}

.services-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: flex-start;
}

.services-left {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.service-item {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
  font-weight: 400;
  color: #F5F2EC;
  line-height: 1.3;
}

/* 02 Capability: metal-flyer（第一層・仮フォント版） */
.metal-flyer {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.cap-item {
  display: flex;
  align-items: baseline;
  max-width: 90vw;
}

.cap-num {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  color: rgba(182, 255, 0, 0.6);
  margin-right: 0.8em;
  letter-spacing: 0.1em;
}

.cap-logo {
  display: inline-block;
  line-height: 0;
  color: inherit;
}

.cap-logo--metalmania { font-family: 'Metal Mania', cursive; font-size: 56px; line-height: 1; }
.cap-logo--unifraktur { font-family: 'UnifrakturMaguntia', cursive; font-size: 52px; line-height: 1; }
.cap-logo--pirata { font-family: 'Pirata One', cursive; font-size: 40px; line-height: 1.05; letter-spacing: .02em; }
.cap-logo--nosifer { font-family: 'Nosifer', cursive; font-size: 30px; line-height: 1.1; }
.cap-logo--eater { font-family: 'Eater', cursive; font-size: 44px; line-height: 1; }
.cap-logo--butcherman { font-family: 'Butcherman', cursive; font-size: 44px; line-height: 1; }

.services-right {
  padding-top: 2vh;
}

.services-description {
  font-size: 0.9rem;
  line-height: 1.9;
  color: #F5F2EC;
  opacity: 0.7;
  font-weight: 300;
  margin: 0;
}

.grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(200, 255, 0, 0.03) 35px,
      rgba(200, 255, 0, 0.03) 70px
    );
  pointer-events: none;
}

/* Works Section */
.works-section {
  background: #F5F2EC;
}

.diagonal-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.d-line {
  position: absolute;
  width: 200%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200, 255, 0, 0.3) 30%, rgba(200, 255, 0, 0.3) 70%, transparent);
  transform: rotate(-15deg);
  transform-origin: center;
}

.d-line:nth-child(1) {
  top: 20%;
  left: -50%;
}

.d-line:nth-child(2) {
  top: 50%;
  left: -50%;
}

.d-line:nth-child(3) {
  top: 80%;
  left: -50%;
}

.works-list {
  display: flex;
  flex-direction: column;
  gap: 4vh;
}

.work-item {
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: 4vw;
  align-items: center;
  padding: 3vh 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  transition: all 0.3s ease;
}

.work-item:hover {
  padding-left: 2vw;
  border-bottom-color: #C8FF00;
}

.work-year {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  color: #111;
  opacity: 0.4;
}

.work-name {
  font-size: clamp(1.2rem, 1.8vw, 2rem);
  font-weight: 400;
  color: #111;
}

.work-category {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.5;
  text-align: right;
}

/* Contact Section */
.contact-section {
  background: #C8FF00;
  color: #111;
}

.contact-section .section-title,
.contact-section .section-number {
  color: #111;
}

.circle-accent {
  position: absolute;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.1);
  top: 50%;
  right: -25vw;
  transform: translateY(-50%);
  pointer-events: none;
}

.contact-content {
  display: flex;
  gap: 10vw;
  align-items: flex-start;
}

.contact-tagline {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #111;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4vh;
}

.contact-email {
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: 400;
  color: #111;
  text-decoration: none;
  border-bottom: 2px solid #111;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.contact-email:hover {
  opacity: 0.6;
}

.contact-address {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #111;
  opacity: 0.7;
  font-weight: 300;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4vh 10vw;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 0.9rem;
  opacity: 0.6;
}

.footer-links {
  display: flex;
  gap: 3vw;
}

.footer-links a {
  font-size: 0.9rem;
  color: #111;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 6vh 6vw;
  }
  
  .about-grid,
  .services-layout,
  .contact-content {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 6vh;
  }

  /* About SP: 縦積み・内部スクロール（読める優先） */
  .about-section {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .about-section .content-wrapper {
    height: auto;
    justify-content: flex-start;
  }

  .about-left,
  .about-right {
    width: 100%;
  }

  /* About right SP: ラベル列を畳む・アクションを縦積み */
  .about-right .info-block {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.1rem 0;
  }

  /* Capability metal-flyer SP: 長い項目のはみ出し防止 */
  .cap-logo--pirata { font-size: 30px; }
  .cap-logo--nosifer { font-size: 24px; }

  .work-item {
    grid-template-columns: 80px 1fr;
    gap: 4vw;
  }
  
  .work-category {
    grid-column: 2;
    text-align: left;
    margin-top: 1vh;
  }

  /* SP: 横スクロールsnapで各セクションにカチッと吸着 */
  .horizontal-scroll-wrapper {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Hero/End SP: 9:16一画面ピッタリ */
  .hero-section {
    width: 100vw;
  }

  .section.end-section {
    width: 100vw;
  }

  /* Hero: PCレイヤーを非表示 → SP画像に差し替え */
  #layer-1 { display: none; }
  #layer-3 { display: none; }

  #layer-2 {
    background-image: url('/wp-content/uploads/2026/06/sp_illsd-scaled.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #layer-4 {
    background-image: url('/wp-content/uploads/2026/06/sp_girl-scaled.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* End: illtabit_sp 1枚構成（黒背景+Matrix+透過PNG手前） */
  #layer-1-end { display: none; }
  #layer-2-end { display: none; }
  #layer-3-end { display: none; }

  #layer-4-end {
    background-image: url('/wp-content/uploads/2026/06/illtabit_sp-scaled.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
  }
}
.hero-section {
  background: #000;
  position: relative;
  isolation: isolate; /* ←これが鍵 */
}

/* 02 Capability: 項目番号 */
.service-num {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5em;
  color: rgba(182, 255, 0, 0.6);
  margin-right: 0.8em;
  vertical-align: super;
  letter-spacing: 0.1em;
}

/* 02 Capability: 多層パララックス背景 */
.services-section { position: relative; overflow: hidden; }
.cap-layer-back, .cap-layer-mid {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  will-change: transform;
}
.cap-layer-back { z-index: 1; }
.cap-layer-mid  { z-index: 2; }
.services-section .content-wrapper { position: relative; z-index: 5; }

/* ===== 企業ページ（固定ページ）===== */
.corp-page{
  background:#f4f3ef;
  color:#1a1a1a;
  min-height:100vh;
  padding:8vh 5vw 12vh;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.9;
}
.corp-container{ max-width:720px; margin:0 auto; }
.corp-eyebrow{
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:11px; letter-spacing:.35em; color:#6b6b6b; margin-bottom:14px;
}
.corp-title{
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:clamp(22px,3.2vw,30px); font-weight:400; letter-spacing:.04em;
  margin:0 0 8px; padding-bottom:22px; border-bottom:1px solid #d8d6cf;
}
.corp-content{ margin-top:40px; font-size:15px; }
.corp-content h2{
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:16px; font-weight:400; letter-spacing:.08em;
  margin:48px 0 16px; padding-left:12px; border-left:2px solid rgb(50,195,76);
}
.corp-content h3{ font-size:15px; font-weight:700; margin:32px 0 12px; }
.corp-content p{ margin:0 0 18px; }
.corp-content ul,.corp-content ol{ margin:0 0 18px; padding-left:1.4em; }
.corp-content li{ margin-bottom:8px; }
.corp-content a{ color:#1a1a1a; text-decoration:none; border-bottom:1px solid #b5b3ac; transition:color .3s,border-color .3s; }
.corp-content a:hover{ color:rgb(50,195,76); border-color:rgb(50,195,76); }
.corp-content table{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14px; }
.corp-content th,.corp-content td{ padding:12px 10px; border-bottom:1px solid #ddd; text-align:left; vertical-align:top; }
.corp-content th{ width:30%; font-weight:400; color:#555; white-space:nowrap; }
.corp-footer-nav{
  margin-top:80px; padding-top:24px; border-top:1px solid #d8d6cf;
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; letter-spacing:.1em;
}
.corp-footer-nav a{ color:#6b6b6b; text-decoration:none; transition:color .3s; }
.corp-footer-nav a:hover{ color:rgb(50,195,76); }
@media (max-width:768px){
  .corp-page{ padding:6vh 6vw 10vh; }
  .corp-content{ font-size:14px; }
  .corp-content th,.corp-content td{ display:block; width:100%; }
  .corp-content th{ border-bottom:none; padding-bottom:2px; }
}

/* ===== Contact form ===== */
.corp-form{ margin-top:36px; }
.form-row{ margin-bottom:24px; }
.form-row label{
  display:block; margin-bottom:8px; font-size:13px; letter-spacing:.05em;
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace; color:#444;
}
.form-row .req{
  display:inline-block; margin-left:8px; padding:1px 6px; font-size:10px;
  color:#fff; background:rgb(50,195,76); letter-spacing:.08em; vertical-align:middle;
}
.corp-form input[type="text"],
.corp-form input[type="email"],
.corp-form textarea{
  width:100%; padding:12px 14px; font-size:15px; line-height:1.7;
  color:#1a1a1a; background:#fff; border:1px solid #d8d6cf; border-radius:2px;
  font-family:inherit; transition:border-color .3s, box-shadow .3s;
  box-sizing:border-box;
}
.corp-form input:focus, .corp-form textarea:focus{
  outline:none; border-color:rgb(50,195,76);
  box-shadow:0 0 0 3px rgba(50,195,76,.12);
}
.corp-form textarea{ resize:vertical; min-height:180px; }
.form-note{ font-size:12px; color:#6b6b6b; margin:0 0 24px; }
.corp-submit{
  display:inline-block; padding:14px 48px; font-size:13px; letter-spacing:.25em;
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  color:#fff; background:#1a1a1a; border:1px solid #1a1a1a; border-radius:2px;
  cursor:pointer; transition:background .3s, border-color .3s, color .3s;
}
.corp-submit:hover:not(:disabled){ background:rgb(50,195,76); border-color:rgb(50,195,76); }
.corp-submit:disabled{ opacity:.5; cursor:default; }
.form-result{ margin-top:20px; font-size:13px; min-height:1.5em; }
.form-result.is-success{ color:rgb(30,140,60); }
.form-result.is-error{ color:#c0392b; }
.grecaptcha-badge{ visibility:visible; }
@media (max-width:768px){
  .corp-submit{ width:100%; padding:16px; }
}

/* ===== About section: Contact link (top page) ===== */
.info-link{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3);
  transition:color .35s, border-color .35s; }
.info-link:hover{ color:rgb(50,195,76); border-color:rgb(50,195,76); }

/* ===== End section: Contact =====
   既存 .parallax-layer 系は layer-1〜4 が z-index 10/20/30/40 !important、
   #matrix-canvas-end が 35 !important のため、最前面に出すには 40 超が必要。
   z-index:50 に設定（指示書の10から変更）。 */
.end-section .end-content{
  position:absolute; top:68%; left:50%;
  transform:translate(-50%,-50%);
  z-index:50; text-align:center; width:90%;
}
.end-copy{
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:clamp(12px,1.4vw,15px); letter-spacing:.2em;
  color:rgba(255,255,255,.6); margin:0 0 40px;
}
.contact-button{
  display:inline-block; padding:1.2em 4em;
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:clamp(12px,1.1vw,15px); letter-spacing:.4em;
  color:#0a0a0a;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.9); border-radius:2px;
  text-decoration:none;
  transition:background .4s, border-color .4s, color .4s, box-shadow .4s;
}
.contact-button:hover{
  color:#fff;
  background:rgba(50,195,76,.9);
  border-color:rgb(50,195,76);
  box-shadow:0 0 16px rgba(182,255,0,.35);
}
.site-footer-links{
  position:absolute; bottom:3vh; left:0; width:100%;
  text-align:center; z-index:50;
  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:11px; letter-spacing:.15em; color:rgba(255,255,255,.35);
}
.site-footer-links a{
  color:rgba(255,255,255,.35); text-decoration:none; margin:0 1.2em;
  transition:color .3s;
}
.site-footer-links a:hover{ color:rgba(255,255,255,.8); }
.site-footer-links .copyright{ margin:0 1.2em; }
@media (max-width:768px){
  .contact-button{ padding:1.1em 2.6em; letter-spacing:.3em; }
  .site-footer-links{ font-size:10px; }
  .site-footer-links a{ margin:0 .6em; }
  .site-footer-links .copyright{ display:block; margin-top:8px; }
}

/* ============================================
   02 / Capability — Festival Lineup (Stage 1)
   第1層（.content-wrapper / 静止）に配置
   ============================================ */

/* 色はここだけで管理する。背景を黒以外にする際はこの5行を差し替える */
.services-section {
  --cf-ink:    #F5F2EC;
  --cf-ink-2:  rgba(245, 242, 236, 0.62);
  --cf-ink-3:  rgba(245, 242, 236, 0.42);
  --cf-line:   rgba(245, 242, 236, 0.16);
  --cf-accent: #32C34C;
}

.cf-poster {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;   /* 右下の .section-next のクリックを妨げない */
  color: var(--cf-ink);
}

.cf-frame {
  position: absolute;
  top: 2.2vh; right: 2.2vh; bottom: 2.2vh; left: 2.2vh;
  border: 1px solid var(--cf-line);
}

.cf-head {
  position: absolute;
  top: 8vh; left: 0; right: 0;
  text-align: center;
}
.cf-presents {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(9px, 1.1vh, 11px);
  letter-spacing: 2.5px;
  color: var(--cf-ink-3);
  text-transform: none;
}
.cf-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 5.4vh, 54px);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0.6vh 0 0;
  color: var(--cf-ink);
}
.cf-venue {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(11px, 1.9vh, 17px);
  letter-spacing: 4px;
  color: var(--cf-ink-2);
  margin-top: 0.6vh;
}

.cf-lineup {
  position: absolute;
  top: 33%; left: 4%; right: 4%;
  display: grid;
  grid-template-columns: 1fr 1.16fr 1fr;
  gap: 2%;
  text-align: center;
  align-items: start;
}

.cf-stage {
  display: inline-block;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  padding: 0.35vh 1.1em;
  font-family: 'Special Elite', monospace;
  font-size: clamp(8px, 1vh, 10px);
  letter-spacing: 1.7px;
  color: var(--cf-accent);
}

.cf-headliner {
  line-height: 1.14;
  margin-top: 1.3vh;
  color: var(--cf-ink);
}
.cf-hl-design    { font-family: 'Nosifer', cursive;            font-size: clamp(16px, 3.6vh, 32px); }
.cf-hl-marketing { font-family: 'Metal Mania', cursive;        font-size: clamp(22px, 5.2vh, 48px); margin-top: 1vh; }
.cf-hl-strategy  { font-family: 'UnifrakturMaguntia', cursive; font-size: clamp(18px, 4.1vh, 36px); }

.cf-rule {
  width: 64%;
  height: 1px;
  background: var(--cf-line);
  margin: 1.2vh auto 1vh;
}

.cf-t1, .cf-t2, .cf-t3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.6px;
  line-height: 1.34;
}
.cf-t1 { font-size: clamp(11px, 1.9vh, 17px); color: var(--cf-ink);   opacity: .86; }
.cf-t2 { font-size: clamp(10px, 1.6vh, 14px); color: var(--cf-ink-2); margin-top: 0.45vh; }
.cf-t3 { font-size: clamp(9px,  1.3vh, 12px); color: var(--cf-ink-3); margin-top: 0.45vh; }

.cf-more {
  position: absolute;
  bottom: 9.5%; left: 0; right: 0;
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: clamp(8px, 1vh, 10px);
  letter-spacing: 0.5px;
  color: var(--cf-ink-3);
}
.cf-tagline {
  position: absolute;
  bottom: 4.4vh; left: 0; right: 0;
  text-align: center;
  font-family: 'Special Elite', monospace;
  font-size: clamp(8px, 1vh, 10px);
  letter-spacing: 1px;
  color: var(--cf-ink-3);
}
.cf-est {
  position: absolute;
  bottom: 4.4vh; left: 4.2vh;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(9px, 1.1vh, 11px);
  letter-spacing: 1.4px;
  color: var(--cf-ink-3);
}

/* 画面高が低い環境（13インチノート等）での調整 */
@media (max-height: 780px) {
  .cf-lineup { top: 31%; }
  .cf-t3 { letter-spacing: 1.2px; }
}