/* ===============================================
   style.css - 最終確定版 v3 (2025-03-29)
   - 構文・競合の可能性を考慮し全体を再整理
   =============================================== */

/* ===============================================
   基本設定と変数定義
   =============================================== */
   :root {
      --main-color: #333;
      --sub-color: #777;
      --accent-color-medium: #88a1a7; /* 基準アクセントカラー */
      --accent-color-dark: #6F8B92;   /* 濃いアクセントカラー */
      --light-gray-bg: #F8F8F8;
      --white-bg: #FFFFFF;
      --border-color: #E0E0E0;
      --border-color-darker: #ccc;
      --font-family-base: 'Noto Sans JP', sans-serif;
      --container-width: 1100px;
      --padding-base: 80px;
      --padding-small: 60px;
  }
  
  /* ===============================================
     CSSリセット（簡易版）
     =============================================== */
  body, h1, h2, h3, p, ul, li, figure, figcaption, blockquote, dl, dd, ol, form, input, textarea, select, button, svg { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 100%; vertical-align: baseline; }
  ul, ol { list-style: none; }
  a { text-decoration: none; color: inherit; }
  input, textarea, select, button { appearance: none; -webkit-appearance: none; border-radius: 0; background: transparent; }
  textarea { resize: vertical; }
  *, *::before, *::after { box-sizing: border-box; }
  
  /* ===============================================
     画像・SVGレスポンシブ基本設定
     =============================================== */
  img, svg { max-width: 100%; height: auto; vertical-align: bottom; border-style: none; display: block; }
  svg { /* fill: currentColor; */ box-sizing: content-box; }
  
  /* ===============================================
     全体スタイル
     =============================================== */
  body { font-family: var(--font-family-base); font-weight: 300; color: var(--main-color); background-color: var(--white-bg); line-height: 1.8; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; width: 100%; }
  
  /* ===============================================
     セクション共通
     =============================================== */
  .section-padding { padding-top: var(--padding-base); padding-bottom: var(--padding-base); }
  .section-padding-small { padding-top: var(--padding-small); padding-bottom: var(--padding-small); }
  .bg-light-gray { background-color: var(--light-gray-bg); }
  .text-center { text-align: center; }
  .section-title { font-size: 2.2rem; font-weight: 400; text-align: center; margin-bottom: 60px; letter-spacing: 0.1em; position: relative; padding-bottom: 20px; }
  .section-title::after { content: ''; display: block; width: 60px; height: 1px; background-color: var(--accent-color-medium); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  .section-subtitle { font-size: 1.5rem; font-weight: 400; text-align: center; margin-bottom: 40px; position: relative; display: inline-block; padding-bottom: 10px; }
  .section-subtitle::after { content: ''; display: block; width: 40px; height: 1px; background-color: var(--accent-color-medium); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  
  /* ===============================================
     ページ共通タイトルエリア
     =============================================== */
  .page-title-area { border-bottom: 1px solid var(--border-color); }
  .page-title-area .section-title { margin-bottom: 20px; }
  .page-title-area p { color: var(--sub-color); font-size: 1rem; }
  .page-title-area img, .page-title-area svg.contact-page-icon { border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-top: 30px; margin-left: auto; margin-right: auto; }
  .page-title-area svg.contact-page-icon { width: 60px; height: 60px; opacity: 0.8; color: var(--sub-color); box-shadow: none; stroke-width: 1; fill: none; }
  
  /* ===============================================
     ヘッダー
     =============================================== */
  .header { border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); z-index: 100; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 20px; max-width: var(--container-width); margin: 0 auto; }
  .logo img { height: 35px; display: inline-block; }
  .global-nav ul { display: flex; gap: 5px; align-items: center; }
  .global-nav a { font-size: 0.9rem; color: var(--sub-color); transition: color 0.3s; position: relative; padding: 15px 20px; }
  .global-nav a::after { content: ''; display: block; width: 0; height: 1px; background-color: var(--accent-color-medium); position: absolute; bottom: 0; left: 0; transition: width 0.3s ease; }
  .global-nav a:hover, .global-nav li.current-menu-item a { color: var(--main-color); }
  .global-nav a:hover::after, .global-nav li.current-menu-item a::after { width: 100%; }
  .btn-contact-nav { font-size: 0.9rem; padding: 8px 30px; border: 1px solid var(--accent-color-medium); border-radius: 30px; color: var(--accent-color-medium); transition: background-color 0.3s, color 0.3s; white-space: nowrap; width: auto; min-width: 0; display: inline-block; vertical-align: middle; line-height: normal; text-align: center; cursor: pointer; }
  .btn-contact-nav:hover { background-color: var(--accent-color-medium); color: var(--white-bg); }
  .mobile-menu-button { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 20px; position: relative; }
  .mobile-menu-button span { display: block; width: 100%; height: 2px; background-color: var(--main-color); position: absolute; left: 0; transition: transform 0.3s, opacity 0.3s; }
  .mobile-menu-button span:nth-child(1) { top: 0; }
  .mobile-menu-button span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .mobile-menu-button span:nth-child(3) { bottom: 0; }
  .mobile-menu-button.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .mobile-menu-button.is-active span:nth-child(2) { opacity: 0; }
  .mobile-menu-button.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  body.no-scroll { overflow: hidden; }
  
  /* ===============================================
     アイコン共通スタイル (SVG用)
     =============================================== */
  .problem-icon, .service-icon, .strength-icon, .philosophy-icon, .cta-icon, .category-icon, .contact-page-icon { margin-left: auto; margin-right: auto; color: var(--accent-color-medium); opacity: 0.8; stroke-width: 1.5; fill: none; }
  .problem-icon { width: 45px; height: 45px; margin-bottom: 15px; stroke-width: 1.5; color: var(--sub-color); opacity: 1; }
  .service-icon { width: 40px; height: 40px; margin-bottom: 20px; stroke-width: 1; }
  .strength-icon { width: 50px; height: 50px; margin-bottom: 15px; stroke-width: 1; }
  .philosophy-icon { width: 45px; height: 45px; margin-bottom: 15px; stroke-width: 1; }
  .cta-icon { width: 50px; height: 50px; margin-bottom: 15px; stroke-width: 1; color: rgba(255, 255, 255, 0.8); opacity: 1; }
  .category-icon { width: 55px; height: 55px; margin-bottom: 25px; stroke-width: 1; opacity: 0.9; }
  .contact-page-icon { width: 60px; height: 60px; margin-top: 30px; opacity: 0.8; color: var(--sub-color); stroke-width: 1; }
  .inline-icon { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.05em; margin-left: 5px; fill: currentColor; opacity: 0.7; stroke-width: 0; }
  
  /* ===============================================
     ボタン共通
     =============================================== */
  .btn { display: inline-block; padding: 14px 35px; border-radius: 30px; text-align: center; font-weight: 700; font-size: 1rem; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s; cursor: pointer; border: 1px solid transparent; box-shadow: 0 2px 5px rgba(0,0,0,0.1); white-space: nowrap; text-decoration: none; vertical-align: middle; line-height: normal; width: auto; min-width: 0; opacity: 1; visibility: visible; transform: none; }
  .btn:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.15); transform: translateY(-2px); }
  .btn-primary { background-color: var(--accent-color-medium); color: var(--white-bg); border-color: var(--accent-color-medium); }
  .btn-primary:hover { background-color: var(--accent-color-dark); border-color: var(--accent-color-dark); }
  .btn-lg { padding: 18px 50px; font-size: 1.1rem; }
  .btn-secondary { background-color: transparent; color: var(--accent-color-medium); border: 1px solid var(--accent-color-medium); box-shadow: none; }
  .btn-secondary:hover { background-color: var(--light-gray-bg); color: var(--accent-color-dark); border-color: var(--accent-color-dark); box-shadow: none; transform: none; }
  
  /* ===============================================
     レイアウト・セクション別 スタイル
     =============================================== */
  
  /* --- トップページ --- */
  .hero { position: relative; height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background-color: var(--light-gray-bg); }
  .hero-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
  .hero-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }
  .hero-content { position: relative; z-index: 2; padding: 0 20px; }
  .hero-content h2 { font-size: 3rem; font-weight: 300; margin-bottom: 25px; line-height: 1.4; color: #222; }
  .hero-content p { font-size: 1.2rem; color: var(--sub-color); }
  
  .problem-solution .section-title { margin-bottom: 50px; }
  .problem-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
  .problem-item { border: 1px solid var(--border-color); padding: 30px 20px; text-align: center; border-radius: 8px; background-color: var(--white-bg); }
  .problem-item p { font-weight: 400; font-size: 1rem; }
  .solution-message { text-align: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 30px; position: relative; display: inline-block; padding-bottom: 5px; }
  .solution-message::after { content: ''; display: block; height: 2px; width: 100%; background-color: var(--accent-color-medium); position: absolute; bottom: 0; left: 0; }
  .solution-image-wrapper img { border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-top: 30px; margin-left: auto; margin-right: auto; }
  
  .services .service-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
  .services .service-category { background-color: var(--white-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 40px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.3s, transform 0.3s; }
  .services .service-category:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.06); transform: translateY(-4px); }
  .services .category-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 25px; color: var(--main-color); }
  .services .service-items-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 20px; }
  .services .service-item-small span { display: inline-block; border: 1px solid var(--border-color-darker); border-radius: 20px; padding: 6px 15px; font-size: 0.85rem; color: var(--sub-color); background-color: var(--white-bg); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
  .services .service-item-small:hover span { background-color: var(--light-gray-bg); border-color: var(--accent-color-medium); color: var(--accent-color-medium); }
  
  .strengths-main .section-title { margin-bottom: 50px; }
  .strengths-main-content { display: flex; gap: 50px; align-items: center; }
  .strengths-main-image { max-width: 45%; /* flex-basisから変更 */ height: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.07); flex-shrink: 0; }
  .strengths-main-content div { flex: 1; }
  .strengths-main-content p { font-size: 1.1rem; line-height: 1.9; margin-bottom: 1.5em; }
  .strengths-main-content strong { font-weight: 700; color: var(--accent-color-dark); }
  
  .portfolio-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 50px; }
  .portfolio-item a { display: block; border: 1px solid var(--border-color); background-color: var(--white-bg); transition: box-shadow 0.3s, transform 0.3s; border-radius: 8px; overflow: hidden; }
  .portfolio-item a:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-5px); }
  .portfolio-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .portfolio-item p { padding: 20px; text-align: center; font-size: 1rem; font-weight: 400; }
  
  .testimonial-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
  .testimonial-item { display: flex; align-items: flex-start; gap: 25px; }
  .customer-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 10px; }
  .testimonial-item blockquote { background-color: var(--light-gray-bg); padding: 30px; border-left: 4px solid var(--accent-color-medium); border-radius: 8px; flex-grow: 1; position: relative; }
  .testimonial-item blockquote::before { content: ''; position: absolute; top: 20px; left: -10px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent var(--light-gray-bg) transparent transparent; }
  .testimonial-item blockquote p { margin-bottom: 20px; font-style: normal; font-size: 1rem; line-height: 1.7; }
  .testimonial-item blockquote footer { text-align: right; font-size: 0.9rem; color: var(--sub-color); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
  .customer-logo { max-height: 20px; width: auto; opacity: 0.7; display: inline-block; }
  
  .news-items { margin-bottom: 50px; border-top: 1px solid var(--border-color); }
  .news-item { padding: 25px 0; border-bottom: 1px solid var(--border-color); }
  .news-item-link { display: flex; align-items: flex-start; gap: 25px; transition: opacity 0.3s; }
  .news-item-link:hover { opacity: 0.7; }
  .news-thumbnail { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
  .news-item-content { flex-grow: 1; }
  .news-item time { font-size: 0.85rem; color: var(--sub-color); display: block; margin-bottom: 5px; }
  .news-category { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; color: var(--white-bg); display: inline-block; margin-right: 10px; margin-bottom: 8px; }
  .category-news { background-color: var(--accent-color-medium); }
  .category-blog { background-color: #B0BEC5; }
  .news-item h3 { font-size: 1.1rem; font-weight: 400; line-height: 1.5; margin-bottom: 5px; }
  .news-excerpt { font-size: 0.9rem; color: var(--sub-color); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  
  .cta { background-color: var(--accent-color-medium); color: var(--white-bg); text-align: center; }
  .cta h2 { font-size: 1.8rem; margin-bottom: 15px; font-weight: 700; }
  .cta p { margin-bottom: 40px; opacity: 0.9; font-size: 1rem; line-height: 1.7; }
  .cta-buttons { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; width: 100%; align-items: center; }
  .cta-links { margin-top: 25px; }
  .cta-links a { color: var(--white-bg); text-decoration: underline; margin: 0 15px; font-size: 0.9rem; transition: opacity 0.3s; }
  .cta-links a:hover { opacity: 0.8; }
  
  /* --- service.html --- */
  .service-category-list .service-category-item { display: flex; gap: 40px; background-color: var(--white-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 40px; overflow: hidden; align-items: center; }
  .service-category-list .service-category-item:nth-child(even) { background-color: var(--light-gray-bg); flex-direction: row-reverse; }
  .service-category-list .service-category-item img { width: 40%; flex-shrink: 0; object-fit: cover; align-self: stretch; }
  .service-category-list .category-content { padding: 40px; flex-grow: 1; }
  .service-category-list .category-content h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; color: var(--main-color); }
  .service-category-list .category-content p { font-size: 1rem; color: var(--sub-color); margin-bottom: 25px; line-height: 1.8; }
  .service-category-list .category-content ul { list-style: none; padding-left: 0; margin-bottom: 30px; }
  .service-category-list .category-content ul li { margin-bottom: 10px; font-size: 1rem; position: relative; padding-left: 20px; }
  .service-category-list .category-content ul li::before { content: '›'; position: absolute; left: 0; top: 0; color: var(--accent-color-medium); font-weight: 700; font-size: 1.2em; }
  .service-category-list .category-content ul li a { color: var(--main-color); text-decoration: underline; text-decoration-color: var(--accent-color-medium); text-underline-offset: 3px; transition: color 0.3s; }
  .service-category-list .category-content ul li a:hover { color: var(--accent-color-medium); }
  .service-category-list .category-content .btn { margin-top: 10px; }
  .service-detail-group .section-subtitle { margin-bottom: 30px; }
  .service-detail-group p { font-size: 1rem; margin-bottom: 1.5em; text-align: center; }
  .service-detail-group p a { font-weight: 700; }
  .service-main-image { width: 100%; margin: 0 auto 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
  .service-detail h2 { text-align: center; font-size: 1.8rem; margin-bottom: 15px; font-weight: 400; }
  .service-detail > .container > p { text-align: center; color: var(--sub-color); margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; }
  .service-detail-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 40px; border-top: 1px solid var(--border-color); padding-top: 50px; }
  .service-detail-content h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); position: relative; }
  .service-detail-content h3::before { content: ''; display: block; width: 40px; height: 2px; background-color: var(--accent-color-medium); position: absolute; bottom: -1px; left: 0; }
  .service-detail-content ul, .service-detail-content ol { padding-left: 20px; }
  .service-detail-content ul li, .service-detail-content ol li { margin-bottom: 12px; font-size: 0.95rem; padding-left: 10px; position: relative; }
  .service-detail-content ul li { list-style: none; }
  .service-detail-content ul li::before { content: ''; display: inline-block; width: 4px; height: 4px; background-color: var(--accent-color-medium); border-radius: 50%; position: absolute; left: -10px; top: 0.6em; }
  .service-detail-content ol { list-style: decimal; }
  .service-detail-image { margin-top: 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
  .related-portfolio-thumb { width: 100%; max-width: 200px; margin-top: 10px; border-radius: 4px; border: 1px solid var(--border-color); transition: opacity 0.3s; }
  .related-portfolio-thumb:hover { opacity: 0.8; }
  .cart-logos { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-top: 15px; }
  .cart-logos img { height: 30px; opacity: 0.7; transition: opacity 0.3s; display: inline-block; }
  .cart-logos img:hover { opacity: 1; }
  .graphic-items-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; padding-left: 0; }
  .graphic-items-list li { text-align: center; font-size: 0.85rem; color: var(--sub-color); padding-left: 0; }
  .graphic-items-list li::before { display: none; }
  .graphic-items-list img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: 8px; border: 1px solid var(--border-color); }
  
  /* --- why-us.html --- */
  .strength-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 30px; }
  .strength-item { text-align: center; }
  .strength-item p { font-size: 0.95rem; color: var(--sub-color); text-align: left; }
  .strength-core .section-subtitle { margin-bottom: 50px; }
  .core-strength-content { display: flex; gap: 50px; align-items: center; margin-bottom: 60px; }
  .core-strength-text { flex: 1; }
  .core-strength-text h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
  .core-strength-text p { font-size: 1rem; line-height: 1.9; margin-bottom: 1.5em; }
  .core-strength-content img { max-width: 45%; height: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.07); flex-shrink: 0; }
  .core-strength-application { margin-top: 60px; border-top: 1px solid var(--border-color); padding-top: 50px; }
  .core-strength-application h3 { text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 30px; }
  .core-strength-application p { text-align: center; color: var(--sub-color); margin-bottom: 30px; font-size: 1rem; }
  .core-strength-application ul { list-style: none; padding-left: 0; max-width: 800px; margin: 0 auto; }
  .core-strength-application ul li { margin-bottom: 15px; font-size: 1.05rem; padding-left: 30px; position: relative; line-height: 1.7; }
  .core-strength-application .emphasis { font-weight: 700; color: var(--accent-color-dark); }
  .core-strength-application ul li::before { content: ''; position: absolute; left: 5px; top: 0.5em; width: 6px; height: 12px; border: solid var(--accent-color-medium); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  /* .strengths-other .strength-items は上記の共通スタイルを使用 */
  .customer-benefits ul { list-style: none; padding-left: 0; max-width: 850px; margin: 0 auto; }
  .customer-benefits li { font-size: 1.1rem; margin-bottom: 20px; padding-left: 35px; position: relative; line-height: 1.7; }
  .customer-benefits .check-icon { position: absolute; left: 0; top: 0.1em; color: var(--accent-color-medium); font-size: 1.5em; font-weight: bold; line-height: 1; }
  
  /* --- portfolio.html --- */
  .portfolio-filter { border-bottom: 1px solid var(--border-color); padding-bottom: var(--padding-small); }
  .filter-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
  .btn-filter { background-color: transparent; border: 1px solid var(--border-color); color: var(--sub-color); padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; box-shadow: none; }
  .btn-filter:hover { background-color: var(--light-gray-bg); border-color: var(--accent-color-medium); color: var(--accent-color-medium); transform: none; box-shadow: none; }
  .btn-filter.is-active { background-color: var(--accent-color-medium); border-color: var(--accent-color-medium); color: var(--white-bg); }
  .pagination { margin-top: 60px; text-align: center; }
  .pagination ul { display: inline-flex; gap: 8px; }
  .page-numbers { display: block; width: 40px; height: 40px; line-height: 38px; text-align: center; border: 1px solid var(--border-color); border-radius: 50%; color: var(--sub-color); font-size: 0.9rem; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
  .page-numbers:hover { border-color: var(--accent-color-medium); color: var(--accent-color-medium); }
  .page-numbers.current { background-color: var(--accent-color-medium); border-color: var(--accent-color-medium); color: var(--white-bg); font-weight: 700; }
  
  /* --- about.html --- */
  .message-content { display: flex; gap: 40px; align-items: center; } /* why-us と共通 */
  .president-photo { width: 200px; border-radius: 8px; flex-shrink: 0; }
  .message-content h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 20px; line-height: 1.6; }
  .message-content p { margin-bottom: 1.5em; font-size: 0.95rem; color: var(--sub-color); }
  .signature { text-align: right; font-weight: 700; margin-top: 30px; }
  .philosophy-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; margin-bottom: 40px; } /* ★ Grid指定を確実に */
  .philosophy-items h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
  .philosophy-items p, .philosophy-items ul { font-size: 0.95rem; color: var(--sub-color); text-align: left; }
  .philosophy-items ul { padding-left: 0; list-style: none; }
  .philosophy-items ul li { margin-bottom: 5px; }
  .philosophy img { margin-top: 30px; width: 100%; margin-left: auto; margin-right: auto; border-radius: 8px; }
  .company-info-container { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; align-items: flex-start; }
  .info-table { border-top: 1px solid var(--border-color); }
  .info-table dt, .info-table dd { padding: 18px 10px; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; display: flex; align-items: baseline; }
  .info-table dt { font-weight: 700; background-color: var(--light-gray-bg); width: 180px; flex-shrink: 0; padding-top: 18px; }
  .info-table dd { flex-grow: 1; color: var(--sub-color); line-height: 1.6; }
  .info-table dd ul { padding-left: 15px; margin-top: 5px; margin-bottom: 5px; }
  .info-table dd ul li { list-style: disc; margin-bottom: 5px; padding-left: 0;}
  .info-table dd ul li::before { display: none; }
  .office-photos { display: grid; gap: 20px; }
  .office-photos img { width: 100%; border-radius: 8px; border: 1px solid var(--border-color); }
  .history-list { border-left: 2px solid var(--accent-color-medium); padding-left: 30px; max-width: 700px; margin: 0 auto; }
  .history-list dt { font-weight: 700; font-size: 1rem; position: relative; margin-bottom: 5px; }
  .history-list dt::before { content: ''; display: block; width: 10px; height: 10px; background-color: var(--accent-color-medium); border-radius: 50%; position: absolute; left: -36px; top: 0.4em; }
  .history-list dd { margin-bottom: 25px; padding-left: 0; font-size: 0.95rem; color: var(--sub-color); }
  .map-container { aspect-ratio: 16 / 9; margin-bottom: 20px; border: 1px solid var(--border-color); overflow: hidden; }
  .map-container iframe { width: 100%; height: 100%; border:0; }
  .access-info { text-align: center; font-size: 0.95rem; color: var(--sub-color); line-height: 1.7; }
  .staff-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
  .staff-item img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 1px solid var(--border-color); }
  .staff-item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; }
  .staff-role { font-size: 0.9rem; color: var(--accent-color-medium); margin-bottom: 10px; font-weight: 400; }
  .staff-message { font-size: 0.9rem; color: var(--sub-color); }
  
  /* --- blog.html --- */
  .blog-items-grid .news-item { display: flex; flex-direction: column; }
  .blog-items-grid .news-item-link { flex-direction: column; height: 100%; display: flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background-color: var(--white-bg); transition: box-shadow 0.3s, transform 0.3s; }
  .blog-items-grid .news-item-link:hover { opacity: 1; box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-5px); }
  .blog-items-grid .news-thumbnail { width: 100%; height: 180px; object-fit: cover; border-radius: 0; }
  .blog-items-grid .news-item-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
  .blog-items-grid .news-item-content h3 { margin-bottom: 10px; }
  .blog-items-grid .news-excerpt { margin-top: auto; padding-top: 10px; line-height: 1.6; }
  .blog-items-grid .news-item time, .blog-items-grid .news-item .news-category { margin-bottom: 8px; }
  
  /* --- contact.html --- */
  .contact-form { max-width: 700px; margin: 0 auto 60px; }
  .form-group { margin-bottom: 25px; }
  .form-group label { display: block; font-weight: 700; margin-bottom: 10px; font-size: 0.95rem; }
  .form-group label .required { color: var(--accent-color-medium); font-size: 0.8em; margin-left: 5px; font-weight: normal; }
  .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color-darker); border-radius: 4px; font-size: 1rem; background-color: var(--white-bg); transition: border-color 0.3s, box-shadow 0.3s; }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-color-medium); box-shadow: 0 0 0 2px rgba(136, 161, 167, 0.3); }
  .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23777'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; padding-right: 35px; }
  .form-group textarea { min-height: 150px; }
  .privacy-policy-agreement { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
  .privacy-policy-agreement input[type="checkbox"] { width: 18px; height: 18px; border: 1px solid var(--border-color-darker); cursor: pointer; position: relative; flex-shrink: 0; }
  .privacy-policy-agreement input[type="checkbox"]:checked { background-color: var(--accent-color-medium); border-color: var(--accent-color-medium); }
  .privacy-policy-agreement input[type="checkbox"]:checked::after { content: ''; display: block; width: 5px; height: 10px; border: solid var(--white-bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-50%, -50%); position: absolute; top: 45%; left: 50%; }
  .privacy-policy-agreement label { margin-bottom: 0; font-weight: normal; }
  .privacy-policy-agreement a { color: var(--accent-color-medium); text-decoration: underline; }
  .privacy-policy-agreement a:hover { text-decoration: none; }
  .form-submit { margin-top: 40px; }
  .contact-info { text-align: center; border-top: 1px solid var(--border-color); padding-top: 40px; margin-top: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }
  .contact-info h3 { font-size: 1.2rem; margin-bottom: 15px; font-weight: 400; }
  .tel-number { font-size: 1.5rem; font-weight: 700; color: var(--main-color); margin-bottom: 5px; }
  .reception-time { font-size: 0.9rem; color: var(--sub-color); margin-bottom: 20px; }
  .contact-info p:last-child { font-size: 0.9rem; color: var(--sub-color); }
  
  /* ===============================================
     フッター
     =============================================== */
  .footer { background-color: #282828; color: #ccc; padding: 60px 0 30px; font-size: 0.9rem; line-height: 1.6; }
  .footer-content { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #444; gap: 40px; }
  .footer-logo img { height: 30px; margin-bottom: 20px; opacity: 0.8; display: inline-block; }
  .footer-info p { color: #aaa; }
  .footer-nav ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; }
  .footer-nav a { color: #ccc; transition: color 0.3s; font-size: 0.9rem; }
  .footer-nav a:hover { color: var(--white-bg); }
  .copyright { text-align: center; color: #888; font-size: 0.85rem; }
  
  /* ===============================================
     レスポンシブ対応 (768px以下)
     =============================================== */
  @media (max-width: 768px) {
      :root { --padding-base: 50px; --padding-small: 40px; }
      .section-title { font-size: 1.8rem; margin-bottom: 40px; padding-bottom: 15px; }
      .section-title::after { width: 50px; }
      .hero { height: 60vh; }
      .hero-content h2 { font-size: 2rem; }
      .hero-content p { font-size: 1rem; }
      .problem-items { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
      .strength-items { gap: 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
      .strength-item p { text-align: center; }
      .strengths-main-content { flex-direction: column; gap: 30px; }
      .testimonial-items { gap: 30px; }
      .testimonial-item { flex-direction: column; text-align: center; gap: 15px;}
      .customer-photo { margin: 0 auto 10px; width: 70px; height: 70px;}
      .testimonial-item blockquote::before { display: none; }
      .testimonial-item blockquote footer { justify-content: center; }
      .news-item-link { align-items: flex-start; gap: 15px;}
      .news-thumbnail { width: 90px; height: 60px;}
      .news-item h3 { font-size: 1rem; }
      .news-excerpt { font-size: 0.85rem; -webkit-line-clamp: 3; }
      .services .service-categories { grid-template-columns: 1fr; }
      .service-category-list .service-category-item, .service-category-list .service-category-item:nth-child(even) { flex-direction: column; gap: 0; }
      .service-category-list .service-category-item img { width: 100%; height: 200px; align-self: auto; }
      .service-category-list .category-content { padding: 30px; }
      .service-category-list .category-content h2 { font-size: 1.5rem; }
      .service-detail-content { grid-template-columns: 1fr; gap: 40px; }
      .graphic-items-list { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
      .core-strength-content { flex-direction: column; gap: 30px; }
      .core-strength-content img { max-width: 90%; margin-left: auto; margin-right: auto; }
      .core-strength-application ul li { font-size: 1rem; }
      .customer-benefits li { font-size: 1rem; }
      .strengths-other .strength-item p { text-align: center; }
      .filter-buttons { gap: 10px; }
      .btn-filter { padding: 6px 15px; font-size: 0.85rem; }
      .message-content { flex-direction: column; text-align: center; }
      .president-photo { width: 150px; margin: 0 auto 20px; }
      .message-content h3 { font-size: 1.2rem; }
      .signature { text-align: center; margin-top: 20px; }
      .philosophy-items { grid-template-columns: 1fr; gap: 40px; }
      .philosophy-items p, .philosophy-items ul { text-align: center; }
      .company-info-container { grid-template-columns: 1fr; gap: 40px;}
      .info-table dt { width: 100px; font-size: 0.8rem; padding: 10px 8px; }
      .info-table dd { font-size: 0.85rem; padding: 10px 8px; }
      .office-photos { grid-template-columns: repeat(2, 1fr); }
      .staff-items { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
      .staff-item img { width: 100px; height: 100px; }
      .blog-items-grid { grid-template-columns: 1fr; }
      .contact-info { margin-top: 40px; padding-top: 30px;}
      .tel-number { font-size: 1.3rem; }
      .footer-content { flex-direction: column; text-align: center; gap: 30px;}
      .footer-info { margin-bottom: 0; }
      .footer-nav ul { grid-template-columns: 1fr; gap: 10px; }
      .header-inner {
         /* 必要に応じて高さを調整 */
          height: 60px;
     }
 
     .mobile-menu-button {
         display: block; /* ハンバーガーボタンを表示 */
          /* 位置調整が必要な場合は z-index や position を追加 */
          position: relative;
          z-index: 110; /* メニューより手前に */
     }
 
     .global-nav {
         display: none; /* 通常のナビゲーションを非表示 */
         /* ↓ メニューが開いた時のスタイル */
          position: fixed; /* 画面固定 */
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh; /* 画面の高さに */
          background-color: rgba(255, 255, 255, 0.98); /* 背景色 */
          z-index: 100; /* ボタンより奥 */
          padding-top: 80px; /* ヘッダー高さ分など調整 */
          overflow-y: auto; /* メニューが多い場合にスクロール */
     }
 
     .global-nav.is-active {
         display: block; /* is-active クラスがついたら表示 */
     }
 
     .global-nav ul {
         display: block; /* Flexboxからブロック表示に変更 */
         text-align: center; /* 中央揃え */
     }
 
     .global-nav li {
         margin-bottom: 20px; /* 各メニュー項目の間隔 */
     }
 
     .global-nav a {
         display: block; /* リンクのクリック範囲を広げる */
          padding: 15px;
          font-size: 1.1rem;
          color: var(--main-color); /* 文字色を調整 */
     }
      .global-nav a::after {
           display: none; /* 下線を消す */
      }
 
     .global-nav .btn-contact-nav {
         display: inline-block; /* ボタンをインラインブロック表示 */
          margin-top: 20px;
          padding: 12px 40px; /* ボタンサイズ調整 */
          font-size: 1rem;
     }

  }
  
  /* ===============================================
     (任意) PC表示時の画像の最大幅制限
     =============================================== */
  @media (min-width: 769px) {
      .solution-image-wrapper img { max-width: 500px; }
      .strength-image-wrapper img { max-width: 600px; }
      .page-title-area img { max-width: 800px; }
      .service-main-image { max-width: 800px; }
      .philosophy img { max-width: 700px; }
      .core-strength-content img { max-width: 45%; }
      .strengths-main-image { max-width: 45%; }
  }
  
  /* ===============================================
     さらに小さいデバイス用の調整 (任意)
     =============================================== */
  @media (max-width: 480px) {
      :root { --padding-base: 40px; --padding-small: 30px; }
      .section-title { font-size: 1.6rem; margin-bottom: 30px; }
      .hero-content h2 { font-size: 1.8rem; }
      .hero-content p { font-size: 0.9rem; }
      .portfolio-items { grid-template-columns: 1fr; }
      .office-photos { grid-template-columns: 1fr; }
      .problem-items { grid-template-columns: 1fr; }
      .strength-items { grid-template-columns: 1fr; }
      .core-strength-content img { max-width: 100%; }
      .philosophy-items { grid-template-columns: 1fr; }
  }