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

body {
  font-family: Arial, sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴシック",
    "Hiragino Sans", "Meiryo UI", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", "Yu Gothic UI",
    "ＭＳ ゴシック", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ Ｐゴシック", "MS PGothic";
  line-height: 1.6;
  height: auto; /* ページ全体の高さを設定 */
  font-size: 16px;
}

/* Main content wrapper: prevent horizontal overflow */
.site-content {
  overflow-x: hidden;
}

header h1 {
  font-family: serif;
}

.hero-content {
  flex: 1;
  max-width: 50%;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 1.2rem;
  color: #555;
}

.hero-animation {
  flex: 1;
  max-width: 100%;
  text-align: center;
}

.hero-animation lottie-player {
  width: 100%;
  max-width: none;
}

/* ナビゲーションメニュー用スタイル */
/* メニューボタン：通常は線だけの四角 */
.menu-button {
  position: fixed;
  top: 20px;
  right: 70px;
  width: 60px;
  height: 60px;
  border: 1px solid #121111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s;
  transform: translate(20px, 20px) rotate(-45deg);
}
/* 修正: .menu-button 内のテキスト表示 */
.menu-button .menu-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #000;
}

.menu-button .close-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #fff;
}
#menu-toggle:checked + .menu-button .menu-text {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#menu-toggle:checked + .menu-button .close-text {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* オーバーレイメニュー（初期は非表示） */
.menu-overlay {
  position: fixed;
  top: 20px;
  right: 70px;
  width: 60px;
  height: 60px;
  transform: translate(20px, 20px) rotate(45deg);
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 900;
}

/* オーバーレイメニュー内のリスト */
.menu-overlay ul {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  transform: rotate(-45deg);
}

.menu-overlay li {
  position: absolute;
  font-size: 1.2rem;
  color: #141313;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
}

/* 各リストアイテムに配置を指定（四隅に設置） */
/* top: 0; left: 50% => top edge. bottom: 0; etc. Adjust if needed. */
.menu-overlay li:nth-child(1) {
  /* 左下ワーク（x=50%, y=0） */
  top: 17.5px;
  left: -90%;
  transform: translate(50%, 50%) rotate(45deg);
}
.menu-overlay li:nth-child(2) {
  /* 右上プロフィイール（x=100%, y=50%） */
  top: -6.6px;
  right: -11%;
  transform: translate(50%, -50%) rotate(45deg);
}
.menu-overlay li:nth-child(3) {
  /* 右下中央コンタクト（x=50%, y=100%） */
  top: 17.5px;
  left: 106%;
  transform: translate(-50%, 50%) rotate(-45deg);
  font-size: 1.1rem;
}
.menu-overlay li:nth-child(4) {
  /* 左上ホーム（x=0, y=50%）ho-mu */
  top: -6.6%;
  left: -11%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 中央の"close"テキストを配置する例 */
.close-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #2f2d2d;
  font-size: 1.2rem;
}

#menu-toggle:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
}

/* メニューリストのリンク下線の設定 */
.menu-overlay li a {
  text-decoration: none;
  color: #000;
}

.menu-overlay li a:hover {
  text-decoration: underline;
  text-decoration-color: black;
}

/* メニューリストのテキストを含むspanに初期状態のスタイルを設定 */
.menu-overlay li span {
  display: inline-block;
  transform: translateY(30px);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* 各リストアイテムに個別の遅延を設定（順次表示） */
#menu-toggle:checked ~ .menu-overlay li:nth-child(1) span {
  transition-delay: 0.1s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(2) span {
  transition-delay: 0.2s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(3) span {
  transition-delay: 0.3s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(4) span {
  transition-delay: 0.4s;
}

#works {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  background-color: #ffff;
  margin-top: -11px;
  padding-bottom: 100px;
}

/* 見出し */
#works h2 {
  text-align: center;
  margin: -20px 0 20px;
  font-family: serif;
  font-size: 2rem;
}

/* Wrapper for work-categories and illust-subcategories to center both vertically */
.work-categories-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.work-categories {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.work-categories a.btn-border {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1.2;
  border-radius: 0;
  text-decoration: none;
}

.work-categories a.btn-border:before,
.work-categories a.btn-border:after {
  position: absolute;
  width: 100%;
  height: 2px;
  content: "";
  transition: all 0.3s;
  background: #000;
}

.work-categories a.btn-border:before {
  top: 0;
  left: 0;
}

.work-categories a.btn-border:after {
  bottom: 0;
  right: 0;
}

.work-categories a.btn-border:hover:before,
.work-categories a.btn-border:hover:after {
  width: 0;
}

/* レスポンシブグリッド */
.work-grid {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  /* 画面幅に応じて列数を変える例 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 60px;
}

.work-item {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 2px solid #111;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.work-item:hover {
  transform: scale(1.03);
}

.work-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 1px solid #ddd;
  filter: grayscale(100%) saturate(40%);
  transition: filter 0.3s ease;
}

.work-item:hover img {
  filter: grayscale(0%) saturate(100%);
}

.work-item figcaption {
  padding: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.work-item figcaption h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.work-item figcaption p {
  font-size: 0.85rem;
  color: #555;
}

/* Override block for Web category cards inside work-grid */
.work-grid > .work-item[data-category="web"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  aspect-ratio: auto;
  padding: 40px;
  border-radius: 12px;
  background-image: url("images/marble.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
}

.work-grid > .work-item[data-category="web"] img {
  height: 160px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #ccc;
  flex-shrink: 0;
  filter: saturate(30%);
  transition: filter 0.3s ease;
  pointer-events: none; /* disable modal opening on image click */
}

.work-grid > .work-item[data-category="web"]:hover img {
  filter: saturate(100%);
}

.work-grid > .work-item[data-category="web"] .work-text {
  flex: 1;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

.work-grid > .work-item[data-category="web"] .work-text h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  white-space: nowrap;
}

.work-grid > .work-item[data-category="web"] .work-text p {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
}

/* Webカテゴリの横並びレイアウトを維持しつつ、グリッドの縦長影響を回避 */
.work-grid > .work-item[data-category="web"] {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  aspect-ratio: unset;
  min-height: 200px;
}

/* デフォルトの .work-item の影響をリセット */
.work-item[data-category="web"] {
  aspect-ratio: unset;
  flex-direction: row;
  align-items: center;
}

/* テキストが縦に詰まらないようにする */
.work-item[data-category="web"] .work-text {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* .work-item[data-category="web"] figcaption { ... }  // No longer used, replaced by .work-text */

#about {
  background-color: #fff;
  text-align: center;
}
.timeline {
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  position: relative;
}
.timeline-item {
  position: relative;
  padding: 2rem 0 2rem 60px;
}
.timeline-line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #ddd;
}

/* Timeline-line scroll dot animation */
.scroll-dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scrollMove 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes scrollMove {
  0% {
    top: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
.timeline-content {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background: #fff;
  padding: 2rem;
  width: 80%;
  max-width: 700px;
}
.timeline-content img {
  width: 120px;
  height: auto;
  border-radius: 6px;
  margin-left: 1rem;
  flex-shrink: 0;
}
.timeline-text h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.timeline-text p {
  margin: 0;
  line-height: 1.4;
}

#services {
  text-align: center;
  padding: 60px 20px;
  background-color: #ffffff;
}

#services h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: serif;
}

.skills,
.services-list {
  margin-bottom: 2rem;
}

.skills .tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tag {
  padding: 6px 12px;
  font-size: 0.9rem;
}

/* 対応可能なお仕事リストを横並びにし、中央配置、スラッシュ区切りにする */
.services-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.services-list li {
  position: relative;
  white-space: nowrap;
  padding: 0 8px; /* アイテム間のスペース調整 */
}

.services-list li:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: -8px; /* パディングと同じ値を使用 */
}

#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f7f7f7;
  padding-bottom: 100px;
  position: relative; /* ensure the pseudo-element is positioned correctly */
}

#contact::before {
  content: "";
  position: absolute;
  top: -1px; /* adjust to match the triangle height */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;
  border-color: #ffffff transparent transparent transparent; /* triangle color */
}

.contact-container {
  text-align: center;
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}
#contact h2 {
  margin-top: 100px;
  font-size: 2rem;
  font-family: serif;
}

.buttonNeumorphism {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  font-size: 1rem;
  color: #222;
  background-color: #efefef;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s, background-color 0.2s;
}

.buttonNeumorphism:hover {
  box-shadow: -2px -2px 4px #fff, 2px 2px 4px rgba(0, 0, 0, 0.24);
}

.buttonNeumorphism:active {
  background-color: #ebebeb;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.16);
}

#profile,
.profile-section {
  text-align: center;
}

.creator-name,
.studio-name {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
#about {
  padding-bottom: 100px;
}
#about .creator-name,
#about .studio-name {
  text-align: center;
  font-family: serif;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
#about h2 {
  font-size: 2rem;
  font-family: serif;
  text-align: center;
  margin-bottom: 1em;
}

#profile h2,
.profile-section h2 {
  text-align: center;
}

#bg-color-picker-container {
  position: relative;
  display: inline-block;
  width: auto;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.color-label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--current-color, #ccc);
  transform: rotate(45deg);
  border: 1px solid #eee;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Center text for elements with nowrap */
.nowrap {
  display: block; /* ensure full-width block */
  width: 100%; /* span container */
  text-align: center; /* center the text */
  white-space: nowrap; /* keep original nowrap behavior */
}

/* Table styling */
th {
  text-align: left;
  padding-right: 12px;
  white-space: nowrap;
  vertical-align: top;
}
td {
  padding-left: 8px;
}

/* イラストサブカテゴリ中央寄せ・枠線なし・黒文字 */
.illust-subcategories {
  text-align: center;
  position: absolute;
  top: calc(100% + 8px); /* ワークカテゴリの下8pxに出す */
  left: 50%; /* 親ラッパー幅の中央 */
  transform: translateX(-50%);

  display: none; /* 必要に応じてJSで toggle */
  white-space: nowrap; /* 横にはみ出さない */
}

.illust-subcategories .btn-border {
  border: none;
  color: #635d5d;
  font-size: 0.95rem;
  padding: 6px 12px;
  background: none;
  text-underline-offset: 4px;
  cursor: pointer;
}

.illust-subcategories .btn-border:hover,
.illust-subcategories .btn-border.active {
  color: #eb0d60;
  text-decoration-color: #000;
}

/* ワークアイテム用モーダル全画面表示 */
.work-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 10000;
  pointer-events: auto;
}

.work-modal .modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: auto;
  touch-action: pinch-zoom;
}

.work-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #000;
  cursor: pointer;
  z-index: 10001;
}

/* ===== Modal Slider Styling ===== */
.modal-slider {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* Slick slider overrides to ensure visibility */
.modal-slider .slick-slide {
  outline: none;
}

.modal-slider .slick-list {
  overflow: hidden;
}

.modal-slider .slick-slide {
  padding: 0 8px;
  box-sizing: border-box;
}

.modal-slider {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* Slick slider overrides to ensure visibility */
.modal-slider .slick-slide {
  outline: none;
  padding: 0 8px;
  box-sizing: border-box;
}

.modal-slider .slick-list {
  overflow: hidden;
}
.work-modal {
  display: none; /* 初期は非表示 */
  justify-content: center;
  align-items: center;
}

/* Ensure modal slider images fit and are centered */
.modal-slider img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Keep list and track full-height */
.modal-slider .slick-list,
.modal-slider .slick-track {
  height: 90vh;
}

/* Center track items vertically */
.modal-slider .slick-track {
  display: flex;
  align-items: center;
}

/* Center each slide’s content */
.modal-slider .slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Otherカテゴリの動画サムネイルスタイル */
.work-item.other-card .video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.work-item.other-card .video-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item.other-card .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* 動画モーダル用の✖️閉じるボタンスタイル */
#video-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.8rem;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

/* New hover details panel for work-item */
.hover-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  font-size: 0.85rem;
  line-height: 1.4;
}

.work-item:hover .hover-details {
  transform: translateY(0%);
  opacity: 1;
}

.hover-details h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.hover-details p {
  margin: 0;
  color: #333;
}

/* Override block for Web category cards inside work-grid */
.work-grid > .work-item[data-category="web"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  aspect-ratio: auto;
  padding: 40px;
  border-radius: 12px;
  background-image: url("images/marble.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
}

.work-grid > .work-item[data-category="web"] img {
  height: 160px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #ccc;
  flex-shrink: 0;
  filter: saturate(30%);
  transition: filter 0.3s ease;
}

.work-grid > .work-item[data-category="web"]:hover img {
  filter: saturate(100%);
}

.work-grid > .work-item[data-category="web"] .work-text {
  flex: 1;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

.work-grid > .work-item[data-category="web"] .work-text h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  white-space: nowrap;
}

.work-grid > .work-item[data-category="web"] .work-text p {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
}

/* Webカテゴリの横並びレイアウトを維持しつつ、グリッドの縦長影響を回避 */
.work-grid > .work-item[data-category="web"] {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  aspect-ratio: unset;
  min-height: 200px;
}

/* デフォルトの .work-item の影響をリセット */
.work-item[data-category="web"] {
  aspect-ratio: unset;
  flex-direction: row;
  align-items: center;
}

/* テキストが縦に詰まらないようにする */
.work-item[data-category="web"] .work-text {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* .work-item[data-category="web"] figcaption { ... }  // No longer used, replaced by .work-text */

header h1 {
  font-family: serif;
}

#bg-color-picker-container {
  position: relative;
  display: inline-block;
  width: auto;
  padding: 3px;
  border-radius: 5px;
  font-size: 0.8rem;
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.color-label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--current-color, #ccc);
  transform: rotate(45deg);
  border: 1px solid #eee;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ナビゲーションメニュー用スタイル */
/* メニューボタン：通常は線だけの四角 */
.menu-button {
  position: fixed;
  top: 20px;
  right: 70px;
  width: 60px;
  height: 60px;
  border: 1px solid #121111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s;
  transform: translate(20px, 20px) rotate(-45deg);
}
/* 修正: .menu-button 内のテキスト表示 */
.menu-button .menu-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #000;
}

.menu-button .close-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #fff;
}
#menu-toggle:checked + .menu-button .menu-text {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#menu-toggle:checked + .menu-button .close-text {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* オーバーレイメニュー（初期は非表示） */
.menu-overlay {
  position: fixed;
  top: 20px;
  right: 70px;
  width: 60px;
  height: 60px;
  transform: translate(20px, 20px) rotate(45deg);
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 900;
}

/* オーバーレイメニュー内のリスト */
.menu-overlay ul {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  transform: rotate(-45deg);
}

.menu-overlay li {
  position: absolute;
  font-size: 1.2rem;
  color: #141313;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Elsie Swash Caps", serif;
  font-weight: 400;
  font-style: normal;
}

/* 各リストアイテムに配置を指定（四隅に設置） */
/* top: 0; left: 50% => top edge. bottom: 0; etc. Adjust if needed. */
.menu-overlay li:nth-child(1) {
  /* 左下ワーク（x=50%, y=0） */
  top: 17.5px;
  left: -90%;
  transform: translate(50%, 50%) rotate(45deg);
}
.menu-overlay li:nth-child(2) {
  /* 右上プロフィイール（x=100%, y=50%） */
  top: -6.6px;
  right: -11%;
  transform: translate(50%, -50%) rotate(45deg);
}
.menu-overlay li:nth-child(3) {
  /* 右下中央コンタクト（x=50%, y=100%） */
  top: 17.5px;
  left: 106%;
  transform: translate(-50%, 50%) rotate(-45deg);
  font-size: 1.1rem;
}
.menu-overlay li:nth-child(4) {
  /* 左上ホーム（x=0, y=50%）ho-mu */
  top: -6.6%;
  left: -11%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 中央の"close"テキストを配置する例 */
.close-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #2f2d2d;
  font-size: 1.2rem;
}

#menu-toggle:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
}

/* メニューリストのリンク下線の設定 */
.menu-overlay li a {
  text-decoration: none;
  color: #000;
}

.menu-overlay li a:hover {
  text-decoration: underline;
  text-decoration-color: black;
}

/* メニューリストのテキストを含むspanに初期状態のスタイルを設定 */
.menu-overlay li span {
  display: inline-block;
  transform: translateY(30px);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* 各リストアイテムに個別の遅延を設定（順次表示） */
#menu-toggle:checked ~ .menu-overlay li:nth-child(1) span {
  transition-delay: 0.1s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(2) span {
  transition-delay: 0.2s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(3) span {
  transition-delay: 0.3s;
}
#menu-toggle:checked ~ .menu-overlay li:nth-child(4) span {
  transition-delay: 0.4s;
}

/* ヒーローセクション */
#hero {
  margin: 0;

  padding: 0;
  width: 100%;
  height: calc(100vw * 9 / 16);
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}

#dotLottie-canvas {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: bottom;
  z-index: 1;
}

#hero-animation svg {
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-content {
  flex: 1;
  max-width: 50%;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 1.2rem;
  color: #555;
}

.hero-animation {
  flex: 1;
  max-width: 100%;
  text-align: center;
}

.hero-animation lottie-player {
  width: 100%;
  max-width: none;
}
#works {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  background-color: #ffff;
  margin-top: -11px;
  padding-bottom: 100px;
}

/* 見出し */
#works h2 {
  text-align: center;
  margin: -20px 0 20px;
  font-family: serif;
  font-size: 2rem;
}

/* Wrapper for work-categories and illust-subcategories to center both vertically */
.work-categories-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.work-categories {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.work-categories a.btn-border {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1.2;
  border-radius: 0;
  text-decoration: none;
}

.work-categories a.btn-border:before,
.work-categories a.btn-border:after {
  position: absolute;
  width: 100%;
  height: 2px;
  content: "";
  transition: all 0.3s;
  background: #000;
}

.work-categories a.btn-border:before {
  top: 0;
  left: 0;
}

.work-categories a.btn-border:after {
  bottom: 0;
  right: 0;
}

.work-categories a.btn-border:hover:before,
.work-categories a.btn-border:hover:after {
  width: 0;
}

/* レスポンシブグリッド */
.work-grid {
  display: grid;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  /* 画面幅に応じて列数を変える例 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 60px;
}

.work-item {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 2px solid #111;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.work-item:hover {
  transform: scale(1.03);
}

.work-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 1px solid #ddd;
  filter: grayscale(100%) saturate(40%);
  transition: filter 0.3s ease;
}

.work-item:hover img {
  filter: grayscale(0%) saturate(100%);
}

.work-item figcaption {
  padding: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}

.work-item figcaption h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.work-item figcaption p {
  font-size: 0.85rem;
  color: #555;
}

/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none; /* 初期は非表示 */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden {
  display: none;
}
.modal-content {
  position: relative;
  background: #fff;
  padding: 20px;
  max-width: 80%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  margin: auto;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}

/* モーダル内の画像 */
.modal-content img {
  max-width: 100%;
  max-height: 90vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Footer styling */
footer {
  padding: 40px 0; /* 高さをもう少し大きくする */
  text-align: center; /* 文字を中央揃え */
  background-color: rgb(204, 204, 204); /* 任意: 背景色を薄いグレーに */
}

footer .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  color: #555;
}

footer small {
  display: block;
  font-size: 0.9rem;
  color: #555;
}

footer .back-to-top {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
}

/* Increase vertical spacing between rows in work-summary table */
.work-summary {
  border-collapse: separate;
  border-spacing: 0 1rem; /* horizontal 0, vertical 1rem spacing */
}

.work-summary th,
.work-summary td {
  padding: 0.1rem 1rem; /* add some padding inside cells */
}

/* ===== Media Queries ===== */

/* タブレット帯 */
@media (min-width: 768px) and (max-width: 1024px) {
  .work-grid {
    /* 2列に固定 */
    grid-template-columns: 1fr 1fr;
  }

  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }

  /* Disable grayscale filter on mobile cards */
  .work-item img {
    filter: none;
  }

  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }

  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
}

/* スマホ版 */
@media (max-width: 768px) {
  .menu-button {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(-45deg);
  }

  /* Force two columns on small screens */
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-button .menu-text,
  .menu-button .close-text {
    font-size: 0.8rem;
    position: absolute;
  }

  #bg-color-picker-container {
    position: static;
    padding: 2px;
    font-size: 0.7rem;
  }
  #bg-color-picker {
    position: absolute;
    opacity: 0;
    pointer-events: auto;
    width: 30px;
    height: 30px;
  }
  /* スマホ版：展開したオーバーレイメニューのサイズ調整 */
  .menu-overlay {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(45deg);
  }
  .menu-overlay li:nth-child(1) {
    /* 左下ワーク（x=50%, y=0） */
    top: 5px;
    left: -113%;
    transform: translate(50%, 50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(2) {
    /* 右上プロフィイール（x=100%, y=50%） */
    top: -3.6px;
    right: -11%;
    transform: translate(50%, -50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(3) {
    top: 45.5px;
    left: 110%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 1rem;
  }

  .menu-overlay li {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  #works {
    margin: 0;
    padding: 0;
    margin-top: -7px;
  }
  #works h2 {
    margin-top: 2px;
  }
  #works p {
    margin-top: 0;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* iPhone SE2-friendly: Web-category cards stack vertically */
  .work-grid > .work-item[data-category="web"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }

  /* Disable grayscale filter on mobile cards */
  .work-item img {
    filter: none;
  }

  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }

  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
  .modal-content {
    max-width: 90%;
  }
}

/* レスポンシブ対応: スマホで動画モーダルを画面内に収める */
@media (max-width: 767px) {
  #video-modal {
    align-items: flex-start; /* 上部余白を確保 */
    padding: 20px 10px; /* モーダル外周の余白 */
    box-sizing: border-box;
  }
  #video-modal .modal-content {
    width: 100%; /* モーダル幅を画面幅に */
    max-width: 100%; /* 横からはみ出さない */
    height: auto; /* 高さは自動調整 */
    max-height: calc(100vh - 40px); /* 上下余白分を引いた最大高さ */
    border-radius: 4px; /* 角丸を少し小さく */
    margin: 0 auto; /* 水平中央寄せ */
  }
  #video-modal .video-container {
    width: 100%;
    padding-top: 56.25%; /* アスペクト比 16:9 を維持 */
  }
  #video-modal .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Extra small devices (iPhone5 and smaller) */
@media (max-width: 320px) {
  /* Services section heading size */
  #services h2 {
    font-size: 1.5rem;
  }
}

/* Mobile devices (less than 600px) */
@media (max-width: 600px) {
  /* Timeline adjustments */
  .timeline-content {
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem;
  }
  .timeline-content img {
    margin: 0 0 0.75rem;
    width: 100%;
    height: auto;
  }
  .timeline-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .timeline-item {
    margin-bottom: 1.5rem;
  }
  .timeline-text h3 {
    font-size: 1rem;
  }
  .timeline-text p {
    font-size: 0.9rem;
  }
  .timeline-line {
    left: 0;
  }
  .timeline-item.visible {
    padding-left: 20px;
  }
  /* Profile text adjustments */
  #about .creator-name,
  #about .studio-name,
  #about .subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  #about .intro {
    font-size: 0.79rem;
    line-height: 1.6;
    width: 100%;
    margin: 0.5rem 0;
    text-align: center;
  }
  /* Services section heading size */
  #services h2 {
    font-size: 1.5rem;
  }

  /* Allow full text wrap on other-category video thumbnails */
  .work-item.other-card .video-thumb {
    overflow: visible;
  }
  .work-item.other-card .video-thumb img {
    height: auto;
  }
  .work-item.other-card figcaption,
  .work-item.other-card .hover-details {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Small tablets and large phones (601px to 768px) */
@media (min-width: 601px) and (max-width: 768px) {
  .menu-button {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(-45deg);
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .menu-button .menu-text,
  .menu-button .close-text {
    font-size: 0.8rem;
    position: absolute;
  }
  #bg-color-picker-container {
    position: static;
    padding: 2px;
    font-size: 0.7rem;
  }
  #bg-color-picker {
    position: absolute;
    opacity: 0;
    pointer-events: auto;
  }
  .menu-overlay {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(45deg);
  }
  .menu-overlay li:nth-child(1) {
    top: 5px;
    left: -113%;
    transform: translate(50%, 50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(2) {
    top: -3.6px;
    right: -11%;
    transform: translate(50%, -50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(3) {
    top: 45.5px;
    left: 110%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 1rem;
  }
  .menu-overlay li {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  #works {
    margin: 0;
    padding: 0;
    margin-top: -7px;
  }
  #works h2 {
    margin-top: 2px;
  }
  #works p {
    margin-top: 0;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-grid > .work-item[data-category="web"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }
  .work-item img {
    filter: none;
  }
  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
  .modal-content {
    max-width: 90%;
  }
}

/* Tablets (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }
  .work-item img {
    filter: none;
  }
  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
}

/* Center text for elements with nowrap */
.nowrap {
  display: block; /* ensure full-width block */
  width: 100%; /* span container */
  text-align: center; /* center the text */
  white-space: nowrap; /* keep original nowrap behavior */
}

/* Table styling */
th {
  text-align: left;
  padding-right: 12px;
  white-space: nowrap;
  vertical-align: top;
}
td {
  padding-left: 8px;
}

/* イラストサブカテゴリ中央寄せ・枠線なし・黒文字 */
.illust-subcategories {
  text-align: center;
  position: absolute;
  top: calc(100% + 8px); /* ワークカテゴリの下8pxに出す */
  left: 50%; /* 親ラッパー幅の中央 */
  transform: translateX(-50%);

  display: none; /* 必要に応じてJSで toggle */
  white-space: nowrap; /* 横にはみ出さない */
}

.illust-subcategories .btn-border {
  border: none;
  color: #635d5d;
  font-size: 0.95rem;
  padding: 6px 12px;
  background: none;
  text-underline-offset: 4px;
  cursor: pointer;
}

.illust-subcategories .btn-border:hover,
.illust-subcategories .btn-border.active {
  color: #eb0d60;
  text-decoration-color: #000;
}

/* ワークアイテム用モーダル全画面表示 */
.work-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.work-modal .modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.work-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #000;
  cursor: pointer;
  z-index: 10001;
}

/* ===== Modal Slider Styling ===== */
.modal-slider {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* Slick slider overrides to ensure visibility */
.modal-slider .slick-slide {
  outline: none;
}

.modal-slider .slick-list {
  overflow: hidden;
}

.modal-slider .slick-slide {
  padding: 0 8px;
  box-sizing: border-box;
}

.modal-slider {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

/* Slick slider overrides to ensure visibility */
.modal-slider .slick-slide {
  outline: none;
  padding: 0 8px;
  box-sizing: border-box;
}

.modal-slider .slick-list {
  overflow: hidden;
}
.work-modal {
  display: none; /* 初期は非表示 */
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .work-modal .modal-image {
    max-width: 95vw;
    max-height: 80vh;
    margin: auto;
    display: block;
  }
}

/* Ensure modal slider images fit and are centered */
.modal-slider img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Keep list and track full-height */
.modal-slider .slick-list,
.modal-slider .slick-track {
  height: 90vh;
}

/* Center track items vertically */
.modal-slider .slick-track {
  display: flex;
  align-items: center;
}

/* Center each slide’s content */
.modal-slider .slick-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Otherカテゴリの動画サムネイルスタイル */
.work-item.other-card .video-thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.work-item.other-card .video-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-item.other-card .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* レスポンシブ対応: スマホで動画モーダルを画面内に収める */
@media (max-width: 767px) {
  #video-modal {
    align-items: flex-start; /* 上部余白を確保 */
    padding: 20px 10px; /* モーダル外周の余白 */
    box-sizing: border-box;
  }
  #video-modal .modal-content {
    width: 100%; /* モーダル幅を画面幅に */
    max-width: 100%; /* 横からはみ出さない */
    height: auto; /* 高さは自動調整 */
    max-height: calc(100vh - 40px); /* 上下余白分を引いた最大高さ */
    border-radius: 4px; /* 角丸を少し小さく */
    margin: 0 auto; /* 水平中央寄せ */
  }
  #video-modal .video-container {
    width: 100%;
    padding-top: 56.25%; /* アスペクト比 16:9 を維持 */
  }
  #video-modal .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* 動画モーダル用の✖️閉じるボタンスタイル */
#video-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.8rem;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

/* ===== Timeline プロフィール用 ===== */
.timeline {
  width: 90%;
  max-width: 800px;
  margin: 2rem auto;
  position: relative;
}
.timeline-item {
  position: relative;
  padding: 2rem 0 2rem 60px;
}
.timeline-line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #ddd;
}

/* Timeline-line scroll dot animation */
.scroll-dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scrollMove 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes scrollMove {
  0% {
    top: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
.timeline-content {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background: #fff;
  padding: 2rem;
  width: 80%;
  max-width: 700px;
}
.timeline-content img {
  width: 120px;
  height: auto;
  border-radius: 6px;
  margin-left: 1rem;
  flex-shrink: 0;
}
.timeline-text h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.timeline-text p {
  margin: 0;
  line-height: 1.4;
}
/* スマホ対応：縦レイアウト */
@media (max-width: 600px) {
  .timeline-content {
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem;
  }
  .timeline-content img {
    margin: 0 0 0.75rem;
    width: 100%;
    height: auto;
  }
  .timeline-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .timeline-item {
    margin-bottom: 1.5rem;
  }
  .timeline-text h3 {
    font-size: 1rem;
  }
  .timeline-text p {
    font-size: 0.9rem;
  }
  .timeline-line {
    left: 0;
  }
  .timeline-item.visible {
    padding-left: 20px;
  }

  /* プロフィールテキストのモバイル調整 */
  #about .creator-name,
  #about .studio-name,
  #about .subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  #about .intro {
    font-size: 0.79rem;
    line-height: 1.6;
    width: 100%;
    margin: 0.5rem 0;
    text-align: center;
  }

  /* services セクション見出しのモバイルサイズ調整 */
  #services h2 {
    font-size: 1.5rem;
  }
}

/* プロフィール（タイムライン）セクションの背景色 */
#about {
  background-color: #fff;
  text-align: center;
}

/* Timeline items fade-in on scroll */
.timeline-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* リセット（必要に応じて） */
a {
  color: inherit;
  text-decoration: none;
}

.buttonNeumorphism {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  font-size: 1rem;
  color: #222;
  background-color: #efefef;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s, background-color 0.2s;
}

.buttonNeumorphism:hover {
  box-shadow: -2px -2px 4px #fff, 2px 2px 4px rgba(0, 0, 0, 0.24);
}

.buttonNeumorphism:active {
  background-color: #ebebeb;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.16);
}

/* ===== Profile Section Centering ===== */
#profile,
.profile-section {
  text-align: center;
}

/* Reduce font size and keep aligned for creator and studio names */
.creator-name,
.studio-name {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
#about {
  padding-bottom: 100px;
}
#about .creator-name,
#about .studio-name {
  text-align: center;
  font-family: serif;
  font-size: 1rem;
  margin-bottom: 0.5em;
}
#about h2 {
  font-size: 2rem;
  font-family: serif;
  text-align: center;
  margin-bottom: 1em;
}

#profile h2,
.profile-section h2 {
  text-align: center;
}

/* Add vertical spacing above contact section */
#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f7f7f7;
  padding-bottom: 100px;
  position: relative; /* ensure the pseudo-element is positioned correctly */
}

/* Apply a triangular divider at the top of the contact section */
#contact::before {
  content: "";
  position: absolute;
  top: -1px; /* adjust to match the triangle height */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;
  border-color: #ffffff transparent transparent transparent; /* triangle color */
}

.contact-container {
  text-align: center;
}

.contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}
#contact h2 {
  margin-top: 100px;
  font-size: 2rem;
  font-family: serif;
}

#services {
  text-align: center;
  padding: 60px 20px;
  background-color: #ffffff;
}

#services h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: serif;
}

/* Skill tags container and individual tag styling */
.skills,
.services-list {
  margin-bottom: 2rem;
}

.skills .tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tag {
  padding: 6px 12px;
  font-size: 0.9rem;
  background-color: #efefef; /* optional background for shape */
  border-radius: 9999px; /* pill shape */
  margin: 4px 0; /* vertical spacing between tags */
}

.services-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.services-list li {
  position: relative;
  white-space: nowrap;
  padding: 0 8px; /* アイテム間のスペース調整 */
}

.services-list li:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: -8px;
}

/* --- Masking-tape style for skill badges --- */
.fukidashi-02-04 {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.fukidashi-02-04 > .text {
  position: relative;
  padding: 12px 16px;
  border-radius: 4px;
  background-color: #fff3d1;
}
.fukidashi-02-04 > .text::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: rotate(135deg);
  background-color: #fff3d1;
}
.fukidashi-02-04 > .ornament {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.fukidashi-02-04 {
  position: relative;
  width: fit-content;
}

.fukidashi-02-04 > .text {
  position: relative;
  padding: 12px 16px;
  border-radius: 4px;
  /* 各スキル別カラーはここから継承される */
}

.fukidashi-02-04 > .text::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: rotate(135deg);
  box-sizing: border-box;
  background-color: inherit; /* ここで親の背景色を使う */
}

/* 各スキルごとの吹き出しカラー */

.fukidashi-02-04.skill-web > .text {
  background-color: #ffad55; /* Web制作用の色 */
}

.fukidashi-02-04.skill-graphic > .text {
  background-color: #8dc9ff; /* グラフィック用の色 */
}

.fukidashi-02-04.skill-video > .text {
  background-color: #ccbaff; /* 動画編集用の色 */
}

.fukidashi-02-04.skill-illustration > .text {
  background-color: #dedddd; /* イラスト制作用の色 */
}

.fukidashi-02-04.skill-live2d > .text {
  background-color: #ff8acc; /* Live2D用の色 */
}

/* ===== Media Queries ===== */

/* Extra small devices (iPhone5 and smaller) */
@media (max-width: 320px) {
  /* Services section heading size */
  #services h2 {
    font-size: 1.5rem;
  }
}

/* Mobile devices (less than 600px) */
@media (max-width: 600px) {
  /* Timeline adjustments */
  .timeline-content {
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem;
  }
  .timeline-content img {
    margin: 0 0 0.75rem;
    width: 100%;
    height: auto;
  }
  .timeline-content p {
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .timeline-item {
    margin-bottom: 1.5rem;
  }
  .timeline-text h3 {
    font-size: 1rem;
  }
  .timeline-text p {
    font-size: 0.9rem;
  }
  .timeline-line {
    left: 0;
  }
  .timeline-item.visible {
    padding-left: 20px;
  }
  /* Profile text adjustments */
  #about .creator-name,
  #about .studio-name,
  #about .subtitle {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  #about .intro {
    font-size: 0.79rem;
    line-height: 1.6;
    width: 100%;
    margin: 0.5rem 0;
    text-align: center;
  }
  /* Services section heading size */
  #services h2 {
    font-size: 1.5rem;
  }

  /* Allow full height and overflow on Other cards */
  .work-item.other-card {
    aspect-ratio: auto;

    height: auto;
  }
  /* Ensure video-thumb retains its aspect but lets caption flow */
  .work-item.other-card .video-thumb {
    margin-bottom: 8px; /* space for caption */
  }
  /* Caption wrapping */
  .work-item.other-card figcaption,
  .work-item.other-card .hover-details {
    position: relative;
    white-space: normal;
    overflow: visible;
    height: auto;
    overflow-wrap: break-word;
  }
  /* Mobile: enlarge illustration modal images */
  .work-modal .modal-image {
    width: 90vw;
    max-width: 90vw;
    height: auto;
    max-height: 80vh;
  }
}

/* Small tablets and large phones (601px to 768px) */
@media (min-width: 601px) and (max-width: 768px) {
  .menu-button {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(-45deg);
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .menu-button .menu-text,
  .menu-button .close-text {
    font-size: 0.8rem;
    position: absolute;
  }
  #bg-color-picker-container {
    position: static;
    padding: 2px;
    font-size: 0.7rem;
  }

  .menu-overlay {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 40px;
    height: 40px;
    transform: translate(10px, 10px) rotate(45deg);
  }
  .menu-overlay li:nth-child(1) {
    top: 5px;
    left: -113%;
    transform: translate(50%, 50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(2) {
    top: -3.6px;
    right: -11%;
    transform: translate(50%, -50%) rotate(45deg);
  }
  .menu-overlay li:nth-child(3) {
    top: 45.5px;
    left: 110%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 1rem;
  }
  .menu-overlay li {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  #works {
    margin: 0;
    padding: 0;
    margin-top: -7px;
  }
  #works h2 {
    margin-top: 2px;
  }
  #works p {
    margin-top: 0;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-grid > .work-item[data-category="web"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }
  .work-item img {
    filter: none;
  }
  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
  .modal-content {
    max-width: 90%;
  }
}

/* Tablets (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-grid > .work-item[data-category="web"] img {
    width: 50%;
    height: auto;
    margin: 0 auto 16px;
  }
  .work-item img {
    filter: none;
  }
  .work-grid > .work-item[data-category="web"] .work-text {
    width: 100%;
  }
  .work-grid > .work-item[data-category="web"] .work-text h3 {
    font-size: 0.9rem;
    text-align: center;
  }
  .work-grid > .work-item[data-category="web"] .work-text p {
    font-size: 0.8rem;
  }
}

/* モーダル表示中に背景を固定＆スクロール禁止 */
body.modal-open,
html.modal-open {
  overflow: hidden; /* スクロールバーを消す */
  position: fixed; /* 背景を固定 */
  width: 100%; /* 横幅を固定 */
  height: 100%; /* 縦幅を固定 */
}
.pswp img {
  object-fit: contain;
}