/*
会社概要ページ 専用CSS
Ctrl+Fで「01 メイン画像」などの日本語見出しを検索してください。
00 共通 / 01 メイン画像 / 02 私たちについて / 03 会社情報
04 事業内容 / 05 技術連携 / 06 分野 / 07 アクセス / 08 関連情報 / 09 CONTACT
padding＝内側余白、margin＝外側余白、gap＝項目間隔。
ヘッダー・フッターは common.css を再利用。
*/

/* #region 00 共通設定・本文幅・見出し
======================================== */
.co-page { color: #102235; background: #fff; }
.co-container { width: min(1500px, calc(100% - 80px)); margin: 0 auto; }
.co-section { padding: 35px 0; }

/* 左側の縦線が付いた見出し */
.co-heading { border-left: 2px solid #315e8b; padding-left: 18px; margin-bottom: 20px; }
.co-label { color: #102235; font: 11px/1.6 Georgia, serif; font-weight: 600; letter-spacing: .18em; margin-bottom: 5px; }
.co-page h2 { font: 500 clamp(27px, 2.5vw, 38px)/1.5 "Yu Mincho", "YuMincho", serif; letter-spacing: .03em; }
.co-copy { font-size: 14px; line-height: 1.95; letter-spacing: .04em; color: #102235; }
.co-page figure { margin: 0; min-width: 0; }
.co-page :focus-visible { outline: 3px solid #00a6a6; outline-offset: 5px; }
.co-skip { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; background: #fff; }
.co-skip:focus { top: 10px; }
.co-visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* 枠線付きの案内ボタン */
.co-outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid #425d79; padding: 11px 25px; font-size: 13px; font-weight: 600; margin-top: 22px; background: #ffffffc9; }
a.co-outline-button:hover { color: #fff; background: #173b5a; }
.co-card-english { font: 9px/1.6 Georgia, serif; letter-spacing: .10em; color: #102235; }
@media (max-width: 767px) {
    .co-container { width: calc(100% - 40px); }
    .co-section { padding: 30px 0; }
    .co-page h2 { font-size: 28px; }
    .co-copy { font-size: 13px; }
    .co-pc-break { display: none; }
}
/* #endregion */

/* #region 01 メイン画像・会社概要
======================================== */
.co-hero { position: relative; min-height: 470px; overflow: hidden; background: #09263b; color: #fff; }
/* 社屋写真追加後、HTMLのcompany-building-placeholder.svgを変更 */
.co-hero-photo { position: absolute; inset: 0 0 0 32%; }
.co-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.co-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #03121f 0%, #03121fee 25%, #03121f66 54%, #03121f14); }
.co-hero-inner { position: relative; z-index: 1; min-height: 470px; padding: 25px 0 30px; }
.co-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; letter-spacing: .08em; margin-bottom: 28px; }
.co-hero-label { font: 12px/1.5 Georgia, serif; letter-spacing: .16em; margin-bottom: 8px; }
.co-hero h1 { font: 500 clamp(44px, 5vw, 72px)/1.25 "Yu Mincho", "YuMincho", serif; letter-spacing: .08em; margin-bottom: 14px; }
.co-hero-subtitle { font: 500 clamp(25px, 2.7vw, 38px)/1.5 "Yu Mincho", "YuMincho", serif; letter-spacing: .05em; margin-bottom: 12px; }
.co-hero-text { font-size: 15px; line-height: 1.9; }
.co-hero-message { font-size: 10px; line-height: 1.6; letter-spacing: .15em; color: #9ec3d9; margin-top: 15px; }
.co-hero-side { position: absolute; right: 0; bottom: 30px; font: 13px/1.8 Georgia, serif; letter-spacing: .2em; text-shadow: 0 1px 6px #001321; }
@media (max-width: 767px) {
    .co-hero-photo { left: 0; }
    .co-hero::after { background: linear-gradient(90deg, #03121fed, #03121faa); }
    .co-hero-inner { padding: 25px 0 35px; }
    .co-breadcrumb { font-size: 10px; margin-bottom: 30px; }
    .co-hero h1 { font-size: 48px; }
    .co-hero-subtitle { font-size: 28px; }
    .co-hero-side { display: none; }
}
/* #endregion */

/* #region 02 私たちについて・製造写真の背景
======================================== */
.co-about { background: linear-gradient(90deg, #fff 0%, #fffffff2 30%, #ffffff88 50%, transparent 75%), url("../images/newdevelopment/精密PCB実装ヘッドのクローズアップ.png.webp") right center / cover no-repeat; }
.co-about-inner { position: relative; padding: 40px 0; min-height: 320px; }
.co-about .co-copy { max-width: 750px; }
.co-about-message { position: absolute; right: 0; top: 35%; color: #fff; font: 12px/1.9 Georgia, serif; letter-spacing: .2em; text-shadow: 0 1px 5px #001323; }
@media (max-width: 767px) {
    .co-about { background-image: linear-gradient(90deg, #fffffff5, #ffffffe6), url("../images/newdevelopment/精密PCB実装ヘッドのクローズアップ.png.webp"); }
    .co-about-inner { padding: 35px 0; }
    .co-about-message { display: none; }
}
/* #endregion */

/* #region 03 会社情報・社屋写真と表
======================================== */
.co-info-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; align-items: start; }
.co-building { width: 100%; aspect-ratio: 1.7; object-fit: cover; }
.co-table-wrap { min-width: 0; }
.co-company-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.8; }
.co-company-table th, .co-company-table td { border: 1px solid #dce5ed; padding: 10px 16px; text-align: left; }
.co-company-table th { width: 135px; background: #edf2f7; font-weight: 600; }
.co-company-table td { background: #fafcfe; overflow-wrap: anywhere; }
.co-pending-value { color: #102235; }
.co-data-note { display: block; font-size: 10px; color: #102235; }
@media (max-width: 900px) {
    .co-info-layout { grid-template-columns: 1fr; gap: 25px; }
    .co-building { max-height: 270px; }
}
@media (max-width: 480px) {
    .co-company-table { font-size: 12px; }
    .co-company-table th { width: 85px; }
    .co-company-table th, .co-company-table td { padding: 9px; }
}
/* #endregion */

/* #region 04 事業内容・6サービスのカード
======================================== */
.co-business-layout { display: grid; grid-template-columns: .7fr 2fr; gap: 35px; border-top: 1px solid #e1e9ef; padding-top: 25px; }
.co-business-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.co-business-card { min-width: 0; border: 1px solid #dce6ef; background: #fff; }
.co-business-card > img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.co-business-card > div { padding: 15px 11px; }
.co-business-card h3 { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.co-business-card h3 a:hover { color: #007bb5; }
.co-business-card .co-card-english { overflow-wrap: anywhere; margin-bottom: 12px; }
.co-business-card div > p:last-child { font-size: 11px; line-height: 1.8; }
@media (max-width: 1200px) {
    .co-business-layout { grid-template-columns: 1fr; }
    .co-business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 600px) {
    .co-business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
/* #endregion */

/* #region 05 技術連携・ものづくりを支える体制
======================================== */
.co-network { background: linear-gradient(110deg, #f8fbfe, #edf4fa); }
.co-network-layout { display: grid; grid-template-columns: .9fr 1.2fr; gap: 45px; align-items: center; }
.co-network-figure img { width: 100%; height: auto; }
@media (max-width: 900px) {
    .co-network-layout { grid-template-columns: 1fr; gap: 25px; }
}
/* #endregion */

/* #region 06 支えている分野・写真一覧
======================================== */
.co-fields-layout { display: grid; grid-template-columns: .8fr 1.7fr; gap: 35px; }
.co-field-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.co-field-grid img { width: 100%; aspect-ratio: 1.15; object-fit: cover; }
.co-field-grid figcaption { font-size: 10px; font-weight: 600; text-align: center; margin-top: 8px; }
@media (max-width: 1100px) {
    .co-fields-layout { grid-template-columns: 1fr; gap: 24px; }
    .co-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 600px) {
    .co-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .co-field-grid figcaption { font-size: 11px; }
}
/* #endregion */

/* #region 07 アクセス・所在地・地図
======================================== */
.co-access-layout { display: grid; grid-template-columns: .55fr 1fr 1fr .9fr; gap: 25px; padding-top: 24px; border-top: 1px solid #e1e9ef; align-items: start; }
.co-access-details { font-size: 12px; line-height: 1.9; }
.co-access-details p { margin-bottom: 10px; }
.co-access-details strong { display: inline-block; min-width: 55px; }
.co-access figure img { width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.co-button-pending { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; text-align: center; }
.co-button-pending small { font-size: 9px; font-weight: 400; }
@media (max-width: 1100px) {
    .co-access-layout { grid-template-columns: 1fr 1fr; }
    .co-access-layout > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .co-access-layout { grid-template-columns: 1fr; }
}
/* #endregion */

/* #region 08 TMUについて・代表／理念／沿革
======================================== */
.co-related-layout { display: grid; grid-template-columns: .7fr 2fr; gap: 35px; }
.co-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.co-related-card { border: 1px solid #dce6ef; min-width: 0; }
.co-related-card > img { width: 100%; aspect-ratio: 2.7; object-fit: cover; }
.co-related-card > div { padding: 14px 18px; }
.co-related-card h3 { font-size: 17px; }
.co-link-pending { display: block; font-size: 10px; color: #102235; margin-top: 7px; }
@media (max-width: 900px) {
    .co-related-layout { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
    .co-related-grid { grid-template-columns: 1fr; }
}
/* #endregion */

/* #region 09 CONTACT・既存ページから再利用
======================================== */
.co-contact {
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: 65px 0;
  box-sizing: border-box;

  background:
    linear-gradient(
      90deg,
      rgba(0, 17, 34, 0.72) 0%,
      rgba(0, 25, 46, 0.30) 55%,
      rgba(0, 17, 34, 0.18) 100%
    ),
    url("../images/Circuit design/黄金の夕陽と跳ねるイルカの海.png.webp")
    center center / cover no-repeat;

  color: #ffffff;
}

/* コンテンツ全体 */

.co-contact .contact-cta-inner {
  position: relative;
  z-index: 1;

  width: calc(100% - 80px);
  max-width: 1440px;
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

/* 左側 */

.co-contact .contact-cta-content {
  max-width: 780px;
  flex: 1;
}

.co-contact-label {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.co-contact .contact-cta-title {
  margin: 0 0 22px;

  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.55;

  color: #ffffff;
}

.co-contact .contact-cta-text {
  margin: 0 0 32px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;

  color: #ffffff;
}

/* ボタン */

.co-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.co-contact-btn {
  min-height: 60px;
  padding: 0 28px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;

  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.8);

  font-size: 15px;
  font-weight: 700;
  text-decoration: none;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.co-contact-btn-white {
  background: #ffffff;
  color: #102235;
}

.co-contact-btn-white:hover {
  background: #e7f0f6;
  color: #102235;
}

.co-contact-btn-dark {
  background: rgba(0, 13, 27, 0.78);
  color: #ffffff;
}

.co-contact-btn-dark:hover {
  background: rgba(0, 45, 75, 0.85);
  color: #ffffff;
}

/* 右側の英語 */

.co-contact-message {
  flex-shrink: 0;
  margin: 0;

  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.16em;
}

/* スマートフォン */

@media (max-width: 767px) {

  .co-contact {
    min-height: auto;
    padding: 65px 0;

    background-position: 62% center;
  }

  .co-contact .contact-cta-inner {
    width: calc(100% - 40px);
    display: block;
  }

  .co-contact .contact-cta-title {
    font-size: 27px;
  }

  .co-contact .contact-cta-text {
    font-size: 14px;
  }

  .co-contact-buttons {
    flex-direction: column;
  }

  .co-contact-btn {
    width: 100%;
    min-height: 56px;
  }

  .co-contact-message {
    margin-top: 35px;
    font-size: 10px;
  }

}



/* #endregion */
@media (prefers-reduced-motion: reduce) {
    .co-page * { scroll-behavior: auto !important; transition: none !important; }
}

/* Googleマップ・PCとスマートフォン共通 */
.co-access-map { margin: 0; min-width: 0; }
.co-access-map iframe { display: block; width: 100%; height: 260px; border: 0; }
@media (max-width: 767px) { .co-access-map iframe { height: 300px; } }

/* TMUについて・カード全体のリンク */
a.co-related-card { display:block; color:inherit; text-decoration:none; }
a.co-related-card:hover { border-color:#4c8db7; }
a.co-related-card:focus-visible { outline:3px solid #009bc4; outline-offset:4px; }
.co-related-arrow { display:block; text-align:right; color:#19577f; margin-top:8px; }