:root {
    --white: #FFFFFF;
    --white-2: #EFEFEF;
    --light-blue: #F6F6FC;
    --blue: #001E60;

    --font-parabolica: "parabolica", sans-serif;
    --font-poppins: "poppins", sans-serif;
    --font-notoserif: "Noto Serif JP", serif;
}
.bg-video:before {
    content: "";
    background: #42647F;
    background: linear-gradient(0deg,rgba(66, 100, 127, 1) 0%, rgba(33, 50, 64, 1) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    mix-blend-mode: multiply;
}
/* general */
.pc {
    display: none !important;
}
.sp {
    display: block !important;
}
.mt0 {
    margin-top: 0 !important;
}
.content-block {
    width: 89.6vw; /* 336px */
    margin-inline: auto;
    box-sizing: border-box;
}
.txt-normal {
    font-size: 2.67vw; /* 10px */
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.1em;
    margin-top: 1em;
}
.btn-link {
    color: var(--blue);
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    width: 69.33vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11.73vw;
    background: var(--white);
    border: 0.53vw solid var(--blue);
    border-radius: 2666.4vw;
    margin: 6.67vw auto 0;
    text-decoration: none;
    position: relative;
    box-sizing: border-box;
    /* --- 背景切り替えのための追加 --- */
    overflow: hidden; 
    z-index: 1;
    transition: color 0.4s ease; /* 文字色の変化を滑らかに */
}

/* アニメーション用の背景レイヤー */
.btn-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    transform: scaleX(0); /* 最初は幅ゼロ */
    transform-origin: right; /* 消える時は右へ */
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

/* ホバー時の背景と文字色 */
.btn-link:hover {
    color: var(--white);
}

.btn-link:hover::before {
    transform: scaleX(1); /* 背景を塗りつぶす */
    transform-origin: left; /* 出る時は左から */
}

/* 矢印（.arrow）の設定：色変化のみ */
.arrow {
    display: inline-block;
    width: 3.47vw;
    height: 3.47vw;
    position: absolute;
    right: 4.8vw;
    z-index: 2;
    /* 動かさないので transform の transition は不要 */
}

.arrow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3.2vw;
    height: 3.2vw;
    border-top: 0.53vw solid var(--blue);
    border-right: 0.53vw solid var(--blue);
    transition: border-color 0.4s ease; /* 枠線の色だけ変える */
}

.arrow::after {
    content: "";
    position: absolute;
    top: 0.27vw;
    right: 0.53vw;
    width: 4vw;
    height: 0.53vw;
    background-color: var(--blue);
    transform: rotate(-45deg);
    transform-origin: top right;
    transition: background-color 0.4s ease; /* 斜め線の色だけ変える */
}

/* ホバー時の矢印の色反転 */
.btn-link:hover .arrow::before {
    border-color: var(--white);
}

.btn-link:hover .arrow::after {
    background-color: var(--white);
}
.pc-block .btn-link {
    font-weight: 700;
    line-height: 1;
    width: 100%;
    height: 11.167vw;
    margin: 0 auto;
    border: 2px solid var(--blue);
    border-radius: 520.781vw;
}
@media screen and (min-width: 768px) {
    .pc-block .btn-link {
        font-size: 1.1vw;
        width: 20vw;
        height: 3.167vw;
        margin: 0 auto 0 0;
    }
}
/* section-a */
.section-a {
    color: var(--white);
    text-align: center;
}

.hero {
    position: "";
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hero .hero-logo {
    width: 71.2vw; /* 267px */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.hero .hero-txt-block {
    position: absolute;
    bottom: 28vw;
    font-weight: 700;
}
/* 初期状態 */
.hero-logo,
.hero-txt-block {
  opacity: 0;
  visibility: hidden;
  position: relative;
}

/* 登場後の確定状態 */
.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ノイズ実行用 */
.is-glitching {
  animation: glitch-clip 0.15s infinite steps(2);
}

@keyframes glitch-clip {
  0% { clip-path: inset(20% 0 50% 0); }
  50% { clip-path: inset(60% 0 5% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.hero-collab-number {
    font-size: 3.2vw; /* 12px */
    line-height: 1;
}
.hero-collab-name {
    font-size: 3.47vw; /* 13px */
    line-height: 1;
    margin-top: 1em;
}
.intro {
    width: 100%;
    padding: 16vw 10.67vw 18.67vw; /* 60px 40px 70px */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.intro-ttl {
    font-size: 4.53vw; /* 17px */
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}
.intro-ttl span {
    display: inline;
    font-family: var(--font-parabolica);
}
.intro-txt {
    font-size: 3.47vw; /* 13px */
    font-weight: 900;
    line-height: 2.7;
    letter-spacing: 0.03em;
    margin-top: 3em;
    position: relative;
    z-index: 2;
}
.intro-ttl + .intro-txt {
    margin-top: 3em;
}
.bg-txt-block {
    position: absolute;
    top: -2.67vw; /* -10px */
    left: -26.666666666666668vw;
    z-index: 1;
    opacity: 0.2;
    pointer-events: none;
}
.bg-txt {
    font-size: 18.93vw; /* 71px */
    font-family: var(--font-parabolica);
    font-weight: 200;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: left;
}
/* 初期状態：JSが動く前 */
.intro-ttl,
.intro-txt {
  opacity: 0;
  visibility: hidden;
  position: relative;
}

/* 登場確定：ノイズが終わっても、このクラスで表示を維持する */
.is-revealed {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 背景テキスト：最終的に 0.2 */
.bg-txt-block {
  opacity: 0;
  transform: translateX(100px);
  will-change: transform, opacity;
}

/* ノイズ実行用 */
.is-intro-glitching {
  visibility: visible;
  opacity: 1 !important;
  animation: glitch-clip 0.1s infinite steps(2);
}
/* section-b */
.section-b {
    color: var(--blue);
    padding-top: 12vw; /* 45px */
    padding-bottom: 12vw; /* 45px */
    position: relative;
    z-index: 2;
    background: url(/crossing/assets/img/bg-section-b-sp.webp) repeat-y top left / contain;
}
.line-vertical-1,
.line-vertical-2 {
    width: 0.27vw; /* 1px */
    height: 100%;
    background: var(--blue);
    position: absolute;
    top: 0;
    z-index: 1;
}
.line-vertical-1 {
    left: 5.33vw; /* 20px */
}
.line-vertical-2 {
    right: 5.33vw; /* 20px */
}
.section-b .content-block {
    width: 80vw; /* 300px */
    margin: 10.67vw auto 0; /* 40px */
    position: relative;
    z-index: 2;
}
.section-b .content-block.creater {
    display: flex;
    flex-direction: column;
    gap: 6.13vw; /* 23px */
}
.ttl-set {
    position: relative;
    z-index: 1;
}
.ttl-set:nth-of-type(n+2) {
    margin-top: 13.33vw; /* 50px */
}
.ttl-set .ttl-h2 {
    color: var(--blue);
    font-size: 4.27vw; /* 16px */
    font-family: var(--font-parabolica);
    font-weight: 700;
    letter-spacing: 0.4em;
    line-height: 1;
    text-align: center;
    position: relative;
    z-index: 3;
    overflow: visible;
    text-align: center;
}
.interview .ttl-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.interview .ttl-set .sub-ttl {
    font-size: 3.47vw;
    font-family: var(--font-notoserif);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1; 
}
.interview .ttl-set .ttl-h3 {
    font-size: 5.33vw;
    font-weight: 700;
    font-family: var(--font-notoserif);
    letter-spacing: 0.1em;
    line-height: 1;
}
.ttl-h2 span {
    display: inline-block; /* アニメーションを可能にするために必須 */
    white-space: nowrap;
    opacity: 1; /* 初期値は1にしておき、GSAPのfromで0にするのが安全です */
    visibility: visible;
}
.ttl-set .ttl-bg-txt {
    color: var(--blue);
    font-size: 10.4vw; /* 39px */
    font-weight: 200;
    letter-spacing: 0.07em;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    opacity: 0.08;
    pointer-events: none;
}
.ttl-set .line-1,
.ttl-set .line-2 {
    width: 100vw;
    height: 0.27vw; /* 1px */
    background: #001E60;
    position: absolute;
    left: 0;
    z-index: 1;
}
.ttl-set .line-1 {
    top: -4vw; /* -15px */
}
.ttl-set .line-2 {
    bottom: -4vw; /* -15px */
}
.creative-flex {
    display: flex;
    flex-direction: column;
}
.interview .creative-flex {
    gap: 1.5em;
}
.creative-flex .ttl-h3 {
    font-size: 3.2vw; /* 12px */
    font-weight: 700;
    line-height: 1.7;
} 
.inner-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8vw; /* 30px */
    margin-top: 4vw; /* 15px */
}
.txt-number {
    font-size: 18.67vw; /* 70px */
    font-weight: 900;
    line-height: 1;
}
.artist-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4vw 2.67vw; /* 15px 10px */
}

.artist-list-block {
    display: contents; 
}

.artist-list dt,
.artist-list dd {
    font-size: 2.67vw; /* 10px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    margin: 0;
}
.creative-txt-block {
    margin-top: 6.67vw; /* 25px */
}
.creative-name {
    font-size: 4.27vw; /* 16px */
    font-weight: 700;
    line-height: 1;
}
.movie-flex {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
}
.movie-box {
    width: 60.8vw; /* 228px */
    margin: 6.67vw auto 0; /* 25px */
}
.movie-box .movie-ttl {
    font-size: 2.93vw;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1.33vw;
}
.movie-box .movie-ttl::before {
    content: "";
    width: 1.33vw;
    height: 0.53vw;
    background: var(--blue);
}
.movie-box video {
    width: 100%;
    display: block;
}
/* モーダル */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.modal-content {
    position: relative;
    width: 90%;
    max-width: 800px; /* ここはPCも含めた最大幅なので維持 */
}
.modal-content video {
    width: 100%;
    display: block;
}
.modal-close {
    position: absolute;
    top: -8vw; /* -30px */
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 3.73vw; /* 14px */
    font-family: var(--font-parabolica);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.1em;
    width: 55px;
    padding: 1.33vw; /* 5px */
}
.modal-close::before,
.modal-close::after {
    content: none !important;
}
.modal-close:hover {
    opacity: 0.7;
}

/* 画像をクリックしやすくする */
.movie-box img {
    cursor: pointer;
}
.creater-item {
    padding: 5.33vw; /* 20px */
    /* margin-inline: auto; */
    background: var(--white);
    box-shadow: 0px 0.53vw 0.53vw 0px rgba(0, 0, 0, 0.16); /* 2px 2px */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5.33vw; /* 20px */
}
.card-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7.2vw; /* 27px */
}
.creater-thum {
    width: 32vw; /* 120px */
}
.creater-name {
    font-size: 5.33vw; /* 20px */
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.05em;
}
.creater-job {
    font-size: 2.67vw; /* 10px */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-top: 2.67vw; /* 10px */
}
.sns-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5.33vw; /* 20px */
    margin-top: 4vw; /* 15px */
}
.creater-item .sns-link {
    width: 11.47vw; /* 43px */
    height: 11.47vw; /* 43px */
    background: var(--blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.creater-item .sns-link:hover {
    transform: scale(1.1);
}
.creater-item .sns-link.x img {
    width: 5.33vw; /* 20px */
}
.creater-item .sns-link.youtube img {
    width: 6.4vw; /* 24px */
}
.card-right .txt-normal {
    font-size: 2.93vw; /* 11px */
    letter-spacing: 0.01em;
    margin-top: 0;
}
.txt-large {
    font-size: 3.733333333333334vw;
    font-family: var(--font-notoserif);
    font-weight: 700;
    line-height: 1.4;
    margin-top: 5.333333333333334vw;
}
.txt-large span {
    font-size: 2.933333333333333vw;
    display: inline;
}
.txt-large + .txt-normal {
    margin-top: 4.8vw;
}
.notoserif {
    font-family: var(--font-notoserif);
}
.pc-block {
    background: var(--light-blue);
    display: flex;
    flex-wrap: wrap;
    gap: 5.33vw; /* 20px */
    margin-top: 5.33vw; /* 20px */
    padding: 2.67vw; /* 10px */
}
.pc-block .txt-block {
    width: calc(100% - 32vw); /* 120px */
}
.use-pc {
    font-size: 2.93vw; /* 11px */
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.33vw; /* 5px */
}
.use-pc::before {
    content: "";
    width: 1.33vw; /* 5px */
    height: 0.53vw; /* 2px */
    background: var(--blue);
    display: block;
}
.pc-name {
    font-size: 3.73vw; /* 14px */
    font-weight: 700;
    line-height: 1.4;
    margin-top: 5.33vw; /* 20px */
}
.pc-name .small {
    font-size: 65%;
}
.pc-note {
    font-size: 2.67vw; /* 10px */
    font-weight: 700;
    line-height: 1.4;
    text-indent: -1em;
    margin-left: 1em;
    margin-top: 2.67vw; /* 10px */
}
.pc-thum {
    width: 26.67vw; /* 100px */
    height: 26.67vw; /* 100px */
}
.spec-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    row-gap: 1.87vw; /* 7px */
    column-gap: 1.87vw; /* 7px */
    margin: 0;
    padding: 0;
}
.spec-list-block {
    display: contents;
}
.spec-list dt {
    font-size: 2.4vw; /* 9px */
    font-weight: 500;
    line-height: 1;
}
.spec-list dd {
    font-size: 2.67vw; /* 10px */
    font-weight: 500;
    line-height: 1;
}
.talk-session .ttl-h3 {
    font-size: 3.2vw; /* 12px */
    font-weight: 700;
    line-height: 1;
}
.ttl-session {
    font-size: 4.27vw; /* 16px */
    font-weight: 700;
    line-height: 1.7;
    margin-top: 6.67vw; /* 25px */
}
.txt-session {
    font-size: 2.67vw; /* 10px */
    font-weight: 700;
    line-height: 1.7;
    margin-top: 6.67vw; /* 25px */
}
/* リロード時のチラつきを防止 */
.merry-go-round {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.merry-go-round .creater-thum {
    width: 26.666666666666668vw;
    height: auto;
    position: absolute;
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); 
    will-change: transform, opacity;
}

.merry-go-round .creater-thum img {
    width: 100%;
    height: auto;
    display: block;
}
/* section-c */
.section-c {
    position: relative;
    z-index: 3;
}
.section-c::before,
.section-c::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.section-c::before {
    background: url(/crossing/assets/img/bg-collab.webp) center top/ 35%;
    z-index: 2;
    opacity: 0.3;
}
.section-c::after {
    background: var(--light-blue);
    z-index: 1;
}
.content-block.collab {
    width: 67.2vw; /* 252px */
    padding-block: 13.33vw; /* 50px */
    position: relative;
    z-index: 5;
}
.collab .ttl-h2 {
    color: var(--blue);
    font-size: 4.27vw; /* 16px */
    font-family: var(--font-parabolica);
    font-weight: 700;
    letter-spacing: 0.4em;
    line-height: 1.5;
    position: relative;
    left: -4vw; /* -15px */
    text-align: left;
}
.collab .ttl-h2 span {
    display: inline-block;
    /* line-height: 1.3; */
}
.collab-bnr {
    margin-top: 4vw; /* 15px */
    display: inline-block;
}
.collab-catch {
    color: var(--blue);
    font-size: 3.2vw; /* 12px */
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    margin-top: 2.67vw; /* 10px */
}

.content-block.news {
    width: 69.2vw;
    display: flex;
    flex-direction: column;
    padding-bottom: 13.33vw;
    position: relative;
    z-index: 2;
}
.news .ttl-h2 {
    color: var(--blue);
    font-size: 4.27vw;
    font-family: var(--font-parabolica);
    font-weight: 700;
    letter-spacing: 0.4em;
    line-height: 1.5;
    position: relative;
    left: -4vw;
    text-align: left;
}
.img-stamps {
    margin-top: 6.67vw;
}
@media screen and (min-width: 769px) {
/* general */
.pc { display: block !important; }
.sp { display: none !important; }

.content-block {
    width: 84.271vw; /* 1618px */
    padding-inline: 7.813vw; /* 150px */
}
.txt-normal {
    font-size: 0.833vw; /* 16px */
    letter-spacing: 0.04em;
    margin-top: 1em;
}
.btn-link {
    font-size: 1.25vw; /* 24px */
    font-weight: 700;
    line-height: 1;
    width: 25vw; /* 480px */
    height: 4.167vw; /* 80px */
    border: 2px solid var(--blue); /* 境界線はpx維持が一般的ですが0.104vwでも可 */
    border-radius: 520.781vw; /* 9999px相当 */
    margin: 1.823vw auto 0; /* 35px */
}
.arrow {
    width: 1.25vw; /* 24px */
    height: 1.25vw; /* 24px */
    right: 1.667vw; /* 32px */
}
.arrow::before {
    width: 0.938vw; /* 18px */
    height: 0.938vw; /* 18px */
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
}
.arrow::after {
    top: 0vw; /* 0px */
    right: 0.104vw; /* 2px */
    width: 1.25vw; /* 24px */
    height: 0.104vw; /* 2px */
}
/* section-a */
.hero .hero-logo {
    width: 35.052vw; /* 673px */
}
.hero .hero-txt-block {
    bottom: 7.031vw; /* 135px */
    text-align: center;
}
.hero-collab-number {
    font-size: 1.25vw; /* 24px */
}
.hero-collab-name {
    font-size: 1.563vw; /* 30px */

}
.intro {
    padding: 15.104vw 6.25vw 6.771vw; /* 290px 120px 130px */
}
.intro-ttl {
    font-size: 2.083vw; /* 40px */
    letter-spacing: 0.03em;
}
.intro-ttl span {
    font-size: 2.604vw; /* 50px */
}
.intro-txt {
    font-size: 1.667vw; /* 32px */
}
.intro-ttl + .intro-txt {
    margin-top: 3em;
}
.bg-txt-block {
    top: 5.729vw; /* 110px */
    left: 0;
}
.bg-txt {
    font-size: 10.417vw; /* 200px */
}
/* section-b */
.section-b {
    padding-top: 6.51vw; /* 125px */
    padding-bottom: 8.073vw; /* 155px */
    background: url(/crossing/assets/img/bg-section-b-pc.webp) repeat-y top left / contain;
}
.line-vertical-1,
.line-vertical-2 {
    width: 0.156vw; /* 3px */
}
.line-vertical-1 {
    left: 7.396vw; /* 142px */
}
.line-vertical-2 {
    right: 7.396vw; /* 142px */
}
.section-b .line-3 {
    width: 100vw;
    height: 0.156vw; /* 3px */
    background: var(--blue);
    position: absolute;
    bottom: 3.646vw; /* 70px */
    display: block;
}
.section-b .content-block {
    width: 83.333vw; /* 1600px */
    margin: 7.813vw auto 0; /* 150px */
}
.section-b .content-block.creater {
    gap: 1.51vw; /* 29px */
}
.ttl-set:nth-of-type(n+2) {
    margin-top: 11.979vw; /* 230px */
}
.ttl-set .ttl-h2 {
    font-size: 3.646vw; /* 70px */
}
.interview .ttl-set {
    align-items: flex-start;
}
.interview .ttl-set .sub-ttl {
    font-size: 1.042vw;
}
.interview .ttl-set .ttl-h3 {
    font-size: 2.083333333333333vw;
}
.ttl-set .ttl-bg-txt {
    font-size: 9.375vw; /* 180px */
    font-weight: 200;
    top: 30%;
}
.ttl-set .line-1,
.ttl-set .line-2 {
    height: 0.156vw; /* 3px */
}
.ttl-set .line-1 {
    top: -2.344vw; /* -45px */
}
.ttl-set .line-2 {
    bottom: -2.344vw; /* -45px */
}
.merry-go-round .creater-thum {
    width: 14.583333333333334vw;
}

.creative-flex {
    flex-direction: row;
    gap: 5.208vw; /* 100px */
}
.interview .creative-flex {
    gap: 1.875vw;
    margin-top: 2.75vw;
}
.creative-flex .txt-box {
    width: 26.042vw; /* 500px */
}
.creative-flex .ttl-h3 {
    font-size: 1.042vw; /* 20px */
    margin-top: 1.563vw; /* 30px */
} 
.inner-flex {
    gap: 1.563vw; /* 30px */
    margin-top: 0.521vw; /* 10px */
}
.txt-number {
    font-size: 6.25vw; /* 120px */
}
.artist-list {
    gap: 1.302vw 0.781vw; /* 25px 15px */
}
.artist-list dt,
.artist-list dd {
    font-size: 0.833vw; /* 16px */
}
.creative-txt-block {
    margin-top: 2.083vw; /* 40px */
}
.creative-name {
    font-size: 1.615vw; /* 31px */
}
.movie-flex {
    flex-direction: row;
    gap: 4vw;
    margin-top: 3vw;
}
.movie-box {
    width: 42.24vw; /* 811px */
    margin: 0;
}
.movie-box .movie-ttl {
    font-size: 0.781vw;
    gap: 0.521vw;
}
.movie-box .movie-ttl::before {
    width: 0.625vw;
    height: 0.156vw;
}
.movie-box video {
    width: 100%;
    display: block;
}
/* モーダル */
.modal-content {
    max-width: 67.969vw; /* 1305px */
}
.modal-close {
    width: fit-content;
    top: -5.208vw; /* -100px */
    font-size: 3.646vw; /* 70px */
    padding: 0;
}
.creater-item {
    padding: 3.906vw; /* 75px */
    box-shadow: 0px 0.104vw 0.104vw 0px rgba(0, 0, 0, 0.16); /* 2px 2px相当 */
    flex-direction: row;
    gap: 3.542vw; /* 68px */
}
.card-left {
    width: 18.7vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625vw;
    flex: none;
}
.creater-thum {
    width: 100%; /* 280px */
}
.creater-name-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.781vw; /* 15px */
}
.creater-name {
    font-size: 1.723vw; /* 35px */
    position: relative;
}
.creater-name::after {
    content: "/";
    font-weight: 200;
    position: relative;
    right: -0.26vw; /* -5px */
}
.creater-job {
    font-size: 0.833vw; /* 16px */
    margin: 0;
}
.sns-list {
    justify-content: flex-end;
    gap: 1.615vw; /* 31px */
    margin-top: 0; /* 30px */
}
.creater-item .sns-link {
    width: 2.969vw; /* 57px */
    height: 2.969vw; /* 57px */
}
.creater-item .sns-link.x img {
    width: 1.406vw; /* 27px */
}
.creater-item .sns-link.youtube img {
    width: 1.719vw; /* 33px */
}
.card-right .txt-normal {
    font-size: 0.833vw; /* 16px */
    letter-spacing: 0.18em;
}
.txt-large {
    font-size: 2.083333333333333vw;
    margin-top: 0;
}
.txt-large span {
    font-size: 0.8333333333333334vw;
}
.card-right .txt-normal {
    margin-top: 2.083333333333333vw;
}
.pc-block { 
    gap: 1.823vw; /* 35px */
    margin-top: 2.344vw; /* 45px */
    padding: 1.563vw; /* 30px */
}
.pc-block .txt-block {
    width: calc(100% - 13.333vw); /* 256px */
}
.use-pc {
    font-size: 0.781vw; /* 15px */
    gap: 0.521vw; /* 10px */
}
.use-pc::before {
    content: "";
    width: 0.625vw; /* 12px */
    height: 0.156vw; /* 3px */
}
.pc-name {
    font-size: 1.25vw; /* 24px */
    margin-top: 0.521vw; /* 10px */
}
.pc-note {
    font-size: 0.677vw; /* 13px */
    margin-top: 0.521vw; /* 10px */
}
.pc-thum {
    width: 11.51vw; /* 221px */
    height: 11.51vw; /* 221px */
}
.spec-list {
    row-gap: 0.521vw; /* 10px */
    column-gap: 1.042vw; /* 20px */
    margin-top: 0.521vw; /* 10px */
}
.spec-list-block {
    display: contents;
}
.spec-list dt {
    font-size: 0.833vw; /* 16px */
    letter-spacing: 0.05em;
}
.spec-list dd {
    font-size: 0.833vw; /* 16px */
    letter-spacing: 0.05em;
}
.talk-session .ttl-h3 {
    font-size: 1.563vw; /* 30px */
}
.ttl-session {
    font-size: 1.771vw; /* 34px */
    margin-top: 2.344vw; /* 45px */
}
.txt-session {
    font-size: 0.781vw; /* 15px */
    margin-top: 1.302vw; /* 25px */
}
.talk-session .btn-link {
    margin-right: 0;
    margin-top: 1.823vw; /* 35px */
}
/* section-c */
.section-c::before {
    background: url(/crossing/assets/img/bg-collab.webp) left top/ 23%;
}
.content-block.collab {
    width: 83.333vw; /* 1600px */
    padding-block: 11.25vw; /* 216px */
}
.collab .ttl-h2 {
    font-size: 3.646vw; /* 70px */
    letter-spacing: 0.1em;
    line-height: 1.3;
    left: 0;
}
.collab-bnr {
    margin-top: 3.385vw; /* 65px */
}
.collab-catch {
    font-size: 1.615vw; /* 31px */
    text-align: left;
    margin-top: 2.083vw; /* 40px */
}
.collab .btn-link {
    margin-right: 0;
}
.content-block.news {
    width: 83.333vw;
    padding-bottom: 11.25vw;
    flex-direction: row;
    align-items: center;
    gap: 1.875vw;
}
.news .ttl-h2 {
    font-size: 3.646vw; /* 70px */
    letter-spacing: 0.1em;
    line-height: 1.3;
    left: 0;
}
.img-stamps {
    width: 30vw;
    margin-top: 0;
}
}

.p-top-mv__scroll {
    height: fit-content;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-260%);
    writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
    .p-top-mv__scroll {
        display: none;
    }
}
.p-top-mv__scroll::before {
    animation: scroll-down 2s infinite;
    background-color: var(--primary-white);
    bottom: -18rem;
    content: "";
    height: 15.8rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
    z-index: 2;
}
.p-top-mv__scroll::after {
    background-color: var(--primary-white);
    opacity: 0.5;
    bottom: -18rem;
    content: "";
    height: 15.8rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}
.p-top-mv__scroll span {
    font-family: "Inter", sans-serif;
    font-size: 1.2rem;
    color: var(--primary-white);
}
@keyframes scroll-down {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }
    51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}


/* =========================================================
    Gridレイアウト設定 (モバイルファースト: SPデフォルト)
   ========================================================= */
.grid-container {
    display: grid;
    gap: 0;
    border-top: 1px solid #e9ecef;
    border-left: 1px solid #e9ecef;
    width: 100%;
    
    /* SP: 全体のアスペクト比 300 / 1183 */
    aspect-ratio: 300 / 1183;

    /* 3列構成（109fr : 82fr : 109fr）にして中盤と下部の幅を両立 */
    grid-template-columns: 109fr 82fr 109fr;
    grid-template-rows: 123fr 241fr 224fr 51fr 104fr 152fr 136fr 177fr;
    
    /* a3は右側(2列分)、7・8・9は元の比率(a9が左1列、a7/a8が右2列)を再現 */
    grid-template-areas:
        "a1 a1 a1"
        "a2 a2 a2"
        "a4 a4 a3"
        "a5 a5 a3"
        ".  .  a3"
        "a6 a6 a6"
        "a9 a7 a7"
        "a9 a8 a8";
        
    margin-top: clamp(30px, 1.205rem + 2.913vw, 75px);
}

/* 各エリア個別の aspect-ratio 指定 */
#area-1 { grid-area: a1; aspect-ratio: 300 / 121; anchor-name: --anchor-area-1; }
#area-2 { grid-area: a2; aspect-ratio: 300 / 236; anchor-name: --anchor-area-2; }
#area-3 { grid-area: a3; aspect-ratio: 106.5 / 363; anchor-name: --anchor-area-3; }
#area-4 { grid-area: a4; aspect-ratio: 194 / 223; anchor-name: --anchor-area-4; }
#area-5 { grid-area: a5; aspect-ratio: 194 / 154; anchor-name: --anchor-area-5; }
#area-6 { grid-area: a6; aspect-ratio: 300 / 149; anchor-name: --anchor-area-6; }
#area-7 { grid-area: a7; aspect-ratio: 191 / 133; anchor-name: --anchor-area-7; }
#area-8 { grid-area: a8; aspect-ratio: 191 / 153; anchor-name: --anchor-area-8; }
#area-9 { grid-area: a9; aspect-ratio: 109 / 288; } /* モーダルなし・画像用 */


/* PC: 769px以上 */
@media (min-width: 769px) {
  .grid-container {
    aspect-ratio: 1300 / 1715;

    /* #area-6 (576+229=805px) / #area-7 (495px) の比率に調整 */
    grid-template-columns: 576fr 229fr 495fr;
    grid-template-rows: 315fr 614fr 203fr 322fr 261fr;
    
    grid-template-areas:
      "a1 a3 a4"
      "a2 a3 a4"
      "a5 a5 a5"
      "a6 a6 a7"
      "a8 a8 a8";
  }

  /* PC用 各エリア個別の aspect-ratio 上書き */
  #area-1 { aspect-ratio: 576 / 315; }
  #area-2 { aspect-ratio: 576 / 614; }
  #area-3 { aspect-ratio: 298 / 1210; }
  #area-4 { aspect-ratio: 427 / 802; }
  #area-5 { aspect-ratio: 1300 / 203; }

  /* ★ #area-6 を少し狭く（805px）、#area-7 を少し広く（495px） */
  #area-6 { aspect-ratio: 805 / 323; }
  #area-7 { aspect-ratio: 495 / 323; }

  #area-8 { aspect-ratio: 1300 / 261; }

  /* PCでは Area 9 を非表示 */
  #area-9 {
    display: none;
  }
}

/* 各エリアの定義 */
#area-1 { grid-area: a1; anchor-name: --anchor-area-1; }
#area-2 { grid-area: a2; anchor-name: --anchor-area-2; }
#area-3 { grid-area: a3; anchor-name: --anchor-area-3; }
#area-4 { grid-area: a4; anchor-name: --anchor-area-4; }
#area-5 { grid-area: a5; anchor-name: --anchor-area-5; }
#area-6 { grid-area: a6; anchor-name: --anchor-area-6; }
#area-7 { grid-area: a7; anchor-name: --anchor-area-7; }
#area-8 { grid-area: a8; anchor-name: --anchor-area-8; }
#area-9 { grid-area: a9; } /* ★ anchor-name は不要 */

.grid-item {
  background: #f8f9fa;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  padding: 0;
  overflow: hidden;
  display: flex;
}

/* --- クリッカブル領域（ボタン）ベース --- */
.anchor-btn {
    position: relative; /* 矢印の絶対位置指定用 */
    width: 100%;
    height: 100%;
    min-height: 100px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

/* =========================================================
   ホバー時スタイル
   ========================================================= */
.anchor-btn:hover {
    background-color: var(--blue);
}

.anchor-btn:hover .interview-ttl {
    color: var(--white);
}

.anchor-btn:hover .tag {
    color: var(--blue);
    background: var(--white);
}

.anchor-btn:hover .tag-name {
    color: var(--white);
}

/* ホバー時に矢印を表示 */
.anchor-btn:hover::before,
.anchor-btn:hover::after {
    opacity: 1;
}
/* モーダルが開いている間は背後のボタン操作をCSSで遮断 */
body:has(.popover-modal:popover-open) .anchor-btn {
    pointer-events: none;
}

/* =========================================================
    エリア内部コンポーネント用スタイル
   ========================================================= */
.grid-inner {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
#area-4 .grid-inner {
    flex-direction: column;
}
.grid-inner .txt-block {
    width: 100%;
    padding: clamp(1.2rem, 0.593rem + 1.618vw, 4rem);
    position: relative;
}
#area-2 .txt-block,
#area-3 .txt-block {
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
}
.sub-ttl-set {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}
.tag {
    color: var(--white);
    font-size: clamp(1rem, 0.661rem + 0.85vw, 2.4rem);
    font-weight: 400;
    line-height: 1;
    padding: 0.2em 0.35em;
    background: #404040;
    display: inline-block;
}
.tag-name {
    color: var(--blue);
    font-size: clamp(0.9rem, 0.654rem + 0.388vw, 1.6rem);
    font-family: var(--font-notoserif);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}
.interview-ttl {
    margin: 0;
    font-size: clamp(1.4rem, 0.957rem + 1.353vw, 4rem);
    font-family: var(--font-notoserif);
    line-height: 1.6;
    font-weight: 700;
    margin-top: clamp(1rem, 0.636rem + 0.971vw, 2.5rem);
}
.vertikal {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.interview-ttl.vertikal {
    letter-spacing: 0.2em;
    margin-top: 0;
    margin-right: clamp(1rem, 0.636rem + 0.971vw, 2.5rem);
}
.grid-img-1 {
    width: 148%;
    aspect-ratio: 228 / 326;
}
.grid-img-2 {
    width: 100%;
    height: 43%;
    aspect-ratio: 446 / 431;
    overflow: hidden;
}
.grid-img-3 {
    width: 37%;
    aspect-ratio: 347/261;
}
.grid-img-1 img,
.grid-img-2 img,
.grid-img-3 img {
    width: 100%;
    height: auto;
}
.grid-inner .grid-inner-arrow {
    position: absolute;
    top: 2.333vw;
    right: 2.333vw;
    width: 2.2vw;
    height: 2.2vw;
    display: block;
    z-index: 2;
    border-bottom: 1px solid var(--blue);
    border-left: 1px solid var(--blue);
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}
#area-2 .grid-inner .grid-inner-arrow {
    top: inherit;
    bottom: 2.333vw;
    right: 47.333vw;    /* 20px / 3.75 */
}
#area-3 .grid-inner .grid-inner-arrow {
    top: inherit;
    bottom: 2.333vw;
    right: 2.333vw;    /* 20px / 3.75 */
}
#area-5 .grid-inner .grid-inner-arrow {
    top: inherit;
    bottom: 2.333vw;
    right: 2.333vw;    /* 20px / 3.75 */
}
/* 軸（直線） */
.grid-inner .grid-inner-arrow::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 0;
    width: 1px;
    height: 2.567vw;  /* 16px / 3.75 */
    background-color: var(--blue);
    transform-origin: top right;
    transform: rotate(45deg);
}
/* 画像表示切り替え（SP / PC） */
.sp- { display: block; }
.pc- { display: none; }

@media (min-width: 769px) {
  .sp- { display: none; }
  .pc- { display: block; }
  .grid-img-1 {
    width: 75%;
    aspect-ratio: 228/614;
    }
    .grid-img-2 {
        width: 100%;
        height: 60%;
        aspect-ratio: 446 / 531;
        overflow: hidden;
    }
    .grid-img-3 {
        width: 37%;
        aspect-ratio: 347/261;
    }
    .grid-inner .grid-inner-arrow {
        display: none;
    }
}

/* =========================================================
    モーダル共通基本スタイル (SPデフォルト：画面縦横中央表示)
   ========================================================= */
button, .popover-modal {
    position: relative;
    z-index: 9999; /* 重なり順を最前面にする */
}
button, 
[popovertarget], 
.popover-modal {
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* アニメーション演出用の背景や装飾要素はクリックを通過させる */
.hero, 
.poster-area {
  /* 必要に応じて背景などのクリック判定を消す */
  /* pointer-events: none; */
}
.popover-modal {
  /* 画面の中央に完全固定 */
  position: fixed;
  inset: 0;
  margin: auto;
  
  width: 88vw;
  max-width: 600px;
  max-height: 80vh;
  height: fit-content; /* 中身に応じて高さを自動可変させつつ中央配置 */
  padding: 24px;
  box-sizing: border-box;
  background-color: var(--blue);
  color: var(--white);
  border: none;
  overflow-y: auto;

  /* アニメーション（iOS Safariでの2回目以降開かないバグ対策） */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* 表示状態（開いている時） */
.popover-modal:popover-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* 背景（バックドロップ） */
.popover-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.popover-modal:popover-open::backdrop {
  opacity: 1;
}

/* --- X 閉じるボタン --- */
.close-btn {
    position: absolute;
    top: clamp(1.5rem, 0.893rem + 1.618vw, 4rem);
    right: clamp(1.5rem, 0.893rem + 1.618vw, 4rem);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn::before,
.close-btn::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: var(--white);
  border-radius: 1px;
  transition: background-color 0.2s ease;
}

.close-btn::before {
  transform: rotate(45deg);
}

.close-btn::after {
  transform: rotate(-45deg);
}

.close-btn:hover::before,
.close-btn:hover::after {
    opacity: 0.5;
}

.modal-inner {
    display: flex;
    flex-direction: column;
}
.popover-modal .tag {
    color: var(--blue);
    background: var(--white);
}
.popover-modal .interview-ttl {
    color: var(--white);
}
.popover-modal .modal-txt {
    color: var(--white);
    font-size: clamp(0.85rem, 0.766rem + 0.919vw, 1.6rem);
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.04em;
    margin-top: clamp(1.563rem, 0.93rem + 2.703vw, 3.125rem);
}
.popover-modal .modal-txt:nth-of-type(n+2) {
    margin-top: 2em;
}
.interviewee-name {
    display: inline-block;
}
.interviewee-name.fujichoko { color: #F98EA8; }
.interviewee-name.ishida { color: #5DE6EE; }
.interviewee-name.sasuke { color: #7DCEFB; }

.modal-link {
    color: var(--white);
    font-size: clamp(0.875rem, 0.622rem + 1.081vw, 1.5rem);
    margin-top: clamp(0.938rem, 0.685rem + 1.081vw, 1.563rem);
    position: relative;
    display: block;
    align-items: center;
    padding-right: 1.5em;
    text-decoration: none;
    margin-left: auto;
    width: fit-content;
    background-image: linear-gradient(var(--white), var(--white));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    transition: background-size 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-link:hover {
    background-size: calc(100% - 1.5em) 1px;
}

.modal-link::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.75em;
    height: 0.75em;
    border-right: 1px solid var(--white);
    border-top: 1px solid var(--white);
    transform: translateY(-50%) translate(-0.1em, -0.1em);
    pointer-events: none;
}

.modal-link::after {
    content: "";
    position: absolute;
    right: 0.2em;
    top: 0.5em;
    width: 1em;
    height: 1px;
    background-color: var(--white);
    transform-origin: center right;
    transform: translateY(-50%) rotate(-45deg);
    pointer-events: none;
}

.modal-img {
    margin-top: 1.5vw;
}

/* =========================================================
   PC表示時（769px以上）：レイアウト調整
   ========================================================= */
@media (min-width: 769px) {
    .popover-modal {
        /* PCでは絶対配置に切り替え、SPの中央寄せmarginをリセット */
        position: absolute;
        inset: auto;
        margin: 0;
        
        padding: 40px;
        max-width: none;
        max-height: none;
    }

    /* 各モーダルのアンカー位置指定 */
    #modal-1 {
        position-anchor: --anchor-area-1;
        width: 30.3%;
        top: anchor(top);
        left: anchor(left);
    }

    #modal-2 {
        position-anchor: --anchor-area-2;
        width: 45.8%;
        top: anchor(top);
        left: anchor(left);
    }

    #modal-3 {
        position-anchor: --anchor-area-3;
        width: 30.3%;
        top: anchor(top);
        right: anchor(right);
    }

    #modal-4 {
        position-anchor: --anchor-area-4;
        width: 30.3%;
        top: anchor(top);
        right: anchor(right);
    }

    #modal-5 {
        /* 画面中央表示 */
        position: fixed;
        inset: 0;
        margin: auto;
        width: 50vw;
        max-width: 1000px;
    }

    #modal-6 {
        position-anchor: --anchor-area-6;
        width: 42.4%;
        bottom: anchor(bottom);
        left: anchor(left);
    }

    #modal-7, #modal-8 {
        position-anchor: --anchor-area-7; /* 8も同じなら */
        width: 50%;
        bottom: anchor(bottom);
        right: anchor(right);
    }

    #modal-9 {
        /* 画面中央表示 */
        position: fixed;
        inset: 0;
        margin: auto;
        width: 80vw;
        max-width: 1000px;
    }

    .close-btn {
        width: 36px;
        height: 36px;
    }
    .close-btn::before,
    .close-btn::after {
        width: 45px;
    }
    .block-pc43 {
        width: 43%;
    }
    .modal-link::before {
        border-right: 2px solid var(--white);
        border-top: 2px solid var(--white);
    }
    .modal-link::after {
        height: 2px;
    }
}