@charset "utf-8";

/*map改修*/
.tab-ttl {
    width: 100%;
}
.mp-ttl {
    width: 86%;
}
.txt-kyoten {
    position: absolute;
    width: 26%;
    width: 30%;
    position: absolute;
    right: auto;
    left: 0;
    bottom: 4%;
    margin: auto;
}
.partnership{
	margin-bottom: 5vw;
}
.partnership h3{
	display: flex;
	justify-content: space-between;
	width: 100%;
	border-bottom: 2px solid #000000;
	line-height: 1.5;
	margin-bottom: 2vw;
}
.partnership h3 span:first-child{
	font-size: 2.734375vw;
	font-weight: 500;
}
.partnership h3 span:last-child{
	font-size: 2.34375vw;
	font-weight: bold;
}
.partnership ul{
	display: flex;
	flex-wrap: wrap;
	gap: 1vw 5vw;
}
.partnership ul li{
	width: 14.8%;
}
@media (min-width: 768px) {
.mp-ttl img {
    width: 100%;
    margin: 0 2% 0 0;
}
    .panel-pdf {
        right: auto;
        left: 0;
        bottom: 0;
			width: 30%;
    }
}
@media (max-width: 767px) {
.mp-ttl {
    width: 100%;
}
    .panel-area {
        padding: 0px 0;
        background: none;
    }
	.panel-inner {
        width: 100%;
    }
	    .sp-tenpo {
        width: 100%;
    }
	    .panel2 .panel-inner {
        width: 100%;
				margin-bottom: 0;
    }
.txt-kyoten {
    width: 90%;
    position: static;
    margin-top: 15px;
}
	.new-maplist-sp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
		margin-top: 20px;
}
	.new-maplist-sp li{
    width: 49%;
}
.panel-pdf {
        width: 100%;
        margin: 15px auto 0;
    }
	.partnership {
    margin-bottom: 30px;
}
	.partnership ul li {
    width: 29.4%;
}
	.partnership h3 span:first-child {
    font-size: 15px;
}
	.partnership h3 span:last-child {
    font-size: 12px;
}
    .collabo {
        padding-inline: 0;
        width: 90%;
    }
	    .topics-txt p {
        line-height: 205%;
    }
}


.map {
    width: 94%;
								margin: auto;
}

/* ------------------------------------------------------------------
   MAP 拠点ピン（2026.09 Figma更新）
   ・ピンのSVGを最新Figma（prot_buil）から総差し替え。サイズ感もFigma準拠
   ・三田・元麻布は「ビルが上／ラベル＋Gマークが下」の反転レイアウト
   ・位置／幅は map2.svg（1203×572）・map-sp.svg（353×272）上の
     Figma座標をそのまま％へ換算した値
   ・.pin ＝ ラベル＋ビル、.pin-g ＝ Gマーク（発光アニメ用の別レイヤー）
     2枚は同じviewBoxなので重ねるだけで位置が合う
   ・素材はPC／SP共用で、SPはPC比0.5356倍の等倍縮小
   ------------------------------------------------------------------ */
.map .tenpo li {
    position: absolute;
}
.map .tenpo li > a {
    display: block;
}
.map .tenpo li .pin {
    display: block;
    width: 100%;
    height: auto;
}
.map .tenpo li .pin-g {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
/* Gマークのモーション（2026.08）：回転をやめ「キラッ」と光らせる
   ・マスクに切った帯を左→右へ通すことで、黒いGの上を光が横切るように見せる
   ・帯の縁はぼかさずくっきり。帯の部分は下地が透けるので白く光って見える
   ・帯幅はマスク幅の4%。細めの光がスッと横切る
   ・帯が通り抜ける約1秒以外は静止（4s周期）。帯は前後とも枠外で待機するので
     ループの繋ぎ目は見えない
   ・maskに非対応の環境では静止したGマークが表示されるだけで崩れない

   ★光り方を全ピンで揃えるための正規化（2026.09）
   Gマークの素材は拠点名の長さでアートボード幅が3種（43／52／65px）あるが、
   マーク自体はどれも同じ寸法（38.03×21.96）で水平中央に置かれている。
   mask-size を 250%（＝要素幅基準）のままにすると、幅の広いピンほど
   帯が速く・太く通過してしまい、マップ上の場所ごとに光る時間が変わって見える
   （43px基準で0.59秒 → 52pxで0.49秒 → 65pxで0.39秒）。
   そこで幅クラスごとに
     ・mask-size ＝ 107.5 ÷ アートボード幅（＝画面上のマスク幅を43px基準に固定）
     ・mask-position の始点・終点 ＝ 帯がマーク中心の±32.25px（素材座標）を
       通るように換算（マークが中央なので始点・終点は対称になる）
   を与え、帯の太さ・速度・通過タイミングを完全に一致させている。
   値は .move-g--w52 / .move-g--w65 の変数で上書きする */
.map .tenpo li .move-g {
    --shine-mask: 250%;
    --shine-from: 100%;
    --shine-to: 0%;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 48%, rgba(0, 0, 0, .15) 48%, rgba(0, 0, 0, .15) 52%, #000 52%, #000 100%);
            mask-image: linear-gradient(100deg, #000 0%, #000 48%, rgba(0, 0, 0, .15) 48%, rgba(0, 0, 0, .15) 52%, #000 52%, #000 100%);
    -webkit-mask-size: var(--shine-mask) 100%;
            mask-size: var(--shine-mask) 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation-name: shineG;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/* アートボード幅52pxのピン（八重洲通）。八丁堀も同じ素材だが発光なし */
.map .tenpo li .move-g--w52 {
    --shine-mask: 206.731%;
    --shine-from: 108.108%;
    --shine-to: -8.108%;
}
/* アートボード幅65pxのピン（文京飯田橋・京都河原町・大阪中之島） */
.map .tenpo li .move-g--w65 {
    --shine-mask: 165.385%;
    --shine-from: 125.882%;
    --shine-to: -25.882%;
}
/* 三田・元麻布は「ビルが上／Gマークが下」の反転レイアウトで、Gマークが
   アートボードの約87px下（通常ピンはy≒8.7、反転ピンはy≒95.7）にある。
   光の帯は100degでわずかに傾いているぶん、下にあるGほど帯の通過が遅く、
   同じ再生位置だと三田だけ約0.24秒あとに光ってしまう。
   その差を負のdelayで先行させ、他のピンと発光タイミングを揃える */
.map .tenpo .tp12 .move-g,
.map .tenpo .tp23 .move-g {
    animation-delay: -0.24s;
}
@keyframes shineG {
    0%, 40% {
        -webkit-mask-position: var(--shine-from) 50%;
                mask-position: var(--shine-from) 50%;
    }
    65%, 100% {
        -webkit-mask-position: var(--shine-to) 50%;
                mask-position: var(--shine-to) 50%;
    }
}

/* PC：map2.svg（1203×572）上の座標 */
.map .tenpo .tp15 { left: 64.796%; top:  6.654%; width: 3.574%; } /* 池袋 */
.map .tenpo .tp22 { left: 18.911%; top: 15.920%; width: 5.403%; } /* 京都河原町 */
.map .tenpo .tp04 { left: 50.582%; top: 21.339%; width: 3.574%; } /* 新宿 */
.map .tenpo .tp07 { left: 69.618%; top: 20.640%; width: 5.403%; } /* 文京飯田橋 */
.map .tenpo .tp24 { left: 46.841%; top: 20.290%; width: 4.323%; } /* 西新宿（CUBE） */
.map .tenpo .tp25 { left: 56.068%; top: 31.479%; width: 3.741%; } /* 赤坂（CUBE） */
.map .tenpo .tp21 { left:  8.271%; top: 30.605%; width: 5.403%; } /* 大阪中之島 */
.map .tenpo .tp09 { left: 76.933%; top: 32.004%; width: 3.574%; } /* 神田 */
.map .tenpo .tp02 { left: 60.557%; top: 39.871%; width: 3.574%; } /* 虎ノ門 */
.map .tenpo .tp05 { left: 41.854%; top: 38.647%; width: 3.574%; } /* 渋谷 */
.map .tenpo .tp06 { left: 52.826%; top: 40.745%; width: 3.574%; } /* 六本木 */
.map .tenpo .tp16 { left: 73.192%; top: 41.619%; width: 4.323%; } /* 八重洲通 */
.map .tenpo .tp19 { left: 81.920%; top: 41.794%; width: 4.323%; } /* 八丁堀 */
.map .tenpo .tp18 { left: 63.882%; top: 44.941%; width: 3.574%; } /* 芝公園 */
.map .tenpo .tp12 { left: 57.814%; top: 55.081%; width: 3.574%; } /* 三田（ビルが上・ラベルが下の反転レイアウト） */
.map .tenpo .tp17 { left: 54.738%; top: 50.360%; width: 3.574%; } /* 田町 */
.map .tenpo .tp23 { left: 50.998%; top: 52.633%; width: 3.574%; } /* 元麻布（反転レイアウト） */

/* 関西タブ（現在は非表示のパネル） */
.map .tenpo.kansai li {
    width: 5.403%;
}
.map .tenpo .kansai-tp01 { left: 58.9%; top: 22.8%; }
.map .tenpo .kansai-tp02 { left: 35.9%; top: 41.2%; }

@media (max-width: 767px) {
    /* SP：map-sp.svg（353×272）上の座標。ビルの足元が動かないよう
       新素材の高さ差ぶんだけ縦位置を補正している */
    .map .tenpo .tp15 { left: 50.420%; top:  9.294%; width: 6.525%; } /* 池袋 */
    .map .tenpo .tp04 { left: 24.924%; top: 26.574%; width: 6.525%; } /* 新宿 */
    .map .tenpo .tp24 { left: 18.434%; top: 23.424%; width: 7.891%; } /* 西新宿（CUBE） */
    .map .tenpo .tp07 { left: 59.657%; top: 28.780%; width: 9.863%; } /* 文京飯田橋 */
    .map .tenpo .tp25 { left: 35.253%; top: 30.041%; width: 6.828%; } /* 赤坂（CUBE） */
    .map .tenpo .tp09 { left: 72.523%; top: 36.369%; width: 6.525%; } /* 神田 */
    .map .tenpo .tp05 { left:  8.777%; top: 44.221%; width: 6.525%; } /* 渋谷 */
    .map .tenpo .tp19 { left: 83.023%; top: 44.668%; width: 7.891%; } /* 八丁堀 */
    .map .tenpo .tp06 { left: 30.024%; top: 46.059%; width: 6.525%; } /* 六本木 */
    .map .tenpo .tp02 { left: 43.622%; top: 46.059%; width: 6.525%; } /* 虎ノ門 */
    .map .tenpo .tp16 { left: 65.460%; top: 46.427%; width: 7.891%; } /* 八重洲通 */
    .map .tenpo .tp18 { left: 48.721%; top: 52.737%; width: 6.525%; } /* 芝公園 */
    .map .tenpo .tp12 { left: 38.239%; top: 63.402%; width: 6.525%; } /* 三田（反転レイアウト） */
    .map .tenpo .tp17 { left: 32.664%; top: 55.545%; width: 6.525%; } /* 田町 */
    .map .tenpo .tp23 { left: 26.908%; top: 61.199%; width: 6.525%; } /* 元麻布（反転レイアウト） */

    .map .tenpo.kansai li {
        width: 9.863%;
    }
}


/* ------------------------------------------------------------------
   GROWTH Series セクション改修
   ・「GROWTH 15拠点展開」＋「GROWTH CUBE」の2カラムナビ
   ・PARTNERSHIP／TOPICS は初期非表示、スクロール到達 or クリックで展開
   ------------------------------------------------------------------ */
.gs-nav {
    width: 90.625%; /* 1160 / 1280 */
    margin: 0 auto;
    display: flex;
    gap: 1.25vw; /* 16px */
}
.gs-nav > * {
    flex: 0 0 auto;
    width: calc((100% - 1.25vw) / 2); /* 572 / 1160 */
    height: 10.9375vw; /* 140px */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- GROWTH 15拠点展開 --- */
.gs-kyoten {
    background: #f0f3f5;
    border: 0;
    padding: 0.703125vw 0 0; /* 9px */
    margin: 0;
    font: inherit;
    color: #000;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gs-kyoten-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625vw; /* 8px */
    transition: transform 0.3s ease;
}
.gs-kyoten-ttl {
    width: 33.59375vw; /* 430px */
    display: block;
}
.gs-kyoten-lead {
    font-size: 1.40625vw; /* 18px */
    font-weight: 500;
    line-height: 1.5;
}
.gs-kyoten-arrow {
    width: 1.40625vw; /* 18px */
    position: absolute;
    left: 50%;
    bottom: 1.6375vw; /* 21px */
    opacity: 0;
    transform: translate(-50%, -0.3125vw);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.gs-kyoten:hover .gs-kyoten-body {
    transform: translateY(-0.5859375vw); /* 7.5px */
}
.gs-kyoten:hover .gs-kyoten-arrow {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* 一度開いたら閉じないので、開いた後は矢印もホバー時の持ち上げも出さない */
.gs-kyoten.is-open {
    cursor: default;
}
.gs-kyoten.is-open .gs-kyoten-body,
.gs-kyoten.is-open:hover .gs-kyoten-body {
    transform: none;
}
.gs-kyoten.is-open .gs-kyoten-arrow,
.gs-kyoten.is-open:hover .gs-kyoten-arrow {
    display: none;
}

/* --- GROWTH CUBE --- */
.gs-cube {
    border-left: 0.3125vw solid #d9b264; /* 4px */
    padding: 1.875vw 3.75vw; /* 24px 48px */
    isolation: isolate;
}
.gs-cube:hover {
    opacity: 1;
}
.gs-cube::before,
.gs-cube::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.gs-cube::before {
    background: url(../img/new-map/series/cube-bg.jpg) no-repeat 50% 69%;
    background-size: 100% auto;
    opacity: 0.6;
}
.gs-cube::after {
    background: linear-gradient(to right, rgba(70, 67, 66, 0.6) 0%, #464342 50%);
    mix-blend-mode: multiply;
}
.gs-cube-body {
    width: 32.49391vw; /* 415.92px＝アイコン46.8＋gap16＋ロゴ353.12 */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}
.gs-cube-ttl {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25vw; /* 16px */
}
.gs-cube-icon {
    width: 3.65625vw; /* 46.8px */
}
.gs-cube-logo {
    width: 27.58766vw; /* 353.12px */
}
.gs-cube-lead {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.390625vw; /* 5px */
    font-size: 1.40625vw; /* 18px */
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}
.gs-cube-blank {
    width: 1.25vw; /* 16px */
}
.gs-cube-arrow {
    width: 3.75vw; /* 48px */
    position: absolute;
    top: 50%;
    right: 4.609375vw; /* 59px */
    z-index: 1;
    opacity: 0;
    transform: translate(-0.78125vw, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.gs-cube:hover .gs-cube-body {
    transform: translateX(-3.0078125vw); /* 38.5px */
}
.gs-cube:hover .gs-cube-arrow {
    opacity: 1;
    transform: translate(0, -50%);
}

/* --- PARTNERSHIP／TOPICS パネル --- */
.topics {
    display: none;
    width: 90.625%; /* 1160 / 1280 */
    padding: 2.25vw 5.3125vw 6.25vw; /* 上28.8px／左右68px／下80px */
    background: #f0f3f5;
}
.partnership h3 {
    margin-bottom: 0.9375vw; /* 12px */
}
.partnership ul {
    background: #fff;
    padding: 1.875vw; /* 24px */
    gap: 0.9375vw 5vw; /* 12px / 64px */
}
.partnership ul li {
    width: 14.344%; /* 140 / 976 */
}
.topics-ttl {
    background: #fff;
}

@media (max-width: 767px) {
    .gs-nav {
        width: 88%;
        /* SPは GROWTH CUBE を上に積む（PCは左が15拠点のままなのでCSSだけで入れ替える） */
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .gs-nav > * {
        width: 100%;
        height: auto;
    }
    .gs-kyoten {
        order: 2;
        padding: 18px 10px 26px;
    }
    .gs-kyoten-body {
        gap: 6px;
    }
    .gs-kyoten-ttl {
        width: 100%;
        max-width: 260px;
    }
    .gs-kyoten-lead {
        font-size: 12px;
    }
    .gs-kyoten-arrow {
        width: 11px;
        bottom: 9px;
        transform: translate(-50%, 0);
    }
    .gs-kyoten:hover .gs-kyoten-body,
    .gs-kyoten.is-open .gs-kyoten-body {
        transform: none;
    }
    .gs-cube {
        order: 1;
        border-left-width: 3px;
        padding: 18px 12px;
    }
    .gs-cube-body {
        width: 100%;
    }
    .gs-cube-ttl {
        gap: 10px;
    }
    .gs-cube-icon {
        width: 24px;
    }
    .gs-cube-logo {
        width: 62%;
        max-width: 200px;
    }
    .gs-cube-lead {
        gap: 4px;
        font-size: 12px;
    }
    .gs-cube-blank {
        width: 11px;
    }
    .gs-cube-arrow {
        display: none;
    }
    .gs-cube:hover .gs-cube-body {
        transform: none;
    }
    .topics {
        width: 88%;
        padding: 20px 15px 40px;
    }
    .partnership h3 {
        margin-bottom: 10px;
    }
    .partnership ul {
        padding: 15px;
        gap: 10px 5%;
    }
    .partnership ul li {
        width: 30%;
    }
}