/* 基本設定 */
:root {
  --color-text: #333;
  --color-bg: #fff;
  --color-gray: #f9f9f9;
  --color-border: #e0e0e0;
  --text-gray: #888888;
  --main-color: rgba(44, 62, 80, 1);
  --color-accent: #dddddd;
  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Noto serif JP", serif;
  --font-en: "Libre Baskerville", serif;
  --font-size16--18: clamp(1rem, 0.22vw + 0.95rem, 1.125rem);
  --font-size14--16: clamp(0.875rem, 0.22vw + 0.825rem, 1rem);
  --font-size12--14: clamp(0.75rem, 0.22vw + 0.7rem, 0.875rem);
  --font-size18--24: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
  --font-size20--32: clamp(1.25rem, 1vw + 1rem, 2rem);
  --font-size24--40: clamp(1.5rem, 1.4vw + 1.125rem, 2.5rem);
  --font-size32--56: clamp(2rem, 2vw + 1.5rem, 3.5rem);
}
/* ----------------------------------
   Reset & Base
---------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px solid #ea00ff; */
}

html {
  font-size: 100%;
  overflow-x: hidden;
  scrollbar-width: thin;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background-color: #f3efec;
  line-height: 1.6;
  color: var(--color-text);
  font-family: var(--font-base);
  font-optical-sizing: auto;
  font-size: var(--font-size14--16);
  font-weight: 400;
  word-break: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
  transition: background-color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

/* 画像の基本設定 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リストの基本設定 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リンクのホバーエフェクト */
a {
  transition: opacity 0.3s;
  text-decoration: none;
  color: var(--color-text);
}
a:hover {
  opacity: 0.6;
}

/* ----------------------------------
   Utilities
---------------------------------- */
/*
  .container は theme.json の layout.contentSize で
  グループブロック等に自動適用されますが、
  独自のdivで使用する場合は以下を残してください。
*/
main {
  flex: 1;
}
.section {
  padding: 0 0 clamp(60px, 8vw, 80px);
}
.container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 1; /* Lottieより手前に出す */
}
/*----------------------------------
   Header
---------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 40px;
  z-index: 1000;
  mix-blend-mode: difference;
  transition:
    mix-blend-mode 0.4s ease,
    color 0.4s ease;
}

.header.is-menu-open {
  mix-blend-mode: normal;
  color: #fff;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴ & ナビ 共通フェード */
.logo,
.gnav {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.logo.is-show,
.gnav.is-show {
  opacity: 1;
  transform: translateY(0);
}

.logo img {
  max-height: 42px;
}

/* ナビ */
.gnav ul {
  display: flex;
  gap: 30px;
}
/* 親要素（li）に奥行きを設定すると、回転が立体的になります */
.gnav li {
  perspective: 1000px;
}

.gnav a {
  /* 回転させるためにブロック要素化 */
  display: inline-block;

  font-size: var(--font-size14--16);
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;

  /* 指定の初期値 */
  opacity: 1;

  /* 色の変化はさせず、変形(transform)のみアニメーション */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gnav li:hover a {
  /* Y軸回転で180度（裏返し）の状態でストップ */
  transform: rotateY(180deg);
}

.menu-trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-bg);
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
  z-index: 101;
}

.menu-trigger i {
  font-size: 2rem !important;
}
.menu-trigger i:hover {
  opacity: 0.6;
  transition: 0.3s;
}
/* ----------------------------------
   Hero (Main Visual)
---------------------------------- */
.hero {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(44, 62, 80, 0.5); /* 暗さ調整 */
  z-index: 2;
}
/* ----------------------------------
   Media (Video) -
---------------------------------- */
.hero-media {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0; /* 一番奥 */
}

/* 個別の動画設定 */
.hero-video {
  position: absolute; /* 重ねるために必須 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* JSで制御するため初期は0 */
  z-index: 1;
}
/* 1つ目の動画だけ強制的に表示 */
.hero-video:first-of-type {
  opacity: 1;
}
/* キャッチコピー */
.hero-copy {
  position: relative;
  z-index: 3;
  color: #fff;
  mix-blend-mode: difference;
  text-align: center;
}
.copy-en {
  font-family: var(--font-en);
  font-size: var(--font-size14--16);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.copy-jp {
  font-family: var(--font-serif);
  font-size: var(--font-size20--32);
  font-weight: 500;
  line-height: 1.4;
}
/* ----------------------------------
   Scroll Indicator
---------------------------------- */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  mix-blend-mode: difference;
  font-size: var(--font-size20--32);
  /* インジケーターの初期状態をCSSでも定義しておく */
  opacity: 1;
  transition: color 0.3s ease;
  z-index: 3;
}

.page-header .scroll-indicator {
  color: var(--color-text) !important;
}
.scroll-indicator.is-hide {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 20px;
    left: 24px;
  }
}

/* ==========================
  Page Title
========================== */
.section-subtitle {
  font-size: var(--font-size12--14);
  letter-spacing: 0.15em;
  margin: 8px 0;
  color: var(--color-text);
}
.news-section .section-subtitle {
  color: #111;
}
.page-title-box {
  position: relative;
  margin-top: 150px;
  background-color: #f3efec;
  display: flex;
  align-items: center;
}

.page-title__inner {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 10px;
}

.page-title__main {
  font-family: "Libre Baskerville", "Noto Serif JP", serif;
  font-size: var(--font-size32--56);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-text);
  display: flex;
}

.page-title__main span {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
}

.page-title__main .is-origin {
  opacity: 1;
  transform: translateY(0);
}

/* space */
.page-title__main .space {
  width: 0.4em;
}

.page-title__sub {
  font-size: var(--font-size12--14);
  letter-spacing: 0.15em;
  margin-top: 4px;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(10px);
}

.page-title__side-list {
  position: absolute;
  right: 0; /* innerの右端に配置 */
  bottom: 5px; /* タイトルのベースライン付近に合わせる（調整可） */

  display: flex;
  flex-direction: column; /* 縦に積む（テキストは横書き） */
  gap: 5px; /* 行間 */
  text-align: left; /* 右揃え */

  z-index: 1;
}

/* --- テキストの装飾 --- */
.side-text {
  font-family: "Libre Baskerville", serif; /* タイトルと書体を合わせる */
  font-size: var(--font-size12--14);
  color: var(--color-gray); /* メインより薄くして階層を作る */
  letter-spacing: 0.05em;
  line-height: 1.4;

  /* アニメーション初期状態 */
  opacity: 0;
  transform: translateX(20px); /* 右からスッと出てくる演出 */
  animation: sideFadeIn 0.8s ease forwards;
}

/* --- 時間差設定（上から順に） --- */
.side-text:nth-child(1) {
  animation-delay: 0.6s;
}
.side-text:nth-child(2) {
  animation-delay: 0.8s;
}
.side-text:nth-child(3) {
  animation-delay: 1s;
}

/* --- フェードインアニメーション --- */
@keyframes sideFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-text);
  }
}

@media (max-width: 768px) {
  .page-title-box {
    margin-top: 150px;
  }

  .page-title__side-list {
    display: none;
  }

  .page-title__inner {
    padding: 0 0 0 20px;
  }
}

/* ----------------------------------
   Button Animation & State
---------------------------------- */
/* ボタンアイコンのアニメーション */
.menu-trigger i {
  transition: transform 0.4s ease;
}
/*  Button Fix (枠線削除) */
.menu-trigger {
  outline: none; /* クリック時の枠線を消す */
  -webkit-tap-highlight-color: transparent; /* スマホタップ時のハイライトも消す */
}
.menu-trigger:focus {
  outline: none;
}
/* メニューが開いているときは×ボタンにする想定 */
body.menu-open .menu-trigger {
  color: #fff; /* 背景が黒になるので白文字強制 */
}

body.menu-open .menu-trigger i::before {
  content: "\f659"; /* bi-x-lg (Bootstrap Iconsの×) */
}

/* ----------------------------------
   Button Fix (ボタンの枠線削除)
---------------------------------- */
.menu-trigger {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-trigger:focus-visible {
  outline: none;
}

/* ----------------------------------
   Mobile Menu (Container)
---------------------------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999; /* Headerより下、コンテンツより上 */
  pointer-events: none; /* 閉じているときはクリック無効 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* コンテナ自体の移動はなし（背景とテキストのみ動かす） */
}

/* ----------------------------------
   Background: Circular Reveal
---------------------------------- */
.mobile-menu__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);

  /* 右上を中心とした円形クリップ */
  clip-path: circle(0% at 92% 5%);
  transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* レスポンシブ: スマホ時の中心点調整 */
@media (max-width: 768px) {
  .mobile-menu__bg {
    clip-path: circle(0% at 90% 40px);
  }
}

/* 開くとき: 全画面へ拡大 */
.mobile-menu.is-open {
  pointer-events: auto;
}

.mobile-menu.is-open .mobile-menu__bg {
  clip-path: circle(150% at 90% 5%);
}

/* 閉じるとき: 円に戻る (JSで制御するため特別な記述は不要、transitionに従う) */

/* ----------------------------------
   Text Animation: Bottom In -> Top Out
---------------------------------- */
.mobile-menu__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px;
  max-width: 1200px;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
}

.mobile-nav li {
  overflow: hidden;
  margin-bottom: 20px;
}

.mobile-nav a {
  display: block;
  font-size: var(--font-size24--40);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;

  /* ★初期状態 (待機位置): 下にセット */
  transform: translateY(60px);
  opacity: 0;

  /* アニメーション設定 */
  transition:
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.6s ease,
    color 0.3s ease;
}

/* ★開くとき: 下から定位置へ */
.mobile-menu.is-open .mobile-nav a {
  transform: translateY(0);
  opacity: 1;
  /* 背景が広がってから順番に出る遅延 */
  transition-delay: calc(0.2s + (0.08s * var(--i)));
}

/* ★閉じるとき (重要): 定位置から上へ抜ける */
.mobile-menu.is-closing .mobile-nav a {
  transform: translateY(-60px); /* 上へ移動 */
  opacity: 0;
  /* 閉じるときは遅延なしで一斉に、あるいは逆順で消える */
  transition-delay: 0s;
  transition-duration: 0.4s; /* 消えるときは少し素早く */
}

/* 追加情報エリアも同様に */
.mobile-menu__info {
  margin-top: 60px;
  color: #aaa;
  font-size: var(--font-size12--14);

  transform: translateY(20px);
  opacity: 0;
  transition: 0.6s;
}

.mobile-menu.is-open .mobile-menu__info {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.6s;
}

.mobile-menu.is-closing .mobile-menu__info {
  transform: translateY(-20px);
  opacity: 0;
  transition-delay: 0s;
}

.mobile-nav a:hover {
  color: #aaa; /* 変更したい色を指定 */

  /* メニュー表示時の遅延設定を打ち消して、すぐに色を変える */
  transition-delay: 0s;
}
.pc-none {
  display: none;
}
@media (max-width: 768px) {
  .header {
    mix-blend-mode: normal;
    background: rgba(44, 62, 80, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 14px 20px;
  }
  .gnav {
    display: none;
  }
  .logo img {
    max-height: 32px;
  }
  .hero {
    height: 80svh; /* 新しい単位 */
    /* min-height: 500px; */
  }
  .copy-en {
    margin-bottom: 12px;
  }

  .copy-jp {
    line-height: 1.3;
  }
  .pc-none {
    display: block;
  }
}

/* ----------------------------------
   Works Section
---------------------------------- */

.works {
  margin-bottom: 40px;
}
.works-section {
  padding: clamp(60px, 8vw, 80px) 0 0;
  margin: 0 auto;
  position: relative;
}
.work-section-intro {
  display: flex;
  margin: 40px auto;
  justify-content: center;
}
/* サービスカードグリッド */
.work-card-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

/* サービスカード個別 */
.work-card-grid .service-card {
  flex: 1;
  max-width: 340px;
  background: #f9f9f9;
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
}

.work-card-grid .service-card:hover {
  background: #fff;
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* アイコン（丸背景） */
.work-card-grid .service-icon {
  width: 70px;
  height: 70px;
  background: var(--main-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 1.8rem;
}

.work-card-grid .service-title {
  font-size: var(--font-size14--16);
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--color-text);
}

.work-card-grid .service-desc {
  font-size: var(--font-size12--14);
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
  text-align: left; /* 長い説明文は左揃えが読みやすい */
}

/* タグ風リスト */
.work-card-grid .service-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.work-card-grid .service-tags li {
  font-size: var(--font-size12--14);
  background: #eee;
  padding: 4px 10px;
  border-radius: 4px;
  color: #555;
}

.top-works-section {
  padding: 0 0 clamp(60px, 8vw, 80px);
}

.works-header {
  margin-bottom: 40px;
}

.section-title-small {
  font-size: var(--font-size16--18);
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* タイトルの横に線を引いてアクセントに */
.section-title-small::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ccc;
}

.section-desc {
  font-size: var(--font-size12--14);
  color: var(--color-text);
}

/* 実績グリッド */
/* .works-grid {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
} */

/* Swiper全体の余白調整（既存のgridの代わり） */
.mySwiper {
  padding-bottom: 30px;
}

/* ★超重要：流れるような動きを実現するCSS */
.mySwiper .swiper-wrapper {
  /* スライドの切り替えアニメーションを等速(linear)にする */
  transition-timing-function: linear !important;
}

.work-item {
  height: auto;
}

.work-link {
  text-decoration: none;
  display: block;
  color: inherit;
}

/* サムネイル画像エリア */
.work-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 比率を固定 */
  overflow: hidden;
  border-radius: 8px;
  background-color: #f0f0f0;
  margin-bottom: 15px;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* カテゴリータグ */
.work-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(44, 62, 80, 0.9); /* OTO dESIGN Blue */
  color: #fff;
  font-size: var(--font-size12--14);
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* ホバー時の画像ズーム */
.work-link:hover .work-thumb img {
  transform: scale(1.05);
}

/* テキスト情報 */
.work-title {
  font-size: var(--font-size12--14);
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--color-text);
  line-height: 1.4;
}

.work-scope {
  font-size: var(--font-size12--14);
  color: #555;
}

/* --- スマホ対応（レスポンシブ） --- */
@media screen and (max-width: 768px) {
  .work-card-grid {
    flex-direction: column;
    align-items: center;
  }
  .work-card-grid .service-card {
    width: 100%;
    max-width: 500px;
  }
  /* .works-grid {
    flex-direction: column;
    gap: 40px;
  } */
}

/* ----------------------------------
   News (List Style)
---------------------------------- */
#special-area {
  /* 50vh = 画面の半分の高さ */
  /* min-height にしておくと、中身が増えても安心 */
  min-height: 50vh;
}
.news-section {
  padding: clamp(60px, 8vw, 80px) 0;
}
.news-wrapper {
  width: 100%;
  max-width: 1025px;
  margin: 40px auto;
}

.news-link {
  display: flex;
  align-items: center;
  padding: 24px 0;
  gap: 30px;
  color: var(--color-text);
  border-bottom: 1px solid #ccc;
}
.news-date {
  font-family: var(--font-en);
  font-size: var(--font-size12--14);
  color: inherit;
}
/* カテゴリータグの基本設定 */
.news-cat {
  width: 120px;
  padding: 2px 8px;
  font-size: var(--font-size12--14);
  border-radius: 2px;
  margin-right: 15px;
  background: #eee; /* デフォルトの色 */
  color: #666;
  text-align: center;
}

/* カテゴリーごとの色分け */
.news-cat.cat-important {
  /* 重要 */
  background: #dbc500;
  color: #fff;
}

.news-cat.cat-info {
  /* お知らせ */
  background: #0d52a0;
  color: #fff;
}

.news-cat.cat-column {
  /* 戯言・コラム */
  background: var(--color-accent);
  border: 1px solid #ddd;
  color: var(--color-text);
}
.news-title {
  margin: 0;
  font-weight: 400;
  color: inherit;
}

/* --- News Archive List Layout --- */

.oto-news-narrow {
  max-width: 840px; /* 実績詳細と合わせることで統一感を出します */
  margin: 0 auto;
  padding: 80px 20px;
}

.news-list-container {
  border-top: 1px dotted var(--main-color);
  margin-bottom: 60px;
}

.news-list-item {
  border-bottom: 1px dotted var(--main-color);
}

.news-list-link {
  display: flex;
  padding: 30px 0;
  text-decoration: none;
  transition: opacity 0.3s;
  gap: 30px; /* 画像とテキストの間隔 */
}

.news-list-link:hover {
  opacity: 0.7;
}

/* サムネイル部分 */
.news-list-thumb {
  flex-shrink: 0;
  width: 120px; /* お好みの幅に調整 */
  height: 80px;
  overflow: hidden;
  border-radius: 2px;
}

.news-list-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: #f8f8f8;
}

.news-no-image {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 10px;
}

/* テキスト部分 */
.news-list-body {
  flex-grow: 1;
}

.news-list-meta {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.news-list-date {
  font-size: var(--font-size12--14);
  color: #999;
  font-family: var(--font-en);
}

.news-list-cat {
  font-size: var(--font-size12--14);
  padding: 2px 8px;
  background: #eee;
  color: #555;
  border-radius: 2px;
}

.news-list-title {
  font-size: var(--font-size14--16);
  font-weight: bold;
  color: var(--color-text);
  line-height: 1.5;
}

/* --- WP-PageNavi Custom Style --- */

.news-pagination .wp-pagenavi {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: var(--font-size12--14);
  margin-top: 40px;
}

.news-pagination .wp-pagenavi a,
.news-pagination .wp-pagenavi span {
  padding: 8px 15px;
  border: 1px solid #eee !important;
  color: #999 !important;
  transition: all 0.3s;
}

.news-pagination .wp-pagenavi span.current {
  background: var(--main-color) !important;
  color: #fff !important;
  border-color: var(--main-color) !important;
}

.news-pagination .wp-pagenavi a:hover {
  background: var(--color-bg) !important;
  color: var(--main-color) !important;
}

/* --- News Detail Layout --- */

.oto-news-detail-main {
  margin-top: 150px;
}

.news-detail-wrapper {
  padding: 0 0 clamp(60px, 8vw, 80px);
}

/* 記事全体の幅を絞って可読性を高める */
.news-detail-header,
.news-detail-body,
.news-detail-footer {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.news-detail-meta {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.news-detail-date {
  font-family: var(--font-en);
  font-size: 14px;
  color: #999;
}

.news-detail-title {
  font-size: var(--font-size20--32);
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  margin-bottom: 60px;
}

/* 本文内の文字装飾 */
.news-content {
  font-size: var(--font-size14--16);
  line-height: 1.9; /* 行間を広めに */
  color: var(--color-text);
}

.news-content p {
  margin-bottom: 2em;
}

.news-content h2 {
  font-size: 24px;
  margin: 60px 0 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.news-content img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

/* --- News Detail Navigation --- */

.news-detail-footer {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--color-text);
}

.news-post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 両端と中央に配置 */
}

/* 左右のボックスに同じ幅を持たせて中央を固定する */
.news-nav-item {
  flex: 1;
  display: flex;
}

.news-nav-prev {
  justify-content: flex-start;
}

.news-nav-center {
  justify-content: center;
  flex: 0 0 auto; /* 中央ボタンは幅を固定 */
}

.news-nav-next {
  justify-content: flex-end;
}

/* 矢印リンクのスタイル */
.news-nav-prev a,
.news-nav-next a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #eee;
  border-radius: 50%;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s;
}

.news-nav-prev a:hover,
.news-nav-next a:hover {
  background-color: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* 一覧に戻るボタンの微調整 */
.news-btn-back {
  font-size: var(--font-size14--16);
  text-decoration: none;
  color: var(--color-text);
  letter-spacing: 0.1em;
  padding-bottom: 2px;
  transition: opacity 0.3s;
}

.news-btn-back:hover {
  opacity: 0.6;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .oto-news-narrow {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 20px 40px;
  }
  .news-list-link {
    flex-direction: column; /* スマホでは縦並びに切り替え */
    gap: 15px;
  }
  .news-list-thumb {
    display: none;
  }
  .news-nav-prev a,
  .news-nav-next a {
    width: 36px;
    height: 36px;
  }
}

/* ----------------------------------
   About (Asymmetric Layout)
   雑誌のような配置
---------------------------------- */
.about-section {
  /* background-color: var(--color-gray); */
  padding: clamp(60px, 8vw, 80px) 0;
}
.about-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
}
.about-img {
  width: 50%;
}
.about-content {
  width: 50%;
}
.sub-label {
  display: block;
  font-family: var(--font-en);
  color: #111;
  font-size: var(--font-size24--40);
  /* margin-bottom: 20px; */
}
.skills-section .sub-label {
  color: #fff;
}
.sub-label.is-visible {
  animation: fadeInDown 1s ease-out forwards;
}

.first-char--blue {
  color: #0077ff;
}
.first-char--red {
  color: #ff0040;
}
.first-char--purple {
  color: #9904fc;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.content-title {
  font-family: var(--font-serif);
  font-size: var(--font-size18--24);
  margin: 0 0 30px;
  line-height: 1.4;
}
.content-text {
  font-size: var(--font-size16--18);
  color: var(--color-text);
  margin-bottom: 40px;
}

/* ---------------------------
CTAセクション
------------------------------ */
.cta-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(60px, 8vw, 80px) 20px;
  /* もしこのセクションだけ背景色を変えるならここに指定 */
  background-image: url("../images/cta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* --- Glassmorphism --- */
.cta-glass-box {
  width: 100%;
  max-width: 900px; /* ボックスの最大幅 */
  padding: 60px 40px; /* 内側の余白 */

  /* すりガラス */
  backdrop-filter: blur(15px); /* 背景をぼかす（数値が大きいほどボケる） */
  -webkit-backdrop-filter: blur(15px); /* Safari用 */

  /* ガラスの色（黒っぽく半透明に） */
  background-color: rgba(255, 255, 255, 0.4);

  /* ガラスの質感（枠線と影） */
  border: 1px solid rgba(255, 255, 255, 0.9); /* 薄い枠線 */
  border-radius: 16px; /* 角丸 */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* 影で浮遊感を出す */

  /* 中身の文字色 */
  color: var(--color-text);
}
.cta-container {
  max-width: 100%;
  margin: 0 auto;
}

/* 見出し周り */
.cta-label {
  font-size: var(--font-size14--16);
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin-bottom: 20px;
  font-weight: 700;
}

.cta-heading {
  font-size: var(--font-size18--24);
  line-height: 1.5;
  margin-bottom: 30px;
  font-weight: 600;
  color: var(--main-color);
}

/* --- リスト型リンクのデザイン --- */
.cta-list {
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
}

.cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0; /* タップしやすい高さ */
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  color: var(--color-text);
  transition: opacity 0.3s ease;
  position: relative;
}

/* テキスト部分 */
.cta-text {
  font-size: var(--font-size16--18);
  font-weight: 500;
  margin-right: 20px;
}

/* 英語のサブテキスト（スマホでは消してもOK） */
.cta-sub {
  font-size: var(--font-size12--14);
  color: rgba(0, 0, 0, 0.9);
  margin-right: auto; /* これで矢印を右端に押しやる */
  font-family: sans-serif;
}

/* 矢印アイコン */
.cta-arrow {
  width: 40px;
  height: 40px;
  padding-top: 10px;
  transition: transform 0.3s ease; /* 滑らかに動かす */
}

/* --- ホバー時のアクション --- */
.cta-link:hover {
  opacity: 0.7; /* 少し透明に */
}

.cta-link:hover .cta-arrow {
  transform: translateX(8px); /* 右に10px動く */
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .cta-glass-box {
    padding: 40px 20px;
  }
  .cta-link {
    flex-wrap: wrap; /* 必要なら折り返し */
  }
  .cta-sub {
    display: none; /* スマホでは英語表記を消してスッキリさせる */
  }
}

/* ----------------------------------
   下層ページ Header
---------------------------------- */
.page-header {
  position: relative; /* 必須：Lottieの基準点になります */
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden; /* Lottieが画面からはみ出さないように */
}

/* Lottieコンテナの基本設定 */
.lottie-wrapper {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%); /* 垂直中央揃え */
  width: 450px !important;
  height: 450px !important;
  z-index: 0; /* 文字の後ろに配置 */
  pointer-events: none; /* クリックを無視して下の要素を触れるように */
}

.page-title {
  font-size: var(--font-size32--56);
  font-weight: 700;
  font-family: var(--font-en);
  text-align: left;
  /* アニメーションの設定 */
  opacity: 0; /* 最初は消しておく */
  animation: fadeUp 1.2s ease-out forwards;
}

.lottie-wrapper lottie-player {
  /* 1. モノクロ化 */
  filter: grayscale(98%);
  /* あえて不透明度を下げる */
  opacity: 0.5 !important;
}
/* ふわっと浮き上がるアニメーションの定義 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 元の位置へ */
  }
}

@media (max-width: 768px) {
  .lottie-wrapper {
    width: 240px !important;
    height: 240px !important;
    top: 60%; /* スマホでは少し下にずらして文字と重なりを避ける */
    right: 50%;
    transform: translate(50%, -50%) !important; /* 中央配置 */
    opacity: 0.5 !important; /* スマホでは背景としてより薄く */
  }
}

.lead-text {
  font-size: var(--font-size12--14); /* 小さく */
  text-align: left;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

/* プロフィールコンテナ全体のスタイル */
.profile-section {
  background-color: #f9f9f9;
  padding: clamp(60px, 8vw, 80px) 0;
  color: var(--color-text);
}
.profile-container {
  max-width: 1025px; /* 最大幅を指定 */
  margin: 0 auto;
  display: flex;
  align-items: flex-start; /* 上端を揃える（中央揃えなら center） */
  gap: 40px; /* 写真とテキストの間の余白 */
  /* padding: clamp(60px, 8vw, 80px) 0; */
}

/* 画像エリアのスタイル */
.profile-image-wrapper {
  flex-shrink: 0; /* コンテナが狭くなっても画像サイズを縮めない */
  width: 200px; /* 画像の幅 */
  height: 200px; /* 画像の高さ */
}

/* 画像自体のスタイル */
.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* アスペクト比を維持してトリミング */
  border-radius: 50%; /* 完全な円形にする */

  /* GSAPで制御するため、CSSでの初期opacityは1のままでOKです */
  /* もしJS無効時を考慮するなら、ここに opacity:0 を書き、
       JSで class を付与して表示させるなどの工夫が必要です */
}

/* テキストエリアのスタイル */
.profile-content {
  flex-grow: 1; /* 余ったスペースを埋める */
}

.profile-name {
  font-size: var(--font-size18--24);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
}
.profile-name span {
  font-size: var(--font-size12--14);
  margin-left: 8px;
  letter-spacing: normal;
  font-weight: normal;
}
.profile-birth {
  font-size: var(--font-size12--14);
  margin-bottom: 1.2rem;
}

.profile-description {
  color: var(--color-text);
  text-align: left;
  font-size: var(--font-size12--14);
}
.about-section {
  color: var(--color-text);
}

.about-section .about-content {
  max-width: 600px; /* Lottieと重ならないよう、幅を制限 */
  width: 100%;
}

/* タイムラインのスタイル */
.timeline {
  margin-top: 40px;
  border-left: 1px solid #ccc;
  padding-left: 30px;
}

.timeline-item {
  margin-bottom: 40px;
  position: relative;
}

/* タイムラインの「点」 */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -35.5px;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
}

.timeline-item.current::before {
  background-color: #333; /* 現在地だけ強調 */
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.05);
}

.year {
  display: block;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 5px;
}

/* 資格セクション */
.qualifications {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.mini-label {
  font-family: var(--font-en);
  font-size: 1rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.qualifications ul {
  list-style: none;
  padding: 0;
}

.qualifications li {
  font-size: 0.9rem;
  margin-bottom: 10px;
  position: relative;
  padding-left: 1.5em;
}

.qualifications li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* リンク全体のコンテナ（文章内用調整版） */
.hover-reveal-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 4px; /* 前後に少しだけ隙間を作る */
  vertical-align: baseline; /* 文中のベースラインに合わせる */
}

/* リンク本体のデザイン */
.reveal-link {
  text-decoration: none;
  color: #333; /* 普段の文字色 */
  position: relative;
  z-index: 10;
  transition: color 0.3s;
  cursor: pointer;

  /* 下線アニメーション（赤色） */
  background-image: linear-gradient(#e60012, #e60012);
  background-position: bottom left;
  background-size: 0% 2px; /* 最初は線なし */
  background-repeat: no-repeat;
  transition:
    background-size 0.4s ease,
    color 0.3s ease;
  padding-bottom: 2px; /* 下線との距離 */
}

.reveal-link:hover {
  color: #e60012;
  background-size: 100% 2px; /* ホバーで線が伸びる */
}

.hover-image-item {
  position: relative; /* ポップアップの基準点にする */
  cursor: help; /* 「詳細があるよ」と伝えるカーソル */
}

.hover-image-popup {
  position: absolute;
  left: 100%;
  bottom: 120%; /* 文字の少し上に配置 */
  transform: translateX(-50%);
  width: 300px; /* 指定の横幅 */
  pointer-events: none;
  z-index: 10;

  /* GSAPで制御するため、初期状態は隠す */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 画像がマウスの邪魔をしないように */

  /* 装飾：誠実な印象のシャドウ */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  padding: 5px;
}

.hover-image-popup img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
  .reveal-link {
    color: #e60012; /* スマホではリンクだとわかるように色を変える */
    background-image: none;
    text-decoration: underline; /* シンプルに下線を表示 */
    padding-bottom: 0;
  }
  .hover-image-popup {
    display: none;
  }
}

/* 1. 親セクションに基準点を作る */
#about-experience {
  position: relative; /* 子要素をここに縛り付ける */
  overflow: hidden; /* はみ出し防止 */
}

/* 2. 円形テキストの配置を変更 */
.circle-text-wrapper.about-decoration {
  position: absolute; /* fixed から absolute に変更 */
  top: 50%; /* セクションの高さの50%の位置 */
  right: 0;
  transform: translate(35%, -50%); /* 微調整値はそのまま */
  width: 500px;
  height: 500px;
  z-index: 0;
  pointer-events: none;

  /* GSAPのフェードイン・アウトを使わないなら、最初から表示しておく */
  opacity: 1;
  visibility: visible;
}

/* テキスト装飾（前回と同じ） */
.circle-text-svg {
  overflow: visible;
}
.text-content {
  font-size: 64px;
  font-weight: bold;
  text-transform: uppercase;
  fill: #bebebe; /* 背景に馴染む薄い色推奨 */
  letter-spacing: 9px;
}

/* Services Section */
.services-section {
  padding: clamp(60px, 8vw, 80px) 0;
  background-color: #f9f9f9; /* セクションを分離 */
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.service-card {
  padding: 40px 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-icon {
  margin-bottom: 20px;
}
.service-icon img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

.service-card p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: #666;
  text-align: left;
}

/* Works CTA Button */
.works-cta-wrapper {
  text-align: center;
  padding: 40px 0 0;
}

.btn-works {
  display: inline-block;
  padding: 20px 60px;
  background-color: var(--main-color);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.btn-works:hover {
  background-color: #2196f3;
}

.btn-works .btn-text {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
}

.btn-works .btn-sub {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

/*Skill*/
.skills-section {
  padding: clamp(60px, 8vw, 80px) 0;
  background-color: var(--main-color);
  color: #fff;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.skill-category h3 {
  border-left: 2px solid var(--color-accent, #fff);
  padding-left: 15px;
  margin-bottom: 25px;
  opacity: 0.8;
}

.skill-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-card {
  position: relative;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.9rem;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
  cursor: default;
}

/* ホバーで経験年数を表示 */
.skill-card::after {
  content: attr(data-exp);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 62, 80, 1);
  color: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-weisght: bold; */
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.skill-card:hover::after {
  transform: translateY(0);
}

/* 特別なスキルの装飾 */
.skill-card.gsap {
  border-color: #88ce02;
}
.skill-card.ai {
  border-color: #0077ff;
}

/* partners */
.partners-section {
  padding: clamp(60px, 8vw, 80px) 0;
}

.partners-glass-box {
  background: #fcfcfc;
  border: 1px solid #eee;
  padding: 60px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}
.partners-illust {
  flex-shrink: 0;
  width: 300px;
  height: auto;
  object-fit: cover;
}

.partners-content h2 {
  font-size: var(--font-size18--24);
  margin-bottom: 25px;
  font-weight: 600;
  font-family: var(--font-serif);
}

.partners-lead {
  font-size: var(--font-size12--14);
  line-height: 1.8;
  margin-bottom: 35px;
  color: #333;
}

.partners-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 35px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: #e60012; /* アクセントカラーの赤 */
}

.feature-item span {
  color: var(--color-text);
}

.partners-note {
  font-size: var(--font-size12--14);
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 25px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
    gap: 24px;
    padding: 0 20px;
  }

  /* スマホでは少し画像を小さくするなど調整可能 */
  .profile-image-wrapper {
    width: 160px;
    height: 160px;
  }

  .about-content {
    max-width: 100%;
  }

  .about-decoration {
    display: none;
  }

  .profile-description {
    text-align: justify; /* 長文は左揃え（または両端揃え）で読みやすく */
  }
  .partners-glass-box {
    padding: 40px 20px;
    display: block;
  }
  .partners-illust {
    margin-top: 40px;
  }
}

/* ----------------------------------
   Work
---------------------------------- */
.process-section {
  padding: clamp(60px, 8vw, 80px) 0;
}

.process-list {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* 中央の縦ライン */
.process-list::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--main-color);
}

.process-item {
  position: relative;
  padding-left: 80px;
  margin-bottom: 50px;
}

.process-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  background: #fff;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--font-size16--18);
  z-index: 2;
}

.process-title {
  font-size: var(--font-size16--18);
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--color-text);
}

.process-text {
  font-size: var(--font-size12--14);
  line-height: 1.7;
  color: #555;
}

/* デザイン工程の強調 */
.design-step {
  background: var(--color-bg);
  padding: 30px 30px 30px 80px;
  border-radius: 12px;
}

/* アフターフォローを別色に */
.follow-up .process-num {
  background: var(--main-color);
  color: #fff;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .process-list::before {
    left: 20px;
  }
  .process-item {
    padding-left: 60px;
  }
  .process-item:last-child {
    margin-bottom: 0;
  }
  .process-num {
    width: 44px;
    height: 44px;
    font-size: var(--font-size14--16);
  }
}

.work-section {
  padding: clamp(60px, 8vw, 80px) 0 0;
}
/* --- 1. ヘッダーエリア --- */
.work-header {
  display: flex;
  gap: 200px;
  margin-bottom: 60px;
}
.work-header-inner {
  display: flex;
  flex-direction: column;
  color: var(--main-color);
}
/*
.work-section .section-title {
  font-size: var(--font-size20--32);
  font-weight: bold;
  margin-bottom: 16px;
  color: var(--color-text);
}

.work-header .lead-text {
  font-size: var(--font-size16--18);
  line-height: 1.8;
  margin-bottom: 16px;
} */
.work-price-header {
  max-width: 960px;
  margin: 24px auto 48px;
}
.work-section .sub-title {
  font-size: var(--font-size16--18);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
}
.work-header .sub-text {
  font-size: var(--font-size12--14);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.services-container {
  max-width: 960px; /* 最大幅 */
  margin: 0 auto 80px; /* 上下中央揃え */
  padding: 0 20px; /* スマホ用の横余白 */
  display: grid; /* グリッドレイアウト採用 */
  grid-template-columns: repeat(3, 1fr); /* 3列均等割 */
  gap: 30px; /* アイテム間の隙間 */
}

/* 各アイテム（アニメーションの対象） */
.service-item {
  text-align: center; /* テキストを中央揃え */
  /* GSAPで制御するため初期状態をCSSで隠す必要はありません */
}

/* 16:9の画像枠 */
.image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に固定 */
  overflow: hidden; /* はみ出した部分をトリミング */
  margin-bottom: 15px; /* テキストとの間隔 */
  background-color: #ddd; /* 画像読み込み前の色 */
}

/* 画像本体 */
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいにトリミングして表示 */
  display: block;
}

/* テキスト */
.top__service-title {
  margin: 0;
  font-size: var(--font-size12--14);
}

/* レスポンシブ対応：画面幅768px以下で1列にする */
@media (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr; /* 1列に変更 */
    max-width: 500px; /* スマホ表示時の最大幅調整 */
  }
}

/* --- 2. トグルスイッチ（モダンデザイン） --- */
.toggle-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 50px;
}

.toggle-label {
  font-weight: bold;
  color: #444;
  cursor: pointer;
}

/* スイッチのベース */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* スライダー部分 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* チェック時の動作 */
input:checked + .slider {
  background-color: #2196f3; /* ブランドカラーに変更可 */
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* --- 3. カードグリッド --- */
.price-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* スマホで折り返し */
}

/* カード共通設定 */
.price-card {
  background: #fff;
  width: 300px; /* 固定幅 */
  border-radius: 12px;
  padding: 40px 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

/* おすすめカードのデザイン */
.price-card.popular {
  border: 2px solid #2196f3;
  transform: scale(1.05); /* 少し大きく強調 */
  z-index: 2;
}

/* アコーディオン全体 */
.price-faq-accordion {
  max-width: 940px; /* カード3枚分より少し狭めて集中させる */
  margin: 30px auto 60px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

/* ヘッダー部分 */
.accordion-header {
  width: 100%;
  padding: 20px 25px;
  background: #fff;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: left;
  font-size: var(--font-size12--14);
  font-weight: bold;
  color: #333;
  cursor: pointer;
  transition: background 0.3s;
}

.accordion-header:hover {
  background-color: #ccc;
}

/* プラス・マイナスアイコン */
.icon-plus {
  position: relative;
  width: 16px;
  height: 16px;
}

.icon-plus::before,
.icon-plus::after {
  content: "";
  position: absolute;
  background: var(--main-color);
  transition: transform 0.3s;
}

.icon-plus::before {
  width: 2px;
  height: 16px;
  left: 7px;
  top: 0;
}

.icon-plus::after {
  width: 16px;
  height: 2px;
  left: 0;
  top: 7px;
}

/* 開いた時のアイコン変化 */
.accordion-item.is-open .icon-plus::before {
  transform: rotate(90deg);
  opacity: 0;
}

/* コンテンツ部分 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: #fdfdfd;
}

.accordion-inner {
  padding: 0 25px 25px;
  border-top: 1px solid #eee;
}

.accordion-desc {
  font-size: 0.9rem;
  margin: 20px 0;
  color: #444;
}

.rule-list {
  list-style: none;
  padding: 0;
}

.rule-list li {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 15px;
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.rule-list li strong {
  color: #2196f3;
}

.sincerity-note {
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
  margin-top: 10px;
}

.price-sub-desc {
  font-size: var(--font-size12--14);
  color: #555;
  margin-top: 10px;
}

.graphic-grid .price-card {
  width: 300px;
}

/* グラフィックデザインのカード専用 */
.graphic-item {
  padding: 0 !important; /* 内側の余白を一度リセット */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
}

/* 上端の画像エリア */
.card-img-top {
  width: 100%;
  height: 100px; /* 指定の高さ */
  background-color: #eee; /* あたり画像がない時用 */
}

.card-img-top img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに綺麗に収める */
}

/* テキストコンテンツの余白を確保 */
.card-body {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 高さを揃えるため */
}

@media screen and (max-width: 768px) {
  .graphic-grid .price-card {
    width: 90%; /* スマホでは1列 */
  }
}

/* スマホ対応 */

@media screen and (max-width: 768px) {
  .work-header {
    display: block;
    gap: 40px;
    margin-bottom: 40px;
  }
  .work-header .sub-text {
    margin-top: 24px;
  }
  .process-list::before {
    left: 20px;
  }

  .process-num {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
  .price-card.popular {
    transform: none;
  }

  .price-faq-accordion {
    margin: 20px 10px 0;
  }
  .accordion-header {
    padding: 12px;
  }
}

.recommend-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #2196f3;
  color: #fff;
  padding: 5px 15px;
  font-size: 0.8rem;
  border-radius: 20px;
  font-weight: bold;
}

/* テキストまわり */
.card-title {
  font-size: var(--font-size12--14);
  margin-bottom: 10px;
  color: var(--color-text);
}

.card-desc {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 25px;
  height: 2.4em; /* 高さ揃え */
}

/* 価格表示エリア */
.price-box {
  height: 80px; /* 高さ固定でガタつき防止 */
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amount {
  font-size: var(--font-size18--24);
  font-weight: bold;
  color: var(--main-color);
}

.amount-text {
  font-size: var(--font-size14--16);
  font-weight: bold;
  color: var(--color-text);
}

.unit {
  font-size: var(--font-size16--18);
}
.note {
  font-size: var(--font-size12--14);
  color: #888;
  margin-top: 5px;
}

/* リスト */
.feature-list {
  list-style: none;
  padding: 0;
  margin-top: auto; /* 下寄せ */
  text-align: left;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.feature-list li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  font-size: 0.9rem;
}

.feature-list li::before {
  content: "✔";
  color: #2196f3;
  position: absolute;
  left: 0;
}

/* --- 【重要】表示切り替えロジック --- */

/* デフォルト：月額を非表示 */
.price-monthly {
  display: none;
}
.price-one-time {
  display: block;
}

/* 親要素に .mode-monthly が付いた時：一括を非表示、月額を表示 */
.price-grid.mode-monthly .price-monthly {
  display: block;
  animation: fadeIn 0.4s ease;
}
.price-grid.mode-monthly .price-one-time {
  display: none;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------
   Portfolio Unique Styles
---------------------------------- */
/* Archive */
.oto-pf-archive-wrapper {
  /* セクション自体の上下余白を大きく確保 */
  padding: 80px 0;
}

.oto-pf-grid {
  /* Gridの定義 */
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
}

/* サムネイル部分 */
.oto-pf-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: #fcfcfc;
  margin-bottom: 30px;
}

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

/* ホバー演出 */
.oto-pf-link:hover .oto-pf-visual img {
  transform: scale(1.03);
}

/* テキスト情報 */
.oto-pf-item-title {
  font-size: var(--font-size12--14);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: 10px;
}

.oto-pf-item-scope {
  font-size: var(--font-size12--14);
  color: #555;
  font-family: var(--font-en); /* 英語フォント指定があれば */
}

/* --- Portfolio Filter Style --- */

.oto-pf-filter-section {
  padding: 30px 0 30px 20px;
  max-width: 840px;
  margin: 0 auto;
}

.oto-pf-filter-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 30px; /* 項目間の余白 */
  list-style: none;
  padding: 0;
}

.oto-pf-filter-link {
  font-size: var(--font-size12--14);
  text-decoration: none;
  color: #999; /* 通常時は薄いグレー */
  text-transform: uppercase;
  transition:
    color 0.3s,
    border-bottom 0.3s;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}

.oto-pf-filter-link:hover {
  color: var(--color-text);
}

/* 現在選択されているカテゴリーのスタイル */
.oto-pf-filter-link.is-active {
  color: var(--main-color);
  font-weight: bold;
  border-bottom: 1px solid var(--main-color);
}

/* モバイル対応：横並びを維持しつつスクロール可能に */
@media screen and (max-width: 768px) {
  .oto-pf-filter-list {
    gap: 20px;
    overflow-x: auto; /* はみ出たら横スクロール */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
}

/* Single Detail */

.oto-pf-detail-main {
  margin-top: 150px;
}
.oto-pf-narrow {
  max-width: 840px;
  margin: 0 auto;
}

.oto-pf-section {
  padding: 30px 0; /* セクション間の余白 */
  border-bottom: 1px solid #eee;
}

.oto-pf-section:last-child {
  border-bottom: none;
}

.oto-pf-detail-meta {
  max-width: 840px;
  margin: 0 auto 20px;
}
.oto-pf-detail-meta h1 {
  font-size: var(--font-size18--24);
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--color-text);
}
/* 詳細ページのアイキャッチ画像エリア */
.oto-pf-detail-visual {
  max-width: 840px; /* ご要望のサイズ */
  margin: 60px auto 0; /* 左右中央寄せ、上に少し余白 */
  width: 100%;
  /* aspect-ratio: 16 / 9; は詳細ページでは「削除」するのがおすすめ（チラシ等の縦長対応のため） */
  overflow: hidden;
  border-radius: 2px;
}

.oto-pf-detail-visual img {
  width: 100%;
  height: auto; /* 比率を維持して表示 */
  display: block;
  object-fit: contain; /* 枠内に収める */
}

/* モバイル対応：画面幅が小さい時は横いっぱいに */
@media screen and (max-width: 840px) {
  .oto-pf-detail-visual {
    margin: 40px 0 0;
    border-radius: 0; /* スマホでは角丸なしでスッキリ見せるのもアリ */
  }
}

.oto-pf-label {
  font-family: "Libre Baskerville", serif;
  font-size: var(--font-size14--16);
  color: #999;
  margin-bottom: 40px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.oto-pf-spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  font-size: var(--font-size12--14);
}

.oto-pf-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 100px 0; /* 戻るボタンの上下にも余白 */
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size14--16);
  transition: opacity 0.3s;
}

.oto-pf-btn-back:hover {
  opacity: 0.6;
}

/* --- Portfolio Result & Stars --- */

.oto-pf-result-box {
  background: #fbfbfb; /* ほんの少しだけ背景色を変えて強調 */
  padding: 40px;
  border-radius: 4px;
}

.oto-pf-stars-wrapper {
  margin-bottom: 24px;
  text-align: center;
}

.oto-pf-stars-label {
  display: block;
  font-size: var(--font-size12--14);
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.oto-pf-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size18--24);
}

/* 塗りつぶしの星の色（OTO dESIGNのアクセントカラーがあればそれに合わせる） */
.oto-pf-stars .bi-star-fill.active {
  color: var(--main-color);
}

/* 空の星の色 */
.oto-pf-stars .bi-star {
  color: #ccc;
}

.oto-pf-rating-num {
  font-family: "Libre Baskerville", serif;
  font-size: var(--font-size18--24);
  font-weight: bold;
  margin-left: 15px;
  color: #2c3e50;
}

.oto-pf-feedback {
  position: relative;
  padding-top: 30px;
  border-top: 1px dashed #ddd;
}

.oto-pf-feedback-text {
  font-size: var(--font-size14--16);
  line-height: 1.8;
  color: #555;
  font-style: italic; /* 引用のような雰囲気に */
}

/* --- モバイル対応（CSS Gridの切り替え） --- */
@media screen and (max-width: 768px) {
  .oto-pf-archive-wrapper {
    padding: 40px 0; /* 余白を半分に */
  }

  .oto-pf-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /*
  .oto-pf-item-title {
    font-size: 18px;
  } */

  /* 詳細ページのヘッダー余白 */
  /* .oto-pf-detail-header {
    padding-top: 40px;
  } */

  /* 詳細ページのタイトルサイズ */
  h1.oto-pf-detail-title {
    font-size: var(--font-size16--18) !important;
    line-height: 1.4;
  }

  /* セクション間の余白を凝縮 */
  .oto-pf-section {
    padding: 10px 0;
  }

  /* スペックリスト（Client/Scopeなど）を1列に */
  .oto-pf-spec-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* 戻るボタンの余白 */
  .oto-pf-btn-back {
    padding: 60px 0;
  }

  .oto-pf-result-box {
    padding: 30px 20px;
  }
}

/* ----------------------------------
   Button: Arrow Style
---------------------------------- */
.btn-wrap {
  display: flex;
  justify-content: flex-end;
}

.btn-text {
  font-size: var(--font-size16--18);
}

.btn-arrow,
.btn-arrow2 {
  display: inline-flex; /*中身で伸縮する*/
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  /* border: 1px solid var(--main-color); */
  color: var(--main-color);
  font-size: var(--font-size12--14);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-arrow:hover,
.btn-arrow2:hover {
  background-color: var(--main-color);
  color: #fff;
  opacity: 1;
}

.btn-arrow .btn-ya,
.btn-arrow2 .btn-ya {
  font-size: var(--font-size12--14);
  margin-left: 8px;
  display: inline-block;
}

.btn-arrow .btn-ya i,
.btn-arrow2 .btn-ya i {
  font-size: 1.25rem;
}

/* SP */
@media (max-width: 768px) {
  .btn-wrap {
    justify-content: center;
  }
  .btn-arrow,
  .btn-arrow2 {
    padding: 8px 18px;
  }
}

/* ----------------------------------
   Footer
---------------------------------- */
.footer-modern {
  background-color: var(--main-color);
  color: #f5f5f5;
  padding: 80px 0 40px; /* 左右paddingは削除（innerで制御するため） */
  overflow: hidden; /* 念のため */
}

/* 幅制限用のコンテナ */
.footer-content {
  width: 100%;
  margin: 0 auto;
  padding: 0 40px; /* ここで左右の余白を作る */
}

/* リンクエリア */
.footer-top {
  display: flex;
  gap: 80px;
  margin-bottom: 60px;
}
/* 4番目のBOX（最後の子要素）だけを右に寄せる */
.footer-top > *:last-child {
  margin-left: auto;
}
.footer-top h4 {
  font-size: var(--font-size14--16);
  opacity: 0.7;
  margin-bottom: 20px;
  letter-spacing: 1.6px;
}

.footer-top h4.f_logo {
  opacity: 1;
}

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

.footer-top li {
  margin-bottom: 15px;
}

.footer-address li {
  font-size: var(--font-size12--14);
}

.footer-address li i,
.footer-links li i,
.footer-social li i {
  margin-right: 8px;
}

.footer-address li.note-tel {
  font-size: 0.675rem;
  font-weight: 300;
  margin-top: 10px;
}

.footer-illust img {
  max-height: 200px;
  width: auto;
  object-fit: cover;
  overflow: hidden;
  mix-blend-mode: hard-light;
}

/* リンクのホバーアニメーション */
.footer-top a {
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size14--16);
  position: relative;
  display: inline-block;
}

.footer-top a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform: scaleX(0); /* 最初は幅0 */
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.footer-top a:hover::after {
  transform: scaleX(1); /* ホバーで伸びる */
  transform-origin: bottom left;
}

/* 巨大ロゴエリア */
.footer-bottom {
  padding-top: 0;
}

.marquee-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  overflow: hidden;
  /* border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
  padding: 10px 0; /* 上下の余白 */
  margin-bottom: 40px;
}

/* --- アニメーション設定 --- */
.marquee-inner {
  display: flex;
  width: fit-content;
  animation: scroll-left 40s linear infinite;
}

.logo-group {
  display: flex;
  gap: 4vw;
  padding-right: 4vw;
}

.big-logo {
  white-space: nowrap;
  color: rgb(86, 110, 134);
  font-size: 12vw; /* 画面幅いっぱいなので少し小さめに調整してもOK */
  font-weight: 800;
  line-height: 1;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.copy {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size12--14);
  opacity: 0.7;
}
.copy-left {
  display: flex;
  align-items: center;
}
.copy-left a {
  text-decoration: none;
  padding: 0 40px;
}
.copy a {
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
}

.back-to-top {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.back-to-top i {
  font-size: 1.25rem;
  vertical-align: middle;
  margin-left: 6px;
}

/* ----------------------------------
   Responsive (SP)
---------------------------------- */
@media (max-width: 768px) {
  /* News List SP */
  .news-link {
    flex-wrap: wrap; /* 折り返し許可 */
    gap: 10px;
  }
  .news-title {
    width: 100%;
    margin-top: 5px;
  }

  /* About SP */
  .about-wrapper {
    flex-direction: column;
    gap: 40px;
  }
  .about-img,
  .about-content {
    width: 100%;
  }
  .footer-top {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 30px;
  }
  .footer-top > *:last-child {
    margin-left: 0;
  }
  .footer-illust img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    margin: 0 auto;
  }
  .big-logo {
    font-size: 18vw;
  }
  .copy {
    flex-direction: column;
    gap: 20px;
  }
  .copy-left {
    flex-direction: column-reverse;
  }
  .back-to-top {
    text-align: center;
  }
}
/* --- Snow Monkey Forms: OTO dESIGN Custom --- */

/* --- page-contact.php 用レイアウト --- */

.oto-contact-narrow {
  max-width: 840px;
  margin: 0 auto;
  padding: 80px 0;
}
/* --- Snow Monkey Forms: デザイン --- */

.smf-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px dotted var(--main-color);
}
.smf-item:first-child {
  border-top: 1px dotted var(--main-color);
}
.smf-item__col .smf-item__col--controls {
  flex: 1;
}
.smf-progress-tracker {
  margin-bottom: 40px !important;
}
.smf-radio-buttons-control__control {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.smf-item__label {
  width: 200px;
}

.smf-item__controls {
  max-width: 100%;
}
.smf-item__controls > * {
  width: 600px;
}
.smf-checkboxes-control {
  padding: 30px 0 0;
  font-size: var(--font-size12--14);
}
.smf-control-description {
  font-size: var(--font-size12--14);
  padding-left: 24px;
}
/* 必須 validation を持つ項目に必須バッヂを表示 */
.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
  content: "必須";
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: #ff4b4b;
  border-radius: 999px;
}

.smf-action {
  margin-top: 30px;
  text-align: center;
}

/* --- Contact Confirmation Section --- */

.contact-confirmation {
  max-width: 840px;
  margin: 0 auto 60px; /* 送信ボタンとの距離を調整 */
  padding: 30px;
  border-radius: 4px;
  text-align: left;
}

.contact-confirmation__notice {
  font-size: var(--font-size14--16);
  color: var(--color-text);
  margin-bottom: 15px;
  line-height: 1.8;
}

.contact-confirmation__notice strong {
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color);
}

.contact-confirmation__privacy {
  font-size: var(--font-size12--14);
  color: #555;
  line-height: 1.6;
}

.contact-confirmation__privacy a {
  color: var(--color-text);
  text-decoration: underline;
  font-weight: bold;
  transition: opacity 0.3s;
}

.contact-confirmation__privacy a:hover {
  opacity: 0.6;
}

.smf-complete-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

/* スマホ表示 */

@media (max-width: 768px) {
  .oto-contact-narrow {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 0;
  }
  .smf-radio-buttons-control__control {
    flex-direction: column;
    gap: 12px;
  }

  .smf-item {
    display: block;
  }
  .smf-item__label {
    width: 100%;
    margin-bottom: 10px;
  }
  .smf-item__controls > * {
    width: 100%;
  }
  .smf-checkboxes-control {
    flex-direction: column;
    gap: 12px;
  }
  .contact-confirmation {
    padding: 20px;
    margin: 30px 15px 15px;
  }
}

.smf-form input[type="text"],
.smf-form input[type="email"],
.smf-form input[type="tel"],
.smf-form textarea,
.smf-form select {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
}

/* チェックボックス・ラジオ */
.smf-form input[type="checkbox"],
.smf-form input[type="radio"] {
  transform: none !important;
  width: 16px;
  height: 16px;
  /* margin-top: 6px; */
  padding: 0;
}
.smf-form input:focus,
.smf-form textarea:focus {
  border-color: var(--main-color);
  outline: none;
}

.smf-error-messages {
  color: #ff4b4b;
  font-size: var(--font-size12--14);
  margin-top: 8px;
}

/* --- Privacy Policy Specific Styles --- */

.privacy-content h2 {
  font-size: var(--font-size16--18);
  margin-top: 40px;
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 3px solid #333; /* 控えめなアクセント線 */
  line-height: 1.4;
}

.privacy-content p {
  font-size: var(--font-size14--16);
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: var(--color-text);
}

/* 策定日や署名のスタイル */
.privacy-content p:last-child {
  margin-top: 60px;
  text-align: right;
  font-size: var(--font-size12--14);
}

.privacy-content ul {
  margin-bottom: 2em;
  padding-left: 1.2em;
}

.privacy-content li {
  font-size: var(--font-size14--16);
  color: #555;
  margin-bottom: 0.8em;
  line-height: 1.7;
  list-style-type: disc;
}

/* --- External Link Global Icon --- */

/* リンク自体の設定 */
a.is-external {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3em;
}

/* アイコンの設定 */
a.is-external::after {
  content: "\f1c5" !important; /* Bootstrap Icons: box-arrow-up-right */
  font-family: "bootstrap-icons" !important;
  font-size: 0.85em;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: #555;
  margin-left: 2px;
}

/* ホバー時にアイコンも色を変える */
a.is-external:hover::after {
  color: var(--main-color);
}