/* =========================================================
   三志郎オフィシャルウェブサイト 共通スタイル
   色やサイズはここの変数を変えると全ページに反映されます
   ========================================================= */
:root {
  --text: #2d2d2d;
  --red: #e50914;
  --dark: #36353c;
  --gray-bg: #f5f5f7;
  --navy: #073763;
  --line: #c8c8c8;
  --wrap: 1100px;
  --safe-top: env(safe-area-inset-top, 0px); /* iPhoneの時計・電池の帯の高さ（無い端末は0） */
  --header-h: calc(129px + var(--safe-top)); /* PC: 上の白い帯80px + メニュー49px */
}
@media (max-width: 767px) {
  :root { --header-h: calc(100px + var(--safe-top)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .05em;
  /* ヘッダーは sticky（ページの一部として上に貼り付く）なので、上の余白は不要 */
  overflow-x: clip; /* 横から入るブロックで横スクロールが出ないように */
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.red { color: var(--red); }
.pc-only { display: block; }
.sp-only { display: none; }
@media (max-width: 767px) {
  body { font-size: 15px; }
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* ---------- ヘッダー ---------- */
.site-header {
  /* sticky：スクロール中は上に貼り付き、ページ上端で引っぱるとページと一緒に下がる
     （スマホのChromeの「引っぱって再読み込み」パネルにロゴが隠れない） */
  position: -webkit-sticky; position: sticky; top: 0; z-index: 100;
  background: #fff;
  /* iPhoneでスクロール中にヘッダーが欠けて描かれるのを防ぐ（独立した層として描画） */
  -webkit-transform: translateZ(0); transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  /* ページが時計・電池の帯の下にもぐっても、ロゴがその下に隠れないように押し下げる */
  padding-top: var(--safe-top);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.header-bar {
  height: 80px;
  max-width: var(--wrap); margin: 0 auto; padding: 12px 20px 0; /* 上の余白を広めに */
  display: flex; align-items: center; gap: 18px;
}
.header-logo img { width: 200px; display: block; }
.header-tagline { font-size: 12px; letter-spacing: .08em; margin: 0; }
.header-sns { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.header-sns img { width: 32px; }
.header-sns a:last-child img { width: 28px; }
.global-nav { background: var(--dark); }
.global-nav ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 700px; height: 49px;
  display: flex; justify-content: center; align-items: stretch;
}
.global-nav li { flex: 1; text-align: center; }
.global-nav a {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 500;
  position: relative;
}
.global-nav a::before { content: "▶︎"; font-size: 9px; margin-right: 6px; }
.global-nav a::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: 8px;
  height: 2px; background: var(--red); transform: scaleX(0); transition: transform .25s;
}
.global-nav a:hover::after, .global-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* スマホのヘッダーとメニュー */
.menu-btn { display: none; }
@media (max-width: 767px) {
  /* スマホ：左に「ロゴ＋タイトル」、右にメニューボタン。ボタンの高さを左のまとまりと同じにして上下をそろえる */
  .header-bar {
    height: 100px; padding: 14px 16px 0;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    align-content: center; column-gap: 12px; row-gap: 3px;
  }
  .header-logo { grid-column: 1; grid-row: 1; align-self: end; }
  .header-logo img { width: 150px; }
  .header-tagline { grid-column: 1; grid-row: 2; font-size: 11.5px; letter-spacing: .04em; line-height: 1.4; }
  .header-sns, .global-nav { display: none; }
  .menu-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    grid-column: 2; grid-row: 1 / span 2; align-self: center;
    width: 54px; height: 58px; line-height: 1; border: 1px solid #ddd; /* 高さ＝ロゴ＋タイトルのまとまり */ border-radius: 4px; background: #fff;
    color: var(--red); font-size: 9px; letter-spacing: .05em; cursor: pointer; padding: 6px 0 4px;
    font-family: inherit;
  }
  .menu-btn span.bars { display: block; width: 22px; height: 14px; position: relative; }
  .menu-btn span.bars::before, .menu-btn span.bars::after, .menu-btn span.bars i {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--red); transition: transform .25s, opacity .25s;
  }
  .menu-btn span.bars::before { top: 0; }
  .menu-btn span.bars i { top: 6px; }
  .menu-btn span.bars::after { top: 12px; }
  .menu-open .menu-btn span.bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-btn span.bars i { opacity: 0; }
  .menu-open .menu-btn span.bars::after { transform: translateY(-6px) rotate(-45deg); }
}
.sp-menu {
  position: fixed; inset: 0; z-index: 99; background: #fff; overflow-y: auto;
  padding: calc(124px + var(--safe-top)) 30px 40px; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.menu-open .sp-menu { opacity: 1; visibility: visible; }
.sp-menu ul { list-style: none; margin: 0 0 30px; padding: 0; }
.sp-menu li a {
  display: block; padding: 16px 0; border-bottom: 1px solid #e5e5e5;
  text-decoration: none; font-size: 16px; font-weight: 500;
}
.sp-menu .sns { display: flex; justify-content: center; gap: 28px; margin-bottom: 30px; }
.sp-menu .sns img { width: 34px; }
.sp-menu .menu-logo { width: 150px; margin: 0 auto 10px; display: block; }
.sp-menu small { font-size: 12px; color: #777; }

/* ---------- 下層ページの見出し画像 ---------- */
.page-head {
  height: 239px; background: #222 center/cover no-repeat;
  display: flex; align-items: center; color: #fff;
}
.page-head .wrap { width: 100%; }
.page-head .en { font-size: 16.5px; font-weight: 300; letter-spacing: .05em; margin-bottom: 4px; }
.page-head h1 { font-size: 38.5px; letter-spacing: .06em; } /* 元サイトと同じ大きさ */
@media (max-width: 767px) {
  .page-head { height: 180px; }
  .page-head h1 { font-size: 28px; }
  .page-head { background-position: center 22%; } /* 写真の上の方（顔）を残す */
}

/* ---------- 見出し（赤い縦線） ---------- */
.sec-title {
  font-size: 28px; font-weight: 700; border-left: 7px solid var(--red);
  padding-left: 14px; line-height: 1.5; margin-bottom: 40px;
}
.sec-title .sub { color: #ddd; margin-left: .6em; letter-spacing: .05em; }
@media (max-width: 767px) {
  .sec-title { font-size: 22px; margin-bottom: 28px; }
  .sec-title .sub { display: block; margin-left: 0; font-size: 18px; }
}

.section { padding: 80px 0; }
@media (max-width: 767px) { .section { padding: 56px 0; } }

/* ボタン */
.btn-red {
  display: inline-block; background: var(--red); color: #fff; text-decoration: none;
  padding: 10px 22px; border-radius: 4px; font-size: 16px; font-weight: 500;
  box-shadow: 0 2px 6px rgba(229,9,20,.3); transition: opacity .2s;
}
.btn-red:hover { opacity: .85; }
.link-red { color: var(--red); text-decoration: none; }
.link-red:hover { text-decoration: underline; }

/* ---------- パンくず・SNS・フッター ---------- */
.sp-sns { display: none; }
@media (max-width: 767px) {
  .sp-sns { display: flex; justify-content: center; gap: 30px; padding: 30px 0 10px; }
  .sp-sns img { width: 34px; }
}
.breadcrumb { font-size: 13px; padding-top: 6px; padding-bottom: 6px; } /* 左右の余白は .wrap と同じ */
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 .4em; color: #999; }
.site-footer {
  background: var(--dark); color: #fff; text-align: center;
  padding: 26px 20px 36px; font-size: 14px; /* ロゴの上は少し狭め */
}
.site-footer .footer-logo img { width: 200px; }
.site-footer nav { margin-top: 14px; line-height: 2.2; }
.site-footer nav a { color: #fff; text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer nav .sep { margin: 0 .5em; opacity: .7; }
.site-footer .icon { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; fill: #fff; }
.site-footer .copy { margin-top: 10px; letter-spacing: .08em; }

/* ---------- 表示アニメーション（下からふわっと） ---------- */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.fade.is-in { opacity: 1; transform: none; }

/* ---------- 画像の拡大表示 ---------- */
.zoom { cursor: zoom-in; display: block; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.lightbox button {
  position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer;
}

/* =========================================================
   トップページ
   ========================================================= */
/* トップの写真：高さ500px。写真は画面に固定され、スクロールすると下の内容が写真の上にかぶさる
   会場の広さが伝わるよう、ズームせず写真の横幅全体を見せる（1446×667 の比率）。上下は中央に合わせる */
.hero {
  height: 500px;
  background: #000 url(../images/top/hero.jpg) no-repeat fixed;
  background-size: 100% auto;
  background-position: center calc(var(--header-h) + (500px - 46.13vw) / 2);
}
/* 写真が500pxより低くなる幅（約1084px以下）は高さを500pxに合わせ、
   はみ出す左右は、舞台の三志郎（写真の左から約30%）が残るように切る */
@media (max-width: 1084px) {
  .hero { background-size: auto 500px; background-position: 30% var(--header-h); }
}
/* iPhone・iPad・スマホ：背景固定（fixed）が効かないため、写真を「画面に固定した別の層」にして
   .hero の枠（clip-path）で切り抜く。スクロールすると内容が写真の上にかぶさる見え方はPCと同じ */
@supports (-webkit-touch-callout: none) {
  /* 下に敷く写真（引っぱったときに見える）＋ 画面に固定した写真（::before） */
  .hero { background: #000 url(../images/top/hero.jpg) 30% center / cover no-repeat scroll; position: relative; clip-path: inset(0); }
  .hero::before {
    content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); height: 500px;
    background: url(../images/top/hero.jpg) 30% center / cover no-repeat;
  }
}
@media (max-width: 767px) {
  .hero { height: 300px; background: #000 url(../images/top/hero.jpg) 30% center / cover no-repeat scroll; position: relative; clip-path: inset(0); }
  .hero::before {
    content: ""; position: fixed; left: 0; right: 0; top: var(--header-h); height: 300px;
    background: url(../images/top/hero.jpg) 30% center / cover no-repeat;
  }
}

/* ---------- お知らせ（白背景。行は細い線で区切る） ---------- */
.news { background: #fff; color: var(--text); padding: 70px 0; /* 上：端→見出し、下：最後の線→端 を同じに */ }
.news .sec-title { margin-bottom: 24px; }
.news .sec-title .sub { color: #999; font-size: 15px; font-weight: 500; }
.news-list { border-top: 1px solid #e3e3e3; }
.news-card {
  display: grid; grid-template-columns: 110px 1fr; gap: 0 36px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid #e3e3e3;
}
/* チラシは日付の下（左の列）に置いて、縦のラインをそろえる */
.news-card.has-thumb .news-date { grid-column: 1; grid-row: 1; }
.news-card.has-thumb .news-main { grid-column: 2; grid-row: 1 / span 2; }
.news-card.has-thumb .news-thumb { grid-column: 1; grid-row: 2; margin-top: 16px; }
.news-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-feature-settings: "tnum"; }
.news-date .y { font-size: 14px; font-weight: 700; color: #777; letter-spacing: .08em; }
.news-date .md { font-size: 24px; font-weight: 700; margin: 3px 0; color: #1a1a1a; }
.news-date .wd { font-size: 10px; color: var(--red); font-weight: 700; letter-spacing: .2em; }
.news-main h3 { font-size: 16px; line-height: 1.5; margin-bottom: 6px; color: #111; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.news-cat {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; line-height: 1;
  padding: 5px 10px 4px; border-radius: 3px; color: #fff; vertical-align: middle;
}
.cat-stage { background: #1a8fd0; }
.cat-cruise { background: #c08a00; }
.news-main p { font-size: 13.5px; line-height: 1.65; color: #555; margin-bottom: 0; }
.news-info { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #333; }
.news-info dt { color: #999; font-weight: 700; }
.news-info dd { margin: 0; }
.news-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--red); text-decoration: none;
}
.news-link::after { content: "→"; transition: transform .2s; }
.news-link:hover { text-decoration: underline; }
.news-link:hover::after { transform: translateX(3px); }
.news-thumb { display: block; width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.news-thumb img { display: block; width: 100%; transition: transform .4s, opacity .3s; }
.news-thumb:hover img { transform: scale(1.05); }
@media (max-width: 767px) {
  .news { padding: 50px 0; }
  .news-card { grid-template-columns: 1fr; padding: 22px 0; }
  .news-card.has-thumb .news-date, .news-card.has-thumb .news-main { grid-column: 1; grid-row: auto; }
  .news-card.has-thumb .news-thumb { grid-column: 1; grid-row: auto; width: 62%; max-width: 240px; margin: 20px auto 0; justify-self: center; }
  .news-date { flex-direction: row; align-items: baseline; gap: 6px; margin-bottom: 8px; }
  .news-date .md { font-size: 20px; margin: 0; order: 1; }
  .news-date .y { order: 0; }
  .news-date .wd { order: 2; }
  .news-main h3 { font-size: 15px; }
  .news-main p { font-size: 13px; text-align: justify; text-justify: inter-character; } /* 両端をそろえる */
  .news-info { font-size: 12px; }
}

/* スマホ：お知らせは1件ずつ畳んでおき、日付と見出しを押すと開く（サイエンスのサイトと同じ。開閉ボタンは js が付ける） */
@media (max-width: 767px) {
  .news-card.is-fold { position: relative; cursor: pointer; }
  .news-card.is-fold .news-date, .news-card.is-fold .news-main h3 { padding-right: 40px; }   /* 右の＋ボタンと重ならないように */
  .news-card.is-fold .news-main h3 { margin-bottom: 0; }
  .news-card.is-fold:not(.is-open) .news-main > :not(h3), .news-card.is-fold:not(.is-open) .news-thumb { display: none; }
  .news-card.is-fold.is-open .news-main h3 { margin-bottom: 8px; }
  .news-toggle { position: absolute; right: 0; top: 22px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #f0f0f2; color: var(--dark); cursor: pointer; }
  .news-toggle::before, .news-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform .3s; }
  .news-toggle::after { transform: rotate(90deg); }
  .news-card.is-open .news-toggle::after { transform: rotate(0); }   /* 開くと「＋」が「－」に */
  .news-card.is-open .news-toggle { background: var(--red); color: #fff; }
}
@media (min-width: 768px) { .news-toggle { display: none; } }

.tiles { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } /* 横から入る動きのはみ出しを隠す */
.tile {
  min-height: 564px; background: center/cover no-repeat; color: #fff; /* 元サイトと同じ高さ */
  display: flex; flex-direction: column; padding: 30px; text-decoration: none; position: relative;
}
.tile-text { justify-content: center; align-items: center; text-align: center; }
.tile-text h2 { font-size: 33px; font-weight: 700; margin-bottom: 18px; }
.tile-text p { font-size: 22px; line-height: 1.5; }
.tile-photo { justify-content: flex-end; overflow: hidden; }
.tile-photo::before {
  content: ""; position: absolute; inset: 0; background: inherit; background-size: cover;
  transition: transform .6s ease; z-index: 0;
}
.tile-photo:hover::before { transform: scale(1.05); }
.tile-photo > * { position: relative; z-index: 1; }
.tile-photo .en { font-size: 25px; line-height: 1.3; }
.tile-photo .ja { font-size: 55px; font-weight: 700; line-height: 1.3; }
.tile-photo.right { align-items: flex-end; text-align: right; }
.tile-about-text { background-image: url(../images/top/about_text_bg.webp); }
.tile-about-photo { background-image: url(../images/top/about_photo.webp); }
.tile-hire-photo { background-image: url(../images/top/hire_photo.webp); background-position: center top; }
.tile-hire-text { background-image: url(../images/top/hire_text_bg.webp); }
@media (max-width: 1000px) {
  .tile-text p { font-size: 18px; }
  .tile-photo .ja { font-size: 42px; }
}
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 600px; padding: 70px 20px; } /* 元サイトのスマホ表示とほぼ同じ高さ */
  .tile-photo { min-height: 515px; padding: 20px; }
  .tile-text { padding-left: 16px; padding-right: 16px; container-type: inline-size; }
  /* 文字の大きさを画面幅から計算：いちばん長い行（18文字）が必ず1行に収まる。最大20px */
  .tile-text p { font-size: min(20px, calc((100vw - 32px) / 18.6)); letter-spacing: 0; line-height: 1.6; }
  @supports (width: 1cqi) { .tile-text p { font-size: min(20px, calc(100cqi / 18.6)); } }
  /* 見出し（最長13文字）も同じ考え方で。最大28px */
  .tile-text h2 { font-size: min(28px, calc((100vw - 32px) / 13.6)); letter-spacing: .02em; }
  @supports (width: 1cqi) { .tile-text h2 { font-size: min(28px, calc(100cqi / 13.6)); } }
  .tile-photo .en { font-size: 18px; }
  .tile-photo .ja { font-size: 38px; }
  .tiles .tile-hire-text { order: 3; }  /* スマホでは「お探しですか？」を写真の上に */
  .tiles .tile-hire-photo { order: 4; }
}
/* ---------- Instagram（独自デザイン） ---------- */
.insta { padding: 110px 0 120px; } /* ボタンの下は広めに */
.ig-head {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit;
  padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid #e3e3e3;
}
.ig-avatar {
  flex: none; width: 68px; height: 68px; border-radius: 50%; padding: 3px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
}
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; object-position: center top; display: block; }
.ig-names { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.ig-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-id { color: #888; font-size: 14px; }
.ig-follow {
  margin-left: auto; flex: none; font-size: 13px; font-weight: 700; color: #fff; background: var(--red);
  padding: 9px 18px; border-radius: 999px; transition: opacity .2s;
}
.ig-head:hover .ig-follow { opacity: .85; }
.ig-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ig-feed[hidden] { display: none; }
.ig-feed button { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; /* Instagramのプロフィールの並びと同じ縦長 */ overflow: hidden; background: #f2f2f2; border: 0; padding: 0; cursor: pointer; border-radius: 4px; }
.ig-feed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s, opacity .3s; }
/* 動画（縦長9:16の表紙）は真ん中より少し上を切り取る（上のタイトルが欠けないように） */
.ig-feed button[data-type="VIDEO"] img { object-position: 50% 38%; }
.ig-feed button::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .3s; }
.ig-feed button:hover img { transform: scale(1.05); }
.ig-feed button:hover::after { background: rgba(0,0,0,.15); }
.ig-feed .mark { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); z-index: 1; }
.ig-more { text-align: center; margin-top: 30px; }
.ig-feed[hidden] + .ig-more { margin-top: 10px; }
@media (max-width: 767px) {
  .insta { padding: 75px 0 90px; }
  .ig-avatar { width: 56px; height: 56px; }
  .ig-name { font-size: 15px; }
  .ig-id { font-size: 13px; }
  .ig-follow { padding: 8px 14px; font-size: 12px; }
  .ig-feed { gap: 3px; }
  .ig-feed button { border-radius: 2px; }
}

/* Instagramの拡大表示（このページの中で開く） */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 40px 72px; background: rgba(15,15,18,.88); }
.lb[hidden] { display: none; }
.lb-box { display: grid; grid-template-columns: auto 340px; max-width: 1100px; max-height: calc(100vh - 80px); background: #fff; overflow: hidden; border-radius: 6px; }
.lb-media { position: relative; background: #000; height: min(calc(100vh - 80px), 760px); aspect-ratio: 4 / 5; touch-action: pan-y; }
.lb-media img, .lb-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-media iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.lb-slide { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #222; }
.lb-slide.prev { left: 12px; } .lb-slide.next { right: 12px; }
.lb-slide svg, .lb-nav svg, .lb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; }
.lb-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.lb-dots span.on { background: #fff; }
.lb-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #e3e3e3; }
.lb-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e3e3e3; text-decoration: none; color: inherit; }
.lb-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center top; }
.lb-head b { font-size: 14px; } .lb-head span { display: block; color: #888; font-size: 12px; line-height: 1.4; }
.lb-cap { flex: 1; overflow-y: auto; padding: 18px 20px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.lb-link { display: block; padding: 14px 20px; border-top: 1px solid #e3e3e3; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--red); }
.lb-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-close svg { width: 22px; height: 22px; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.25); }
@media (max-width: 900px) {
  .lb { padding: 0; align-items: stretch; }
  .lb-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: none; width: 100%; border-radius: 0; }
  .lb-media { height: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 70vh; }
  .lb-side { border-left: 0; }
  .lb-nav { display: none; } /* スマホは左右スワイプで前後の投稿へ */
  .lb-close { background: rgba(0,0,0,.45); z-index: 2; }
}

/* =========================================================
   三志郎を知る
   ========================================================= */
.white-bg { background: #fff; }
.catch { text-align: center; padding: 90px 0 100px; } /* 見出しの文字の上は行の余白が大きいぶん、上を少し狭くして見た目をそろえる */
.catch h2 { font-size: 44px; line-height: 1.5; margin-bottom: 50px; } /* 元サイトと同じ大きさ */
.sp-br { display: none; } /* スマホだけで改行する位置 */
.catch p { font-size: 20px; line-height: 1.6; }
@media (max-width: 767px) {
  .catch { padding: 60px 0; }
  .catch .wrap { padding: 0 16px; container-type: inline-size; }
  .sp-br { display: inline; }
  /* 画面幅から文字の大きさを計算：いちばん長い行（見出し14文字・本文21文字）が必ず1行に収まる */
  .catch h2 { font-size: min(25px, calc((100vw - 32px) / 14.4)); letter-spacing: 0; margin-bottom: 30px; }
  .catch p { font-size: min(18px, calc((100vw - 32px) / 21.4)); letter-spacing: 0; line-height: 1.6; }
  @supports (width: 1cqi) {
    .catch h2 { font-size: min(25px, calc(100cqi / 14.4)); }
    .catch p { font-size: min(18px, calc(100cqi / 21.4)); }
  }
}
.about-profile { padding: 60px 0 100px; background: #fafafb url(../images/about/profile_bg.webp) center/cover no-repeat; }
.about-profile .sec-title { color: #fff; }
.about-profile .sec-title .sub { color: rgba(255,255,255,.35); }
.profile-grid { display: grid; grid-template-columns: 456px 1fr; gap: 40px; align-items: stretch; } /* 写真と文章の高さをそろえる */
.profile-grid .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.profile-grid .text {
  background: rgba(0,0,0,.63); color: #fff; padding: 50px 30px; font-size: 16px; line-height: 1.9;
}
.profile-grid .name { font-size: 18px; font-weight: 700; margin-bottom: 1.6em; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; gap: 0; }
  .profile-grid .photo { max-width: 456px; margin: 0 auto; }
  .profile-grid .photo img { height: auto; } /* スマホは縦に並ぶので写真は元の比率 */
  .profile-grid .text { padding: 30px 16px; }
}

/* 主な出演（カード型） */
.appear { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } /* 左右の列の高さをそろえる */
.ap-col { display: flex; flex-direction: column; gap: 20px; }
.ap-mv { flex: 1; } /* ミュージックビデオの枠を下まで伸ばして右の列とそろえる */
.ap-card {
  background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 28px 30px 26px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.04);
}
.ap-en { color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .2em; margin: 0 0 2px; }
.ap-card h3 { font-size: 20px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #ececec; }
/* レギュラー出演：ラベル1つの下に2番組をまとめる */
.ap-regular { background: #fafafa; border-radius: 8px; padding: 14px 16px 12px; margin: 0 0 22px; }
.ap-regular-label { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: .1em; margin: 0 0 6px; }
.ap-regular ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-regular li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ap-regular b { font-size: 16px; }
.ap-regular em, .ap-list em {
  font-style: normal; font-size: 11px; font-weight: 700; color: #777; border: 1px solid #d6d6d6;
  border-radius: 999px; padding: 2px 9px; line-height: 1.5; white-space: nowrap;
}
.ap-net { margin: 0; display: grid; }
.ap-net > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-top: 1px dashed #e3e3e3; }
.ap-net dt { font-size: 12.5px; font-weight: 700; color: #888; padding-top: 2px; }
.ap-net dd { margin: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.7; }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 22px; font-size: 15px; line-height: 1.6; }
.ap-list.two { grid-template-columns: 1fr 1fr; }
.ap-list li { position: relative; padding-left: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ap-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
@media (max-width: 900px) {
  /* 1列のときは ミュージックビデオ を最後に */
  .appear { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } /* どの枠も横幅いっぱい */
  .ap-col { display: contents; }
  .ap-mv { order: 9; }
}
@media (max-width: 767px) {
  .ap-card { padding: 22px 18px 20px; border-radius: 10px; }
  .ap-card h3 { font-size: 18px; }
  .ap-list.two { grid-template-columns: 1fr; }
  .ap-net > div { grid-template-columns: 78px 1fr; }
  .ap-net dd, .ap-list { font-size: 14.5px; }
}

.shorts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 50px; }
.video-thumb { position: relative; aspect-ratio: 9/16; cursor: pointer; border: 0; padding: 0; background: #000; display: block; width: 100%; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7a8.5 8.5 0 0 0-6-6C55.2.3 34 .3 34 .3S12.8.3 7.5 1.7a8.5 8.5 0 0 0-6 6C.1 13 .1 24 .1 24s0 11 1.4 16.3a8.5 8.5 0 0 0 6 6C12.8 47.7 34 47.7 34 47.7s21.2 0 26.5-1.4a8.5 8.5 0 0 0 6-6C67.9 35 67.9 24 67.9 24s0-11-1.4-16.3z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s;
}
.video-thumb:hover::after { transform: translate(-50%, -50%) scale(1.1); }
.video-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.video-modal.is-open { display: flex; }
.video-modal .inner { position: relative; height: min(85vh, 160vw); aspect-ratio: 9/16; background: #000; }
.video-modal iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal button { position: absolute; top: -40px; right: 0; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

.history { background: var(--navy); color: #fff; padding: 80px 0 92px; } /* 下＝見出しの文字の上の余白と同じ見た目 */
@media (max-width: 767px) { .history { padding: 56px 0 65px; } }
.history .sec-title { color: #fff; font-size: 36px; }
.history .sec-title .sub { color: rgba(59,105,145,.99); }
/* これまでの三志郎：時代ごとのカード＋縦のタイムライン */
.tl { display: grid; gap: 28px; }
.tl-group { background: #fff; color: var(--text); border-radius: 14px; padding: 30px 40px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.tl-range { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 700; letter-spacing: .12em; color: var(--navy); margin: 0 0 8px; }
.tl-range i { flex: 0 0 38px; height: 2px; background: var(--red); }
.tl-list { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-list li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 0 40px; padding: 22px 0; border-top: 1px solid #efefef; }
.tl-list li:first-child { border-top: 0; }
/* 縦の線と点 */
.tl-list::before { content: ""; position: absolute; left: 140px; top: 30px; bottom: 30px; width: 2px; background: #ececec; }
.tl-list li::before { content: ""; position: absolute; left: 135px; top: 32px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--red); box-sizing: border-box; }
.tl-year { display: flex; flex-direction: column; line-height: 1.15; padding-top: 2px; }
.tl-year b { font-size: 30px; font-weight: 700; color: var(--red); font-feature-settings: "tnum"; letter-spacing: .02em; }
.tl-year span { font-size: 13px; color: #999; margin-top: 4px; }
.tl-body { font-size: 15.5px; line-height: 1.9; text-align: justify; text-justify: inter-character; padding-left: 4px; }
.tl-body strong { font-weight: 700; color: #111; background: linear-gradient(transparent 62%, rgba(229,9,20,.14) 62%); }
@media (max-width: 767px) {
  .history .sec-title { font-size: 24px; }
  .tl { gap: 18px; }
  .tl-group { padding: 22px 18px 8px; border-radius: 10px; }
  .tl-list::before { left: 5px; top: 26px; bottom: 26px; }
  .tl-list li { grid-template-columns: 1fr; padding: 18px 0 18px 26px; }
  .tl-list li::before { left: 0; top: 26px; }
  .tl-year { flex-direction: row; align-items: baseline; gap: 10px; margin-bottom: 6px; }
  .tl-year b { font-size: 24px; }
  .tl-year span { margin-top: 0; }
  .tl-body { font-size: 14.5px; padding-left: 0; }
}

.yt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.yt-grid a img { width: 100%; display: block; }
.yt-grid .embed { aspect-ratio: 16/9; }
.yt-grid iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .yt-grid { grid-template-columns: 1fr; } }

/* =========================================================
   三志郎を雇う
   ========================================================= */
.hire-lead { text-align: center; padding: 90px 0 70px; }
.hire-lead h2 { font-size: 44px; line-height: 1.5; } /* 「三志郎を知る」の冒頭の見出しと同じ大きさ */
@media (max-width: 767px) { .hire-lead { padding: 60px 0 40px; } .hire-lead .wrap { padding: 0 16px; container-type: inline-size; }
  .hire-lead h2 { font-size: min(25px, calc((100vw - 32px) / 14.4)); letter-spacing: 0; } /* 「三志郎を知る」の見出しと同じ計算 */
  @supports (width: 1cqi) { .hire-lead h2 { font-size: min(25px, calc(100cqi / 14.4)); } } }

/* 選ばれています：写真はページの左端まで大きく。灰色の面は写真の後ろから右下へずらして重ねる */
.chosen { position: relative; display: grid; grid-template-columns: 55% 45%; margin: 10px 0 0; padding-bottom: 70px; }
.chosen::before { content: ""; position: absolute; left: 40%; right: 0; top: 70px; bottom: 0; background: var(--gray-bg); z-index: 0; }
.chosen-photo, .chosen-text { position: relative; z-index: 1; }
.chosen-photo { aspect-ratio: 3 / 2; } /* 写真と同じ比率で、切らずに表示 */
.chosen-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 20px 44px rgba(0,0,0,.2); }
.chosen-text {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 140px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 0 64px; /* 灰色の面の縦の中央に来るよう上を広く */
}
.chosen-en { color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .2em; margin: 0 0 6px; }
.chosen-text h3 { font-size: 32px; line-height: 1.4; margin: 0 0 22px; }
.chosen-text p:not(.chosen-en) { font-size: 16.5px; line-height: 1.9; margin: 0 0 32px; text-align: justify; text-justify: inter-character; }
.chosen-btn {
  display: inline-flex; align-items: center; gap: 14px; background: var(--red); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700; padding: 15px 26px; border-radius: 999px; box-shadow: 0 6px 18px rgba(229,9,20,.25);
  transition: transform .2s, box-shadow .2s;
}
.chosen-btn span { transition: transform .2s; }
.chosen-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(229,9,20,.3); }
.chosen-btn:hover span { transform: translateX(4px); }
@media (max-width: 900px) {
  .chosen { grid-template-columns: 1fr; padding-bottom: 0; }
  .chosen::before { display: none; }
  .chosen-photo img { box-shadow: none; }
  /* スマホ：灰色の面を写真の下にずらして重ねる */
  .chosen-text { background: var(--gray-bg); margin: 0 0 0 24px; padding: 34px 20px 40px 24px; } /* 写真のロゴを隠さないよう重ねない */
  .chosen-text h3 { font-size: 24px; margin-bottom: 14px; }
  .chosen-text p:not(.chosen-en) { font-size: 15px; margin-bottom: 24px; }
}

/* サービス（マジックショー／コーポレート・イベント／コーディネート／映像制作）
   上：横幅いっぱいの写真の帯に見出しと説明。下：写真の帯に少し重なる白いカード3枚 */
.svc { margin-top: 110px; }
.svc-hero { position: relative; background: #222 center / cover no-repeat; color: #fff; padding: 90px 0 150px; }
.svc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%); }
.svc-hero .wrap { position: relative; }
.svc-en { font-size: 13px; font-weight: 700; letter-spacing: .25em; margin: 0 0 8px; opacity: .9; }
.svc-hero h2 { font-size: 40px; line-height: 1.3; margin: 0 0 20px; padding-left: 16px; border-left: 6px solid var(--red); }
.svc-lead { max-width: 560px; font-size: 16.5px; line-height: 1.95; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.svc-cards { position: relative; margin-top: -90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.1); display: flex; flex-direction: column; }
.svc-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.svc-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.svc-card:hover figure img { transform: scale(1.05); }
.svc-body { padding: 22px 24px 26px; }
.svc-body h3 { position: relative; font-size: 22px; margin: 0 0 14px; padding-bottom: 12px; } /* タイトルを目立たせる（下に赤い短い線） */
.svc-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--red); }
.svc-body p { font-size: 14.5px; line-height: 1.85; color: #444; margin: 0; text-align: justify; text-justify: inter-character; }
.svc-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tags li { font-size: 12px; font-weight: 700; color: #555; background: var(--gray-bg); border-radius: 999px; padding: 4px 11px; line-height: 1.5; }
.svc-tags li.etc { background: none; color: #999; padding-left: 2px; }
.svc-solo { margin-bottom: 120px; }
.svc-solo .svc-hero { padding-bottom: 90px; }
@media (max-width: 900px) {
  .svc-cards { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 767px) {
  .svc { margin-top: 64px; }
  .svc-hero { padding: 54px 0 110px; }
  .svc-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2)); }
  .svc-hero h2 { font-size: 28px; margin-bottom: 14px; }
  .svc-lead { font-size: 15px; }
  .svc-cards { margin-top: -70px; gap: 18px; }
  .svc-body { padding: 18px 18px 22px; }
  .svc-solo { margin-bottom: 70px; }
  .svc-solo .svc-hero { padding-bottom: 54px; }
}

/* =========================================================
   最近の出演
   ========================================================= */
/* 出演レポート：横長の白いカード（左に写真、右に本文） */
.rp-section { background: #fff; }
.rp { display: grid; grid-template-columns: 40% 1fr; background: #fff; margin-bottom: 24px; overflow: hidden; border: 1px solid #ececec;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.06); }
.rp-photo { position: relative; min-height: 260px; background: #eee; }
.rp-photo > img, .rp-photo > a, .rp-photo > a > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-photo img { object-fit: cover; transition: transform .6s ease; }
.rp:hover .rp-photo img { transform: scale(1.04); }
.rp-body { padding: 28px 34px 26px; display: flex; flex-direction: column; }
.rp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.rp-meta time { font-size: 18px; font-weight: 700; color: var(--red); letter-spacing: .04em; font-feature-settings: "tnum"; }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-tags span { font-size: 11.5px; font-weight: 700; color: #555; background: var(--gray-bg); border-radius: 999px; padding: 3px 11px; line-height: 1.5; }
.rp-body h3 { font-size: 20px; line-height: 1.5; margin: 0 0 12px; }
.rp-body > p { font-size: 15px; line-height: 1.85; color: #444; margin: 0; text-align: justify; text-justify: inter-character; }
.rp-body > p.rp-credit { margin-top: auto; padding-top: 14px; font-size: 12.5px; line-height: 1.7; color: #888; text-align: left; }
.rp-body > p.rp-credit::before { content: ""; display: block; width: 100%; border-top: 1px solid #eee; margin: 4px 0 10px; }
.past { padding: 20px 0 90px; }
.past .links { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .rp { grid-template-columns: 1fr; margin-bottom: 18px; }
  .rp-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .rp-body { padding: 20px 18px 22px; }
  .rp-meta time { font-size: 16px; }
  .rp-body h3 { font-size: 17.5px; }
  .rp-body > p { font-size: 14.5px; }
}

/* =========================================================
   会社概要・お問合せ・関係者ページ
   ========================================================= */
.company-table { max-width: 640px; margin: 0 auto; width: 100%; border-collapse: collapse; font-size: 16px; }
.company-table th, .company-table td { padding: 14px 8px; border-bottom: 1px dotted #999; vertical-align: top; text-align: left; line-height: 1.8; }
.company-table th { width: 100px; font-weight: 400; }
/* お問合せの案内文：中央ぞろえ、区切りのいいところで改行 */
.contact-lead { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.contact-lead p { font-size: 16px; line-height: 2; margin: 0 0 1.2em; }
.contact-ssl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px !important; line-height: 1.5 !important; color: #666;
  background: var(--gray-bg); border-radius: 999px; padding: 7px 16px; margin: 6px 0 0 !important; }
.contact-ssl svg { width: 14px; height: 14px; fill: #888; flex: none; }
.md-br { display: inline; }
@media (max-width: 767px) {
  .md-br { display: none; }
  .contact-lead { text-align: left; margin-bottom: 32px; }
  .contact-lead p { font-size: 15px; line-height: 1.9; text-align: justify; text-justify: inter-character; }
  .contact-ssl { text-align: left !important; border-radius: 10px; }
}
.contact-form { max-width: 760px; margin: 0 auto; border-top: 1px solid #eee; padding-top: 36px; }
/* 独自のお問合せフォーム */
.cf-row { margin-bottom: 26px; }
.cf-row label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.cf-row .req, .cf-row .opt { font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 4px; }
.cf-row .req { color: #fff; background: var(--red); }
.cf-row .opt { color: #777; background: var(--gray-bg); }
.cform input[type="text"], .cform input[type="email"], .cform textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.7; color: var(--text);
  background: #fafafa; border: 1px solid #dcdcdc; border-radius: 8px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.cform textarea { resize: vertical; min-height: 200px; }
.cform input:focus, .cform textarea:focus { outline: none; background: #fff; border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,9,20,.12); }
.cform ::placeholder { color: #aaa; }
.cf-row.is-error input, .cf-row.is-error textarea { border-color: var(--red); background: #fff7f7; }
.cf-err { color: var(--red); font-size: 13px; margin: 6px 0 0; min-height: 0; }
.cf-err:empty { display: none; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 240px;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--red); border: 0; border-radius: 999px;
  padding: 16px 30px; cursor: pointer; box-shadow: 0 6px 18px rgba(229,9,20,.25); transition: transform .2s, box-shadow .2s, opacity .2s;
}
.cf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(229,9,20,.3); }
.cf-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.cf-back { background: #fff; color: #555; border: 1px solid #ccc; box-shadow: none; min-width: 160px; }
.cf-back:hover { box-shadow: none; border-color: #999; }
.cf-lead { text-align: center; margin: 0 0 24px; }
.cf-confirm { margin: 0; border-top: 1px solid #eee; }
.cf-confirm dt { font-size: 13px; font-weight: 700; color: #888; padding-top: 16px; }
.cf-confirm dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid #eee; font-size: 16px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.cf-status { color: var(--red); text-align: center; margin: 20px 0 0; }
.cf-status:empty { display: none; }
@media (max-width: 767px) {
  .cf-btn { width: 100%; min-width: 0; }
  .cf-actions { flex-direction: column-reverse; }
}
.thanks { max-width: 900px; margin: 0 auto; }
.thanks h2 { font-size: 22px; margin-bottom: 20px; }
.archive-lead { text-align: center; margin-bottom: 60px; }
.archive-item { max-width: 900px; margin: 0 auto 70px; }
.archive-item h2 { font-size: 22px; border-left: 7px solid var(--red); padding-left: 14px; margin-bottom: 4px; }
.archive-item .meta { margin: 0 0 16px 21px; }
.archive-item .embed { aspect-ratio: 16/9; background: #000; }
.archive-item iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 画面には出さず、検索エンジンと読み上げにだけ伝える文字 */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- ブロックが動く表示（元サイトと同じ種類） ----------
   anim-left：左から / anim-right：右から / anim-up：下から / anim-zoom：小さい状態から
   画面に入ると script.js が is-in を付けて動き出す */
.anim-left, .anim-right, .anim-up, .anim-zoom {
  opacity: 0; transition: opacity 1.6s ease, transform 2s cubic-bezier(.25,.8,.25,1); /* ゆっくり（2秒） */
}
.anim-left  { transform: translate3d(-140px, 0, 0); }
.anim-right { transform: translate3d(140px, 0, 0); }
.anim-up    { transform: translate3d(0, 60px, 0); }
.anim-zoom  { transform: scale(.85); }
.anim-left.is-in, .anim-right.is-in, .anim-up.is-in, .anim-zoom.is-in { opacity: 1; transform: none; }

/* 横から入るブロックを含む帯は、はみ出し部分を隠す */
.about-profile, .chosen, .svc, .tiles { overflow-x: clip; }

/* スマホで上端を引っぱっている間は、固定したトップ写真の層を隠す（二重表示を防ぐ。script.js が is-pulling を付ける） */
.is-pulling .hero::before { visibility: hidden; }

/* 「三志郎を知る」の見出し（三志郎について・主な出演・これまでの三志郎・YouTube）は元サイトと同じ大きさ */
.page-about .sec-title, .page-about .history .sec-title { font-size: 36.4px; }
.page-about .sec-title .sub { color: #e8e8e8; }
.page-about .history .sec-title .sub { color: rgba(59,105,145,.99); }
@media (max-width: 767px) {
  .page-about .sec-title, .page-about .history .sec-title { font-size: 27.3px; }
  .page-about .sec-title .sub { font-size: 27.3px; }
}

/* プロフィールの文章は両端をそろえる（日本語は文字の間で自然に調整） */
.profile-grid .text p { text-align: justify; text-justify: inter-character; line-break: strict; }

/* ショート動画の下の余白を、「主な出演」の見出しの文字の上の余白と見た目でそろえる（見出しの行の余白ぶん足す） */
.shorts { padding-bottom: 12px; }
@media (max-width: 767px) { .shorts { padding-bottom: 9px; } }
.svc-solo .svc-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.05) 100%); }

/* 「選ばれています」と「マジックショー」の間は広めに */
.chosen + .svc { margin-top: 170px; }
@media (max-width: 767px) { .chosen + .svc { margin-top: 100px; } }
/* 映像制作の写真は顔が右上にあるので、右上を基準に切り取る */
.svc-solo .svc-hero { background-position: 88% 8%; }
/* 学校公演の写真：舞台と子どもたちのあたりにズーム */
.svc-card figure img.zoom-crowd { transform: scale(1.4); transform-origin: 55% 80%; }
.svc-card:hover figure img.zoom-crowd { transform: scale(1.47); }
/* 映像制作（PC）：顔も手も入るよう高さを増やす。文章は縦の中央 */
@media (min-width: 768px) {
  .svc-solo .svc-hero { min-height: min(50vw, 960px); padding: 60px 0; display: flex; align-items: center; background-position: 88% 10%; }
  .svc-solo .svc-hero .wrap { width: 100%; }
}
/* マジックショーの写真は頭が上の方にあるので、上を基準に切り取る */
.svc-hero-magic { background-position: 80% 4%; }
/* 映像制作（PC）：写真全体を高さに合わせて右寄せ（背景が黒なので左は黒で続ける）。人物を少し小さく */
@media (min-width: 768px) {
  .svc-solo .svc-hero { min-height: min(42vw, 760px); background-color: #000; background-size: auto 100%; background-position: right center; }
}

/* 広い画面だけで改行する位置（1行目が収まる幅 1100px 以上） */
@media (max-width: 1159px) { .pc-br { display: none; } }
/* マジックショーの説明は2行に（「〜マジシャンです。」で改行） */
@media (min-width: 1160px) {
  .svc-lead { max-width: none; font-size: 16px; letter-spacing: .02em; } /* 各説明を区切りのいいところで2行に */
}

/* 出演レポートのジャンル別の色（薄い背景＋濃い文字） */
.rp-tags .g-magic    { background: #fdecec; color: #c4121c; }
.rp-tags .g-workshop { background: #e6f5ec; color: #1f7a45; }
.rp-tags .g-science  { background: #e6f0fb; color: #1a64b4; }
.rp-tags .g-mc       { background: #f0eafb; color: #6a3fb5; }
.rp-tags .g-produce  { background: #fdf0e3; color: #b8600e; }

/* 出演の年タブ */
.rp-tabs { display: flex; gap: 8px; margin: -8px 0 32px; border-bottom: 1px solid #e3e3e3; }
.rp-tabs button {
  position: relative; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #999;
  background: none; border: 0; padding: 12px 22px 14px; cursor: pointer; transition: color .2s;
}
.rp-tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .25s; }
.rp-tabs button:hover { color: #333; }
.rp-tabs button[aria-selected="true"] { color: #111; }
.rp-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.rp-tabs button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rp-panel[hidden] { display: none; }
@media (max-width: 767px) {
  .rp-tabs { margin: -4px 0 22px; gap: 0; }
  .rp-tabs button { flex: 1; font-size: 16px; padding: 12px 0 13px; }
}

/* 最近の出演の「主な出演」も、プロフィールページの見出しと同じ大きさ */
.rp-section .sec-title { font-size: 36.4px; }
@media (max-width: 767px) { .rp-section .sec-title { font-size: 27.3px; } }

/* 中身が短いページでも、フッターが画面の一番下に来るようにする（フッターの下に隙間を作らない） */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .breadcrumb { width: 100%; } /* 縦並びのときに縮んで中央に寄らないよう、横幅いっぱいにする（文字は左ぞろえ） */