@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
/* .noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #2B2B2B;
  background: #FAFAFA;
  line-height: 1.85;
  font-size: 16px;
  overflow-x: hidden;
}

/* ===== COLORS ===== */
:root {
  --blue: #0077B6;
  --beige: #F5F0E8;
  --white: #FAFAFA;
  --orange: #E8913A;
  --ink: #2B2B2B;
  --blue-light: #C1E8FB /* rgba(0, 119, 182, 0.08) */;
  --orange-light: rgba(232, 145, 58, 0.08);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; }

/* ===== LAYOUT ===== */
.container { max-width: 800px; margin: 0 auto; padding: 0 0 80px 0; }
.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* ===== SECTION HEADING WITH LINES ===== */
.section-heading {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
/* .section-heading::before,
.section-heading::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(0, 119, 182, 0.3);
  flex-shrink: 0;
} */
.section-heading h2 { font-size: 18px; color: var(--blue); white-space: nowrap; margin-top: 2em; }
.section-heading h2 .en { display: block; font-size: min(64px,16vw); font-weight: 800; }

h3.section-h3 { font-size:min(8vw,48px); color: var(--blue); white-space: nowrap; margin: 1em 0; font-weight: 200; text-align: center; letter-spacing: 0.1em; }
.section-sub {
  text-align: center;
  font-size: 14px;
  color: #777;
  letter-spacing: 0.08em;
  margin-top: -28px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  h3.section-h3 { white-space: wrap; font-feature-settings: "palt"; }
}

/* ===== CTA BUTTONS ===== */
.cta-primary { display: inline-block; background: var(--blue); padding: 0; margin: 30px 0 0 0; border-radius: 25px; transition: opacity 0.3s, transform 0.3s; cursor: pointer; border: none; }
.cta-primary:hover { opacity: 0.85; transform: translateY(-2px); }
.cta-primary a { display: block; color: #fff; text-decoration: none; font-size:min(15px,4vw); font-weight: 700; padding: 10px 30px; }
.cta-primary a:after { font-family: "Font Awesome 5 Free"; content: '\f13a'; font-weight: 900; margin-left: 5px; }
@media (max-width: 767px) {
  .cta-primary a { padding: 10px 15px; }
}

.cta-secondary {
  display: inline-block;
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 24px;
  text-decoration: none;
  transition: opacity 0.3s, transform 0.3s;
  background: transparent;
  cursor: pointer;
}
.cta-secondary:hover { opacity: 0.85; transform: translateY(-1px); }

/* ===== STICKY HEADER (mobile) ===== */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* background: rgba(0, 119, 182, 0.95); */
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  /* ぼかしの強さを指定 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
  z-index: 1000;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}
.sticky-header.visible { transform: translateY(0); }
.sticky-header .header-title { letter-spacing: 0.04em; }
.sticky-header .header-title img { width: 130px; }
.sticky-header .header-cta {
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-cta { position: fixed; right: 0px; top: 45vh;
  background-color: #0077B6; border-radius: 10px 0 0 10px; border:1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.85rem; transition:0.3s; z-index: 100; }
.btn-cta:hover {transform: translateY(-3px);}
.btn-cta a { display:inline-block; width: 32px; height: 280px; padding: 15px 10px 0 10px; line-height: 1; color: #fff; text-decoration: none; writing-mode: vertical-lr; }
.btn-cta a span { writing-mode: horizontal-tb; /* text-combine-upright: all; -ms-text-combine-horizontal: all; */ }
.btn-cta a:after {/*  display:inline;  */font-family: "Font Awesome 5 Free"; content: '\f13a'; font-weight: 900; margin-top: 5px; }

.link_btn { margin-top: 10px; transition:0.3s; }
.link_btn:hover { opacity: 0.85; transform: translateY(-2px); }
.link_btn a { display:inline-flex; align-items:center; gap:6px; padding:6px 15px; background:var(--blue); color:#fff; border-radius:6px; font-size:12px; font-weight:700; text-decoration:none; letter-spacing:0.02em; }
.link_btn a:before { font-family: "Font Awesome 5 Free"; content: '\f35d'; font-weight: 900; margin-left: 5px; }

/*YouTubeレスポンシブ*/

.movie_wrap { width: 100%; height: 0; position: relative; padding-top: 56.25%; overflow: hidden; }
.movie_wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.yt-links3 { display:flex; gap:5px; margin-top:10px; flex-wrap:nowrap;  max-width: 570px; }
.yt-links { transition:0.3s; width: 100%; height: 0; position: relative; padding-top: 18.75%; /* padding-top: 56.25%; */ overflow: hidden; }
.yt-links.w33 { width: 33.3%; }
.yt-links:hover { opacity: 0.85; transform: translateY(-2px); }
.yt-links iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.yt-links a { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; background:#0077B6; color:#fff; border-radius:6px; font-size:12px; font-weight:700; text-decoration:none; letter-spacing:0.02em; }
.yt-links a:before { font-family: "Font Awesome 5 Brands"; content: '\f167'; font-weight: initial; font-size: 1.2em; margin-left: 5px; }

@media only screen and (max-width: 767px) {
  .yt-links3 { display:block; }
  .yt-links { padding-top: 56.25%; }
  .yt-links.w33 { width: 100%; }
}

/* ============================================
 ハンバーガーメニュー
============================================ */
	/*開閉ボタン*/
	#nav_toggle { display:block; width:40px; height:40px; position:fixed; top:30px; right:30px; z-index:300; cursor :pointer; z-index: 3000; }
	#nav_toggle div { position:relative; }
	#nav_toggle span{ display:block; height:3px; background:#fff; position:absolute; width:100%; left:0;
                    -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; transition:0.2s ease-in-out; }
	#nav_toggle.visible span { background:#4ba4dc; }
	#nav_toggle span:nth-child(1){ top:0px; }
	#nav_toggle span:nth-child(2){ top:14px; }
	#nav_toggle span:nth-child(3){ top:28px; }

	/*開閉ボタンopen時*/
  #nav_toggle.open span { background:#4ba4dc; }
  #nav_toggle.open span:nth-child(1) { top:12px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); transform:rotate(135deg); }
  #nav_toggle.open span:nth-child(2) { width:0; left:50%; }
  #nav_toggle.open span:nth-child(3) { top:12px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); transform:rotate(-135deg); }

nav.head { display:none; position:fixed; top:0px; left:0; width:100%; background:#fff; padding:20px 0px; text-align:center; box-shadow:0 2px 2px rgba(0,0,0,.1); z-index: 2000; }

#gnavi { display: block; /* display:flex; */ }
#gnavi li a { display:block; padding:10px; font-size:1.2rem; transition:.3s box-shadow; text-decoration: none; color: var(--blue); font-weight: 800; }
#gnavi li a.on,
#gnavi li a:hover { background-color: #e6f6fd; }


/* ===== FADE-IN ANIMATION ===== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== S1: HERO ===== */
.s1-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image:
    linear-gradient(165deg, rgba(189, 231, 253, 0.1) 0%, rgba(0,119,182,0.3) 40%, rgba(0,119,182,0.40) 70%, rgba(0,119,182,0.1) 100%),
    url('../assets/mainv_bg.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: -1;
}
/* .s1-hero::before {
  content: '10';
  position: absolute;
  font-size: clamp(200px, 40vw, 500px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
} */
.s1-content {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
}
.s1-year {
  font-size: 100px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .s1-year { font-size: 140px; }
}
.s1-10th-logo {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 12px;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
@media (min-width: 768px) {
  .s1-10th-logo { max-width: 560px; margin-bottom: 30px; }
}
.s1-logo-note {
  display: block;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgba(220, 60, 60, 0.92);
  padding: 5px 14px;
  border-radius: 4px;
  margin: 0 auto 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
@media (min-width: 768px) {
  .s1-logo-note { font-size: 12px; margin-bottom: 28px; }
}
.s1-catch {
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 30px;
  letter-spacing: 0.2em;
}
.s1-sub {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em;
  margin-bottom: 50px;
}
.s1-sub2 { font-size: 16px; font-weight: 600; margin: 20px; }

/* ===== S2: WHAT ===== */
.s2-what { padding:0px 0 80px 0; text-align: center; background: #fff; position: relative; }
.s2-what .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s2-what .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s2-desc { max-width: 600px; margin: 0 auto 3em auto; font-size: min(15px,4.2vw); line-height: 2; color: #555; }
.s2-criteria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 60px;
  max-width: 800px;
  margin: 0 auto 60px;
}
.s2-criteria-item {
  text-align: center;
}
.s2-criteria-icon {
  width: 100px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 22px;
}
.s2-criteria-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--blue);
}
.s2-criteria-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.7;
}
.s2-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.s2-number-item { text-align: center; }
.s2-number-value { font-size: 64px; font-weight: 800; color: var(--blue); line-height: 1.2; }
.s2-number-value .small { font-size: 0.4em; font-weight: 600; }
.s2-number-label { font-size: 13px; color: #777; margin-top: 5px; }

/* ===== FULL-WIDTH PHOTO BAND ===== */
.photo-band {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  letter-spacing: 0.06em;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
.photo-band-1 {
  background-image:
    linear-gradient(180deg, rgba(0,80,130,0.45) 0%, rgba(0,40,80,0.18) 40%, rgba(0,40,80,0.30) 100%),
    url('assets/band-activity.jpg');
  background-position: center bottom;
}
.photo-band-3 {
  background-image:
    linear-gradient(135deg, rgba(232,145,58,0.22) 0%, rgba(240,168,85,0.18) 40%, rgba(0,119,182,0.28) 100%),
    url('assets/band-sunset.jpg');
  background-position: center 55%;
}

/* ===== S2: story ===== */
.s2-story { padding:0 0 80px 0; background: #EFF9FE; position: relative; }
.s2-story .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s2-story .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s2-story .container { margin-bottom: 50px; }
.s2-case {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 50px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.s2-case:last-child { margin-bottom: 0; }
.s2-case-photo {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,119,182,0.18) 0%, rgba(77,196,232,0.35) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.s2-case-photo-ph {
  color: rgba(255,255,255,0.95);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.s2-case-number {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  z-index: 2;
}
.s2-case-content { flex: 1; min-width: 0; padding-top: 0px; }
.s2-case-title {
  font-size:min(24px,6.5vw);
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--blue);
  line-height: 1.4;
}
.s2-case-text {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
}

/* ===== S3: TIMELINE (3-tier structure) ===== */
.s3-timeline { padding:0 0 80px 0; background: #EFF9FE; position: relative; }
/* .s3-timeline img.sec_head { width: max(101vw,1200px); position: absolute; top: -45px; right: 0; left: 0; margin: 0 auto; } */
.s3-timeline .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s3-timeline .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s3-timeline .container { max-width: 820px; }
.timeline-wrapper { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 50px; }
.timeline-nav { flex: 0 0 56px; position: sticky; top: 72px; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.timeline-nav a { display: block; padding: 3px 0; border-radius: 4px; transition: color 0.2s, background 0.2s;
  font-size: 12px; color: #9aa3ad; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; text-align: center; }
.timeline-nav a:hover { color: var(--blue); background: rgba(0, 119, 182, 0.08); }
.timeline-nav a.active { color: #fff; background: var(--blue); }
.timeline-track { position: relative; flex: 1; max-width: 640px; margin: 0; padding-left: 8px; }
.timeline-track::before { content: ''; position: absolute; left: 20px; top:20px; bottom: 0; width: 2px;
  background: rgba(0, 119, 182, 0.15); }

.timeline-item { position: relative; padding: 18px 0 18px 56px; }
.timeline-item::before { display:none;
  content: ''; position: absolute; left: 15px; top: 28px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue); border: 3px solid #FAFAFA; z-index: 2; }
.timeline-year { margin:0 0 5px -10px; position: relative; z-index:2; }
.timeline-year span { display: inline-block; background: var(--blue-light); padding: 4px 14px; border-radius:20px;
  color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-align:center; }
.timeline-card { background: #fff; border-radius: 10px; padding: 16px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: relative; z-index: 1; }
.timeline-card .yt-links { display: inline-block; }
@media (max-width: 767px) {
  #year-2026-6.timeline-item-medium .timeline-year span { font-size: 10px; }
}

/* === 大カード (timeline-item-large) - emphasis === */
.timeline-item-large { padding:33px 0 0px 0; }
.timeline-item-large::before { width: 18px; height: 18px; left: 12px; top: 36px; background: var(--orange); }
.timeline-item-large .timeline-year span { background: var(--blue); font-size: 14px; padding: 6px; min-width:6em; color: #fff; }
.timeline-item-large .timeline-card { padding: 0; /* padding: 26px 32px; */ margin:-60px 0 0 50px;
  border-left: 4px solid var(--blue); box-shadow: 0 2px 8px rgba(0,0,0, 0.12); }
.timeline-item-large .timeline-card-title { font-size: 18px; margin-bottom: 10px; color: var(--blue); }
.timeline-item-large .timeline-card-text { font-size: 14px; line-height: 1.8; }
.timeline-card-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--ink); line-height: 1.4; }
.timeline-card-text { font-size: 13px; color: #666; }
.timeline-card-txt_img { display: flex; }
.timeline-card-txt_img .txt_area { width: 510px; padding: 20px 10px 20px 32px; }
.timeline-card-txt_img .txt_area .cta-primary a { font-size: 13px; }
.timeline-card-txt_img .img_area { width: 130px; margin: 0; padding: 0; line-height: 0; }
.timeline-card-txt_img .img_area img { border-radius: 0 10px 10px 0; width: 100%;
  height: 100%;
  object-fit: cover;}
.timeline-item-large .cta-primary { margin-top: 10px; }
@media (max-width: 767px) {
  .timeline-card-txt_img .txt_area { width: 100%; }
  .timeline-card-txt_img { display: block; }
  .timeline-card-txt_img .img_area { width: 100%; margin-top: 10px; }
  .timeline-card-txt_img .img_area img { border-radius: 0 0 10px 10px; }
}

/* === 中カード (timeline-item-medium) === */
.timeline-item-medium { padding:25px 0 0 0px; }
.timeline-item-medium::before { width: 11px; height: 11px; left:5px; top:17px; }
.timeline-item-medium .timeline-year span { font-size: 12px; padding:3px 7px; min-width:6em; }
.timeline-item-medium .timeline-card { margin:-43px 0 0 50px; padding: 12px 20px 12px 38px; background: rgb(255, 255, 255, 0.7); }
.timeline-item-medium .timeline-card-title { font-size: 13px; margin-bottom: 4px; }
.timeline-item-medium .timeline-card-text { font-size: 12px; line-height: 1.7; }

/* === 小エントリ (timeline-item-small) - minimal inline === */
.timeline-item-small { padding:10px 0 5px; }
.timeline-item-small::before { width: 7px; height: 7px; left: 17px; top: 13px;
  background: #aab4c0; border-width: 2px; }
.timeline-item-small .timeline-year { display: inline-block; margin-bottom: 0; margin-right: 10px; vertical-align: middle; }
.timeline-item-small .timeline-year span { background:#fff; border: 1px solid rgba(0,119,182,0.25); padding: 1px 3px; min-width:6em;
  color: #888; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.timeline-item-small .timeline-card { background: transparent; box-shadow: none; vertical-align: middle;
  padding: 0; margin:-22px 0 0 60px; }
.timeline-item-small .timeline-card-title { margin-bottom: 0;
  font-size: 12px; color: #777; font-weight: 400; line-height: 1.6; }
.timeline-item-small .timeline-card-text { display: none; }

/* ===== S4: MONUMENT PJ ===== */
.s4-monument { padding:0 0 80px 0; background: #fff; position: relative; }
.s4-monument .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s4-monument .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }

.s4-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; }
.s4-monument-image { position: relative; width: 100%; max-width: 680px; margin: 0 auto 28px; overflow: hidden; }
.s4-monument-image img { width: 100%; height: auto; display: block; }
.s4-monument-caption { position: absolute; right: 10px; bottom: 10px; font-size: 11px; letter-spacing: 0.12em; color: rgba(0, 0, 0, 0.75); text-transform: uppercase; font-weight: 600; line-height: 1; }
.s4-inner p { font-size: 15px; line-height: 2; margin-bottom: 32px; color: var(--blue); }
.s4-inner .cta-primary { margin-left: auto; margin-right: auto; }

/* ===== S5: WMG2027 ===== */
.s5-wmg { padding:0px 0 80px 0; background: #fff; text-align: center; position: relative; }
.s5-wmg .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s5-wmg .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s5-wmg .section-heading h2 { font-size: 18px; color: #2B2B2B; white-space: nowrap; margin-top: 3em; }
.s5-wmg-logo { text-align:center; margin: 40px 0 0px 0;transition: opacity 0.3s, transform 0.3s; }
.s5-wmg-logo:hover {opacity: 0.85; transform: translateY(-2px);}
.s5-wmg-logo a { }
.s5-wmg-logo a img { max-width:480px; width:100%; height:auto; display:block; margin: 0 auto; }
.s5-wmg-logo.link_btn { margin-bottom: 50px; }

.s5-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.s5-number-card {
  background: #FAFAFA;
  border-radius: 12px;
  padding: 20px 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
.s5-number-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.4;
}
.s5-number-value.date { margin-top: 0.6em; }
.s5-number-value span.small { font-size: 0.85em; }
.s5-number-value span.large { font-size: 1.5em; }
.s5-number-label { font-size: 13px; color: #777; margin-bottom: 5px; }
.s5-about { text-align:left; font-size:15px; color:#666; max-width:800px; margin:20px auto 0; line-height:1.8; }
.s5-event-detail { max-width:800px; margin:30px auto 0 auto; padding:25px 40px; background:#C9A62C; border-radius:15px; color: #fff; }
.s5-event-detail h3 { margin: 0 0 15px 0; padding: 0; }
.s5-event-detail p { font-size:16px; line-height:1.8; margin:0; padding: 0; text-align: left; }
.s5-desc {
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 15px;
  color: #555;
  line-height: 2;
  text-align: left;
}
.s5-messages {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.s5-message {
  background: var(--beige);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.s5-message-label {
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 4px;
}
.s5-message-text {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.8;
}
@media (max-width: 767px) {
  .s5-event-detail { padding: 15px 20px; }
  .s5-event-detail p { line-height: 1.6; }
}

/* ===== S6: MOVIE ===== */
.s6-movie { padding:0 0 80px 0; background: #0C63AA; text-align: center; position: relative; }
.s6-movie .sec_head { top: -45px; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s6-movie .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s6-movie .section-heading h2 { color: #fff; letter-spacing: 0.1em; }
.s6-movie .section-heading h2 img { display: block; margin-top: 30px; width: min(90vw, 465px); }
.s6-desc {
  max-width: 620px;
  margin: 60px auto;
  font-size:min(14px,4vw) ;
  font-weight: 200;
  color: #fff;
  line-height: 2;
}
.s6-release { text-align:center; font-size:14px; color:#fff; font-weight:700; margin:20px 0; letter-spacing:0.04em; line-height:1.9; }
.s6-movie_yt_btn { text-align:center; font-size:12px; color:#fff; margin-top:12px; }
.s6-embed-placeholder {
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #2B2B2B;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

/* ===== S7: VOICES ===== */
.s7-voices { padding:0 0 80px 0; background: url(../assets/bg_people.webp) no-repeat; background-size: cover; position: relative; }
.s7-voices .sec_head { top: 0; width: 100vw; height:max(5vw,46px); position: relative; overflow: hidden; }
.s7-voices .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s7-voices .container { margin-bottom: 50px; }
.s7-voices .section-heading h2 { color: #fff; font-feature-settings: "palt"; letter-spacing: 0.1em; }
.s7-interview-status {
  max-width: 600px;
  margin: 0 auto 48px;
  padding: 14px 20px;
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  font-size: 13px;
  color: var(--blue);
  line-height: 1.8;
  border-radius: 0 4px 4px 0;
}
.s7-interview-status strong { font-weight: 700; margin-right: 4px; }
.s7-quote {
  max-width: 600px;
  margin: 0 auto 56px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
}
.s7-quote:last-child { margin-bottom: 0; }
.s7-quote-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 10px;
  text-align: center;
  line-height: 1.5;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  margin: 0 auto;
}
.s7-quote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s7-quote-body { min-width: 0; }
.s7-quote-text {
  font-size: 15px;
  font-weight: 200;
  line-height: 2;
  color: #fff;
  margin-bottom: 14px;
  padding-left: 20px;
  /* border-left: 3px solid rgba(0, 119, 182, 0.2); */
}
.s7-quote-attribution {
  text-align: right;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
.s7-quote-name {
  font-weight: 700;
  color: #fff;
}
.s7-quote-role {
  font-size: 12px;
  font-weight: 200;
  color: #fff;
  margin-right: 10px;
}
.s7-quote-pending {
  display: inline-block;
  font-size: 10px;
  color: #c24545;
  /* background: rgba(194, 69, 69, 0.1); */
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .s7-quote {
    grid-template-columns: 1fr;
    gap: 16px;
  }/*
  .s7-quote-photo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }*/
  .s7-quote-attribution {
    /* text-align: left; */
  }
}

/* ===== S8: FOOTER ===== */
.s8-footer { background: var(--blue); color: #fff; text-align: center; padding:0; position: relative; }
.s8-footer .sec_head { top: -30px; width: 100vw; height:max(4vw,46px); position: relative; overflow: hidden; }
.s8-footer .sec_head img { position: absolute; width: max(101vw,1200px); object-position: center bottom; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.s8-footer .container { padding:0px 0 20px 0; max-width: 1000px;}
.s8-closing {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}
.s8-cta-text {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 32px;
}
.s8-footer-flex { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; align-items:center; }
.s8-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 0px; flex-wrap: wrap; }
.s8-social a { color: rgba(255,255,255,1); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; transition: 0.3s; }
.s8-social a:hover { color: rgba(255,255,255,1); transform: translateY(-2px); }
.s8-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0px;
}
.s8-links a {
  color: rgba(255,255,255,1);
  text-decoration: none;
  font-size:min(14px,3.8vw);
  transition: color 0.3s;
}
.s8-links a:hover { color: rgba(255,255,255,0.8); }
.s8-copyright { font-size: 15px; color: rgba(255,255,255,0.8); }

/* ===== PC/SP ===== */
.hidePC { display:none; }
.hideSP { display:block; }
@media only screen and (max-width: 767px) {
    .hidePC { display:block !important; }
    .hideSP { display:none !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .container { padding: 0 5vw; }
  .s2-criteria { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .s2-numbers { grid-template-columns: 1fr; gap: 16px; }
  .s5-numbers { grid-template-columns: 1fr; gap: 16px; }
  .timeline-item-large .timeline-card { /* padding: 20px 22px; */ }
  .timeline-item-large .timeline-card-title { font-size: 16px; }
  .timeline-wrapper { display: block; }
  .timeline-nav { display: none; }
  .timeline-track { margin: 0 auto; }
  .s2-case { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .s2-case-title { font-feature-settings: "palt"; }
  .s2-case-photo { width: 130px; height: 130px; }
  .s2-case-content { padding-top: 0; }
  .photo-band { height: 220px; }
  .s4-monument { min-height: 400px; /* padding: 60px 24px; */ }
  .s4-monument-image { max-width: 90%; border-width: 2px; margin-bottom: 20px; }
  .s4-monument-caption { font-size: 10px; }
  .s1-year { font-size: 80px; }
  .section-heading h2 { font-size: 18px; margin-top: 0em; }
  .section-heading h2.workshop span.en { font-size: 50px; }
  .s7-voices .container { margin-top: 50px; }
  .s8-closing { font-size: 22px; }
  .s8-links { gap: 16px; }
  .s3-timeline .container { padding: 0 5vw 0 2vw; }
  .timeline-card-txt_img .txt_area { padding: 20px 10px 0 25px; }
  .timeline-item-medium .timeline-card { padding: 12px 20px 12px 25px; }
  .s8-footer-flex { display: block; }
  .s8-footer .sec_head { top: -25px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .s2-criteria { gap: 20px; }
}