:root{
  --navy:#0d2a4d;
  --navy-light:#16406f;
  --gold:#c9a14f;
  --yellow:#f5b62e;
  --red:#c0392b;
  --gray:#f5f7fa;
  --text:#222;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;color:var(--text);line-height:1.8;background:#fff;}
img{max-width:100%;}

/* ===== Top bar ===== */
.topbar{background:var(--navy);color:#fff;font-size:.82rem;}
.topbar-inner{max-width:1150px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:5px 16px;flex-wrap:wrap;gap:6px;}
.topbar a{color:#fff;text-decoration:none;font-weight:700;}
.topbar .tb-tel{font-size:1.05rem;letter-spacing:.05em;}
.topbar .tb-tel small{font-size:.75rem;font-weight:400;margin-left:8px;opacity:.85;}

/* ===== Header ===== */
header.site{position:sticky;top:0;background:rgba(255,255,255,.98);box-shadow:0 1px 8px rgba(0,0,0,.1);z-index:100;}
.header-inner{max-width:1150px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:14px;flex-wrap:nowrap;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo img{height:48px;width:auto;display:block;}
.logo .name{font-family:"Avenir Next","Futura","Helvetica Neue",sans-serif;font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:.08em;font-style:italic;white-space:nowrap;}
.logo .name .corp{font-size:.9rem;font-weight:700;margin-right:5px;font-style:normal;}
.brand-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;min-width:0;}
@media(max-width:1180px) and (min-width:761px){
  .yt-thumb{display:none;}
  .logo .name{font-size:1.15rem;}
  .yt-btn{font-size:.68rem;padding:6px 10px;}
}
.yt-btn{display:flex;align-items:center;gap:9px;background:#e62117;color:#fff;text-decoration:none;font-size:.76rem;font-weight:700;padding:7px 14px;border-radius:7px;line-height:1.4;transition:.2s;}
.yt-btn:hover{opacity:.85;}
.yt-btn .yt-icon{background:#fff;color:#e62117;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;}
.yt-thumb{height:54px;width:auto;display:block;border-radius:6px;border:2px solid var(--navy);transition:.2s;}
.yt-thumb:hover{opacity:.8;}
.header-cta{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex-shrink:0;}
.cta-btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.78rem;padding:8px 11px;border-radius:5px;line-height:1.4;text-align:center;transition:.2s;white-space:nowrap;flex-shrink:0;}
.cta-btn:hover{opacity:.85;}
.cta-personal{background:var(--yellow);color:#403000;}
.cta-corporate{background:var(--navy);color:#fff;}
.cta-recruit{background:var(--red);color:#fff;}

/* ===== Global nav ===== */
.gnav{background:var(--navy);}
.gnav ul{max-width:1150px;margin:0 auto;display:flex;list-style:none;flex-wrap:nowrap;justify-content:center;overflow-x:auto;scrollbar-width:none;}
.gnav ul::-webkit-scrollbar{display:none;}
.gnav a{display:block;color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:11px 12px;border-right:1px solid rgba(255,255,255,.15);white-space:nowrap;}
.gnav li:first-child a{border-left:1px solid rgba(255,255,255,.15);}
.gnav a:hover,.gnav a.current{background:var(--navy-light);color:var(--gold);}

/* ===== Hero ===== */
.hero{background:linear-gradient(rgba(13,42,77,.35),rgba(9,29,54,.45)),url("images/hero_bg.jpg") center/cover no-repeat;color:#fff;padding:48px 20px 56px;}
.hero-text h1,.hero-text p{text-shadow:0 2px 8px rgba(0,0,0,.55);}
.hero-inner{max-width:1150px;margin:0 auto;display:flex;align-items:flex-start;gap:50px;flex-wrap:wrap;justify-content:center;}
.hero-text{padding-top:8px;}
.hero-text{flex:1 1 420px;min-width:300px;}
.hero h1{font-size:2.1rem;letter-spacing:.06em;margin-bottom:14px;font-weight:800;line-height:1.5;}
.hero h1 .em{color:var(--yellow);}
.hero p{font-size:1.02rem;opacity:.94;margin-bottom:26px;}
.badges{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap;}
.badge{width:108px;height:108px;border-radius:50%;background:#fff;color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:.74rem;line-height:1.35;border:3px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.3);}
.badge strong{font-size:1.02rem;color:var(--red);}
.hero .cta{display:inline-block;background:var(--yellow);color:#403000;text-decoration:none;font-weight:800;padding:15px 42px;border-radius:5px;letter-spacing:.08em;font-size:1.05rem;box-shadow:0 4px 0 #c08f1d;transition:.15s;}
.hero .cta:hover{transform:translateY(2px);box-shadow:0 2px 0 #c08f1d;}
.hero-img{flex:0 1 400px;min-width:280px;}
.hero-img img{width:100%;display:block;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.45);border:4px solid #fff;}
.hero-img .caption{text-align:center;font-size:.85rem;opacity:.9;margin-top:10px;}

/* ===== Sections ===== */
section{padding:72px 20px;}
.inner{max-width:1150px;margin:0 auto;}
.sec-title{text-align:center;margin-bottom:48px;}
.sec-title h2{font-size:1.85rem;color:var(--navy);letter-spacing:.08em;}
.sec-title .en{display:block;color:var(--gold);font-size:.85rem;letter-spacing:.25em;margin-top:4px;font-weight:700;}
.sec-title .lead{margin-top:10px;color:#555;font-size:.95rem;}

/* services */
.services{background:var(--gray);}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.card{background:#fff;border-top:4px solid var(--navy);border-radius:6px;padding:30px 26px;box-shadow:0 2px 10px rgba(0,0,0,.07);}
.card h3{color:var(--navy);font-size:1.15rem;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.card .icon{font-size:1.5rem;}
.card p{font-size:.93rem;color:#444;}

.photo-btn{display:inline-block;margin-top:14px;color:var(--navy);border:2px solid var(--navy);text-decoration:none;font-weight:700;font-size:.85rem;padding:7px 18px;border-radius:99px;transition:.2s;}
.photo-btn:hover{background:var(--navy);color:#fff;}

/* works gallery */
.works-sec{margin-bottom:48px;scroll-margin-top:130px;}
section[id],.kindle-box[id]{scroll-margin-top:130px;}
.works-title{color:var(--navy);font-size:1.25rem;border-left:5px solid var(--gold);padding-left:12px;margin-bottom:16px;}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.works-ph{background:#f0f3f8;border:2px dashed #c9d2de;border-radius:8px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#8a95a5;font-weight:600;overflow:hidden;}
.works-ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* before/after */
.ba-row{display:flex;align-items:center;gap:12px;margin-bottom:26px;justify-content:center;}
.ba-item{position:relative;flex:0 1 300px;min-width:0;}
.ba-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.ba-label{position:absolute;top:0;left:50%;transform:translateX(-50%);background:rgba(35,35,35,.82);color:#fff;font-weight:800;padding:4px 26px;border-radius:0 0 10px 10px;font-size:.95rem;letter-spacing:.05em;z-index:2;}
.ba-label.after{background:rgba(201,161,79,.92);}
.ba-arrow{font-size:1.9rem;color:var(--navy);flex:0 0 auto;}
@media(max-width:760px){
  .ba-arrow{font-size:1.3rem;}
  .ba-label{font-size:.78rem;padding:3px 14px;}
}

/* points */
.point{display:flex;gap:36px;align-items:center;margin-bottom:56px;flex-wrap:wrap;}
.point:last-child{margin-bottom:0;}
.point .pt-label{flex:0 0 130px;text-align:center;}
.point .pt-label .pt-en{color:var(--gold);font-weight:800;letter-spacing:.15em;font-size:.9rem;}
.point .pt-label .pt-num{font-size:3rem;font-weight:800;color:var(--navy);line-height:1;}
.point .pt-body{flex:1 1 400px;}
.point h3{color:var(--navy);font-size:1.3rem;margin-bottom:10px;border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:4px;}
.point p{font-size:.95rem;color:#444;}

/* youtube */
.youtube{background:var(--gray);}
.yt-row{display:flex;gap:30px;align-items:stretch;flex-wrap:wrap;justify-content:center;}
.yt-video{flex:1 1 480px;min-width:300px;max-width:640px;}
.yt-video iframe{width:100%;aspect-ratio:16/9;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:block;}
.yt-side{flex:0 1 340px;min-width:260px;display:flex;flex-direction:column;gap:14px;}
.yt-side img{width:100%;border-radius:8px;border:3px solid var(--navy);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.yt-channel-btn{display:block;text-align:center;background:#e62117;color:#fff;text-decoration:none;font-weight:800;padding:13px;border-radius:6px;letter-spacing:.08em;}
.yt-channel-btn:hover{opacity:.85;}

/* CTA banner */
.cta-banner{background:linear-gradient(135deg,#16406f,#0d2a4d);color:#fff;text-align:center;}
.cta-banner h2{font-size:1.6rem;margin-bottom:8px;}
.cta-banner p{opacity:.92;margin-bottom:30px;}
.cta-banner .tel{font-size:2.1rem;font-weight:800;color:var(--yellow);letter-spacing:.04em;}
.cta-banner .hours{font-size:.88rem;opacity:.85;margin-bottom:26px;}
.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.cta-big{display:block;min-width:280px;text-decoration:none;font-weight:800;font-size:1.05rem;padding:18px 30px;border-radius:6px;transition:.2s;line-height:1.5;}
.cta-big small{display:block;font-weight:600;font-size:.8rem;opacity:.85;}
.cta-big:hover{opacity:.88;transform:translateY(-2px);}
.cta-big.personal{background:var(--yellow);color:#403000;}
.cta-big.corporate{background:#fff;color:var(--navy);border:2px solid var(--gold);}

/* company table */
.company{background:var(--gray);}
.company table{width:100%;max-width:780px;margin:0 auto;border-collapse:collapse;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);}
.company th,.company td{padding:15px 22px;border-bottom:1px solid #e3e7ee;text-align:left;font-size:.95rem;vertical-align:top;}
.company th{width:30%;background:var(--navy);color:#fff;font-weight:600;}

/* forms */
.form-wrap{max-width:680px;margin:0 auto;}
.form-note{background:#fdf6e7;border-left:4px solid var(--gold);padding:14px 18px;font-size:.9rem;margin-bottom:30px;}
form{display:grid;gap:18px;text-align:left;}
label{font-weight:700;color:var(--navy);font-size:.93rem;}
.req{color:var(--red);font-size:.78rem;margin-left:6px;}
input,textarea,select{width:100%;padding:12px;border:1px solid #ccd3dd;border-radius:4px;font-size:1rem;font-family:inherit;background:#fff;}
textarea{min-height:150px;}
.check-group{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.95rem;}
.check-group label{font-weight:500;color:var(--text);display:flex;align-items:center;gap:6px;}
.check-group input{width:auto;}
.submit-btn{background:var(--navy);color:#fff;border:none;padding:15px;font-size:1.05rem;font-weight:800;border-radius:5px;cursor:pointer;letter-spacing:.1em;}
.submit-btn:hover{background:var(--navy-light);}

/* recruit */
.job-card{background:#fff;border:1px solid #dde3ec;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.06);margin-bottom:26px;overflow:hidden;}
.job-card .job-head{background:var(--navy);color:#fff;padding:12px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.job-card .job-head h3{font-size:1.1rem;}
.job-card .pay{background:var(--yellow);color:#403000;font-weight:800;padding:4px 14px;border-radius:99px;font-size:.95rem;}
.job-card table{width:100%;border-collapse:collapse;}
.job-card th,.job-card td{padding:12px 22px;border-bottom:1px solid #eef1f6;font-size:.92rem;text-align:left;vertical-align:top;}
.job-card th{width:26%;background:#f5f7fa;color:var(--navy);font-weight:700;}
.job-card .job-foot{padding:14px 22px;text-align:right;}
.apply-btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:10px 28px;border-radius:5px;font-size:.95rem;cursor:pointer;}
.apply-btn:hover{opacity:.85;}
.apply-btn.line{background:#06C755;}

/* first-time banner & LINE */
.first-banner{background:#fff8e8;border:2px solid var(--yellow);border-radius:10px;padding:24px;text-align:center;margin-bottom:34px;}
.first-banner p{font-size:1.02rem;margin-bottom:16px;}
.first-btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.first-btn{display:block;min-width:260px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800;font-size:1rem;padding:14px 26px;border-radius:7px;line-height:1.5;transition:.2s;}
.first-btn small{display:block;font-weight:600;font-size:.78rem;opacity:.85;}
.first-btn:hover{background:var(--navy-light);}
.line-btn{display:block;min-width:200px;background:#06C755;color:#fff;text-decoration:none;text-align:center;font-weight:800;font-size:1rem;padding:14px 26px;border-radius:7px;line-height:1.5;transition:.2s;}
.line-btn small{display:block;font-weight:600;font-size:.78rem;opacity:.9;}
.line-btn:hover{opacity:.85;}
.line-box{background:#eafff2;border:2px solid #06C755;border-radius:10px;padding:22px;text-align:center;margin-bottom:26px;}
.line-box p{font-weight:700;color:#0a8c3f;margin-bottom:12px;}
.line-btn.big{max-width:320px;margin:0 auto;}

/* manga box */
.manga-box{margin-top:50px;text-align:center;}
.manga-box img{max-width:480px;width:100%;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.12);}
.manga-caption{margin-top:10px;font-size:.88rem;color:#555;}
.manga-caption a{color:#e62117;font-weight:700;text-decoration:none;}
.manga-caption a:hover{text-decoration:underline;}

/* goods */
.goods-btn{display:block;text-align:center;background:var(--gold);color:#fff;text-decoration:none;font-weight:800;padding:13px;border-radius:6px;letter-spacing:.06em;margin-top:10px;transition:.2s;}
.goods-btn:hover{opacity:.85;}
.goods-card{text-align:center;}
.goods-card .goods-img{background:#f5f7fa;border-radius:6px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;}
.goods-card .goods-img img{max-height:100%;width:auto;max-width:100%;object-fit:contain;}
.goods-card h3{justify-content:center;}
.goods-price{font-size:1.3rem;font-weight:800;color:var(--red);margin:8px 0 14px;}
.goods-buy{cursor:pointer;}

.kindle-box{background:#fff8e8;border:2px solid var(--gold);border-radius:10px;padding:30px 22px;text-align:center;margin-bottom:30px;}
.kindle-box h2{color:var(--navy);font-size:1.25rem;margin-bottom:8px;}
.kindle-box p{color:#555;margin-bottom:16px;}
.kindle-btn{display:inline-block;background:#ff9900;color:#1b1b1b;text-decoration:none;font-weight:800;padding:14px 36px;border-radius:7px;font-size:1rem;line-height:1.5;transition:.2s;}
.kindle-btn small{display:block;font-weight:600;font-size:.78rem;opacity:.8;}
.kindle-btn:hover{opacity:.85;}
.goods-coming{background:#fff;border:2px dashed #c9d2de;border-radius:10px;padding:46px 22px;text-align:center;}
.goods-coming-icon{font-size:2.6rem;margin-bottom:8px;}
.goods-coming h2{color:var(--navy);font-size:1.3rem;margin-bottom:10px;}
.goods-coming p{color:#555;margin-bottom:10px;}

/* page hero (sub pages) */
.page-hero{background:linear-gradient(135deg,#16406f,#0d2a4d);color:#fff;text-align:center;padding:54px 20px;}
.page-hero h1{font-size:1.9rem;letter-spacing:.1em;}
.page-hero .en{color:var(--gold);font-size:.85rem;letter-spacing:.25em;font-weight:700;}

/* footer */
footer{background:var(--navy);color:#fff;padding:46px 20px 24px;}
.footer-inner{max-width:1150px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.f-brand{display:flex;align-items:center;gap:12px;}
.f-brand img{height:54px;background:#fff;border-radius:50%;padding:4px;}
.f-brand .f-name{font-weight:800;font-size:1.15rem;font-style:italic;letter-spacing:.08em;}
.f-brand .f-addr{font-size:.82rem;opacity:.85;font-style:normal;}
footer nav ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;}
footer nav a{color:#fff;text-decoration:none;font-size:.88rem;}
footer nav a:hover{color:var(--gold);}
.copy{text-align:center;font-size:.8rem;opacity:.7;margin-top:30px;}
.sns-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.sns{display:inline-block;padding:6px 14px;border-radius:99px;font-size:.78rem;font-weight:700;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.45);transition:.2s;}
.sns:hover{opacity:.8;}
.sns.x{background:#000;}
.sns.tiktok{background:#010101;border-color:#69C9D0;}
.sns.insta{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;}

@media(max-width:760px){
  /* topbar: 電話だけ表示 */
  .topbar-inner{justify-content:center;}
  .topbar-inner > span{display:none;}
  .topbar .tb-tel{font-size:.95rem;}
  .topbar .tb-tel small{display:block;font-size:.68rem;margin-left:0;text-align:center;}

  /* header: ロゴ中央・サムネ非表示・YTボタン小さく */
  .header-inner{padding:8px 12px;justify-content:center;flex-wrap:wrap;}
  .brand-row{gap:10px;justify-content:center;width:100%;flex-wrap:wrap;}
  .header-cta{flex-wrap:wrap;}
  .logo img{height:38px;}
  .logo .name{font-size:1.1rem;}
  .logo .name .corp{font-size:.75rem;}
  .yt-btn{font-size:.62rem;padding:5px 9px;gap:6px;}
  .yt-btn .yt-icon{width:20px;height:20px;font-size:.55rem;}
  .yt-thumb{display:none;}

  /* CTAボタン: 横並びでコンパクトに */
  .header-cta{width:100%;gap:6px;}
  .cta-btn{flex:1;font-size:.72rem;padding:7px 4px;border-radius:5px;}

  /* メニュー: 1段目4項目+2段目に残り */
  .gnav ul{display:flex;flex-wrap:wrap;overflow:visible;}
  .gnav li{flex:1 0 25%;border-bottom:1px solid rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.15);}
  .gnav li:nth-child(4n){border-right:none;}
  .gnav li:last-child{border-right:none;}
  .gnav a{padding:11px 2px;font-size:.76rem;white-space:nowrap;text-align:center;border-right:none;border-left:none;}
  .gnav li:first-child a{border-left:none;}

  /* ヒーロー: 余白とバッジを小さく */
  .hero{padding:22px 18px 40px;}
  .hero h1{font-size:1.45rem;}
  .hero p{font-size:.92rem;}
  .badges{gap:10px;justify-content:center;}
  .badge{width:84px;height:84px;font-size:.62rem;border-width:2px;}
  .badge strong{font-size:.85rem;}
  .hero .cta{display:block;text-align:center;padding:13px 20px;font-size:.95rem;}

  .sec-title h2{font-size:1.4rem;}
  section{padding:52px 16px;}
  .point .pt-label{flex:1 1 100%;}
  .cta-row{flex-direction:column;align-items:stretch;}
  .cta-big{min-width:0;}
}