/* ------------------------------------------------------------------共通設定 */
@charset "UTF-8";

:root {
    --primary-color: #c30d23;
    --primary-color-dark: #be966a;
    --text-color: #666;
    --background-color: #ffffff;
    --section-bg-color: #eaeaea;
    --white: #ffffff;
    --overlay-color: rgba(249, 153, 153, 0.4);


    --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --font-tc: 'Noto Sans TC', sans-serif;
}




  /* 中国語フォントスタックの再定義 */
  :root {
    --font-sc: 
      'Noto Sans SC Variable',  /* 可変フォント優先 */
      'Noto Sans SC',
      system-ui,                /* システムUIフォント継承 */
      'PingFang SC',
      'Microsoft YaHei',
      sans-serif;
  }
  
  /* 言語指定の詳細度向上 */
  html[lang^="zh"] body {
    font-weight: 400 !important; /* 通常ウェイトで強制統一 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  /* gTranslateの言語切り替え専用 */
  body.gtranslate-lang-zh-CN,
  body.gtranslate-lang-zh-TW {
    font-family: var(--font-sc) !important;
    font-variation-settings: 'wght' 400; /* 可変フォント用 */
  }
  
  /* 中国語特有の文字調整 */
  @supports font-variant-ligatures(common-ligatures) {
    [lang|="zh"] {
      font-variant-ligatures: common-ligatures;
    }
  }




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: var(--font-jp); /* 変数を使用して統一 */
    color: var(--text-color);
    background-color: var(--white);
    font-size: 14px;
    font-weight: 300; 
    line-height: 1.7; 
    letter-spacing: 0.03em; 
}

/* ダークモードでも白背景 */
@media (prefers-color-scheme: dark) {
    body {
      background-color: var(--white) 
    }
  }


a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

a:hover {
    opacity: 0.6;
}

li{
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
  }


.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ボタンスタイル */
.text-center {
    text-align: center;
    margin-top: 40px ;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    font-weight: 300;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);

    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(-2px);
}

.btn-outline {
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--white);
    font-weight: 400;
    transition: all 0.3s ease;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);

}

.btn-outline:hover {
    transform: translateY(-2px);
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--white);
}

.btn-small {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--primary-color-dark);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
    border: 2px solid var(--primary-color-dark);
}

.btn-small:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.center {
    text-align: center;
    margin: 30px 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー */

.header {
    background-color:var(--primary-color);
    color: var(--white);

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--white);

    transition: border-bottom 0.3s ease; /* トランジション対象をborder-bottomのみに */
    border-bottom: 1px solid transparent; /* 初期状態を透明ボーダーに */
}

  /* スクロール時のスタイル */
  .header.scrolled {
    border-bottom: 1px solid var(--white); /* ボーダーのみ追加 */
    border-bottom-color: var(--white);
  }


.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.header i {
    margin-left: 5px;
}

.logo img {
    height: 40px;
}

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

.nav ul li {
    margin-left: 30px;
}

.nav ul li a {
    position: relative;
}

.nav ul li a:after,
.nav ul li span:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--white);
    transition: width 0.3s ease;
}

.nav ul li a:hover:after,
.nav ul li span:hover:after{
    width: 100%;
}

/* ドロップダウンメニュー */
.nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* サブメニュー関連の修正 */
.submenu {
    display: block !important; /* 強制上書き */
    position: absolute;
    top: 100%;
    left: 50%;

    background-color: var(--primary-color);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;


    top: calc(100% + 10px); /* 下方向の余白追加 */
    width: 150px; /* 最小幅を保持 */

    font-size: 0.7rem;

    transform: translateX(-50%) translateY(5px); /* 初期位置調整 */


}


.submenu li {
    display: block; /* 追加: 縦並びにするために必須 */
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
}

.has-submenu {
    position: relative; 
}

.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
}

/* ハンバーガーボタンの基本スタイル */
.hamburger {
    z-index: 1001;
    display: none;
    background: none;
    border: none;
    padding: 15px;
    cursor: pointer;
  }
  
  .hamburger-line {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--white);
    margin: 5px 0;
    transition: 0.3s;

    transform-origin: center; /* 回転の中心点を中央に設定 */
  }

  
/* ハンバーガーメニューの×アニメーション */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }


  
  /* ヘッダーハンバーガーメニュー表示時のスタイル */
  @media (max-width: 768px) {
    .header {
        z-index: 1001;
    }
    .hamburger {
      display: block;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 1000;
    }

    .language-switcher {
        position: absolute;
        right: 90px;
        font-size: 12px;
    }
  
    .nav {
      position: fixed;
      top: 85px;
      left: -100%;
      width: 100vw;
      height: calc(100vh - 85px);
      padding: 20px;
      transition: 0.3s;
      z-index: 999;
      background-color: rgba(195, 13, 35, 0.9);
    }
  
    .nav.active {
      left: 0;
    }
  
    .nav ul {
      flex-direction: column;
      margin-top: 50px;
    }
    
    .nav li {
        margin-bottom: 30px;
    }
  
    .has-submenu > ul {
        display: none;
        position: static !important; /* 絶対位置指定を解除 */
        transform: none !important;
        width: 100%;
        padding-left: 20px;
        margin-top: 10px;
        /* サブメニューの開閉アニメーション */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;

      }
  
    .has-submenu.active > ul {
      display: block;
      max-height: 500px; /* 適切な最大高さを指定 */
    }

    .has-submenu {
        position: relative;
        width: 100%;
    }

    .submenu {
        position: static !important; /* 絶対位置指定を解除 */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: none !important;
        padding: 0 !important;
        box-shadow: none;
        width: 100%;
    }
      .submenu li {
        padding: 8px 0 !important;
        font-size: 0.9em;
      }

    .nav ul li span:hover:after{
    width: 0%;
    }
  }


@media (max-width: 768px) {
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-content p {
        font-size: 18px;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-header h2 {
        font-size: 30px;
    }
    
    .contact-content {
        padding: 30px;
    }
}



 


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーセクション共通 */
.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}



.section-header h2 {
    font-size: 36px;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
}


.section-header p {
    color: var(--primary-color);
}


.section-header .text {
    color: var(--text-color);
    margin: 30px 0;
}




/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヒーロー */
.hero {
    height: 100vh;
    margin-top: calc(100vh- 60px);
    min-height: 600px;
    background: no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.hero-content {
    position: relative;
    z-index: 1;
    color: white;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
}



/* スライドショー対応 */

.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1); /* 変更 */
}

.slide.active {
    opacity: 1;
}



  

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーフォトグリッド */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.photo-item {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid var(--primary-color);
    transition: transform 0.3s ease;
}


.photo-item:hover {
    transform: translateY(-10px);
}

.photo-date {
    font-size: 12px;
    color: var(--primary-color);
}


/* @media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
} */


/* スライド試し */

.photo-slider-container {
    display: flex;
    align-items: center;
    margin: auto;
  }

.photo-prev-btn,
.photo-next-btn{
    padding: 5px;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--white);
}
  
  .photo-slider-wrapper {
    overflow: hidden;
    flex: 1;
    margin:20px;
  }
  
  .photo-slider {
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    gap: 20px;
    padding-bottom: 10px;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }


  .photo-slider::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }
  
  
  .photo-slider-item {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 60px) / 4); /* 20px gap × 3 = 60px */
    box-sizing: border-box;
    border: 1px solid var(--primary-color);
    padding: 20px;
    text-align: center;
    background: var(--white);
    transition: transform 0.3s ease;

    position: relative;
    height: 240px; 
    overflow: hidden;
  }
  
  .photo-slider-item:hover {
    transform: translateY(5px);
}

.photo-slider-item img {
    width: 100%;
    height: auto;
}

.photo-slider-item img {
    width: 100%;
    height: 60%;
    object-fit: cover; /* または contain */
    object-position: center;
    display: block;
    margin-bottom: 5px;
  }
  
  

 

/* ページインジケーター */
.photo-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  .photo-dot {
    width: 10px;
    height: 10px;
    background-color: var(--section-bg-color);
    border-radius: 50%;
    cursor: pointer;
  }
  .photo-dot.active {
    background-color: var(--primary-color);
  }


/* スマホデザイン修正用 */

/* スマホ用スタイル（760px以下） */
@media (max-width: 768px) {
    .photo-slider-container {
      padding: 0 15px;
      display: block;
    }
  
    .photo-prev-btn,
    .photo-next-btn,
    .photo-indicators {
      display: none !important;
    }
  
    .photo-slider-wrapper {
      overflow: visible;
      margin: 0;
    }
  
    .photo-slider {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      overflow: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
    }
  
    .photo-slider-item {
      flex: none;
      width: auto !important;
      height: auto;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
      scroll-snap-align: none;
      font-size: 10px;
      padding: 8px;
      border: solid 0.5px var(--primary-color);
    }
    
    .photo-slider-item.visible {
      opacity: 1;
      transform: translateY(0);
    }
  }



  
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー実績数字 */
.achievements .section-header h2,
.achievements .section-header p{
    color: var(--white);
}


    .achievements {
        background-color: var(--primary-color);
        padding: 80px 0;
    }
    
    .achievements-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin-top: 50px;
    }
    
    .achievement-item {
        text-align: center;
        padding: 30px 20px;
        /* background:var(--white); */
        border: 1px solid var(--primary-color);
        transition: transform 0.3s ease;
        background-color: var(--white);

    }
    
    .achievement-item:hover {
        transform: translateY(-10px);
        background-color: var(--white);
        border: 2px solid var(--primary-color);
    }
    
    .achievement-item i {
        font-size: 48px;
        color: var(--primary-color);
    }

    .achievement-number {
        font-size: 48px;
        font-weight: 700;
        color: var(--primary-color-dark);
    }
    
    .achievement-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .achivement-sub {
        color: var(--primary-color-dark);
        margin-top: -20px;
    }
    
    
    @media (max-width: 768px) {
        .achievements-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .achievement-number {
            font-size: 30px;
            margin-bottom: 5px;
        }
        .achievement-desc{
            font-size: 10px;
        }
    }


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本支社について */
.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    margin-bottom: 20px;
    font-weight: 300;
}

.about-text p {
    margin-bottom: 20px;
}

.about-image {
    flex: 1;
    overflow: hidden;
}

.about-text li {
    margin-bottom: 10px;
}

.about-text i {
    margin-right: 10px;
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーNEW地図 */

.lab-map {
    position: relative;
    margin: 0 auto;
    max-width: 800px;
    /* background-color: #0a66c2; */
    margin-top: -40px;
}

.map-image {
    width: 100%;
    opacity: 0.9;
}


/* 基本マーカースタイル */
.lab-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* 子会社（緑） */
.lab-marker.subsidiary {
    background:green; /* 緑色 */
    border: solid 0.5px rgb(1, 166, 1);
}

/* 研究センター（黄） */
.lab-marker.research-center {
    background: orange; /* 黄色 */
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    animation: pulse-gold 1.5s infinite;
}

/* アニメーション追加 */
@keyframes pulse-gold {
    0% { transform: scale(0.95); }
    70% { transform: scale(1.1); }
    100% { transform: scale(0.95); }
}

.lab-marker.japan { top: 50%; left: 43%; }
.lab-marker.Germany { top: 43%; left: 10%; }
.lab-marker.Spain { top: 48%; left: 6%; }
.lab-marker.Netherlands { top: 41.5%; left: 8%; }
.lab-marker.Israel { top: 53%; left: 17%; }
.lab-marker.India { top: 58%; left: 27.5%; }
.lab-marker.Vietnam { top: 60%; left: 35%; }
.lab-marker.Singapore { top: 64%; left: 35%; }
.lab-marker.Malaysia { top: 63.5%; left: 34%; }
.lab-marker.Australia { top: 76%; left: 42%; }
.lab-marker.America { top: 50%; left: 73%; }
.lab-marker.Chile { top: 78%; left: 82%; }


/* 位置調整（研究センター用） */
.lab-marker.research-center.America { top: 48%; left: 75%; }
.lab-marker.research-center.Germany { top: 41%; left: 10%; }
.lab-marker.research-center.Israel { top: 51%; left: 17%; }
.lab-marker.research-center.Japan { top: 48%; left: 43%; }





/* アニメーション統一版 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.4); /* 緑色 */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 128, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0);
    }
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.4); /* 黄色 */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
    }
}

/* 研究センターのアニメーション変更 */
.lab-marker.research-center {
    animation: pulse-yellow 1.5s infinite; /* 黄色用アニメーション */
}

/* 子会社のアニメーション（変更なし） */
.lab-marker.subsidiary {
    animation: pulse 1.5s infinite;
}

/* ホバー部分 */

  .lab-marker::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  }
  
  /* ホバー時の表示 */
  .lab-marker:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
    z-index: 1000;
  }
  
  /* 矢印追加 */
  .lab-marker::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--primary-color);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .lab-marker:hover::before {
    opacity: 1;
    z-index: 1000;
  }
  @media (hover: none) {
    .lab-marker.active::after,
    .lab-marker.active::before {
      opacity: 1;
    }
  }




/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー最新ニュース */

.news {
    background-color: var(--primary-color);
    color: var(--white);
}

.news .section-header,
.news .section-header h2,
.news .section-header p {
    color: var(--white);
}

.news-list {
    max-width: 800px;
    margin: 0 auto 40px;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--white);
}

.news-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.news-date {
    width: 120px;
    flex-shrink: 0;
    font-size: 14px;
}

.news-category {
    width: 100px;
    background-color: var(--primary-color);
    color: var(--white);
    padding: 5px 20px;
    font-size: 10px;
    border: 1px solid var(--white);
    text-align: center;
    flex-shrink: 0;
}

.news-title {
    flex-grow: 1;
    padding-left: 20px;
    min-width: 0;
}

.news-title a:hover {
    text-decoration: underline;
}

.news i {
    margin-left: 5px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
   スマホ用（768px以下）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 0;
    }

    .news-header {
        width: 100%;
        gap: 10px;
        margin-bottom: 8px;
        justify-content: flex-start;
    }

    .news-date,
    .news-category {
        width: auto;
        font-size: 14px;
    }

    .news-category {
        padding: 3px 12px;
        font-size: 12px;
    }

    .news-title {
        width: 100%;
        padding-left: 0;
    }

    .news-title a {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

  
  
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* --------------------------------------------------------お問い合わせセクション  */
.contact-content {
    display: flex;
    gap: 20px;
    background-color: var(--white);
    text-align: center;
}

/* インフォ左側 */
.contact-info {
    flex: 1;
}

.contact-info li {
    margin-bottom: 10px;
}

.contact-info i {
    margin-right: 10px;
}


/* 中央揃え */
.contact-info .section-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* 横方向中央揃え */
    text-align: center; /* テキストも中央揃え */
    width: 100%; /* 親要素いっぱいに広げる */
}
.contact-info .text {
    margin-bottom: 0px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーコンタクトフォーム７*/
.contact-form {
    flex: 1;
    border: 1px solid var(--primary-color);
    padding: 20px;
    text-align: center;
    max-width:800px ;
}

.wpcf7-text,
.wpcf7-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--primary-color);
    font-size: 16px;
    transition: all 0.3s ease;

    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7 select:focus {
    border-color: var(--primary-color);
    outline: none;
    border: 1px solid var(--primary-color);
}

.wpcf7 select{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--primary-color);
    font-size: 16px;
    transition: all 0.3s ease;
    color: var(--text-color);
    font-size: 14px;

    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}


.wpcf7-textarea {
    resize: vertical;
    max-height: 150px;
}


.wpcf7-submit {
    display: inline-block;
    padding: 12px 30px;
    font-weight: 300;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);

    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);

    transform: translateX(50%);
}

.wpcf7-submit:hover {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}

.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    text-align: left;
  }

  .wpcf7-not-valid-tip,
  .wpcf7-response-output {
    color: var(--primary-color); 
  }
  
  .wpcf7-not-valid-tip {
    display: inline-block !important;
    padding: 0 !important;
    animation: slideIn 0.3s ease;
  }

/* ----------------------------------------------------------------フッター
-------------------------------------------------------------------------- */

.footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 4rem 0 2rem;
    font-size: 0.8rem;
}

.footer i {
    margin-left: 5px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}

.footer-brand {
    max-width: 250px;
}

.footer-brand img {
    height: 30px;
    margin-bottom: 1rem;
}


.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 2rem;
}

.footer-menu-group {
    margin-bottom: 1.5rem;
}

.footer-menu-title {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    /* border-bottom: 1px solid var(--white); */
}

.footer-submenu {
    list-style: none;
    padding-left: 0;
}

.footer-submenu li {
    margin-bottom: 0.5rem;
}

.footer-submenu a {
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-submenu a:hover {
    padding-left: 5px;
}

.footer-contact {
    max-width: 300px;
}

.footer-contact-title {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.contact-info p {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.contact-info i {
    margin-right: 0.8rem;
    width: 20px;
    text-align: center;
}

.footer .social-links {
    display: flex;
    gap: 30px;
    color: var(--white);
}

.social-links a {
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}


.footer-bottom {
    text-align: center;
}

.legal-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 10px;
}


.copyright {
    font-size: 10px;
}

@media (max-width: 768px) {
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-menu-group {
        margin-bottom: 1rem;
    }
    
    .footer-submenu a {
        font-size: 0.85rem;
    }
}


/* 修正後のフッタースタイルーーーーーーーーーーーーーーーーー */
.footer-content {
    display: grid;
    grid-template-columns: 
        1fr 
        minmax(0, 3fr)  /* ナビゲーション部分を3倍の比率 */
        1fr;            /* 連絡先部分を1fr */
    gap: 2rem;
    align-items: start;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 1rem;
    min-width: 0; /* 重要：子要素のオーバーフロー防止 */
}

.footer-contact {
    min-width: 250px; /* 最小幅を設定 */
    margin-left: auto; /* 右寄せ */
}

/* モバイル対応 */
@media (max-width: 1200px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-nav {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .footer-contact {
        margin-left: 0;
    }
}

/* 未解決問題 */
/* タイトルの太字修正 */
.footer-menu-title,
.footer-contact-title {
    font-weight: 300 !important; /* 明示的に通常の太さに */
    font-family: inherit; /* フォントの継承を確実に */
}

/* アイコンの色修正 */
.contact-info i {
    color: inherit !important; /* 親要素の色を継承 */
}

/* より詳細なセレクタで上書き */
.footer-contact .contact-info i.fa {
    color: var(--white) !important;
}



/* ------------------------------------------------------------------------
レスポンシブデザイン
------------------------------------------------------------------------ */
@media (max-width: 992px) {
    .about-content,
    .contact-content {
        flex-direction: column;
    }
    
    .about-image {
        order: -1;
        margin-bottom: 30px;
    }
}



@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 28px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .btn, .btn-outline {
        padding: 10px 20px;
    }
}

/* ハンバーガーメニュー修正ようーーーーーーーーーーーーーーーーーーーーーー */



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーサブページの共通事項ーー*/

/* メインビジュアル */
.subpage-hero {
    height: 250px;
    background: url('../images/hero.jpg') center/cover no-repeat;
    margin-top: 80px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    text-align: center;
}
.subpage-hero[data-page-type="company"] {
    background-image: url('../images/product1.jpg');
}

.subpage-hero[data-page-type="research"] {
    background-image: url('../images/lab.jpg');
}

.subpage-hero[data-page-type="media"] {
    background-image: url('../images/product2.jpg');
}


.subpage-hero .hero-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.subpage-hero .container {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color:var(--white);
}

.page-title{
    font-size: 2.5rem;
    color: var(--white);
}

.hero-lead {
    font-size: 1rem;
    color: var(--white);
    margin-top: 0;
}

.subpage-hero h2 {
    color: var(--white);
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー企業情報
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　サブページ：金正大について
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー金正大について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー会社沿革タイムライン*/

/* 会社沿革 */

.history-timeline {
    background-color: var(--section-bg-color);
}

/* タイムライン基本スタイル */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--primary-color);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.timeline-item {
    position: relative;
    width: 46%;
    margin-bottom: 40px;
    padding: 15px;
    background: var(--white);
    border: 1px solid var(--primary-color);
    z-index: 1;
}

.timeline-item::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border: 4px solid var(--primary-color);
    border-radius: 50%;
    top: 24px;
}

/* デスクトップ用配置 */
.timeline-item.left {
    left: 2%;
    text-align: right;
}

.timeline-item.left::after {
    right: -33px;
}

.timeline-item.right {
    left: 52%;
    text-align: left;
}

.timeline-item.right::after {
    left: -33px;
}

/* コンテンツスタイル */
.timeline-year {
    font-size: 20px;
    font-weight: bold;
    color:var(--primary-color);
    margin-bottom: 10px;
}

.timeline-content {
    line-height: 1.6;
}

.timeline-details {
    margin-top: 10px;
    padding-left: 15px;
    list-style-type: disc;
}

/* レスポンシブ対応（768px以下） */
@media screen and (max-width: 480px) {
    .timeline {
        padding: 30px 15px;
        height: auto;
    }

    .timeline::after {
        transform: none;
    }

    .timeline-item {
        width: 300px;
        left: 0 !important;
        margin-bottom: 40px;
        text-align: left !important;
        padding-left: 40px;
    }

    .timeline-item::after {
        left: 132px !important;
        top: -15px;
        width: 30px;
        height: 30px;
    }

    .timeline-item.left,
    .timeline-item.right {
        margin-left: 30px;
    }

    .timeline-year {
        font-size: 18px;
    }

    .timeline-content {
        font-size: 14px;
    }

    .timeline-details {
        padding-left: 20px;
        font-size: 12px;
    }
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー金正大について */
/* ーーーーーーーーーーーーーーーーーーートップの研究アピール、グループについての海外展開アピール*/

.global-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.global-text {
    flex: 1;
}

.global-text h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.global-text p {
    margin-bottom: 20px;
}

.global-image {
    flex: 1;
    overflow: hidden;
}

.global-image img{
    max-height: 400px;
    filter: grayscale(0.5); 
    opacity: 0.9;
}


/* グローバル統計コンテナ */

.global-stats .stat-item:hover {
    transform: translateY(-10px);
}

.global-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 1rem 0;
    padding: 5px;
}

/* 個別統計項目 */
.global-stats .stat-item {
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 160px;
}

  
  /* 数字強調スタイル */
  .global-stats .number-emphasis {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 0.8rem;
    position: relative;
    display: inline-block;
    font-family: 'Arial', sans-serif;
    color: var(--primary-color);
  }
  
  .number-emphasis span {
    font-size: 25px;
  }
  
  /* ラベルスタイル */
  .global-stats .stat-label {
    color: var(--subtext-color);
    display: block;
    font-size: 13px;
    font-weight: 500;
  }

  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .global-stats {
      flex-direction: column;
      gap: 1.5rem;
      padding: 1.5rem 0;
    }

    .global-content{
        flex-direction: column;
    }
    .global-stats {
        grid-template-columns: repeat(2, 1fr);
    }
  
    .global-stats .number-emphasis {
      font-size: 2.2rem;
    }
  
    .global-stats .number-emphasis::after {
      width: 40%;
    }
  
    .global-stats .stat-label {
      font-size: 0.9rem;
    }
    .global-stats .stat-item {
        padding: 5px;
        height: auto;
    }
    .global-stats .achivement-sub {
        margin-bottom: 0;
        font-size: 10px;
    }
  }
  
  @media (max-width: 480px) {
    .global-stats .number-emphasis {
      font-size: 2rem;
    }
  }
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー金正大について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー受賞歴*/

/* ロゴロールセクション */
.logo-roller {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 50px 0;
  }
  
  .logo-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: scroll 30s linear infinite;
  }
  
  .logo-item {
    flex-shrink: 0;
    width: 250px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--primary-color);
    transition: transform 0.3s ease;
    margin: 20px 0;
  }
  .logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

  
  .logo-item:hover {
    transform: scale(1.05);
  }
  
  .logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.7;
    transition: all 0.3s ease;
  }

  .logo-item img {
    max-width: 150px;
    height: auto;
    display: block;
}
  
  .logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-150px * 8 - 40px * 7));
    }
  }

  @media (max-width: 768px) {
    .logo-item{
        height: 200px;
        width: auto;
    }

    .logo-track {
        gap: 20px;
    }

  
    
}

/* ロゴロールエンドレス化 */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 50%まで移動 */
}

.logo-roller {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.logo-track {
    display: flex;
    width: max-content; /* コンテンツ幅に合わせて拡張 */
    animation: scroll linear infinite;
}



  


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー企業情報
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　サブページ：日本支社について
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/



 /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本支社について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー特徴*/

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--primary-color);
}

.feature-card:hover{
    transform: translateY(-10px);
}

.feature-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

 /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本支社について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーサービス*/

.services {
    background-color: var(--section-bg-color);
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.service-card {
    background: var(--primary-color);
    padding: 2rem;
    color: var(--white);
    
}

.service-card h3 {
    margin-bottom: 1rem;
}

.service-list li {
    list-style: none;
    padding: 0.5rem 0;
}

 /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本支社について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本研究所紹介*/
.lab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.lab-card {
    overflow: hidden;
}

.lab-card img {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lab-card:hover img {
    transform: scale(1.05);
}

.lab-card p {
    background: var(--primary-color);
    color: var(--white);
    padding: 1rem;
    margin: 0;
}

 /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本支社について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー日本スタッフ紹介*/
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.profile-card {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--primary-color);
}

.profile-card img {
    width: 150px;
    height: 150px;
    /* border-radius: 50%; */
    object-fit: cover;
    margin-bottom: 1rem;
}

.staff-position {
    background-color: var(--primary-color);
    color: var(--white);
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .service-grid,
    .lab-grid {
        grid-template-columns: 1fr;
    }

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

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

.bg-light {
    background: var(--section-bg-color);
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー企業情報
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　サブページ：グローバル展開
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/




    /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーグローバル展開 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー世界研究所と支社の案内*/

/* 修正後のCSS */
.global-labs {
    background-color: #f9f9f9;
    padding: 4rem 0;
}

.global-labs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.global-labs-card {
    background: var(--white);
    border: 1px solid var(--primary-color);

    padding: 30px 60px;
    transition: transform 0.3s ease;
}

.global-labs-card:hover {
    transform: translateY(-5px);
}

.global-labs-header {
    display: flex;
    align-items: center;
    margin-bottom:10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--primary-color);
}

.global-labs-header i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 1rem;
}

.global-labs-header h3 {
    color: var(--dark-color);
}

.global-labs-detail {
    list-style: none;
    padding-left: 0;
}

.global-labs-detail li {
    padding: 0.5rem 0;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.global-labs-detail li::before {
    content: "▹";
    color: var(--primary-color);
    margin-right: 0.5rem;
}

/* ２行にするため */

/* 海外支社のみ2列表示 */
.global-labs-card:nth-child(2) .global-labs-detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

/* リストアイテムのスタイル調整 */
.global-labs-card:nth-child(2) .global-labs-detail li {
    display: block; /* flexを解除 */
    padding: 0.3rem 0;
}

/* 研究所リストは従来の1列表示を維持 */
.global-labs-card:first-child .global-labs-detail {
    display: block;
}

@media (max-width: 768px) {
    .global-labs-list {
        grid-template-columns: 1fr;
    }
    
    .global-labs-card {
        padding: 1.5rem;
    }
}


/* ーーーーーーーーーーーーーーーーーーーーーーー----ーーーーーーーーーーーーー会社情報 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー----会社情報ページ*/

/* メインコンテナ */
  .info-container {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }
  
  /* データテーブル */
  .company-data {
    flex: 1;
    min-width: 300px;
  }
  
  .data-row {
    display: flex;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--section-bg-color);
  }
    
  .data-row dt {
    flex: 0 0 120px;
    color: var(--primary-color);
  }
  
  .data-row dd {
    flex: 1;
    padding-right: 1rem;
  }
  
  /* 画像コンテナ */
  .office-image {
    flex: 1;
    max-width: 500px;
    position: relative;
    overflow: hidden;
  }
  
  .office-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
  }
  
  /* マップコンテナ */
  .map-container {
    position: relative;
    height: 400px;
  }
  
  .map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  /* オーバーレイ */
  .overlay-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 0, 0, 0.3);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  
  .overlay-container:hover::before {
    opacity: 0.8;
    background: rgba(0, 0, 0, 0);
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 992px) {
    .info-container {
      gap: 1.5rem;
    }
    
    .office-image {
      max-width: 400px;
    }
  }
  
  @media (max-width: 768px) {
    .company-info {
      padding: 2.5rem 0;
    }
  
    .info-container {
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 2rem;
    }
  
    .office-image {
      max-width: 100%;
      height: 300px;
    }
  
    .data-row {
      flex-direction: column;
      gap: 0.5rem;
      padding: 1.2rem 0;
    }
  
    .data-row dt {
      flex-basis: auto;
      font-size: 0.9rem;
    }
  
    .data-row dd {
      padding-right: 0;
      font-size: 0.95rem;
    }
  
    .map-container {
      height: 300px;
    }
  }
  
  @media (max-width: 480px) {
    .section-header h2 {
      font-size: 1.8rem;
    }
  
    .office-image {
      height: 250px;
    }
  
    .map-container {
      height: 250px;
    }
  }


  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー工場案内 */

/* 生産拠点スタイル */
/* 生産拠点スタイル */
.facilities {
    background: var(--white);
    padding: 40px 0;
}

.facility-grid {
    display: grid;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.facility-card {
    background: var(--white);
    border: 1px solid var(--primary-color);
    padding: 20px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
    align-items: start;
}

.facility-photo {
    aspect-ratio: 1;
    overflow: hidden;
}

.facility-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-info {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.description {
    /* line-height: 1.6; */
    max-height: 180px;
    overflow-y: auto;
    padding-right: 10px;
    font-size: 12px;
}

/* ナンバーバッジスタイル */
.number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--primary-color);
    color: white;
    margin-right: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .number-badge {
        width: 28px;
        height: 28px;
        font-size: 0.8em;
        margin-right: 10px;
    }
}

/* 自動ナンバリング（オプション） */

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .facility-card {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "photo"
            "info"
            "map";
    }

    .facility-photo { grid-area: photo; }
    .facility-info { grid-area: info; }

    .facility-photo {
        height: 250px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .facility-card {
        padding: 15px;
    }
    
    .description {
        font-size: 0.9em;
    }
}




/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　サブページ：製品情報
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/



    /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品情報 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーカテゴリー一覧*/

.category-nav {
    background-color: var(--primary-color);
    border-bottom: 1px solid var(--white);
}

.category-nav .section-header h2,
.category-nav .section-header p{
    color: var(--white);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
}



.category-card:hover {
    transform: translateY(-5px);
}

.category-card h3 {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2; /* 行間調整 */
}


.category-card {
    background: var(--white);
    max-width: 180px;
    display: flex; /* 追加 */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    min-height: 70px; /* 最小高さを設定 */
    transition: transform 0.3s ease;
    border: solid 1px var(--primary-color);
    color: var(--primary-color);
    text-decoration: none; /* リンクの下線を削除 */
    text-align: center;
}

.category-subtitle {
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white);
    margin-top: 40px;
}



    /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品情報 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品ラインナップ*/



.product-main {
    margin-top: 100px;
}

.products-section {
    padding: 4rem 0;
    background-color: var(--white);
}


.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.products-item {
    text-align: center;
    padding:20px;
    border: 1px solid var(--primary-color);
    transition: transform 0.3s ease;
}



.products-item:hover {
    transform: translateY(-10px);
}

.products-item i {
    color: var(--primary-color);
}

.products-title {
    font-size: 12px;
    font-weight: 600;

}

.products-item p {
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 5px;
}




.products-item img {
    width: 150px; /* 幅200px */
    height: 150px; /* 高さ200px */
    object-fit: contain; /* 縦横比を保ったまま画像全体を表示 */
    object-position: center; /* 画像の中心を表示 */
}

.product-header {
    color: var(--primary-color);
    text-align: center;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-item {
        padding:10px;
    }
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーカテゴリー別ページ */
.product-category .container {
    max-width: 800px;
    justify-content: center;
}

.products .container {
    text-align: center;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品一覧文字リスト */

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .grid-item {
    background: var(--white);
    padding: 25px;
    transition: transform 0.3s ease;
    border: 1px solid var(--primary-color);
  }
  
  .grid-item:hover {
    transform: translateY(-5px);
  }
  
  .item-title {
    margin-bottom: 15px;
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
  }

  .item-title h3 {
    font-weight: 500;
    font-size: 16px;
  }

  
  .item-content {
    line-height: 1.6;
    min-height: 120px; /* 高さを揃える */
    text-align: left;
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 768px) {
    .grid-wrapper {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .item-content {
      min-height: auto;
    }
  }


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品情報 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー製品個別情報ページ*/

.product-main .container {
    /* background-color: #be966a; */
    max-width: 800px;
}
.product-info .product-code{
    color: var(--primary-color);
}

.product-code{
    margin-bottom: 10px;
}
.purchase-info h3 {
    font-weight: 300;
    font-size: 12px;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    justify-content: center;
    /* background-color: #333; */
}

.product-gallery {
    position: sticky;
    top: 100px;
    background-color:var(--white);
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center; /* 垂直中央 */
}

.product-grid img{
    width: 350px; 
    height: 350px; 
    object-fit: contain; 
    object-position: center; 
    border: 1px solid var(--primary-color);
    padding: 50px;
}

.main-image {
    width: 100%;
}

.product-title {
    font-size: 18px;
}


.product-highlight h2,
.purchase-info h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}


.btn-large {
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
}

.shop-link {
    margin-top: 20px;
    text-align: center;
}
.shop-link a {
    width: 100%;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-gallery {
        position: static;
    }

    .product-title {
        font-size: 1.5rem;
    }

    .product-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }

    .product-grid img {
        width: 100%;
        max-width: 350px; /* 最大幅を保持 */
        height: auto; /* 高さを自動調整 */
        margin: 0 auto; /* さらに中央寄せを保証 */
    }
}



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究技術
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　サブページ：研究技術について
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーートップページ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究受賞グリッド */

.award .container {
    max-width: 800px;
}

.award-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    align-items: start; /* 追加 */
}

.award-item {
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
    display: flex; /* 追加 */
    flex-direction: column; /* 追加 */
    align-items: center; /* 追加 */
}

.award-item img {
    height: 250px;
    width: 100%; /* 追加 */
    object-fit: cover; /* 追加 */
    margin-bottom: 15px; /* 追加 */
}

.award-date {
    font-size: 12px;
    color: var(--primary-color);
    margin-top: auto; /* 追加 */
}

 /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究技術について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー実績ナンバー*/


.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 3rem;
}

.achievement-card {
    text-align: center;
    padding: 20px;
    background: var(--white);
    transition: transform 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-5px);
}

.achievement-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.count {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color-dark);
    margin: 1rem 0;
}

@media (max-width: 768px) {


    .partner-grid {
        gap: 1.5rem;
    }

    .achievement-card {
        padding: 1.5rem;
    }

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




/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究技術について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー提携大学*/


.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 3rem;
    align-items: center;
    padding: 2rem 0;
}

.partner-grid img {
    max-height: 100px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.partner-grid img:hover {
    opacity: 1;
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究技術について */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究者簡略*/

/* .advisors {
    background-color: var(--section-bg-color);
}

.advisor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.advisor-card {
    background: var(--white);
    overflow: hidden;
}

.advisor-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.advisor-card h3 {
    margin: 1rem;
    color: var(--primary-color-dark);
} */





/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究者たち */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究者まとめページ*/


.researchers-section {
    background: var(--section-bg-color);
}

.researcher-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.researcher-card {
    background: var(--white);
    display: grid;
    grid-template-columns: 200px 1fr;
    border: 1px solid var(--primary-color);
    padding: 20px;
    align-items: center;
}

.researcher-card:hover {
    transform: translateY(-5px);
}

.researcher-photo img {
    height: 150px;
    width: 150px;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0.9;
}

.researcher-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.name {
    margin-bottom: 0.5rem;
    font-weight:300 ;
    font-size: 16px;
}


.affiliation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tag {
    background: var(--section-bg-color);
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text-color);
}

.bio {
    font-size: 12px;
    text-align: start;
}


@media (max-width: 768px) {
    .researcher-info {
        padding: 1.5rem;
    }

    .researcher-card {
        grid-template-columns: 1fr; /* 1列に変更 */
    }

    .researcher-grid {
        grid-template-columns: 1fr; /* 1列に変更 */
        text-align: center;
    }

    .name {
        font-size: 1.3rem;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー研究技術 */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー認証資格ページ*/

/* 特許並べる */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.award-item {
    position: relative;
    overflow: hidden;
}

.award-item img {
    width: 100px;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.award-item:hover img {
    transform: scale(1.05);
}

.award-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(195, 13, 35, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 12px;
}

.award-item:hover .award-overlay {
    opacity: 1;
}




/* テーブルスタイル */

.cert-standards .container {
    max-width: 800px;
}

.cert-table {
    margin: 30px auto; /* 上下の余白を維持しつつ左右中央揃え */
    max-width: 800px; /* 最大幅を指定 */
    overflow-x: auto;
    margin-top: 60px;
    -webkit-overflow-scrolling: touch; /* スマホスクロールをスムーズに */
}



table {
    width: 100%;
    min-width: 600px;
    margin: 0 auto; /* テーブル自体も中央揃え */
    border-collapse: collapse;
}


  


th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--section-bg-color);
    text-align: center;
}

td:first-child{
    text-align: left;
}

th {
    border-bottom: 1px solid #ddd;
    font-weight: normal;
    background-color: var(--primary-color);
    color: var(--white);
}

tr:hover {
    background-color: rgba(195, 13, 35, 0.7);
    color: var(--white);
}

  
  /* モバイル対応 */
  @media (max-width: 768px) {
    .cert-table {
      font-size: 10px;
      margin-top: 30px;
    }
  
    table {
      min-width: unset;
      width: auto;
    }
  
    th, td {
      padding: 8px 10px;
      min-width: 120px; /* 最小幅を設定 */
    }
  
    td:first-child {
      min-width: 150px; /* 最初の列を広く */
    }
  
    /* スクロールバーを目立たなくする */
    ::-webkit-scrollbar {
      height: 4px;
      background: #f1f1f1;
    }
  
    ::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 2px;
    }
  }
  
  /* 追加改善策：列幅最適化 */
  th:nth-child(1),
  td:nth-child(1) { width: 30%; } /* 規格名称 */
  th:nth-child(2),
  td:nth-child(2) { width: 15%; } /* 規格種類 */
  th:nth-child(3),
  td:nth-child(3) { width: 25%; } /* 規格番号 */
  th:nth-child(4),
  td:nth-child(4) { width: 15%; } /* 施行年月 */




/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー認証グリッド */


/* 認証グリッド */
.standard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    gap: 30px;
    margin-top: 50px;
    padding: 20px;
    font-size: 12px;
    max-width: 1000px; /* 最大幅を設定 */
    margin-left: auto;
    margin-right: auto;
}

.standard-item {
    display: flex; /* 横並びレイアウト */
    align-items: center;
    gap: 20px; /* 画像とテキストの間隔 */
    padding: 20px;
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease;
    overflow: hidden;
    height: auto; /* 高さ固定を解除 */
}

.standard-item img {
    width: 150px; /* 画像幅を固定 */
    height: 150px; /* 画像高さを固定 */
    object-fit: contain; /* 画像比率を維持 */
    flex-shrink: 0; /* 画像が縮小されないように */
    margin-bottom: 0; /* 余白を削除 */
}

.text-content {
    flex: 1; /* 残りのスペースを占有 */
}

/* モバイル対応 */
@media (max-width: 768px) {
    .standard-grid {
        grid-template-columns: 1fr; /* 1列レイアウト */
        gap: 20px;
        padding: 10px;
    }
    
    .standard-item {
        /* flex-direction: column;  */
        text-align: center;
        gap: 15px;
    }
    
    .standard-item img {
        width: 100px; /* モバイル時の画像サイズ */
        height: 100px;
    }
}

/* 既存のスタイルは維持 */
.standard-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.standard-date {
    font-size: 12px;
    color: var(--primary-color);
    margin: 5px 0;
}



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーニュース */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーメディア依頼、SNSページ*/


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーメディア依頼 */

.inquiry-card {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--white);
}

.inquiry-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.btn-large {
    text-align: center;
}

.inquiry-item {
    text-align: center;
    padding: 2rem;
    border: 1px solid var(--primary-color);
}

.inquiry-item i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーSNS案内 */

.sns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.sns-card {
    padding: 2rem;
    color: var(--primary-color);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid var(--primary-color);
}

.sns-card:hover {
    transform: translateY(-5px);
}

.sns-card i {
    font-size: 35px;
    margin-bottom: 1rem;
}


.sns-card:nth-of-type(1) img {
    height: 35px;
  }

.sns-card:last-of-type img{
    height: 45px;
}
.sns-card qr img {
    height: 60px;
  }

  .qr.wechat img {
    height: 60px;
  }
  
  .qr.video img {
    height: 60px;
  }
  




@media (max-width: 768px) {
    .inquiry-item{
        padding: 10px;
    }
    .sns-card {
        padding: 1.5rem;
    }
    .sns-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーお問合せ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー資料ダウンロードページ*/

/* 追加スタイル */
.image-row {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    justify-content: center;
}

.image-item p {
    text-align: center;
    display: block;
    line-height: 1;
    font-size: 12px;
}


.image-item img {
    width: 100%;
    max-width: 160px;
    object-fit: cover;
    border: 1px solid #ddd;
}





@media (max-width: 768px) {
    .image-row {
        /* flex-direction: column; */
        gap: 30px;
    }
    
    .image-item img {
        height: 150px;
    }
}

/* 既存の連絡先スタイル調整 */
.contact-info ul {
    margin-bottom: 30px;
}

.contact-info li span {
    margin-right: 10px;
}


/* ダークモード */
@media (prefers-color-scheme: dark) {
    body {
      background-color: var(--white) 
    }
  }



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーープライバシーポリシー */

.privacy .container {
    max-width: 800px;
}