/* C-LAXiS — 本番サイトで足したもの (デザインカンプ clx.css の上に重ねる) */
.foot-cols{grid-template-columns:1.6fr repeat(4,1fr)}
.mcard{display:block}
.member-hero a.slot{display:block}
.empty-note{padding:40px 0;color:var(--muted);font-size:15px}
.ph.empty .ph-ini{font-size:56px;font-weight:900;color:var(--muted-2);letter-spacing:-.04em}
.ph.empty{display:grid;place-items:center;background:var(--paper-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flash-list{padding-top:24px}
.flash{display:flex;gap:10px;align-items:center;padding:16px 20px;border-radius:14px;background:var(--acid-soft);font-weight:700;font-size:15px}
.flash .ico{width:18px;height:18px}
.nav-toggle,.nav .nav-sub{display:none}
[hidden]{display:none!important}
button.ctab{border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:600}
button.ctab.is-on{background:var(--ink)}
.cat-tabs .wrap{overflow-x:auto;scrollbar-width:none}
.member-list{padding:56px 0 130px}
.search-xl{cursor:text}
.search-xl .ico{width:24px;height:24px;flex:none}
.orbit .sat img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.orbit .sat .ph-ini{display:grid;place-items:center;width:100%;height:100%;background:var(--paper-2);color:var(--ink);font-weight:900;font-size:26px}
.mini-p .ph-ini{font-size:30px}
.cat-hero h1 .hl{color:var(--acid)}
a.skill{transition:transform .4s var(--ease)} a.skill:hover{transform:translateY(-4px)}
.bio-text p+p{margin-top:1.2em}
.feat-thread{color:var(--paper)}
.feat-thread .feat-img{width:100%;border-radius:20px;aspect-ratio:16/10;object-fit:cover}
.pager .pages a span{display:grid}
.news-body{font-size:16.5px;line-height:2;min-width:0}
.news-body p+p{margin-top:1.4em}
.news-img{width:100%;border-radius:24px;margin-bottom:40px}
.news-aside{position:sticky;top:110px;align-self:start}
.about-acts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.about-hero .marquee-track{width:max-content}
.area small.area-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);font-weight:500;margin-top:4px}
/* ---- 実際に送れるフォーム (カンプの .field .in を本物の入力欄に) ---- */
.field label,.field .flab{font-size:13px;font-weight:700;display:flex;gap:8px;align-items:center}
.field .req{font-size:10.5px;font-weight:700;color:#b5471c;background:var(--orange-soft);border-radius:999px;padding:2px 8px}
.field input[type=text],.field input[type=email],.field input[type=url],.field input[type=search],.field textarea,.field select{
  width:100%;min-height:58px;border-radius:14px;border:1px solid var(--line-2);background:var(--white);padding:14px 18px;font-size:15.5px;outline:0;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:180px;line-height:1.8;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--acid)}
.field.has-err input,.field.has-err textarea{border-color:#d0502a}
.err,.form-err{color:#c2410c;font-size:13px;font-weight:600;margin-top:4px}
.form-err{margin-bottom:18px;padding:12px 16px;border-radius:12px;background:var(--orange-soft)}
.chip-radios{margin-top:4px}
.chip-radio{position:relative;cursor:pointer}
.chip-radio input{position:absolute;opacity:0;pointer-events:none}
.chip-radio input:checked+.chip{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-radio input:focus-visible+.chip{box-shadow:0 0 0 3px var(--acid)}
.agree{cursor:pointer;position:relative}
.agree input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.agree i{background:var(--white);border:1.5px solid var(--line-2);color:transparent}
.agree input:checked+i{background:var(--ink);border-color:var(--ink);color:var(--acid)}
.agree input:focus-visible+i{box-shadow:0 0 0 3px var(--acid)}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.jsteps-3{grid-template-columns:repeat(3,1fr)}
.area-radio{position:relative;cursor:pointer;display:block}
.area-radio input{position:absolute;opacity:0;pointer-events:none}
.area-radio .ck{display:none}
.area-radio input:checked+.area{border-color:var(--ink);box-shadow:0 0 0 3px var(--acid)}
.area-radio input:checked+.area .ic{background:var(--acid)}
.area-radio input:checked+.area .ck{display:grid}
.area-radio input:focus-visible+.area{outline:2px solid var(--ink);outline-offset:3px}
.area-radios{grid-template-columns:repeat(2,1fr)}
.edit-grid-2{grid-template-columns:1fr 360px}
.app-bar .st-ok{color:#3a4a14;background:var(--acid-soft)}
.app-bar .st .dot{width:7px;height:7px;border-radius:50%;background:var(--acid-dark)}
.img-prev{border-style:solid}
.img-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.img-prev .lab{margin-top:0}
.hero-prev{width:100%;max-width:420px;border-radius:14px;margin-bottom:12px;aspect-ratio:16/9;object-fit:cover}
.field input[type=file]{font-size:14px}
.link-btn{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ==========================================================================
   スマホ・タブレット (カンプは PC 幅だけだったので、本番用に足す)
   ========================================================================== */
@media (max-width:1100px){
  :root{--wrap:min(1320px, 100% - 64px)}
  .site-head .wrap{gap:24px}
  .site-head .nav{display:none}
  .nav-toggle{display:grid;place-items:center;gap:5px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-dark-2);background:transparent;cursor:pointer;padding:0 11px}
  .nav-toggle span{display:block;width:18px;height:1.6px;background:var(--paper);transition:transform .3s var(--ease)}
  .site-head.nav-open .nav-toggle span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .site-head.nav-open .nav-toggle span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  .site-head.nav-open .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:78px;background:var(--ink);
    padding:8px 32px 28px;border-top:1px solid var(--line-dark);font-size:17px}
  .site-head.nav-open .nav a{padding:16px 0;border-bottom:1px solid var(--line-dark)}
  .site-head.nav-open .nav a::after{display:none}
  .site-head.nav-open .nav .nav-sub{display:block}
  .sec{padding:110px 0}
  .two-col,.ph-grid,.cat-hero-grid,.prof-grid,.bio,.def,.about-hero .row,.join-grid,.apply,.th-body,.consult,.done-grid,.edit-grid-2,.foot-top{grid-template-columns:1fr;gap:48px}
  .sec-head{grid-template-columns:1fr;gap:24px}
  .grid3,.skills,.steps3,.principles,.benefits,.jsteps,.jsteps-3{grid-template-columns:repeat(2,1fr)}
  .grid4,.mini-people,.prin4{grid-template-columns:repeat(2,1fr)}
  .bento .tile{grid-column:span 6}
  .bento .tile.big{grid-column:span 12}
  .krow{grid-template-columns:120px 1fr 120px 48px;gap:20px}
  .trow{grid-template-columns:90px 1fr 48px;gap:22px}
  .trow .m{display:none}
  .prof-photo{position:relative;top:0;max-width:440px}
  .orbit{margin:0 auto;transform:scale(.8);transform-origin:top center;height:450px}
  .c-side{padding:64px 32px}
  .c-form{padding:56px 32px 80px}
  .about-acts{justify-content:flex-start}
  .foot-top .actions{justify-content:flex-start}
  .foot-cols{grid-template-columns:1fr 1fr 1fr}
  .foot-cols>div:first-child{grid-column:1/-1}
  .fan{height:560px;max-width:620px}
  .news-aside,.preview{position:relative;top:0}
  .principles>div{padding:34px 28px 0 0}
  .benefits>div+div{border-left:0;padding-left:0}
  .benefits>div:nth-child(2n){padding-left:32px;border-left:1px solid var(--line-2)}
}
@media (max-width:760px){
  :root{--wrap:calc(100% - 32px)}
  body{font-size:15px}
  .site-head .wrap{height:64px;gap:12px}
  .site-head.nav-open .nav{top:64px;padding:4px 16px 24px}
  .cat-tabs{top:64px}
  .head-right{gap:10px}
  .head-right .hr-text,.head-right .head-search{display:none}
  .head-right .btn-sm{padding:8px 8px 8px 14px;font-size:12.5px}
  .sec{padding:80px 0}
  .page-hero{padding:56px 0 44px}
  .sec-head{margin-bottom:44px}
  .lead{font-size:16px}
  .display-m{font-size:clamp(34px,9vw,44px)}
  .title{font-size:clamp(28px,8vw,36px)}
  .grid3,.grid4,.skills,.steps3,.principles,.benefits,.jsteps,.jsteps-3,.prin4,.mini-people,.area-grid,.area-radios,.fields,.join-cards{grid-template-columns:1fr}
  .benefits>div,.benefits>div:nth-child(2n){padding:32px 0 0;border-left:0}
  .bento .tile,.bento .tile.big{grid-column:span 12;min-height:0}
  .tile{padding:26px}
  .krow{grid-template-columns:1fr 40px;gap:8px 16px;padding:24px 4px}
  .krow .k-cat{grid-column:1/-1}
  .krow .k-meta{grid-column:1;grid-row:3}
  .krow .k-go{grid-column:2;grid-row:2/4}
  .krow h3{font-size:19px}
  .trow{grid-template-columns:64px 1fr;gap:16px}
  .trow .go{display:none}
  .trow .date b{font-size:32px}
  .trow h3{font-size:18px}
  .search-xl{padding:6px 14px;gap:10px;border-radius:16px}
  .search-xl input{font-size:16px}
  .help-band,.feat-thread{flex-direction:column;align-items:flex-start;padding:32px 24px;grid-template-columns:1fr;gap:24px}
  .help-band h3,.feat-thread h2{font-size:24px}
  .stat-row{gap:28px}
  .stat-row b{font-size:34px}
  .prof-name h1{font-size:56px}
  .prof-head{font-size:22px}
  .prof-acts{flex-wrap:wrap}
  .facts{grid-template-columns:1fr 1fr;row-gap:22px}
  .cat-hero{padding:56px 0 70px}
  .cat-hero h1{font-size:clamp(52px,15vw,80px)}
  .orbit{display:none}
  .cat-next{grid-template-columns:1fr}
  .cat-next a+a{border-left:0;border-top:1px solid var(--line-2);align-items:flex-start;text-align:left}
  .cat-next a{padding:36px 0}
  .cat-next b{font-size:28px}
  .big-quote{font-size:clamp(36px,10vw,56px)}
  .principles{margin-top:56px}
  .qmark{font-size:120px;height:56px}
  .cta-band{padding:90px 0}
  .cta-grid{grid-template-columns:1fr}
  .cta-band h2{font-size:clamp(34px,10vw,52px)}
  .cta-band .bg-word{font-size:160px}
  .cta-btns,.prof-acts,.about-acts,.foot-top .actions{flex-wrap:wrap}
  .badge-rot{width:150px;height:150px}
  .badge-rot .core{inset:38px}
  .foot-top h2{font-size:34px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
  .foot-word{font-size:clamp(64px,22vw,110px)}
  .foot-meta{flex-direction:column;gap:8px}
  .about-hero{padding-top:72px}
  .about-hero h1{font-size:clamp(44px,13vw,70px)}
  .about-hero .row{padding-bottom:64px;margin-top:40px}
  .def .word{font-size:60px}
  .def p.big{font-size:24px}
  .prin{min-height:0}
  .jcard{padding:34px 26px;min-height:0}
  .jcard h3{font-size:30px}
  .join-hero{padding:56px 0 70px}
  .join-hero .display-m{font-size:clamp(34px,9vw,44px)}
  .fan{height:420px;transform:scale(.62);transform-origin:top left;width:160%}
  .jstep{min-height:0}
  .apply{padding:32px 22px;gap:28px}
  .submit-row{flex-direction:column;align-items:flex-start;gap:20px}
  .c-side h1{font-size:36px}
  .c-side,.c-form{padding-inline:16px}
  .th-hero h1{font-size:clamp(30px,8vw,46px)}
  .done-hero h1{font-size:44px}
  .done-hero p{font-size:16px}
  .receipt{flex-wrap:wrap;justify-content:center;gap:10px}
  .after-note{flex-direction:column;align-items:flex-start}
  .upload{grid-template-columns:1fr}
  .drop.img-prev{max-width:240px}
  .app-bar .wrap{height:auto;padding:18px 0;flex-wrap:wrap}
  .app-bar h1{font-size:20px}
}
@media (max-width:760px){
  /* トップのファーストビュー: 人物は画像の右側にいるので、右寄りで切り抜く。名前は単語の途中で折らない */
  .hero-slide{object-position:74% top!important}
  #hero-headline-name{font-size:clamp(40px,12.5vw,64px)!important;max-width:100%!important;overflow-wrap:normal!important;word-break:keep-all}
  #home .vertical-rl{display:none}
  #home h1, #home #hero-headline-jp{text-shadow:0 0 18px rgba(255,255,255,.85)}
  #home[data-tone="dark"] h1, #home[data-tone="dark"] #hero-headline-jp{text-shadow:0 0 18px rgba(0,0,0,.6)}
}
@media (max-width:760px){
  /* 縦に並ぶので、大きな画像はクリエイター側も上に置く */
  .mrow-creator .member-hero{order:-1}
  .mrow{margin-top:40px}
  .member-hero{max-width:none;aspect-ratio:4/4.2}
}
.field-note{font-size:13px;color:var(--muted);margin-top:10px}.field-note a{text-decoration:underline;text-underline-offset:3px}

/* カテゴリのタブは PC では折り返して全部見せる (スマホは横スクロール) */
@media (min-width:761px){
  .cat-tabs .wrap{flex-wrap:wrap;height:auto;padding:12px 0;gap:6px 4px}
  .cat-tabs .ctab{padding:0 14px;gap:8px}
}
/* CREATOR の段は大きな画像が右なので、見出しも右に寄せる */
.mrow-head-r{justify-content:flex-end}
@media (max-width:900px){.mrow-head-r{justify-content:flex-start}}
/* ---- About: 名前に込めた想い / C-LAXiSとは ---- */
.def-about{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:0}
.def-about .def-name{padding-right:56px}
.def-about .def-body{padding-left:56px;border-left:1px solid var(--line-2)}
.def-about .word{font-size:104px}
.def-about p.big{font-size:clamp(34px,3.3vw,50px);line-height:1.45}
.def-about .word-en{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.2em;font-weight:500;margin-top:14px;white-space:nowrap}
.def-about .word small{margin-top:16px}
.def-h{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:56px 0 12px}
.def-body .def-h{margin-top:44px}
.def-about p:not(.big){font-size:15.5px;line-height:1.95;color:var(--muted)}
.def-about p+p{margin-top:20px}
.name-words{margin:18px 0 22px;display:grid;gap:8px}
.name-words div{display:grid;grid-template-columns:150px 1fr;align-items:center}
.name-words dt{font-size:19px;font-weight:800;letter-spacing:-.01em}
.name-words dd{font-size:15px;color:var(--muted);padding-left:22px;border-left:1px solid var(--line-2)}
@media (max-width:1100px){
  .def-about{grid-template-columns:1fr;gap:56px}
  .def-about .def-name{padding-right:0}
  .def-about .def-body{padding-left:0;border-left:0;padding-top:56px;border-top:1px solid var(--line-2)}
}
@media (max-width:760px){
  .def-about .word{font-size:60px}
  .def-about p.big{font-size:26px}
  .def-about .word-en{font-size:11px;letter-spacing:.12em;white-space:normal}
  .name-words div{grid-template-columns:118px 1fr}
  .name-words dt{font-size:17px}
  .def-about p:not(.big) br{display:none}
}