/* ===========================
   基本設定（どのページでも共通の土台）
=========================== */
   @charset "UTF-8";
   :root {
    /* Fonts（Google Fonts の family 名はスペース区切り） */
    --base-font: "Noto Sans JP", sans-serif;
    /* Font Sizes (1.6rem = 16px) */
    --root-font-size: 62.5%;
    /* Colors */
    --main-color: #019696;
    --sub-color: #C8F5EF;
    --sub-color-right: #e3faf7;
    --base-color: #333333;
    --gray-color: #626262;
  }

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html,
   body {
     padding: 0;
     margin: 0;
   }
   
   html {
     font-size: var(--root-font-size);
     line-height: 1.6;
   }
   
   body {
    font-family: var(--base-font);
     color: var(--base-color);
     font-size: 1.6rem;
     line-height: 1.8;
     overflow-x: hidden;
   }
   
   img {
     max-width: 100%;
     height: auto;
   }
   
   ul,
   ol {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p {
     margin: 0;
     padding: 0;
   }
   
   a {
     text-decoration: none;
     color: inherit;
   }
   a:hover {
     opacity: 0.7;
   }

.br-sp {
 display: none;
}

.table-scroll-note {
 display: none;
}

.container {
 width: 100%;
 max-width: 1000px; /* パソコン表示時の最大幅 */
 margin: 0 auto;
}

/* ===========================
   ヘッダーとナビゲーション
=========================== */
header {
 background-color: #fff;
 border-bottom: 4px solid var(--main-color);
 padding: 2rem 0;
 height: 72px;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
}

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

.header-logo {
font-size: 1.4rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.8rem;
line-height: 2.4rem;
}

.header-logo a {
 display: inline-flex;
 align-items: center;
}

.header-logo img {
 width: auto;
 height: 2.4rem;
 }

nav ul {
 display: flex;
 list-style: none;
}

nav ul li {
 margin-left: 2rem;
}

nav ul li a {
 text-decoration: none;
 color: #555;
 font-weight: 500;
 font-size: 15px;
 padding: 5px 0;
 transition: color 0.3s;
}

nav ul li a:hover,
nav ul li a.active {
 color: var(--main-color);
 /* border-bottom: 2px solid var(--main-color); */
}

/* ===========================
   メインコンテンツエリア
=========================== */
main {
 background-color: #fff;
 padding-top: 6rem;
 padding-bottom: 8rem;
}

section {
 margin-bottom: 6rem;
}

.kasou section {
 margin-bottom: 8rem;
}

.section-title {
 color: var(--main-color);
 font-size: 2.4rem;
 border-left: 5px solid var(--main-color);
 padding-left: 1rem;
 margin-bottom: 2rem;
 margin-top: 1rem;
}

.kasou-title {
 background:  var(--sub-color);
 width: 100vw;
 padding-top: calc(72px + 5rem);
 padding-bottom: 5rem;
 font-size: 2.4rem;
 font-weight: 500;
 text-align: center;
 letter-spacing: 0.1em;
}

.kasou-section-title {
 font-size: 2rem;
 background: var(--main-color);
 color: #fff;
 font-weight: 500;
 text-align: center;
 letter-spacing: 0.08em;
 padding: 1rem 0;
 margin-bottom: 3rem;
}

/* 各ページの独自パーツ */
/* ===========================
  HOME
=========================== */
.home .container {
 padding-top: 0;
}
.home main.container {
 padding-top: 72px;
}

.hero {
 background: url(image/fv.webp);
 background-size: contain;
 background-repeat: no-repeat;
 aspect-ratio: 160 / 75;
 padding: 4rem;
 margin-bottom: 6rem;
 width: 100%;
 max-width: 1000px;
}

.hero .hero-title {
 font-size: 3.6rem;
 font-weight: 400;
 line-height: 1.6;
 letter-spacing: 0.02em;
}


/* ===========================
  PRODUCT
=========================== */
.product-text {
 font-size: 1.8rem;
 font-weight: 500;
 text-align: center;
 margin-bottom: 8rem;
}

.product-list-container {
 display: flex;
 justify-content: space-between;
 gap: 2rem;
}

.product-list {
 list-style: none;
 padding-left: 0;
 width: 60%;
}
.product-list li {
 margin-bottom: 2rem;
 padding: 2rem;
 background: #f9f9fa;
}

.product-list-image {
 width: 40%;
 max-width: 400px;
}

.product-list-image img {
 width: 100%;
 height: auto;
}

.oem-flow-container {
 margin-bottom: 4rem;
}

.oem-flow .sub-lead {
color: var(--main-color);
font-size: 1.8rem;
font-weight: 700;
padding-left: 1rem;
margin-bottom: 2rem;
border-left: 5px solid var(--main-color);
}

.flow-chart {
 list-style: none;
 margin-top: 1rem;
 margin-bottom: 4rem;
}
.flow-chart li {
 background: var(--sub-color-right);
 margin-bottom: 1.5rem;
 padding: 1.4rem;
 font-weight: 700;
}
.flow-chart li span {
 background: var(--main-color);
 color: #fff;
 padding: 0.6rem 1.2rem;
 border-radius: 50%;
 margin-right: 1rem;
 font-size: 1.6rem;
}

.flow-chart-image {
 list-style: none;
 margin-top: 1rem;
 display: flex;
 justify-content: space-between;
}
.flow-chart-image li {
 width: 32%;
 text-align: center;
 font-size: 1.4rem;
}


/* ===========================
  ABOUTUS
=========================== */
table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 3rem;
}

th,
td {
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 padding: 1.5rem;
 text-align: left;
 font-size: 1.4rem;
}

th {
 background-color: var(--sub-color-right);
 width: 20%;
 min-width: 140px;
 text-align: center;
}

.info-table-section a {
 text-decoration: underline;
 color: var(--main-color);
}

.history-table th.history-date {
 width: 8%;
 min-width: 90px;
 text-align: center;
 border-right: 1px solid #ddd;
}
.history-table .history-cosme {
border-right: 1px solid #ddd;
}

.merge-cell {
 background-color: #f9f9fa;
 font-weight: 700;
 text-align: center;
}

/* ===========================
  CONTACT・RECRUIT
=========================== */
.contact-box,
.recruit-box {
 background-color: #f9f9fa;
 border: 1px solid var(--main-color);
 padding: 3rem;
 border-radius: 1rem;
 text-align: center;
 max-width: 600px;
 margin: 6rem auto 8rem;
}

.contact-text,
.recruit-text {
 text-align: center;
 margin-bottom: 3rem;
}
.contact-number {
 font-size: 2.4rem;
 font-weight: 700;
 color: var(--main-color);
}
hr {
 margin: 20px 0;
 border: 0;
 border-top: 1px solid var(--main-color);
}


/* ===========================
   フッター
=========================== */
footer {
 background-color: var(--base-color);
 color: #ccc;
 text-align: center;
 padding: 1rem 0;
 font-size: 1rem;
 letter-spacing: 0.04em;
}

footer .copyright {
 color: #fff;
 text-align: center;
 font-size: 1rem;
 margin: 0;
}

/* ===========================
   レスポンシブ対応（画面幅が651〜1079px）
=========================== */
@media (min-width: 651px) and (max-width: 1079px) {
 header {
  height: 100px;
 }
 
 .header-logo {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
 }
 .header-logo img {
  height: 1.8rem;
 }
 .header-container {
  flex-direction: column;
  text-align: center;
 }

 main.container {
  width: 92%;
 }

 .kasou-title {
  padding-top: calc(100px + 5rem);
 }

  /* HOME */
 .home main.container {
  padding-top: 100px;
 }

 .hero .hero-title {
  font-size: 3.4vw;
 }
}


/* ===========================
   レスポンシブ対応（画面幅が650px以下のスマホ向け設定）
=========================== */
@media (max-width: 650px) {
 .br-sp {
  display: inline;
 }

 .table-scroll-note {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: var(--gray-color);
  line-height: 1.6;
 }

 p {
  font-size: 1.4rem;
 }

 header {
  padding: 2rem 0 1rem;
  height: 90px;
 }

 .header-container {
  flex-direction: column;
  text-align: center;
 }

 .header-logo {
  font-size: 1.2rem;
}

.header-logo img {
 height: 1.6rem;
}

 nav ul {
  flex-wrap: wrap;
  justify-content: center;
 }

 nav ul li {
  margin: 0 1rem;
 }

 nav ul li a {
  font-size: 1.1rem;
 }

 main {
  padding: 20px 15px;
  margin-top: 15px;
 }

 .kasou-title {
  padding-top: calc(90px + 3rem);
  padding-bottom: 3rem;
 }

.kasou main.container {
 margin-top: 3rem;
}

  /* HOME */
  .home main.container {
   padding-top: 90px;
  }
 
  .hero {
   padding: 2rem;
  }

  .hero .hero-title {
   font-size: 4.2vw;
   font-weight: 500;
  }

  .section-title {
   font-size: 2rem;
  }

  /* product */
.product-text {
 margin-bottom: 4rem;
 font-size: 1.6rem;
}

.product-list-container {
 display: block;
}

.product-list {
 width: 100%;
}

.product-list li {
 font-size: 1.4rem;
}

.product-list li strong {
 font-size: 1.6rem;
}

.product-list-image {
 display: flex;
 justify-content: space-between;
 width: 100%;
}

.product-list-image img {
 width: 48%;
}

.flow-chart li {
 font-size: 1.4rem;
}

.flow-chart-image li {
 font-size: 1.2rem;
}

 /* ABOUT US */
 .info-table th,
 .info-table td {
  display: block;
  width: 100%;
 }

 .info-table th {
  border-bottom: none;
  padding: 0.5rem 0;
 }
 .info-table td {
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: none;
 }

 /* 沿革テーブルは横スクロールできるようにする */
 .table-responsive {
  width: 100%;
  overflow-x: auto; /* はみ出た分を横スクロール可能に */
  -webkit-overflow-scrolling: touch;
 }

 .history-table {
  min-width: 600px; /* 画面が小さくても形を保つ最小幅 */
  border-collapse: separate;
  border-spacing: 0;
 }

 /* 横スクロール時に年月列を左端に固定 */
 .history-table th.history-date {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--sub-color-right);
  box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.12);
 }

 .history-table thead th.history-date {
  z-index: 2;
 }

 .merge-cell {
font-size: 14px;
 }
}