@charset "UTF-8";

/* --- 追加：白背景・ライトグレー背景用ユーティリティクラス --- */
/* common.cssに定義されているbg-white, bg-light-gray等を上書き・補強 */
.bg-white { background-color: #fff; }
.bg-light-gray { background-color: #f5f5f5; } /* 薄いグレー */
.text-dark { color: #333 !important; } /* 濃いグレーのテキスト */

/* --- Page Header (修正版) --- */
.page-header {
  background: url('https://images.unsplash.com/photo-1494412574643-35d324682133?auto=format&fit=crop&q=80') center/cover no-repeat;
  position: relative;
  /* 上下の余白バランスを調整 */
  padding: 160px 0 100px;
  text-align: center;
  color: #fff;
  border-bottom: 8px solid var(--primary);
}

.page-header::before {
  content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.6);
}

/* タイトルコンテナ */
.page-title {
  position: relative;
  z-index: 1;
  /* Flexboxで縦並び・中央揃えを強制 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 英語と日本語の間隔 */
  margin: 0; /* 余計なマージン削除 */
}

/* 英語タイトル */
.en-title {
  font-family: var(--font-en);
  font-size: 80px; /* インパクト重視で大きく */
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* 日本語サブタイトル */
.jp-subtitle {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  padding: 8px 24px; /* 横幅を広めに */
  letter-spacing: 0.1em;
  display: inline-block;
  /* 微調整：英語タイトルの迫力に負けないよう少し離す */
  margin-top: 0; 
}

/* --- Intro Summary --- */
.intro-summary {
  padding: 100px 0;
  text-align: center;
  /* 背景を白に変更 (PHP側でクラス指定) */
}
.goukai-lead {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 40px;
  color: #111; /* 黒字に変更 */
}
.text-blue {
  color: var(--primary); /* シンプルに文字色のみ */
}
.about-lead-text {
  font-size: 16px;
  line-height: 2.2;
  /* color: #bbb; から変更 (PHP側でクラス指定) */
  max-width: 800px;
  margin: 0 auto;
  font-weight: 500;
}

/* --- About Sections Common --- */
.about-section {
  padding: 120px 0;
}

.about-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start; /* 上揃えで整列 */
}
.about-content-grid.reverse {
  direction: rtl;
}
.about-content-grid.reverse .text-area {
  direction: ltr;
}

/* --- Goukai Head --- */
.goukai-head { position: relative; margin-bottom: 80px; }
.huge-num {
  font-family: var(--font-en);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  /* color: rgba(255,255,255,0.05); から変更 */
  position: absolute;
  top: -60px; left: -10px;
  z-index: 0;
  pointer-events: none;
}
/* 明るい背景用のアウトライン */
.text-outline-light { color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,0.1); }

.goukai-head h2 {
  position: relative; z-index: 1;
  font-size: 36px;
  font-weight: 900;
  border-left: 8px solid var(--primary);
  padding-left: 20px;
  /* colorはPHP側のクラスで指定 */
}

/* --- Text Area & List --- */
.text-area h3 {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 30px;
  line-height: 1.4;
   /* colorはPHP側のクラスで指定 */
}


.text-area p {
  font-size: 16px;
  line-height: 2;
  font-weight: 500;
  margin-bottom: 30px;
  color: inherit;
}


/* シンプルなリスト */
.simple-list {
  margin-bottom: 30px;
  padding-left: 0;
  list-style: none;
}
.simple-list li {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.simple-list li::before {
  content: '/';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 900;
}

/* --- Image Area --- */
.img-area img {
  filter: grayscale(100%) contrast(1.1);
  /* 影なし、太い枠線のみ */
  border: 1px solid #333; 
}

/* --- Message Box (Simple & Solid) --- */
.message-box {
  max-width: 800px;
  margin: 0 auto;
  /* 装飾廃止。白背景に黒枠のみ */
  background: #fff;
  border: 4px solid #000;
  padding: 60px;
  text-align: center;
}

.message-box h3 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 40px;
  /* colorはPHP側のクラスで指定 */
}

.message-body p {
  text-align: left;
  font-size: 16px;
  line-height: 2.2;
  font-weight: 500;
   /* colorはPHP側のクラスで指定 */
}

.sign {
  margin-top: 40px;
  text-align: right;
  font-weight: 900;
  font-size: 16px;
  border-top: 2px solid #000;
  display: inline-block;
  padding-top: 10px;
   /* colorはPHP側のクラスで指定 */
}

/* --- CTA Section (ご指摘箇所) --- */
.cta-section {
  padding: 120px 0;
  text-align: center;
  background: var(--primary); /* 青背景 */
  color: #fff;
}
.cta-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 30px;
  line-height: 1.4;
}
.cta-desc {
  font-size: 16px;
  margin-bottom: 50px;
  font-weight: bold;
  opacity: 0.9;
  line-height: 2;
}
/* 白枠ボタン */
.btn-outline-white {
  display: inline-block;
  padding: 20px 80px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  background: transparent;
  transition: 0.3s;
  text-decoration: none;
}
.btn-outline-white:hover {
  background: #fff;
  color: var(--primary);
}


/* --- Responsive --- */
@media (max-width: 900px) {
  .page-header { padding: 120px 0 80px; }
  .en-title { font-size: 48px; }
  .jp-subtitle { font-size: 14px; padding: 6px 16px; }
  .goukai-lead { font-size: 28px; }
  .huge-num { font-size: 80px; top: -40px; left: -10px; }
  .goukai-head h2 { font-size: 28px; }
  
  .about-content-grid, .about-content-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 40px;
  }
  .img-area { order: -1; }
  
  .message-box { padding: 30px 20px; border-width: 2px; }
  .message-box h3 { font-size: 24px; }
  .cta-title { font-size: 26px; }
  .btn-outline-white { width: 100%; padding: 15px 0; }
}