/* Base
-------------------------------------------- */
:root {
 font-size: 16px;
 --bg-color: #F7F7F7;
 --text-color: #333333;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

html,
body {
 margin: 0;
 padding: 0;
}

body {
 font-family: "Poppins", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
  sans-serif;
 font-size: 1rem;
 color: var(--text-color);
 background-color: var(--bg-color);
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

a {
 color: inherit;
 text-decoration: none;
}

.site-wrapper {
 min-height: 100vh;
 background-color: var(--bg-color);
}

.pc-no {
 display: none;
}

/* Header
-------------------------------------------- */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 10;
 background-color: rgba(247, 247, 247, 0.9);
 backdrop-filter: blur(8px);
}

.site-header__inner {
 max-width: 1080px;
 margin: 0 auto;
 padding: 16px 24px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.site-logo img {
 height: 20px;
}

.global-nav {
 display: flex;
 gap: 40px;
 font-size: 1rem;
 font-weight: 500;
}

.global-nav a {
 position: relative;
 padding-bottom: 4px;
}

.global-nav a::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 1px;
 background-color: #333333;
 transition: width 0.2s ease;
}

.global-nav a:hover::after {
 width: 100%;
}

.site-header__toggle {
 display: none;
 position: relative;
 width: 28px;
 height: 20px;
 border: none;
 padding: 0;
 background: transparent;
 cursor: pointer;
}

.site-header__toggle-line,
.site-header__toggle-line::before,
.site-header__toggle-line::after {
 content: "";
 position: absolute;
 left: 0;
 width: 100%;
 height: 2px;
 border-radius: 999px;
 background-color: #333333;
 transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}

.site-header__toggle-line {
 top: 50%;
 transform: translateY(-50%);
}

.site-header__toggle-line::before {
 top: -7px;
}

.site-header__toggle-line::after {
 bottom: -7px;
}

.site-header.is-open .site-header__toggle-line {
 transform: translateY(-50%) rotate(45deg);
}

.site-header.is-open .site-header__toggle-line::before {
 top: 0;
 transform: rotate(-90deg);
}

.site-header.is-open .site-header__toggle-line::after {
 bottom: 0;
 opacity: 0;
}

/* Hero
-------------------------------------------- */
.hero {
 position: relative;
 min-height: 72vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 180px 16px 48px;
 /* ヘッダー分の余白 */
 text-align: center;
 overflow: hidden;
}


.hero__rings {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: clamp(24px, 4vw, 72px);
 pointer-events: none;
 padding-top: 120px;
}

.hero-ring {
 position: relative;
 width: min(600px, 70vw);
 height: min(600px, 70vw);
 border-radius: 50%;
 background:
  radial-gradient(circle at 12% 12%, rgba(243, 198, 227, 0.75) 0%, rgba(243, 198, 227, 0.75) 18%, transparent 40%),
  radial-gradient(circle at 82% 25%, rgba(180, 166, 236, 0.70) 0%, rgba(180, 166, 236, 0.70) 20%, transparent 45%),
  radial-gradient(circle at 50% 55%, rgba(245, 240, 229, 0.95) 0%, rgba(245, 240, 229, 0.95) 88%, transparent 98%);
 background-repeat: no-repeat;
 background-size: 160% 160%;
 filter: saturate(115%);
 animation: heroRingDrift1 10s ease-in-out infinite;
}

/* 真ん中の穴（背景色でくり抜き） */
.hero-ring::after {
 content: "";
 position: absolute;
 inset: 22%;
 border-radius: 50%;
 background-color: var(--bg-color);
}

/* 2 個目・3 個目は色の配置と動きを少し変える */
.hero-ring--2 {
 background:
  radial-gradient(circle at 75% 20%, rgba(243, 198, 227, 0.75) 0%, rgba(243, 198, 227, 0.75) 18%, transparent 40%),
  radial-gradient(circle at 15% 75%, rgba(180, 166, 236, 0.70) 0%, rgba(180, 166, 236, 0.70) 20%, transparent 45%),
  radial-gradient(circle at 45% 40%, rgba(245, 240, 229, 0.95) 0%, rgba(245, 240, 229, 0.95) 88%, transparent 98%);
 background-repeat: no-repeat;
 background-size: 140% 140%;
 animation-name: heroRingDrift2;
 animation-duration: 16s;
}

.hero-ring--3 {
 background:
  radial-gradient(circle at 20% 70%, rgba(243, 198, 227, 0.75) 0%, rgba(243, 198, 227, 0.75) 18%, transparent 40%),
  radial-gradient(circle at 80% 35%, rgba(180, 166, 236, 0.70) 0%, rgba(180, 166, 236, 0.70) 20%, transparent 45%),
  radial-gradient(circle at 55% 30%, rgba(245, 240, 229, 0.95) 0%, rgba(245, 240, 229, 0.95) 88%, transparent 98%);
 background-repeat: no-repeat;
 background-size: 140% 140%;
 animation-name: heroRingDrift3;
 animation-duration: 18s;
}

/* Hero のテキスト */
.hero__content {
 position: relative;
 z-index: 1;
 max-width: 880px;
 padding: 0 16px;
}

/* Fade-in for hero content */
.js-fade-hero {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 1.1s ease, transform 1.1s ease;
}

.js-fade-hero.is-visible {
 opacity: 1;
 transform: translateY(0);
}

.hero__title {
 margin: 0 0 16px;
 font-size: 2.5rem;
 /* 40px */
 font-weight: 500;
 letter-spacing: 0.16em;
 font-feature-settings: "palt";
}

.hero__subtitle {
 margin: 0;
 font-size: 0.9375rem;
 letter-spacing: 0.12em;
}

/* Animation
-------------------------------------------- */
/* 左のリング：元の動きに近い感じ */
@keyframes heroRingDrift1 {
 0% {
  background-position:
   0% 0%,
   100% 0%,
   50% 100%;
 }

 50% {
  background-position:
   100% 100%,
   0% 100%,
   50% 0%;
 }

 100% {
  background-position:
   0% 0%,
   100% 0%,
   50% 100%;
 }
}

/* 真ん中のリング：少し違う方向へ */
@keyframes heroRingDrift2 {
 0% {
  background-position:
   10% 10%,
   80% 30%,
   60% 80%;
 }

 50% {
  background-position:
   80% 60%,
   10% 90%,
   30% 20%;
 }

 100% {
  background-position:
   10% 10%,
   80% 30%,
   60% 80%;
 }
}

/* 右のリング：縦方向に動き強め */
@keyframes heroRingDrift3 {
 0% {
  background-position:
   20% 80%,
   60% 10%,
   30% 40%;
 }

 50% {
  background-position:
   70% 30%,
   0% 60%,
   80% 90%;
 }

 100% {
  background-position:
   20% 80%,
   60% 10%,
   30% 40%;
 }
}


/* Fade-in for hero content */
.js-fade-hero {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 1.1s ease, transform 1.1s ease;
}

.js-fade-hero.is-visible {
 opacity: 1;
 transform: translateY(0);
}

.hero__title {
 margin: 0 0 16px;
 font-size: 2.5rem;
 /* 40px based on 16px root */
 font-weight: 500;
 letter-spacing: 0.16em;
 font-feature-settings: "palt";
}

.hero__subtitle {
 margin: 0;
 font-size: 0.9375rem;
 letter-spacing: 0.12em;
}

/* Animation
-------------------------------------------- */


/* Works
-------------------------------------------- */
.works {
 padding: 120px 16px 96px;
 background-color: var(--bg-color);
}

.works__inner {
 max-width: 1200px;
 margin: 0 auto;
}

.section-title {
 margin: 0 0 40px;
 font-size: 2rem;
 font-weight: 500;
 letter-spacing: 0.10em;
 text-align: center;
}

.works-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 40px 32px;
}

/* Fade-in animation for sections */
.js-fade-section {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity 1s ease, transform 1s ease;
}

.js-fade-section.is-visible {
 opacity: 1;
 transform: translateY(0);
}

/* Fade-in animation for cards (staggered) */
.js-fade-card {
 opacity: 0;
 transform: translateY(16px);
 transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fade-card.is-visible {
 opacity: 1;
 transform: translateY(0);
}

.works-grid .js-fade-card:nth-child(1) {
 transition-delay: 0.15s;
}

.works-grid .js-fade-card:nth-child(2) {
 transition-delay: 0.30s;
}

.works-grid .js-fade-card:nth-child(3) {
 transition-delay: 0.45s;
}

.works-grid .js-fade-card:nth-child(4) {
 transition-delay: 0.60s;
}

.work-card {
 position: relative;
 border-radius: 16px;
 overflow: hidden;
}

.work-card__link {
 display: flex;
 flex-direction: column;
 height: 100%;
 color: inherit;
}

.work-card__thumb {
 margin: 0;
 overflow: hidden;
 background-color: #ddd;
}

.work-card__thumb img {
 width: 100%;
 height: auto;
 display: block;
 transform: scale(1.01);
 transition: transform 0.35s ease;
}

.work-card__body {
 padding: 16px 32px 24px 0;
 text-align: left;
}

.work-card__tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0 0 8px;
 padding: 0;
 list-style: none;
}

.work-card__tags li {
 padding: 4px 12px;
 border-radius: 8px;
 background-color: #3A3A3A;
 color: #fff;
 font-size: 0.75rem;
 font-weight: 500;
}

.work-card__title {
 margin: 0;
 font-size: 1.25rem;
 line-height: 1.6;
 font-weight: 500;
 display: inline-block;
}

.work-card__arrow {
 position: absolute;
 right: 16px;
 bottom: 16px;
 width: 16px;
 height: 2px;
 background-color: #3A3A3A;
 transition: transform 0.25s ease;
}

.work-card__arrow::after {
 content: "";
 position: absolute;
 right: 0;
 top: 50%;
 width: 6px;
 height: 6px;
 border-top: 2px solid #3A3A3A;
 border-right: 2px solid #3A3A3A;
 transform: translateY(-50%) rotate(45deg);
}

.work-card:hover .work-card__arrow {
 transform: translateX(4px);
}

.work-card:hover .work-card__thumb img {
 transform: scale(1.03);
}

/* Other Projects
-------------------------------------------- */
.other-projects {
 padding: 64px 0 80px;
 text-align: center;
}

.other-projects__inner {
 max-width: 900px;
 margin: 0 auto;
}

.other-title {
 font-size: 1.75rem;
 margin-bottom: 40px;
}

.other-projects__list {
 list-style: none;
 padding: 0;
 margin: 0 0 32px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 16px 32px;
 font-size: 0.9375rem;
}

.other-projects__list li {
 position: relative;
 padding-left: 18px;
}

.other-projects__list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 50%;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: #777777;
 transform: translateY(-50%);
}

.other-projects__list span {
 color: #777;
 font-size: 0.875rem;
}

.other-more {
 font-size: 0.9375rem;
 color: #555;
 margin-top: 16px;
}

/* About
-------------------------------------------- */
.about {
 padding: 96px 16px 120px;
 background-color: var(--bg-color);
}

.about__inner {
 max-width: 1200px;
 margin: 0 auto;
 text-align: center;
}

.about__lead {
 margin: 0 auto 56px;
 font-size: 1rem;
 line-height: 2;
}

.about__block {
 margin-bottom: 40px;
}

.about__subtitle {
 margin: 0 0 24px;
 font-size: 1rem;
 font-weight: 500;
 letter-spacing: 0.03em;
}

/* 使用ツール用タグ */
.about-tools {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
}

.about-tools__item {
 width: 88px;
 height: 88px;
 border: 1px solid #D9D9D9;
 border-radius: 4px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 background-color: #ffffff70;
 padding-top: 8px;
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-tools__icon img {
 width: 32px;
 height: 32px;
 opacity: 0;
 transform: translateY(4px);
 transition: opacity 0.45s ease, transform 0.45s ease;
}

.about-tools__label {
 margin-top: 8px;
 font-size: 0.75rem;
 line-height: 1.3;
 display: flex;
 align-items: center;
 /* 縦方向センター */
 justify-content: center;
 /* 横方向センター */
 text-align: center;
 min-height: 2.6em;
 /* 2行ぶんくらいの高さを確保 */
 opacity: 0;
 transform: translateY(4px);
 transition: opacity 0.45s ease, transform 0.45s ease;
}

.about.is-visible .about-tools__icon img,
.about.is-visible .about-tools__label {
 opacity: 1;
 transform: translateY(0);
}

/* テキストタグ（デザインスキル／コーディングスキル） */
.about-tags {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
}

.about-tags li {
 border: 1px solid #D9D9D9;
 border-radius: 4px;
 padding: 8px 16px;
 font-size: 0.875rem;
 background-color: #FFFFFF;
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.7s ease, transform 0.7s ease;
}

.about.is-visible .about-tags li {
 opacity: 1;
 transform: translateY(0);
}

.about.is-visible .about-tags li:nth-child(1) {
 transition-delay: 0.30s;
}

.about.is-visible .about-tags li:nth-child(2) {
 transition-delay: 0.55s;
}

.about.is-visible .about-tags li:nth-child(3) {
 transition-delay: 0.80s;
}

.about.is-visible .about-tags li:nth-child(4) {
 transition-delay: 1.05s;
}

.about.is-visible .about-tags li:nth-child(5) {
 transition-delay: 1.30s;
}

.about.is-visible .about-tools__item {
 opacity: 1;
 transform: translateY(0);
}

.about.is-visible .about-tools__item:nth-child(1) {
 transition-delay: 0.80s;
}

.about.is-visible .about-tools__item:nth-child(2) {
 transition-delay: 1.10s;
}

.about.is-visible .about-tools__item:nth-child(3) {
 transition-delay: 1.40s;
}

.about.is-visible .about-tools__item:nth-child(4) {
 transition-delay: 1.70s;
}

.about.is-visible .about-tools__item:nth-child(5) {
 transition-delay: 2.00s;
}

.about.is-visible .about-tools__item:nth-child(6) {
 transition-delay: 2.30s;
}

.about.is-visible .about-tools__item:nth-child(7) {
 transition-delay: 2.60s;
}

.about.is-visible .about-tools__item:nth-child(1) .about-tools__icon img {
 transition-delay: 0.05s;
}

.about.is-visible .about-tools__item:nth-child(1) .about-tools__label {
 transition-delay: 0.13s;
}

.about.is-visible .about-tools__item:nth-child(2) .about-tools__icon img {
 transition-delay: 0.13s;
}

.about.is-visible .about-tools__item:nth-child(2) .about-tools__label {
 transition-delay: 0.21s;
}

.about.is-visible .about-tools__item:nth-child(3) .about-tools__icon img {
 transition-delay: 0.21s;
}

.about.is-visible .about-tools__item:nth-child(3) .about-tools__label {
 transition-delay: 0.29s;
}

.about.is-visible .about-tools__item:nth-child(4) .about-tools__icon img {
 transition-delay: 0.29s;
}

.about.is-visible .about-tools__item:nth-child(4) .about-tools__label {
 transition-delay: 0.37s;
}

.about.is-visible .about-tools__item:nth-child(5) .about-tools__icon img {
 transition-delay: 0.37s;
}

.about.is-visible .about-tools__item:nth-child(5) .about-tools__label {
 transition-delay: 0.45s;
}

.about.is-visible .about-tools__item:nth-child(6) .about-tools__icon img {
 transition-delay: 0.45s;
}

.about.is-visible .about-tools__item:nth-child(6) .about-tools__label {
 transition-delay: 0.53s;
}

.about.is-visible .about-tools__item:nth-child(7) .about-tools__icon img {
 transition-delay: 0.53s;
}

.about.is-visible .about-tools__item:nth-child(7) .about-tools__label {
 transition-delay: 0.61s;
}

/* Contact
-------------------------------------------- */
.contact {
 padding: 96px 16px 120px;
 background-color: var(--bg-color);
}

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

.contact__lead {
 margin: 0 auto 40px;
 font-size: 0.9375rem;
 line-height: 1.9;
}

.contact-form {
 max-width: 720px;
 margin: 0 auto;
 text-align: left;
}

.contact-form__field {
 margin-bottom: 20px;
}

.contact-form__field label {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
 font-size: 0.875rem;
 font-weight: 500;
}

.contact-form__required {
 display: inline-block;
 padding: 2px 6px;
 border-radius: 4px;
 background-color: #3A3A3A;
 color: #ffffff;
 font-size: 0.75rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
 width: 100%;
 padding: 10px 12px;
 border-radius: 4px;
 border: 1px solid #D9D9D9;
 font-size: 0.875rem;
 font-family: inherit;
 background-color: #ffffff;
 outline: none;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
 border-color: #3A3A3A;
 box-shadow: 0 0 0 1px rgba(58, 58, 58, 0.08);
}

.contact-form textarea {
 resize: vertical;
 min-height: 180px;
}

.contact-form__actions {
 margin-top: 32px;
 text-align: center;
}

.contact-form__submit {
 display: inline-block;
 min-width: 180px;
 padding: 12px 32px;
 border-radius: 999px;
 border: 1px solid #3A3A3A;
 background-color: #3A3A3A;
 color: #ffffff;
 font-size: 0.875rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 cursor: pointer;
 transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.contact-form__submit:hover {
 background-color: #ffffff;
 color: #3A3A3A;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
 transform: translateY(-1px);
}

.contact-form__submit:active {
 transform: translateY(0);
 box-shadow: none;
}

.contact-form__message {
 margin-top: 16px;
 font-size: 0.875rem;
 color: #3A3A3A;
 text-align: center;
 display: none;
}

.contact-form__message.is-visible {
 display: block;
}

@media (max-width: 768px) {
 .contact {
  padding: 72px 16px 96px;
 }

 .contact__lead {
  font-size: 0.875rem;
  margin-bottom: 32px;
 }

 .contact-form {
  max-width: 100%;
 }
}

/* Thanks
-------------------------------------------- */
.thanks {
 min-height: 100vh;
 padding: 140px 16px 80px;
 background-color: var(--bg-color);
 display: flex;
 align-items: center;
 justify-content: center;
}

.thanks__inner {
 max-width: 480px;
 width: 100%;
 margin: 0 auto;
 padding: 40px 32px 48px;
 border-radius: 16px;
 background-color: #ffffff;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
 text-align: center;
}

.thanks__title {
 margin: 0 0 16px;
 font-size: 1.5rem;
 font-weight: 500;
 letter-spacing: 0.12em;
}

.thanks__text {
 margin: 0 0 32px;
 font-size: 0.9375rem;
 line-height: 1.9;
}

.thanks__button {
 display: inline-block;
 min-width: 180px;
 padding: 12px 32px;
 border-radius: 999px;
 border: 1px solid #3A3A3A;
 background-color: #3A3A3A;
 color: #ffffff;
 font-size: 0.875rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 cursor: pointer;
 transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.thanks__button:hover {
 background-color: #ffffff;
 color: #3A3A3A;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
 transform: translateY(-1px);
}

.thanks__button:active {
 transform: translateY(0);
 box-shadow: none;
}

@media (max-width: 768px) {
 .thanks {
  padding: 112px 16px 64px;
 }

 .thanks__inner {
  padding: 32px 20px 40px;
 }

 .thanks__title {
  font-size: 1.25rem;
 }
}

/* Case: Screening UI/UX
-------------------------------------------- */
.case-hero {
 padding: 140px 0 56px;
 background-color: var(--bg-color);
}

.case-hero__inner {
 max-width: none;
 margin: 0;
 text-align: center;
}

.case-tags {
 list-style: none;
 margin: 0 0 16px;
 padding: 0;
 display: inline-flex;
 gap: 8px;
}

.case-tags li {
 padding: 4px 12px;
 border-radius: 8px;
 background-color: #3A3A3A;
 color: #fff;
 font-size: 0.75rem;
 font-weight: 500;
}

.case-title {
 margin: 0 0 32px;
 font-size: 2rem;
 font-weight: 500;
 letter-spacing: 0.12em;
}

.case-hero__inner .case-tags,
.case-hero__inner .case-title {
 max-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 padding: 0 16px;
}

.case-hero__image {
 margin: 0 calc(50% - 50vw);
 width: 100vw;
 border-radius: 0;
 overflow: hidden;
 display: flex;
 justify-content: center;
}

.case-hero__image img {
 display: block;
 width: 2800px;
 height: auto;
 max-width: none;
}

.case-hero__link {
 margin-top: 12px;
 text-align: center;
}

.case-hero__link a {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 0.75rem;
 color: #777777;
}

.case-hero__link a:hover {
 text-decoration: underline;
}

.case-hero__link-icon {
 width: 12px;
 height: 12px;
}

.case-body {
 padding: 40px 0 80px;
}

.case-body__inner {
 max-width: 1200px;
 margin: 0 auto;
}

.case-meta-box {
 margin-top: 32px;
 padding: 24px 32px;
 border-radius: 8px;
 background-color: #ffffffad;
}

.case-section-title {
 margin: 0 0 16px;
 font-size: 1.25rem;
 font-weight: 500;
 letter-spacing: 0.08em;
}

.case-body p {
 margin: 0 0 16px;
 font-size: 0.9375rem;
 line-height: 1.9;
}

.case-body .case-lead {
 margin: 0 0 24px;
 font-size: 1.25rem;
 /* 20px */
 line-height: 1.9;
}



.case-meta-grid {
 margin-top: 0;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 24px 40px;
}

.case-meta {
 margin: 0;
}

.case-meta dt {
 margin: 0 0 4px;
 font-size: 0.875rem;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 8px;
}

.case-meta dt::before {
 content: "";
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: #555555;
}

.case-meta dd {
 margin: 0;
 font-size: 0.875rem;
 line-height: 1.8;
}

/* New rules for case-design section */
.case-section {
 padding: 40px 0 24px;
 background-color: var(--bg-color);
}

.case-section__inner {
 max-width: 1200px;
 margin: 0 auto;
}

.case-section__label {
 margin: 0 0 8px;
 font-size: 0.625rem;
 color: #777777;
 background-color: #fff;
 display: inline;
 padding: 2px 8px;
 border-radius: 4px;
 border: 0.5px solid #eee;
}

.case-section__divider {
 width: 0;
 height: 1px;
 background-color: #bfbfbf;
 margin: 40px 0 40px;
 transition: width 2.0s ease;
}

.case-section.is-visible .case-section__divider {
 width: 100%;
}

.case-section__text {
 margin: 0 0 32px;
 font-size: 0.9375rem;
 line-height: 1.9;
}

.case-section__list {
 margin: 0 0 24px;
 padding-left: 1.2em;
 font-size: 0.9375rem;
 line-height: 1.9;
}

.case-section__list li {
 margin-bottom: 4px;
}

/* 成果と学び用：チェックアイコンのリスト */
.case-section--outcome .case-section__list {
 list-style: none;
 padding-left: 0;
}

.case-section--outcome .case-section__list li {
 position: relative;
 padding-left: 24px;
}

.case-section--outcome .case-section__list li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.4em;
 width: 14px;
 height: 14px;
 background-image: url("../img/icon_check.svg");
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}

.case-section__image {
 margin: 0;
}

.case-section__image img {
 display: block;
 border-radius: 8px;
}

.case-section__caption {
 margin-top: 8px;
 font-size: 0.75rem;
 color: #777777;
}

.case-related {
 padding: 80px 16px 120px;
 background-color: var(--bg-color);
}

.case-related__inner {
 max-width: 1200px;
 margin: 0 auto;
}

.case-related__grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}

.case-related .work-card {
 border-radius: 12px;
 background-color: #ffffff;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.case-related .work-card__body {
 padding: 16px 16px 24px;
}

.case-related .work-card__title {
 font-size: 0.9375rem;
}

.case-related .work-card__arrow {
 top: auto;
 bottom: 16px;
 right: 16px;
}

/* Case responsive */
@media (max-width: 768px) {
 .case-hero {
  padding: 112px 16px 40px;
 }

 .case-title {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
 }

 .case-body {
  padding: 40px 16px 80px;
 }

 .case-section {
  padding: 40px 16px 80px;
 }

 .case-related {
  padding: 40px 16px 80px;
 }

 .case-related__grid {
  grid-template-columns: 1fr;
  gap: 24px;
 }

 .case-related .work-card__body {
  padding: 12px 16px 16px;
 }

 .case-meta-grid {
  grid-template-columns: 1fr;
  gap: 20px;
 }

 .pc-no {
  display: block;
 }
}

/* Responsive
-------------------------------------------- */
@media (max-width: 768px) {
 .site-header__inner {
  padding-inline: 16px;
 }

 .site-header__toggle {
  display: block;
 }

 .global-nav {
  position: fixed;
  top: 64px;
  right: 0;
  left: 0;
  padding: 24px 16px 32px;
  background-color: rgba(247, 247, 247, 0.98);
  backdrop-filter: blur(8px);
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
 }

 .global-nav.is-open {
  display: flex;
 }

 .global-nav a {
  padding-bottom: 0;
 }

 .global-nav a::after {
  display: none;
 }

 .hero {
  padding-top: 96px;
 }

 .hero__title {
  font-size: 2rem;
  padding-top: 64px;
 }

 .hero__subtitle {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
 }

 .works {
  padding: 64px 16px 80px;
 }

 .about {
  padding: 72px 16px 96px;
 }

 .about__lead {
  margin-bottom: 40px;
  font-size: 0.875rem;
 }

 .about__subtitle {
  margin-bottom: 16px;
  font-size: 0.9375rem;
 }

 .about-tools {
  gap: 12px;
 }

 .about__block {
  margin-bottom: 40px;
 }

 .section-title {
  margin-bottom: 32px;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
 }

 .works-grid {
  grid-template-columns: 1fr;
  gap: 24px;
 }

 .work-card__body {
  padding: 12px 16px 16px;
 }

 .case-hero__image img {
  width: 700px;

 }
}