/* 手塚雄二サイト — Project Seven 非依存スタイル */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 100%;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
}

img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: inherit; }

/* ---- レイアウトコンテナ ---- */
.p7LBM.max-1000 {
  max-width: 1000px;
  margin: 0 auto;
  background: transparent;
}

/* 上部（ロゴ + Ken Burns）は body 背景を透かす */
#p7LBM_1 > .lbm-row:first-child,
#p7LBM_1 > .lbm-row:first-child .lbm-col-wrapper,
#p7LBM_1 > .lbm-row:first-child .lbm-column {
  background: transparent;
}

/* タブ以下のコンテンツ領域のみ白背景 */
#p7LBM_1 > .lbm-row:last-child {
  background: #fff;
}

.lbm-row { display: block; }
.lbm-col-wrapper { width: 100%; }
.lbm-column.width-100 { width: 100%; }

/* ---- カバー画像スライドショー ---- */
.p7IGM03,
.p7IGM_wrapper,
.p7IGM03_layout {
  margin: 0 auto;
  line-height: 1;
  background: transparent;
}
.p7IGM03_layout { text-align: left; padding: 12px 0 0; }
.p7IGM03_layout p { margin: 0; }
.p7IGM03_FSwrapper,
.p7IGM03_FSIMGwrapper,
.p7IGM03_FSimage {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}
.p7IGM03_IGMloading { display: none; }
.p7IGMimage-wrapper.ken-burns-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
  background: transparent;
}
.ken-burns-stage {
  position: absolute;
  inset: 0;
}
.ken-burns-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.ken-burns-layer.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.ken-burns-layer img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) scale(1.1);
  transform-origin: center center;
  will-change: transform;
}
.ken-burns-layer img.kb-running {
  transition: transform linear;
}
.p7IGM03_image.legacy-hidden { display: none !important; }
.p7IGM03_fs_img.is-fading { opacity: 0; }
.p7IGM03_thumbswrapper { margin-top: 8px; text-align: center; }
.IGMno-display { display: none !important; }

/* ---- タブパネル ---- */
.p7OPM-01.p7OPM { padding: 0; border: 1px solid #000; }
.p7OPM-layout { display: flex; flex-direction: column; }
.opm-tabs-wrapper { background: #222; }
.opm-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.opm-tabs ul li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  background: #222;
  color: #999;
  border: none;
  cursor: pointer;
}
.opm-tabs ul li a:hover { color: #ddd; }
.opm-tabs ul li a.open {
  background: #fff;
  color: #000;
  position: relative;
}
.opm-tabs ul li a.open::before { content: "✓ "; }
.opm-panel-wrapper { background: #fff; color: #000; }
.opm-panel { display: none; }
.opm-panel.is-active { display: block; }
.opm-noscript .opm-panel.is-active { display: block; }
.opm-panel-content { padding: 20px 36px; }

/* ---- コンテンツセクション ---- */
.p7HMY { max-width: 100%; }
.hmy-section { margin-bottom: 0; }
.hmy-content-wrapper { padding: 16px 20px; }
.hmy-border-content-all { border: 1px solid #ccc; }
.hmy-border-content-top { border-top: 1px solid #ccc; }
.hmy-border-content-top-bottom { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.hmy-color-content-white { background: #fff; }
.hmy-color-content-beige { background: #f5f0e6; }
.hmy-color-content-silver { background: #e9e9e9; }
.hmy-content.hmy-left { text-align: left; }
.hmy-content h1 { font-size: 200%; font-weight: normal; margin: 0.5em 0; }

/* ---- スクロールフェードイン ---- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(44px) scale(0.98);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-index, 0) * 85ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- グリッド ---- */
.p7QGM .qgm-grid { display: grid; gap: 12px; }
.p7QGM.qgm-pad .qgm-grid { padding: 12px; }
.qgm-col-2 { grid-template-columns: 1fr 1fr; }
.qgm-col-2-2575 { grid-template-columns: 25% 75%; }
.qgm-col-1 { grid-template-columns: 1fr; }
.qgm-b-all .qgm-col { border: 1px solid #ccc; }
.qgm-col-pad .qgm-col { padding: 12px; }
.qgm-col-bg-lightsand { background: #f5f0e6; }
.qgm-gap { gap: 12px; }

/* ---- リンクボタン ---- */
.p7TKL.TKL.tkl-BTN {
  display: inline-block;
  padding: 6px 14px;
  margin: 4px 0;
  text-decoration: none;
  border: 1px solid #666;
  border-radius: 3px;
}
.tkl-BGL-beige { background: #f5f0e6; }
.tkl-BGL-silver { background: #e9e9e9; }
.tkl-BGL-white { background: #fff; }
.tkl-BGL-skyblue { background: #d4e8f7; }
.tkl-LC-black { color: #000; }
.tkl-LC-blue { color: #0015bd; }
.tkl-HC-gray:hover { color: #555; }
.tkl-TD-L-dot { text-decoration: underline dotted; }
.tkl-TD-L-solid { text-decoration: underline; }
.tkl-TD-L-none { text-decoration: none; }
.tkl-TD-H-none:hover { text-decoration: none; }
.tkl-BRD-dk { border-color: #333; }

/* ---- 作品集タブ ---- */
.works-index {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 16px;
}

.works-index-intro {
  margin: 0 0 24px;
  text-align: center;
  font-size: 0.95rem;
  color: #444;
  letter-spacing: 0.04em;
}

.works-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.works-index-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #ccc;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.works-index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #999;
}

.works-index-card-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0ebe3;
}

.works-index-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.works-index-card:hover .works-index-card-figure img {
  transform: scale(1.04);
}

.works-index-card-text {
  flex: 1;
  padding: 16px 18px 14px;
  border-top: 3px solid #888;
}

.works-index-card--autumn .works-index-card-text {
  border-top-color: #8b4513;
}

.works-index-card--spring .works-index-card-text {
  border-top-color: #2d6a4f;
}

.works-index-card-season {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}

.works-index-card--autumn .works-index-card-season {
  color: #6b3410;
}

.works-index-card--spring .works-index-card-season {
  color: #1b4332;
}

.works-index-card-heading {
  display: block;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 8px;
}

.works-index-card-detail {
  display: block;
  font-size: 0.8rem;
  color: #666;
}

.works-index-card-arrow {
  display: block;
  padding: 0 18px 14px;
  text-align: right;
  font-size: 1.1rem;
  color: #999;
  transition: color 0.2s ease, transform 0.2s ease;
}

.works-index-card:hover .works-index-card-arrow {
  color: #333;
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .works-index-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .works-index-intro {
    text-align: left;
    margin-bottom: 20px;
  }
}

/* ---- NHK 放送予定 ---- */
.broadcast-notice {
  max-width: 640px;
  margin: 0 auto;
}

.broadcast-notice-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em 1.25em;
  margin: 0 0 1em;
  padding-bottom: 0.75em;
  border-bottom: 1px solid #ccc;
}

.broadcast-notice-label {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.broadcast-notice-channel {
  margin: 0;
  font-weight: 700;
  color: #0015bd;
  letter-spacing: 0.06em;
}

.broadcast-notice-logo {
  margin: 0 0 1em;
  text-align: center;
}

.broadcast-notice-logo img {
  display: inline-block;
  width: min(331px, 100%);
  height: auto;
}

.broadcast-notice-title {
  margin: 0 0 0.75em;
  text-align: center;
  line-height: 1.5;
}

.broadcast-notice-subtitle {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.12em;
  margin-bottom: 0.35em;
}

.broadcast-notice-lead {
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

.broadcast-notice-body {
  margin: 1em 0 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: #333;
}

.broadcast-notice-schedule {
  margin: 0;
  padding: 14px 16px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-left: 4px solid #0015bd;
}

.hmy-color-content-beige .broadcast-notice-schedule {
  background: rgba(255, 255, 255, 0.7);
}

.broadcast-notice-schedule--footer {
  margin-top: 1em;
}

.broadcast-notice-row {
  display: flex;
  align-items: baseline;
  gap: 12px 16px;
}

.broadcast-notice-row + .broadcast-notice-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.broadcast-notice-term {
  flex: 0 0 5.5em;
  font-size: 0.82rem;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.06em;
}

.broadcast-notice-value {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
}

.broadcast-notice-row--rerun .broadcast-notice-term,
.broadcast-notice-row--rerun .broadcast-notice-value {
  color: #555;
}

@media (max-width: 480px) {
  .broadcast-notice-row {
    flex-direction: column;
    gap: 2px;
  }

  .broadcast-notice-term {
    flex-basis: auto;
  }
}

/* ---- 画像ローテーター ---- */
.p7IR2 { margin: 12px 0; }
.p7ir2-box { text-align: center; overflow: hidden; }
.p7ir2-image { max-width: 100%; height: auto; }
.p7ir2_desc {
  margin-top: 8px;
  font-size: 90%;
  color: #333;
  text-align: left;
}
.p7ir2-list, .p7IRMlist { display: none !important; }

/* ---- 動画 embed ---- */
.tk-video-wrapper { margin: 12px 0; max-width: 100%; }
.tk-video-wrapper video,
.tk-video-wrapper iframe { max-width: 100%; width: 100%; display: block; height: auto; }
.tk-video-wrapper iframe { aspect-ratio: 16/9; }
.tk-border-dk { border: 1px solid #666; padding: 4px; }

/* ---- ライトボックス ---- */
.pbx-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pbx-panel.is-open { display: flex; }
.pbx-content {
  position: relative;
  background: #fff;
  max-width: 960px;
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  border: 2px solid #333;
}
.pbx-close { text-align: right; margin-bottom: 8px; }
.pbx-close a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  padding: 4px 12px;
  border: 1px solid #333;
}
.pbx-close a:hover { background: #eee; }

/* ---- モーダル内ギャラリー ---- */
.p7IRM01 { position: relative; }
.p7IRMpaginator ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.p7IRMpaginator a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #666;
  text-decoration: none;
  color: #000;
}
.p7IRMpaginator a.is-active { background: #222; color: #fff; }
.p7IRMimage { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.p7IRMdesc_wrapper, .p7IRMdesc_open_wrapper { display: none; }

/* ---- スクロールトップ ---- */
.p7STT {
  position: fixed;
  right: 16px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.p7STT.is-visible { opacity: 1; visibility: visible; }
.p7STT.right { right: 16px; }
#p7STT_2 { bottom: 80px; }
#p7STT_1 { bottom: 24px; }
.p7STT-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(34, 34, 34, 0.85);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 20px;
}
.p7STT-anchor::before { content: "↑"; }
.p7STT.dark .p7STT-anchor span { display: none; }

/* ---- 動画ボックス ---- */
.p7VBM.vbm-wrapper { position: relative; max-width: 100%; }
.p7VBM video { width: 100%; display: block; }
.vbm-toolbar {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
}
.vbm-toolbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  text-decoration: none;
  color: #222;
  font-size: 28px;
}
.vbm-toolbar a::before { content: "▶"; }
.vbm-playing .vbm-toolbar a::before { content: "❚❚"; font-size: 18px; }
#p7VBM_1 { display: none; }

/* ---- テキストエフェクト ---- */
#p7HFX_4 { display: inline; }
#p7HFXc_4.is-glow { animation: hfx-glow 1.5s ease-in-out; }
@keyframes hfx-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; color: #0015bd; }
}

/* ---- グラデーション背景 ---- */
[data-gba-clr] { transition: background 1s ease; }

/* ---- ユーティリティ ---- */
.style6 { font-size: 95%; }
hr { border: none; border-top: 1px solid #ccc; margin: 16px 0; }

@media (max-width: 767px) {
  .opm-tabs ul { flex-direction: column; }
  .opm-tabs ul li a { border-bottom: 1px solid #444; }
  .opm-panel-content { padding: 16px; }
  .qgm-col-2, .qgm-col-2-2575 { grid-template-columns: 1fr; }
  body { font-size: 90%; }
}