@charset "UTF-8";
/*
 * SU 2026 共通スタイル
 *
 * 目次
 * 01 基本設定・ヘッダー・共通見出し
 * 02 トップ：背景・KV・丸写真
 * 03 トップ：Concept・History・活動一覧
 * 04 トップ：Logo Story・Report・Contact
 * 05 下層：本文・カード・関連スライダー
 * 06 SU History：トップ・下層沿革
 * 06 下層：SU project / Wild Wind 沿革
 * 07 レスポンシブ設定
 *
 */
/* =========================================================
   01 基本設定・ヘッダー・共通見出し
   ========================================================= */
/* 共通色・フォント */
:root {
  --su-base: #181e1d;
  --su-navy: #17305d;
  --su-blue: #1a3b87;
  --su-sky: #00a1e9;
  --su-yellow: #fff225;
  --su-beige: #e0d8ca;
  --su-paper: #f6f3ed;
  --su-muted: #68706e;
  --su-line: rgba(23, 48, 93, .14);
  --su-font: ProximaNova, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans JP", sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--su-anchor-offset, 98px);
  overflow-x: hidden;
  background: var(--su-paper);
}

body {
  min-width: 0;
  margin: 0;
  color: var(--su-base);
  background: var(--su-paper);
  font-family: var(--su-font);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

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

body :where(h1, h2, h3, h4, h5, h6,
p, li, dt, dd, a,
button, input, textarea, select) {
  font-family: inherit;
}

img {
  max-width: 100%;
}

a,
a:link,
a:visited {
  color: inherit;
  text-decoration-color: rgba(24, 30, 29, 0.42);
  text-underline-offset: 0.22em;
}

a:hover {
  opacity: 1;
}

/* 2025の装飾 */
#fix-border,
aside,
.news-bubble,
#contact .js-bubble {
  display: none;
}

.object,
.sp-bubble {
  display: none;
  pointer-events: none;
}

/* =========================================================
ヘッダー
========================================================= */
header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 82px;
  padding: 18px 40px;
  box-sizing: border-box;
  background: rgba(246, 243, 237, 0.93);
  border-bottom: 1px solid var(--su-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

header h1 {
  position: relative;
  z-index: 903;
  width: 92px;
  margin: 0;
  flex: 0 0 auto;
}

header h1 a {
  display: block;
}

header h1 img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
背景オーバーレイ
========================================================= */
header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 900;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(23, 48, 93, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

header.is-menu-open::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

header.is-menu-open::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
ハンバーガー
========================================================= */
.menu-toggle {
  position: relative;
  z-index: 903;
  width: 52px;
  height: 46px;
  min-width: 52px;
  margin: 0;
  padding: 0;
  flex: 0 0 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

/* 2本線 */
.menu-toggle span {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: block;
  visibility: visible;
  opacity: 1;
  width: 30px;
  height: 1px;
  background-color: var(--su-navy);
  transform-origin: center;
  transition: top 0.3s ease, transform 0.3s ease;
}

.menu-toggle span:first-child {
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
}

.menu-toggle span:last-child {
  top: calc(50% + 6px);
  transform: translate(-50%, -50%);
}

/* hover */
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:focus-visible {
  background: transparent;
  outline: none;
}

.menu-toggle:hover span,
.menu-toggle:focus span,
.menu-toggle:focus-visible span {
  display: block;
  visibility: visible;
  opacity: 1;
  background-color: var(--su-navy);
}

/* 開いたときは× */
header.is-menu-open .menu-toggle span:first-child {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

header.is-menu-open .menu-toggle span:last-child {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================================================
メニューパネル
========================================================= */
header .global-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 902;
  display: block;
  width: min(560px, 100%);
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 118px 48px 50px;
  overflow-y: auto;
  box-sizing: border-box;
  background: rgba(246, 243, 237, 0.98);
  border-left: 1px solid var(--su-line);
  box-shadow: -18px 0 46px rgba(23, 48, 93, 0.12);
  transform: translateX(101%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s ease;
}

header.is-menu-open .global-menu {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
メニュー一覧
========================================================= */
.global-menu__list,
.global-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-menu__item {
  margin: 0;
  padding: 0;
  border: 0;
}

/* =========================================================
通常メニュー
========================================================= */
.global-menu__item > a,
.global-menu__activities-link {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 66px;
  margin: 0;
  padding: 7px 12px 3px;
  box-sizing: border-box;
  background: transparent;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 27px;
  font-weight: 100;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: 0.06em;
  transform: skewX(-2deg);
  text-decoration: none;
}

/* 通常項目 */
.global-menu__item > a {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--su-line);
  box-shadow: inset 0 0 0 transparent;
  transition: padding-left 0.25s ease, border-bottom-color 0.25s ease, box-shadow 0.25s ease;
}

/* 旧CSSの短い黄色線を削除 */
.global-menu__item > a::before,
.global-menu__item > a::after {
  display: none;
  width: 0;
  content: none;
  background: none;
}

/* 通常項目だけ右へ移動 */
.global-menu__item > a:hover,
.global-menu__item > a:focus-visible {
  padding-left: 26px;
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--su-yellow);
  outline: none;
}

/* =========================================================
Activitiesの1行
========================================================= */
.global-menu__activities-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 66px;
  border-bottom: 1px solid var(--su-line);
  box-shadow: inset 0 0 0 transparent;
  transition: border-bottom-color 0.25s ease, box-shadow 0.25s ease;
}

/* =========================================================
Activitiesの文字リンク
========================================================= */
.global-menu__activities-link {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  transition: padding-left 0.25s ease;
}

/* hoverで文字を右へ移動 */
.global-menu__activities-link:hover,
.global-menu__activities-link:focus-visible {
  padding-left: 26px;
  color: var(--su-navy);
  outline: none;
}

/* hoverで行全体に黄色線 */
.global-menu__activities-row:has(.global-menu__activities-link:hover),
.global-menu__activities-row:has(.global-menu__activities-link:focus-visible) {
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--su-yellow);
}

/* =========================================================
Activitiesの＋ボタン
========================================================= */
.global-menu__activities {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  margin: 0;
  padding: 0;
  flex: 0 0 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

/* ＋ボタン自体にはhover装飾を付けない */
.global-menu__activities:hover,
.global-menu__activities:focus,
.global-menu__activities:focus-visible {
  background: transparent;
  outline: none;
}

.global-menu__activities::before,
.global-menu__activities::after {
  display: none;
  content: none;
}

/* =========================================================
＋と－のアニメーション
========================================================= */
.global-menu__activities i {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.global-menu__activities i::before,
.global-menu__activities i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: var(--su-navy);
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.global-menu__activities i::before {
  width: 18px;
  height: 1px;
}

.global-menu__activities i::after {
  width: 1px;
  height: 18px;
}

/* 開いたとき */
.global-menu__activities[aria-expanded=true] i {
  transform: rotate(180deg);
}

.global-menu__activities[aria-expanded=true] i::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* =========================================================
Activities下層メニュー
========================================================= */
.global-menu__sub {
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.65s;
}

.global-menu__sub.is-open {
  max-height: 520px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* =========================================================
Activities下層の各項目
========================================================= */
.global-menu__sub li {
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.global-menu__sub.is-open li {
  opacity: 1;
  transform: translateY(0);
}

/* 上から順番に表示 */
.global-menu__sub.is-open li:nth-child(1) {
  transition-delay: 0.08s;
}

.global-menu__sub.is-open li:nth-child(2) {
  transition-delay: 0.13s;
}

.global-menu__sub.is-open li:nth-child(3) {
  transition-delay: 0.18s;
}

.global-menu__sub.is-open li:nth-child(4) {
  transition-delay: 0.23s;
}

/* =========================================================
Activities下層リンク
========================================================= */
.global-menu__sub a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 17px 12px 17px 30px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(23, 48, 93, 0.1);
  background: transparent;
  color: var(--su-navy);
  text-decoration: none;
  transition: padding-left 0.25s ease, border-bottom-color 0.25s ease, box-shadow 0.25s ease;
}

/* 短い黄色線を削除 */
.global-menu__sub a::before,
.global-menu__sub a::after {
  display: none;
  content: none;
}

/* 下層リンクのhover */
.global-menu__sub a:hover,
.global-menu__sub a:focus-visible {
  padding-left: 36px;
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 var(--su-yellow);
  outline: none;
}

.global-menu__sub a span,
.global-menu__sub a strong {
  display: block;
  font-family: var(--su-font);
}

.global-menu__sub a span {
  margin-bottom: 4px;
  color: rgba(23, 48, 93, 0.72);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.global-menu__sub a strong {
  color: var(--su-navy);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

/* =========================================================
メニュー表示中
========================================================= */
body.is-menu-open {
  overflow: hidden;
}

/* =========================================================
スマートフォン
========================================================= */
/* 共通レイアウト */
main {
  padding: 82px 0 0;
}

.inner,
.s-inner {
  width: min(1120px, 100% - 96px);
  margin-inline: auto;
  padding-inline: 0;
}

.loadIn,
.fadeIn {
  opacity: 1;
  visibility: visible;
  translate: none;
}

/* =========================================================
トップページ 大見出し
========================================================= */
.main-ttl {
  position: static;
  inset: auto;
  display: flex;
  align-items: baseline;
  gap: 28px;
  width: 100%;
  margin: 0 0 54px;
  padding: 0 0 12px 12px;
  border: 0;
  border-bottom: 2px solid var(--su-yellow);
  translate: none;
}

.main-ttl::after {
  display: none;
  content: none;
}

.main-ttl .en-ttl {
  margin: 0;
  padding: 0;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 44px;
  font-weight: 100;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.06em;
  transform: skewX(-2deg);
  transform-origin: left center;
}

.main-ttl .line {
  margin: 0;
  padding: 0;
  border: 0;
}

.main-ttl .line h3 {
  margin: 0;
  padding: 0;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.main-ttl .line p {
  display: none;
}

/* =========================================================
   02 トップ：背景・KV・丸写真
   ========================================================= */
/* トップ背景 */
#index {
  position: relative;
  isolation: isolate;
  background: #fff;
}

#index::before,
#index::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

#index::before {
  z-index: 0;
  left: 50%;
  width: min(100%, 1920px);
  translate: -50% 0;
  background: #fff;
}

#index::after {
  z-index: 1;
  left: 50%;
  width: min(80%, 1536px);
  translate: -50% 0;
  background-image: url("../images/kv/pattern-sparse.png");
  background-repeat: repeat;
  background-size: 20% auto;
  background-position: 0 min(2.0833vw, 40px);
}

/* 各セクションの高さはコンテンツ量に合わせる */
#index > section {
  z-index: 2;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  scroll-margin-top: 0;
}

#index #fv {
  min-height: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* KV全体 */
.kv-artboard {
  position: relative;
  width: min(100%, 1920px);
  height: min(56.25vw, 1080px);
  margin-inline: auto;
  background: transparent;
}

.kv-logo {
  position: absolute;
  z-index: 2;
  left: 43.025%;
  top: 53.39%;
  width: 30.7%;
  aspect-ratio: 114.88/57.37;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: none;
}

.kv-logo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.48;
  filter: none;
}

/* KV説明文：位置・幅・文字サイズ */
#kv-intro-copy {
  position: absolute;
  z-index: 3;
  left: 43%;
  top: 84%;
  width: 36%;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.kv-intro-copy__box {
  width: 100%;
  margin: 0;
  padding: 2.5% 3%;
  color: var(--su-base);
  background: #fff;
  box-shadow: none;
  filter: none;
}

.kv-intro-copy__box h2 {
  margin: 10px 0 min(0.7292vw, 14px);
  color: #4d4d4d;
  font-family: var(--su-font);
  font-size: min(1.25vw, 24px);
  font-weight: 700;
  line-height: 1.45;
}

.kv-intro-copy__box p {
  margin: 0 0 0 16px;
  color: #4d4d4d;
  font-family: var(--su-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.kv-intro-copy__box p:last-child {
  margin-bottom: 0;
}

#kv-projects {
  position: relative;
  z-index: 5;
  background: transparent;
  background-size: 319px 319px;
  overflow: visible;
}

.kv-stage {
  position: relative;
  width: 100%;
  height: min(60.4167vw, 1160px);
  overflow: visible;
}

/* 丸写真：共通設定 */
.kv-photo {
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  filter: none;
  isolation: isolate;
  animation: kv-float-a 8.5s ease-in-out infinite alternate;
  transition: scale 0.3s ease, filter 0.3s ease;
}

/*
 * 黄色い光彩
 * 1段目：フチの太さと濃さ
 * 2段目：外側のぼかしと広がり
 * 写真の背面に配置する。
 */
.kv-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 1px rgba(237, 223, 0, 0.45), 0 0 4px 0.5px rgba(237, 223, 0, 0.2);
}

.kv-photo--xlarge {
  --size: 27.0833%;
}

.kv-photo--large {
  --size: 20.8333%;
}

.kv-photo--medium {
  --size: 19.7917%;
}

.kv-photo--small {
  --size: 15.625%;
}

/* 写真面：光彩より前面に配置 */
.kv-photo__motion {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #eddf00;
  border-radius: inherit;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}

.kv-photo:nth-of-type(3n + 2) {
  animation-name: kv-float-b;
  animation-duration: 10.5s;
  animation-delay: -3.5s;
}

.kv-photo:nth-of-type(3n) {
  animation-name: kv-float-c;
  animation-duration: 12s;
  animation-delay: -6s;
}

.kv-photo:hover,
.kv-photo:focus-visible {
  scale: 1.025;
}

.kv-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kv-photo--01 img {
  object-position: center;
}

.kv-photo--09 img,
.kv-photo--11 img {
  object-fit: cover;
}

.kv-photo--video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}

.kv-photo__link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
}

/* 丸写真のリンクラベル */
.kv-photo--video .kv-photo__label {
  bottom: 18px;
  translate: -50% 0;
  opacity: 1;
}

.kv-photo__label {
  position: absolute;
  left: 50%;
  bottom: 12px;
  max-width: calc(100% - 20px);
  padding: 6px 11px;
  color: #fff;
  background: rgba(23, 48, 93, 0.9);
  border-radius: 999px;
  font-size: min(0.5729vw, 11px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  translate: -50% 8px;
  opacity: 0;
  transition: opacity 0.25s ease, translate 0.25s ease;
}

.kv-photo:hover .kv-photo__label,
.kv-photo:focus-visible .kv-photo__label {
  translate: -50% 0;
  opacity: 1;
}

/*
 * 丸写真の個別配置
 * --size：直径
 * left / right：横位置
 * top / bottom：縦位置
 */
.kv-photo--01 {
  --size: 27.0833%;
  left: -3%;
  top: -6%;
}

.kv-photo--02 {
  --size: 19.7917%;
  left: 28%;
  top: 3%;
}

.kv-photo--03 {
  --size: 13.0208%;
  left: 15%;
  top: 18%;
}

.kv-photo--04 {
  --size: 20.8333%;
  left: 80%;
  top: -3%;
}

.kv-photo--05 {
  --size: 18.2292%;
  left: 5%;
  top: 60%;
}

.kv-photo--06 {
  --size: 20.8333%;
  left: 20%;
  top: 38%;
}

.kv-photo--07 {
  --size: 15.625%;
  right: 3%;
  bottom: 5%;
}

.kv-photo--08 {
  --size: 23.4375%;
  right: 30%;
  top: 65%;
}

.kv-photo--09 {
  --size: 14.5833%;
  left: 18%;
  top: 75%;
}

/* --10は未使用 */
.kv-photo--11 {
  --size: 18%;
  right: 17%;
  top: 84%;
}

.kv-photo--12 {
  --size: 15.625%;
  left: 40%;
  top: 25%;
}

.kv-photo--13 {
  --size: 35.4167%;
  left: 60%;
  top: 15%;
}

/* 丸写真の浮遊アニメーション */
@keyframes kv-float-a {
  to {
    transform: translate(min(1.3542vw, 26px), max(-1.7708vw, -34px));
  }
}
@keyframes kv-float-b {
  to {
    transform: translate(max(-1.5625vw, -30px), min(1.4583vw, 28px));
  }
}
@keyframes kv-float-c {
  to {
    transform: translate(min(1.1458vw, 22px), min(1.6667vw, 32px));
  }
}
/* =========================================================
   03 トップ：Concept・History・活動一覧
   ========================================================= */
/* Concept */
#concept {
  position: relative;
  z-index: 2;
  margin-top: min(15vw, 280px);
  padding: 26px 0 20px;
  background: transparent;
}

.about-inner {
  width: min(1120px, 100% - 96px);
  margin: 0 auto;
}

.about-heading {
  margin-bottom: 48px;
}

.about-heading h2 {
  color: var(--su-navy);
  font-size: 68px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.055em;
}

.about-heading h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 12px;
  margin-top: 20px;
  background: var(--su-yellow);
}

.about-visual {
  margin: 0;
}

.about-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* History：セクション全体 */
#history {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 42px 0 110px;
  color: var(--su-base);
  background: rgba(255, 255, 255, 0.76);
}

.history-inner {
  width: min(980px, 100% - 96px);
  margin: 0 auto;
}

.history-heading {
  margin-bottom: 74px;
}

.history-heading p {
  margin-bottom: 10px;
  color: var(--su-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

/* History：期間見出し */
.history-period {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 42px 82px;
  color: var(--su-navy);
  font-size: 20px;
  font-weight: 600;
}

.history-period b {
  padding-left: 20px;
  border-left: 1px solid rgba(23, 48, 93, 0.28);
  font: inherit;
}

/* History：年度ごとの本文 */
.history-timeline {
  position: relative;
  margin: 0 0 95px;
}

.history-item {
  position: relative;
  padding: 0 0 62px 82px;
}

.history-item:last-child {
  padding-bottom: 8px;
}

/* 年度の丸 */
.history-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 11px;
  top: 8px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--su-sky);
  border-radius: 50%;
  background: var(--su-sky);
}

/* 次の丸まで接続。最後の年度には線を生成しない */
.history-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  bottom: -18px;
  width: 2px;
  background: var(--su-sky);
}

.history-item h3 {
  margin: 0 0 23px;
  color: var(--su-navy);
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}

.history-item h3 small {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
}

.history-item ul {
  display: grid;
  gap: 18px;
}

.history-item li {
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 1.6;
  list-style: none;
}

.history-item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--su-sky);
  box-shadow: none;
}

.history-item strong {
  color: var(--su-navy);
  font-weight: 600;
  line-height: 1.45;
}

.history-conclusion {
  margin-top: -28px;
  padding: 36px;
  color: var(--su-navy);
  background: var(--su-yellow);
  font-size: 38px;
  font-weight: 900;
  line-height: 1.55;
}

/* トップ・下層共通：沿革の表示アニメーション */
.history-reveal {
  opacity: 1;
  transform: none;
}

.history-reveal.su-reveal-pending,
#pro-theme .ww-history-item.su-reveal-pending {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.history-reveal.su-reveal-pending.is-visible,
#pro-theme .ww-history-item.su-reveal-pending.is-visible {
  opacity: 1;
  transform: none;
}

/* Activitiesへの入口 */
#activities-top {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 88px 0;
  background: var(--su-navy);
  color: #fff;
}

.project-menu__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}

.project-menu__heading p {
  color: var(--su-yellow);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.project-menu__heading h2 {
  color: #fff;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.2;
}

.project-menu__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.project-menu__list li {
  list-style: none;
  background: var(--su-navy);
}

.project-menu__list a {
  position: relative;
  display: flex;
  min-height: 126px;
  padding: 24px 46px 22px 22px;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}

.project-menu__list a::after {
  content: "→";
  position: absolute;
  right: 20px;
  top: 50%;
  color: var(--su-yellow);
  font-size: 22px;
  translate: 0 -50%;
  transition: translate 0.25s ease;
}

.project-menu__list a:hover {
  color: var(--su-navy);
  background: var(--su-yellow);
}

.project-menu__list a:hover::after {
  color: var(--su-navy);
  translate: 5px -50%;
}

.project-menu__list span {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.project-menu__link--new {
  gap: 5px;
}

.project-menu__badge {
  align-self: flex-start;
  padding: 3px 7px;
  border: 1px solid var(--su-yellow);
  color: var(--su-yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.project-menu__link--new:hover .project-menu__badge {
  border-color: var(--su-navy);
  color: var(--su-navy);
}

.project-menu__list .project-menu__youtube-cta {
  align-self: flex-start;
  margin-top: 7px;
  padding: 7px 10px;
  border: 1px solid var(--su-yellow);
  border-radius: 999px;
  color: var(--su-yellow);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.project-menu__link--new:hover .project-menu__youtube-cta {
  border-color: var(--su-navy);
  color: var(--su-navy);
}

.project-menu__list small {
  padding-top: 7px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 11px;
  line-height: 1.45;
}

.project-menu__list a:hover small {
  color: rgba(23, 48, 93, 0.7);
}

/* Activities：トップ内のプロジェクト一覧 */
#index #activities {
  padding: 118px 0;
  background: transparent;
  background-size: 319px 319px;
}

#activities > .sp-bubble,
#Report > .sp-bubble,
#contact > .sp-bubble {
  display: none;
}

#activities .inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

#activities .main-ttl {
  grid-column: 1/-1;
}

#activities .project,
#activities .pro {
  position: static;
  inset: auto;
  width: auto;
  translate: none;
  float: none;
}

#activities .project {
  margin: 0;
}

#activities .project01 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
}

#activities .project01 > .main {
  grid-column: 1/-1;
  width: 100%;
  margin: 0;
}

#activities .project .main,
#activities .project .line {
  width: 100%;
  padding: 0;
  border: 0;
}

#activities .project > a,
#activities .project01 > .main > a,
#activities .pro > a {
  display: flex;
  width: 100%;
  height: 100%;
  color: var(--su-base);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(23, 48, 93, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(23, 48, 93, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#activities .project > a,
#activities .project01 > .main > a {
  padding: 32px;
}

#activities .project > a:hover,
#activities .project01 > .main > a:hover,
#activities .pro > a:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(23, 48, 93, 0.14);
}

#activities .project .main h4 {
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
}

#activities .project .main h4 small {
  display: block;
  padding: 0 0 8px;
  color: var(--su-muted);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}

#activities .project .main p {
  padding: 18px 0 0;
  font-size: 12px;
  line-height: 1.75;
}

#activities .pro > a {
  align-items: stretch;
  padding: 0;
}

#activities .pro p {
  flex: 0 0 90px;
  width: 90px;
  margin: 0;
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background: var(--su-navy);
  border: 0;
  font-family: var(--su-font);
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

#activities .pro p small {
  padding: 0 0 8px;
  font-size: 11px;
  font-style: normal;
}

#activities .pro h5 {
  width: auto;
  padding: 22px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 21px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.25;
}

#activities .pro h5 small {
  padding: 0 0 7px;
  color: var(--su-muted);
  font-family: var(--su-font);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
}

/* =========================================================
   04 トップ：Logo Story・Report・Contact
   ========================================================= */
/* セクションの余白 */
#index #logostory,
#index #Report {
  padding: 64px 0;
}

#index #logostory > .inner,
#index #Report > .inner {
  height: auto;
  min-height: 0;
}

#index #contact {
  padding: 118px 0;
  color: var(--su-base);
  background: transparent;
  background-size: 319px 319px;
}

#index #logostory,
#index #Report {
  background: transparent;
  background-size: 319px 319px;
}

#logostory .sec-inner,
#Report .sec-inner,
#contact .sec-inner {
  position: static;
  inset: auto;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 0;
  translate: none;
}

/* Logo Story */
#logostory .logo_img {
  display: block;
  width: 100%;
  max-width: 900px;
  border-radius: 14px;
}

/* PC：i01を全幅、その下を3個・2個で配置 */
#logostory .sec-inner .logo-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: var(--row-h, 180px);
  grid-template-areas: "i01 i01 i01 i01 i01 i01" "i03 i03 i04 i04 i05 i05" "i06 i06 i07 i07 empty empty";
  box-sizing: border-box;
}

#logostory .logo-item {
  margin: 0;
  box-sizing: border-box;
  height: var(--row-h, 180px);
  aspect-ratio: auto;
  overflow: hidden;
  min-width: 0;
}

#logostory .logo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#logostory .i01 {
  grid-area: i01;
}

#logostory .i03 {
  grid-area: i03;
}

#logostory .i04 {
  grid-area: i04;
}

#logostory .i05 {
  grid-area: i05;
}

#logostory .i06 {
  grid-area: i06;
}

#logostory .i07 {
  grid-area: i07;
}

#logostory .placeholder {
  grid-area: empty;
}

/* =========================================================
Report：記事一覧
========================================================= */
#index #Report .sec-inner {
  width: min(1080px, 100%);
  max-width: none;
}

#Report .report-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#Report .report-item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#Report .report-item::before {
  content: none;
}

/* 記事リンク */
#Report .report-link {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) 30px;
  align-items: center;
  gap: 22px;
  padding: 24px;
  color: var(--su-navy);
  text-decoration: none;
  background: transparent;
}

/* サムネイル */
#Report .report-thumb {
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

#Report .report-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* テキスト */
#Report .report-copy {
  min-width: 0;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

#Report .report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 12px;
  color: #46546b;
  font-size: 14px;
  line-height: 1.5;
}

#Report .report-category {
  padding: 4px 10px;
  border: 1px solid rgba(23, 48, 93, 0.25);
  border-radius: 4px;
  color: var(--su-navy);
  font-size: 13px;
  font-weight: 500;
}

/* 記事タイトル */
#Report .report-title {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 7px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#Report .report-title::before {
  content: none;
}

#Report .report-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--su-yellow);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 矢印 */
#Report .report-arrow {
  display: block;
  font-size: 24px;
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover・キーボード操作 */
#Report .report-link:hover .report-copy,
#Report .report-link:focus-visible .report-copy {
  transform: translateX(18px);
}

#Report .report-link:hover .report-title::after,
#Report .report-link:focus-visible .report-title::after {
  transform: scaleX(1);
  transform-origin: left center;
}

#Report .report-link:hover .report-arrow,
#Report .report-link:focus-visible .report-arrow {
  transform: translateX(6px);
}

/* キーボード操作 */
#Report .report-link:focus-visible,
#Report .report-more:focus-visible {
  outline: 3px solid var(--su-sky);
  outline-offset: 4px;
}

/* Report：「もっと見る」ボタン */
#Report .report-more {
  display: block;
  min-height: 48px;
  margin: 32px auto 0;
  padding: 12px 32px;
  border: 1px solid var(--su-navy);
  border-radius: 6px;
  background: #fff;
  color: var(--su-navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#Report .report-more:hover {
  background: var(--su-navy);
  color: #fff;
}

#Report [hidden] {
  display: none;
}

/* 読み上げ用の更新通知 */
#Report .report-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Contact */
#contact .main-ttl .en-ttl {
  color: var(--su-blue);
}

#contact .main-ttl .line h3 {
  color: var(--su-base);
}

#contact .main-ttl .line p {
  color: var(--su-muted);
}

#contact .main {
  position: relative;
  z-index: 1;
  padding: 42px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(23, 48, 93, 0.18);
  text-align: center;
}

#contact .main p {
  color: var(--su-base);
  font-size: 16px;
  line-height: 1.9;
}

#contact .main p a {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 9px;
  color: var(--su-navy);
  border: 0;
  border-radius: 5px;
  font-weight: 800;
}

/* Concept以降の背景 */
#index #concept,
#index #history,
#index #activities,
#index #logostory,
#index #Report,
#index #contact {
  background-color: rgba(255, 255, 255, 0.76);
}

/* =========================================================
   05 下層：本文・カード・関連スライダー
   ========================================================= */
/* 下層の基本レイアウト */
main:not(#index) {
  min-height: 100vh;
  padding: 150px 0 0;
  background: var(--su-paper);
}

/* 下層のメインコンテンツ */
main:not(#index) #fv {
  padding: 0 0 76px;
}

/* ベージュのスライダーが続くページの下余白 */
main:not(#index) #fv:has(+ #other-project) {
  padding-bottom: 0;
}

/* 同一カテゴリのスライダーが続く場合は、スライダー側で間隔を確保 */
main:not(#index) #fv:has(+ #other-project) {
  padding-bottom: 0;
}

main:not(#index) .fv-wrapper {
  position: relative;
}

main:not(#index) .self-ttl {
  position: static;
  inset: auto;
  width: min(1120px, 100% - 96px);
  margin: 0 auto 58px;
}

main:not(#index) .pro-ttl {
  margin: 0 0 38px;
  padding: 0;
}

/* プロジェクト見出し */
.pro-ttl h2 {
  margin: 0;
  padding: 0 0 12px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 50px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: 0.02em;
  transform: skewX(-2deg);
  transform-origin: left center;
}

.pro-ttl h2 small {
  display: inline-block;
  margin-left: 1em;
  padding: 0;
  font-family: var(--su-font);
  font-size: 18px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transform: skewX(2deg);
}

#activity-top .pro-ttl h2 {
  font-weight: 100;
}

/* =========================================================
プロジェクトタイトル内の補足
========================================================= */
.pro-ttl h2 span {
  display: block;
  padding: 12px 0 0;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 22px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.03em;
  transform: skewX(2deg);
}

/* =========================================================
本文カード
========================================================= */
.pro-theme,
.pro-details {
  padding: 48px;
  background: #fff;
  border: 1px solid rgba(23, 48, 93, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23, 48, 93, 0.08);
}

#Activities-top .pro-theme {
  margin-top: 1.5em;
}

/* =========================================================
本文内の見出し
========================================================= */
.theme,
.term,
.dragter-ttl,
.slider-area h3 {
  position: relative;
  padding: 0 0 12px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-weight: 100;
  font-style: italic;
  line-height: 1.2;
}

.theme {
  margin: 46px 0 24px;
  padding-bottom: 4px;
  padding-left: 12px;
  border: 0;
  border-bottom: 1px solid var(--su-yellow);
  font-size: 28px;
  letter-spacing: 0.04em;
  transform: skewX(-2deg);
  transform-origin: left center;
}

.theme:first-child {
  margin-top: 0;
}

.theme::before,
.theme::after {
  display: none;
  content: none;
}

.term {
  margin: 52px 0 12px;
  font-size: 36px;
}

.term-sub {
  padding: 0 0 18px;
  color: var(--su-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* =========================================================
本文の基本文字
========================================================= */
.theme-txt,
.pro-txt,
.concept p,
.drafer .work p,
.drafer .work li,
.links-list p,
.interpunct li,
.theme-list li {
  font-size: 16px;
  line-height: 1.9;
}

/* =========================================================
interpunctの箇条書き
HTML内の「・」を利用する
========================================================= */
.interpunct {
  margin: 0 20px 20px;
  padding: 0;
  list-style: none;
}

.interpunct li {
  margin: 0 0 8px;
  padding: 0 0 0 1em;
  font-size: 16px;
  line-height: 1.6;
  text-indent: -1em;
}

/* =========================================================
リンクリスト
========================================================= */
ul.links-list {
  margin-top: 60px;
  margin-left: 20px;
}

.links-list li {
  margin: 0 0 40px;
}

/* =========================================================
本文と箇条書き
========================================================= */
.theme-txt {
  margin: 0 20px 20px;
  box-sizing: border-box;
}

#pro-theme .theme-list,
#pro-theme .theme-ww-list {
  display: grid;
  gap: 8px;
  margin: 0 20px 20px;
  padding: 0;
  list-style: none;
}

#pro-theme .theme-list li,
#pro-theme .theme-ww-list li {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.9;
  text-indent: 0;
}

#pro-theme .theme-list li::before,
#pro-theme .theme-ww-list li::before {
  display: none;
  content: none;
}

/* =========================================================
プロジェクト名・カテゴリー・タイトル
========================================================= */
.pro-name {
  --pro-name-indent: 15px;
  margin: 0 0 42px;
  padding: 0 0 26px;
  border-bottom: 2px solid var(--su-yellow);
}

/* カテゴリー名 */
.pro-category {
  width: 100%;
  margin: 0 0 42px;
  padding: 0;
}

.pro-category .su-of-su {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px 7px;
  box-sizing: border-box;
  border: 1px solid var(--su-yellow);
  border-radius: 6px;
  background: transparent;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transform: none;
}

.pro-category .su-of-su::before,
.pro-category .su-of-su::after {
  display: none;
  content: none;
}

.pro-category .su-of-su small {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--su-muted);
  font-family: var(--su-font);
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transform: none;
}

/* Project 01 */
.pro-no {
  margin: 0 0 0 var(--pro-name-indent);
  padding: 0 0 8px;
  color: var(--su-blue);
  font-family: var(--su-font);
  font-size: 18px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* K14 */
#pro-details .pro-ttl,
.pro-name > h3.pro-ttl {
  margin: 0 0 0 var(--pro-name-indent);
  padding: 0 0 12px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 52px;
  font-weight: 100;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: 0.04em;
  transform: skewX(-2deg);
  transform-origin: left center;
}

/* プロジェクト名をProject番号・サブタイトルと同じ位置にそろえる */
#pro-details .pro-name > h3.pro-ttl {
  margin-left: 15px;
}

/* 日本語のプロジェクト大見出しだけ小さくする */
#pro-details .pro-ttl.characters,
.pro-name > h3.pro-ttl.characters {
  font-size: 48px;
}

/* K14の日本語タイトル */
.pro-sub {
  margin: 0 0 0 var(--pro-name-indent);
  padding: 0 0 12px;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
}

/* ハッシュタグ */
.hash {
  margin: 0 0 0 var(--pro-name-indent);
  padding: 0;
  color: var(--su-muted);
  font-family: var(--su-font);
  font-size: 13px;
  font-weight: inherit;
  line-height: 1.65;
}

/* ほかの場所で使う補足文字 */
.pro-ttl .sub-ttl {
  padding: 0 0 12px 5px;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
}

.pro-ttl .tag {
  color: var(--su-muted);
  font-family: var(--su-font);
  font-size: 13px;
  font-weight: inherit;
  line-height: 1.65;
}

/* ほかのプロジェクト大見出し */
#pro-theme .pro-ttl h2 {
  font-size: 52px;
}

/* =========================================================
767px以下
========================================================= */
/* =========================================================
写真・キャプション
========================================================= */
.pro-pic,
.pic,
.theme-pic {
  gap: 18px;
}

.pro-pic,
.pic {
  padding: 24px 0 42px;
}

.pro-pic img,
.theme-pic img,
.project-list img,
.slider-list .box img,
.gray-box img {
  border-radius: 12px;
}

.pro-pic figcaption,
.theme-pic figcaption {
  padding-top: 12px;
  color: var(--su-muted);
  font-family: var(--su-font);
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
}

/* フレキシブル銅合金・3DPart：見出し・写真ギャラリー */
#pro-theme .project-fx__headline {
  margin: 0 20px 20px;
  color: var(--su-navy);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.55;
}

#pro-theme .project-fx__headline .pl {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

#pro-theme .project-gallery,
#pro-details .project-gallery {
  margin-top: 0;
}

#pro-theme .project-gallery__grid,
#pro-details .project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 20px;
}

#pro-theme .project-gallery__item,
#pro-details .project-gallery__item {
  margin: 0;
}

#pro-theme .project-gallery__placeholder,
#pro-details .project-gallery__placeholder {
  display: grid;
  aspect-ratio: 4/3;
  place-items: center;
  border-radius: 8px;
  background: #f2efe5;
  color: rgba(23, 48, 93, 0.62);
  font-size: 14px;
}

#pro-theme .project-gallery__item img,
#pro-details .project-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  object-fit: cover;
}

#pro-theme .project-gallery__caption,
#pro-details .project-gallery__caption {
  margin-top: 8px;
  color: var(--su-muted);
  font-size: 14px;
  line-height: 1.6;
}

#pro-theme .project-fx-back {
  margin-top: 36px;
  text-align: center;
}

#pro-theme .project-fx-back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--su-navy);
  border-radius: 28px;
  background: var(--su-yellow);
  color: var(--su-navy);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

#pro-theme .project-fx-back a:hover {
  background: var(--su-navy);
  color: #fff;
}

#pro-theme .project-fx-back a:focus-visible {
  outline: 3px solid var(--su-sky, #00a1e9);
  outline-offset: 4px;
}

/* SU projectの2024・2023ポスターだけを2列にする */
#pro-theme .su-poster-pair {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 18px;
}

#pro-theme .su-poster-pair .theme-pic {
  flex: 0 0 calc((100% - 18px) / 2);
  width: calc((100% - 18px) / 2);
  min-width: 0;
  margin: 0;
}

#pro-theme .su-poster-pair .theme-pic img {
  display: block;
  width: 100%;
  height: auto;
}

/* YouTube埋め込みは横幅いっぱいに戻す */
#pro-theme .youtube-embed {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  flex: none;
}

#pro-theme .youtube-embed a,
#pro-theme .youtube-embed img,
#pro-theme .youtube-embed iframe {
  display: block;
  width: 100%;
  max-width: none;
}

#pro-theme .youtube-embed iframe {
  aspect-ratio: 16/9;
  height: auto;
}

/* その他の画像リスト */
.pic-list {
  flex-wrap: nowrap;
  gap: 18px;
}

/* 補足情報・担当者情報 */
.gray-box {
  margin: 28px 0;
  padding: 30px;
  background: var(--su-paper);
  border-radius: 12px;
}

.drafer {
  margin: 42px 0;
  padding: 36px;
  background: var(--su-beige);
  border-radius: 12px;
}

.drafer .element {
  padding-left: 24px;
  border-left: 3px solid var(--su-yellow);
}

.drafer .name .ja {
  color: var(--su-navy);
  font-size: 27px;
  font-weight: 400;
}

/* =========================================================
外部リンク
========================================================= */
.links-list a {
  display: inline-block;
  max-width: calc(100% - 24px);
  margin-left: 24px;
  margin-top: 5px;
  color: var(--su-blue);
  border: 0;
  border-bottom: 0;
  background-image: linear-gradient(to top, rgba(255, 242, 37, 0.55) 0, rgba(255, 242, 37, 0.55) 100%);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 0;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 0.4s ease, background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* リンク先頭のchevron-right */
.links-list a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 2px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 外部リンクアイコン */
/* hover */
.links-list a:hover,
.links-list a:focus-visible {
  color: var(--su-navy);
  background-size: 100% 0.15em;
  outline: none;
}

/* hover時に右へ移動 */
.links-list a:hover::before,
.links-list a:focus-visible::before {
  transform: translateX(4px) rotate(45deg);
}

/* キーボード操作 */
.links-list a:focus-visible {
  outline: 1px solid var(--su-sky);
  outline-offset: 5px;
}

.links-list p {
  margin-left: 1em;
  font-size: 14px;
  line-height: 1.5;
}

.links h5 {
  font-size: 17px;
  font-weight: 400;
}

/* Activities一覧：プロジェクトカード */
#activity-top + #project,
#activity-top #project {
  padding: 0 0 90px;
}

.project-list {
  gap: 28px;
}

.project-list li {
  width: calc(50% - 14px);
  margin: 0;
  padding: 0 0 26px;
  background: #fff;
  border: 1px solid rgba(23, 48, 93, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(23, 48, 93, 0.07);
}

.project-list li > a {
  display: block;
  padding: 18px 18px 0;
}

.project-list li .txt {
  padding: 18px 4px 0;
}

.project-list li .txt small {
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-left: 7px;
}

.project-list li figcaption,
.small-title {
  padding: 0 0 12px;
  color: var(--su-blue);
  font-family: var(--su-font);
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.04em;
}

.project-list li h4 {
  padding: 0 0 8px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.035em;
}

/* 日本語のプロジェクト名だけ少し小さくする */
.project-list li h4[lang=ja] {
  font-size: 20px;
}

/* 関連スライダー：別カテゴリへの回遊は紺色・全幅 */
/* 関連スライダー：別カテゴリへの回遊 */
/* Related Activities：本文より広い表示幅 */
#related {
  margin-top: 76px;
  padding: 72px 0 86px;
  background: var(--su-navy);
}

#related > .inner {
  width: calc(100% - 96px);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0;
}

/* 右側に矢印用のスペースを確保 */
#related .slider-container {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 32px;
  box-sizing: border-box;
}

#related .slider-list {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* 矢印の配置基準 */
#related .slider02 {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 0;
}

/* 次へボタン：カード右側の中央 */
#related .slider02 .next-arrow {
  position: absolute;
  top: 50%;
  right: -26px;
  bottom: auto;
  left: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--su-yellow);
  border-radius: 50%;
  background: var(--su-yellow);
  color: var(--su-navy);
  clip-path: none;
  -webkit-clip-path: none;
  translate: none;
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ボタン中央の矢印 */
#related .slider02 .next-arrow::before {
  content: "";
  position: static;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0;
  background: none;
  clip-path: none;
  translate: none;
  transform: rotate(45deg);
  opacity: 1;
}

#related .slider02 .next-arrow::after {
  content: none;
}

/* ホバー時は配色を反転 */
#related .slider02 .next-arrow:hover {
  background: var(--su-navy);
  color: var(--su-yellow);
}

/* 同一カテゴリへの回遊はベージュ・本文幅 */
#other-project {
  width: min(1120px, 100% - 96px);
  margin: 24px auto 0;
  padding: 40px 32px;
  background: var(--su-beige);
  border-radius: 14px;
  box-sizing: border-box;
}

#other-project > .inner {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 右側に矢印用のスペースを確保 */
#other-project .slider-container {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 32px;
  box-sizing: border-box;
}

#other-project .slider-list {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* 矢印の配置基準 */
#other-project .slider02 {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ベージュ枠内の次へボタン */
#other-project .slider02 .next-arrow {
  position: absolute;
  top: 50%;
  right: -26px;
  bottom: auto;
  left: auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0px solid var(--su-navy);
  border-radius: 50%;
  background: var(--su-yellow);
  color: var(--su-navy);
  box-shadow: 0 2px 6px rgba(23, 48, 93, 0.18);
  clip-path: none;
  -webkit-clip-path: none;
  translate: none;
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* ボタン中央の矢印 */
#other-project .slider02 .next-arrow::before {
  content: "";
  position: static;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0;
  background: none;
  clip-path: none;
  translate: none;
  transform: rotate(45deg);
  opacity: 1;
}

/* 旧矢印の装飾を解除 */
#other-project .slider02 .next-arrow::after {
  content: none;
}

/* ホバー時は配色を反転 */
#other-project .slider02 .next-arrow:hover {
  background: var(--su-navy);
  color: var(--su-yellow);
  box-shadow: 0 3px 10px rgba(23, 48, 93, 0.28);
}

/* スライダー共通 */
.slider-area h3 {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.slider-list .box {
  width: 360px;
  margin-right: 22px;
  padding: 16px;
  color: var(--su-base);
  background: #fff;
  border-radius: 12px;
}

/* スライダーのNEWラベル */
.slider-list .box figure.new {
  position: relative;
}

.slider-list .box figure.new::before {
  content: "NEW";
  position: absolute;
  z-index: 10;
  top: auto;
  right: 10px;
  bottom: 10px;
  left: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 5px 10px;
  background: var(--su-yellow);
  color: var(--su-navy);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  font-family: var(--su-font);
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  rotate: none;
  transform: none;
  translate: none;
  clip-path: none;
  -webkit-clip-path: none;
  pointer-events: none;
}

/* スライダーの本文余白 */
.slider-list .box .txt {
  padding: 14px 2px 2px;
}

.slider-list .box h4 strong {
  color: var(--su-navy);
  font-family: var(--su-font);
}

.slide-arrow {
  background: var(--su-yellow);
}

/* 960px以下 */
/* 640px以下 */
/* 動きを抑える端末設定に対応 */
/* =========================================================
   06 SU History：トップ・下層沿革
   ========================================================= */
/* =========================================================
トップページ：SU History
========================================================= */
/* 期間見出し */
.history-period {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 42px 66px;
  color: var(--su-navy);
  font-size: 20px;
  font-weight: 600;
}

.history-period b {
  padding-left: 20px;
  border-left: 1px solid rgba(23, 48, 93, 0.28);
  font: inherit;
}

/* タイムライン全体 */
.history-timeline {
  position: relative;
  margin: 0 0 95px 18px;
}

/* 年度ごとの枠 */
.history-item {
  position: relative;
  padding: 0 0 62px 48px;
}

.history-item:last-child {
  padding-bottom: 8px;
}

/* 年度の丸 */
.history-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 24px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: var(--su-sky, #00a1e9);
}

/* 年度をつなぐ縦線 */
.history-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  bottom: -11px;
  left: 30.5px;
  width: 1px;
  background: var(--su-sky, #00a1e9);
}

/* 年度見出し */
.history-item h3 {
  margin: 0 0 23px;
  color: var(--su-navy);
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}

.history-item h3 small {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
}

/* 箇条書き全体 */
.history-item ul {
  display: grid;
  gap: 18px;
  margin: 0 0 0 30px;
  padding: 0;
  list-style: none;
}

.history-item li {
  position: relative;
  margin: 0;
  padding: 0 0 0 25px;
  font-size: 16px;
  line-height: 1.6;
  list-style: none;
}

/* 丸抜きの箇条書き */
.history-item li::before {
  content: "";
  position: absolute;
  top: calc((1.6em - 9px) / 2);
  left: 0;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid var(--su-sky, #00a1e9);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

/* =========================================================
トップページHistory：767px以下
========================================================= */
/* =========================================================
   06 下層：SU project / Wild Wind 沿革
   ========================================================= */
/* 沿革全体 */
#pro-theme .ww-history {
  min-width: 0;
  margin: 60px 0 40px;
  padding: 0;
}

#pro-theme .ww-history > .theme {
  margin: 0 0 36px;
}

#pro-theme .ww-history-timeline {
  position: relative;
  padding: 0 0 0 28px;
}

/* =========================================================
年度ごとの枠
========================================================= */
#pro-theme .ww-history-item {
  position: relative;
  min-width: 0;
  margin: 0 28px;
  padding: 0;
}

#pro-theme .ww-history-item:last-child {
  margin-bottom: 0;
}

/* 年度の丸 */
#pro-theme .ww-history-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 44px;
  left: -24px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: var(--su-sky, #00a1e9);
}

/* 年度をつなぐ縦線 */
#pro-theme .ww-history-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 43px;
  bottom: -72px;
  left: -17.5px;
  width: 1px;
  background: rgba(0, 161, 233, 0.65);
}

/* =========================================================
年度カード
========================================================= */
#pro-theme .ww-history-card {
  padding: 28px 30px 32px;
  margin: 20px 40px 20px 20px;
  border: 1px solid rgba(23, 48, 93, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(23, 48, 93, 0.035);
  overflow-wrap: anywhere;
}

#pro-theme .ww-history-card::before,
#pro-theme .ww-history-card::after {
  display: none;
  content: none;
}

/* =========================================================
年度見出し
========================================================= */
#pro-theme .ww-history-year {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px;
  border: 0;
  background: rgba(23, 48, 93, 0.05);
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 24px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

#pro-theme .ww-history-year span {
  font-size: 18px;
  font-weight: 400;
}

#pro-theme .ww-history-year::before,
#pro-theme .ww-history-year::after {
  display: none;
  content: none;
}

/* =========================================================
小見出し
公募テーマ / Summary / Result など
========================================================= */
#pro-theme .ww-history-subtitle,
#pro-details .ww-history-subtitle,
#report .ww-history-subtitle {
  position: relative;
  margin: 28px 0 14px;
  padding: 0 0 8px 14px;
  border: 0;
  background: none;
  font-family: var(--su-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

/* 小見出し左の黄色線 */
#pro-theme .ww-history-subtitle::before,
#pro-details .ww-history-subtitle::before,
#report .ww-history-subtitle::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 10px;
  left: 0;
  display: block;
  width: 3px;
  background: var(--su-yellow);
}

/* グレーの下線
黄色い縦棒の幅3px分だけ左へ出す */
#pro-theme .ww-history-subtitle::after,
#pro-details .ww-history-subtitle::after,
#report .ww-history-subtitle::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: -3px;
  display: block;
  height: 1px;
  background: rgba(23, 48, 93, 0.18);
}

/* 日本語見出しも同じ大きさ */
#pro-theme .ww-history-subtitle[lang=ja],
#pro-details .ww-history-subtitle[lang=ja] {
  font-size: 18px;
  font-weight: 400;
}

/* =========================================================
本文
========================================================= */
#pro-theme .ww-history-text {
  margin: 0 24px 0 14px;
  padding: 0;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.9;
}

/* =========================================================
箇条書き
========================================================= */
#pro-theme .ww-history-list {
  display: grid;
  gap: 7px;
  margin: 0 0 0 14px;
  padding: 0;
  list-style: none;
}

#pro-theme .ww-history-list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 17px;
  color: var(--su-base);
  font-family: var(--su-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.9;
}

#pro-theme .ww-history-list li::before {
  content: "";
}

/* Result部分 */
#pro-theme .ww-history-results {
  margin-top: 20px;
}

#pro-theme .ww-history-results .ww-history-list {
  gap: 12px;
}

/* =========================================================
767px以下
========================================================= */
/* =========================================================
   Report詳細：見出し・本文・一覧へのリンク
   ========================================================= */
/* ページ見出し：英語・日本語・黄色い帯の間隔 */
#report .self-ttl .en-ttl {
  margin-bottom: 7px;
}

#report .self-ttl .ja-ttl {
  padding-bottom: 10px;
}

/* 本文カード */
#report .report-card {
  padding: 48px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(23, 48, 93, 0.07);
  overflow-wrap: anywhere;
}

/* 記事見出し・カテゴリー・掲載日 */
#report .report-heading {
  margin-bottom: 28px;
}

#report .report-category {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 14px;
  border-radius: 4px;
  background: var(--su-paper);
  color: var(--su-navy);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#report .date {
  margin: 5px 0;
  color: var(--su-muted);
  font-size: 15px;
}

/* 本文・画像・関連リンク */
#report .report-card .theme-txt {
  margin: 0 0 24px;
  padding: 0;
  line-height: 1.9;
}

#report .report-card .pic {
  margin: 32px 0;
  padding: 0;
}

#report .report-card .theme-pic {
  margin: 0;
}

#report .report-card .links {
  margin-top: 36px;
}

#report .report-card .links-list li > h5 {
  margin-bottom: 12px;
}

#report .report-card .links-list li > p {
  margin-bottom: 12px;
}

#report .report-card a {
  overflow-wrap: anywhere;
}

/* 一覧に戻るボタン */
#report .report-back {
  margin-top: 36px;
  text-align: center;
}

#report .report-back a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--su-navy);
  border-radius: 28px;
  background: var(--su-yellow);
  color: var(--su-navy);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

#report .report-back a:hover {
  background: var(--su-navy);
  color: #fff;
}

#report .report-back a:focus-visible {
  outline: 3px solid var(--su-sky, #00a1e9);
  outline-offset: 4px;
}

/* スマートフォン */
/* =========================================================
フッター
========================================================= */
.site-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 14px 96px;
  box-sizing: border-box;
  border-top: 1px solid var(--su-line);
  background: rgba(246, 243, 237, 0.93);
}

/* コピーライト */
.site-footer__copyright {
  margin: 0;
  padding: 0;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 13px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ページ上部へ戻る */
.page-top {
  position: absolute;
  right: 30px;
  bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border: 1px solid rgba(23, 48, 93, 0.04);
  border-radius: 50%;
  background: rgba(255, 242, 37, 0.38);
  transition: background-color 0.45s ease, border-color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 上向きの矢印 */
.page-top span {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--su-navy);
  border-left: 1px solid var(--su-navy);
  transform: translateY(3px) rotate(45deg);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover */
.page-top:hover,
.page-top:focus-visible {
  border-color: var(--su-yellow);
  background: rgba(255, 242, 37, 0.7);
  transform: translateY(-3px);
}

.page-top:hover span,
.page-top:focus-visible span {
  transform: translateY(-1px) rotate(45deg);
}

.page-top:focus-visible {
  outline: 2px solid var(--su-sky);
  outline-offset: 3px;
}

/* スムーズに上部へ戻る */
html {
  scroll-behavior: smooth;
}

/* =========================================================
   Activities: Other Projects / NEW project card
   ========================================================= */
#other-projects {
  padding: 76px 0 90px;
  background: var(--su-paper);
}

#other-projects > .inner {
  width: min(1120px, 100% - 96px);
  margin-inline: auto;
}

.activity-other__title {
  margin: 0 0 30px;
  color: var(--su-navy);
  font-family: var(--su-font);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

#other-projects .project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: stretch;
}

#other-projects .project-list li {
  width: calc((100% - 28px) / 2);
  margin: 0 0 28px;
}

.activity-other__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 8px;
  background: #f2efe5;
}

.activity-other__badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--su-navy);
  background: var(--su-yellow);
  box-shadow: 0 4px 14px rgba(23, 48, 93, 0.18);
  font: 700 13px/1 var(--su-font, sans-serif);
  letter-spacing: 0.08em;
}

.activity-other__placeholder {
  color: rgba(23, 48, 93, 0.62);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.activity-other__detail-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 260px;
  background: #f2efe5;
}

/* Activities一覧：見出しをカード列の上に置き、幅を狭めても重ねない */
#Activities-top #fv > .fv-wrapper > .inner {
  width: min(1120px, 100% - 48px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

#Activities-top .project-list {
  gap: 28px;
  align-items: stretch;
}

/* Activities一覧：先頭カードの上線 */
#Activities-top .project-list > li:first-child {
  border-top: none;
}

#Activities-top .project-list li {
  width: calc((100% - 28px) / 2);
  margin: 0 0 28px;
}

/* パンフレット画像をカードの枠内に収める */
.activity-other__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 鉱山きのこ：画像をクリックするとパンフレットPDFを開く */
.activity-other__detail-visual {
  display: block;
  min-height: 0;
  background: transparent;
}

.activity-other__pdf-link {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.activity-other__pdf-link img {
  display: block;
  width: 100%;
  height: auto;
}

.activity-other__pdf-caption {
  margin-top: 14px;
  color: var(--su-navy);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* スマートフォンのトップKV：4枚の丸写真を散らして配置 */
@keyframes kv-float-mobile-a {
  to {
    transform: translate(3vw, -2.5vw);
  }
}
@keyframes kv-float-mobile-b {
  to {
    transform: translate(-2.5vw, 3vw);
  }
}
@keyframes kv-float-mobile-c {
  to {
    transform: translate(2vw, 2.5vw);
  }
}
/* =========================================================
   07 レスポンシブ設定
   画面幅ごとのルールはここにまとめています
   ========================================================= */
@media (max-width: 640px) {
  header {
    min-height: 70px;
    padding: 12px 18px;
  }
  header h1 {
    width: 78px;
  }
  .menu-toggle {
    width: 48px;
    height: 44px;
    min-width: 48px;
    flex-basis: 48px;
  }
  .menu-toggle span {
    width: 28px;
  }
  header .global-menu {
    width: 340px;
    max-width: 88vw;
    padding: 92px 24px 32px;
    background: #f6f3ed;
    border-left: 1px solid var(--su-line);
    box-shadow: -14px 0 36px rgba(23, 48, 93, 0.14);
  }
  /* メニューのスマホ文字（太さ・斜体） */
  .global-menu__item > a,
  .global-menu__activities-link,
  .global-menu__activities {
    min-height: 62px;
    font-size: 24px;
  }
  .global-menu__sub a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .global-menu__sub a span {
    font-size: 14px;
  }
  .global-menu__sub a strong {
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  .main-ttl {
    display: block;
    margin-bottom: 38px;
    padding-bottom: 9px;
  }
  .main-ttl .en-ttl {
    font-size: 32px;
  }
  .main-ttl .line {
    padding-top: 8px;
  }
  .main-ttl .line h3 {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .history-reveal.su-reveal-pending,
  #pro-theme .ww-history-item.su-reveal-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (min-width: 768px) {
  #index #logostory .sec-inner {
    width: min(1080px, 100%);
    max-width: none;
    container-type: inline-size;
  }
  #logostory .sec-inner .logo-grid {
    --row-h: 255px;
    --row-h: 32cqw;
  }
}
@media (max-width: 767px) {
  #logostory .sec-inner .logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    grid-template-areas: "i01 i01" "i03 i04" "i05 i06" "i07 empty";
  }
  #logostory .logo-item {
    height: auto;
    overflow: visible;
  }
  #logostory .logo-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  #logostory .placeholder {
    display: block;
  }
  #index #logostory,
  #index #Report {
    padding: 40px 0;
  }
}
/* 動きを減らす設定を使用している場合 */
@media (prefers-reduced-motion: reduce) {
  #Report .report-copy,
  #Report .report-title::after,
  #Report .report-arrow {
    transition: none;
  }
}
@media (max-width: 767px) {
  #Report .report-link {
    grid-template-columns: 96px minmax(0, 1fr) 24px;
    gap: 12px;
    padding: 20px 0;
    align-items: stretch;
  }
  #Report .report-meta {
    gap: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
  }
  #Report .report-category {
    padding: 2px 6px;
    font-size: 11px;
  }
  #Report .report-title {
    font-size: 13px;
    line-height: 1.5;
  }
  #Report .report-arrow {
    display: block;
    align-self: center;
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .pro-name {
    --pro-name-indent: 13px;
  }
  #pro-details .pro-name > h3.pro-ttl {
    margin-left: 15px;
  }
  .pro-category {
    margin-bottom: 32px;
  }
  .pro-category .su-of-su {
    gap: 4px 10px;
    padding: 7px 12px 6px;
    font-size: 17px;
  }
  .pro-category .su-of-su small {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  #related > .inner {
    width: calc(100% - 32px);
  }
}
@media (max-width: 960px) {
  body {
    font-size: 15px;
  }
  /* ヘッダー */
  header {
    min-height: 70px;
    padding: 15px 5vw;
  }
  header h1 {
    width: 72px;
  }
  header nav.PC {
    display: none;
  }
  header nav.SP {
    display: flex;
    gap: 12px;
  }
  header nav .sns {
    width: 20px;
    height: 20px;
  }
  /* 共通レイアウト */
  main {
    padding-top: 70px;
  }
  .inner,
  .s-inner,
  main:not(#index) .self-ttl {
    width: min(100% - 40px, 760px);
  }
  /* トップと下層の文字サイズは個別に調整 */
  .main-ttl .en-ttl {
    font-size: 48px;
  }
  .self-ttl .en-ttl {
    font-size: 48px;
  }
  /* トップ */
  #index #fv {
    min-height: 0;
  }
  #index::after {
    left: 50%;
  }
  #concept {
    padding: 52px 0 18px;
  }
  .about-inner {
    width: min(100% - 48px, 760px);
  }
  .about-heading h2 {
    font-size: 52px;
  }
  .history-inner {
    width: min(100% - 48px, 760px);
  }
  .history-heading h2 {
    font-size: 52px;
  }
  .history-period {
    font-size: 24px;
  }
  .history-item li {
    font-size: 17px;
  }
  .history-conclusion {
    font-size: 30px;
  }
  .project-menu__heading h2 {
    font-size: 38px;
  }
  .project-menu__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #activities .inner,
  #activities .project01 {
    grid-template-columns: 1fr;
  }
  #activities .project01 > .main,
  #activities .main-ttl {
    grid-column: auto;
  }
  #activities .project .main h4 {
    font-size: 28px;
  }
  /* 下層 */
  main:not(#index) {
    padding-top: 116px;
  }
  .pro-theme,
  .pro-details {
    padding: 28px 20px;
  }
  #activity-top .pro-ttl h2 {
    font-size: 48px;
  }
  .pro-ttl h2 {
    font-size: 48px;
  }
  .pro-ttl h2 span {
    font-size: 20px;
  }
  .pro-ttl .sub-ttl,
  .pro-sub {
    font-size: 18px;
  }
  .theme {
    font-size: 26px;
  }
  .term {
    font-size: 32px;
  }
  #pro-details .pro-ttl,
  .pro-name .pro-ttl {
    font-size: 46px;
  }
  #pro-theme .pro-ttl h2 {
    font-size: 46px;
  }
  /* 関連スライダー */
  #other-project {
    width: min(760px, 100% - 40px);
    padding: 32px 20px;
  }
  .slider-area h3 {
    font-size: 32px;
    font-weight: 700;
  }
}
@media (max-width: 640px) {
  /* ヘッダー */
  header {
    gap: 12px;
  }
  header nav.SP {
    max-width: calc(100vw - 118px);
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  header nav.SP::-webkit-scrollbar {
    display: none;
  }
  header nav.SP .sns {
    display: none;
  }
  /* 共通見出し */
  .main-ttl {
    display: block;
    margin-bottom: 38px;
  }
  .main-ttl .en-ttl {
    font-size: 38px;
  }
  .self-ttl .en-ttl {
    font-size: 38px;
  }
  .main-ttl::after,
  .self-ttl::after {
    height: 10px;
    margin-top: 10px;
    margin-bottom: -18px;
  }
  .main-ttl .line {
    padding-top: 16px;
  }
  /* 丸写真のリンクラベル */
  .kv-photo__label {
    bottom: 8px;
    padding: 5px 8px;
    font-size: 9px;
    translate: -50% 0;
    opacity: 1;
  }
  /* Concept */
  #concept {
    padding: 44px 0 16px;
  }
  .about-inner {
    width: calc(100% - 40px);
  }
  .about-heading {
    margin-bottom: 32px;
  }
  .about-heading h2 {
    font-size: 40px;
  }
  /* History */
  #history {
    padding: 36px 0 76px;
  }
  .history-inner {
    width: calc(100% - 40px);
  }
  .history-heading {
    margin-bottom: 52px;
  }
  .history-heading h2 {
    font-size: 40px;
  }
  .history-period {
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 34px;
    font-size: 18px;
    line-height: 1.35;
  }
  .history-period b {
    padding-left: 11px;
  }
  .history-item {
    padding: 0 0 52px 48px;
  }
  .history-item::before {
    left: 3px;
    width: 18px;
    height: 18px;
  }
  .history-item:not(:last-child)::after {
    left: 11px;
    top: 17px;
    bottom: -17px;
  }
  .history-item h3 {
    margin-bottom: 18px;
    font-size: 20px;
  }
  .history-item h3 small {
    font-size: 12px;
  }
  .history-item li {
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.8;
  }
  .history-conclusion {
    margin-top: -12px;
    font-size: 26px;
  }
  /* Activitiesへの入口 */
  .project-menu__heading {
    display: block;
  }
  .project-menu__heading p {
    margin-bottom: 10px;
  }
  .project-menu__heading h2 {
    font-size: 30px;
  }
  .project-menu__list {
    grid-template-columns: 1fr;
  }
  .project-menu__list a {
    min-height: 104px;
  }
  /* トップ内のプロジェクト一覧 */
  #activities .project01 {
    gap: 12px;
  }
  #activities .project .main h4 {
    font-size: 24px;
  }
  #activities .pro p {
    flex-basis: 72px;
    width: 72px;
    padding: 18px 8px;
    font-size: 21px;
  }
  #activities .pro h5 {
    padding: 18px;
    font-size: 18px;
  }
  /* 下層の見出し */
  #activity-top .pro-ttl h2 {
    font-size: 38px;
  }
  .pro-ttl h2 {
    font-size: 38px;
  }
  .pro-ttl h2 small {
    display: block;
    margin: 8px 0 0;
    font-size: 15px;
  }
  .pro-ttl h2 span {
    font-size: 18px;
  }
  .pro-ttl .sub-ttl,
  .pro-sub {
    font-size: 16px;
  }
  .theme {
    margin: 38px 0 22px;
    padding-bottom: 10px;
    font-size: 24px;
  }
  .term {
    font-size: 26px;
  }
  #pro-details .pro-ttl,
  .pro-name .pro-ttl {
    font-size: 36px;
  }
  #pro-theme .pro-ttl h2 {
    font-size: 36px;
  }
  /* 下層の本文 */
  .theme-txt,
  .pro-txt,
  .concept p,
  .drafer .work p,
  .drafer .work li,
  .links-list p,
  .interpunct li,
  .theme-list li {
    font-size: 14px;
  }
  /* プロジェクトカード */
  .project-list {
    display: block;
  }
  .project-list li {
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid rgba(23, 48, 93, 0.08);
  }
  /* 写真・担当者情報 */
  .pic,
  .pro-pic,
  .pic-flex .flex {
    display: block;
  }
  .pic .theme-pic,
  .pic-flex .flex p,
  .pic-flex .flex figure {
    width: 100%;
  }
  .drafer {
    padding: 22px;
  }
  .drafer .pic {
    display: flex;
  }
  /* 関連スライダー */
  .slider-area h3 {
    font-size: 26px;
    font-weight: 700;
  }
  .slider-list .slider02 .box,
  .slider-list .box {
    width: 78vw;
  }
  #other-project {
    margin-top: 24px;
    padding: 28px 16px;
  }
  #other-project .slider-list .slider02 .box {
    width: min(300px, 100vw - 96px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}
@media (max-width: 767px) {
  .history-period {
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 34px 48px;
    font-size: 18px;
    line-height: 1.35;
  }
  .history-period b {
    padding-left: 11px;
  }
  .history-timeline {
    margin-left: 12px;
  }
  .history-item {
    padding: 0 0 52px 36px;
  }
  .history-item::before {
    top: 4px;
    left: 18px;
    width: 12px;
    height: 12px;
    border: 0;
    background: var(--su-sky, #00a1e9);
  }
  .history-item:not(:last-child)::after {
    top: 10px;
    bottom: -10px;
    left: 23.5px;
    width: 1px;
  }
  .history-item h3 {
    margin-bottom: 18px;
    font-size: 20px;
  }
  .history-item h3 small {
    font-size: 12px;
  }
  .history-item ul {
    margin-left: 18px;
  }
  .history-item li {
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.8;
  }
  .history-item li::before {
    top: calc((1.8em - 8px) / 2);
    width: 8px;
    height: 8px;
  }
}
@media (max-width: 767px) {
  /* フレキシブル銅合金・3DPart */
  #pro-theme .project-fx__headline {
    font-size: 20px;
  }
  #pro-theme .project-gallery__grid,
  #pro-details .project-gallery__grid {
    gap: 14px;
    margin: 0;
  }
  #pro-theme .project-fx-back {
    margin-top: 28px;
  }
  /* 沿革 */
  #pro-theme .ww-history {
    margin: 44px 0 28px;
  }
  #pro-theme .ww-history > .theme {
    margin-bottom: 28px;
  }
  #pro-theme .ww-history-timeline {
    padding-left: 20px;
  }
  #pro-theme .ww-history-item {
    margin-bottom: 22px;
  }
  #pro-theme .ww-history-item::before {
    top: 28px;
    left: -17px;
    width: 12px;
    height: 12px;
  }
  #pro-theme .ww-history-item:not(:last-child)::after {
    top: 34px;
    bottom: -56px;
    left: -11.5px;
  }
  #pro-theme .ww-history-card {
    padding: 20px 18px 24px;
    border-radius: 7px;
  }
  #pro-theme .ww-history-year {
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 9px;
    font-size: 26px;
  }
  #pro-theme .ww-history-year span {
    font-size: 13px;
  }
  #pro-theme .ww-history-subtitle {
    margin: 24px 0 12px;
    padding: 0 0 7px 12px;
    font-size: 16px;
  }
  #pro-theme .ww-history-subtitle[lang=ja] {
    font-size: 16px;
  }
  #pro-theme .ww-history-subtitle::before {
    bottom: 9px;
    width: 2px;
  }
  #pro-theme .ww-history-text {
    margin-left: 10px;
  }
  #pro-theme .ww-history-list {
    margin-left: 10px;
  }
  #pro-theme .ww-history-text,
  #pro-theme .ww-history-list li {
    font-size: 14px;
    line-height: 1.85;
  }
  #pro-theme .ww-history-list li {
    padding-left: 15px;
  }
  #pro-theme .ww-history-list li::before {
    top: calc((1.85em - 7px) / 2);
    width: 7px;
    height: 7px;
  }
}
@media (max-width: 768px) {
  #report .report-card {
    padding: 24px 20px;
  }
  #report .report-back {
    margin-top: 28px;
  }
  #report .report-title {
    font-size: 22px;
    line-height: 1.65;
  }
  #report .report-category {
    font-size: 15px;
    margin-bottom: 16px;
  }
  #report .report-heading {
    margin-bottom: 24px;
  }
  #report .self-ttl .en-ttl {
    margin-bottom: 12px;
  }
  #report .self-ttl .ja-ttl {
    padding-bottom: 16px;
  }
}
/* 767px以下 */
@media (max-width: 767px) {
  .site-footer {
    min-height: 60px;
    padding: 14px 82px 14px 16px;
  }
  .site-footer__copyright {
    font-size: 10px;
  }
  .page-top {
    /* 円の上端をフッターに少し重ねる */
    top: -41px;
    right: 16px;
    bottom: auto;
    width: 52px;
    height: 52px;
  }
  .page-top span {
    width: 9px;
    height: 9px;
  }
}
@media (max-width: 768px) {
  #other-projects {
    padding: 52px 0 64px;
  }
  #other-projects > .inner {
    width: calc(100% - 40px);
  }
  .activity-other__title {
    font-size: 23px;
  }
  #other-projects .project-list {
    display: block;
  }
  #other-projects .project-list li {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  #Activities-top #fv > .fv-wrapper > .inner {
    width: calc(100% - 40px);
  }
  #Activities-top .project-list li {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .activity-other__pdf-caption {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  /* トップ：写真セクションの背景・余白 */
  #index::after {
    background-image: none;
  }
  #kv-projects {
    background-image: url("../images/kv/pattern-sparse.png");
    background-repeat: repeat;
    background-size: 20% auto;
    background-position: center top;
  }
  #kv-projects .kv-stage {
    /* 写真の比率と配置に合わせ、画面幅に比例 */
    height: 86vw;
    overflow: visible;
  }
  #kv-projects .kv-photo {
    position: absolute;
    display: block;
    margin: 0;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  #kv-projects .kv-photo--02,
  #kv-projects .kv-photo--03,
  #kv-projects .kv-photo--04,
  #kv-projects .kv-photo--05,
  #kv-projects .kv-photo--06,
  #kv-projects .kv-photo--07,
  #kv-projects .kv-photo--08,
  #kv-projects .kv-photo--11 {
    display: none;
  }
  /* スマホ丸写真のサイズ・位置 */
  #kv-projects .kv-photo--01 {
    /* スマートフォンでは画面幅に比例して拡大 */
    --size: 45vw;
    left: -3%;
    top: -15%;
    animation-name: kv-float-mobile-a;
    animation-delay: -1.4s;
  }
  #kv-projects .kv-photo--13 {
    --size: 55vw;
    left: 47%;
    top: -5%;
    animation-name: kv-float-mobile-b;
    animation-delay: -3.2s;
  }
  #kv-projects .kv-photo--09 {
    --size: 40vw;
    left: 14%;
    top: 30%;
    animation-name: kv-float-mobile-c;
    animation-delay: -5s;
  }
  #kv-projects .kv-photo--12 {
    --size: 32vw;
    left: 56%;
    top: 61%;
    animation-name: kv-float-mobile-a;
    animation-delay: -6.5s;
  }
  #kv-projects .kv-photo__label {
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 8px;
    font-size: 10px;
    translate: -50% 0;
    opacity: 1;
  }
  #index #concept {
    margin-top: 0;
  }
  /* トップのスマートフォン表示：ロゴ・コピー・各見出しを整える */
  #index #fv {
    position: relative;
    z-index: 2;
    isolation: isolate;
    background: #fff;
  }
  #index .kv-artboard {
    display: flex;
    height: auto;
    min-height: 0;
    padding: 30px 0 8px;
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
  }
  #index .kv-logo {
    position: relative;
    top: auto;
    left: auto;
    /* 白背景の中で、ロゴと説明文の幅をそろえる */
    width: 48%;
    max-width: 300px;
    height: auto;
    aspect-ratio: auto;
    padding: 15px 0 30px;
    box-shadow: none;
    margin: 0 auto;
  }
  #index #kv-intro-copy {
    position: relative;
    top: auto;
    left: auto;
    width: 48%;
    max-width: 300px;
    margin: 0 auto;
    background: #fff;
  }
  #index .kv-intro-copy__box {
    padding: 0;
    background: #fff;
    box-shadow: none;
    text-align: left;
  }
  #index .kv-intro-copy__box h2 {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.45;
    text-wrap: pretty;
  }
  #index .kv-intro-copy__box p {
    margin: 10px 0 7px;
    font-size: 12px;
    line-height: 1.5;
    text-wrap: pretty;
  }
  /* すべてのセクション見出しを横並びに保つ */
  .main-ttl {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 18px;
    margin-bottom: 30px;
    /* PCと同じ左の文字位置・下線までの余白を維持 */
    padding: 0 0 12px 12px;
  }
  .main-ttl .en-ttl {
    flex: 0 0 auto;
    font-size: 30px;
    white-space: nowrap;
  }
  .main-ttl .line {
    flex: 0 1 auto;
    padding-top: 0;
  }
  .main-ttl .line h3 {
    font-size: 14px;
    white-space: nowrap;
  }
  #Report .report-title {
    font-size: 14px;
    line-height: 1.5;
  }
  /* お問い合わせのスマホ表示 */
  #index #contact .sec-inner {
    overflow: visible;
    padding: 18px 0;
  }
  #index #contact .sec-inner > .main {
    width: 78%;
    margin: 0 auto;
    padding: 20px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(23, 48, 93, 0.18);
    text-align: left;
  }
  #contact .main p {
    font-size: 14px;
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
  }
  #contact .main p a {
    font-size: 15px;
  }
}
/* [MEDIA-3DP] 3DPart：動画・写真 */
#pro-details .project-3dp-media {
  margin: 38px 20px 0;
}

#pro-details .project-3dp-media__video-pair,
#pro-details .project-3dp-media__photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

#pro-details .project-3dp-media__photo {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
}

#pro-details .project-3dp-media__description {
  margin: 14px 18px 18px;
  color: var(--su-navy);
  font-size: 16px;
  line-height: 1.8;
}

#pro-details .project-3dp-media__photo img {
  display: block;
  width: 100%;
  height: auto;
}

#pro-details .project-3dp-media__photo figcaption {
  margin: 8px 18px 20px;
  color: var(--su-navy);
  font-size: 15px;
  line-height: 1.7;
}

/* [MEDIA-FX] フレキシブル銅合金：動画と縦並びの写真 */
#pro-theme .project-fx-media-layout {
  display: grid;
  grid-template-columns: 70.33% 29.67%;
  align-items: start;
  gap: 0;
  margin: 0 20px;
}

#pro-theme .project-fx-media-layout__video,
#pro-theme .project-fx-media-layout__photos {
  min-width: 0;
}

#pro-theme .project-fx-media-layout__video iframe {
  display: block;
  width: 100%;
}

#pro-theme .project-fx-media-layout__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

#pro-theme .project-fx-media-layout__photo {
  min-width: 0;
  margin: 0;
}

#pro-theme .project-fx-media-layout__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* [MEDIA-YOUTUBE] YouTube埋め込み枠 */
#pro-details .project-3dp-media .iframe,
#pro-theme .project-fx-media-layout .iframe {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* [MEDIA-SP] スマートフォン表示 */
@media (max-width: 767px) {
  #pro-details .project-3dp-media {
    margin: 28px 0 0;
  }
  #pro-details .project-3dp-media__video-pair,
  #pro-details .project-3dp-media__photo-grid {
    grid-template-columns: 1fr;
  }
  #pro-details .project-3dp-media__description {
    margin: 12px 12px 16px;
    font-size: 14px;
  }
  #pro-details .project-3dp-media__photo figcaption {
    margin: 7px 12px 16px;
    font-size: 13px;
  }
  #pro-theme .project-fx-media-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
  }
  #pro-theme .project-fx-media-layout__photos {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=common2026.css.map */