/* 
 * Kiraku - 完全版スタイルシート (Part 1: 基本レイアウトとPC向けスタイル)
 */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画像切り替え確実にするための重複指定 */
@media (max-width: 430px) {
  .hero-image {
      content: url('images/hero-section_sp.png') !important;
  }
  
  .features-image {
      content: url('images/features-section_sp.png') !important;
      /* 画像が確実に表示されるように */
      visibility: visible !important;
      opacity: 1 !important;
      display: block !important;
  }
  
  .service-visual img[src*="WEBマーケティング支援_pc.jpg"] {
      content: url('images/WEBマーケティング支援_sp.jpg') !important;
  }
  
  .service-visual img[src*="集客内製化_AI研修_PC.jpg"] {
      content: url('images/集客内製化_AI研修_SP.jpg') !important;
  }
  
  .credit-item img[src*="credits_01_pc.jpg"] {
      content: url('images/credits_01_sp.jpg') !important;
  }
  
  .credit-item img[src*="credits_02_pc.jpg"] {
      content: url('images/credits_02_sp.jpg') !important;
  }
  
  .credit-item img[src*="credits_03_pc.jpg"] {
      content: url('images/credits_03_sp.jpg') !important;
  }
  
  .seminar-image img {
      content: url('images/seminar_sp.jpg') !important;
  }
  
  .message-image img {
      content: url('images/top_message_sp.jpg') !important;
  }
  
  .contact-download-image {
      content: url('images/contact-download-section_sp.png') !important;
  }
}

/* ハンバーガーメニュー関連のアニメーション効果 */
.mobile-nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.mobile-nav.active {
  opacity: 1;
  visibility: visible;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mobile-nav.active .mobile-nav-items a,
.mobile-nav.active .mobile-sub-nav-items a,
.mobile-nav.active .mobile-nav-buttons a {
  animation: fadeIn 0.5s ease forwards;
}

.mobile-nav.active .mobile-nav-items a:nth-child(1) { animation-delay: 0.1s; }
.mobile-nav.active .mobile-nav-items a:nth-child(2) { animation-delay: 0.15s; }
.mobile-nav.active .mobile-nav-items a:nth-child(3) { animation-delay: 0.2s; }
.mobile-nav.active .mobile-sub-nav-items a:nth-child(1) { animation-delay: 0.25s; }
.mobile-nav.active .mobile-sub-nav-items a:nth-child(2) { animation-delay: 0.3s; }
.mobile-nav.active .mobile-sub-nav-items a:nth-child(3) { animation-delay: 0.35s; }
.mobile-nav.active .mobile-sub-nav-items a:nth-child(4) { animation-delay: 0.4s; }
.mobile-nav.active .mobile-sub-nav-items a:nth-child(5) { animation-delay: 0.45s; }
.mobile-nav.active .mobile-nav-buttons a:nth-child(1) { animation-delay: 0.5s; }
.mobile-nav.active .mobile-nav-buttons a:nth-child(2) { animation-delay: 0.55s; }

/* サービスセクションのスタイル */
.services h2 {
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 60px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.services h3 {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 53px !important;
  letter-spacing: 0 !important;
}

.service-intro {
  font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
}

.service-logo {
  background: rgba(244, 250, 255, 1) !important;
}

.service-content p {
  font-family: 'Yu Gothic', 'YuGothic', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  color: #333 !important;
}

/* セミナーコンテンツの調整 */
.seminar-content h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  color: white;
  line-height: 1.4;
  letter-spacing: 0;
  display: block;
}

.seminar-content p {
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
  color: white;
  text-align: left;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

/* 特定のスマホ表示調整（特にiPhone SE等の小さい画面向け） */
@media screen and (max-width: 375px) {
  /* 基本スタイルの強化 */
  body {
      min-width: 320px !important;
      width: 100% !important;
      overflow-x: hidden !important;
  }
  
  /* テキストサイズをさらに小さく */
  .mission-text h4, 
  .mission-brand,
  .service-content h4,
  .credit-item h4,
  .seminar-content h4,
  .message-text h4 {
      font-size: 18px !important;
      line-height: 1.4 !important;
  }
  
  .mission-text p,
  .service-intro,
  .service-content p,
  .credit-item p,
  .seminar-content p,
  .message-text p,
  .message-full p,
  .message-full li {
      font-size: 14px !important;
      line-height: 1.8 !important;
  }
  
  /* ボタンの調整 */
  .btn-blue {
      font-size: 13px !important;
      padding: 10px 40px 10px 18px !important;
  }
  
  .btn-blue::after {
      width: 26px !important;
      height: 26px !important;
      right: 10px !important;
  }
  
  .btn-blue::before {
      width: 5px !important;
      height: 5px !important;
      right: 20.5px !important;
  }
  
  .btn-toggle {
      width: 100% !important;
      max-width: 220px !important;
      height: 36px !important;
      font-size: 12px !important;
  }
  
  /* トップメッセージの調整 */
  .message-short::after {
      bottom: 70px !important;
  }
  
  .timeline-table th {
      width: 70px !important;
      font-size: 12px !important;
      padding: 8px !important;
  }
  
  .timeline-table td {
      font-size: 12px !important;
      padding: 8px !important;
  }
}

/* 追加の修正: 確実に幅375pxのSP環境で表示されるようにする */
@media screen and (max-width: 430px) {
  /* 外枠の確実な設定 */
  html, body {
      width: 375px !important;
      margin: 0 auto !important;
      overflow-x: hidden !important;
      max-width: 100% !important;
  }
  
  /* ボックスモデルを強制的にコンテンツボックスにする */
  *, *::before, *::after {
      box-sizing: border-box !important;
  }
  
  /* コンテナの確実な幅設定 */
  .container,
  .header-content,
  .mission .container,
  .services .container,
  .credits .container,
  .top-message .container,
  .company .container,
  .footer-content,
  .footer-bottom {
      width: 375px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      overflow-x: hidden !important;
  }
  
  /* テキストのはみ出し防止 */
  p, h1, h2, h3, h4, h5, h6, span, li, a, th, td {
      max-width: 100% !important;
      overflow-wrap: break-word !important;
      word-wrap: break-word !important;
      word-break: break-word !important;
      hyphens: auto !important;
  }
  
  /* 特にテーブルのはみ出し防止 */
  table {
      table-layout: fixed !important;
      width: 100% !important;
  }
  
  /* フォントサイズの調整 */
  body {
      font-size: 14px !important;
  }
  
  /* 行間の調整 */
  .mission-text p,
  .service-content p,
  .message-text p {
      line-height: 1.6 !important;
  }
  
  /* ミッションセクション特有の調整 */
  .mission-text .blue {
      display: inline !important;
  }
  
  /* 画像の拡大を防止 */
  img {
      max-width: 100% !important;
      height: auto !important;
  }
  
  /* 特に問題となる箇所の強制折り返し設定 */
  .timeline-table td {
      white-space: normal !important;
      word-break: break-word !important;
  }
}

html {
  scroll-behavior: smooth;
}

body, html, main, #main, .main, .page-wrapper {
background: #f8f9fa !important;
}

body {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  color: #333;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 0;
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
}

/* Header */
header {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

.logo {
  flex: 0 0 auto;
}

.logo img {
  height: 80px;
  width: auto;
  display: block;
}

nav {
  flex: 1 1 auto;
  margin: 0 40px;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 0;
  justify-content: flex-end;
}

nav ul li {
  position: relative;
  padding: 0 30px;
}

nav ul li:first-child {
  padding-left: 0;
}

nav ul li:last-child {
  padding-right: 0;
}

nav ul li:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(30, 144, 255, 1);
  font-size: 15px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  line-height: 1;
  letter-spacing: 0;
  transition: color 0.3s;
}

nav a:hover {
  color: #4A90E2;
}

.header-buttons {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.btn-primary, .btn-secondary {
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  line-height: 1;
  letter-spacing: 0;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #5293D8;
  color: white;
}

.btn-primary:hover {
  background: #407AB8;
}

.btn-secondary {
  background: #5C7CFA;
  color: white;
}

.btn-secondary:hover {
  background: #4A6AE8;
}

/* ハンバーガーメニュー (PC表示では非表示) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 1010;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  transition: all 0.3s ease;
}

/* モバイルナビゲーション (PC表示では非表示) */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
}

/* Sub navigation */
.sub-nav {
  background: rgba(30, 144, 255, 1);
  position: fixed;
  top: 80px;
  width: 100%;
  z-index: 999;
  margin: 0;
  padding: 0;
  transition: transform 0.3s ease;
  height: 50px;
  display: flex;
  align-items: center;
}

.sub-nav ul {
  display: flex;
  list-style: none;
  gap: 40px;
  padding: 0;
  height: 100%;
  align-items: center;
}

.sub-nav a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity 0.3s;
  position: relative;
  z-index: 1;
}

.sub-nav a:hover {
  opacity: 0.8;
  color: white;
}

.sub-nav a:focus,
.sub-nav a:active,
.sub-nav a:visited {
  color: white;
}

/* Hero section */
.hero {
  position: relative;
  margin-top: 128px !important;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
  line-height: 0;
  height: 590px;
}

.hero-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: none;
  line-height: 0;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  max-width: none;
  object-fit: cover;
  vertical-align: bottom;
}

/* Sections */
section {
  padding: 0;
  background: white;
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

section.fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

h2 {
  font-size: 72px;
  font-weight: 300;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  font-family: 'Open Sans', sans-serif;
}

h3 {
  font-size: 18px;
  color: #4A90E2;
  margin-bottom: 40px;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
}

/* 
* Kiraku - 完全版スタイルシート (Part 2: PC向け各セクションスタイル)
*/

/* Mission section */
.mission {
  position: relative;
  padding: 0;
  background: white;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.mission-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/mission_background.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

.mission .container {
  position: relative;
  z-index: 1;
  padding: 60px 40px 60px 160px; /* 左から160pxの余白 */
  max-width: 1440px;
}

.mission-content {
  max-width: 800px;
}

.mission h2 {
  font-size: 60px;
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: 0;
  line-height: 1;
  color: #333;
  font-family: 'Lora', serif !important;
}

.mission h3 {
  font-size: 20px;
  color: #4A90E2;
  margin-bottom: 50px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif !important;
  line-height: 53px;
  letter-spacing: 0;
  position: relative;
  padding-left: 20px;
}

.mission h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: rgba(30, 144, 255, 1);
  border-radius: 50%;
}

.mission-text h4 {
  font-size: 32px;
  margin-bottom: 40px;
  line-height: 48px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif !important;
  color: #333;
  letter-spacing: -0.06em;
}

.mission-brand {
  font-size: 32px;
  display: block;
  margin-top: 10px;
  color: #333;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif !important;
  quotes: none;
  letter-spacing: -0.06em;
}

.mission-brand::before,
.mission-brand::after {
  content: none;
}

.mission-text p {
  margin-bottom: 24px;
  line-height: 1.8;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

.mission-text .blue {
  color: #4A90E2;
}

/* Services section */
.services {
  padding: 60px 0 0 0;
  margin: 0;
  border-top: none;
}

.services .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

.services h2 {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0;
  color: #333;
}

.services h3 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 53px;
  letter-spacing: 0;
  color: #4A90E2;
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
}

.services h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #4A90E2;
  border-radius: 50%;
}

.service-intro {
  font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0;
  max-width: 750px;
  margin-bottom: 60px;
  color: #333;
  text-align: left;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 40px 0;
  border-bottom: 2px solid #5293D8;
}

.service-item:last-child {
  border-bottom: none;
}

.service-visual {
  flex: 0 0 320px;
}

.service-visual img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.service-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: rgba(244, 250, 255, 1);
  border-radius: 4px;
}

.service-logo img {
  max-width: 240px;
  height: auto;
  object-fit: contain;
}

.service-content {
  flex: 1;
}

.service-content h4 {
  font-size: 26px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.02em;
}

.service-content p {
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0;
  color: #333;
  margin-bottom: 25px;
}

/* ボタンのスタイル */
.btn-blue {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(64, 144, 241, 1);
  padding: 16px 55px 16px 30px;
  border: 2px solid rgba(64, 144, 241, 1);
  border-radius: 35px;
  text-decoration: none;
  transition: all 0.3s;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 1;
}

.btn-blue::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(64, 144, 241, 1);
  border-radius: 50%;
  transition: all 0.3s;
}

.btn-blue::before {
  content: '';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 8px;
  height: 8px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  z-index: 1;
  transition: all 0.3s;
}

.btn-blue:hover {
  background: rgba(64, 144, 241, 1);
  color: white;
}

.btn-blue:hover::after {
  background: white;
}

.btn-blue:hover::before {
  border-right: 3px solid rgba(64, 144, 241, 1);
  border-bottom: 3px solid rgba(64, 144, 241, 1);
}

/* Features section - 画像版 */
.features {
  background: white;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: auto;
}

.features .container {
  max-width: 100%;
  padding: 0 !important;
  width: 100%;
  height: auto;
  margin: 0 !important;
}

.features-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 !important;
  padding: 0 !important;
}

/* PC面でのFeatureセクション全体に画像を表示 */
@media screen and (min-width: 431px) {
  section.features,
  .features {
    background: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
    background-color: white !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  section.features .container,
  .features .container {
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    display: block !important;
    align-items: normal !important;
    justify-content: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  
  section.features .features-image,
  .features .features-image,
  .features-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 430px) {
  section.features,
  .features {
      width: 100%;
      height: auto;
      min-height: auto;
      max-height: none;
      background: none !important;
  }
  
  section.features .features-image,
  .features .features-image,
  .features-image {
      width: 100%;
      height: auto;
      object-fit: contain;
      max-height: none;
      max-width: 100%;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
  }
}

/* 
* Kiraku - 完全版スタイルシート (Part 3: PC向け残りのセクションスタイル)
*/

/* Credits section */
.credits {
  background: linear-gradient(to right, #1E90FF, #0D68C0);
  padding: 60px 0;
  margin: 0;
  color: white;
  padding-bottom: 0 !important;
}

.credits .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

.credits h2 {
  font-family: 'Lora', serif;
  font-size: 60px;
  font-weight: 400;
  margin-bottom: 0;
  color: white;
  letter-spacing: 0;
  line-height: 1;
}

.credits h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  color: white;
  margin-bottom: 30px;
  font-weight: 700;
  position: relative;
  padding-left: 20px;
  line-height: 53px;
  letter-spacing: 0;
}

.credits h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

.credits > .container > p {
  margin-bottom: 60px;
  line-height: 37px;
  font-size: 18px;
  font-weight: 500;
  color: white;
  text-align: left;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

.credit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-bottom: 80px;
}

/* PC面ではスライダー関連の設定を無効化 */
@media screen and (min-width: 431px) {
  .credit-slider-nav {
    display: none;
  }
  
  .credit-slider {
    display: contents;
  }
  
  .credit-item {
    width: auto;
    flex: none;
  }
}

/* SP面でのスライダー設定 */
@media screen and (max-width: 430px) {
  .credit-list {
    display: block !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
  }
  
  .credit-slider {
    display: flex !important;
    overflow: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
    transform: translateX(0);
    transition: transform 0.3s ease;
    min-height: 400px;
    flex-wrap: nowrap;
    width: 300%;
  }
  
  .credit-item {
    flex: 0 0 33.333% !important;
    min-width: 33.333% !important;
    width: 33.333% !important;
    margin-right: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
  }
  
  .credit-slider-nav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 20px;
  }
  
  .slider-prev,
  .slider-next {
    background: #4A90E2;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
  }
  
  .slider-prev:hover,
  .slider-next:hover {
    background: #357ABD;
  }
  
  .slider-dots {
    display: flex;
    gap: 8px;
  }
  
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D0D0D0;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .dot.active {
    background: #4A90E2;
  }
}

.credit-item {
  background: white;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* PC面でのクレジットアイテム設定 */
@media screen and (min-width: 431px) {
  .credit-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
}

.credit-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.credit-content {
  padding: 25px 30px 30px;
  background: white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.credit-item .tag {
  display: inline-block;
  background: rgba(13, 104, 192, 1);
  color: white;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 13px;
  margin-bottom: 15px;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0.02em;
}

.credit-item h4 {
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 700;
  color: rgba(30, 144, 255, 1);
  line-height: 1.5;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

.credit-item p {
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
  color: #333;
  text-align: left;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

.seminar-group {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  border-top: 3px solid rgba(255, 255, 255, 1);
  padding-top: 60px;
}

.seminar-image {
  flex: 0 0 450px;
}

.seminar-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.seminar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 20px !important; /* ← この「20px」が画像とテキストの間隔 */
}

.seminar-content h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  color: white;
  line-height: 1.4;
  letter-spacing: 0;
  display: block;
}

.seminar-content p {
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
  color: white;
  text-align: left;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

/* Top Message section */
.top-message {
  background: #f8f9fa;
  padding: 60px 0;
  margin: 0;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.top-message .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

.top-message h2 {
  font-family: 'Lora', serif;
  font-size: 60px;
  font-weight: 400;
  margin-bottom: 0;
  color: #333;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 32px !important;
}

.top-message h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  color: #4A90E2;
  margin-bottom: 60px;
  font-weight: 700;
  position: relative;
  padding-left: 20px;
  line-height: 53px;
  letter-spacing: 0;
  margin-top: 18px !important;
}

.top-message h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #4A90E2;
  border-radius: 50%;
}

.message-content {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  margin-bottom: 60px;
}

.message-text {
  flex: 1;
}

.message-text h4 {
  font-family: 'Noto Serif JP', serif;
  font-size: 32px;
  margin-bottom: 35px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
}

.message-text p {
  margin-bottom: 24px;
  line-height: 1.8;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

/* 初期状態では短いテキストと全文読むボタンを表示 */
.message-short {
  display: block;
  position: relative;
}

/* ぼかし効果 */
.message-short::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.8) 50%, rgba(248, 249, 250, 1) 100%);
  pointer-events: none;
}

.message-full {
  display: none;
}

.message-full p {
  margin-bottom: 24px;
  line-height: 1.8;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  letter-spacing: 0;
}

.message-full ol {
  margin: 20px 0;
  padding-left: 30px;
}

.message-full ol li {
  margin-bottom: 15px;
  line-height: 1.8;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
}

.message-full ul {
  margin: 15px 0;
  padding-left: 30px;
}

.message-full ul li {
  margin-bottom: 10px;
  line-height: 1.8;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
}

/* トグルボタン */
.btn-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(64, 144, 241, 1);
  width: 345px;
  height: 50px;
  padding: 0;
  border: 2px solid rgba(64, 144, 241, 1);
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
  margin-top: 30px;
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}

.btn-toggle::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(64, 144, 241, 1);
  border-radius: 50%;
  transition: all 0.3s;
}

.btn-toggle::before {
  content: '';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
  width: 8px;
  height: 8px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  z-index: 1;
  transition: all 0.3s;
}

.message-full .btn-toggle::before {
  transform: translateY(-50%) rotate(-45deg);
}

.btn-toggle:hover {
  background: rgba(64, 144, 241, 1);
  color: white;
}

.btn-toggle:hover::after {
  background: white;
}

.btn-toggle:hover::before {
  border-right: 3px solid rgba(64, 144, 241, 1);
  border-bottom: 3px solid rgba(64, 144, 241, 1);
}

/* 画像部分 */
.message-image {
  flex: 0 0 550px;
  text-align: left;
}

.message-image img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  background: #f0f0f0;
  max-height: 700px;
  object-fit: cover;
  margin-bottom: 36px !important;
}

.executive-info {
  text-align: left;
}

.executive-info span {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
}

.executive-info h5 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  font-family: 'Noto Serif JP', serif;
}

/* 全文が開いた時のスタイル調整 */
.message-full-open .message-short {
  display: none;
}

.message-full-open .message-full {
  display: block;
}

/* タイムライン - 常に表示 */
.timeline-table {
  margin: 40px 0;
  width: 100%;
  max-width: 600px;
}

.timeline-table table {
  width: 100%;
  border-collapse: collapse;
}

.timeline-table th,
.timeline-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.timeline-table th {
  width: 100px;
  font-weight: 700;
  color: #333;
  font-family: 'Noto Serif JP', serif;
}

.timeline-table td {
  color: #666;
  font-weight: 500;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  white-space: nowrap;
  line-height: 1.4;
}

/* 
* Kiraku - 完全版スタイルシート (Part 4: PC向けフッター・共通部品とスマホ対応スタイル)
*/

/* Company section */
.company {
  background: #F4FAFF;
  padding: 60px 0;
  margin: 0;
}

.company .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 0 160px; /* 左から160pxの余白 */
}

.company h2 {
  font-family: 'Lora', serif;
  font-size: 60px;
  font-weight: 400;
  margin-bottom: 0;
  color: #333;
  letter-spacing: 0;
  line-height: 1;
}

.company h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  color: #4A90E2;
  margin-bottom: 60px;
  font-weight: 700;
  position: relative;
  padding-left: 20px;
  line-height: 53px;
  letter-spacing: 0;
}

.company h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: #4A90E2;
  border-radius: 50%;
}

.company table {
  width: 100%;
  max-width: 1100px;
  margin-bottom: 50px;
  border-collapse: collapse;
}

.company th,
.company td {
  padding: 20px 20px;
  text-align: left;
  border-bottom: 1px solid #1E90FF;
  vertical-align: top;
}

.company th {
  width: 150px;
  font-weight: 700;
  color: #333;
  font-size: 16px;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
  line-height: 1;
}

.company td {
  font-size: 16px;
  color: #333;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
  line-height: 1.4;
}

.company tr {
  display: table-row;
}

.company tr:last-child th,
.company tr:last-child td {
  border-bottom: none;
}

.map {
  margin-top: 50px;
  width: 100%;
  max-width: 1100px;
  height: 450px;
  overflow: hidden;
  border-radius: 0;
  filter: grayscale(20%);
}

.map iframe {
  width: 100%;
  height: 100%;
}

/* Contact/Download section - 画像版 */
.contact-download {
  background: #4A90E2;
  padding: 0;
  margin: 0;
  position: relative;
}

.image-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
}

.contact-download-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* クリッカブルオーバーレイ */
.click-overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.contact-overlay,
.download-overlay {
  flex: 1;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.contact-overlay:hover,
.download-overlay:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Footer */
footer {
  background: #FFFFFF;
  color: #333;
  padding: 60px 0 0;
  margin: 0;
  font-family: 'Noto Serif JP', serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px 40px 160px; /* 左から160pxの余白 */
  border-bottom: 1px solid #1E90FF;
}

.footer-logo {
  height: 50px;
  margin-bottom: 20px;
}

.footer-info p {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  color: #333;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 25px;
}

.footer-nav nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

.footer-nav nav li {
  margin-bottom: 0;
}

.footer-nav nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: opacity 0.3s;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
}

.footer-nav nav a:hover {
  opacity: 0.7;
}

.footer-buttons {
  display: flex;
  gap: 15px;
}

.footer-buttons .btn-primary,
.footer-buttons .btn-secondary {
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
}

.footer-buttons .btn-primary {
  background: #5293D8;
  color: white;
}

.footer-buttons .btn-primary:hover {
  background: #407AB8;
}

.footer-buttons .btn-secondary {
  background: #5C7CFA;
  color: white;
}

.footer-buttons .btn-secondary:hover {
  background: #4A6AE8;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 25px 40px 25px 160px; /* 左から160pxの余白 */
  font-size: 14px;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
}

.footer-bottom p {
  color: #666;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0;
}

/* ページトップへ戻るボタン */
.to-top-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(74, 144, 226, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.to-top-button.visible {
  opacity: 1;
  visibility: visible;
}

.to-top-button span {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid white;
  border-left: 3px solid white;
  transform: translateY(25%) rotate(45deg);
}

.to-top-button:hover {
  background-color: rgba(74, 144, 226, 1);
}

/* Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* 
* Kiraku - 完全版スタイルシート (Part 5: スマホ向けスタイル)
*/

/* スマートフォン向けスタイル */
@media screen and (max-width: 430px) {
  /* 1. 画面全体の幅を固定 */
  html, body {
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  /* 2. コンテナ幅をビューポート幅に合わせる */
  .container,
  .header-content,
  .mission .container,
  .services .container,
  .credits .container,
  .top-message .container,
  .company .container,
  .footer-content,
  .footer-bottom {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box !important;
  }
  
  /* 3. テキスト幅を修正し、はみ出しを防止 */
  p, h2, h3, h4, li, th, td {
      max-width: 100% !important;
      width: 100% !important;
      word-break: break-word !important;
      overflow-wrap: break-word !important;
      white-space: normal !important;
  }
  
  /* 4. メッセージセクションのテキスト幅修正 */
  .mission-text p,
  .service-content p,
  .message-text p,
  .seminar-content p,
  .message-full p,
  .message-full li {
      width: 100% !important;
      max-width: 100% !important;
      white-space: normal !important;
      overflow-wrap: break-word !important;
      font-size: 14px !important;
      line-height: 1.8 !important;
  }
  
  /* 5. 改行の表示制御 */
  br {
      display: none !important;
  }
  
  /* 6. SP表示時の画像サイズ調整 */
  img {
      max-width: 100% !important;
      height: auto !important;
  }
  
  /* 7. ヘッダーロゴのサイズと位置調整 */
  .logo img {
      height: 35px !important;
  }
  
  /* 8. ハンバーガーメニューの位置とサイズ */
  .hamburger {
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      width: 25px !important;
      height: 18px !important;
      position: absolute !important;
      right: 15px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 10000 !important;
  }
  
  .hamburger span {
      display: block !important;
      height: 2px !important;
      width: 100% !important;
      background-color: #333 !important;
      border-radius: 1px !important;
  }
  
  /* ヘッダー・ナビゲーション */
  header {
      position: fixed !important;
      width: 100% !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 1000 !important;
      border-bottom: 1px solid #eee !important;
  }
  
  header .header-content {
      height: 60px !important;
      padding: 10px 15px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
  }
  
  nav, .header-buttons {
      display: none !important;
  }
  
  .sub-nav {
      display: none !important;
  }
  
  /* モバイルナビゲーション */
  .mobile-nav {
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 100vh !important;
      transform: translateX(100%) !important;
      z-index: 10000 !important;
      background-color: white !important;
      transition: transform 0.3s ease !important;
      display: block !important;
      opacity: 0 !important;
      visibility: hidden !important;
      overflow-y: auto !important;
      padding: 70px 20px 40px !important;
      box-sizing: border-box !important;
  }
  
  .mobile-nav.active {
      transform: translateX(0) !important;
      opacity: 1 !important;
      visibility: visible !important;
  }
  
  .mobile-nav-close {
      position: absolute !important;
      top: 20px !important;
      right: 20px !important;
      width: 30px !important;
      height: 30px !important;
      cursor: pointer !important;
      z-index: 10010 !important;
  }
  
  .mobile-nav-close span {
      display: block !important;
      height: 2px !important;
      width: 100% !important;
      background-color: #333 !important;
      position: absolute !important;
      top: 50% !important;
      transform-origin: center !important;
  }
  
  .mobile-nav-close span:first-child {
      transform: translateY(-50%) rotate(45deg) !important;
  }
  
  .mobile-nav-close span:last-child {
      transform: translateY(-50%) rotate(-45deg) !important;
  }
  
  .mobile-nav-items,
  .mobile-sub-nav-items,
  .mobile-nav-buttons {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      margin-bottom: 30px !important;
  }
  
  .mobile-nav-items a,
  .mobile-sub-nav-items a {
      display: block !important;
      width: 100% !important;
      padding: 15px 0 !important;
      text-align: center !important;
      text-decoration: none !important;
      border-bottom: 1px solid #f0f0f0 !important;
      font-size: 16px !important;
      font-weight: 700 !important;
  }
  
  .mobile-nav-items a {
      color: #333 !important;
      font-family: 'Noto Serif JP', serif !important;
  }
  
  .mobile-sub-nav-items a {
      color: #4A90E2 !important;
      font-family: 'Noto Serif JP', serif !important;
  }
  
  .mobile-sub-nav-items {
      padding-top: 15px !important;
      margin-top: 15px !important;
      border-top: 1px solid #e0e0e0 !important;
  }
  
  .mobile-nav-buttons {
      margin-top: 30px !important;
  }
  
  .mobile-nav-buttons a {
      display: block !important;
      width: 100% !important;
      padding: 15px 0 !important;
      text-align: center !important;
      margin-bottom: 15px !important;
      border-radius: 50px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      font-family: 'Noto Serif JP', serif !important;
  }
  
  /* ヒーロー */
  .hero {
      margin-top: 60px !important; /* ヘッダーの高さに合わせる */
      font-size: 0 !important; /* 隙間をなくすため追加 */
  }
  
  /* コンテンツセクション全般の調整 */
  section {
      padding: 0 !important; /* パディングをなくして隙間を削除 */
  }
  
  h2 {
      font-size: 40px !important;
  }
  
  h3 {
      font-size: 16px !important;
      line-height: 1.5 !important;
      margin-bottom: 30px !important;
  }
  
  /* ミッションセクション */
  .mission {
      padding: 40px 0 !important;
  }
  
  .mission-bg-wrapper {
      background-image: url('images/mission_background_sp.jpg') !important;
      background-size: cover !important;
      background-position: center center !important;
  }
  
  /* 1. ミッションセクションの背景画像に白のオーバーレイ追加 */
  .mission-bg-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.6);
      z-index: 1;
  }
  
  .mission-content {
      position: relative;
      z-index: 2;
  }
  
  .mission-text h4,
  .mission-brand {
      font-size: 18px !important;
      line-height: 1.4 !important;
      margin-bottom: 20px !important;
  }
  
  .mission-text p,
  .mission-text p span {
      display: inline !important;
      width: 100% !important;
      font-size: 14px !important;
      line-height: 1.8 !important;
      margin-bottom: 15px !important;
      font-weight: 500 !important;
      font-family: 'Yu Gothic Medium', 'YuGothic', sans-serif !important;
  }
  
  /* サービスセクション */
  .services {
      padding: 40px 0 20px 0 !important;
  }
  
  /* 2. サービスセクションのh2,h3をtop-messageセクションと統一 */
  .services h2 {
      font-size: 40px !important;
      margin-bottom: 5px !important;
  }
  
  .services h3 {
      font-size: 18px !important;
      margin-bottom: 30px !important;
      padding-left: 15px !important;
      line-height: 1.5 !important;
  }
  
  .services h3::before {
      top: 50% !important;
      width: 8px !important;
      height: 8px !important;
  }
  
  .service-intro {
      font-size: 14px !important;
      line-height: 1.8 !important;
      margin-bottom: 30px !important;
  }
  
  .service-item {
      gap: 0 !important;
      flex-direction: column !important;
      margin-bottom: 40px !important;
      padding-bottom: 40px !important;
      border-bottom: 1px solid #eee !important;
  }
  
  .service-item:last-child {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      border-bottom: none !important;
  }
  
  .service-visual {
      margin-bottom: 15px !important;
      flex: 0 0 auto !important;
      width: 100% !important;
      height: 180px !important;
  }
  
  .service-visual img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }
  
  .service-logo {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(244, 250, 255, 1) !important;
  }
  
  /* 3. ポスドラロゴのサイズ調整 */
  .service-item .service-logo img {
      width: 270.8px !important;
      height: 69.75px !important;
  }
  
  .service-content {
      margin-top: 15px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
  }
  
  .service-content h4 {
      margin-top: 0 !important;
      margin-bottom: 12px !important;
      font-size: 18px !important;
      line-height: 1.4 !important;
      text-align: center !important;
  }
  
  .service-content p {
      font-size: 14px !important;
      line-height: 1.8 !important;
      margin-bottom: 15px !important;
      text-align: center !important;
  }
  
  /* 特徴セクション - PC面での背景画像表示のため削除 */
  
  /* 実績セクション */
  /* 5. クレジットセクションのh2,h3をミッションセクションと合わせる */
  .credits h2 {
      font-size: 40px !important;
      margin-bottom: 5px !important;
  }
  
  .credits h3 {
      font-size: 18px !important;
      margin-bottom: 30px !important;
      padding-left: 15px !important;
      line-height: 1.5 !important;
  }
  
  .credits h3::before {
      top: 50% !important;
      width: 8px !important;
      height: 8px !important;
  }
  
  .credits > .container > p {
      font-size: 14px !important;
      line-height: 1.8 !important;
      margin-bottom: 30px !important;
  }
  
  .credit-list {
      display: block !important;
      margin-bottom: 40px !important;
      overflow: hidden !important;
  }
  
  .credit-item {
      background: white !important;
      width: 33.333% !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      flex-shrink: 0 !important;
  }
  
  .credit-item img {
      width: 100% !important;
      height: 180px !important;
      object-fit: cover !important;
  }
  
  .credit-item .tag {
      display: inline-block !important;
      font-size: 12px !important;
      padding: 6px 15px !important;
      margin-bottom: 10px !important;
  }
  
  .credit-item h4 {
      font-size: 18px !important;
      margin-bottom: 15px !important;
      line-height: 1.4 !important;
  }
  
  .credit-item p {
      font-size: 14px !important;
      line-height: 1.8 !important;
  }
  
  .seminar-group {
      flex-direction: column !important;
      gap: 0 !important;
      padding-top: 30px !important;
  }
  
  .seminar-image {
      width: 100% !important;
      margin-bottom: 0 !important; /* 6. セミナー画像とテキストの間隔調整 */
  }
  
  .seminar-image img {
      width: 100% !important;
      height: 180px !important;
      object-fit: cover !important;
  }
  
  .seminar-content {
      margin-top: 20px !important; /* ← この「20px」が画像とテキストの間隔 */
      padding: 15px !important;
  }
  
  .seminar-content h4 {
      font-size: 18px !important;
      margin-top: 0 !important;
      margin-bottom: 15px !important;
      line-height: 1.4 !important;
  }
  
  /* メッセージセクション - リニューアル順序 */
  .message-content {
      flex-direction: column !important;
      gap: 20px !important;
  }
  
  /* 7. トップメッセージセクションのh2,h3をサービスセクションと統一 */
  .top-message h2 {
      font-size: 40px !important;
      margin-bottom: 5px !important;
  }
  
  .top-message h3 {
      font-size: 18px !important;
      margin-bottom: 30px !important;
      padding-left: 15px !important;
      line-height: 1.5 !important;
  }
  
  .top-message h3::before {
      top: 50% !important;
      width: 8px !important;
      height: 8px !important;
  }
  
  /* 1. テキスト部分を最初に表示 */
  .message-text {
      width: 100% !important;
      max-width: 100% !important;
      order: 1 !important;
      display: flex !important;
      flex-direction: column !important;
  }
  
  .message-text h4 {
      font-size: 18px !important;
      line-height: 1.5 !important;
      width: 100% !important;
      word-break: break-word !important;
      margin-bottom: 20px !important;
  }
  
  .message-text p {
      font-size: 14px !important;
      line-height: 1.8 !important;
      width: 100% !important;
      word-break: break-word !important;
      margin-bottom: 16px !important;
  }
  
  .message-short::after {
      bottom: 85px !important;
  }
  
  .message-full ol,
  .message-full ul {
      width: 90% !important;
      margin-left: 0 !important;
      padding-left: 20px !important;
  }
  
  /* 2. 写真部分を次に表示 */
  .message-image {
      width: 100% !important;
      order: 2 !important;
      margin-top: 30px !important;
      margin-bottom: 0 !important; /* 8. 代表名から次のセクションまでの余白削減 */
  }
  
  .message-image img {
      max-width: 100% !important;
      height: auto !important;
      max-height: 300px !important;
      object-fit: cover !important;
      margin: 0 auto !important;
  }
  
  .executive-info {
      text-align: center !important;
      margin-bottom: 0 !important; /* 8. 代表名から次のセクションまでの余白削減 */
  }
  
  /* 8. 代表名から次のセクションまでの余白削減 */
  .top-message {
      padding-bottom: 30px !important;
  }
  
  /* 3. タイムラインを最後に表示 */
  .timeline-table {
      width: 100% !important;
      margin: 30px 0 !important;
      order: 3 !important;
  }
  
  .timeline-table {
      width: 100% !important;
      margin: 30px 0 !important;
  }
  
  .timeline-table th {
      width: 80px !important;
      padding: 10px !important;
      font-size: 13px !important;
  }
  
  .timeline-table td {
      font-size: 13px !important;
      padding: 10px !important;
      white-space: normal !important;
  }
  
  /* ボタンスタイル */
  .btn-blue {
      font-size: 14px !important;
      padding: 12px 45px 12px 20px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      width: auto !important;
  }
  
  .btn-blue::after {
      width: 30px !important;
      height: 30px !important;
      right: 12px !important;
  }
  
  .btn-blue::before {
      width: 6px !important;
      height: 6px !important;
      right: 24px !important;
      border-width: 2px !important;
  }
  
  .btn-toggle {
      width: 100% !important;
      max-width: 250px !important;
      height: 40px !important;
      font-size: 13px !important;
      margin-top: 20px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
  
  .btn-toggle::after {
      width: 30px !important;
      height: 30px !important;
      right: 12px !important;
  }
  
  .btn-toggle::before {
      width: 6px !important;
      height: 6px !important;
      right: 24px !important;
      border-width: 2px !important;
  }
  
  /* 会社概要セクション */
  /* 会社概要セクションのh2,h3も同様に調整 */
  .company h2 {
      font-size: 40px !important;
      margin-bottom: 5px !important;
  }
  
  .company h3 {
      font-size: 18px !important;
      margin-bottom: 30px !important;
      padding-left: 15px !important;
      line-height: 1.5 !important;
  }
  
  .company h3::before {
      top: 50% !important;
      width: 8px !important;
      height: 8px !important;
  }
  
  .company table {
      width: 100% !important;
      margin-bottom: 30px !important;
  }
  
  .company th {
      width: 100px !important;
      font-size: 14px !important;
      padding: 15px 10px !important;
  }
  
  .company td {
      font-size: 14px !important;
      padding: 15px 10px !important;
  }
  
  .map {
      height: 300px !important;
  }
  
  /* 連絡先セクション */
  .contact-download {
      padding: 0 !important;
  }
  
  .click-overlays {
      flex-direction: column !important;
  }
  
  .contact-overlay, 
  .download-overlay {
      width: 100% !important;
      height: 50% !important;
  }
  
  /* フッター */
  .footer-content {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 25px !important;
      padding: 0 15px 30px !important;
  }
  
  .footer-logo {
      height: 40px !important;
      margin-bottom: 15px !important;
  }
  
  .footer-info p {
      font-size: 13px !important;
      line-height: 1.6 !important;
  }
  
  .footer-nav {
      width: 100% !important;
      align-items: center !important;
  }
  
  .footer-nav nav ul {
      flex-direction: column !important;
      width: 100% !important;
      margin-bottom: 25px !important;
      gap: 15px !important;
  }
  
  .footer-nav nav ul li {
      margin-bottom: 15px !important;
      width: 100% !important;
      text-align: center !important;
  }
  
  .footer-buttons {
      flex-direction: column !important;
      width: 100% !important;
      gap: 15px !important;
  }
  
  .footer-buttons a {
      width: 100% !important;
      text-align: center !important;
  }
  
  .footer-bottom {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 10px !important;
      padding: 20px 15px !important;
  }
  
  .footer-bottom p {
      font-size: 12px !important;
  }
  
  /* ページトップへ戻るボタン */
  .to-top-button {
      width: 40px !important;
      height: 40px !important;
      right: 15px !important;
      bottom: 15px !important;
  }
  
  .to-top-button span {
      width: 10px !important;
      height: 10px !important;
      border-width: 2px !important;
  }
}
/* モバイル表示時の余白修正用CSS */

/* 1. 地図セクションの余白修正 */
@media screen and (max-width: 430px) {
  /* Google Mapの上部の余白削除 */
  .map {
      margin-top: 20px !important;
  }
  
  /* 会社概要テーブルの下部余白を縮小 */
  .company table {
      margin-bottom: 20px !important;
  }
  
  /* CONTACTセクションの上部余白を追加 */
  .contact-download {
      margin-top: 30px !important;
  }
  
  /* 2. 代表取締役プロフィールと会社概要の間の余白調整 */
  /* 代表取締役名から会社概要セクションタイトルまでの余白を縮小 */
  .executive-info {
      margin-bottom: 0 !important;
  }
  
  .message-image {
      margin-bottom: 10px !important;
  }
  
  .top-message {
      padding-bottom: 0 !important;
  }
  
  .company {
      padding-top: 20px !important;
  }
  
  /* Company見出し上部の余白調整 */
  .company h2 {
      margin-top: 0 !important;
  }
  
  /* 3. セミナーコンテンツの余白修正 */
  /* セミナー画像とテキストのレイアウト改善 */
  .seminar-image {
      margin-bottom: 0 !important;
  }
  
  .seminar-content {
      margin-top: 0 !important;
      padding: 15px 0 !important; /* 左右のパディングを削除 */
  }
  
  /* セミナーコンテンツのタイトルとテキストの間の余白調整 */
  .seminar-content h4 {
      margin-bottom: 15px !important;
      line-height: 1.3 !important;
  }

  /* リフォームマーケティングの精鋭集団」テキストの改行問題修正 */
  .seminar-content h4 {
      white-space: normal !important;
      display: inline-block !important;
      width: 100% !important;
  }
  
  /* Top Messageセクションの余白調整 */
  .top-message {
      margin-top: 0 !important;
  }
  
  /* Top Message見出しの上部余白追加 */
  .top-message h2 {
      margin-top: 20px !important;
  }
}

@media (max-width: 430px) {
.seminar-group {
  margin-bottom: 20px !important;
}
.message-image {
  margin-bottom: 20px !important;
}
.company {
  margin-top: 20px !important;
}
}

@media screen and (max-width: 430px) {
/* セミナー画像の高さをさらに小さく */
.seminar-image img {
  height: 120px !important;
  max-height: 120px !important;
}
.seminar-group {
  padding-top: 10px !important;
  margin-bottom: 10px !important;
}
.seminar-content {
  padding: 8px 0 !important;
}
.seminar-content h4 {
  font-size: 16px !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}
.seminar-content p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

/* トップメッセージ画像の高さをさらに小さく */
.message-image img {
  max-height: 120px !important;
  height: 120px !important;
  margin-bottom: 5px !important;
}
.executive-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.executive-info h5 {
  font-size: 16px !important;
  margin-bottom: 4px !important;
}
.executive-info span {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}
}

@media screen and (max-width: 430px) {
/* 画像サイズはそのまま */
.seminar-group {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}
.seminar-content {
  padding: 0 !important;
  margin-top: 0 !important;
}
.seminar-content h4,
.seminar-content p {
  margin-bottom: 4px !important;
}

.top-message {
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
.message-content {
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.executive-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
}

/* レスポンシブSP表示の修正用CSS - レイアウト構造は維持 */
@media screen and (max-width: 430px) {
/* ========== セミナーセクション修正 ========== */
/* セミナーグループのスタイル修正（レイアウトは変えない） */
.seminar-group {
  background: #4A90E2 !important; /* 背景色を青に統一 */
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* 上部の境界線を調整 */
  padding-top: 30px !important;
  margin-bottom: 30px !important;
}

/* セミナー画像のスタイル調整 */
.seminar-image img {
  width: 100% !important;
  height: auto !important;
  min-height: 180px !important; /* 最小高さを確保 */
  object-fit: cover !important;
  display: block !important;
}

/* セミナーコンテンツのテキスト部分の調整 */
.seminar-content {
  padding: 20px 0 !important;
  background: #4A90E2 !important; /* 背景色を青に統一 */
  color: white !important;
}

.seminar-content h4 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  color: white !important;
  line-height: 1.4 !important;
}

.seminar-content p {
  font-size: 14px !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
  color: white !important;
  text-align: left !important;
  margin-bottom: 5px !important;
}

/* ========== 代表メッセージセクション修正 ========== */
/* 代表者情報のスタイル調整（レイアウトは変えない） */
.executive-info {
  margin-bottom: 20px !important;
}

.executive-info span {
  display: block !important;
  font-size: 14px !important;
  color: #666 !important;
  margin-bottom: 5px !important;
  font-weight: 500 !important;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif !important;
}

.executive-info h5 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #333 !important;
  font-family: 'Noto Serif JP', serif !important;
}

/* タイムラインテーブルのスタイル調整 */
.timeline-table {
  width: 100% !important;
  margin: 20px 0 30px !important;
}

.timeline-table table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.timeline-table th {
  width: 30% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  color: #333 !important;
  font-family: 'Noto Serif JP', serif !important;
  vertical-align: top !important;
}

.timeline-table td {
  width: 70% !important;
  font-size: 14px !important;
  padding: 10px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  color: #666 !important;
  font-weight: 500 !important;
  font-family: 'Yu Gothic', 'YuGothic', sans-serif !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

/* メッセージの展開・閉じるアニメーション調整 */
.message-short {
  position: relative !important;
}

.message-short::after {
  content: '' !important;
  position: absolute !important;
  bottom: 70px !important;
  left: 0 !important;
  right: 0 !important;
  height: 70px !important;
  background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.9) 70%, rgba(248, 249, 250, 1) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 「全文読む」ボタンのスタイル調整 */
.btn-toggle {
  height: 44px !important;
  font-size: 15px !important;
  margin: 15px 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  background-color: transparent !important;
  color: #4A90E2 !important;
  border: 2px solid #4A90E2 !important;
  border-radius: 50px !important;
  z-index: 2 !important;
}

.btn-toggle::after {
  content: '' !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  background: #4A90E2 !important;
  border-radius: 50% !important;
}

.btn-toggle::before {
  content: '' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(135deg) !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid white !important;
  border-bottom: 2px solid white !important;
  z-index: 3 !important;
}

.message-full .btn-toggle::before {
  transform: translateY(-50%) rotate(-45deg) !important;
}
}

/* さらに小さい画面（iPhoneSE等）向けの調整 */
@media screen and (max-width: 375px) {
.seminar-content h4 {
  font-size: 18px !important;
}

.seminar-content p {
  font-size: 13px !important;
}

.executive-info h5 {
  font-size: 18px !important;
}

.executive-info span {
  font-size: 12px !important;
}

.timeline-table th,
.timeline-table td {
  font-size: 12px !important;
  padding: 8px !important;
}
}

@media screen and (max-width: 430px) {
/* 1. セミナー画像とテキストの間の余白を20pxに統一し、背景色を消す */
.seminar-group {
  /* 画像とテキストの間隔のみ20px */
  gap: 20px !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}
.seminar-content {
  background: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.seminar-image {
  margin-bottom: 0 !important;
}
.seminar-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  margin-bottom: 0 !important;
}
.seminar-group > .seminar-image + .seminar-content {
  margin-top: 20px !important;
}

/* 2. メッセージ画像が全体表示されるように調整 */
.message-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain !important;
  background: #f0f0f0 !important;
  margin: 0 auto 0 auto !important;
  display: block !important;
}

/* 3. メッセージ画像・代表取締役社長ブロックの下余白を削除 */
.message-image {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.executive-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* .top-message の下余白も詰める */
.top-message {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
}

@media screen and (max-width: 430px) {
/* 1. 実績3つの後にボーダーを入れる（疑似要素で対応） */
.credit-list::after {
  content: "";
  display: block;
  width: 326px;
  max-width: 100%;
  height: 0;
  border-bottom: 1px solid #fff;
  margin: 0 auto 30px auto;
}
/* 2. セミナーグループの背景透明を強制 */
.seminar-group {
  background: none !important;
  gap: 0 !important;
}
.seminar-content {
  background: none !important;
}
/* 3. 画像とテキストの間の余白を0に */
.seminar-group > .seminar-image + .seminar-content {
  margin-top: 0 !important;
}
}

@media screen and (max-width: 430px) {
/* メッセージ画像・代表名ブロック直下の余白を完全に削除 */
.top-message {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.top-message .container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.message-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.message-image {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.executive-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* section直下の余白も詰める */
section.top-message {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Companyセクションの上部余白も詰める */
.company {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
}

@media screen and (max-width: 430px) {
/* セミナー部分の余白を徹底的に詰める */
.seminar-group {
  gap: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.seminar-image {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.seminar-image img {
  margin-bottom: 0 !important;
  display: block !important;
}
.seminar-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: none !important;
}
.seminar-content h4 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
/* セミナーセクション直下の余白も詰める */
#results .seminar-group {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#results {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
}
@media (max-width: 430px) {
  /* セミナー全体の余白を徹底的に詰める */
  section.credits,
  .credits .container,
  .credit-list,
  .credit-list::after,
  .seminar-group,
  .seminar-image,
  .seminar-image img,
  .seminar-content,
  .seminar-content h4,
  .seminar-content p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .seminar-group {
    gap: 0 !important;
    background: none !important;
  }
  .seminar-content {
    background: none !important;
  }
  /* 画像とテキストの間も0 */
  .seminar-group > .seminar-image + .seminar-content {
    margin-top: 0 !important;
  }
  /* セミナー直下のsectionの余白も0 */
  #results {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Companyセクションの上余白も0 */
  .company {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 430px) {
/* セミナー画像の直後の余白を徹底的に削除 */
.seminar-group,
.seminar-image,
.seminar-image img,
.seminar-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}
.seminar-group {
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: none !important;
}
.seminar-image {
  display: block !important;
  width: 100% !important;
}
.seminar-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}
.seminar-group > .seminar-image + .seminar-content {
  margin-top: 0 !important;
}
.seminar-content {
  background: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.seminar-content h4,
.seminar-content p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 代表肩書の後の余白を徹底的に削除 */
.message-image,
.message-image img,
.executive-info {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}
.executive-info span,
.executive-info h5 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.top-message,
.top-message .container,
.message-content,
section.top-message,
.company {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
}

@media screen and (max-width: 430px) {
.seminar-image,
.message-image {
  height: 140px !important;
  min-height: 0 !important;
  max-height: 180px !important;
  width: 100% !important;
  display: block !important;
}
.seminar-image img,
.message-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  min-height: 0 !important;
  max-height: 180px !important;
  margin-bottom: 0 !important;
  display: block !important;
}
}

@media screen and (max-width: 430px) {
/* セミナー部分のボーダー */
.credit-list::after {
  content: "";
  display: block;
  width: 90%;
  height: 0;
  border-bottom: 2px solid #fff;
  margin: 30px auto 20px auto;
}
/* セミナー画像 */
.seminar-group {
  gap: 0 !important;
  background: none !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
}
.seminar-image {
  width: 100% !important;
  height: 140px !important;
  min-height: 0 !important;
  max-height: 180px !important;
  display: block !important;
  margin: 0 auto 0 auto !important;
}
.seminar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 0 !important;
}
/* セミナーテキスト */
.seminar-content {
  background: none !important;
  padding: 0 15px !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.seminar-content h4 {
  font-size: 18px !important;
  margin-bottom: 10px !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.seminar-content p {
  font-size: 14px !important;
  color: #fff !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}
}

@media screen and (max-width: 430px) {
/* セミナーセクション全体の左右paddingと上余白 */
section.credits {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 20px !important;
}
.credits .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ボーダー */
.credit-list::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  border-bottom: 2px solid #fff;
  margin: 0 auto 20px auto;
}
/* セミナーグループ */
.seminar-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
/* 画像 */
.seminar-image {
  width: 100% !important;
  height: 140px !important;
  min-height: 0 !important;
  max-height: 180px !important;
  display: block !important;
  margin: 0 auto 0 auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.seminar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
/* テキスト */
.seminar-content {
  background: none !important;
  padding: 0 !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.seminar-content h4 {
  font-size: 18px !important;
  margin-bottom: 10px !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.seminar-content p {
  font-size: 14px !important;
  color: #fff !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}
}

section.credits {
  padding-top: 20px !important; /* 上余白 */
  /* padding-bottom: 20px !important; */
}

@media screen and (max-width: 430px) {
/* セミナーグループの統一されたスタイル */
.seminar-group {
  gap: 20px !important;
  padding-top: 20px !important;
  margin-bottom: 20px !important;
  background: none !important;
  border: none !important;
}
.seminar-image {
  margin-bottom: 0 !important;
  height: 140px !important;
  min-height: 0 !important;
  max-height: 180px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.seminar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
.seminar-content {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding: 0 15px !important;
  background: none !important;
}
.seminar-content h4 {
  margin-bottom: 10px !important;
}
.credit-list::after {
  margin: 30px auto 20px auto !important;
}
}

@media screen and (max-width: 430px) {
.top-message,
.top-message .container,
.message-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
}

@media screen and (max-width: 430px) {
.top-message {
  margin-bottom: 30px !important;
}
}

@media screen and (max-width: 430px) {
.company {
  padding-top: 30px !important;
}
.top-message {
  margin-bottom: 30px !important;
}
}

@media screen and (max-width: 430px) {
.message-image {
  margin-bottom: 80px !important;
}
.company h2 {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
}
}

/* =====================
 HERO SECTION (TOP PAGE)
 ===================== */
.hero {
  position: relative;
  margin-top: 128px !important;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  overflow: hidden;
  line-height: 0;
  height: 590px;
}
.hero-bg {
  width: 100%;
  min-height: 590px;
  background: url('images/hero_back_pc.png') center center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 0 80px 0;
  max-width: 900px;
}
.hero-main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: 0;
}
.hero-main .blue {
  color: #3387e2;
  font-weight: 700;
}
.hero-main span {
  display: inline-block;
}
.hero-en {
  font-family: 'Lora', serif;
  font-size: 22px;
  color: #222;
  margin-bottom: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.hero-desc {
  font-family: 'Yu Gothic', 'YuGothic', sans-serif;
  font-size: 18px;
  color: #222;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
}
@media (max-width: 900px) {
  .hero-inner {
      padding: 60px 0 40px 0;
      max-width: 98vw;
  }
  .hero-main {
      font-size: 40px;
  }
  .hero-en {
      font-size: 16px;
  }
  .hero-desc {
      font-size: 15px;
  }
}
@media (max-width: 430px) {
  .hero {
      margin-top: 60px !important;
  }
  .hero-bg {
      min-height: 603px;
      background: url('images/hero_back_sp.png') center center/cover no-repeat;
      padding: 0;
  }
  .hero-inner {
      padding: 40px 0 30px 0;
      max-width: 100vw;
  }
  .hero-main {
      font-size: 28px;
      line-height: 1.3;
      margin-bottom: 16px;
  }
  .hero-en {
      font-size: 12px;
      margin-bottom: 18px;
  }
  .hero-desc {
      font-size: 12px;
      line-height: 1.7;
  }
}

@media (max-width: 430px) {
  .features-image {
      height: 603px;
  }
}

/* メッセージセクションの統一されたスタイル */
.credits,
.top-message,
section.credits,
section.top-message,
section#message.top-message {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 430px) {
.credits,
.top-message,
section.credits,
section.top-message,
section#message.top-message {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
}

/* クレジットセクション上下に余白を追加し、背景色もグラデに合わせる */
.credit-section-padding-top,
.credit-section-padding-bottom {
height: 20px;
background: linear-gradient(to right, #1E90FF, #0D68C0);
}
@media (max-width: 430px) {
.credit-section-padding-top,
.credit-section-padding-bottom {
  height: 16px;
}
}

@media (min-width: 431px) {
.hero {
  position: relative;
  margin-top: 128px !important;
  margin-bottom: 0;
  padding: 0;
  background: transparent !important;
  overflow: hidden;
  line-height: 0;
  height: 590px;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: unset;
  background: url('images/hero_back_pc.png') top center/cover no-repeat;
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 80px;
  max-width: 900px;
  height: 100%;
}
.sub-nav .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.sub-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  height: 100%;
  padding: 0;
  margin: 0;
}
.logo img {
  height: 80px;
  width: auto;
  display: block;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}
.pc-nav {
  flex: 1 1 auto;
  margin: 0 40px;
}
.header-buttons.pc-only {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
}

/* 英語キャッチコピーのSP用スタイル */
@media (max-width: 430px) {
.hero-en {
  text-align: left !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 18px 0 18px 0 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  width: 100% !important;
  display: block !important;
}
.hero-en span {
  display: inline-block !important;
  width: 100% !important;
}
.sp-only {
  display: inline !important;
}
}
@media (min-width: 431px) {
.sp-only {
  display: none !important;
}
.hero-en {
  text-align: left;
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 32px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  width: auto;
  display: block;
}
}

@media (max-width: 430px) {
.message-image img {
  margin-bottom: 20px !important;
}
}

@media (max-width: 900px) {
.container,
.hero-inner.container {
  max-width: 100vw !important;
  width: 100vw !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
.hero-bg {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow-x: hidden !important;
}
}
@media (max-width: 430px) {
.container,
.hero-inner.container {
  max-width: 100vw !important;
  width: 100vw !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}
.hero-bg {
  width: 100vw !important;
  min-width: 100vw !important;
  overflow-x: hidden !important;
}
}
@media (min-width: 901px) {
.container,
.hero-inner.container {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 160px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}
.hero-bg {
  width: 100% !important;
  min-width: unset !important;
  margin: 0 auto !important;
}
}

/* レスポンシブ最適化: 統一されたコンテナスタイル */
html, body {
  width: 100%;
  min-width: 320px;
  max-width: 100vw;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(12px, 5vw, 160px);
  padding-right: clamp(12px, 3vw, 40px);
  box-sizing: border-box;
}

/* ヒーローセクション */
.hero-bg {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow-x: hidden;
}

.hero-inner {
  padding: clamp(24px, 8vw, 100px) 0 clamp(24px, 6vw, 80px) 0;
  max-width: 900px;
  margin: 0 auto;
}

/* サブナビ・フッター・他セクションも同様に可変余白 */
.sub-nav .container,
.footer-content,
.footer-bottom {
  padding-left: clamp(12px, 5vw, 160px);
  padding-right: clamp(12px, 3vw, 40px);
  box-sizing: border-box;
}

/* タブレット以下で余白を縮小 */
@media (max-width: 900px) {
  .container,
  .sub-nav .container,
  .footer-content,
  .footer-bottom {
    padding-left: clamp(8px, 4vw, 32px);
    padding-right: clamp(8px, 4vw, 32px);
  }
  .hero-inner {
    padding: clamp(16px, 6vw, 60px) 0 clamp(16px, 5vw, 40px) 0;
    max-width: 98vw;
  }
}

/* スマホでさらに余白を縮小 */
@media (max-width: 430px) {
  .container,
  .sub-nav .container,
  .footer-content,
  .footer-bottom {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-inner {
    padding: 24px 0 24px 0;
    max-width: 100vw;
  }
}

/* 画像やセクションの横幅・高さも可変で崩れ防止 */
.hero-bg img,
.hero-image,
.service-visual img,
.credit-item img,
.seminar-image img,
.message-image img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
display: block;
}

/* テーブルやリストも横スクロール防止 */
table {
width: 100%;
table-layout: auto;
word-break: break-word;
}

/* featuresセクションの画像サイズに合わせた定義 - PC面での背景画像表示のため削除 */

@media (max-width: 900px) {
  /* タブレット用設定 - PC面での背景画像表示のため削除 */
}

@media (max-width: 430px) {
  /* SP用設定 - PC面での背景画像表示のため削除 */
}

/* Feature section background fix - 2024 */