/* ======================================================
* layout_sp.css
* ------------------------------------------------------
* @media print, screen and (max-width: 767px)
* - Header
* - Main
* - Footer
* - Inquiry Fixed
* - Ebooks Fixed
* Media Queries
* Print

*** Inherit "layout_pc.css" as a reference!! **
====================================================== */
@media print,
screen and (max-width: 767px) {

  /* ------------------------------------------------------
* Header
------------------------------------------------------ */
  .brand-logo a {
    height: 30px;
    width: 126px;
  }

  .brand-logo a img {
    width: 96px;
  }

  #header {
    position: fixed;
    width: 100%;
    height: 64px;
    z-index: 30;
  }

  body.lock #header::after {
    background-color: var(--gray1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
    content: "";
    height: 64px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .header-logo {
    padding-left: 15px;
    z-index: 1;
  }

  .header-logo a {
    display: block;
    width: 230px;
  }

  #header .trigger {
    background-color: var(--main);
    border-radius: 0 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 64px;
    z-index: 1;
    /* 画面右上に固定＆メニューより前面に配置 */
    position: fixed !important;
    top: 0;
    right: 0;
    z-index: 2000 !important;
    /* メニュー(z-index:1000)より前面に指定 */
    cursor: pointer;
  }

  /* --- メニュー開閉時（.is-active）の「✕」アニメーション --- */
  #header .trigger.is-active span {
    background-color: transparent !important;
    /* 中央の線を完全に透明にする */
  }

  #header .trigger span {
    background-color: #FFF;
    display: block;
    height: 2px;
    width: 40px;
    position: relative;
  }

  #header .trigger span,
  #header .trigger span::before,
  #header .trigger span::after {
    content: '';
    display: block;
    height: 2px;
    width: 32px;
    background-color: #FFF;
    /* 通常時の線の色（白） */
    position: absolute;
    transition: all 0.3s ease;
  }

  #header .trigger span::before {
    top: -6px;
  }

  #header .trigger span::after {
    top: 6px;
  }

  #header .trigger.is-active {
    background-color: transparent !important;
  }

  /* 2. 中央の線を消す */
  #header .trigger.is-active span {
    background-color: transparent !important;
  }

  /* --- メニュー開閉時（.is-active）の「✕」アニメーション --- */
  #header .trigger.is-active span {
    background-color: transparent;
    /* 中央の線を消す */
  }

  #header .trigger.is-active span::before {
    top: 0 !important;
    background-color: var(--main) !important;
    /* 線の色を青に変更 */
    transform: rotate(45deg) !important;
  }

  #header .trigger.is-active span::after {
    top: 0 !important;
    background-color: var(--main) !important;
    /* 線の色を青に変更 */
    transform: rotate(-45deg) !important;
  }

  #header .close span {
    background-color: transparent;
  }

  #header .close span::before,
  #header .close span::after {
    content: "";
  }

  #header .close span::before {
    transform: rotate(-45deg);
    top: 0;
  }

  #header .close span::after {
    transform: rotate(45deg);
    top: 0;
  }

  .gnav-area {
    background-color: var(--gray1);
    display: none;
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
    overflow-y: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  #header .gnav-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 1000;
    padding: 80px 24px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    /* メニューが多い場合のスクロール担保 */

    /* 初期状態（非表示） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    /* 縦並びレイアウトの構築 */
    display: flex;
    flex-direction: column-reverse;
    /* メインナビを上、サブナビを下に配置 */
    justify-content: flex-start;
    gap: 32px;
  }

  /* メニュー開く（.is-open 時） */
  #header .gnav-area.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* --- メインナビゲーション（縦並び） --- */
  #header .mainnav-area .gnav_lv1 {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #eee;
  }

  #header .mainnav-area .gnav_lv1 li {
    border-bottom: 1px solid #eee;
  }

  #header .mainnav-area .gnav_lv1 li a {
    display: block;
    padding: 16px 8px;
    font-size: 16px;
    font-weight: bold;
    color: var(--main);
    text-decoration: none;
  }

  #header .mainnav-area .gnav_lv1 li.gnav_contact a {
    color: var(--main);
  }

  /* --- サブナビゲーションエリア全体 --- */
  #header .subnav-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    /* メインメニューとの区切り線 */
  }

  /* 1. 子会社・関連会社リンク（ボタン風装飾） */
  #header .subnav-area .btn-company,
  #header .subnav-area .link-sitemap {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  #header .subnav-area .btn-company:active {
    background-color: #edf2f7;
    border-color: #cbd5e1;
  }

  /* 2. サイトマップリンク */
  #header .subnav-area .link-sitemap {
    display: inline-block;
    padding: 6px 4px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
  }

  #header .subnav-area .link-sitemap:hover {
    color: var(--main);
  }

  /* 3. English 言語切替ボタン（スッキリしたボタン風に） */
  #header .subnav-area #gnav {
    margin-top: 8px;
  }

  #header .subnav-area .lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--main);
    border-radius: 4px;
    color: var(--main);
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  #header .subnav-area .lang a:active {
    background-color: var(--main);
    color: #fff;
  }

  #header .subnav-area .lang ul,
  #header .subnav-area .lang li {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  #header .subnav-area .btn-company,
  #header .subnav-area .link-sitemap,
  #header .subnav-area .lang a {
    display: block;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    padding: 6px 0;
  }

  .current .icon-flag img {
    width: 25%;
    height: auto;
  }


  #drawer .gnav-area {
    height: 100vh;
    height: 100dvh;
  }

  #gnav {
    padding: calc(64px + 16px) 20px 120px;
    position: relative;
  }

  .gnav_lv1 {
    margin-bottom: 16px;
  }

  .gnav_lv1>li>a,
  .gnav_lv1>li>span {
    border-bottom: 1px solid var(--gray2);
    display: flex;
    align-items: flex-end;
    font-size: 2.0rem;
    line-height: 1.6;
    height: 53px;
    padding-bottom: 8px;
  }

  .gnav_lv1>li>a span,
  .gnav_lv1>li>span span {
    margin-left: 0;
  }

  .gnav_lv2 {
    padding: 12px 0 10px;
  }

  .gnav_lv2 li a {
    display: block;
    font-size: 1.8rem;
    line-height: 1.44;
    padding: 12px 0 12px 24px;
    text-decoration: none;
  }

  #gnav li.contact>span {
    display: none;
  }

  #gnav li.contact li a::before {
    display: none;
  }

  #gnav li.contact li:nth-of-type(1) a {
    background-color: var(--main);
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(2rem, 5.64vw, 2.2rem);
    font-weight: var(--fw-mid);
    margin: 0 auto;
    padding: 0;
    height: 70px;
    width: 100%;
    max-width: 350px;
  }

  #gnav li.contact li:nth-of-type(2) {
    margin: 16px auto 0;
    height: 118px;
    width: 100%;
    max-width: 350px;
  }

  #gnav li.contact li:nth-of-type(2) a {
    background-color: var(--main);
    color: #FFF;
    display: flex;
    align-items: center;
    font-size: clamp(1.8rem, 5.12vw, 2.0rem);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    line-height: 1.6;
    height: 100%;
    width: 100%;
    padding: 0 50px 0 clamp(18px, 6.15vw, 24px);
    position: relative;
  }

  #gnav li.contact li:nth-of-type(2) a::after {
    background-image: url("../img/icon/ic_arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 20px;
    width: 30px;
    position: absolute;
    top: 50%;
    right: clamp(15px, 5.15vw, 24px);
    transform: translateY(-50%);
  }

  #gnav li.contact li:nth-of-type(2) a span {
    border-left: 4px solid var(--main);
    padding-left: 20px;
  }

  #gnav li.gnav_contact span {
    margin-left: 0;
  }

  #gnav .lang {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }

  #gnav .lang a ul {
    border-radius: 24px;
    gap: 41px;
    font-size: 2.0rem;
    height: 48px;
    width: 140px;
  }

  .current img {
    height: auto;
    max-width: 26%;
    vertical-align: middle;
  }

  /* ------------------------------------------------------
* Main
------------------------------------------------------ */
  /* ----- page title ----- */
  #page-title {
    padding: 30px 0 17px;
  }

  #page-title h1 {
    font-size: 2.4rem;
    min-height: 70px;
  }

  /* ----- inner ----- */
  .inner {}

  /* ----- breadcrumb ----- */
  #breadcrumb {
    margin: 17px 0 40px 0;
  }

  #breadcrumb ol li {
    padding: 0 12px 0 18px;
  }

  #breadcrumb {
    margin: 12px 0 25px 0;
    padding: 8px 0;
    /* 横スクロール枠の設定 */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* iOSでのなめらかなスクロール */
  }

  /* スクロールバーを非表示にして見た目をスッキリさせる */
  #breadcrumb::-webkit-scrollbar {
    display: none;
  }

  #breadcrumb ol {
    display: flex;
    flex-wrap: nowrap; /* 1行に収めて折り返さない */
    align-items: center;
  }

  #breadcrumb ol li {
    font-size: 0.85rem; /* スマホ用に文字サイズをほんのり小さく調整 */
    padding: 0 8px 0 16px; /* 余白を微調整 */
    flex-shrink: 0; /* 文字が横に潰れるのを防ぐ */
  }

  #breadcrumb ol li:first-child {
    padding-left: 20px; /* HOMEアイコン用の余白 */
  }

  /* 現在地（一番右）を少しだけ目立たせる */
  #breadcrumb ol li:last-child {
    font-weight: bold;
    color: var(--main, #002060);
  }

  .page-title-text {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-align: center;

    text-shadow:
      0 2px 8px rgba(0, 0, 0, .5),
      0 0 15px rgba(0, 0, 0, .3);
  }

  .ba-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a2b6d;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {

  /* 画面幅が中くらいの端末でレイアウトが崩れないよう微調整 */
  .product-card__image-wrapper {
    width: 130px;
  }
}

@media screen and (max-width: 768px) {

  /*トップのメインビジュアル*/
  .mv {
    min-height: 420px;
  }

  .mv-content {
    position: relative;
    z-index: 3;
    /* スライダーより前に表示 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 20px;
    margin-top: 99px;
  }

  .mv-title {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }

  .mv-text {
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .mv-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .mv-btn {
    width: 100%;
    max-width: 280px;
  }

  .top-inner {
    margin-top: 30px;
  }

  .inner_top {
    margin-top: 30px;
  }


  /* スマホ表示では1列にする */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-card {
    padding: 20px;
  }

  .product-card__image-wrapper {
    width: 140px;
  }

  .product-item-container {
    display: block;
    gap: 15px;
  }

  .product-item-card {
    width: calc(80% - 8px);
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .product-item-card__title {
    font-size: 14px;
  }

  .product-item-card__desc {
    font-size: 12px;
  }

  .case-box {
    display: block;
    gap: 60px;
    align-items: flex-start;
  }

  .case-content {
    width: 100%;
  }

  .case-image {
    width: 100%;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* スマホ表示での順番を定義 */
  .product-card__content {
    order: 1;
    /* ① タイトル ＋ テキスト */
  }

  .product-card__image-wrapper {
    order: 2;
    /* ② 画像 */
    width: 100%;
  }

  .product-card__image {
    width: 100%;
    height: auto;
  }

  .product-card__btn {
    order: 3;
    /* ③ ボタン */
    align-self: center;
    /* スマホ表示時のボタン位置（中央寄せ） */
    margin-top: 0;
  }

/* コンテナを縦並びにして隙間を調整 */
  .ba-container {
    flex-direction: column;
    gap: 20px;
  }

  /* カードの高さを固定解除し、コンテンツに合わせて伸びるようにする */
  .ba-card {
    width: 100%;
    height: auto; /* ★固定高さを解除 */
    min-height: auto;
    position: relative;
    overflow: hidden;
  }

  /* テキストエリアの切り抜き解除とレイアウト調整 */
  .ba-content {
    position: relative;
    width: 100%;
    padding: 20px 16px;
    clip-path: none; /* スマホでは斜めカットを解除して文字領域を広げる */
    background-color: rgba(255, 255, 255, 0.95); /* 背景を少し透過 */
    z-index: 2;
  }

  /* リスト全体の装飾 */
  .ba-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* リンク同士の間隔 */
  }

  /* リンクアイテムを押しやすいボタン風にデザイン */
  .ba-list li a {
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 10px 14px;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: var(--main, #1a2b6d);
    text-decoration: none;
    font-weight: bold;
    line-height: 1.4;
    transition: background-color 0.2s ease;
  }

  /* タップした時のフィードバック効果 */
  .ba-list li a:active {
    background-color: #e2e8f0;
  }

  /* 右側画像を背景っぽくうっすら配置 */
  .ba-image {
    width:35%;
    z-index: 3;
  }

  /* 全体のパディングをスマホ用に少し調整 */
  .st-inner {
    padding: 40px 16px;
  }

  /* 上下2段（テキスト上段 / 枠下段）に切り替え */
  .st-container {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    /* 上段と下段の間の余白 */
    text-align: center;
    /* スマホで見やすいよう中央寄せ */
  }

  /* 上段：テキストエリア */
  .st-content {
    width: 100%;
  }

  .st-title {
    margin-bottom: 16px;
  }

  .st-description {
    line-height: 1.7;
  }

  /* 下段：リンク枠エリア（縦並びにする） */
  .st-links {
    flex-direction: column;
    /* 四角カードを縦並びに */
    width: 100%;
    align-items: center;
    /* カードを中央に配置 */
    gap: 16px;
    /* カード同士の上下の隙間 */
  }

  /* 四角カード自体のサイズ調整 */
  .st-card {
    width: 100%;
    /* スマホ画面の幅いっぱいに広げる */
    max-width: 280px;
    /* 広がりすぎないよう最大幅を指定（お好みで調整可） */
    height: 180px;
    /* 縦並び時にすっきり見えるよう高さを少し調整 */
    padding: 16px;
  }

  .display-pc {
    display: none;
  }

  /*会社情報*/
  .company_story_box {
    flex-direction: column;
    gap: 20px;
  }

  /* スマホ時の写真サイズ調整 */
  .company_founder_image {
    width: 100%;
    max-width: 100%;
  }

  /* タイムラインのレスポンシブ配置 */
  .company_timeline_item {
    flex-direction: column;
    /* スマホでは年号と詳細も縦並びに */
    gap: 4px;
  }

  .company_timeline_date {
    width: 100%;
  }

  .company_timeline_detail {
    width: 100%;
  }

  .company_documents_grid {
    flex-direction: column;
    /* 1列の縦並びに切り替え */
    gap: 15px;
  }

  .company_document_card {
    width: 100%;
  }

  .company_documents_grid {
    flex-direction: column;
    /* 1列の縦並びに切り替え */
    gap: 15px;
  }

  .company_document_card {
    width: 100%;
  }

  .company_message_banner {
    padding: 30px 15px;
  }

  .company_message_line {
    font-size: 14px;
    line-height: 1.6;
  }

  .company_number {
    font-size: 18px;
  }

  .company_number_large {
    font-size: 24px;
  }

  .company_pmvv_card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .company_pmvv_icon {
    width: 70px;
    height: 70px;
  }

  .company_pmvv_icon svg {
    width: 32px;
    height: 32px;
  }

  .company_pmvv_title_box {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
  }

  .company_pmvv_text_box {
    font-size: 13px;
  }
}


/* スマホ・タブレット用レスポンシブ */
@media screen and (max-width: 960px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 599px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------
* Footer Contact
------------------------------------------------------ */

.footer-contact h2 {
  font-size: 2.6rem;
  margin-bottom: 40px;
  text-align: center;
}

.footer-contact .link-btn {
  max-width: 308px;
  width: calc(100% - 40px);
}

/* ------------------------------------------------------
* Footer
------------------------------------------------------ */
.footer-nav-wrap {
  flex-direction: column;
  height: auto;
  padding: 60px 20px 45px;
}

#footer-nav {
  row-gap: 30px;
  margin-top: 36px;
}

#footer-nav,
#footer-nav ul {
  flex-direction: column;
}

#footer-nav ul {
  row-gap: 22px;
}

#footer-nav ul li a {
  font-size: 1.5rem;
  line-height: 1.46;
}

#pagetop {
  transform: scale(.85);
}

/* ------------------------------------------------------
* Inquiry Fixed
------------------------------------------------------ */
.inquiry-fix {
  top: auto;
  right: 15px;
  bottom: calc(2% + 65px);
}

.inquiry-fix img {
  width: 60px;
}

/* ------------------------------------------------------
* Ebooks Fixed
------------------------------------------------------ */
.ebooks-fix {
  top: auto;
  right: 15px;
  bottom: 2%;
}

.ebooks-fix img {
  width: 60px;
}

/* ------------------------------------------------------
* footer 420px
------------------------------------------------------ */
@media print,
screen and (max-width: 420px) {}























/* ======================================================
* parts_sp.css
* ------------------------------------------------------
* @media print, screen and (max-width: 767px)
* - headline
* - headline2
* - headline3
* - headline4
* - layout pattern
* - link
* - link-btn
* - Back
* - ul list
* - ol list
* - dl
* - table
* - news list
* - accordion
* - contact-form
* - Blogs & Topics
* - about us
* - facility
* - service
* - request-catalog
*** Inherit "parts_pc.css" as a reference ! ! **
====================================================== */
@media print,
screen and (max-width: 767px) {

  /* ---------------------------------------
* lead
--------------------------------------- */
  .lead {
    font-size: 1.8rem;
    text-align: left;
  }

  /* ------------------------------------------------------
* headline
------------------------------------------------------ */
  .headline {
    font-size: 2.6rem;
    margin-bottom: 30px;
    text-align: left;
  }

  .sub_eng {
    text-align: left;
    margin-top: -50px;
    font-size: 1.6rem;
  }

  .headline::after {
    left: 0%;
    transform: translateX(0%);
  }

  /* ------------------------------------------------------
* headline2
------------------------------------------------------ */
  .headline2 {
    font-size: 2.0rem;
    line-height: 1.6;
  }

  *:not(.headline)+.headline2 {
    margin-top: 25px;
  }

  /* ------------------------------------------------------
* headline3
------------------------------------------------------ */
  .headline3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  *:not(.headline):not(.headline2)+.headline3 {
    margin-top: 25px;
  }

  .headline2+.headline3 {
    margin-top: 15px;
  }

  /* ------------------------------------------------------
* headline4
------------------------------------------------------ */
  .headline4 {
    margin: 20px 0 10px 0;
  }

  /* ------------------------------------------------------
* layout pattern
------------------------------------------------------ */
  .right-col,
  .left-col {
    float: none;
  }

  [class*="pattern1-"],
  [class*="pattern2-"],
  [class*="pattern3-"],
  [class*="pattern4-"] {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.5em;
    margin-bottom: 2em;
  }

  [class*="pattern"] [class*="col"] {
    width: 100%;
  }

  [class*="col"] figure {
    text-align: center;
  }

  [class*="col"] figure img {
    height: auto;
    width: 85%;
  }

  figure img {
    width: 85%;
    height: auto;
    vertical-align: middle;
}

  /* ------------------------------------------------------
* link
------------------------------------------------------ */
  .link-wrap {
    margin-top: 30px;
  }

  .link-inner::after {
    background-size: 15.3px;
  }

  /* ------------------------------------------------------
* link-btn
------------------------------------------------------ */
  .link-btn a {
    min-height: 40px;
    min-width: 184px;
  }

  /* ------------------------------------------------------
* ul list
------------------------------------------------------ */

  /* ------------------------------------------------------
* ol list
------------------------------------------------------ */

  /* ------------------------------------------------------
* dl
------------------------------------------------------ */
  dl dt {}

  /* ------------------------------------------------------
* table
------------------------------------------------------ */
  table.table th,
  table.table td {
    padding: .7em;
  }

  .spec-table {
    /* ★ここがポイント：テーブル全体の最小幅を指定し、文字が潰れるのを防ぎます */
    min-width: 650px;
    font-size: 13px;
  }

  .spec-table thead th,
  .spec-table tbody td {
    padding: 10px 12px;
    /* 勝手な縦伸び・折り返しを防ぐ */
    white-space: normal;
  }

  /* セルのテキストが変に1文字ずつ改行されるのを防ぐ */
  .spec-table td:nth-child(1),
  .spec-table td:nth-child(2) {
    white-space: nowrap;
  }

  /* ------------------------------------------------------
* news list
------------------------------------------------------ */
  .info-area ul li {
    flex-wrap: wrap;
    padding: 1.3em .7em 1.8em;
  }

  .info-area .date-cate {
    align-items: center;
  }

  .info-area ul li>div {
    margin: 10px 0 0 0;
    padding: 0;
    width: 100%;
    top: 0;
  }

  .info-area ul li .title {
    line-height: 1.64;
    padding: 0;
    width: 100%;
    top: 0;
  }

  .btn-group {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* ------------------------------------------------------
* news detail
------------------------------------------------------ */
  .news-detail-area {
    margin-bottom: 45px;
  }

  .news-detail-area h2 {
    font-size: 2.6rem;
    line-height: 1.38;
    margin-bottom: 1.3em;
    padding: 22px 0 24px;
  }

  .news-detail-area *:not(.link):not(.link-inner) a {
    color: #00A1E0;
    text-decoration: underline;
  }

  .news-detail-area p {
    line-height: 1.65;
  }

  .news-detail-area h3 {
    font-size: 1.8rem;
  }

  .news-detail-area :not(h2)+h3 {
    margin-top: 1.8em;
  }

  .news-detail-area h4 {
    font-size: 1.6rem;
  }

  .news-detail-area table.table th {
    padding: .7em 1em;
  }

  .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 80%;
    height: 54px;
    background-color: var(--main);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0px;
    box-sizing: border-box;
    padding: 0 20px;
    transition: all 0.3s ease;
    margin: 0 auto;
  }

  #service .accordion .scroll-box table {
    white-space: inherit;
    width: 190%;
  }

  /* ------------------------------------------------------
* contact-form
------------------------------------------------------ */
  .form-area div.row {
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100vw;
  }

  .form-area div.cell1,
  .form-area div.cell2 {
    width: 100%;
    min-height: auto;
  }

  .form-area div.cell1 {
    background-color: transparent;
    font-weight: var(--fw-bold);
    padding: 1.4em 0 0;
    font-size: 15px;
  }

  .form-area div.cell2 {
    padding: 1.4em 0;
  }

  .form-area div.cell1 br {
    display: none;
  }

  .form-area div.cell1 .required {
    font-size: var(--fz-sp);
    font-weight: var(--fw-normal);
    line-height: 23px;
    margin-left: 1em;
    width: 52px;
    position: relative;
    top: -1px;
    right: auto;
  }

  .form-area input[type="text"],
  .form-area input[type="email"],
  .form-area input[type="tel"],
  .form-area textarea {
    width: 100%;
    font-size: 14px;
    padding: .2em .9em 0;
  }

  .form-area textarea {
    min-height: 118px;
  }

  .form-area ul.form-checkbox li,
  .form-area ul.form-list li {
    min-width: calc(100% / 2);
  }

  .form-area select {
    border-radius: 0;
    min-width: inherit;
    max-width: inherit;
    width: 100%;
  }

  .form-area input.text-s {
    width: calc((100% - 15px) / 2);
  }

  .form-area p.caution {
    font-size: 14px !important;
  }

  .form-btn button {
    font-size: 15px;
  }

  .form-btn.btn-confirm {
    height: 70px;
    width: 100%;
    max-width: 300px;
  }

  .form-btn.btn-confirm button {
    font-size: 17px;
  }

  .form-btn.btn-confirm button span {
    font-size: 12px;
  }

  .form-btn-area .form-btn {
    height: 50px;
    margin: 0 10px 0 0;
    width: calc((100% - 10px) / 2);
    max-width: 325px;
  }

  .form-btn button::before {
    height: 26px;
    width: 26px;
    right: 15px;
  }

  .form-btn button::after {
    right: 26px;
  }

  .form-btn button.btn-send {
    padding: 0 10px 0 0;
  }

  .form-btn button.btn-back {
    padding: 0 0 0 10px;
  }

  .form-btn button.btn-back::before {
    left: 15px;
  }

  .form-btn button.btn-back::after {
    left: 26px;
  }

  .form-area .error-box p {
    font-size: 16px;
    text-align: left;
    line-height: 1.8;
    padding: 1.1em 1.3em;
  }

  /* ------------------------------------------------------
* accordion
------------------------------------------------------ */
  dl.accordion dt {
    font-size: 2.0rem;
    padding-right: 30px;
  }

  dl.accordion dt .icon {
    top: 27px;
    right: 0;
  }

  dl.accordion dd {
    margin-top: -4px;
    padding: 0 0 24px;
  }

  dl.accordion .box.bgc-gray {
    padding: 10px;
  }

  /* ------------------------------------------------------
* anchor-link
------------------------------------------------------ */
  .anchor-link li {
    height: auto;
    min-height: 56px;
    width: 100%;
  }

  .anchor-link li::before {
    height: 1px;
    width: 88.5%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .anchor-link li:first-of-type::before {
    display: none;
  }

  .anchor-link li a {
    justify-content: flex-start;
    font-size: 1.8rem;
    padding: 15px 20px 14px;
  }

  /* ------------------------------------------------------
* Ebooks
------------------------------------------------------ */
  #ebooks .headline {
    font-size: 2.6rem;
    margin-left: -20px;
    margin-right: -20px;
  }

  .ebooks-pattern {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ------------------------------------------------------
* Request for materials
------------------------------------------------------ */
  .request-pattern .col-form {
    padding: 30px 20px 50px;
    margin-top: 25px;
  }

  #ebooks-thanks h3 {
    font-size: 2.3rem;
  }

  #request-email {
    font-size: 1.6rem;
    margin: 35px 0 45px;
  }

  #ebooks-download .download-btn,
  #form .download-btn {
    margin: 25px 0 33px;
  }

  .link-btn.download-btn a {
    font-size: 1.7rem;
    min-width: 250px;
  }

  .download-btn .size {
    font-size: 1.4rem;
  }

  /* ------------------------------------------------------
* Blogs & Topics
------------------------------------------------------ */
  .blogs-list:not(.slider) {
    row-gap: 40px;
    margin-right: 0;
  }

  .blogs-list:not(.slider) .blog-box {
    padding: 0;
  }

  .blogs-list .blog-box {
    width: 100% !important;
  }

  .blog-box a {
    padding-bottom: 35px;
  }

  .blog-box a>div {
    padding: 20px 0;
  }

  .blog-box [class*="icon-"] {
    font-size: 1.6rem;
    height: 35px;
    width: 90px;
    top: 20px;
    left: -15px;
  }

  .blog-box figure {
    height: clamp(100px, 49.6vw, 260px);
    max-height: inherit;
  }

  .blog-box .date-cate .date {
    font-size: 1.4rem;
    margin-right: 1em;
  }

  .blog-box .date-cate .cate {
    width: 115px;
  }

  .blog-box .title {
    margin-top: 1.3em;
  }

  .blog-box .read {
    font-size: var(--fz-sp) !important;
    bottom: 10px;
  }

  .pagenation {
    margin-top: 40px;
  }

  .pagenation ul li a {
    font-size: 1.8rem;
  }

  /* ------------------------------------------------------
* about us
------------------------------------------------------ */
  #about .logo-regenet {
    margin: 0 auto;
    width: 86.5%;
  }

  #about .logo-jtec {
    margin: 0 auto;
    width: 41.7%;
  }

  #about .result-wrap .inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #about .result-wrap .pattern1-1 {
    row-gap: 40px;
  }

  #about .result-wrap .col {
    padding: 0 20px 20px;
  }

  #about .result-wrap h4 {
    font-size: 1.8rem;
    line-height: 2.22;
    margin-bottom: 20px;
    max-width: 240px;
  }

  /* ------------------------------------------------------
* facility
------------------------------------------------------ */
  #facility h2 {
    font-size: 2.0rem;
    line-height: 1.6;
  }

  .facility-map {
    margin-bottom: 50px;
    padding-top: 80px;
  }

  .facility-map figure {
    max-width: 100%;
    margin-bottom: -65px;
    text-align: center;
  }

  .facility-anchor {
    width: calc(100% - 20px);
    max-width: 330px;
    position: relative;
    top: 0 !important;
    left: inherit !important;
    right: inherit !important;
  }

  .facility-anchor+.facility-anchor {
    margin-top: 15px;
  }

  .facility-anchor .head {
    font-size: 1.8rem;
    margin-bottom: 9px;
    min-width: inherit;
  }

  .facility-anchor p {
    font-size: 1.4rem;
  }

  .facility-anchor p span {
    font-size: 1.2rem;
  }

  .facility-anchor a {
    padding: 15px 30px 15px 20px;
  }

  .facility-anchor .arrow {
    height: 48px;
    width: 48px;
    right: -20px;
  }

  .facility-dtl h3 {
    margin-bottom: 20px;
  }

  /* ------------------------------------------------------
* service
------------------------------------------------------ */
  .service-list .col dt {
    font-size: 2.0rem;
    min-height: inherit;
  }


  #service .accordion .scroll-box table th,
  #service .accordion .scroll-box table td {
    width: 360px !important;
  }

  .catalog-bnr {
    height: auto;
  }

  .catalog-bnr .inner {
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 300px;
  }

  .catalog-bnr h2 {
    font-size: 2.6rem;
    padding-left: 39px;
    margin-bottom: 30px;
  }

  .catalog-bnr .link-btn {
    font-size: 1.6rem;
    width: 100%;
  }

  .catalog-bnr .link-btn a {
    height: 50px;
  }

  .catalog-bnr .link-btn a::after {
    right: 6px;
  }

  /* ------------------------------------------------------
* request-catalog
------------------------------------------------------ */
  #catalog h2 {
    text-align: left;
    margin-bottom: 40px;
  }

  #catalog table.form-request.confirmation tr {
    display: block;
  }

  #catalog table.form-request.confirmation tr th,
  #catalog table.form-request.confirmation tr td {
    width: 100%;
    padding: 0;
  }

  #catalog table.form-request.confirmation tr th {
    padding-top: 18px;
    padding-bottom: 5px;
  }

  #catalog table.form-request.confirmation tr td {
    padding-bottom: 18px;
  }

  #catalog table.form-request.confirmation .form-table-ttl {
    display: block;
  }

  #catalog #form-confirmation .form-btn button {
    max-width: calc((100% - 24px) / 2);
  }

  #catalog .form-btn button+button {
    margin-left: 20px;
  }

  #catalog .link-btn.download-btn a {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .solution-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

    .strengths-container {
    flex-direction: column;
  }
  
  .strength-center-circle {
    margin: 10px 0;
  }

  .issues-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

    .flex-intro-area {
    flex-direction: column;
  }
  
  .equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-flow {
    grid-template-columns: 1fr; /* スマホでは縦並びに切り替え */
    gap: 20px;
  }

  .step-badge-arrow {
    clip-path: none; /* スマホでは矢印カットを解除して見やすく */
    border-radius: 4px;
  }

  /* ==========================================
   PC用レイアウトスタイル
   ========================================== */

  /* 各ブロックの間隔 */
  .test-section {
    margin-bottom: 50px;
  }

  /* 大見出し（黒の太字） */
  .main-heading {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  /* 画像とテキストを横並びにするコンテナ */
  .content-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    /* 画像とテキストの隙間 */
  }

  /* 左側：画像領域 */
  .image-box {
    width: 45%;
    /* 全体の横幅に対する画像の割合 */
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* うっすら影を付ける */
  }

  /* 画像自体のサイズ指定 */
  .image-box img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 赤枠が必要な画像用のクラス */
  .image-box.red-border {
    border: 2px solid #ff0000;
  }

  /* 右側：テキスト領域 */
  .text-box {
    width: 55%;
    color: #333333;
  }

  /* 小見出し（》付き） */
  .sub-heading {
    font-size: 20px;
    font-weight: normal;
    text-decoration: underline;
    /* 下線 */
    margin-top: 0;
    margin-bottom: 12px;
  }

  /* 見出しの「》」部分 */
  .sub-heading::before {
    content: "》";
    margin-right: 5px;
  }

  /* 説明テキスト */
  .description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 箇条書き（✓付き） */
  .check-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px 0;
  }

  .check-list li {
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    padding-left: 24px;
    /* チェックマーク分の余白 */
    margin-bottom: 8px;
  }

  /* 箇条書きの「✓」部分 */
  .check-list li::before {
    content: "✓";
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 補足用（カッコ書き）のテキスト */
  .check-list .note {
    font-size: 14px;
    color: #555555;
  }

  /* 特徴テキストエリア */
  .feature-box {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .feature-label {
    margin: 0;
  }

  .feature-text {
    margin: 0;
    padding-left: 1em;
    /* 少しインデント */
  }

  /* ==========================================
   PC用レイアウトスタイル
   ========================================== */

  /* 各ブロックの間隔 */
  .test-section {
    margin-bottom: 50px;
  }

  /* 大見出し（黒の太字） */
  .main-heading {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  /* 画像とテキストを横並びにするコンテナ */
  .content-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    /* 画像とテキストの隙間 */
  }

  /* 左側：画像領域 */
  .image-box {
    width: 45%;
    /* 全体の横幅に対する画像の割合 */
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* うっすら影を付ける */
  }

  /* 画像自体のサイズ指定 */
  .image-box img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 赤枠が必要な画像用のクラス */
  .image-box.red-border {
    border: 2px solid #ff0000;
  }

  /* 右側：テキスト領域 */
  .text-box {
    width: 55%;
    color: #333333;
  }

  /* 小見出し（》付き） */
  .sub-heading {
    font-size: 20px;
    font-weight: normal;
    text-decoration: underline;
    /* 下線 */
    margin-top: 0;
    margin-bottom: 12px;
  }

  /* 見出しの「》」部分 */
  .sub-heading::before {
    content: "》";
    margin-right: 5px;
  }

  /* 説明テキスト */
  .description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 箇条書き（✓付き） */
  .check-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px 0;
  }

  .check-list li {
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    padding-left: 24px;
    /* チェックマーク分の余白 */
    margin-bottom: 8px;
  }

  /* 箇条書きの「✓」部分 */
  .check-list li::before {
    content: "✓";
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 補足用（カッコ書き）のテキスト */
  .check-list .note {
    font-size: 14px;
    color: #555555;
  }

  /* 特徴テキストエリア */
  .feature-box {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .feature-label {
    margin: 0;
  }

  .feature-text {
    margin: 0;
    padding-left: 1em;
    /* 少しインデント */
  }

  /* ==========================================
   PC用レイアウトスタイル
   ========================================== */

  /* 各ブロックの間隔 */
  .test-section {
    margin-bottom: 50px;
  }

  /* 大見出し（黒の太字） */
  .main-heading {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  /* 画像とテキストを横並びにするコンテナ */
  .content-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    /* 画像とテキストの隙間 */
  }

  /* 左側：画像領域 */
  .image-box {
    width: 45%;
    /* 全体の横幅に対する画像の割合 */
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* うっすら影を付ける */
  }

  /* 画像自体のサイズ指定 */
  .image-box img {
    width: 100%;
    height: auto;
    display: block;
  }


  /* 右側：テキスト領域 */
  .text-box {
    width: 55%;
    color: #333333;
  }

  /* 小見出し（》付き） */
  .sub-heading {
    font-size: 20px;
    font-weight: normal;
    text-decoration: underline;
    /* 下線 */
    margin-top: 0;
    margin-bottom: 12px;
  }

  /* 見出しの「》」部分 */
  .sub-heading::before {
    content: "》";
    margin-right: 5px;
  }

  /* 説明テキスト */
  .description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 箇条書き（✓付き） */
  .check-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px 0;
  }

  .check-list li {
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    padding-left: 24px;
    /* チェックマーク分の余白 */
    margin-bottom: 8px;
  }

  /* 箇条書きの「✓」部分 */
  .check-list li::before {
    content: "✓";
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
  }

  /* 補足用（カッコ書き）のテキスト */
  .check-list .note {
    font-size: 14px;
    color: #555555;
  }

  /* 特徴テキストエリア */
  .feature-box {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .feature-label {
    margin: 0;
  }

  .feature-text {
    margin: 0;
    padding-left: 1em;
    /* 少しインデント */
  }

  /* -------------------------------------------------- */
  /* 受託試験 */
  /* -------------------------------------------------- */

  /* 横並びから縦並びに変更 */
  .step-flow {
    flex-direction: column;
    gap: 20px;
    /* 上下のステップ同士の間隔 */
  }

  /* 各カードの幅を100%に広げる */
  .step-item {
    width: 100%;
  }

  /* 矢印の形を「下向き」に変更 */
  .step-header {
    padding: 10px 0 15px 0;
    margin-bottom: 5px;
    /* clip-pathで下側が突起した矢印の形を作成 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  }

  /* ボックス内のタイトルの余白調整 */
  .step-title {
    font-size: 1rem;
    min-height: auto;
    padding: 8px 5px;
    margin-bottom: 12px;
  }

  /* リストと注記のフォントサイズ調整 */
  .step-list {
    font-size: 0.9rem;
  }

  .step-note {
    font-size: 0.85rem;
  }

  /* -------------------------------------------------- */
  /* モータテストのソリューション */
  /* -------------------------------------------------- */

  /* 全体の余白調整 */
  .bench-container {
    padding: 0 5px;
  }

  /* 見出しの文字サイズ調整 */
  .bench-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  /* 画像ギャラリー：3列から縦1列に変更 */
  .bench-gallery {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  /* テーブルのレスポンシブ設定（横スクロール対応） */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOSでのスクロールをなめらかに */
    margin-bottom: 20px;
    border: 1px solid #333333;
    /* スクロール領域の外枠 */
  }

  .bench-table {
    min-width: 600px;
    /* 表が潰れないよう最小横幅を確保 */
    font-size: 13px;
  }

  .bench-table th,
  .bench-table td {
    padding: 6px 4px;
  }

  /* 注記・諸元エリアの調整 */
  .bench-info {
    font-size: 13px;
  }

  .spec-list li span {
    width: 80px;
    /* スマホ用にラベル幅を少し詰める */
  }

  .motor-bench-item {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 35px;
  }

  /* 左右幅を100%に広げる */
  .motor-bench-img,
  .motor-bench-text {
    width: 100%;
  }

  /* 文字サイズの微調整 */
  .bench-sub-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .bench-check-list li,
  .bench-feature {
    font-size: 14px;
  }

  /* -------------------------------------------------- */
  /* 製品・サービス　製品導入までのプロセス */
  /* -------------------------------------------------- */

  /* 上段画像を縦並びに変更 */
  .structure-top-images {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
  }

  /* 下段コンテンツを縦並びに変更 */
  .structure-content {
    display: block;
    align-items: center;
    gap: 20px;
  }

  .structure-text-box {
    width: 100%;
  }

  /* 文字サイズの調整 */
  .structure-title {
    font-size: 16px;
  }

  .structure-desc {
    font-size: 14px;
    padding-left: 0;
    /* スマホではインデントを外して広く使う */
    margin-top: 4px;
  }

  /* イラスト画像のサイズ調整 */
  .structure-illust-box {
    width: 160px;
  }

  /* -------------------------------------------------- */
  /* 製品・サービス　エンジニアリングソリューション */
  /* -------------------------------------------------- */
  .eng-sol-container {
    flex-direction: column;
    gap: 30px;
  }

  .system-chart__box {
    font-size: 12px;
    padding: 8px 4px;
    min-height: 48px;
  }

  .spec-table th,
  .spec-table td {
    padding: 6px 8px;
    /* パディング（余白）を狭くして省スペース化 */
    font-size: 13px;
    /* スマホで見やすいように文字サイズを微調整 */
  }

  .spec-table tbody th {
    width: 45%;
    /* スマホ画面での項目名幅の割り当て調整 */
  }

  /*
  .spec-table tbody td {
    width: 55%;
  }
    */

  /* ==========================================
   社長挨拶セクション（SP用）
   ========================================== */
  .president-greeting-container {
    flex-direction: column-reverse;
    /* スマホでは写真を上にする場合は column-reverse、下に移動する場合は column */
    gap: 24px;
  }

  .greeting-profile-box {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .greeting-text-box {
    font-size: 14px;
    line-height: 1.7;
  }

  .greeting-text-box p {
    margin-bottom: 16px;
  }

  .profile_2col_container {
    flex-direction: column;
    gap: 35px;
  }

  .profile_left_box,
  .profile_right_box {
    width: 100%;
  }

  .info_row {
    flex-direction: column;
    margin-bottom: 14px;
  }

  .info_row dt {
    width: 100%;
    margin-bottom: 2px;
  }

  .company_timeline_item {
    flex-direction: column;
    margin-bottom: 16px;
  }

  .company_timeline_date {
    width: 100%;
    margin-bottom: 2px;
  }

  .company-info-table {
    font-size: 14px;
  }

  .company-info-table th,
  .company-info-table td {
    padding: 10px 10px;
  }

  .company-info-table th {
    width: 130px;
    /* スマホ画面用に項目幅を少し狭める */
  }

  .advisor-intro-text {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px;
  }

  .advisor-item {
    flex-direction: column;
    padding: 15px 0;
  }

  .advisor-label {
    width: 100%;
    margin-bottom: 6px;
  }

  .colon {
    display: none;
    /* スマホ表示時はコロンを非表示にしてスッキリ見せる */
  }

  .advisor-name {
    font-size: 14px;
  }

  .advisor-link {
    font-size: 13px;
  }

  .organization-main {
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
  }

  .organization-image {
    width: 100%;
  }

  .organization-text {
    font-size: 14px;
    line-height: 1.7;
  }

  .recruit-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 30px;
    font-size: 15px;
  }

  .map-content-wrapper {
    flex-direction: column;
    gap: 25px;
  }

  .map-image-box,
  .base-list {
    width: 100%;
  }

  .map-image-box {
    position: static;
    /* スマホでは固定解除 */
  }

  .base-card {
    padding: 14px 16px;
  }

  .base-title {
    font-size: 14px;
  }

  .base-address,
  .base-contact {
    font-size: 13px;
  }

  .headquarters-container {
    flex-direction: column;
    gap: 30px;
  }

  .headquarters-left,
  .headquarters-right {
    width: 100%;
  }

  .headquarters-sub-title {
    font-size: 18px;
  }

  .headquarters-desc {
    font-size: 14px;
    line-height: 1.7;
  }

  /* スマホでは左下の画像2枚を縦並びまたは隙間詰め調整 */
  .headquarters-sub-images {
    gap: 15px;
  }

  .sub-image-card .img-box img {
    height: 120px;
  }

  .main-img-caption {
    text-align: center;
    /* スマホではキャプションを中央揃えに */
  }

  .synergy-lead-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .synergy-card-wrapper {
    flex-direction: column;
    gap: 35px;
  }

  .card-header .jp-title {
    font-size: 16px;
  }

  .synergy-list li {
    font-size: 14px;
  }

  .card-img-box img {
    max-height: 180px;
  }

  .record-lead-text {
    font-size: 15px;
  }

  /* アイコンを3列並びに変更 */
  .field-icon-item {
    width: calc(100% / 3 - 10px);
  }

  .record-main-title {
    font-size: 20px;
    border-left-width: 6px;
  }

  /* 5カラムを縦1列に変更 */
  .record-columns-wrapper {
    flex-direction: column;
    gap: 25px;
  }

  .record-column {
    width: 100%;
  }

  .total-summary {
    text-align: center;
    margin-top: 20px;
  }

  .project-support-main-title {
    font-size: 18px;
  }

  .project-support-sub-badge {
    font-size: 15px;
    padding: 6px 20px;
  }

  .project-support-description {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 6ステップを縦1列に変更 */
  .project-support-steps-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .project-support-step-card {
    width: 100%;
  }

  .project-support-step-header {
    font-size: 16px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    /* スマホ用は下向き矢印 */
    padding: 12px 10px 18px 10px;
  }

  .project-support-bottom-message {
    font-size: 16px;
  }

  .synergy-card-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .synergy-card-wrapper .synergy-card:first-child {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 40px;
  }

  .synergy-card-wrapper .synergy-card:last-child {
    padding-left: 0;
  }

  .card-header-business .jp-title {
    font-size: 18px;
  }

  .synergy-list li {
    font-size: 14px;
  }

  .record-table-row {
    flex-direction: column;
    padding: 15px 0;
  }

  .record-cat-label {
    width: 100%;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .record-cat-content {
    font-size: 14px;
    line-height: 1.6;
  }

  .process-sub-title {
    font-size: 17px;
  }

  .process-lead-desc {
    font-size: 14px;
    line-height: 1.6;
  }

  /* カード内要素を縦並びに変更 */
  .process-card-item {
    flex-direction: column;
    padding: 20px 15px;
    gap: 15px;
    text-align: center;
  }

  .card-num-box,
  .card-img-box {
    width: 100%;
    text-align: center;
  }

  .step-num {
    font-size: 38px;
  }

  .step-name {
    font-size: 16px;
  }

  .card-text-box {
    font-size: 13.5px;
    text-align: left;
  }

  .process-bottom-text {
    font-size: 14px;
  }

  .record-lead-text {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px;
  }

  /* ==========================================
   パートナー募集
   ========================================== */

  /* スマホでは横3列×4行に変更 */
  .field-icon-item {
    width: calc(100% / 3 - 10px);
  }

  .field-icon-item img {
    width: 70px;
    /* スマホ用にサイズを少し小さく調整 */
    height: 70px;
  }

  .field-icon-item p {
    font-size: 12px;
  }

  .history-timeline {
    padding-left: 15px;
  }

  .history-item {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .history-item::before {
    left: -20px;
  }

  .history-year {
    width: 100%;
    margin-bottom: 8px;
    font-size: 16px;
  }

  .history-content {
    font-size: 14px;
    line-height: 1.7;
  }

  .history-images {
    gap: 10px;
  }

  .history-images .img-box {
    width: 50%;
    max-width: none;
  }

  /* サブタイトルの調整 */
  .partner-sub-title {
    font-size: 17px;
    margin: 18px 0 20px 0;
  }

  /* 行のレイアウトを「縦並び」に強制変更 */
  .partner-info-row {
    flex-direction: column;
    /* 項目と内容を上下縦並びにする */
    align-items: flex-start;
    padding: 16px 0;
  }

  /* 上側：項目名（ラベル）の調整 */
  .partner-label {
    width: 100%;
    /* 横幅をいっぱいに広げて改行させる */
    font-size: 15px;
    font-weight: bold;
    color: #0d2a6b;
    /* スマホ表示時は項目名を青色にして視認性をアップ */
    margin-bottom: 8px;
    /* 下の内容との間に余白を作る */
  }

  /* 下側：内容エリアの調整 */
  .partner-detail {
    width: 100%;
    font-size: 14px;
    line-height: 1.6;
  }

  /* リストと注意書きのスマホ用微調整 */
  .partner-bullet-list {
    margin-bottom: 12px;
  }

  .partner-bullet-list li {
    margin-bottom: 4px;
  }

  .partner-note-box {
    font-size: 13px;
    margin-top: 10px;
  }

  .core-tech-content {
    flex-direction: column;
    gap: 40px;
  }

  .core-tech-left,
  .core-tech-right {
    width: 100%;
  }

  .core-tech-diagram {
    flex-direction: column;
    gap: 20px;
  }

  .core-circle-box {
    width: 180px;
  }

  .core-cards-box {
    width: 100%;
  }

  /* スマホではアイコンを2列に調整 */
  .specimen-item {
    width: calc(100% / 2 - 10px);
  }

  .specimen-item img {
    width: 60px;
    height: 60px;
  }

  .commitment-banner {
    height: 180px;
    padding: 0 25px;
  }

  .commitment-banner-content {
    gap: 15px;
  }

  .commitment-banner-title {
    font-size: 22px;
  }

  .commitment-banner-btn {
    font-size: 13.5px;
    padding: 8px 18px;
    min-width: 150px;
  }

  .recruit-header-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .recruit-summary {
    font-size: 15px;
    padding: 14px 16px;
  }

  .recruit-content {
    padding: 20px 15px;
  }

  .recruit-table-row {
    flex-direction: column;
  }

  .recruit-table-label {
    width: 100%;
    margin-bottom: 4px;
  }

  .recruit-flow-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .recruit-flow-btn {
    width: 100%;
    height: 40px;
  }

  .recruit-flow-arrow {
    margin: 8px auto;
  }

  /* ==========================================
   カタログダウンロード
   ========================================== */

  .catalog-grid {
    gap: 15px 2%;
  }

  .catalog-card {
    width: 49%;
    /* スマホでは2列配置 */
  }

  .catalog-img-box-company {
    width: 70%;
    margin: 0 auto;
    height: 110px;
    background-color: #f0f0f0;
    margin-bottom: 15px;
    overflow: hidden;
  }

  .catalog-request-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .catalog-contact-btn {
    width: 100%;
  }

  .p-dl-content {
    flex-direction: column;
  }

  .p-dl-card {
    margin-bottom: 20px;
  }

  .p-dl-cards {
    display: block;
    width: 100%;
    justify-content: center;
  }

  .p-dl-table-wrapper {
    width: 100%;
  }

  .p-dl-container--no-table .p-dl-catalog-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .p-dl-container--no-table .p-dl-catalog-card,
  .p-dl-container--no-table .p-dl-catalog-card--wide {
    width: 100%;
    max-width: 360px;
    /* スマホ時の最大サイズ制限 */
  }

  /* ==========================================
   こだわり
   ========================================== */

  .rd-image-item {
    /* 幅を固定または調整する場合はここを変更（例: 2列にしたい場合は flex: 0 0 calc(50% - 10px); ） */
    width: 250px;
    max-width: 100%;
  }

  /* ==========================================
   採用
   ========================================== */
  .recruit-nav-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .recruit-nav-card {
    width: 100%;
  }

  .recruit-btn-container {
    flex-direction: column;
    /* 縦並びに切り替え */
    align-items: center;
    gap: 15px;
  }

  .recruit-btn {
    max-width: 100%;
    /* スマホでは横幅いっぱいに広げる */
  }

  /*新卒*/
  .recruit-table th {
    width: 100%;
    display: block;
  }

  .recruit-table td {
    display: block;
  }

  .flow-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .step-badge {
    width: 100%;
    height: 38px;
  }

  .flow-arrow {
    margin: 8px auto;
  }

  .hrm-middle-grid {
    grid-template-columns: repeat(2, 1fr);
    /* スマホでは2列×2行に切り替え */
    gap: 20px 10px;
  }

  .career-top-flex {
    flex-direction: column;
    /* スマホでは縦並びに切り替え */
    gap: 20px;
  }

    .eval-layer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .layer-label {
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
  }
  
  .layer-content {
    width: 100%;
  }

}