/* ==========================================================================
       Base & CSS Variables
       ========================================================================== */
    :root {
      --primary-color: #0d0d0d;
      --bg-dark: #111111;
      --bg-light: #f9f9f9;
      --text-color: #111111;
      --text-sub: #777777;
      --text-footer: #e0e0e0;
      --border-color: #e0e0e0;
      --border-light: #f0f0f0;
      --font-base: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
      --header-height: 70px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-base);
      color: var(--text-color);
      line-height: 1.6;
      background-color: #ffffff;
      overflow-x: hidden;
    }

    body.menu-open {
      overflow: hidden; /* メニュー展開時の背景スクロール防止 */
    }

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

    a:hover {
      opacity: 0.85;
    }

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

.wrapper {
	width: 1050px;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.wrapsize02 {
	margin-left: auto;
	margin-right: auto;
	max-width: 90%;
}
.wrapsize03 {
	margin-left: auto;
	margin-right: auto;
	max-width: 94%;
}

hr.line {
	width: 100%;
	border: 0px;
	height: 1px;
	background: #eee;
}
    /* ==========================================================================
       Company Logo
       ========================================================================== */
    .company-logo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #ffffff;
      font-family: var(--font-base);
    }

    .company-logo .sub {
      font-size: 17px;
      line-height: 1.1;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: justify;
      text-align-last: justify;
    }

    .company-logo .main {
      font-size: 38px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 1;
    }

    /* ==========================================================================
       Fixed Header
       ========================================================================== */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--header-height);
      background-color: transparent;
      z-index: 100;
      transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
		padding-top: 60px;
    }

    /* メニュー開時に元ヘッダーを完全に隠す非表示制御 */
    .site-header.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .site-header.scrolled {
		padding-top: 0px;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(5px);
      border-bottom: 1px solid var(--border-color);
    }

    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 30px;
    }
.navwrap {
	      display: flex;
      justify-content: space-between;
      align-items: center;
	gap: 50px;
}
    .header-inner .company-logo {
      color: #000000;
    }

    .header-nav ul {
      display: flex;
      list-style: none;
      gap: 28px;
    }

    .header-nav a {
      font-size: 20px;
      font-weight: 500;
      color: #111111;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .insta-icon {
      display: flex;
      align-items: center;
      color: #000000;
    }

    /* トリガーボタン共通スタイル */
    .header-menu-box {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: #ffffff;
      border: 2px solid #1a1a1a;
      border-radius: 8px;
      padding: 20px 35px;
      cursor: pointer;
      transition: background-color 0.25s ease, transform 0.25s ease;
    }
.header-menu-box span { font-size: 18px; }
    .header-menu-box:hover {
      background-color: #f8f8f8;Z
      transform: translateY(-1px);
    }

    .header-menu-box span.menu-text {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #000000;
    }

    .hamburger-lines {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 28px;
      height: 18px;
    }

    .hamburger-lines span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: #000000;
      border-radius: 1px;
    }

    /* ==========================================================================
       Full Screen Overlay Menu & Sitemap (メニュー展開時の専有ビュー)
       ========================================================================== */
    .full-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #0d0d0d;
      color: #ffffff;
      z-index: 200; /* ヘッダーより上位に配置 */
      opacity: 0;
      visibility: hidden;
      overflow-y: auto;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      display: flex;
      flex-direction: column;
    }

    .full-menu.active {
      opacity: 1;
      visibility: visible;
    }

    /* オーバーレイ右上固定の閉じる（CLOSE）ボタン */
    .full-menu-header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: var(--header-height);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 30px;
    }

    .menu-close-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: #ffffff;
      border: 1px solid #1a1a1a;
      border-radius: 8px;
      padding: 20px 35px;
      cursor: pointer;
      color: #000000;
    }

    .menu-close-btn span.close-text {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 1.5px;
    }

    .close-cross {
      position: relative;
      width: 16px;
      height: 16px;
    }

    .close-cross span {
      position: absolute;
      top: 7px;
      left: 0;
      width: 26px;
      height: 2px;
      background-color: #000000;
    }

    .close-cross span:nth-child(1) {
      transform: rotate(45deg);
    }

    .close-cross span:nth-child(2) {
      transform: rotate(-45deg);
    }

    /* サイトマップコンテンツコンテナ */
    .full-menu-inner {
      max-width: 1100px;
      width: 100%;
      margin: 0 auto;
      padding: 120px 20px 80px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .sitemap-title {
      font-size: 14px;
      letter-spacing: 3px;
      color: #888888;
      text-align: center;
      margin-bottom: 48px;
      font-weight: 600;
    }

    .sitemap-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 20px;
    }

    .sitemap-col h3 {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #ffffff;
      margin-bottom: 20px;
      border-bottom: 1px solid #333333;
      padding-bottom: 8px;
    }

    .sitemap-col ul {
      list-style: none;
    }

    .sitemap-col li {
      margin-bottom: 14px;
    }

    .sitemap-col a {
      font-size: 13px;
      color: #cccccc;
      letter-spacing: 0.5px;
      transition: color 0.25s ease, padding-left 0.25s ease;
      display: inline-block;
    }

    .sitemap-col a:hover {
      color: #ffffff;
      padding-left: 4px;
    }

    /* ==========================================================================
       Fixed Sidebar (Right)
       ========================================================================== */
    .fixed-sidebar {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
      z-index: 90;
    }

    .sidebar-block-outer {
      display: inline-block;
      border: 1px solid #1a1a1a;
      border-right: none;
      border-radius: 14px 0 0 14px;
      padding: 2.5px 0 2.5px 2.5px;
      background-color: #ffffff;
      box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.12);
    }

    .sidebar-block-inner {
      background-color: #111111;
      border-radius: 11px 0 0 11px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      overflow: hidden;
    }

    .sidebar-link {
      display: flex;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-rl;
      color: #ffffff;
      text-decoration: none;
      letter-spacing: 2.5px;
      text-align: center;
      transition: opacity 0.25s ease, background-color 0.25s ease;
      width: 100%;
    }

    .sidebar-link:hover {
      opacity: 0.88;
      background-color: #222222;
		color: #fff;
    }

    .sidebar-link.inquiry {
      font-size: 20px;
      font-weight: 500;
      padding: 22px 15px 18px;
    }

    .sidebar-link.catalog {
      font-size: 20px;
      font-weight: 400;
      padding: 16px 15px 20px;
    }

    .sidebar-divider {
      width: 24px;
      height: 1px;
      background-color: rgba(255, 255, 255, 0.6);
      margin: 2px 0;
    }

    .scroll-top-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 55px;
      background-color: #111111;
      border: none;
      border-radius: 12px 0 0 12px;
      color: #ffffff;
      font-size: 20px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.12);
      transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .scroll-top-btn:hover {
      background-color: #262626;
      transform: translateY(-2px);
    }



    /* ==========================================================================
       Footer & ABOUT US Section
       ========================================================================== */
    .site-footer {
      background-color: var(--bg-dark);
      color: var(--text-footer);
      padding: 80px 0 40px;
    }

    .footer-title {
      text-align: center;
      font-size: 32px;
      margin-bottom: 40px;
		font-weight: 600;
      color: #ffffff;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 70px;
    }

    .footer-thumb-card {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 2px;
      text-decoration: none;
      aspect-ratio: 4 / 3;
    }

    .thumb-img-wrap {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .thumb-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .thumb-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      transition: background-color 0.4s ease;
    }

    .thumb-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 10px;
      text-align: center;
      color: #ffffff;
      pointer-events: none;
      transition: transform 0.4s ease;
    }

    .thumb-text .ja-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .thumb-text .en-title {
      font-size: 13px;
      font-weight: 600;
      opacity: 0.9;
    }

    .footer-thumb-card:hover .thumb-img-wrap img {
      transform: scale(1.08);
    }

    .footer-thumb-card:hover .thumb-overlay {
      background-color: rgba(0, 0, 0, 0.25);
    }

    .footer-thumb-card:hover .thumb-text {
      transform: translate(-50%, -54%);
    }

    .footer-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      margin-bottom: 60px;
      padding: 0 10px;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 10px;
    }

    .footer-col a {
      font-size: 15px;
      color: #e0e0e0;
    }

    .footer-bottom {
      padding-top: 40px;
    }

    .footer-info-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
.footer-info-wrap .company-logo .main { font-size: 26px; }
.footer-info-wrap .company-logo .sub  { font-size: 12px; }
    .company-address {
      font-size: 12px;
      color: #cccccc;
      line-height: 1.6;
      letter-spacing: 0.5px;
    }

    .copyright {
      text-align: center;
      font-size: 11px;
      color: #888888;
      letter-spacing: 0.5px;
    }

    /* ==========================================================================
       Responsive
       ========================================================================== */
    @media (max-width: 960px) {
      .header-nav {
        display: none;
      }

      .col-4, .info-card-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .section-watermark {
        font-size: 52px;
        letter-spacing: 6px;
      }

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

      .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .info-section-bordered-wrap {
        padding: 40px 20px;
      }
    }

    @media (max-width: 600px) {
      .col-4, .info-card-grid, .sitemap-grid {
        grid-template-columns: 1fr;
      }

      .section-watermark {
        font-size: 32px;
        letter-spacing: 4px;
      }

      .hero-copy {
        left: 20px;
        right: 20px;
        font-size: 14px;
        bottom: 40px;
      }

      .fixed-sidebar {
        display: flex;
        top: unset;
        flex-direction: inherit;
        bottom: 0px;
        align-items: center;
        transform: translateY(-1px);
        gap: 0;
      }
		.sidebar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: inherit;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 2.5px;
    text-align: center;
    transition: opacity 0.25s ease, background-color 0.25s ease;
    width: 137px;
}
		.sidebar-link.inquiry {
    font-size: 14px;
    font-weight: 500;
padding: 10px;
    letter-spacing: 0px;
}
		
		.sidebar-link.catalog {
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    letter-spacing: 0px;
}
		.sidebar-block-inner {
    background-color: #111111;
    border-radius: 11px;
    display: inline-flex;
    flex-direction: initial;
    align-items: center;
    width: auto;
    overflow: hidden;
}
		
		.sidebar-divider {
    width: 1px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.6);
margin: 2px 0;
}
		.sidebar-block-outer {
    display: inline-block;
    border: 1px solid #1a1a1a;
    border-right: none;
    border-radius: 14px;
    padding: 2.5px;
    background-color: #ffffff;
    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.12);
}
		.footer-nav {
			display: none;
		}
      .thumb-text .ja-title {
        font-size: 16px;
      }

      .footer-nav {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .footer-info-wrap {
        flex-direction: column;
        text-align: center;
        gap: 15px;
      }
		.header-menu-box { padding: 10px; gap: 5px; }
		.header-right {
    gap: 10px;
}
		
		.header-inner {
    padding: 0 10px;
			justify-content: space-between;
}
		.header-inner .logo a { display: flex; }
		
		.company-logo .main {
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 1;
}
		.company-logo .sub {
    font-size: 8px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0px;
    text-align: justify;
    text-align-last: justify;
}
    }