/*
Theme Name: KAT WORLD Recruit
Theme URI: https://katworld-recruit.com
Author: KAT WORLD
Description: KAT WORLD株式会社 採用サイト専用テーマ。モック第5版準拠。
Version: 2.1.0
License: GPL-2.0-or-later
Text Domain: katworld-recruit
*/

/* セルフホストフォント */
@import url('assets/css/fonts.css');

:root{--ink:#231815;--cy:#00ACCB;--pk:#EA5289;--pu:#7381C2;--gr:#00A27A;--ye:#E9E000;--co:#EB7A5A;--line:#E6E8EC;--bg:#EEF0F3}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;background:var(--bg);
 background-image:linear-gradient(#dfe2e6 1px,transparent 1px),linear-gradient(90deg,#dfe2e6 1px,transparent 1px);background-size:40px 40px}
a{color:inherit}
h1,h2,h3,h4,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img{max-width:100%;height:auto;vertical-align:middle}
button{font-family:inherit}
svg{display:block}

/* ===== 日本語の改行制御 =====
   .jp: 日本語本文用。BudouX が <wbr> を挿入する前提で、連続英数字だけ折り返しを許可。
   .nw: 文節内で絶対に改行させない固まり（人名・社名・役職・数字+単位など）。 */
.jp{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.nw{white-space:nowrap}

.dela{font-family:'Dela Gothic One',sans-serif;font-weight:400}
.mono{font-family:'JetBrains Mono',monospace}

/* ===== 3列レイアウト ===== */
.side{position:fixed;top:0;bottom:0;width:calc((100vw - 720px)/2);display:flex;flex-direction:column;justify-content:center;padding:32px;z-index:1}
.side.l{left:0;align-items:center}
.side.r{right:0;align-items:flex-start;padding-left:56px}
.main{width:720px;margin:0 auto;background:#fff;background-image:linear-gradient(#f1f3f5 1px,transparent 1px),linear-gradient(90deg,#f1f3f5 1px,transparent 1px);background-size:28px 28px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);min-height:100vh}
@media(max-width:1180px){.side{display:none}.main{width:100%;max-width:720px}}
@media(max-width:720px){.main{border:0}}

/* ===== 左看板 ===== */
.brand{background:var(--ink);border-radius:18px;padding:18px 28px;box-shadow:0 0 0 3px var(--ye)}
.brand img{height:64px;display:block;filter:brightness(0) invert(1)}
.lcopy{margin:28px 0 0;text-align:right;font-weight:900;font-size:24px;line-height:1.6}
.lcopy em{font-style:normal;color:var(--pk)}
.lchars{display:flex;gap:2px;margin-top:18px}
.lchars img{width:58px;animation:bob 2.4s ease-in-out infinite}
.lchars img:nth-child(2){animation-delay:.3s}.lchars img:nth-child(3){animation-delay:.6s}.lchars img:nth-child(4){animation-delay:.9s}.lchars img:nth-child(5){animation-delay:1.2s}.lchars img:nth-child(6){animation-delay:1.5s}
.cta{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;width:100%;max-width:420px;min-height:84px;border-radius:999px;color:#fff;text-decoration:none;font-weight:900;font-size:22px;
 background:linear-gradient(90deg,var(--pk),#F07A3A);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--pk),0 10px 24px rgba(234,82,137,.35);transition:transform .2s}
.cta small{display:block;font-size:13px}
.cta i{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--pk);display:grid;place-items:center;font-style:normal;font-weight:900}
.cta:hover{transform:translateY(-3px)}

/* ===== 右目次 ===== */
.idx h4{margin:0 0 20px;font-family:'Zen Kaku Gothic New';font-weight:900;font-style:italic;font-size:40px;letter-spacing:.02em}
.idx a{display:flex;gap:18px;align-items:baseline;padding:13px 0;text-decoration:none;font-weight:700;font-size:17px;color:#5E5552;transition:color .2s;word-break:keep-all}
.idx a span{font-family:'JetBrains Mono';font-size:13px}
.idx a.on{color:var(--ink);font-weight:900}.idx a.on span{color:var(--pk)}

/* ===== セクション ===== */
section{padding:88px 28px;border-bottom:2px solid var(--ink)}
.eyebrow{display:block;text-align:center;font-family:'JetBrains Mono';font-weight:700;font-size:13px;letter-spacing:.12em}
/* 黒帯見出し: 画面幅に応じてclamp、改行は文節で制御 */
.band{display:table;margin:10px auto 0;background:var(--ink);color:#fff;padding:10px 22px;font-family:'Dela Gothic One';font-size:clamp(22px, 5.6vw, 34px);line-height:1.35;text-align:center;word-break:keep-all;overflow-wrap:break-word;max-width:100%}
.band+.band{margin-top:8px}
.band .y{color:var(--ye)}
.lead{text-align:center;font-weight:700;font-size:17px;line-height:1.9;margin:24px 0 0;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.fade{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.fade.in{opacity:1;transform:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== ヒーロー ===== */
.hero{text-align:center;padding-top:64px;position:relative;overflow:hidden}
.hero .stripe{display:flex;height:8px;position:absolute;top:0;left:0;right:0}.stripe i{flex:1}
.hero h1{margin:16px 0 0;font-family:'Dela Gothic One';font-weight:400;font-size:clamp(26px, 6.2vw, 44px);line-height:1.4;word-break:keep-all;overflow-wrap:break-word;line-break:strict;padding:0 6px}
.hero h1 .mk{background:var(--ye);padding:0 8px;border-radius:6px}
.term{max-width:520px;margin:32px auto 0;background:var(--ink);border-radius:14px;text-align:left;color:#fff;font-family:'JetBrains Mono';font-size:15px;box-shadow:0 14px 30px rgba(35,24,21,.25)}
.term .bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #4A3F3C}.term .bar i{width:11px;height:11px;border-radius:50%}
.term .body{padding:16px 20px;line-height:1.9;min-height:118px}
.caret{display:inline-block;width:8px;height:16px;background:var(--ye);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.heroChars{display:flex;justify-content:center;gap:0;margin-top:36px}
.heroChars img{width:15%;animation:bob 2.4s ease-in-out infinite}
.heroChars img:nth-child(even){animation-delay:.6s}
.btns{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:420px;min-height:66px;border-radius:999px;text-decoration:none;font-weight:900;font-size:18px;transition:transform .2s;word-break:keep-all}
.btn:hover{transform:translateY(-3px)}
.btn.line{background:#06C755;color:#fff;box-shadow:0 8px 18px rgba(6,199,85,.3)}
.btn.main{background:linear-gradient(90deg,var(--pk),#F07A3A);color:#fff;box-shadow:0 8px 18px rgba(234,82,137,.3)}

/* ===== カルーセル ===== */
.car{position:relative;margin-top:44px}
.track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px calc(50% - 150px);scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 300px;scroll-snap-align:center;border-radius:22px;overflow:hidden;border:3px solid var(--ink);background:#fff;transform:scale(.88);opacity:.75;transition:transform .35s,opacity .35s,box-shadow .35s}
.card.act{transform:scale(1);opacity:1;box-shadow:0 18px 34px rgba(35,24,21,.22)}
.card .top{padding:22px 16px 0;text-align:center;color:#fff;font-weight:900;font-size:26px;height:360px;display:flex;flex-direction:column;align-items:center;word-break:keep-all}
.card .top img{width:200px;margin-top:8px;animation:bob 2.6s ease-in-out infinite}
.card .bot{padding:16px 16px 20px;text-align:center;border-top:3px solid var(--ink)}
.card .bot .en{font-weight:900;font-style:italic;color:#5E5552;font-size:15px}
.card .bot .jp{margin-top:6px;font-weight:900;font-size:18px;word-break:keep-all}
.card .foot{height:10px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.dots i{width:12px;height:12px;border-radius:999px;background:#C9CDD3;transition:width .3s,background .3s}
.dots i.on{width:40px;background:var(--ink)}

/* ===== 数字カード ===== */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.stat{background:#fff;border:2px solid var(--ink);border-top-width:8px;border-radius:3px;padding:20px;text-align:center;word-break:keep-all}
.stat p{margin:0;font-weight:700;font-size:14px}.stat b{display:block;font-family:'Dela Gothic One';font-weight:400;font-size:42px;margin-top:4px;white-space:nowrap}.stat b small{font-size:18px}

/* ===== 理由 ===== */
.reason{margin-top:56px;background:#fff;border:2px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 8px 0 var(--ink)}
.reason .hd{padding:22px 24px;color:#fff}
.reason .hd .no{font-family:'JetBrains Mono';font-weight:700;font-size:13px}.reason .hd .no b{font-family:'Dela Gothic One';font-weight:400;font-size:40px;margin-left:6px}
.reason .hd p{margin:4px 0 0;font-weight:700;font-size:15px;word-break:keep-all}
.reason .bd{padding:22px 24px}
.reason h3{margin:0;font-size:24px;font-weight:900;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}.reason h3 .mk{background:var(--ye);padding:0 4px;border-radius:4px}
.reason .tx{margin:14px 0 0;font-size:15px;line-height:1.9;word-break:keep-all;overflow-wrap:break-word}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.chips span{border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;background:#fff;white-space:nowrap}

/* ===== 風土 ===== */
.cul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.cul>div{background:#fff;border:2px solid var(--ink);border-top-width:8px;border-radius:3px;padding:20px 22px}
.cul b{font-family:'Dela Gothic One';font-weight:400;font-size:30px}.cul h4{margin:6px 0 0;font-size:16px;font-weight:900;line-height:1.6;word-break:keep-all;overflow-wrap:break-word}

/* ===== 代表メッセージ ===== */
.msg{background:var(--ink);color:#fff}.msg .band{background:var(--ye);color:var(--ink)}
.msg .photo{margin:36px auto 0;width:360px;max-width:calc(100% - 16px);aspect-ratio:4/5;border-radius:22px;border:3px dashed var(--pu);overflow:hidden;position:relative;display:grid;place-items:center;font-weight:700;color:#fff}
.msg .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.msg .lead{max-width:560px;margin-left:auto;margin-right:auto}
.msg .body{max-width:560px;margin:24px auto 0;font-weight:500;color:#E5E0DE;font-size:16px;line-height:1.95;text-align:left;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.msg .body p{margin:0 0 16px}
.msg .sign{text-align:center;margin-top:24px;font-weight:700;word-break:keep-all}

/* ===== 先輩の声 ===== */
.voice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.vc{background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column;transition:transform .2s}
.vc:hover{transform:translateY(-4px)}
.vc .ph{aspect-ratio:4/3;border-bottom:2px solid var(--ink);overflow:hidden;position:relative;display:grid;place-items:center;font-weight:700;font-size:13px}
.vc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc .in{padding:16px;display:flex;flex-direction:column;flex:1}
.tag{align-self:flex-start;border-radius:999px;padding:3px 12px;font-family:'JetBrains Mono';font-weight:700;font-size:12px;color:#fff;white-space:nowrap}
.vc q{display:block;margin-top:10px;font-weight:900;font-size:15px;line-height:1.75;quotes:none;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.vc .nm{margin-top:12px;font-size:13px;color:#5E5552;word-break:keep-all}
.vc .more{margin-top:auto;padding-top:12px;font-weight:900;font-size:14px;text-decoration:none}

/* ===== 動画 ===== */
.movie{margin:36px auto 0;aspect-ratio:16/9;border-radius:20px;border:3px solid var(--ink);background:#000;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 8px 0 var(--ink);cursor:pointer;text-decoration:none}
.movie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:relative;width:84px;height:84px;border-radius:50%;background:var(--pk);display:grid;place-items:center;box-shadow:0 0 0 6px #fff}

/* ===== 求人 ===== */
.jobs{display:flex;flex-direction:column;gap:12px;margin-top:40px}
.job{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:16px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:16px 18px 16px 0;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .2s;color:var(--ink)}
.job:hover{transform:translateY(-3px)}
.job .c{height:100%;border-radius:0 6px 6px 0;min-height:52px}
.job b{font-size:17px;font-weight:900;word-break:keep-all}.job small{display:block;margin-top:4px;color:#5E5552;font-size:13px;font-weight:700;word-break:keep-all}
.job .pay{text-align:right;font-weight:900;font-size:15px;white-space:nowrap}.job .pay small{font-weight:700;white-space:nowrap}
.note{margin-top:16px;font-size:12px;line-height:1.8;color:#5E5552;word-break:keep-all;overflow-wrap:break-word}
.grad{margin-top:20px;background:#FFFDE0;border:2px solid var(--ink);border-radius:18px;padding:20px;word-break:keep-all;overflow-wrap:break-word}

/* ===== フロー ===== */
.flow{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-direction:column;gap:14px}
.flow li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:18px 20px;box-shadow:0 5px 0 var(--ink)}
.flow li b{font-family:'Dela Gothic One';font-weight:400;font-size:28px;min-width:46px}
.flow h4{margin:4px 0 0;font-size:18px;font-weight:900;word-break:keep-all}.flow p{margin:6px 0 0;font-size:14px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}

/* ===== FAQ ===== */
.faq{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:16px 20px}
.faq summary{font-weight:900;font-size:16px;cursor:pointer;list-style:none;word-break:keep-all;overflow-wrap:break-word;line-break:strict}.faq summary::-webkit-details-marker{display:none}
.faq summary b{color:var(--cy);margin-right:6px}
.faq p{margin:12px 0 0;font-size:15px;line-height:1.9;word-break:keep-all;overflow-wrap:break-word;line-break:strict}.faq p b{color:var(--pk);margin-right:6px}

/* ===== フォーム ===== */
form{margin-top:28px;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 0 var(--ink)}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
input,select,textarea{min-height:50px;border:2px solid var(--ink);border-radius:12px;padding:0 14px;font-size:16px;font-family:inherit;background:#fff}
textarea{padding:12px 14px;min-height:120px;resize:vertical}
input[type=file]{padding:12px;border-style:dashed;background:#F7F8FA}
.req{color:var(--pk);font-size:12px;margin-left:4px}
.opt{color:#5E5552;font-size:12px;margin-left:4px}
.notice{background:#FFFDE0;border:2px solid var(--ink);border-radius:16px;padding:20px;font-size:15px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
.errlist{background:#FEECEC;border:2px solid #C62828;border-radius:16px;padding:14px 20px;margin:0 0 14px}
.errlist p{margin:0;font-weight:900;color:#C62828}.errlist ul{margin:8px 0 0;padding-left:20px;color:#C62828;font-size:14px;list-style:disc}
.errmsg{color:#C62828;font-size:13px;font-weight:700;margin-top:4px}

/* ===== Honeypot ===== */
.kw-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===== パンくず ===== */
.crumbs{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;color:#5E5552;padding:18px 28px 0;word-break:keep-all}
.crumbs a{text-decoration:none;color:var(--ink)}.crumbs a:hover{color:#00788C}

/* ===== サブページ共通テーブル ===== */
.ktbl{width:100%;border-collapse:collapse;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff;margin-top:32px;box-shadow:0 5px 0 var(--ink)}
.ktbl th,.ktbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.9}
.ktbl tr:last-child th,.ktbl tr:last-child td{border-bottom:none}
.ktbl th{width:30%;background:#F7F8FA;font-weight:900;font-size:14px;border-right:1px solid var(--line);word-break:keep-all}
.ktbl td{font-size:15px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
@media(max-width:560px){.ktbl th,.ktbl td{display:block;width:100%;border-right:none}.ktbl th{border-bottom:none;padding-bottom:4px}}

/* ===== インタビュー詳細 ===== */
.ivbody{font-size:16px;line-height:1.95;margin-top:28px;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.ivbody h2,.ivbody h3{margin:28px 0 10px;font-weight:900}
.ivbody h2{font-size:22px;border-left:8px solid var(--pk);padding-left:14px}
.ivbody h3{font-size:18px;color:#00788C}
.ivbody p{margin:0 0 18px}
.ivbody img{border-radius:16px;margin:12px 0;box-shadow:0 5px 0 var(--ink);border:2px solid var(--ink);max-width:100%;height:auto}

/* ===== スキップリンク ===== */
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:16px;top:16px;padding:8px 16px;background:var(--ink);color:#fff;z-index:9999;border-radius:8px}

/* ===== フッター ===== */
footer{padding:40px 28px;text-align:center;background:#fff}
footer img{height:60px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:16px;font-size:13px}
footer nav a{text-decoration:none}

/* ===== モバイル調整 ===== */
@media(max-width:560px){
 section{padding:72px 18px}
 .stats,.cul,.voice{grid-template-columns:minmax(0,1fr)}
 .job{grid-template-columns:8px 1fr}.job .pay{grid-column:2;text-align:left;white-space:normal}
 .track{padding:20px calc(50% - 130px)}.card{flex-basis:260px}.card .top{height:320px}.card .top img{width:180px}
 .crumbs{padding:14px 18px 0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade{opacity:1;transform:none}}