.hero-badge-row {
	display: flex;
	align-items: center;
	/* このプロパティで水平方向に中央揃え */
	gap: 8px;
	/* アイテム間にスペース */
	font-size: 12px;
	margin-bottom: 0;
	font-weight: 700;
}
.centered-text {
	display: flex;
	align-items: center;
	/* 垂直方向（上下）に中央揃え */
}
/* Button styles */

.btn-box {
	display: inline-block;
	vertical-align: middle;
	font-weight: 700;
	color: #fff;
	transform: perspective(1px) translateZ(0);
	transition: all 1s cubic-bezier(0, 1, .48, .96);
	text-align: center;
	margin-top: 20px;
	line-height: 1;
	font-size: 1.4rem;
	min-width: 144px;
	margin: 13px 5px 0;
}
.btn-box span {
	display: block;
	width: 100%;
	padding: 9px 10px;
	border: none;
	background: linear-gradient(135deg, #0ea5e9, #38bdf8);
	/* Use background instead of background-color */
	position: relative;
	color: #0b1120;
	/* Ensure text is visible on the gradient background */
	text-align: center;
	/* Optionally, center the text inside the span */
	font-size: 12px;
	/* Adjust font size if needed */
	border-radius: 4px;
	/* Optional: add border-radius for rounded corners */
}


/* =========================
   Swiper Card Base
========================= */

.swiper-slide {
  color: #ffffff;
  width: 300px;
  text-align: center;
}

/* カード全体 */
.swiper-slide_item {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;                 /* 高さは中身依存 */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: rgba(0,0,0,.3) 0 2px 3px;
  transition: transform .6s cubic-bezier(0,1,.48,.96);
}

.swiper-slide_item:hover {
  transform: scale(1.02);
}

/* =========================
   Image Area（4:5）
========================= */

.swiper-slide_item_container {
  width: 100%;
}

/* ★ 4:5比率を作るコア */
.swiper-slide_item_container .img-outer {
  width: 100%;
  aspect-ratio: 4 / 5;          /* ← ここが肝 */
  position: relative;
  overflow: hidden;
}

/* 画像は全面フィット */
.swiper-slide_item_container .img-outer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下部グラデーション */
.swiper-slide_item_container .img-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,.75) 20%,
    rgba(0,0,0,0) 60%
  );
  z-index: 1;
}

/* =========================
   Text Area
========================= */

.swiper-slide_item_info {
  position: absolute;
  bottom: 12px;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 6px;
}

.swiper-slide_item_info .ttl {
  margin: 0 16px 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  /*max-height: 3.2em;*/
  overflow: hidden;
  text-align: left;
}

/* =========================
   Button
========================= */

.swiper-slide_item_info .btn-box {
  margin-left: 16px;
}

.btn-box span {
  display: inline-block;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 4px;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #0b1120;
}

/* =========================
   Responsive
========================= */

@media (max-width: 767px) {
  .swiper-slide {
    width: 270px;
  }

  .swiper-slide_item_info .ttl {
    font-size: 13px;
  }
}


.move-swiper {
    display: none!important;
}
@media (max-width: 767px) {
	.hero-badge-row {
		font-size: 11px;
	}
	.grid-2 .grid-4 {
		grid-template-columns: repeat(1, 1fr)!important;
	}
	.truncate-text {
		display: block;
		max-width: 100vw;
		/*white-space: nowrap;*/
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
		font-feature-settings: "palt";
	}
	.sp-flex {
		display: flex;
	}
	.section-title {
		font-size: 15px;
	}
	.section-subtitle {
		font-size: 10px;
	}
	.section-link {
		font-size: 12px;
	}
	.card {

	}
	.event-name {
		font-feature-settings: "palt";
	}
	.news-item {
		display: block;
	}
}


/* モバイル（スワイパー） */

@media (max-width: 767px) {
	/* スワイパーのスタイル */
	.swiper-container {
		width: 100%;
		padding-bottom: 20px;
		/* 必要に応じて調整 */
	}
	.swiper-slide {
		display: flex;
		flex-direction: column;
	}
	.swiper-slide .card {
		display: block;
	}
}


@media (max-width: 767px) {
  .grid-2 {
    grid-template-columns: repeat(1, 1fr); /* 1列表示に変更 */
    gap: 15px; /* カード間のスペースを調整 */
  }
}


@-webkit-keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

@-webkit-keyframes rise {
  0% {
    top: 100%;
    right: -30%; }
  100% {
    top: 0%;
    right: 0%; } }

@keyframes rise {
  0% {
    top: 100%;
    right: -30%; }
  100% {
    top: 0%;
    right: 0%; } }

@-webkit-keyframes down {
  0% {
    bottom: 100%;
    left: 40%; }
  100% {
    bottom: 0%;
    left: 0%; } }

@keyframes down {
  0% {
    bottom: 100%;
    left: 40%; }
  100% {
    bottom: 0%;
    left: 0%; } }

@-webkit-keyframes rise_sp {
  0% {
    top: 100%;
    right: -50%; }
  100% {
    top: 0%;
    right: 0%; } }

@keyframes rise_sp {
  0% {
    top: 100%;
    right: -50%; }
  100% {
    top: 0%;
    right: 0%; } }

@-webkit-keyframes down_sp {
  0% {
    bottom: 100%;
    left: 63%; }
  100% {
    bottom: 0%;
    left: 0%; } }

@keyframes down_sp {
  0% {
    bottom: 100%;
    left: 63%; }
  100% {
    bottom: 0%;
    left: 0%; } }

h2 {
  font-weight: normal; }



@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

.main_visual {
  background: #265EDD;
  height: 90vh;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden; }
  @media (min-width: 750px) and (max-width: 991px) {
    .main_visual {
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end; } }
  @media (max-width: 749px) {
    .main_visual {
      height: 600px;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end; } }

.main_visual__copy_area {
  position: relative;
  z-index: 11;
  left: 8%;
  color: #fff;
  padding: 60px 30px 30px;
  width: 28%;
  min-width: 400px;
  max-width: 480px; }
  @media (min-width: 750px) and (max-width: 991px) {
    .main_visual__copy_area {
      width: 100%;
      left: 3%;
      padding: 60px 30px 160px; } }
  @media (max-width: 749px) {
    .main_visual__copy_area {
      width: 100%;
      min-width: 240px;
      max-width: 320px;
      left: 3%;
      padding: 60px 30px 100px; } }
  .main_visual__copy_area .main_copy {
    display: block;
    margin-bottom: 5px; }
    @media (max-width: 749px) {
      .main_visual__copy_area .main_copy {
        /*margin-bottom: 25px;*/ } }
    .main_visual__copy_area .main_copy img {
      display: block;
      width: 100%; }
      @media (min-width: 750px) and (max-width: 991px) {
        .main_visual__copy_area .main_copy img {
          max-width: 320px;
          left: 0; } }
      @media (max-width: 749px) {
        .main_visual__copy_area .main_copy img {
          max-width: 220px;
          left: 0; } }
  .main_visual__copy_area .sub_copy {
    display: block;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.38rem;
    line-height: 1.8;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt"; }
    @media (max-width: 749px) {
      .main_visual__copy_area .sub_copy {
        font-size: 1.1rem;
        letter-spacing: 0.2rem; } }


.main_visual__background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 10; }
  .main_visual__background .animate_up {
    position: absolute;
    width: 65%;
    height: 100%;
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
    top: 100%;
    overflow: hidden;
    -webkit-animation-name: rise;
            animation-name: rise;
    -webkit-animation-duration: 0.35s;
            animation-duration: 0.35s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
    @media (max-width: 991px) {
      .main_visual__background .animate_up {
        width: 120%;
        -webkit-transform: translateX(35%);
                transform: translateX(35%);
        -webkit-animation-name: rise_sp;
                animation-name: rise_sp;
        -webkit-animation-duration: 0.35s;
                animation-duration: 0.35s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in; } }
    .main_visual__background .animate_up img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0; }
  .main_visual__background .animate_down {
    position: absolute;
    width: 75%;
    height: 100%;
    bottom: 100%;
    -webkit-transform: translateX(-15%);
            transform: translateX(-15%);
    -webkit-animation-name: down;
            animation-name: down;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in; }
    @media (max-width: 991px) {
      .main_visual__background .animate_down {
        width: 120%;
        -webkit-transform: translateX(-35%);
                transform: translateX(-35%);
        -webkit-animation-name: down_sp;
                animation-name: down_sp;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-delay: 0.5s;
                animation-delay: 0.5s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in; } }
    .main_visual__background .animate_down img {
      position: absolute;
      width: 100%;
      height: 100%; }

.main_visual__images {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 10; }
  .main_visual__images img {
    border-radius: 20px;
    display: block;
    position: absolute; }
  .main_visual__images .visual_1 {
    width: 50%;
    min-width: 640px;
    border-radius: 50px;
    right: 2%;
    z-index: 3;
    -webkit-transition: -webkit-transform .6s linear .008s;
    transition: -webkit-transform .6s linear .008s;
    transition: transform .6s linear .008s;
    transition: transform .6s linear .008s, -webkit-transform .6s linear .008s;
    opacity: 0;
    -webkit-animation-name: fade;
            animation-name: fade;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
    @media (min-width: 750px) and (max-width: 991px) {
      .main_visual__images .visual_1 {
        width: 75%;
        border-radius: 40px;
        min-width: 300px;
        right: 5%; } }
    @media (max-width: 749px) {
      .main_visual__images .visual_1 {
        width: 82%;
        min-width: 300px;
        border-radius: 25px;
        right: auto;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        opacity: 0;
        -webkit-animation-name: fade_sp;
                animation-name: fade_sp;
        -webkit-animation-duration: 0.3s;
                animation-duration: 0.3s;
        -webkit-animation-delay: 1s;
                animation-delay: 1s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear; } }
  .main_visual__images .visual_2 {
    height: 38%;
    border-radius: 50px;
    left: 30%;
    -webkit-transform: translate(-10%, 0);
            transform: translate(-10%, 0);
    z-index: 2;
    -webkit-transition: -webkit-transform .5s linear .004s;
    transition: -webkit-transform .5s linear .004s;
    transition: transform .5s linear .004s;
    transition: transform .5s linear .004s, -webkit-transform .5s linear .004s;
    opacity: 0;
    -webkit-animation-name: blur-2;
            animation-name: blur-2;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
    @media (min-width: 750px) and (max-width: 991px) {
      .main_visual__images .visual_2 {
        height: 28%;
        border-radius: 35px;
        left: auto;
        right: -8%;
        margin-bottom: 15%; } }
    @media (max-width: 749px) {
      .main_visual__images .visual_2 {
        height: 20%;
        border-radius: 25px;
        left: auto;
        right: -10%;
        opacity: 0;
        -webkit-animation-name: blur-2_sp;
                animation-name: blur-2_sp;
        -webkit-animation-duration: 0.4s;
                animation-duration: 0.4s;
        -webkit-animation-delay: 0.8s;
                animation-delay: 0.8s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear; } }
  .main_visual__images .visual_3 {
    height: 32%;
    border-radius: 50px;
    left: 5%;
    -webkit-transform: translate(-10%, 0);
            transform: translate(-10%, 0);
    z-index: 2;
    -webkit-transition: -webkit-transform .3s linear 0s;
    transition: -webkit-transform .3s linear 0s;
    transition: transform .3s linear 0s;
    transition: transform .3s linear 0s, -webkit-transform .3s linear 0s;
    opacity: 0;
    -webkit-animation-name: blur-3;
            animation-name: blur-3;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
    @media (min-width: 750px) and (max-width: 991px) {
      .main_visual__images .visual_3 {
        height: 28%;
        border-radius: 35px;
        left: -5%;
        margin-top: 7%; } }
    @media (max-width: 749px) {
      .main_visual__images .visual_3 {
        height: 22%;
        border-radius: 25px;
        left: -5%;
        opacity: 0;
        -webkit-animation-name: blur-3_sp;
                animation-name: blur-3_sp;
        -webkit-animation-duration: 0.4s;
                animation-duration: 0.4s;
        -webkit-animation-delay: 0.6s;
                animation-delay: 0.6s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear; } }

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    top: 13%; }
  100% {
    margin-top: 0; }
  100% {
    opacity: 1;
    top: 15%; } }

@keyframes fade {
  0% {
    opacity: 0;
    top: 13%; }
  100% {
    margin-top: 0; }
  100% {
    opacity: 1;
    top: 15%; } }

@-webkit-keyframes blur-2 {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
    bottom: 5%; }
  70% {
    -webkit-filter: blur(0);
            filter: blur(0);
    bottom: 10%; }
  100% {
    opacity: 1;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    bottom: 10%; } }

@keyframes blur-2 {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
    bottom: 5%; }
  70% {
    -webkit-filter: blur(0);
            filter: blur(0);
    bottom: 10%; }
  100% {
    opacity: 1;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    bottom: 10%; } }

@-webkit-keyframes blur-3 {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
    top: -1%; }
  70% {
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: 1;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    top: 4%; } }

@keyframes blur-3 {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
    top: -1%; }
  70% {
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: 1;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    top: 4%; } }

@media (max-width: 749px) {
  @-webkit-keyframes fade_sp {
    0% {
      opacity: 0;
      top: 13%; }
    100% {
      margin-top: 0; }
    100% {
      opacity: 1;
      top: 18%; } }
  @keyframes fade_sp {
    0% {
      opacity: 0;
      top: 13%; }
    100% {
      margin-top: 0; }
    100% {
      opacity: 1;
      top: 18%; } }
  @-webkit-keyframes blur-2_sp {
    0% {
      opacity: 0;
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 28%; }
    70% {
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 35%; }
    100% {
      opacity: 1;
      -webkit-filter: blur(4px);
              filter: blur(4px);
      top: 35%; } }
  @keyframes blur-2_sp {
    0% {
      opacity: 0;
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 28%; }
    70% {
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 35%; }
    100% {
      opacity: 1;
      -webkit-filter: blur(4px);
              filter: blur(4px);
      top: 35%; } }
  @-webkit-keyframes blur-3_sp {
    0% {
      opacity: 0;
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 8%; }
    70% {
      -webkit-filter: blur(0);
              filter: blur(0); }
    100% {
      opacity: 1;
      -webkit-filter: blur(6px);
              filter: blur(6px);
      top: 12%; } }
  @keyframes blur-3_sp {
    0% {
      opacity: 0;
      -webkit-filter: blur(0);
              filter: blur(0);
      top: 8%; }
    70% {
      -webkit-filter: blur(0);
              filter: blur(0); }
    100% {
      opacity: 1;
      -webkit-filter: blur(6px);
              filter: blur(6px);
      top: 12%; } } }

.main_visual__scroll {
  color: #fff;
  font-family: vinyl, sans-serif;
  position: absolute;
  z-index: 10;
  bottom: 40px;
  left: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .main_visual__scroll_icon {
    position: relative;
    margin-right: 10px; }
    .main_visual__scroll_icon_file {
      fill: #fff;
      width: 8px;
      height: 14px;
      display: block; }
    .main_visual__scroll_icon::before {
      content: '';
      display: block;
      height: 30px;
      width: 1px;
      position: absolute;
      background: #fff;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      top: -20px; }
    .main_visual__scroll_icon::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      border: 1px solid #fff;
      border-radius: 100px;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      bottom: 10px;
      -webkit-animation-name: flash;
              animation-name: flash;
      -webkit-animation-duration: 1.2s;
              animation-duration: 1.2s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite; }

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }
  .main_visual__scroll_label {
    letter-spacing: 0.2rem; }

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 0; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

.music-card {
    height: 353px;
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
}

/* =====================================================
   PC表示（デフォルト）
===================================================== */

/* GOODS */
#goods .grid-6 {
  display: grid;
}
#goods .goods-swiper {
  display: none;
}

/* MUSIC */
#music .music-swiper {
  display: none;
}

/* MOVIE */
#movie .movie-swiper {
  display: none;
}


/* =====================================================
   スマホ表示
===================================================== */
@media (max-width: 768px) {

  /* ---------- GOODS ---------- */
  #goods .grid-6 {
    display: none;
  }

  #goods .goods-swiper {
    display: block;
  }

  #goods .swiper-slide {
    height: auto !important;
    display: flex;
    justify-content: center;
  }

  #goods .goods-card {
    max-width: 100%;
  }

  #goods .card-title {
    margin-top: 5px;
  }

  /* ---------- MUSIC ---------- */
  #music .music-grid {
    display: none;
  }

  #music .music-swiper {
    display: block;
  }

  #music .swiper-slide {
    height: auto !important;
    display: flex;
    justify-content: center;
  }

  #music .music-card {
    max-width: 100%;
    height:auto;
    padding: 0px;
    margin-bottom: -8px;
    border: none;
  }

  /* ---------- MOVIE ---------- */
  #movie .movie-grid {
    display: none;
  }

  #movie .movie-swiper {
    display: block;
  }

  #movie .swiper-slide {
    height: auto !important;
    display: flex;
    justify-content: center;
  }

  #movie .media-card {
    width: 100%;
  }

  /* TikTok埋め込み対策 */
  #movie .tiktok-embed {
    max-width: 100% !important;
    min-width: 0 !important;
  }

}


.partner-box img {
    width: 100%;
    height: 100%;
    max-height: 60px;        /* ← ロゴの最大高さを統一 */
    object-fit: contain;    /* ← はみ出さず比率維持 */
    display: block;
    margin: 0 auto;
}

/* =========================
   MORE Button - Base
   ========================= */

.athlete-card .btn-box{
  margin-top: 0;
}

.athlete-card .btn-box span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 12px 0;

  font-size: 13px;
  font-weight: 800;              /* 900は強すぎる */
  letter-spacing: .08em;

  /*border-radius: 12px;*/
  cursor: pointer;

  text-align: center;
  text-decoration: none;

  box-shadow: none;              /* 影は使わない */
  transition: 
    background .25s ease,
    color .25s ease,
    border .25s ease,
    filter .2s ease;
}

/* =========================
   Rank S : 主将・ヒーロー
   ========================= */

.rank-s .btn-box span{
  background: #bfa45a;           /* 鈍いゴールド */
  color: #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* =========================
   Rank A : 団体主力・軸
   ========================= */

.rank-a .btn-box span{
  background: #0a2f6d;           /* 勝ち色ネイビー */
  color: #ffffff;
}

/* =========================
   Rank B : 育成・ローテ
   ========================= */

.rank-b .btn-box span{
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.25);
}

/* =========================
   Rank C : スタッフ等
   ========================= */

.rank-c .btn-box span{
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
}

/* =========================
   Hover（PCのみ）
   「触った時だけ反応」
   ========================= */

@media (hover:hover){
  .athlete-card .btn-box span:hover{
    filter: brightness(1.08);
  }
}


/* 3カラムの枠は維持 */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  justify-content: start;   /* ← 左寄せ */
}
@media (max-width: 767px) {
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }
}

/* 各カードの最大幅を固定 */
.event-card{
  width: 100%;
  min-width: 360px;         /* ← 3枚時の1枚幅に合わせる */
}



/* ラッパー */
.athlete-photo-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* カード比率に合わせて調整 */
  overflow: hidden;
  background: #000; /* 画像未読込時の保険 */
}

/* 背景（赤い抽象） */
.athlete-photo-bg{
  position: absolute;
  inset: 0;
  background-image: url("");
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 選手写真 */
.athlete-photo-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* or contain / object-position調整 */
  z-index: 2;
}




/* Support Menu Card */
.support-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-menu__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-btn {
  display: block;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
}

.support-btn.primary {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
}

.support-btn.primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.support-btn.secondary {
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}


.support-menu__sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.support-link {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}

.support-link:hover {
  color: #fff;
  text-decoration: underline;
}


/* 2-column support menu */
.support-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.support-col{

}

.support-col__label{
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}

.support-btn{
  display:block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  transition: all .25s ease;
  text-decoration: none;
  font-size:14px;
}

.support-btn.primary{
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color:#fff;
}
.support-btn.primary:hover{
  opacity:.92;
  transform: translateY(-2px);
}

.support-btn.secondary{
  background: linear-gradient(135deg, #F5C84C 0%, #D4A017 100%);
  color: #0B1226;
}
.support-btn.secondary:hover{
  opacity:.92;
  transform: translateY(-2px);
}

.support-sub{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.support-link{
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.support-link:hover{
  color:#fff;
  text-decoration: underline;
}

/* responsive */
@media (max-width: 860px){
  .support-grid{ grid-template-columns: 1fr; }
}


/* 共通 */
.pill {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .04em;
  display: inline-block;
  background: transparent;
  border: 1.5px solid currentColor; /* 文字色＝枠線色 */
}

/* お知らせ */
.pill-cate-information {
  color: #1e3a8a;
}

/* コラム */
.pill-cate-column {
  color: #f5c84c;
}

/* デュアルキャリア */
.pill-cate-dual-career {
  color: #0ea5e9;
}

/* パートナー */
.pill-cate-partner {
  color: #22d3ee;
}

/* ムービー */
.pill-cate-movie {
  color: #9333ea;
}

/* メディア */
.pill-cate-media {
  color: #64748b;
}

/* 試合結果 */
.pill-cate-event-result {
  color: #b91c1c;
}

/* チーム */
.pill-cate-team {
  color: #16a34a;
}



/* ALL JAPAN */
.pill-compecate-all-japan {
  color: #0ea5e9;
}

/* コラム */
.pill-compecate-hokkaido {
  color: #f5c84c;
}

/* 試合結果 */
.pill-compecate-open {
  color: #b91c1c;
}

/* チーム */
.pill-compecate-other {
  color: #16a34a;
}


.movie-thumb img {
  height:352px;
  width:100%;
}

.item-thumb{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.item-title{
  height:55px
}



/* =========================================
   Cinematic Hero (final clean)
   namespace: hero-cine / cine-*
========================================= */


.hero-cine {
	background: linear-gradient( to right, rgba(0, 0, 0, .52) 0%, /* ← .60 → .52 */
	rgba(0, 0, 0, .30) 45%, /* ← .38 → .30 */
	rgba(0, 0, 0, .12) 100%/* ← .20 → .12 */
	), radial-gradient( 1200px 600px at 65% 20%, rgba(255, 255, 255, .16), /* ← 少しだけUP */
	transparent 60%), var(--hero-bg) center / cover no-repeat;
}
.hero-cine__inner {
	position: relative;
	padding: 86px 0 26px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 24px;
	align-items: start;
}
.hero-cine__left {
	max-width: 560px
}
.hero-cine__title {
	margin: 0;
	font-size: clamp(34px, 4.6vw, 55px);
	letter-spacing: .04em;
	font-weight: 900;
	text-transform: uppercase;
	width: 85%;
	margin-top: 10px;
}
.hero-cine__lead {
	font-size: 18px;
	color: rgba(255, 255, 255, .78);
	font-weight: 700;
	margin-top: 10px;
}
.hero-cine__next {
	margin-top: 28px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	max-width: 440px;
}
.hero-cine__nextLabel {
	font-weight: 900;
	letter-spacing: .22em;
	font-size: 12px;
	color: #f0a14b;
}
.hero-cine__nextRow {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 10px;
	margin-bottom: 12px;
}
.hero-cine__date .d {
	font-size: 32px;
	font-weight: 900;
}
.hero-cine__date .dow {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .18em;
	margin-left: 8px;
	opacity: .85;
}
.hero-cine__meta {
	font-weight: 800;
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
}
.hero-cine__event-title {
	margin: 0;
	font-size: clamp(34px, 4.6vw, 34px);
	letter-spacing: .04em;
	font-weight: 900;
	text-transform: uppercase;
	line-height: normal;
	margin-bottom: 25px;
}
.hero-cine__right {
	min-height: 320px;
}
/* buttons */

.cine-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 900;
	letter-spacing: .10em;
	text-transform: uppercase;
	font-size: 12px;
	border: 1px solid transparent;
	user-select: none;
}
.cine-btn .arrow {
	font-size: 18px;
	line-height: 1
}
.cine-btn--primary {
	background: linear-gradient(180deg, #d77a22, #a65812);
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
	color: #111;
}
.cine-btn--primary:hover {
	filter: brightness(1.06)
}
.cine-btn--outline {
	background: rgba(0, 0, 0, .25);
	border-color: rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .85);
}
.cine-btn--outline:hover {
	border-color: rgba(255, 255, 255, .35)
}
.cine-btn--ghost {
	background: rgba(0, 0, 0, .18);
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .88);
}
.cine-btn--ghost:hover {
	border-color: rgba(255, 255, 255, .28)
}
/* 3 tiles */

.hero-cine__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 14px 0 0;
	margin-top: 10px;
}
.cine-tile {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	min-height: 170px;
	background: rgba(0, 0, 0, .25);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
	color: inherit;
	text-decoration: none;
}
.cine-tile__bg, .cine-tile__bg2, .cine-tile__bg3 {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18)), var(--tile-bg) center/cover no-repeat;
	transform: scale(1.02);
	opacity: .92;
}
.cine-tile__head {
	position: relative;
	z-index: 2;
	padding: 14px 14px 6px;
}
.cine-tile__head.row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.cine-tile__head .ja {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .04em
}
.cine-tile__head .en {
	font-size: 12px;
	font-weight: 800;
	opacity: .78;
	margin-top: 2px
}
.sns-badges {
	display: flex;
	gap: 8px;
	font-size: 12px;
	opacity: .9
}
.sns-badges span {
	border: 1px solid rgba(255, 255, 255, .18);
	padding: 3px 6px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .25);
}
.cine-tile__body {
	position: relative;
	z-index: 2;
	padding: 0 14px 14px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: calc(100% - 58px);
}
.tags {
	display: flex;
	flex-direction: column;
	gap: 8px
}
.tag {
	display: inline-flex;
	width: max-content;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 11px;
	letter-spacing: .10em;
	font-weight: 900;
}
.more {
	margin-left: auto;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
}
.sns-feed {
	display: grid;
	gap: 8px;
	width: 100%;
	margin-top: 10px
}
.sns-item {
	padding: 10px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: 12px;
	color: rgba(255, 255, 255, .78);
}
/* bands */

.cine-band {
	position: relative;
	padding: 26px 0;
}
.cine-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}
.cine-band .kicker {
	font-weight: 1000;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: 12px;
	opacity: .85;
}
.cine-band .title {
	font-weight: 1000;
	font-size: 20px;
	letter-spacing: .06em;
}
.cine-band .title .win {
	margin-left: 10px;
	font-size: 30px;
	color: #ffcf77;
	text-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.cine-band .sub {
	font-weight: 800;
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
}
.logo-row {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 6px;
}
.logo-box {
	height: 52px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .65);
	letter-spacing: .10em;
	font-weight: 800;
	font-size: 12px;
}
.cta-row {
	display: flex;
	gap: 12px;
	margin-top: 6px;
	flex-wrap: wrap;
	justify-content: center
}
/* responsive */

@media (max-width: 980px) {
	.hero-cine__inner {
		grid-template-columns: 1fr;
		padding-top: 72px
	}
	.hero-cine__right {
		display: none
	}
	.hero-cine {
		min-height: 920px
	}
	.hero-cine__cards {
		grid-template-columns: 1fr;
		padding-bottom: 6px
	}
	.logo-row {
		grid-template-columns: repeat(2, 1fr)
	}
}
@media (max-width: 480px) {
	.cine-btn {
		width: 100%
	}
	.cine-tile {
		min-height: 190px
	}
}
/* ===== 明るさチューニング（全体） ===== */

.hero-cine {
	/* ここを上げるほど全体が明るくなる */
	--hero-left-dim: .60;
	/* 左の暗幕（文字の可読性） */
	--hero-mid-dim: .38;
	/* 中央 */
	--hero-right-dim: .20;
	/* 右（選手） */
	background: /* 左を暗く、右を少し明るく（＝文字は読めて写真も生きる） */
	linear-gradient( to right, rgba(0, 0, 0, var(--hero-left-dim)) 0%, rgba(0, 0, 0, var(--hero-mid-dim)) 45%, rgba(0, 0, 0, var(--hero-right-dim)) 100%), radial-gradient(1200px 600px at 65% 20%, rgba(255, 255, 255, .14), transparent 60%), var(--hero-bg) center / cover no-repeat;
}
/* overlay（黒を弱める） */

.hero-cine__overlay {
	background: radial-gradient(900px 450px at 65% 25%, rgba(255, 255, 255, .10), transparent 70%), linear-gradient(to bottom, rgba(0, 0, 0, .20), rgba(0, 0, 0, .52));
}
/* タイルを“少し明るく”して読ませる */

.cine-tile {
	background: rgba(0, 0, 0, .20);
	border-color: rgba(255, 255, 255, .14);
  aspect-ratio: 16 / 9;
  width: 100%;
}
.cine-tile__body .sns-item, .cine-tile__body .tag, .cine-tile__body .more {
	background: rgba(0, 0, 0, .28);
	border-color: rgba(255, 255, 255, .14);
}
/* CTAボタンを少し浮かせる */

.cine-btn--primary {
	filter: saturate(1.05);
}
/* ===== SP最適化（レスポンシブ） ===== */

@media (max-width: 768px) {
	/* heroの上下余白を詰める */
	.hero-cine {
		min-height: 92svh;
		background-position: 35% center;
		/* 顔と文字が残る位置に寄せる */
		padding: 20px;
	}
	.hero-cine__inner {
		padding: 64px 0 10px;
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.hero-cine__title {
		font-size: clamp(26px, 9vw, 40px);
		letter-spacing: .02em;
	}
	.hero-cine__lead {
		font-size: 14px;
		margin-top: 10px;
	}
	/* NEXT MATCH を見やすく */
	.hero-cine__next {
		max-width: 100%;
	}
	.hero-cine__date .d {
		font-size: 36px;
	}
	.hero-cine__meta {
		font-size: 12px;
	}
	/* 3タイルは縦積み（今の画面がこれ） */
	.hero-cine__cards {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 10px;
		padding-bottom: 10px;
	}
	.cine-tile {
		min-height: 140px;
	}
	/* SNSアイコンが窮屈なら小さく */
	.sns-badges span {
		font-size: 11px;
		padding: 2px 6px;
	}
	/* ボタンは横幅100%の方が強い */
	.cine-btn {
		width: 100%;
	}
}
.cine-tile__bg {
	background-size: auto 125%;
	/* ← 高さ100%基準 */
	background-position: right top;
	background-repeat: no-repeat;
}
.cine-tile__bg2 {
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}
.cine-tile__bg3 {
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.about-panel{
  margin-top: 10px;
}

/* panel内の最初のsectionの上が詰まりすぎるのを防ぐ */
.about-panel section:first-child{
  padding-top: 10px;
}

/* ===== ABOUT Toggle (High-design / clearer) ===== */
.about-accordion{
  padding: 16px 0; /* 少し呼吸 */
}

/* 「押せる」感を上げる：高さ・影・境界 */
.about-toggle{
  width: 100%;
  min-height: 64px;                 /* 押しやすい */
  border: 1px solid rgba(240,161,75,.22); /* アクセントを薄く */
  background:
    radial-gradient(900px 200px at 50% 0%, rgba(255,166,77,.14), transparent 70%),
    rgba(0,0,0,.18);
  border-radius: 16px;
  padding: 18px 54px 18px 18px;     /* 右にアイコン分の余白を確保 */
  cursor: pointer;
  text-align: center;
  color: rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35); /* 立体感 */
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.about-toggle:hover{
  border-color: rgba(240,161,75,.40);
  background:
    radial-gradient(900px 200px at 50% 0%, rgba(255,166,77,.18), transparent 70%),
    rgba(0,0,0,.22);
  transform: translateY(-1px);
}

.about-toggle:active{
  transform: translateY(0px);
}

/* 上のライン（左右の線＋中央テキスト） */
.about-line{
  font-weight: 900;
  letter-spacing: .20em;   /* 少しだけ詰めて読みやすく */
  text-transform: uppercase;
  font-size: 20px;
  opacity: .95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.about-line::before,
.about-line::after{
  content:"";
  height: 1px;
  width: min(160px, 22vw);
  background: linear-gradient(to right, transparent, rgba(255,255,255,.30));
}
.about-line::after{
  background: linear-gradient(to left, transparent, rgba(255,255,255,.30));
}

/* サブコピー：クリック誘導を明示（分かりやすさ最優先） */
.about-sub{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  letter-spacing: .06em;
}

/* アイコン：+ / − を強調（発見性） */
.about-icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(240,161,75,.38);
  background: rgba(240,161,75,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.about-icon::before,
.about-icon::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: rgba(240,161,75,.95);
  transform: translate(-50%, -50%);
}
.about-icon::after{
  width: 2px;
  height: 16px;
}

/* 開いたとき（aria-expanded=true）で「−」にする */
.about-toggle[aria-expanded="true"] .about-icon::after{
  opacity: 0;
}

/* 開いたとき：ボタン自体も少し明るくして「状態」を伝える */
.about-toggle[aria-expanded="true"]{
  border-color: rgba(240,161,75,.55);
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(255,166,77,.20), transparent 70%),
    rgba(0,0,0,.24);
}

/* パネル */
.about-panel{
  margin-top: 10px;
  overflow: hidden;
}

/* 中に入れたコンテンツの上余白を整える */
.about-panel > section:first-child{
  padding-top: 10px;
}

/* SPで横線を短く & ボタンを少し詰める */
@media (max-width: 768px){
  .about-toggle{
    padding: 14px 52px 14px 14px;
    min-height: 58px;
    width: calc(100% - 32px);   /* ← 修正済み */
    margin: 0 auto;             /* 中央寄せ */
    align-items: center;
  }
  .about-line{
    font-size: 11px;
    letter-spacing: .16em;
    gap: 10px;
  }
  .about-line::before,
  .about-line::after{
    width: min(96px, 18vw);
  }
  .about-icon{
    width: 36px;
    height: 36px;
  }
}

/* デフォルト：PCでは改行しない */
br.sp-only{
  display: none;
}

/* スマホだけ改行 */
@media (max-width: 768px){
  br.sp-only{
    display: block;
  }
}


/* =========================================
   Partner Wall (Scalable / Row-based)
   - TOP: 2 columns
   - OFFICIAL: 4 columns
   - SUPPORT: 6 columns
   - White-logo friendly
========================================= */

.cine-band--partner .partner-wall{
  width: 100%;
  margin-top: 12px;
  padding: 16px;

  display: grid;
  gap: 18px;
}

/* 段（row） */
.partner-row{
  display: grid;
  gap: 14px;
  justify-content: center; /* 段ごと中央寄せ */
}

/* 上段：2カラム */
.partner-row.row-top{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 中段：4カラム */
.partner-row.row-official{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 下段：6カラム（多くなる想定） */
.partner-row.row-support{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 共通ロゴプレート（白背景ロゴ対応） */
.partner-logo{
  display:flex;
  align-items:center;
  justify-content:center;

  background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.partner-logo img{
  max-width: 86%;
  object-fit: contain;
  opacity: .96;
}

/* hover */
.partner-logo:hover{
  transform: translateY(-2px);
  border-color: rgba(240,161,75,.35);
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
}

/* ランク別サイズ */
.rank-top{ height: 82px; border-radius: 18px; }
.rank-top img{ max-height: 44px; max-width: 80%; }

.rank-official{ height: 62px; }
.rank-official img{ max-height: 32px; }

.rank-support{ height: 48px; opacity: .92; }
.rank-support img{ max-height: 24px; }

/* ===== Tablet ===== */
@media (max-width: 980px){
  .partner-row.row-top{ grid-template-columns: 1fr; }     /* TOPは縦 */
  .partner-row.row-official{ grid-template-columns: repeat(2, 1fr); }
  .partner-row.row-support{ grid-template-columns: repeat(3, 1fr); }

  .rank-top{ height: 74px; }
  .rank-top img{ max-height: 38px; }
}

/* ===== Mobile ===== */
@media (max-width: 480px){
  .cine-band--partner .partner-wall{ padding: 12px; gap: 14px; }

  .partner-row.row-official{
    grid-template-columns: repeat(2, 1fr);
  }

  .rank-top{ height: 68px; }
  .rank-top img{ max-height: 36px; }

  .rank-official{ height: 54px; }
  .rank-official img{ max-height: 28px; }

  .rank-support{ height: 46px; }
  .rank-support img{ max-height: 22px; }
}



.btn-event{
    color: #ffcf77;
}

.team-overview {
  position: relative;
  padding: clamp(80px, 10vw, 55px) 0;
  padding-bottom: 0;
}

.team-overview__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.team-overview__heading .kicker {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}

.team-overview__heading .title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  margin-bottom: 40px;
}

.team-overview__heading .title span {
  display: block;
  font-size: .6em;
  color: rgba(255,255,255,.7);
}

.team-overview__body .lead {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  margin-bottom: 24px;
}

.team-overview__body .text {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.8);
  margin-bottom: 20px;
}

.team-overview__footer {
  margin-top: 40px;
}


/* ===== Pickup Fade Overlay ===== */
.pickup-box {
  position: relative;
  z-index: 0; /* ← 重要：基準レイヤー */
  padding: 28px 16px
}

/* フェード本体（上に被せる） */
.pickup-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 100%; /* 少し深めがシネマ寄り */
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .6) 55%,
    rgba(0, 0, 0, .92) 100%
  );

  z-index: 20; /* ← Swiperより必ず上 */
  pointer-events: none;
}

/* アコーディオンOPEN時はフェードを消す */
.about-toggle[aria-expanded="true"] + .pickup-box::after {
  opacity: 0;
}


/* ===== ABOUT CTA : + breathe & silent dot (tap誘導) ===== */

/* ベース（擬似要素配置に必須） */
.about-toggle{
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ② ＋ボタンを“呼吸”させる */
.about-toggle .icon-plus,
.about-toggle .plus{
  animation: plusBreathe 2.4s ease-in-out infinite;
  transform-origin: center;
}

/* ③ ＋の横に「脈打つ点」だけ出す（無言） */
.about-toggle::after{
  content:"";
  position:absolute;
  right: 32px;                 /* ← ＋の中心に合わせる（必要なら微調整） */
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,210,140,.9);
  transform: translate(50%,-50%);
  box-shadow: 0 0 0 0 rgba(255,210,140,.5);
  animation: pulseDot 2.2s ease-out infinite;
  pointer-events:none;
}

/* 押した瞬間の「押した感」（任意だけどおすすめ） */
.about-toggle:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(1.06);
}

/* アニメーション */
@keyframes plusBreathe{
  0%,100%{
    transform: scale(1);
    filter: brightness(1);
  }
  50%{
    transform: scale(1.08);
    filter: brightness(1.2);
  }
}

@keyframes pulseDot{
  0%{
    box-shadow: 0 0 0 0 rgba(255,210,140,.5);
    opacity: .9;
  }
  70%{
    box-shadow: 0 0 0 14px rgba(255,210,140,0);
    opacity: .2;
  }
  100%{
    opacity: 0;
  }
}

/* ④ 開いたら全部止める（重要） */
.about-toggle[aria-expanded="true"]::after{
  display:none;
}
.about-toggle[aria-expanded="true"] .plus,
.about-toggle[aria-expanded="true"] .icon-plus{
  animation:none;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .about-toggle::after,
  .about-toggle .plus,
  .about-toggle .icon-plus{
    animation: none !important;
  }
}

/* ===== Hero background base (PC) ===== */
.hero-cine{
  --hero-left-dim: .60;
  --hero-mid-dim: .38;
  --hero-right-dim: .20;

  background:
    linear-gradient(to right,
      rgba(0,0,0,var(--hero-left-dim)) 0%,
      rgba(0,0,0,var(--hero-mid-dim)) 45%,
      rgba(0,0,0,var(--hero-right-dim)) 100%
    ),
    radial-gradient(1200px 600px at 65% 20%, rgba(255,255,255,.14), transparent 60%),
    var(--hero-bg) center / cover no-repeat;
}

/* ===== SP: swap image only ===== */
@media (max-width: 768px){
  .hero-cine{
    background:
      linear-gradient(to right,
        rgba(0,0,0,var(--hero-left-dim)) 0%,
        rgba(0,0,0,var(--hero-mid-dim)) 45%,
        rgba(0,0,0,var(--hero-right-dim)) 100%
      ),
      radial-gradient(1200px 600px at 65% 20%, rgba(255,255,255,.14), transparent 60%),
      var(--hero-bg-sp) center / cover no-repeat;

    background-position: 35% center; /* これは残してOK */
  }
}

.pickup-overlay {
  position: absolute;
  inset: 0;
  z-index: 21;
  background: transparent;
  pointer-events: auto;
}