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

/* 全体ベース */
body {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  /* color: #111; */
}

/* 見出し・ブランドロゴ */
.brand, h1, h2, .v-ttl {
  font-family: 'Playfair Display', serif;
}

section h3 {
  /* color: #1e2a5a;  */
}



:root{
  --bg-dark: #0a0a0a;
  --fg-on-dark: #eaeaea;
  --fg-on-dark-sub: #cfcfcf;
  --bg-light: #ffffff;
  --fg-on-light: #111111;
  --brand-bg: #dbe6ff;
  --brand-blue: #2b6cff;
}

/* 背景に使うとき */
.section--muted,
.service-section,
.works-section,
.flow-section {
  background: var(--brand-bg);
}

/* アクセント（リンクやアイコンなど） */
a, .service-icon {
  color: var(--brand-blue);
}


/* 既定 */
body { color: var(--fg-on-light); }

/* 黒背景で使うユーティリティ */
.on-dark { color: var(--fg-on-dark); }
.on-dark .subtle { color: var(--fg-on-dark-sub); }
.on-dark a { color: #fff; }








.fv-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(to bottom right, #0d0d0d, #1a1a1a);
  padding: 0 20px;
  color: #fff;
}


.fv-logo {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 1rem;
}

.fv-catchcopy {
  font-size: 2.2rem;
  font-weight: 500;
  max-width: 800px;
  line-height: 1.6;
  background: linear-gradient(90deg, #ffffff, #ccc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  text-decoration: none;
  color: #aaa;
  font-size: 0.9rem;
  animation: fadeIn 2s ease-in-out;
}

.scroll-down .arrow {
  font-size: 2rem;
  animation: bounce 2s infinite;
  margin-top: 5px;
}



/*   vision
------------------------------------------ */
.vision-section {
  background-color: #0d0d0d;
  color: #000;
  padding: 100px 20px;
  text-align: left;
}

.vision-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 50px;
  background: linear-gradient(90deg, #ffffff, #cccccc);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vision-text {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 2;
  color: #e0e0e0;
}

.vision-text p {
  margin-bottom: 2em;
}



/*  profile
-------------------------------------- */
.profile-section {
  background-color: #f9f9f9;
  color: #333;
  padding: 100px 20px;
}

.profile-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.profile-image img {
  width: 280px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-text {
  flex: 1;
  min-width: 280px;
}

.profile-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #111;
}

.profile-text .name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.profile-text .title {
  font-size: 1rem;
  color: #777;
  margin-bottom: 20px;
  font-style: italic;
}

.profile-text p {
  line-height: 1.8;
  font-size: 1rem;
}


/* dod絵 */
/* ドット絵用キャンバスの見た目（カードと統一） */
.pixel-card {
  display: block;
  width: 100%;
  max-width: 360px;        /* カード幅に合わせて調整 */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  background: #fff;
}

/* 画像のチラつき防止（変換後は非表示） */
#profile-photo { display: none; }


/* 20250904 */
.section--profile{ background:#f9f9f9; color:#111; padding:100px 20px; }
.section--profile .profile-card{ margin:0 auto; }
.section--profile .profile-info h2{ font-size:2rem; margin:0 0 10px; }
.section--profile .profile-info .title{ color:#666; font-weight:700; margin-bottom:14px; }


.profile-section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.profile-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .25em;
}
.profile-text .subtitle {
  font-style: italic;
  color: #666;
  margin-bottom: 1em;
}


.profile-info .name {
  font-size: 1.6rem;   /* 見出し感を残す */
  font-weight: 700;
  margin-bottom: 0.3em;
}

.profile-info .subtitle {
  font-size: 0.95rem;  /* 本文より少し小さく */
  color: #666;
  margin-bottom: 1em;
}

.profile-info .description {
  font-size: 1rem;     /* 読みやすさ優先、少し小さめ */
  line-height: 1.8;
  color: #333;
}






/*  service
------------------------- */
.service-section {
  background-color: #f9f9f9;
  color: #222;
  padding: 100px 20px;
  text-align: center;
}

.service-section h2 {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.2em;
  color: #111;
}

.service-section .subheading {
  font-size: 1.2rem;
  color: #777;
  margin-bottom: 60px;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.service-box {
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  width: 300px;
  text-align: left;
}

.service-box .icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.service-box h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

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

.service-box li {
  margin-bottom: 10px;
  color: #555;
  font-size: 0.95rem;
}




/*  works
------------------------------------ */

.works-section {
  background-color: #111;
  color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.works-section h2 {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.2em;
}

.works-section .subheading {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 60px;
}

.works-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.work-card {
  background-color: #1a1a1a;
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.work-card:hover {
  transform: translateY(-5px);
}

.work-card img {
  width: 100%;
  height: 170px;
  display: block;
}

.work-card h3 {
  font-size: 1.1rem;
  margin: 16px 16px 8px;
}

.work-card .tags {
  color: #999;
  font-size: 0.85rem;
  margin: 0 16px 10px;
}

.work-card .description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 16px 16px;
  color: #ddd;
}

.work-card a,
.seminar-section a {
  display: block;
  text-align: right;
  margin: 0 16px 16px;
  font-size: 0.9rem;
  color: #89c4ff;
  text-decoration: none;
}


.work-card img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; image-rendering:auto;
}




/* seminar
---------------------------------- */

.seminar-section {
  background-color: #ffffff;
  text-align: center;
  padding: 80px 20px;
}
.seminar-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #111;
}
.seminar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.seminar-item {
  width: 300px;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding-bottom: 20px;
}
.thumbnail {
  position: relative;
}
.thumbnail img {
  width: 100%;
  height: 200px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  line-height: 48px;
}
.description {
  font-size: 0.95rem;
  color: #444;
  padding: 12px 16px 0;
  text-align: left;
}

.tags {
  background: #eee;
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #555;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0;
  list-style: none;
  margin-left: 16px;
}

.tag-list li {
  background-color: #eee;
  color: #555;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
}

.thumbnail img{
  width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
  border-top-left-radius:12px; border-top-right-radius:12px;
}




/* interview
------------------------------ */

.interview-section {
  background-color: #f2f2f2;
  text-align: center;
  padding: 80px 20px;
}
.interview-section h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #111;
}
.interview-card {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
}
.interview-img {
  /* flex: 0 0 200px; */
  flex: 0 0 50%;
  /* background-color: #e0e0e0; */
}
.interview-img img {
  width: 100%;
  height: auto;
  display: block;
}
.interview-text {
  flex: 1;
  padding: 24px;
}
.interview-text h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}
.interview-text p {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 8px;
}
.interview-text .interview-url {
  font-family: monospace;
  color: #0077cc;
  font-size: 0.9rem;
  word-break: break-word;
}



/* 20250904 */
.interview-img img{ 
  width:100%; 
  height:auto; 
  aspect-ratio:3/2; 
  object-fit:cover; 
  display:block; 
}

/* 20250907 */
.interview-text .interview-stext{
  font-size: 0.8rem;
  color: #999;
}




/*  flow
--------------------------------- */
.flow-section {
  background-color: #f2f2f2;
  color: #333;
  padding: 100px 20px;
  text-align: center;
}

.flow-section h2 {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.2em;
}

.flow-section .subheading {
  font-size: 1.2rem;
  color: #777;
  margin-bottom: 60px;
}

.flow-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.step {
  background: #fff;
  width: 250px;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: left;
}

.step-number {
  font-size: 2rem;
  color: #aaa;
  font-weight: bold;
  margin-bottom: 10px;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.step p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}



/*  voice
--------------------------------------- */

.voice-section {
  background-color: #ffffff;
  color: #333;
  padding: 100px 20px;
  text-align: center;
}
.voice-section h2 {
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.2em;
}
.voice-section .subheading {
  font-size: 1.2rem;
  color: #777;
  margin-bottom: 60px;
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}
.voice-box {
  background-color: #f9f9f9;
  width: 280px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 30px 20px;
  text-align: left;
}
.voice-box .avatar {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
.voice-box .comment {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 15px;
  color: #555;
}
.voice-box .name {
  font-size: 0.9rem;
  font-style: italic;
  color: #888;
}






/*  footer
---------------------------------- */

.footer {
  background-color: #111;
  color: #eee;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.footer-logo {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.footer-copy {
  font-size: 1rem;
  color: #aaa;
  margin-bottom: 20px;
}
.footer-copyright {
  font-size: 0.85rem;
  color: #666;
}




/*  その他
--------------------------------------- */
/* トップへ戻る */

.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 30px;
  background-color: #333;
  color: #fff;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 50%;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.back-to-top:hover {
  background-color: #555;
}
.show-back-to-top {
  opacity: 1;
}






.profile-card {
      display: flex;
      background: #F9F6F5;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding: 40px;
      max-width: 800px;
      margin: auto;
      border-radius: 10px;
    }
    .profile-image {
      flex: 1;
      max-width: 300px;
      margin-right: 40px;
    }
    .profile-image img {
      width: 100%;
      border-radius: 10px;
    }
    .profile-info {
      flex: 2;
    }
    .profile-info h1 {
      font-size: 36px;
      margin: 0 0 10px;
    }
    .profile-info h2 {
      font-size: 24px;
      margin: 0 0 30px;
      font-weight: normal;
    }
    .title {
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .description {
      font-size: 16px;
      line-height: 1.8;
    }


    /* PCでは左寄せ、モバイルでは中央寄せ */
#profile .profile-info { text-align: left; }
#profile .profile-info .name { 
  font-weight: 700; 
  margin: 0 0 .4em; 
}
#profile .profile-info .subtitle { 
  color:#666; 
  margin: 0 0 1.1em; 
}
#profile .profile-info .description { 
  line-height: 1.9; 
  max-width: 42em;           /* 横に広がりすぎないように */
}

/* スマホでは中央寄せに戻す */
@media (max-width: 900px){
  #profile .profile-info { text-align: center; }
  #profile .profile-info .description { margin-left:auto; margin-right:auto; }
}







/*  fv
--------------------------------------------------- */
/* ファーストビューの土台 */
.fv-section {
  position: relative;
  height: 100vh;
  overflow: hidden;             /* はみ出す波紋を隠す */
  display: grid;
  place-items: center;
  background: #0e0e10;          /* ベースは黒に近い紺 */
  color: #fff;
}

/* 背景Canvas */
#bg-gradient,
#bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* コンテンツ */
.fv-inner {
  position: relative;
  text-align: center;
  z-index: 10;
  padding: 0 24px;
}

.fv-logo {
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .12em;
  margin-bottom: .8rem;
}

.fv-catchcopy {
  font-size: clamp(1.6rem, 3.2vw + .5rem, 2.6rem);
  font-weight: 500;
  line-height: 1.7;
  /* 少しだけ柔らかいグラデ文字 */
  background: linear-gradient(90deg,#fff,#d6d6e8);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

/* スクロール誘導 */
.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  color: #bbb;
  font-size: .9rem;
  text-align: center;
}
.scroll-down .arrow {
  margin-top: 6px;
  font-size: 1.6rem;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(6px); }
}

/* モーション苦手な人向け配慮 */
@media (prefers-reduced-motion: reduce) {
  .scroll-down .arrow { animation: none; }
}







.fv-section{
  position:relative; height:100vh; overflow:hidden;
  display:grid; place-items:center; background:#0f1012; color:#fff;
}
#particles-only{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.fv-inner{ position:relative; z-index:10; text-align:center; padding:0 24px; }
.fv-logo{ font-weight:700; font-size:1.9rem; letter-spacing:.12em; margin-bottom:.8rem; }
.fv-catchcopy{
  font-size:clamp(1.6rem,3.2vw + .5rem,2.6rem);
  font-weight:500; line-height:1.7; color:#fff;
  opacity:.95;
}
.scroll-down{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:#bbb; text-decoration:none; font-size:.9rem; }
.scroll-down .arrow{ margin-top:6px; font-size:1.6rem; animation:bounce 2s infinite; }
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){ .scroll-down .arrow{animation:none} }







/* 矢印をゆっくりバウンドさせる */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ふわっと表示 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


@media screen and (max-width: 768px) {
  .fv-catchcopy {
    font-size: 1.5rem;
  }
}
 */




/*  FV pixel
-------------------------------------------------------------------------------------- */


*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* body{font-family:"Hiragino Sans","Helvetica Neue",Arial,sans-serif; color:#111;} */

/* ===== FV（黒） ===== */
.fv{
  position:relative; min-height:100svh; overflow:hidden;
  background:linear-gradient(to bottom,var(--bg-top),var(--bg-mid) 55%,var(--bg-btm));
  isolation:isolate;
}
.fv::after{
  content:""; position:absolute; inset:-8%;
  background:radial-gradient(1200px 700px at 50% 38%,transparent 0%,var(--vignette) 75%);
  pointer-events:none;
}
#fx{position:absolute; inset:0; width:100%; height:100%}
.fv-inner{
  position:relative; z-index:1; min-height:100svh;
  display:grid; place-items:center; text-align:center; padding:0 1.2rem;
}
.brand{
  font-family:"Times New Roman","Hiragino Mincho ProN","游明朝",serif;
  font-weight:600; letter-spacing:.02em; line-height:1.15;
  font-size:clamp(36px,6.4vw,68px); margin:0 0 .7rem;
}
.tagline{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(14px,2.2vw,18px); letter-spacing:.14em;
  color:var(--sub); margin:0;
}

/* ===== 白背景セクション ===== */
.section{ background:#fff; color:#111; padding:8rem 1.6rem; text-align:center; }
.section-inner{ max-width:720px; margin:0 auto; }
.section h2{ font-size:2rem; margin-bottom:1rem; }
/* .section p{ font-size:1.1rem; line-height:1.7; } */

/* ===== テキストアニメ ===== */
.ani-fadein{ opacity:0; animation:fadeIn 1.6s ease-out forwards; }
@keyframes fadeIn{ to{ opacity:1 } }

.ani-fadeup{
  opacity:0; transform:translateY(10px); filter:blur(4px);
  animation:fadeUp .9s cubic-bezier(.2,.65,.2,1) forwards;
  animation-delay:var(--delay,0s);
}
@keyframes fadeUp{ to{ opacity:1; transform:none; filter:none } }

@media (prefers-reduced-motion:reduce){
  .ani-fadein,.ani-fadeup{ animation:none; opacity:1; transform:none; filter:none }
}






/* 20250904
---------------------------------------------------- */
html { font-size: 16px; }                /* 基準 */
body { line-height: 1.85; letter-spacing: .02em; }
.section-inner { max-width: 64ch; }      /* Visionなどテキスト面の横幅を制限 */

h1 { font-size: clamp(32px, 6vw, 56px); line-height: 1.1; }
h2 { font-size: clamp(22px, 3.2vw, 28px); letter-spacing:.04em; }
.card h3 { font-size: 1.05rem; }

#vision .v-lead { line-height: 1.95; }

.on-light, .section--light, .vision-section { color:#2b2b2b; }

.on-dark, .works-section { color:#e9e9e9; }
.works-section .meta { color:#cfcfcf; }

.section--muted { background:#f5f6f7; }

.section { padding: clamp(64px, 8vw, 128px) 20px; }
.section--compact { padding: clamp(48px, 6vw, 96px) 20px; } /* Service/Flow等 */

.card { padding: 18px 16px; border-radius: 14px; }

#profile .title { letter-spacing:.12em; font-size:.8rem; color:#6f6f6f; }
#profile h2 { font-size: clamp(20px, 2.6vw, 24px); margin:.25em 0 .4em; }
#profile .description { line-height:1.9; }

.service-icon { width:40px; height:40px; display:inline-block; }
.service-box p { min-height: 3.2em; } /* 2行想定で揃える */

.work-card .thumb { position:relative; overflow:hidden; }
.work-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.work-card h3 { font-weight:700; }

.work-card img { filter: brightness(1.05); }

@media (max-width: 720px){
  .flow .step { border-left: 3px solid #ddd; padding-left:12px; }
  .flow .step + .step { margin-top: 16px; }
}


a { color:#2b6cff; text-decoration: none; }
a:hover { filter: brightness(1.12); }
.on-dark a { color:#93b0ff; }



/* 202050910 */

.v-lead {
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
  margin-bottom: 1.4em;
  text-align: left;
}

.catch {
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: #111;
  display: inline-block;
  margin: 1em 0 2em;
}



/* work
--------------------------------------------- */
/* --- Works セクション全体を白に統一 --- */
.works-section {
  background: #fff;
  color: #2b2b2b;       /* 白背景用の本文色 */
  padding: clamp(64px, 8vw, 128px) 20px;
}

/* 見出しを強調（黒背景から変えても映えるように） */
.works-section h2 {
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1rem;
  color: #111;
}

/* --- カード強調 --- */
.work-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

/* サムネイルを少し暗めにグラデーションで締める */
.work-card .thumb {
  position: relative;
}

.work-card .thumb::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* タイトルをより読みやすく */
.work-card h3 {
  font-weight: 700;
  margin-top: .75em;
  color: #111;
}

.work-card .description  {
  color: #555;
  line-height: 1.7;
}

.work-card .thumb::after {
  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
}
.work-card img { filter: brightness(1.08); }

.work-card:hover a {
  color: #2b6cff; /* ブランドカラーっぽいブルー */
}

section h2 {
  border-bottom: 2px solid #eee;
  display: inline-block;
  padding-bottom: .25em;
  margin-bottom: 1.5em;
  font-size: 2rem!important;
}



section .subheading {
    font-size: 1.0rem !important;
    color: #777 !important;
    margin-bottom: 60px !important;
}


/* service
-------------------------------------- */
.service-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:#eef3ff;   /* 薄いブランドカラー */
  color: #94a1bf;        /* ブランドブルー */
  font-size: 28px;
  margin: 0 auto 16px;
}
.service-box {
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  background: #dbe6ff;
}
.service-box h3 {
  color: #1e2a5a; /* アイコンと近い青みの濃色 */
}

.works-section .work-card:hover {
  background: #dbe6ff;   /* オレンジ */
}


/*  seminar
----------------------------------------------- */
/* seminar
---------------------------------- */

/* セクション骨格：WORKSと同じリズムに */
.seminar-section {
  background: #fff;                                 /* Worksと同じ白面 */
  text-align: center;
  padding: clamp(64px, 8vw, 128px) 20px;            /* 上下余白を統一 */
}
.seminar-section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #111;
}

/* グリッド：Worksと同じ幅＆間隔 */
.seminar-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;                                        /* Worksと同じ */
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* カード：Worksのwork-card相当 */
.seminar-item {
  width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: left;
}
.seminar-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

/* サムネ：比率を揃えて、軽くグラデで締める */
.thumbnail { position: relative; }
.thumbnail img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}
.thumbnail::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* 再生ボタンは少しだけ主張を弱める＋hoverで明るく */
.play-button {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  font-size: 2rem;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.35);
  width: 48px; height: 48px; line-height: 48px;
  border-radius: 50%;
  transition: filter .2s ease;
}
.seminar-item:hover .play-button { filter: brightness(1.15); }

/* 説明文：Worksに合わせて余白＆色を調整 */
.seminar-item .description {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  padding: 14px 16px 18px;
}

#seminar.works-section {
  background: #fff;   /* works と揃える */
}
#seminar .work-card:hover {
  background: #dbe6ff; /* ホバー時のブランドカラー */
}


.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* アイコンがクリックを邪魔しない */
  transition: background 0.3s ease;
}

.work-card:hover .play-icon {
  background: rgba(0,0,0,0.75);
}