/* ================================================================= */
/* ALL */
/* ================================================================= */
  :root {
    --primary-color: #10375C;
    --secondary-color: #00A0E3;
    --tertiary-color: #0856a1;
    --text-color: #1D1D1F;
    --bg-light: #F4F7FB;
    --white: #ffffff;
  }

  html {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
  }

  body {
    background: none; 
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1D1D1F;
  }
  body::before {
    content: "";
    position: fixed;   /* スクロールしても常に画面全体を覆う */
    inset: 0;          /* top/right/bottom/left: 0 */
    z-index: -1;       /* コンテンツの背面 */
    background: url("../images/mzn_backImage.png") center / cover no-repeat;
    transform: translateZ(0); /* モバイル描画の安定化 */
  }

  header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--primary-color);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .hero_contact h2,
  .hero_company h2,
  .hero_employment h2,
  .hero_download h2,
  .hero_support h2,
  .hero_aimir h2,
  .hero_net-adm h2,
  .hero_zenkla h2,
  .hero_ems h2,
  .hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .hero_contact p,
  .hero_company p,
  .hero_employment p,
  .hero_download p,
  .hero_support p,
  .hero_aimir p,
  .hero_net-adm p,
  .hero_zenkla p,
  .hero_ems p,
  .hero p {
    font-size: 1.5rem;
    max-width: 600px;
  }


  .img-zoom {
    transition: transform 0.3s ease;
    cursor: zoom-in;
  }

  .img-zoom:hover {
    transform: scale(1.03);
  }

  .feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
  }

  .feature-table th,
  .feature-table td {
    border-bottom: 1px solid #ccc;  /* ← 下罫線のみ表示 */
    padding: 0.75rem 1rem;
    text-align: left;
  }

  .feature-table th {
    background-color: #e6f5fc;
    color: #10375C;
    font-weight: bold;
  }

  .feature-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .feature-row.reverse {
    flex-direction: row-reverse;
  }

  .feature-image {
    flex: 1 1 50%;
    min-width: 280px;
  }

  .feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .feature-text {
    flex: 1 1 50%;
    min-width: 280px;
    color: var(--text-color);
  }

  .feature-text h4 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
  }

  .feature-text p {
    font-size: 1.0rem;
    line-height: 1.8;
  }

  .footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 1rem 0;
    padding-bottom: 3rem; 
  }

  .footer-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center; 
  }

  .footer-left a {
    color: #ffffff !important; /* 常に白文字に固定 */
    text-decoration: none;     /* 下線を消す場合 */
    white-space: nowrap; 
    margin-left: 1rem;
  }

  .footer-left a:hover {
    text-decoration: underline; /* ホバー時の演出（任意） */
  }

  .footer-right {
    color: var(--white);
    margin-right: 1rem;
    margin-left: 10rem;
  }

  .footer-right select {
    background-color: var(--primary-color); /* 背景色と統一 */
    color: var(--white);                    /* 白文字 */
    border: none;                           /* 枠線をなくす */
    border-bottom: 2px solid var(--white);  /* 下線だけ白 */
    padding: 0.5rem 0.5rem 0.25rem;         /* 下の余白を調整 */
    font-size: 1rem;
    border-radius: 0;                       /* 角丸を無効にする */
    outline: none;                          /* フォーカス時の青枠も除去 */
    appearance: none;                       /* ブラウザ標準の装飾を除去（必要に応じて） */
  }
  .footer-copy {
    text-align: center;
  }

  .section {
    max-width: 100%;
    padding: 3rem 6vw 6rem;
    scroll-margin-top: 200px;
  }


  .section h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
  }

  .dropdown li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
  }

  @keyframes fadeInUp {
   from {
   opacity: 0;
   transform: translateY(40px);
   }
   to {
   opacity: 1;
   transform: translateY(0);
   }
  }

  .dropdown {
    display: none;
    position: absolute;
    background: var(--primary-color);
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;
    min-width: 220px;
    z-index: 9999;
  }

  nav ul li:hover .dropdown {
    display: block;
    top: 100%;
    left: 0;
  }

  .section-title {
    font-size: 1.8rem;
    color: #10375C;
    padding-bottom: 0.5rem;
    border-left: 20px solid var(--secondary-color); /* ← 追加：左ボーダー */
    padding-left: 1rem;                            /* ← タイトル文字との間隔 */
    margin-bottom: 2rem;
    scroll-margin-top: 220px;
  }

  .section-title-en{
    font-size: 1.0rem;
    color: #10375C;
  }

  nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    position: relative;
  }
  nav ul li {
    position: relative;
    padding-right: 2rem; /* ← 右側に余白追加（例：32px） */
  }
  nav ul li a {
    color: var(--white);
    text-decoration: none;
  }
  /* 少し拡大させる＋色変化 */
  nav ul li:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }

  .net-adm-row, 
  .zenkla-row, 
  .ems-row, 
  .aimir-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
  }

  #overview h3,
  #examples h3,
  #hardware h3,
  #requirement h3,
  #faq h3,
  #purchase h3 {
    margin-top: 5rem;
    font-weight: normal;
  }


  .scroll-nav {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }

  .vertical-tabs {
    position: fixed;
    top: 460px; /* ← ヒーローの高さに応じて */
    left: 0;
    width: 190px;
    border-right: 1px solid #ccc;
    z-index: 1000;
  }

  .aimir-page .tab-content ,
  .zenkla-page .tab-content ,
  .ems-page .tab-content ,
  .net-adm-page .tab-content {
    padding-left: 8rem;
  }

  .aimir-page .tab-content section ,
  .zenkla-page .tab-content section ,
  .ems-page .tab-content section ,
  .net-adm-page .tab-content section {
    margin-bottom: 1rem;
  }

  .aimir-page .tab-menu ,
  .zenkla-page .tab-menu ,
  .ems-page .tab-menu ,
  .net-adm-page .tab-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .aimir-page .tab-menu li ,
  .zenkla-page .tab-menu li ,
  .ems-page .tab-menu li ,
  .net-adm-page .tab-menu li {
    position: relative;
    margin-bottom: 0.5rem;
    border-radius: 2px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    background-color: transparent;
    width: 100%; 
    overflow: hidden;
  }

  .aimir-page .tab-menu li a ,
  .zenkla-page .tab-menu li a ,
  .ems-page .tab-menu li a ,
  .net-adm-page .tab-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #10375C;
    font-size: 1.0rem;
    font-weight: 500;
  }

  .aimir-page .tab-menu li:hover ,
  .zenkla-page .tab-menu li:hover ,
  .ems-page .tab-menu li:hover ,
  .net-adm-page .tab-menu li:hover {
    background-color: var(--tertiary-color);
    transform: translateX(2px);
  }

  .aimir-page .tab-menu li:hover a ,
  .zenkla-page .tab-menu li:hover a ,
  .ems-page .tab-menu li:hover a ,
  .net-adm-page .tab-menu li:hover a {
    color: #ffffff;
  }

  .aimir-page .tab-menu li.active ,
  .zenkla-page .tab-menu li.active ,
  .ems-page .tab-menu li.active ,
  .net-adm-page .tab-menu li.active {
    background-color: var(--tertiary-color);
    font-weight: 600;
    color: #ffffff;
    box-shadow: inset 4px 0 0 0 #00A0E3;
  }

  .aimir-page .tab-menu li.active a ,
  .zenkla-page .tab-menu li.active a ,
  .ems-page .tab-menu li.active a ,
  .net-adm-page .tab-menu li.active a {
    color: #ffffff;
  }

  .aimir-page .tab-layout ,
  .zenkla-page .tab-layout ,
  .ems-page .tab-layout ,
  .net-adm-page .tab-layout {
    margin: 0;
    padding: 0;
  }


/* ================================================================= */
/* index.html */
/* ================================================================= */
  .fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease-out;
    will-change: opacity, transform;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
  

  .hero h2 {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease-out forwards;
  }
  .hero p {
    font-size: 2.0rem;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 1.2s ease-out forwards;
    animation-delay: 0.5s; /* h2の後に表示 */
    opacity: 0; /* アニメーション前は非表示に */
  }

  .hero {
    position: relative;
    height: 100vh;
    background: url('../images/mzn_topimage.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    animation: zoomInBackground 20s ease-in-out 1;
    background-size: 130%;
  }

  @keyframes zoomInBackground {
   from {
     background-size: 160%;
   }
   to {
     background-size: 130%;
   }
  }

  .top-section {
    max-width: 100%;
    padding: 6rem 6vw;
  }
  .top-section h3 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 4rem;
    color: var(--primary-color);
  }

  .top-page .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  .top-page .card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 2rem;
    font-size: 1.4rem;
    text-align: center;
    transition: transform 0.3s ease;
    background-color: var(--primary-color);
    color: var(--white);
  }
  .top-page .card h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .top-page .card:hover {
    transform: translateY(-5px);
  }
  .top-page .card img {
    width: 300px;
    height: auto;
    margin-bottom: 1rem;
  }

    /* --- PRODUCTセクションの領域を広げて存在感アップ --- */
  #services.section {
    max-width: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

    /* --- PRODUCTセクションの.cardsに3列グリッドを指定 --- */
  #services .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列グリッド */
    gap: 3rem;                             /* カード間の余白 */
    max-width: 1400px;                     /* 横幅を広げる */
    margin: 0 auto;                        /* 中央寄せ */
    padding: 0 2rem;
  }

    /* --- servicesセクションの.cards --- */
  #services .card {
    padding: 3rem;
    font-size: 1.2rem;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }

  #services .card img {
    width: 100%;
    max-width: 500px;
    height: 100px;
    margin: 0 auto 2rem;
    display: block;
  }

  .top-page .feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
  }

  .top-page .feature-table th,
  .top-page .feature-table td {
    border-bottom: 1px solid #ccc;  /* ← 下罫線のみ表示 */
    padding: 0.75rem 1rem;
    text-align: left;
  }

  .top-page .feature-table th {
    background-color: #e6f5fc;
    color: #10375C;
    font-weight: bold;
  }

  .top-page .feature-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
    max-width: 2200px;
    margin: 0 auto;
  }

  .top-page .feature-row.reverse {
    flex-direction: row-reverse;
  }

  .top-page .feature-image {
    flex: 1 1 50%;
    min-width: 280px;
  }

  .top-page .feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .top-page .feature-text {
    flex: 1 1 50%;
    min-width: 280px;
    color: var(--text-color);
  }

  .top-page .feature-text h4 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
  }

  .top-page .feature-text p {
    font-size: 1.2rem;
    line-height: 1.8;
  }

/* ================================================================= */
/* support_index.html */
/* ================================================================= */
  .hero_support {
    position: relative;
    height: 50vh;
    background: url('../images/mzn_support.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }

  .support-logo {
    letter-spacing: 0.25em;
  }

  .support-page .product-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding: 4rem 2rem;
      max-width: 1600px;
      margin: 0 auto;
  }

  .support-page .product-section {
      flex: 1 1 300px;
      max-width: 700px;
  }

  .support-page .product-heading {
      font-size: 1.8rem;
      font-weight: bold;
      text-align: left;
      margin-bottom: 0.5rem;
      color: var(--primary-color);
      border-bottom: 3px solid var(--secondary-color);
      padding-bottom: 0.5rem;
  }

  .support-page .product-column .card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    padding: 1.0rem;
    transition: transform 0.3s ease;
    color: #1D1D1F;
  }

  /* Net-ADMのカード群だけ2列レイアウト */
  .support-page .netadm-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 0.2rem; /* カード間の余白 */
  }

  .support-page .product-heading img {
    width: 100%;
    height: auto;
    display: block;
  }

  .support-page .card h4 {
      font-size: 1.2rem;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
      text-align: center;
  }

  .support-page .btn-wrapper ,
  .newkeyFm-page .btn-wrapper ,
  .inquiryFm-page .btn-wrapper ,
  .admsuptFm-page .btn-wrapper ,
  .addkeyFm-page .btn-wrapper {
      text-align: center;
  }

  .support-page .btn-modern ,
  .newkeyFm-page .btn-modern ,
  .inquiryFm-page .btn-modern ,
  .admsuptFm-page .btn-modern ,
  .addkeyFm-page .btn-modern {
      color: black;
      margin-top: 0.5rem;
      padding: 0.5rem 1.25rem;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      text-decoration: none;
      transition: background-color 0.3s, color 0.3s, border 0.3s;
      box-shadow: 0 4px 8px rgba(0, 160, 227, 0.2);
      backdrop-filter: blur(4px);
  }

  .support-page .btn-modern:hover ,
  .newkeyFm-page .btn-modern:hover ,
  .inquiryFm-page .btn-modern:hover ,
  .admsuptFm-page .btn-modern:hover ,
  .addkeyFm-page .btn-modern:hover {
      background-color: var(--tertiary-color);
      color: #fff;
      border-style: solid;
  }


  .support-page .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
  }

/* ================================================================= */
/* zenkla_index.html */
/* ================================================================= */

  .hero_zenkla {
    position: relative;
    height: 50vh;
    background: url('../products/zenkla/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }

  .zenkla-page .image-item {
    flex: 1 1 400px;
    max-width: 500px;
  }

  .zenkla-logo {
    letter-spacing: 0.25em;
  }

  .zenkla-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem !important;
  }

  .zenkla-page .cards.vertical .card {
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
    color: #000000;
  }
  .zenkla-page .cards.vertical .card:hover {
    transform: translateY(-6px);
  }

/* ================================================================= */
/* ems_index.html */
/* ================================================================= */

  .hero_ems {
    position: relative;
    height: 50vh;
    background: url('../products/ems/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }


  .ems-page .image-item {
    flex: 1 1 400px;
    max-width: 500px;
  }

  .ems-logo {
    letter-spacing: 0.25em;
  }

  .ems-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem !important;
  }

  .ems-page .cards.vertical .card {
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
    color: #000000;
  }
  .ems-page .cards.vertical .card:hover {
    transform: translateY(-6px);
  }

  .ems-image {
    flex: 1 1 50%;
    min-width: 400px;
    max-width: 600px;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .ems-image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

/* ================================================================= */
/* aimir_index.html */
/* ================================================================= */

  .hero_aimir {
    position: relative;
    height: 50vh;
    background: url('../products/aimir/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }


  .aimir-page .image-item {
    flex: 1 1 400px;
    max-width: 500px;
  }

  .aimir-page .image-item img {
    width: 100%;
    height: 300px;
    display: block;
  }

  .aimir-logo { 
    letter-spacing: 0.25em;
  }

  .aimir-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem !important;
  }

  .aimir-page .cards.vertical .card {
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
    color: #000000;
  }
  .aimir-page .cards.vertical .card:hover {
    transform: translateY(-6px);
  }

  .net-adm-page .btn-modern ,
  .aimir-page .btn-modern ,
  .zenkla-page .btn-modern {
    padding: 0.5rem 1.25rem;
    background-color: #00A0E3;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 9999px; /* pill shape */
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .net-adm-page .btn-modern:hover ,
  .aimir-page .btn-modern:hover ,
  .zenkla-page .btn-modern:hover {
    background-color: var(--tertiary-color);
    transform: translateY(-2px);
  }

  .aimir-image {
    flex: 1 1 50%;
    min-width: 400px;
    max-width: 600px;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .aimir-image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .function-image {
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .aimir-plc-image {
    width: 220px;  
    min-height: 0;
    flex: 0 0 auto;
  }

  .aimir-plc-image img {
    display: block;
    width: 100%; 
    height: auto; 
  }

/* ================================================================= */
/* netadm_index.html */
/* ================================================================= */


  .hero_net-adm {
    position: relative;
    height: 50vh;
    background: url('../products/net-adm/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }


  .net-adm-page .image-item {
    flex: 1 1 400px;
    max-width: 500px;
  }

  .net-adm-page .image-item img {
    width: 100%;
    height: 300px;
    display: block;
  }

  .net-adm-logo {
    letter-spacing: 0.25em;
  }

  .net-adm-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem !important;
  }

  .net-adm-page .cards.vertical .card {
    padding: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
    color: #000000;
  }

  .net-adm-page .cards.vertical .card:hover {
    transform: translateY(-6px);
  }

  #tab-it-asset .card h4 ,
  #tab-monitoring .card h4 ,
  #tab-remote .card h4 ,
  #tab-report .card h4 ,
  #faq .card h4 {
    font-size: 1.0rem;
    margin-bottom: 0.75rem;
    text-align: center;
  }

  #faq .card p ,
  #overview .card p ,
  #tab-it-asset .card p ,
  #tab-monitoring .card p ,
  #tab-remote .card p ,
  #tab-report .card p ,
  #faq .card p {
    font-size: 1.0rem;
    text-align: left;
  }

  .net-adm-image {
    flex: 1 1 50%;
    min-width: 400px;
    max-width: 500px;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .net-adm-image img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
  }

  .modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
  }

  .modal-close {
    position: absolute;
    top: 30px;
    right: 45px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }

/* ================================================================= */
/* company_index.html */
/* ================================================================= */

  .hero_company {
    position: relative;
    height: 50vh;
    background: url('../images/mzn_Company.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }

  .company-logo {
    letter-spacing: 0.25em;
  }

  .company-company {
    min-height: 400px;
    position: relative;
    background: url('../company/images/mzn_company.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }
  .company-nuriink {
    min-height: 400px;
    position: relative;
    background: url('../company/images/mzn_nuriinc.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }
  .company-nurivista {
    min-height: 400px;
    position: relative;
    background: url('../company/images/mzn_nurivista.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }

  /* ==== company_index.html 沿革：2列・縦順・縦線接続 ==== */
  .timeline-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
  }

  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 4px solid var(--secondary-color); /* 各列で縦線をつなげる */
    position: relative;
  }

  .timeline li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .timeline li::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: -10px;
    width: 16px;
    height: 16px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px var(--secondary-color);
  }

  .timeline-date {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: .25rem;
    display: block;
  }

  .timeline-content {
    font-size: 1rem;
    line-height: 1.7;
  }



  eo-embed video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    display: block;
  }

  .company-info-container {
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: 1rem;
    flex: 1 1 40%;
    min-width: 280px;
  }

  .company-image.wide-map {
    flex: 1 1 40%;              /* ← 横幅を拡張 */
    max-width: 600px;           /* ← よりワイドに */
    min-width: 400px;
  }

  .company-image.wide-map #map_canvas {
    width: 100%;
    height: 300px;              /* ← 高さも維持または拡大 */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

/* ================================================================= */
/* download_index.html */
/* ================================================================= */

  .hero_download {
    position: relative;
    height: 50vh;
    background: url('../images/mzn_download.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }

  
  .download-logo {
    letter-spacing: 0.25em;
  }

  .feature-section {
    padding: 4rem 2rem;
  }

  .download-page .card p {
    text-align: left;
  }

  .download-page .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左寄せ */
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
  }

  .download-page .card {
    width: calc(50% - 2rem); /* 2列表示用：余白含めて半分の幅に */
    min-width: 400px;         /* 横幅広めに */
    background: var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 2rem;
    text-align: left;
    transition: transform 0.3s ease;
    box-sizing: border-box;
  }



/* ================================================================= */
/* security_index.html */
/* ================================================================= */
  .signature{
    text-align:right;
  }


/* ================================================================= */
/* contact_index.html */
/* ================================================================= */
  .hero_contact {
    position: relative;
    height: 50vh;
    background: url('../images/mzn_Contact.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }
  
  .contact-logo {
    letter-spacing: 0.25em;
  }

  .contact-zendesk {
    min-height: 300px;
    position: relative;
    background: url('../images/mzn_zen.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }

  .contact-aimir {
    min-height: 200px;
    position: relative;
    background: url('../products/aimir/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }

  .contact-net-adm {
    min-height: 200px;
    position: relative;
    background: url('../products/net-adm/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }
  .contact-ems {
    min-height: 300px;
    position: relative;
    background: url('../products/ems/images/jumbotron.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }
  .contact-download {
    min-height: 300px;
    position: relative;
    background: url('../images/mzn_download.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }

  .contact-question {
    min-height: 400px;
    position: relative;
    background: url('../images/mzn_question.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
    font-size: 2rem; 
  }
/* ================================================================= */
/* inquiryFm,addkeyFm,newkeyFm,admsuptFm.html */
/* ================================================================= */
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 1.5rem 0;
    box-sizing: border-box;
    transition: border-color 0.3s;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  textarea:focus {
    border-bottom: 2px solid var(--secondary-color);
    outline: none;
  }

  ::placeholder {
    color: #aaa;
    font-style: italic;
  }


/* ================================================================= */
/* employment_index.html */
/* ================================================================= */

  .hero_employment {
    position: relative;
    height: 50vh;
    background: url('../images/mzn_employment.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    background-size: 100%;
  }
  
  .employment-logo {
    letter-spacing: 0.25em;
  }

/* =========================================================
   モバイル最適化（2025-09 追加）
   - ヒーローのタイポグラフィ縮小
   - セクションは縦積み＆広めの上下余白
   - ナビは簡潔＆タップしやすく
   ========================================================= */

/* ベース：押しやすいタップ領域、本文の行間 */
a, button { min-height: 44px; }
body { line-height: 1.7; }

/* セクションの上下余白（本文をゆったり見せる） */
.top-section, .section { padding-top: 4rem; padding-bottom: 4rem; }

/* --- タブレット以下（1024px）--- */
@media (max-width: 1024px) {
  /* 見出しは大きすぎない範囲に抑える */
  .top-section h3,
  .section h3,
  .top-page .feature-text h4,
  .section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    letter-spacing: 0.02em;
  }
  .top-page .feature-text p {
    font-size: clamp(1.0rem, 2.2vw, 1.2rem);
    letter-spacing: 0.02em;
  }
  .top-page .card {
    font-size: clamp(1.0rem, 2.2vw, 1.4rem);
    letter-spacing: 0.02em;
  }
  .hero {
    height: 64vh;                /* 100vh→少し低め */
    background-size: cover;      /* 過度なズームを抑制（既存はズームアニメ） */
    animation: none;             /* 初回ズーム演出を停止して可読性優先 */
    padding: 0 1rem;
  }
  header h1 img {
    width: 230px;  
    height: auto;
  }
  /* 画像は角丸+軽い影のまま、横幅100%で安定 */
  .feature-image img,
  .top-page .feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
}


/* --- 480px以下：タイポをさらに落ち着かせる --- */
@media (max-width: 480px) {
  .hero { height: 56vh; }
  .hero h2 { font-size: 1.9rem; }
  .hero p { font-size: 1rem; }
  .top-page .card img { width: 220px; }
  .feature-text p, .top-page .feature-text p { font-size: 1rem; line-height: 1.75; }
}

/* =========================================================
   ハンバーガーメニュー対応
   ========================================================= */

/* 初期状態は非表示 */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* スマホを横にした場合には、メニューはそのまま、
タブメニューは上部移動し、非表示 */
@media (max-width: 1024px) {
  .company-company,
  .company-nuriink,
  .company-nurivista,
  .contact-aimir,
  .contact-zendesk,
  .contact-ems,
  .contact-download,
  .contact-net-adm ,
  .contact-question {
    background-size: cover !important;   /* ← 幅100%より自然に全体をカバー */
    background-position: center center;  /* ← 中央寄せでトリミングバランスを取る */
    min-height: 320px;                   /* ← 背景が窮屈に見えない高さ */
    width: 100vw;                        /* ← 画面幅いっぱいに広げる */
     margin-left: calc(-1 * (100vw - 100%)/2); /* ← 横方向のズレ防止 */
  }
  .hero {
    height: 64vh;                /* 100vh→少し低め */
    background-size: cover;      /* 過度なズームを抑制（既存はズームアニメ） */
    animation: none;             /* 初回ズーム演出を停止して可読性優先 */
    padding: 0 1rem;
  }
  .hero h2 {                     /* 既存: 5rem を縮小:contentReference[oaicite:2]{index=2} */
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  .hero p {
    font-size: 1.05rem;
    max-width: 42ch;
    margin: 0 auto;
  }

  /* ヘッダー/ナビ：nuriflex風の簡潔さ（横並びを詰めて押しやすく） */
  header { padding: 0.5rem 0.75rem; }


  /* PRODUCT カードは1カラム（nuriflex.comの縦カード感） */
  #services .cards {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
    padding: 0 1rem;
  }

  /* 画像の最大高さを抑制（縦長化を防止） */
  .feature-image img,
  .top-page .feature-image img,
  .aimir-page .image-item img,
  .net-adm-page .image-item img {
    max-height: 240px;
    object-fit: cover;
  }

  /* 固定系UIの再配置（左タブ→上に） */
  .vertical-tabs { position: static; width: 100%; border-right: none; }
  .aimir-page .tab-content,
  .ems-page .tab-content,
  .zenkla-page .tab-content,
  .net-adm-page .tab-content { padding-left: 0; }

  .tab-menu {
    display: none;
    flex-direction: column;
    background: var(--bg-light);
    border-radius: 4px;
    margin-top: 0.5rem;
    width: 140px;
  }

  .tab-menu.is-open {
    display: flex;
  }

  .tab-menu li a {
    display: block;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: var(--primary-color);
    border-bottom: 1px solid #ccc;
  }

  .tab-menu li.active a {
    background: var(--secondary-color);
    color: #fff;
  }

  .tab-menu li:last-child a {
    border-bottom: none;
  }

  /* ページ個別の崩れ防止（既存CSSを上書き） */
  .support-page .netadm-card-grid { grid-template-columns: 1fr; } /* 既存再強制:contentReference[oaicite:6]{index=6} */
  .download-page .card { width: 100%; min-width: unset; }
  .company-image { min-width: unset; width: 100%; }
  .company-image #map_canvas { height: 220px; }

  /* 横スクロールを完全に禁止 */
  html {
    max-width: 100%;
    overflow-x: hidden;
  }

  body { 
    max-width: 100%;
    overflow-x: hidden;
    background-size: cover;
    background-attachment: scroll; /* ← スマホではfixedは非推奨 */
  }

  /* コンテンツは“縦積み”＆読みやすい幅に */
  .feature-row,
  .feature-row.reverse,
  .top-page .feature-row,
  .top-page .feature-row.reverse {
    flex-direction: column;      /* 既存は横並び→縦積みへ:contentReference[oaicite:5]{index=5} */
    gap: 1.25rem;
    max-width: 100%;
  }

  /* servicesセクションも横スクロール対策 */
  #services .cards {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .support-page .netadm-card-grid {
    grid-template-columns: 1fr;
  }

  .timeline-wrapper {
    grid-template-columns: 1fr;
  }
  .net-adm-page .cards.vertical ,
  .ems-page .cards.vertical ,
  .aimir-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem !important;
  }
}
/* --- スマホ主要調整（768px以下）--- */
@media (max-width: 768px) {
  .company-company,
  .company-nuriink,
  .company-nurivista,
  .contact-aimir,
  .contact-zendesk,
  .contact-ems,
  .contact-download,
  .contact-net-adm ,
  .contact-question {
    background-size: cover !important;   /* ← 幅100%より自然に全体をカバー */
    background-position: center center;  /* ← 中央寄せでトリミングバランスを取る */
    min-height: 320px;                   /* ← 背景が窮屈に見えない高さ */
    width: 100vw;                        /* ← 画面幅いっぱいに広げる */
     margin-left: calc(-1 * (100vw - 100%)/2); /* ← 横方向のズレ防止 */
  }
  .hero {
    height: 64vh;                /* 100vh→少し低め */
    background-size: cover;      /* 過度なズームを抑制（既存はズームアニメ） */
    animation: none;             /* 初回ズーム演出を停止して可読性優先 */
    padding: 0 1rem;
  }

  .hero h2 {                     /* 既存: 5rem を縮小:contentReference[oaicite:2]{index=2} */
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  .hero p {
    font-size: 1.05rem;
    max-width: 42ch;
    margin: 0 auto;
  }

  /* ヘッダー/ナビ：nuriflex風の簡潔さ（横並びを詰めて押しやすく） */
  header { padding: 0.5rem 0.75rem; }

  /* ドロップダウンは常時展開（タップで出ない問題の軽減） */
  .dropdown {
    position: static;
    display: block;
    background: transparent;
    padding: 0.25rem 0 0.5rem;
    min-width: unset;
  }
  .dropdown li a { padding: 0.35rem 0; }


  /* PRODUCT カードは1カラム（nuriflex.comの縦カード感） */
  #services .cards {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
    padding: 0 1rem;
  }

  /* 画像の最大高さを抑制（縦長化を防止） */
  .feature-image img,
  .top-page .feature-image img,
  .aimir-page .image-item img,
  .net-adm-page .image-item img {
    max-height: 240px;
    object-fit: cover;
  }

  /* 固定系UIの再配置（左タブ→上に） */
  .vertical-tabs { position: static; width: 100%; border-right: none; }
  .aimir-page .tab-content,
  .ems-page .tab-content,
  .zenkla-page .tab-content,
  .net-adm-page .tab-content { padding-left: 0; }

  .tab-menu {
    display: none;
    flex-direction: column;
    background: var(--bg-light);
    border-radius: 4px;
    margin-top: 0.5rem;
    width: 140px;
  }

  .tab-menu.is-open {
    display: flex;
  }

  .tab-menu li a {
    display: block;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: var(--primary-color);
    border-bottom: 1px solid #ccc;
  }

  .tab-menu li.active a {
    background: var(--secondary-color);
    color: #fff;
  }

  .tab-menu li:last-child a {
    border-bottom: none;
  }

  /* ページ個別の崩れ防止（既存CSSを上書き） */
  .support-page .netadm-card-grid { grid-template-columns: 1fr; } /* 既存再強制:contentReference[oaicite:6]{index=6} */
  .download-page .card { width: 100%; min-width: unset; }
  .company-image { min-width: unset; width: 100%; }
  .company-image #map_canvas { height: 220px; }

  /* 横スクロールを完全に禁止 */
  html {
    max-width: 100%;
    overflow-x: hidden;
  }

  body { 
    max-width: 100%;
    overflow-x: hidden;
    background-size: cover;
    background-attachment: scroll; /* ← スマホではfixedは非推奨 */
  }

  .menu-toggle {
    display: block;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    z-index: 1500;
  }

  /* ナビゲーションの余白を削除して横スクロール防止 */
  nav ul {
  }

  nav ul li {
  }

  /* ナビゲーションはデフォルト非表示 */
  nav ul {
    display: none;
    flex-direction: column;
    background-color: var(--primary-color);
    position: absolute;
    top: 60px; /* ヘッダーの高さに合わせる */
    right: 0;
    width: 100%;
    padding: 1rem 0;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1400;
  }

  /* メニュー展開時のみ表示 */
  nav ul.is-open {
    display: flex;
  }

  /* 各リンクを縦並び＆タップしやすく */
  nav ul li {
    width: 100%;
    padding: 0;
    text-align: center;
  }

  nav ul li a {
    display: block;
    padding: 0.9rem 0;
    color: #fff;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  nav ul li a:hover {
    background-color: var(--secondary-color);
    color: #fff;
  }

  /* コンテンツは“縦積み”＆読みやすい幅に */
  .feature-row,
  .feature-row.reverse,
  .top-page .feature-row,
  .top-page .feature-row.reverse {
    flex-direction: column;      /* 既存は横並び→縦積みへ:contentReference[oaicite:5]{index=5} */
    gap: 1.25rem;
    max-width: 100%;
  }

  /* servicesセクションも横スクロール対策 */
  #services .cards {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .support-page .netadm-card-grid {
    grid-template-columns: 1fr;
  }

  .timeline-wrapper {
    grid-template-columns: 1fr;
  }
  .net-adm-page .cards.vertical ,
  .ems-page .cards.vertical ,
  .aimir-page .cards.vertical {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem !important;
  }
}