@charset "UTF-8";

/* ===== Variables ===== */
:root {
 --bk: #000;
 --wh: #fff;
 --button-bg: #1D1D1D;
 --button-hover-bg: #4D4D4D;
}

/* ===== Base ===== */
body {
 background: #fff;
 margin-bottom: 100px;
}

body a {
 text-decoration: none;
}

/* ===== Banner ===== */
.yy-staff-banner {
 display: block;
 width: 100%;
 line-height: 0;
 overflow: hidden;
}

.yy-staff-banner img {
 display: block;
 width: 100%;
}

/* ===== Main layout ===== */
main {
 padding: 50px 50px 100px;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 gap: 60px;
 background-color: #fff;
}

/* ===== Main section ===== */
.main_section {
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 padding: 0 30px;
 row-gap: 120px;
 column-gap: 80px;
 width: 100%;
}

/* ===== Title / Lead area ===== */
.slide_animation {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 15px;
 width: 100%;
 text-align: center;
}

.slide_animation h1 {
 color: var(--bk);
 font-family: Optima;
 font-size: 28px;
 font-weight: 400;
 line-height: normal;
 letter-spacing: 1.4px;
 margin: 0 auto;
 text-align: center;
}

.yy-lead-text {
 color: #000;
 font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
 font-size: 12px;
 font-weight: 500;
 line-height: 180%;
 letter-spacing: 0.96px;
 display: block;
 width: 100%;
 text-align: center;
}

/* ===== Sections wrapper (2-column layout) ===== */
/* wrapper min-width 1400px 前提。46% × 1160px ≒ 533px で2列確保 */
.yfmcs-sections {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
 row-gap: 120px;
 column-gap: 80px;
 width: 100%;
}

/* 奇数個のセクションで末尾が左揃えになるよう空アイテムを置く */
.yfmcs-sections::after {
 content: "";
 flex: 0 0 auto;
 width: 46%;
 min-width: 520px;
}

/* ===== Each LOOK section ===== */
/* 画像500px + 矢印の余白が確保できる幅（swiper = section幅 > 500px） */
.staff_styling_section {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 width: 46%;
 min-width: 520px;
}

/* ===== Staff styling block ===== */
.staff_styling {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 30px;
 width: 100%;
}

/* ===== Material heading (h2) ===== */
.staff_styling .product_title {
 margin-inline: auto;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 gap: 5px;
 width: 500px;
 max-width: 100%;
}

.staff_styling .product_title h2 {
 color: #000;
 font-family: Optima;
 font-size: 24px;
 font-weight: 400;
 line-height: 100%;
 letter-spacing: 1.92px;
}

/* ===== Swiper — section幅いっぱい（> 500px）で矢印が画像外に出る ===== */
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
 background-image: none;
}

.staff_styling .swiper {
 width: 100%;
}

.staff_styling .swiper-slide {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 min-height: auto;
}

.staff_styling .staff_imginfo {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 20px;
}

/* ===== Staff image — 500px 固定 ===== */
.staff_img {
 width: 500px;
 max-width: 100%;
 height: auto;
 border-radius: 0;
}

/* ===== Navigation arrows — swiper端（画像外）に配置 ===== */
.staff_styling .swiper-button-prev,
.staff_styling .swiper-button-next {
 top: 40%;
 width: 18px;
 height: 60px;
 transition: 0.3s ease-in-out;
}

.staff_styling .swiper-button-prev {
 left: calc(50% - 250px - 28px);
}

.staff_styling .swiper-button-next {
 right: calc(50% - 250px - 28px);
}

.staff_styling .swiper-button-prev:hover,
.staff_styling .swiper-button-next:hover {
 opacity: 0.6;
}

.staff_styling .swiper-button-prev svg,
.staff_styling .swiper-button-next svg {
 display: none;
}

.staff_styling .swiper-button-prev::after,
.staff_styling .swiper-button-next::after {
 background-repeat: no-repeat;
 background-size: contain;
 content: "";
 width: 18px;
 height: 60px;
 margin: auto;
}

.staff_styling .swiper-button-prev::after {
 background-image: url(/img/brand/discord_staffstyling/arrow_prev.svg);
}

.staff_styling .swiper-button-next::after {
 background-image: url(/img/brand/discord_staffstyling/arrow_next.svg);
}

/* ===== Recommend items grid ===== */
.recommend_items {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 20px;
 width: 500px;
 max-width: 100%;
}

.recommend_items .item_ {
 width: auto;
 min-width: 0;
}

/* 背景を黒に（既存の白指定を上書き） */
main.event_coordinate_recommended_black {
 background-color: #000;
}

/* タイトル・リード文・見出しを白に */
main.event_coordinate_recommended_black .main_section h1,
main.event_coordinate_recommended_black .main_section .yy-lead-text {
 color: #fff;
}

main.event_coordinate_recommended_black .staff_styling .product_title h2 {
 color: #fff;
}

main.event_coordinate_recommended_black .staff_slide .swiper-button-prev,
main.event_coordinate_recommended_black .staff_slide .swiper-button-next {
 filter: invert(1);
}

/* 背景を黒に（既存の白指定を上書き） */