@charset "UTF-8";

/* ====================================
   共通調整 (TOPページ専用)
   ==================================== */
.section-title {
  margin-bottom: 50px;
}
.text-black { color: #111 !important; }
.btn-wrap { margin-top: 40px; }


/* ====================================
   1. HERO SECTION (FV)
   ==================================== */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 80px;
  background: url('https://images.unsplash.com/photo-1605218457297-3d3f44391629?auto=format&fit=crop&q=80') center/cover no-repeat;
}

.hero-section::before {
  content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(0, 8, 20, 0.7);
}

.hero-content { position: relative; z-index: 1; width: 100%; padding: 0 20px; }

.hero-copy-en {
  font-family: var(--font-en);
  font-size: 100px;
  line-height: 0.85;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
}

.hero-copy-jp {
  font-size: 20px;
  font-weight: 700;
  background: var(--dark);
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  letter-spacing: 0.1em;
}

/* FVボタン（日本語対応） */
.hero-btn-area {
  margin-top: 40px;
}
.btn-hero-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: var(--primary);
  color: #fff;
  font-size: 20px; /* 日本語に合わせて調整 */
  font-weight: bold;
  padding: 20px 60px;
  border: 2px solid var(--primary);
  transition: 0.3s;
  letter-spacing: 0.1em;
}
.btn-hero-solid:hover {
  background: transparent;
  color: #fff;
}
.btn-hero-solid .arrow { font-family: var(--font-en); font-size: 20px; }


/* ====================================
   2. STORY SECTION (ABOUT)
   ==================================== */
.story-section { padding: 120px 0; border-bottom: 1px solid #333; }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.story-text h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.5;
}
.story-text p {
  font-size: 16px;
  line-height: 2.2;
  color: #ccc;
  margin-bottom: 30px;
}
.highlight-blue { color: var(--accent); font-weight: bold; }


/* ====================================
   3. MONEY SECTION (WORK)
   ==================================== */
.money-section {
  padding: 120px 0;
  background: #fff;
  color: #111;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: flex-start;
}

.work-left h3 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 30px;
  line-height: 1.4;
}
.work-left p {
  color: #333;
  line-height: 2;
  font-weight: 500;
}

.work-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.money-card {
  border: 4px solid #111;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  transition: 0.3s;
  background: #fff;
}
.money-card:hover {
  background: #111;
  color: #fff;
  border-color: #111;
  transform: translateY(-5px);
}
.money-card:hover .amount,
.money-card:hover .desc,
.money-card:hover .unit,
.money-card:hover .label {
  color: #fff;
}

.money-card .label {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 15px;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
  padding-bottom: 5px;
}

.money-card h4 {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 15px;
}

.money-card .amount {
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  margin-bottom: 10px;
}
.money-card .unit { font-size: 18px; color: #111; font-weight: bold; margin-left: 5px; }
.money-card .desc { font-size: 13px; color: #666; font-weight: bold; line-height: 1.5; }


/* ====================================
   4. SOLO SECTION (VALUE) - 抜本的リニューアル
   ==================================== */
.solo-section {
  padding: 100px 0;
  background: var(--gray);
  border-top: 1px solid #333;
  color: #fff;
}

.solo-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.solo-head {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 30px;
  color: #fff;
  line-height: 1.3;
}
.solo-desc {
  color: #aaa;
  line-height: 2;
  font-size: 16px;
  margin-bottom: 40px;
}

/* 禁止事項ボード (インダストリアルデザイン) */
.warning-board {
  background: #111;
  border: 4px solid #fff;
  padding: 40px;
  position: relative;
  box-shadow: 20px 20px 0 var(--primary); /* 青い影 */
}
.warning-board h4 {
  font-family: var(--font-en);
  font-size: 32px;
  color: #fff;
  border-bottom: 2px solid #333;
  padding-bottom: 20px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.banned-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #ccc;
}
.banned-list .icon {
  color: var(--primary); /* 青い×印 */
  font-size: 24px;
  font-weight: 900;
}
.banned-list .text {
  text-decoration: line-through; /* 取り消し線で否定を強調 */
  text-decoration-color: #666;
}

.board-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #333;
  font-family: var(--font-en);
  color: var(--primary);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: right;
}


/* ====================================
   5. COMPANY LINK
   ==================================== */
.company-link-section {
  padding: 60px 0;
  background: #000;
  border-top: 1px solid #222;
}
.company-link-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333;
  padding: 30px 40px;
}
.comp-title {
  font-family: var(--font-en);
  font-size: 24px;
  color: #fff;
  font-weight: 700;
}
.company-link-box p { color: #666; font-size: 14px; margin-left: 30px; flex-grow: 1;}
.link-arrow {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  position: relative;
}
.link-arrow:hover { color: var(--primary); padding-left: 10px; }


/* ====================================
   6. CTA SECTION
   ==================================== */
.cta-section {
  padding: 120px 0;
  text-align: center;
  background: var(--primary);
  color: #fff;
}
.cta-title {
  font-size: 42px;
  font-weight: 900;
  margin-bottom: 30px;
  line-height: 1.4;
}
.cta-desc {
  font-size: 18px;
  margin-bottom: 50px;
  font-weight: bold;
  opacity: 0.9;
}
.btn-outline-white {
  display: inline-block;
  padding: 20px 80px;
  border: 3px solid #fff;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  background: transparent;
  transition: 0.3s;
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--primary);
}


/* ====================================
   SP Adjustments
   ==================================== */
@media (max-width: 900px) {
  /* Hero */
  .hero-copy-en { font-size: 50px; }
  .hero-copy-jp { font-size: 16px; padding: 10px 20px; }
  .btn-hero-solid { width: 100%; padding: 15px 0; font-size: 18px; }
  
  /* Story & Work Grid */
  .story-grid, .work-grid { grid-template-columns: 1fr; gap: 50px; }
  .work-right { grid-template-columns: 1fr; }
  
  /* Solo Grid */
  .solo-grid-layout { grid-template-columns: 1fr; gap: 50px; }
  .warning-board { padding: 30px 20px; }

  /* Company Link */
  .company-link-box { flex-direction: column; text-align: center; gap: 20px; }
  .company-link-box p { margin: 0; }
  
  /* CTA */
  .cta-title { font-size: 28px; }
  .btn-outline-white { width: 100%; padding: 15px 0; }
}