/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0; scroll-behavior: smooth;}
img,video{max-width:100%;display:block}
button{appearance:none;background:none;border:none;padding:0;cursor:pointer}
a{text-decoration:none;color:inherit}

:root{
  --ink:#111;--muted:#666;--line:#e5e5e5;--pink:#ec4899;--overlay:rgba(0,0,0,.55);
  --cat-press:#111827;--cat-music:#2563eb;--cat-proj:#059669;
}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",Helvetica,Arial;color:var(--ink);background:#fff;line-height:1.65;}
/* 横スクロールを出さない（チラ見せ維持） */
body{overflow-x:clip;}
@supports not (overflow: clip){ body{overflow-x:hidden;} }

.font-serif{font-family:"Noto Serif JP",serif}
.container{width:min(1100px,92vw);margin-inline:auto}
.kicker{letter-spacing:.18em;font-variant-caps:all-small-caps}
.small{font-size:13px;color:var(--muted)}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.center{text-align:center}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.08)}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.logo .title{font-size:18px}.logo .sub{font-size:10px;letter-spacing:.5em;color:#666}
.nav{gap:28px;display:none}.nav a{font-size:14px}
.hamb{width:44px;height:44px;display:grid;place-items:center;border:1px solid #d1d5db;border-radius:999px}
.hamb .bars{width:22px;height:14px;position:relative}
.hamb .bars span{position:absolute;left:0;right:0;height:2px;background:#111;border-radius:2px;transition:transform .3s}
.hamb .bars span:nth-child(1){top:0}.hamb .bars span:nth-child(2){top:6px}.hamb .bars span:nth-child(3){bottom:0}
@media (min-width:768px){.nav{display:flex}.hamb{display:none}}

/* Mobile menu */
.mmask{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.2,.7,0,1);z-index:60}
.mnav{position:fixed;inset:0 0 0 auto;width:min(78%,360px);max-width:92vw;background:#fff;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,0,1);padding:28px;z-index:61;display:flex;flex-direction:column;gap:20px}
.mnav .close{align-self:flex-end;width:36px;height:36px;border:1px solid #d1d5db;border-radius:999px;display:grid;place-items:center}
.menu-open .mmask{opacity:1;pointer-events:auto}.menu-open .mnav{transform:translateX(0)}

/* Hero */
.hero{position:relative;height:100vh;min-height:520px;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.25),rgba(0,0,0,.3))}
.hero .copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:0 24px}
.hero h1{font-size:clamp(34px,6vw,72px);line-height:1.2;letter-spacing:.02em;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero .kicker{color:#e5e7eb;font-size:clamp(14px,2.2vw,16px)}
.hero-sub{color:#e5e7eb;max-width:720px;margin-inline:auto}

/* Sections */
.section{padding:80px 0}
.figgrid{display:grid;gap:40px;grid-template-columns:1.2fr .8fr;align-items:center}
.figgrid figure{margin:0}.figgrid img{border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.12)}
@media (max-width:960px){.figgrid{grid-template-columns:1fr}}

.feature-lead{font-size:17px}
.feature-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feature-title{font-size:16px}
.feature-list{margin:.5rem 0 0 1rem; padding-left: 0;}
.feature-list li { list-style-type: disc; margin-left: 20px;}

/* CF */
.cf{padding:60px 20px}
.cf .grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.cf .box{background:#f3f4f6;border-radius:10px;padding:14px;text-align:center}
.cf .val{font-size:28px;font-weight:700}
.progress{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-top:6px}
.progress>i{display:block;height:100%;width:0;background:var(--pink)}
.cf .meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px}
.cf-now{font-weight:700}
.btn{background:#111;color:#fff;border-radius:999px;padding:14px 22px;font-weight:700; border: 1px solid #111; transition: all .2s;}
.btn:hover { background: #fff; color: #111;}
.btn.centered{display:block;width:fit-content;margin:14px auto 0}
@media (max-width:680px){.cf .grid{grid-template-columns:repeat(2,1fr)}}

/* Philosophy */
.philo{background:#fff}
.acc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.acc .head{text-align:center}
.acc .title{font-size:22px}
.principle{font-size:24px;margin-top:6px}
.acc .plus{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid #d1d5db;border-radius:999px;font-size:22px;margin:14px auto 0;transition:transform .25s}
.acc .panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,0,1),opacity .45s cubic-bezier(.2,.7,0,1),padding .45s cubic-bezier(.2,.7,0,1)}
.acc.open .panel{max-height:1200px;opacity:1;padding-top:18px}
.acc.open .plus{transform:rotate(45deg)}
.panel-body{max-width:840px;margin-inline:auto}
.pillars{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.pillar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
@media (max-width:680px){.pillars{grid-template-columns:1fr}}

/* ===================================
   Models Section (フルワイド & スライダー)
=================================== */
#models{
  --models-bg:#f9fafb;                 /* 帯色を一元管理 */
  background:var(--models-bg);
  box-shadow:0 0 0 100vmax var(--models-bg);
  clip-path:inset(0 -100vmax);
}
#models.section{padding-left:0;padding-right:0}

/* MODELSコンテナを全幅に拡張 */
#modelsContainer{width:100%;max-width:none;margin-inline:0}

/* 3人以下グリッド */
.models-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
  padding-inline:5vw; /* 端に少し余白 */
}
@media (max-width:1024px){.models-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.models-grid{grid-template-columns:1fr}}

/* 4人以上Swiper */
.models-swiper{
  overflow:visible;
  padding-inline:clamp(16px,4vw,48px); /* 両サイドのガター */
  --swiper-navigation-color:var(--pink); /* 矢印を “AI” と同色へ */
}
.models-swiper .swiper-slide{
  transition:transform .4s ease,opacity .4s ease;
  opacity:.4;transform:scale(.85);
}
.models-swiper .swiper-slide-active,
.models-swiper .swiper-slide-next,
.models-swiper .swiper-slide-prev{
  opacity:1;transform:scale(1);
}
.models-swiper .swiper-button-next,
.models-swiper .swiper-button-prev{
  color:var(--pink);
  transform:translateY(-4px);
}
.models-swiper .swiper-button-next{right:24px}
.models-swiper .swiper-button-prev{left:24px}
.models-swiper .swiper-button-disabled{opacity:.35}
.models-swiper .swiper-button-next:hover,
.models-swiper .swiper-button-prev:hover{
  filter:drop-shadow(0 2px 6px rgba(236,72,153,.35));
}

/* カード＆フリップ */
#modelsContainer .card{aspect-ratio:4/5;position:relative;border-radius:16px;overflow:hidden;background:#ddd}
#modelsContainer .cover{width:100%;height:100%;object-fit:cover}
#modelsContainer .flip{position:relative;perspective:1400px;height:100%}
#modelsContainer .wrap3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.7,0,1)}
#modelsContainer .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#modelsContainer .front{transform:rotateY(0deg) translateZ(0.01px)}
#modelsContainer .back{transform:rotateY(180deg) translateZ(0.01px);background:rgba(255,255,255,.96)}
#modelsContainer .flip.open .wrap3d{transform:rotateY(180deg)}
#modelsContainer .card .meta{position:absolute;inset-inline:0;inset-block-end:0;color:#fff;display:flex;justify-content:space-between;align-items:end;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
#modelsContainer .meta-sub{color:#e5e7eb}
#modelsContainer .card .openbtn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);color:#fff;font-size:22px}
#modelsContainer .card .close{position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid #d1d5db;border-radius:999px;font-size:22px;display:grid;place-items:center;background:#fff;z-index:2}
#modelsContainer .back-inner{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;overflow-y:auto}
#modelsContainer .profile.grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
@media (max-width:680px){#modelsContainer .profile.grid{grid-template-columns:1fr}}
#modelsContainer .profile .carded{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
#modelsContainer .profile .carded h5{font-family:"Noto Serif JP",serif;font-size:15px;margin:0 0 6px}
#modelsContainer .profile .carded p{margin:0;font-size:13px;color:#444}
#modelsContainer .streams .pill{display:inline-block;color:#fff;font-size:12px;padding:8px 10px;border-radius:999px;font-weight:600;margin:8px 8px 0 0}
#modelsContainer .yt{margin-top:12px}
#modelsContainer .yt iframe{border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
#modelsContainer .flip .back{pointer-events:none}
#modelsContainer .flip.open .back{pointer-events:auto}
#modelsContainer .flip.open .front{pointer-events:none}
#modelsContainer .card .meta{pointer-events:none}
#modelsContainer .card .openbtn,#modelsContainer .card .close{pointer-events:auto;z-index:5}

/* Gallery Styles */
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.gallery-item{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;position:relative;transition:transform .2s}
.gallery-item:hover{transform:scale(1.05)}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover}
.gallery-item.video-item{background-color:#000;display:flex;justify-content:center;align-items:center}
.gallery-item .play-icon{position:absolute;font-size:30px;color:#fff;background-color:rgba(0,0,0,.3);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;pointer-events:none}
@media (max-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}

/* Lightbox Styles */
.lightbox{position:fixed;inset:0;background-color:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;z-index:1000}
.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;justify-content:center;align-items:center}
.lightbox-content img,.lightbox-content video{max-width:100%;max-height:100%;display:block;box-shadow:0 0 50px rgba(0,0,0,0.5)}
.lightbox-close{position:absolute;top:20px;right:30px;font-size:40px;color:#fff;background:none;border:none;cursor:pointer}

/* Services */
.services .grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.svc-item{border-top:1px solid var(--line);padding:20px 0}
.svc-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;cursor:pointer}
.svc-left{display:flex;gap:10px;align-items:flex-start}
.svc-icon{width:24px;height:24px;flex:0 0 24px}
.svc-title{font-family:"Noto Serif JP",serif;font-size:18px}
.svc-toggle{font-size:22px;transition:transform .25s}
.svc-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,0,1),opacity .45s cubic-bezier(.2,.7,0,1),padding .45s cubic-bezier(.2,.7,0,1)}
.svc-item.open .svc-panel{max-height:800px;opacity:1;padding-top:12px}
.svc-item.open .svc-toggle{transform:rotate(45deg)}
@media (max-width:860px){.services .grid{grid-template-columns:1fr}}

/* News */
.newslist{border-top:1px solid var(--line)}
.news{padding:16px 0;border-bottom:1px solid var(--line)}
.news-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;width:100%}
.news-date{width:88px;color:var(--muted)}
.news-main{flex:1}
.badges{display:flex;gap:6px}
.badge{color:#fff;font-size:11px;letter-spacing:.08em;padding:4px 8px;border-radius:999px;display:inline-block}
.badge.press{background:var(--cat-press)}.badge.music{background:var(--cat-music)}.badge.project{background:var(--cat-proj)}
.news-title{font-family:"Noto Serif JP",serif;font-size:16px;margin-top:0;text-align:left}
.news-toggle{font-size:20px;transition:transform .25s}
.news-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s cubic-bezier(.2,.7,0,1),opacity .35s cubic-bezier(.2,.7,0,1),padding .35s cubic-bezier(.2,.7,0,1)}
.news.open .news-panel{max-height:600px;opacity:1;padding-top:10px}
.news.open .news-toggle{transform:rotate(45deg)}

/* Contact Form */
.form{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:960px;margin-left:auto;margin-right:auto;padding:0 20px}
.form .row{width:calc(50% - 10px);display:flex;flex-direction:column;margin-bottom:20px}
.form .row.wide{width:100%}
.form .row.radio-group{flex-direction:row;align-items:center;gap:20px}
.form label.small,.form span.small{margin-bottom:8px;color:var(--muted);font-size:13px}
.form .input,.form .textarea{padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px;width:100%}
.form .radio{display:inline-flex;align-items:center;gap:6px}
.form .textarea{min-height:140px}

/* Footer & modal */
.footer{border-top:1px solid var(--line);padding:34px 0;color:#6b7280;font-size:14px}
.fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.fnav{display:flex;gap:28px;flex-wrap:wrap}
.fcopy{width:100%;margin-top:20px}
@media (max-width:760px){.fbar{flex-direction:column;align-items:flex-start}}

.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:70}
.modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-48%) scale(.98);transition:transform .25s,opacity .25s;z-index:71;background:#fff;border-radius:16px;box-shadow:0 40px 120px rgba(0,0,0,.2);width:min(680px,92vw)}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal .body{padding:16px;max-height:70vh;overflow:auto}
.modal .x{width:36px;height:36px;border:1px solid #d1d5db;border-radius:999px;display:grid;place-items:center}
.modal-open .modal-mask{opacity:1;pointer-events:auto}
.modal-open .modal{opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal:not([aria-hidden="false"]){display:none !important}

/* ===== Particle Effect Style ===== */
#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background-color:#ffffff}

/* CF Supporters Style */
.cf .meta{align-items:center}
.cf-supporters .val{font-size:22px;font-weight:700;line-height:1.2}

/* ===== Social Icons in Footer ===== */
.social-icons{display:flex;gap:16px;align-items:center}
.social-icons a{color:var(--muted);transition:color .2s}
.social-icons a:hover{color:var(--ink)}

/* 横スクロール抑止（古いブラウザ用の後方互換も含む） */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* モバイルの Swiper はみ出し防止（チラ見せ不要ならhiddenが安全） */
@media (max-width: 860px) {
  .models-swiper { 
    overflow: hidden !important;
    padding-inline: 16px;         /* 端に少し余白も確保 */
  }
}

/* 禁則: この中は改行させない */
.nowrap{ white-space: nowrap; }

/* 重なりテキストの箱を広げる＆禁則を強める */
@media (min-width: 768px){
  .media-with-text{ gap: 40px; }
  .video-message{
    /* できる限り広く（画面に応じて最大値で制御） */
    width: min(56vw, 780px);
    max-width: 780px;
    flex: 2.6;
    right: 80px;       /* 重なり具合は維持しつつ余裕を持たせる */
  }
  .video-message h4{
    line-break: strict;   /* 和文の禁則処理を強める */
    word-break: keep-all; /* なるべく文字の途中で折り返さない */
  }
}

/* ===== Q&A Section ===== */
.qa-list {
  max-width: 960px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.qa-item {
  border-bottom: 1px solid var(--line);
}
.qa-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
}
.qa-question span:first-child {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  padding-right: 16px;
  line-height: 1.6;
}
.qa-question .icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.qa-question .icon::before,
.qa-question .icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: var(--ink);
  transform: translate(-50%, -50%);
}
.qa-question .icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.qa-item.open .qa-question .icon {
  transform: rotate(135deg);
}
.qa-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  color: var(--muted);
  font-size: 15px;
}
.qa-answer p {
  padding: 0 8px 24px 8px;
  margin: 0;
  line-height: 1.8;
}