@charset "utf-8";
/* =====================================================================
   /about/overview/ 「3分でわかるクリスタルプロセス」 ページ固有スタイル
   - 汎用パーツ（見出し h2>span / cp-lead / cp-photo / cp-hero / cp-numbers 等）は
     common/css/base.css の「共通コンポーネント (cp-)」に集約済み。
   - このファイルには overview 固有の合成パーツのみ残す：
     OUR ROOTS（roots＋timeline）／MISSION-VISION-VALUE（mvv）／EXPLORE（explore）
   ===================================================================== */

/* ===== ② OUR ROOTS（沿革タイムライン） ===== */
/* 画像を上、タイムラインを下に縦積み。幅800pxで中央揃え */
.ov-roots-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}
/* 上部の写真（1枚） */
.ov-roots-photos {
  width: 100%;
}
.ov-roots-photos .cp-photo.lg {
  min-height: 320px;
}
.ov-roots-photos .cp-photo.md {
  min-height: 138px;
}

/* タイムライン本体（縦線＋ドット） */
.ov-timeline {
  flex: 1;
  list-style: none;
  margin: 0;
  margin-left: 25px;
  margin-right: 5px;
  padding: 0;
  position: relative;
  border-left: 2px solid #d6e4f0;
}
.ov-timeline > li {
  position: relative;
  padding: 0 0 26px 28px;
}
.ov-timeline > li:last-child {
  padding-bottom: 0;
}
.ov-timeline > li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1868ad;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #d6e4f0;
}
.ov-timeline > li.now-mark::before {
  background: #27a5e9;
}
.ov-timeline .ov-tl-year {
  font-weight: bold;
  color: #1868ad;
  font-size: 15px;
  margin: 0 0 4px;
}
.ov-timeline .ov-tl-title {
  font-weight: bold;
  color: #333;
  margin: 0 0 4px;
}
.ov-timeline > li .ov-tl-title ~ .ov-tl-title {
  margin-top: 8px;
}
.ov-timeline .ov-tl-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.ov-timeline .ov-tl-pickup {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: #f1f1f1;
  border-left: 4px solid #1868ad;
  font-size: 14px;
  color: #333;
}

/* ===== ③ MISSION / VISION / VALUE（company/mission と同一スタイル） ===== */
.ov-mvv {
  max-width: 800px;
  margin: 0 auto;
  color: #333;
  line-height: 1.6;
}
.ov-mvv .philosophy-intro {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #1868ad;
}
.ov-mvv .vision_wrapper {
  padding: 20px 30px 0;
  border: 3px solid #f1f1f1;
  border-radius: 20px;
  margin-bottom: 20px;
}
.ov-mvv .mission-title,
.ov-mvv .vision-title,
.ov-mvv .value-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid #1868ad;
  padding-bottom: 5px;
}
.ov-mvv .mission-title span,
.ov-mvv .vision-title span,
.ov-mvv .value-title span {
  font-size: 1.2rem;
  margin-left: 15px;
}
.ov-mvv .mission-content,
.ov-mvv .vision-content {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.ov-mvv .mission-content-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1868ad;
}
.ov-mvv .value-list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 40px;
}
.ov-mvv .value-item {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.ov-mvv .value-item strong {
  font-size: 1.3rem;
  color: #1868ad;
}

/* ===== ⑤ EXPLORE（回遊カード） ===== */
.ov-explore {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.ov-explore > li {
  width: calc(50% - 10px);
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #fff;
  transition: box-shadow 0.2s, border-color 0.2s;
  display: flex;
}
.ov-explore > li:hover {
  border-color: #1868ad;
  box-shadow: 0 4px 14px rgba(24, 104, 173, 0.12);
}
.ov-explore a {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* サムネ画像：左側にカード高いっぱいで配置 */
.ov-explore .ov-explore-icon {
  width: 110px;
  flex-shrink: 0;
}
.ov-explore .ov-explore-icon .cp-photo {
  height: 100%;
  min-height: 120px;
  font-size: 11px;
  border: none;
}
.ov-explore .ov-explore-icon .cp-photo img {
  height: 100%;
  object-fit: cover;
}
/* 本文：英語見出し→日本語見出し→説明を縦積み、上下中央寄せ */
.ov-explore .ov-explore-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}
.ov-explore .ov-explore-en {
  display: block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #1868ad;
  margin: 0 0 6px;
}
.ov-explore .ov-explore-title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px;
}
.ov-explore .ov-explore-desc {
  display: block;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}
/* 矢印：右端に区切り線付きで縦中央配置 */
.ov-explore .ov-explore-arrow {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-left: 1px solid #eee;
  color: #1868ad;
  font-size: 18px;
  font-weight: bold;
}

.philosophy-conclusion {
  font-size: 1.2rem;
  margin-top: 40px;
  text-align: center;
  font-weight: bold;
  color: #1868ad;
}

/* =====================================================================
   レスポンシブ（overview固有分のみ。共通分は base.css 側）
   ===================================================================== */
@media only screen and (max-width: 800px) {
  /* OUR ROOTS：写真の高さを控えめに */
  .ov-roots-body {
    gap: 20px;
  }
  .ov-roots-photos .cp-photo.lg {
    min-height: 200px;
  }
  /* EXPLORE：1列 */
  .ov-explore > li {
    width: 100%;
  }
  .ov-explore .ov-explore-body {
    padding: 12px 0;
  }
  .ov-explore .ov-explore-title {
    line-height: 1.5rem;
  }
  .ov-explore .ov-explore-en {
    line-height: 0.75rem;
  }
  .ov-explore .cp-photo {
    overflow: hidden;
  }
  .ov-explore .cp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}