/* 全体のフォント設定 */
html, body {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #333333;
  margin:0;
}

/* 見出しや強調部分はやや太め */
h1, h2, h3, h4, h5, h6, strong {
  font-weight: 700;
  margin:0;
}

/* 英語タイトル・セクション見出し専用フォント */
h1, h2, h3.section-title, .section-title, .about-platform h2, .vision h2 {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.03em;
}

/* 通常テキスト・段落 */
p, li, a, span {
  font-weight: 700;
  line-height: 1.8;
  margin:0;
}

.highlight {
  color: #41B83B;
}

/* 初期状態（PC）では sp を非表示、pc を表示 */
.pc {
  display: block;
}
.sp {
  display: none;
}

/* スマホ時（768px以下）で sp を表示、pc を非表示 */
@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/* ---ヘッダー --- */
.global-header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 50px;
}

.logo img {
  height: 72px;
}

.menu-toggle {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 25px;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon {
  width: 100%;
  height: 4px;
  background-color: #333;
  transition: all 0.3s;
}

/* --- Navigation --- */
.global-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 210px;
  margin: 0;
  padding: 0;
}

.global-nav a {
  color: #333333;
  text-decoration: none;
  transition: color 0.2s;
}

.global-nav:hover > a {
  color: #FAC107;
  background: #F5F5F5; 
}

/* --- Hover state --- */
.global-nav li.has-submenu {
  position: relative;
}

.global-nav li.has-submenu:hover > a {
  color: #FAC107;
}

/* --- Dropdown --- */
.submenu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 45px;
  left: 0;
  background: #FFFFFF; 
  border-radius: 4px;
  padding: 10px 0;
  min-width: 160px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.submenu li {
  padding: 6px 20px;
  white-space: nowrap; /* ← 縦長防止 */
}

.submenu li a {
  color: #333333;
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
}

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

/* --- Contact Button --- */
.global-nav .contact-btn {
  background-color: #FA8513;
  color: #fff !important;
  padding: 10px 45px;
  border-radius: 25px;
  transition: background-color 0.3s;
  font-size: 1.1rem;
}

.global-nav .contact-btn:hover {
  background-color: #d97e00;
}

/* --- Hover visual cleanup --- */
.global-nav li.has-submenu:hover .submenu li a:hover {
  color: #f39800;
}

/* モバイル表示 */
@media (max-width: 768px) {
  .header-inner {
    padding: 10px 20px;
  }
  
  .logo img {
    height: 49px;
  }


  .global-nav {
    display: none; /* メニュー表示 */
    position: absolute;
    top: 80px; /* ヘッダーの下に表示 */
    right: 0;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background:#ffffff;
  }

  .global-nav ul {
    gap: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-toggle {
    display: flex;
    position: relative;
  }
  .global-nav .contact-btn{
    background-color: #41B83B;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    font-size: 1.0rem;
  }

  .global-nav .contact-btn:hover{
    background-color: #2B8027;
  }
  
  .submenu {
    display: block;  /* SPでは表示 */
    opacity: 1;  /* 見えるように */
    visibility: visible;
    position: unset;
  }
}

/* メニュー開閉時のアニメーション */
.global-nav.open {
  display: flex;
  padding: 20px 40px;
  width: 50%;  
}

.menu-toggle.open .menu-icon:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
}

.menu-toggle.open .menu-icon:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .menu-icon:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
}
/* --- フッター --- */
/* ==============================
   Footer
============================== */
.site-footer {
  background: #FCFCFC;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1420px;
  margin: 0 auto;
  padding: 60px 20px 50px;
  flex-wrap: wrap;
}

/* --- ロゴ部分 --- */
.footer-logo img {
  width: 151pxd;
  height: auto;
}

/* --- ナビゲーション全体 --- */
.footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: 60px;
  flex-wrap: wrap;
}

/* --- 各カラム --- */
.footer-column {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}

.footer-column h4 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

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

.footer-column a:hover {
  color: #00a871; /* 緑のアクセント */
}

/* --- お問い合わせボタン --- */
.footer-column.contact {
  display: flex;
  align-items: center;
}

.footer-nav .contact-btn {
  display: inline-block;
  border:solid 0.75px #333333;
  border-radius: 50px;
  padding: 8px 24px;
  font-size: 0.95rem;
  font-weight: 400;  
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-nav .contact-btn:hover {
  background-color: #333333;
  border-color: #333333;
  color: #fff;
}

/* --- 下部（コピーライト） --- */
.footer-bottom {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 16px 10px;
  font-weight: 400;
  font-size: 1.2rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {

  /* フレックス解除（これが最重要） */
  .footer-inner,
  .footer-nav {
    display: block !important;
  }

  .footer-inner{
    padding: 20px 0 0;
  }

  /* ロゴ中央寄せ */
  .footer-logo {
    text-align: center;
    margin-bottom: 30px;
  }

  .footer-logo img {
    width: 88px;
    margin: 0 auto;
  }

  /* メニュー全体を縦並びに */
  .footer-column {
    text-align: center;
    margin-bottom: 25px;
  }

  .footer-column h4 {
    margin-bottom: 10px;
    font-size: 0.95rem;
  }

  .footer-column ul {
    padding: 0;
    list-style: none;
    margin: 0;
  }

  .footer-column ul li {
    margin-bottom: 0px;
  }

  /* FAQ・プライバシーポリシーも中央 */
  .footer-column ul li a {
    font-size: 0.7rem;
  }

  /* お問い合わせボタンも中央 */
  .footer-column.contact {
    text-align: center;
  }

  .footer-column.contact .contact-btn {
    padding: 4px 32px;
    font-size: 0.9rem;
  }

  /* コピーライト */
  .footer-bottom {
    padding: 12px 0;
    color: #fff;
    font-size: 0.6rem;
    margin-top: 20px;
  }
}

/* --- トップ --- */
/* --- Hero MV --- */
.hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

/* ✅ 下部カラーライン */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(to right, #00a871 33%, #0070c0 66%, #f39800 100%);
}

/* --- 内部レイアウト --- */
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px; /* ← バランス調整 */
  max-width: 1200px; /* 全体幅を中央に固定 */
  width: 90%;
  margin: 0 auto;
  opacity: 0;
  animation: heroFadeIn 0.3s ease-out forwards 0.3s;
}

/* --- テキスト側 --- */
.hero-text {
  text-align: right; /* ← ロゴに寄せて右寄せ */
  opacity: 0;
  transform: translateX(-60px);
  animation: textSlideIn 1s ease-out forwards 1.4s;
}

.hero-text h1 {
  font-size: 2.5rem;
  line-height: 1.8;
}

.hero-text p {
  margin-top: 20px;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-40px);
  animation: textFadeUp 0.8s ease-out forwards 2.4s;
}

/* --- ロゴ側 --- */
.hero-logo {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-200px) rotate(-120deg);
  animation: logoRollIn 1.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards 0.3s;
}

.hero-logo img {
  width: 432px;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  /* セクション高さを調整 */
  .hero {
    height: auto;
    min-height: auto;
    padding: 40px 0px 60px;
  }

  /* 内側レイアウトの余白最適化 */
  .hero-inner {
    flex-direction: column;
    gap: 20px !important; /* ← ここが超重要 */
    text-align: center;
    width:100%;
  }

  /* ロゴサイズ調整 */
  .hero-logo img {
    order: 1;
    width: 220px;   /* 1枚目に近い自然なサイズ */
  }

  /* テキスト調整 */
  .hero-text {
    order: 2;
    text-align: center !important;
  }

  .hero-text h1 {
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .hero-text p {
    margin-top: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  /* 下部グラデ線サイズ調整 */
  .hero::after {
    height: 16px;
  }
}

/* --- Vision Section --- */
.top-page .vision {
  position: relative;
  background: #F3F7EF;
  padding: 100px 20px;
  overflow: hidden;
}

/* 内部構成 */
.top-page .vision-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

/* 左側イラスト */
.top-page .vision-image {
  flex: 1;
  text-align: center;
  transform: translateX(100px); /* 初期位置（右から外） */
  opacity: 0; /* 初期状態で非表示 */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.top-page .vision-image img {
  width: 489px;
  max-width: 100%;
}

/* 右側テキスト */
.top-page .vision-text {
  flex: 1;
  text-align: left;
  opacity: 0; /* 初期状態で非表示 */
  transform: translateX(-100px); /* 初期位置（左から外） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.top-page .vision-image.show,
.top-page .vision-text.show {
  opacity: 1; /* 画面内に入ったら表示 */
  transform: translateX(0); /* スライドイン完了 */
}
.top-page .vision-text h2 {
  font-size: 2.0rem;
}

.top-page .vision-text h3 {
  font-size: 1.1rem;
  margin: 10px 0 40px;
}

.top-page .vision-text p {
  margin-top: 35px;
  font-weight: 400;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .top-page .vision{
    padding: 50px 0px;
  }
  
  .top-page .vision-inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .top-page .vision-text {
    text-align: center;
  }

  .top-page .vision-text h2 {
    font-size: 1.3rem;
    line-height: 1.7;
  }

  .top-page .vision-text h3 {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 10px 0;
  }

  .top-page .vision-text p {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 20px 0;
  }

  .top-page .vision-image img {
    width: 219px;
  }
}

/* --- About Platform --- */
.about-platform {
  position: relative;
  background: #fff;
  padding: 120px 20px 80px;
  text-align: center;
  overflow: hidden;
}

/* 吹き出し下部の三角形装飾 */
.about-platform::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 10%;
  height: 90px;
  background: #F3F7EF;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.about-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* 見出し */
.about-platform h2 {
  font-size: 3.5rem;
  font-weight: 400;
}

.about-platform .subtitle {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 50px;
}

.about-platform .description {
  font-size: 1rem;
  font-weight: 400;
  margin: 0 auto 60px;
  text-align: left;
  max-width: 620px;
}

/* --- Diagram --- */
.about-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.node {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node.center img {
  width: 354px;
}

/* 丸要素 */
.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.2rem;
}

.circle.yellow {
  background: #FAC107;
}

.circle.blue {
  background: #0CA4CD;
}

/* 矢印 */
.connector-arrow {
  font-size: 7rem;
}

.left-arrow {
  color: #FAC107;
  margin-left: -10px;
}

.right-arrow {
  color: #0CA4CD;
  margin-right: -10px;
}

/* --- 枝分かれ線 --- */
.branch-lines {
  position: relative;
  width: 100%;
  max-width: 923px;
  margin: 0 auto;
  height: 20px;
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

/* 中央から縦に下りる線 */
.vertical-line {
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 80px;
  background-color: #41B83B;
}

/* 横の枝線（3方向に分岐） */
.horizontal-line {
  position: absolute;
  bottom: 20px;
  left: 84px;
  width: 745px;
  height: 5px;
  background-color: #41B83B;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 緑の縦の枝（下の番号に伸びる） */
.connector {
  width: 5px;
  height: 25px;
  background-color: #41B83B;
  margin-top: 20px;
}

/* 左・中央・右の位置を微調整 */
.connector.left {
  transform: translateX(-50%);
}
.connector.right {
  transform: translateX(-50%);
  margin-right: -3px;
}

/* --- 下部の3項目 --- */
.about-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 185px;
  margin-bottom: 80px;
  margin-left: -35px;
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

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

.bottom-item .num {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  background: #41B83B;
  color: #fff;
  font-weight: 700;
  font-size: 2.0rem;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.bottom-item p {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
}

/* --- ボタン --- */
.about-btn {
  margin-top: 20px;
}

.about-btn .btn-green {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  background: #41B83B;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 18px 30px 18px 58px;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.3s;
}

.about-btn .btn-green:hover {
  background: #2B8027;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
}

.about-btn .btn-green .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #41B83B;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 2.0rem;
  transition: transform 0.3s ease;
}

.about-btn .btn-green:hover .icon {
  transform: translateX(5px);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  /* 吹き出し下部の三角形装飾 */
  .about-platform::before {
    width: 30%;
    height: 54px;
  }

  /* セクション余白 */
  .about-platform {
    padding: 60px 20px 40px;
  }

  /* タイトル小さく */
  .about-platform h2 {
    font-size: 2.2rem;
  }
  /* サブタイトル */
  .about-platform .subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* 説明文 */
  .about-platform .description {
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 20px;
  }

  .about-diagram {
    flex-direction: row;
    justify-content: center;
  }

  .connector-arrow {
    display: block;
    font-size: 2rem;
  }

  .left-arrow {
    margin-left: -2px;
  }

  .right-arrow {
    margin-right: -2px;
  }

  /* 丸要素を縮小 */
  .circle {
    width: 74px;
    height: 76px;
    font-size: 0.9rem;
    line-height: 1.3;
  }
  .circle.blue {
    font-size: 0.7rem;
  }

  /* 中央ロゴ */
  .node.center img {
    width: 115px;
  }
  
  .vertical-line{
    top: -15px;
    left: 51%;
    width: 3px;
    height: 35px;
  }

  .horizontal-line {
    bottom: 18px;
    left: 14%;
    width: 71%;
    height: 3px;
  }
  
  .connector {
    width: 3px;
    height: 22px;
    margin-top: 20px;
  }
  
  .about-bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px;
    margin-bottom: 40px;
    margin-left:0px;
  }

  .bottom-item{
    width: 100px;
  }

  .bottom-item .num {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
    margin-bottom: 10px;
  }

  .bottom-item p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* ボタンを画面幅に合わせる */
  .about-btn .btn-green {
    width: 90%;
    justify-content: center;
    padding: 14px 20px;
    gap: 16px;
    font-size: 1.3rem;
  }

  .about-btn .btn-green .icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}

/* --- News Section --- */
.news {
  padding: 120px 20px 0px;
  text-align: center;
  position: relative;
}

.news-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* タイトル */
.news h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
}

.news .subtitle {
  font-size: 1rem;
  margin-bottom: 60px;
}

/* --- ニュースリスト --- */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
}

.news-list li {
  display: grid;
  grid-template-columns: 140px 120px 1fr 30px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  text-align: left;
  transition: background-color 0.3s ease;
  gap: 30px;
}

.news-date {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
}

.news-tag {
  display: inline-block;
  border: 1px solid #7E7D7D;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.90rem;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.news-text {
  font-weight: 400;
  line-height: 1.6;
}

/* --- ボタン --- */
.news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #41B83B;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  border-radius: 50px;
  padding: 18px 30px;
  text-decoration: none;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  margin-top: 40px;  
}

.news-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #41B83B;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 2.0rem;
  transition: transform 0.3s ease;
}

.news-btn:hover {
  background: #2B8027;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
}

.news-btn:hover .icon {
  transform: translateX(5px);
}


/* --- Responsive --- */
@media (max-width: 768px) {
  .news{
    padding: 0px 20px;
  }
  /* タイトル調整 */
  .news h2 {
    font-size: 2.2rem;
  }

  .news .subtitle {
    margin-bottom: 25px;
    font-size: 0.90rem;
  }

  /* リスト全体 */
  .news-list {
    border-top: 1px solid #eee;
    width: 100%;
  }

  .news-list li {
    display: block; /* gridを解除 */
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }


  /* 日付＋タグを横一列に */
  .news-date,
  .news-tag {
    display: inline-flex;
    align-items: center;
    margin-right: 12px; /* 間の余白 */
    vertical-align: middle;
  }

  .news-date{
    font-size: 0.85rem;
  }

  /* タグ（pill）を横並びに対応させる */
  .news-tag {
    padding: 2px 10px;
    border: 1px solid #999;
    border-radius: 20px;
    font-size: 0.75rem;
    white-space: nowrap; /* 改行防止 */
  }

  .news-text {
    font-size: 0.85rem;
    padding-top: 5px;
  }
  
  /* note へのボタン */
  .news-btn {
    width: 90%;
    margin: 30px auto 0;
    padding: 14px 0;
    font-size: 1.2rem;
    gap: 15px;
    justify-content: center;
  }

  .news-btn .icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}


/* --- Contact Section --- */
.contact-section {
  background: #fff;
  padding: 120px 20px;
  text-align: center;
}

.contact-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* タイトル */
.contact-section h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.contact-section .subtitle {
  margin-bottom: 50px;
}

/* --- ボタン --- */
.contact-inner .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
  background: #41B83B;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  border-radius: 50px;
  padding: 18px 30px 18px 146px;
  text-decoration: none;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.contact-inner .contact-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #41B83B;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 2.0rem;
  transition: transform 0.3s ease;
}

.contact-inner .contact-btn:hover {
  background: #2B8027;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
}

.contact-inner .contact-btn:hover .icon {
  transform: translateX(5px);
}

/* --- Responsive --- */
@media (max-width: 768px) {

  .contact-section{
    padding: 40px 20px;
  
  }

  /* タイトル */
  .contact-section h2 {
    font-size: 2.2rem;
    margin-bottom: 0px;
  }

  /* サブタイトル */
  .contact-section .subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* ボタン */
  .contact-inner .contact-btn {
    width: 90%;
    margin: 0 auto;
    padding: 16px 20px;
    font-size: 1.3rem;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  /* 右側アイコン */
  .contact-inner .contact-btn .icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #41B83B;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 会社概要 */
/* === Overview セクション === */
.overview-section {
  background: #ffffff;
}

/* --- タイトルブロック（上の帯部分） --- */
.overview-header, .mvv-header , .service-header , .function-header , .case-header , .privacy-header , .faq-header , .contact-header {
  background: #F3F7EF;
  text-align: center;
  padding: 30px;
}

.overview-header h2, .mvv-header h2 , .service-header h2 , .function-header h2 , .case-header h2 , .privacy-header h2, .faq-header h2, .contact-header h2{
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: #41B83B;
  margin: 0px;
  letter-spacing: 0.05em;
}

.overview-header p, .mvv-header p , .service-header p , .function-header p , .case-header p , .privacy-header p, .faq-header p, .contact-header p{
  font-size: 1.2rem;
  font-weight: 400;
  color: #000000;
  margin: 0;

}
@media (max-width: 768px) {

  /* --- タイトルブロック（上の帯部分） --- */
  .overview-header, .mvv-header , .service-header , .function-header , .case-header , .privacy-header , .faq-header , .contact-header {
    padding: 15px;
  }

  .overview-header h2, .mvv-header h2 , .service-header h2 , .function-header h2 , .case-header h2 , .privacy-header h2, .faq-header h2, .contact-header h2{
    font-size: 1.5rem;
  }

  .overview-header p, .mvv-header p , .service-header p , .function-header p , .case-header p , .privacy-header p, .faq-header p, .contact-header p{
    font-size: 0.9rem;
  }
}
/* === 概要テーブル === */
.overview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  margin: 140px auto;
  max-width: 800px;
}

.overview-table th,
.overview-table td {
  border-bottom: 1px solid #e6e6e6;
  padding: 14px 20px;
  text-align: left;
  vertical-align: middle;
}

.overview-table th {
  width: 30%;
  font-weight: 600;
  color: #41B83B;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

.overview-table td {
  font-weight: 400;
  line-height: 1.8;
}

/* 最後の行に下線を引かない */
.overview-table tr:last-child th,
.overview-table tr:last-child td {
  border-bottom: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .overview-section .container{
    margin: 0 20px;
  }
  
  .overview-table{
    margin: 40px auto;
  }
  .overview-table th,
  .overview-table td {
    display: table-cell !important;
    width: auto;
    padding: 14px 20px;
  }

  .overview-table th{
    font-size: 0.80rem;
  }

  .overview-table td{
    font-size: 0.90rem;
  }

  .overview-table tr {
    display: table-row !important;
  }
}

/* --- 経営理念セクション --- */
.philosophy-section {
  text-align: center;
}

.philosophy-box {
  background: #eaf5e7;
  border: 3px solid #F3F7EF;
  border-radius: 50px;
  padding: 60px 40px;
  max-width: 940px;
  margin: 0 auto;
}

/* --- 社長挨拶・社名由来ヘッダ --- */
.philosophy-header {
  font-size: 2.0rem;
  background-color: #41B83B;
  color: #fff;
  padding: 12px 65px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 50px;
  letter-spacing: 0.05em;
}

/* --- 社長挨拶・社名由来 セクション内テキスト --- */
.philosophy-text,
.policy-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 40px;
}

.philosophy-img {
  width: 375px;
  margin-top: 20px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  /* コンテンツ枠を細くする */
  .philosophy-box {
    display: flex;
    flex-direction: column;  
    max-width: 90%;
    padding: 30px 20px;
    border-radius: 20px;
    margin: 0 20px;
  }

  /* 見出し（緑ボタン） */
  .philosophy-header {
    font-size: 1.2rem;
    padding: 10px 70px;
    margin: 0 40px 20px;
  }

  /* テキスト（本文） */
  .philosophy-text,
  .policy-text {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: left;
  }

  .philosophy-header.ceo-message {
    order: 1;
  }

  .philosophy-text.ceo-message {
    order: 2;
  }

  .philosophy-header.company-name {
    order: 4;
  }

  .philosophy-text.company-name {
    order: 5;
  }

  /* イラストを中央に & 小さく */
  .philosophy-img {
    order: 3;
    max-width: 310px;
    margin: auto;
    display: block;
  }
}

/* === Access セクション === */
.access-section {
  padding: 80px 20px;
  background: #fff;
}

.access-section h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  text-align: center;
}

.access-section .subtitle {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: -20px;
}

.access-section .address {
  font-size: 1.0rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 30px;
}

.map {
  text-align: center;
  max-width: 900px;
  margin: auto;  
}

.map iframe {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 450px; /* 必要に応じて高さを調整 */
}

/* === スマホ対応 === */
@media (max-width: 768px) {
  .access-section{
    padding:20px;
  }
  /* 全体の幅を調整 */
  .access-section .container {
    max-width: 90%;
    margin: 0 auto;
  }

  /* 見出し */
  .access-section h2 {
    font-size: 1.8rem;
    margin-bottom: 4px;
  }

  .access-section .subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* 住所 */
  .access-section .address {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 20px;
    text-align: left;       /* ← 1枚目に合わせて左寄せ */
    white-space: normal;    /* 強制折り返し */
  }

  /* マップ（iframe）のサイズ */
  .map iframe {
    width: 100%;
    height: 220px;           /* ← 1枚目に近い高さへ */
    border-radius: 10px;
  }
}

/* --- MVV セクション --- */
.mvv-section {
  background: #f7f9f6;
  padding: 0px 20px;
}

/* --- Story セクション --- */
.story-section {
  background-color: #f7f9f6;  /* 背景色 */
  padding: 80px 20px;
}

.story-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;  /* 画像とテキストの間にスペース */
  flex-wrap: wrap;
}

.story-section .container, .mvv-sub-section .container {
  max-width:1000px;
  margin:auto;
}

.story-section h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  text-align: left;
  margin-bottom: 20px;
}

.story-section h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 50px;
}

.story-text-content {
  flex: 1;
  text-align: left;
  opacity: 0; /* 初期状態で非表示 */
  transform: translateX(-100px); /* 初期位置（左から外） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.story-text {
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 600px;
}

.story-image {
  flex: 1;
  max-width: 400px;
  opacity: 0; /* 初期状態で非表示 */
  transform: translateX(100px); /* 初期位置（右から外） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}
.story-text-content.show,
.story-image.show {
  opacity: 1; /* 画面内に入ったら表示 */
  transform: translateX(0); /* スライドイン完了 */
}

.story-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .story-section {
    pading:20px;
  }
  .story-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .story-image {
    margin-bottom: 20px;  /* 画像とテキストの間隔 */
    order: 2;
  }

  .story-text-content {
    order: 1;
  }

  .story-text.sp {
    order: 3;
    text-align: center;
    font-size: 0.8rem;
    margin-bottom: 40px;
  }
  
  .story-text-content h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
  }

  .story-text-content h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
  }

  .story-image img {
    width: 243px;
  }
}

/* --- MVV セクション --- */
.mvv-sub-section {
  background: #F3F7EF;
  padding: 60px 20px;
  text-align: center;
}

.mvv-sub-section h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  color: #333333;
  font-weight: 400;
}

/* --- Mission セクション --- */
.mission {
  padding: 40px 20px;
  border-bottom: 1px solid #D9D9D9;
  opacity: 0;
  transform: translateX(-100px); /* 初期位置（左から外） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.mission p {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.3;
}

/* --- Vision セクション --- */
.mvv-sub-section .vision {
  padding: 40px 20px;
  border-bottom: 1px solid #D9D9D9;
  opacity: 0;
  transform: translateX(100px); /* 初期位置（右から外） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.mvv-sub-section .vision p {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.3;
}

/* --- Value セクション --- */
.mvv-sub-section .value {
  padding: 40px 20px;
  opacity: 0;
  transform: translateY(100%); /* 初期位置（下から上） */
  transition: all 1s ease-out; /* スライドインのアニメーション */
}

.mission.show,
.mvv-sub-section .vision.show {
  opacity: 1; /* 画面内に入ったら表示 */
  transform: translateX(0); /* スライドイン完了 */
}

.mvv-sub-section .value.show {
  opacity: 1; /* 画面内に入ったら表示 */
  transform: translateY(0); /* スライドイン完了 */
}

.value-boxes {
  display: grid;
  gap: 20px;
}

.value-boxes.first {
  grid-template-columns: repeat(3, 1fr);
}

.value-boxes.second {
  grid-template-columns: repeat(2, 1fr);
  margin: 30px 185px;
}

.value-item {
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 8px;
  padding: 10px;
  width: 296px;
}

.value-item h4 {
  font-weight: 500;
  font-size: 1.5rem;
}

.value-item p {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  color: #41B83B;
}

@media (max-width: 768px) {
  .mvv-sub-section{
    padding:20px;
  }
  .mvv-sub-section h3{
    font-size: 1.5rem;
    margin-bottom: 15px; /* 見出しとテキストの間のスペース */
  }
  
  .mission{
    padding:0 20px 40px;
  }

  .mission p, .mvv-sub-section .vision p {
    font-size: 1.3rem;
  }

  .value-boxes.first {
    grid-template-columns: repeat(2, 1fr);
  }
  .value-boxes.second, .value-boxes.third, .value-boxes.forth {
    grid-template-columns: repeat(1, 1fr);
    margin: 20px 0px;
  }

  .value-item {
    padding: 15px;
    width:auto;
  }

  .value-item h4 {
    font-size: 1.1rem; /* 見出しフォントサイズ調整 */
  }

  .value-item p {
    font-size: 0.8rem; /* 説明文のフォントサイズ調整 */
  }
}

/* --- SERVICE セクション --- */
.service-section {
  text-align: center;
}

/* container内での中央揃え */
.service-section .container {
  display: flex;
  background: #F3F7EF;
  flex-direction: column; /* 縦並び */
}

/* 画像とテキストのまとまり */
.service-image-intro {
  display: flex;
  flex-direction: row; /* 横並び */
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px; /* 画像と課題リストの間隔を調整 */
  background: #ffffff;
}

.service-image img {
  width: 458px;
  height: auto;
}

.service-intro {
  text-align: left;
}

.service-intro h3 {
  font-size: 2.5rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .service-image-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* 画像とテキストの間にスペース */
    margin-bottom: 0;
  }

  .service-image{
    order: 2;
  }

  .service-image img {
    width: 260px;
  }

  .service-intro {
    order: 1;
    text-align: center; /* テキストを中央揃え */
    margin-top: 30px;
  }

  .service-intro h3 {
    font-size: 1.5rem; /* 見出しのサイズを小さく */
    margin-bottom: 10px;
  }
}
/* 解決したい課題（中央揃え） */
.service-problem {
  max-width: 800px;
  width;100%;
  margin: 30px auto 0;
  text-align: left;
}

.service-problem h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: #39b54a;
  text-align: center;
}

.service-problem ul {
  list-style: none;
  padding: 40px 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  background-color: #ffffff;
  border-radius: 10px;
}

.service-problem li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  color: #333;
  margin: 10px 0;
  display: flex;
  align-items: center;
  position: relative;  
}

/* チェックマークに四角枠をつける */
.check-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  margin-right: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  position: relative;  
}

.check-icon::after {
  content: '';
  display: block;
  position: absolute;
  width: 18px;
  height: 6px;
  border-left: 5px solid #41B83B;
  border-bottom: 5px solid #41B83B;
  transform: rotate(-45deg);
}

/* フッター */
.service-footer {
  margin-bottom: 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  color: #333;
}

@media (max-width: 768px) {
  .service-problem h4{
    margin-bottom: 40px;
  }
  .service-problem ul {
    grid-template-columns: repeat(1, 1fr);
    margin: 0 20px;
    padding: 20px;
  }
  .service-problem li {
    font-size: 0.95rem;
  }
  .service-footer {
    margin: 40px 0;
  }
}

/* --- SERVICE セクション --- */
.servicecard-section{
  position: relative;
  background-color: #ffffff;
  padding: 80px 20px;
  text-align: center;
}

.servicecard-section::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 10%;
    height: 90px;
    background: #F3F7EF;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.servicecard-section h2 {
  font-size: 2.5rem;
  color: #41B83B;
  margin-bottom: 10px;
}

/* サービスカードのコンテナ */
.service-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列表示 */
  padding-bottom:20px;
  gap: 30px;
  max-width: 1200px; /* 最大幅を設定 */
  margin: 40px auto; /* センター配置 */
}

/* 各サービスカード */
.service-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
  padding-bottom: 30px;
}

.service-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  padding-bottom: 30px;
}

.service-card h4 {
  font-size: 1.2rem;
  color: #ffffff;
  background: #41B83B;
  border-radius: 50px;
  padding: 18px 60px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
  width: 50%;
  margin: auto;  
}

.service-card p {
  font-size: 1.1rem;
  margin-top: 20px;
}

/* サービスカードのホバー効果 */
.service-card:hover {
  transform: translateY(-10px); /* ホバー時に少し浮かせる */
}
@media (max-width: 768px) {
  .servicecard-section::before {
      top: -2px;
      width: 35%;
      height: 50px;
  }
  .servicecard-section h2 {
    font-size: 1.5rem;
  }

  /* サービスカードが縦並びになるように変更 */
  .service-cards-container {
    grid-template-columns: 1fr; /* 1列表示 */
  }
  .service-card {
    display: grid;
    grid-template-columns: 120px 1fr; /* 1列表示 */
    gap: 20px;
    padding: 0;
  }
  .service-card img {
    width: 100%;
    height: auto;
    padding:0;
  }
  .service-card h4 {
    font-size: 0.85rem;
    padding: 9px 0px;
    width: auto;
    margin: 10px;
  }

  .service-card p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
  }  
}
/* --- FUNCTIONセクション --- */
/* --- カード全体配置 --- */
.function-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 100px;
}

.function-section .container h3{
  margin: 50px 0 30px;
  font-size: 1.4rem;
}

.function-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin:30px;
}

/* --- 各カード --- */
.function-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 300px;
  padding-bottom: 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.function-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* アイコン画像 */
.function-icon img {
  width: 222px;
  height: auto;
  margin-bottom: 15px;
}

/* タイトル */
.function-card h4 {
  font-size: 1.4rem;
  background:#41B83B;
  color: #FFFFFF;
  margin-bottom: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 20px 0;
}

/* 説明文 */
.function-card p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2.0;
}

@media (max-width: 768px) {
  .function-section .container h3 {
    margin: 20px 0;
    font-size: 1.4rem;
  }
  
  .function-card {
    width: 90%;
    padding-bottom: 0;
  }

  .function-icon{
    display: grid;
    grid-template-columns: 100px 1fr; /* 1列表示 */
  }

  /* アイコン画像 */
  .function-icon img {
    width: 72px;
    height: auto;
    margin: 15px 40px;
  }

  .function-card h4 {
    font-size: 0.95rem;
  }

  .function-card p {
    font-size: 0.8rem;
    margin:auto;
  }
}
/* WORKセクション */
/* --- カード全体配置 --- */
.case-section .container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

/* --- 事例カード --- */
.case-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  overflow: hidden;
  margin: 20px auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* 事例番号のスタイル */
.case-number {
  display: block;
  align-items: center;
  color: #FFFFFF;
}

.case-label {
  font-size: 1.2rem;  /* 「事例」の文字の大きさ */
  display: block;
}

.case-id {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  display: block;
  text-align: center;
}

/* タイトルのスタイル */
.case-card-header h4 {
  font-size: 1.5rem;
  margin-left: 40px;
  position: relative;
}

.case-card-header h4::before {
  content: '';
  position: absolute;
  left: -22px;
  top: -12px;
  width: 6px;
  height: 180%;
  background-color: #fff;
}

/* 事例番号とタイトルの間に線を追加 */
.case-card-header {
  display: flex;
  align-items: center;
  background-color: #41B83B;
  color: #ffffff;
  padding: 15px 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* カード内の内容 */
.case-body {
  display: flex;
  gap: 40px;
  padding: 40px 40px 60px;
}

.case-img-wrapper {
  flex-shrink: 0;
}

.case-img {
  width: 260px;
  height: auto;
  border-radius: 8px;
}

.case-details {
  flex-grow: 1;
  text-align: left;
}

.case-challenge h5 {
  background-color: #333333;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin-bottom: 10px;
  padding: 5px 20px;
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  border-radius: 3px;
}

.case-challenge p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 20px;
}

.case-approach h5 {
  background-color: #3871C2;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin-bottom: 10px;
  padding: 5px 20px;
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  border-radius: 3px;
}

.case-approach p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 20px;
}

.case-result h5 {
  background-color: #FA8513;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin-bottom: 10px;
  padding: 5px 20px;
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  border-radius: 3px;
}

.case-result p {
  font-size: 1.2rem;
  color: #FA8513;
  line-height: 1.6;
}

@media (max-width: 768px) {

  .case-section .container {
    margin: 0 20px;
  }
  .case-number{
    width:50px;
  }

  .case-label {
    font-size: 0.95rem;  /* 「事例」の文字の大きさ */
    text-align: center;
  }
  .case-id {
    font-size: 1.3rem;  /* 「事例」の文字の大きさ */
  }
  
  .case-card-header {
    padding: 10px 20px;
  }
  /* タイトルのスタイル */
  .case-card-header h4 {
    font-size: 1.0rem;
    margin-left: 20px;
  }
  
  .case-card-header h4::before {
    left: -15px;
    top: -1px;
    width: 3px;
    height: 115%;
  }
  
  /* 事例カード内のコンテンツの配置 */
  .case-body {
    display: block;
    padding: 20px 0;
  }
  .case-card {
    border: 2px solid #41B83B;
  }
  .case-img-wrapper {
    width: 100%;
    text-align: center;
  }

  .case-img {
    width: 90%;
    height: auto;
    margin-bottom: 20px; /* 画像とテキストの間隔 */
  }

  .case-details {
    text-align: left;
    margin: 0 20px;
  }

  /* 各セクションの詳細部分のデザイン */
  .case-challenge h5,
  .case-approach h5,
  .case-result h5 {
    font-size: 0.95rem;
    padding: 5px 15px;
    margin-bottom: 10px;
  }

  .case-challenge p,
  .case-approach p{
    font-size: 0.8rem;
    margin-bottom: 15px;
  }
  
  .case-result p {
    font-size: 1.0rem;
  }
}
/* プライバシーポリシー */
.privacy-section .container , .privacyusage-section  .container{
  max-width: 1000px;
  margin: 0 auto;
}

.privacy-section .container h3, .privacyusage-section .container h3{
  margin-top:50px;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}

/* セクション内容 */
.privacy-content, .privacyusage-content {
  padding: 20px 20px 50px;
}

.privacy-content p, .privacyusage-content p{
  font-size: 1.0rem;
  font-weight: 400;
  padding: 20px 20px 40px;
}

.privacy-list {
  line-height: 1.8;
}

.privacy-list li , .privacyusage-content li{
  margin-bottom: 20px;
  font-size: 1.0rem;
  font-weight: 400;
}

/* 署名部分 */
.signature {
  text-align: right; /* 右端に寄せる */
  margin-top: 20px;
}

.signature p {
  margin: 0;
  padding: 0;
  font-size: 1.0rem;
  font-weight: 400;
}

/* リスト内のテーブルのスタイル */
.privacyusage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 25px;
  background-color: #fff;
}

.privacyusage-table th {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #D9D9D9; /* 下部にライン */
}

.privacyusage-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #D9D9D9;
  border-left: 1px solid #D9D9D9;
}

.privacyusage-table th:first-child {
  background-color: transparent;
}
.privacyusage-table th.column-item,
.privacyusage-table th.column-purpose {
  border-left: 1px solid #D9D9D9;
  background-color: #F5F5F5;
}

/* 最初のtdは塗りつぶし */
.privacyusage-table td:first-child {
  background-color: #F5F5F5;
}

/* 2番目と3番目のtdは塗りつぶさない */
.privacyusage-table td:not(:first-child) {
  background-color: transparent;
}

.privacyusage-table ul {
  list-style-type: none;
  padding-left: 0;
}

.privacyusage-table li {
  margin-bottom: 10px;
}

/* リスト項目のスタイル */
.privacyusage-list li {
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

@media (max-width: 768px) {

  .privacy-content, .privacyusage-content {
    padding: 20px 20px 50px 0;
  }

  .privacy-content p, .privacyusage-content p{
    font-size: 0.80rem;
  }

  .privacy-list li, .privacyusage-content li {
    font-size: 0.80rem;
  }
  
  .signature p {
    font-size: 0.80rem;
  }
  
  /* リスト項目のスタイル */
  .privacyusage-list li {
    font-size: 0.80rem;
  }
  
  .privacyusage-table {
    width: 105%;
    margin-left: -20px;
  }
  
  .privacyusage-table th {
    padding: 10px 25px;
  }
  
  .privacyusage-table th:first-child {
    padding: 0;
  }
  
}
/* 各FAQアイテムのスタイル */
.faq-content {
  max-width: 800px;
  margin: 50px auto;
}

/* FAQ アイテムのスタイル */
.faq-item {
  background-color: #ffffff;
  padding: 20px 20px 0;
}

/* 質問部分 */
.faq-question {
  font-size: 1.0rem;
  color: #41B83B;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 質問番号（Q1などの丸） */
.faq-number {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color: #41B83B;
  color: white;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  padding-top: 10px;  
}

/* 回答部分 */
.faq-item p {
  font-size: 0.95rem;  
  font-weight: 400;
  margin: 0;
  padding-left: 60px;
}

/* セパレータ（下線） */
.faq-divider {
  border: 0;
  border-top: 3px solid #41B83B;
  margin-top: 30px;
}

/* --- アニメーション --- */
@keyframes heroFadeIn {
  to { opacity: 1; }
}

@keyframes logoRollIn {
  0% {
    opacity: 0;
    transform: translateX(-250px) rotate(-200deg);
  }
  70% {
    opacity: 1;
    transform: translateX(10px) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes textSlideIn {
  0% { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes textFadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- CONTACT セクション --- */
.contact-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  margin: 40px auto;
  max-width: 800px;
}

.contact-table th,
.contact-table td {
  border-bottom: 1px solid #e6e6e6;
  padding: 14px 20px;
  text-align: left;
  vertical-align: middle;
}

.contact-table th {
  width: 30%;
  font-weight: 600;
  color: #41B83B;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

.contact-table td {
  font-weight: 400;
  line-height: 1.8;
}

/* 最後の行に下線を引かない */
.contact-table tr:last-child th,
.contact-table tr:last-child td {
  border-bottom: none;
}

.red {
  color: #ff0000;
}

.btn-send {
  background-color: #41B83B;
  color: #fff !important;
  padding: 10px 45px;
  border-radius: 10px;
  font-size: 1.1rem;
}

.btn-send:hover {
  background-color: #309A30;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .overview-section .container{
    margin: 0 20px;
  }
  
  .contact-table{
    margin: 20px auto;
  }
  .contact-table th,
  .contact-table td {
    display: table-cell !important;
    width: auto;
    padding: 14px 20px;
  }

  .contact-table th{
    font-size: 0.80rem;
  }

  .contact-table td{
    font-size: 0.90rem;
  }

  .contact-table tr {
    display: table-row !important;
  }
}