@charset "utf-8";

body {
    animation: BodyFadeIn 1s ease-out;
}

@keyframes BodyFadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* ヘッダー上書き
***************************************************************/
.g-header {
    height: 50px !important;
    border-top: none !important;
}

.-simple .g-header_logo {
    height: auto !important;
    margin: 13px auto 0 !important;
}

.g-header_logo img {
    display: block !important;
    width: 148px !important;
    height: 24px !important;
    margin: 0 auto !important;
}

/* メインビジュアル
***************************************************************/
.mv {
    position: relative;
    width: 100%;
}

.mv_bg {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);
    overflow: hidden;
    z-index: 0;
}

.mv_bg.is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
}

.mv_spacer {
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);
}

.mv_inner {
    display: flex;
    width: 100%;
    height: 100%;
}

.mv_img {
    width: 50%;
    height: 100%;
    overflow: hidden;
    will-change: transform, opacity, filter;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.8s ease-out, filter 1.8s ease-out, transform 0.8s ease-out;
}

.mv_img--left {
    transform: translateY(-66%);
}

.mv_img--right {
    transform: translateY(66%);
}

.mv_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv_img--left img {
    object-position: top left;
}

.mv_img--right img {
    object-position: center center;
}

/* アニメーション発火後 */
.mv.is-active .mv_img {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.mv.is-active .mv_img--left {
    transition-delay: 0s;
}

.mv.is-active .mv_img--right {
    transition-delay: 0s;
}

/* タイトル */
.mv_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    max-width: 936px;
    aspect-ratio: 936 / 383;
    z-index: 10;
    pointer-events: none;
}

.mv_title_h1 {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* altテキスト（視覚非表示・スクリーンリーダー用） */
.mv_title_alt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 各文字（枠936x383に対する%で絶対配置）
   ※ left / top / width / rotate を各文字ごとに調整可能。
     位置微調整はここの left・top を触ればOK（ウィンドウ幅が変わっても比率維持） */
.mv_title_char {
    position: absolute;
    display: block;
    opacity: 0;
    transition: opacity 0.02s ease-out;
}

.mv_title_char img {
    display: block;
    width: 100%;
    height: auto;
}

/* width = 全体幅(936=1872の1/2)に対する各文字の幅比率 / left・topは枠基準の目測初期値 */
.mv_title_char--01 { width: 22.12%; left: 0;     top: 20%; }
.mv_title_char--02 { width: 9.08%;  left: 21%;    top: 28%; }
.mv_title_char--03 { width: 17.68%; left: 30%;    top: -2%; }
.mv_title_char--04 { width: 7.21%;  left: 44%;    top: 9%; }
.mv_title_char--05 { width: 18.05%; left: 53%;    top: -14%;  }
.mv_title_char--06 { width: 10.36%; left: 72%;    top: -14%;  }
.mv_title_char--07 { width: 24.68%; left: 40%;    top: 34%; }
.mv_title_char--08 { width: 13.09%; left: 65%;    top: 26%; }
.mv_title_char--09 { width: 11.91%; left: 75%;    top: 23%; }
.mv_title_char--10 { width: 11.70%; left: 87%;    top: 5%; }

/* 1文字ずつフェードイン（02・04・06の後に+0.05sのディレイ） */
.mv.is-active .mv_title_char {
    opacity: 1;
}

/* 背景画像アニメ(1.8s)完了の1秒後 = 発火から2.8s後に開始 */
.mv.is-active .mv_title_char--01 { transition-delay: 2.8s; }
.mv.is-active .mv_title_char--02 { transition-delay: 2.85s; }
.mv.is-active .mv_title_char--03 { transition-delay: 2.95s; }
.mv.is-active .mv_title_char--04 { transition-delay: 3.0s; }
.mv.is-active .mv_title_char--05 { transition-delay: 3.1s; }
.mv.is-active .mv_title_char--06 { transition-delay: 3.15s; }
.mv.is-active .mv_title_char--07 { transition-delay: 3.25s; }
.mv.is-active .mv_title_char--08 { transition-delay: 3.3s; }
.mv.is-active .mv_title_char--09 { transition-delay: 3.35s; }
.mv.is-active .mv_title_char--10 { transition-delay: 3.4s; }

/* ステートメント */
.mv_statement {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px;
}

.mv_statement_inner {
    text-align: center;
    width: 914px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.8);
    padding: 120px 40px;
}

.mv_statement_text {
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.1em;
    color: #1B2B5B;
    font-weight: 600;
}

.mv_statement_text p {
    color: #1B2B5B;
}

.mv_statement_text p + p {
    margin-top: 1.5em;
}

.mv_statement_logo {
    margin-top: 60px;
}

.mv_statement_logo img {
    width: 100%;
    max-width: 479px;
    height: auto;
}

.mv_statement_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    width: 280px;
    height: 65px;
    color: #FFF;
    background: #1B2B5B;
    border: 2px solid #1B2B5B;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-decoration: none;
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, color 0.3s;
}

.mv_statement_btn:hover {
    background: #FFF;
    color: #1B2B5B;
}

/* 売る・買う・巡る 共通
***************************************************************/
.story {
    position: relative;
    width: 100%;
    background: #FFF;
}

/* フェードインアニメーション */
.js-fadein {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fadein.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.story_inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

.story_title {
    width: 471px;
}

.story_body {
    display: flex;
    justify-content: space-between;
}

.story_text {
    font-size: 16px;
    line-height: 1.9;
    color: #1B2B5B;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.story_text p + p {
    margin-top: 3em;
}

.story_imgs {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.story_imgs_item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ボタン共通
***************************************************************/
.story_btn_wrap {
    text-align: center;
    padding-top: 50px;
}

.story_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 65px;
    color: #FFF;
    background: #1B2B5B;
    border: 2px solid #1B2B5B;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-decoration: none;
    box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, color 0.3s;
}

.story_btn:hover {
    background: #FFF;
    color: #1B2B5B;
}

/* 売る（個別）
***************************************************************/
.story--sell .story_inner {
    padding: 260px 0 0 60px;
}

.story--sell .story_title {
    margin-bottom: -120px;
}

.story--sell .story_text {
    padding: 180px 0 0 40px;
}

.story--sell .story_text--02 {
    margin-left: 48px;
}

.story--sell .story_imgs {
    width: 844px;
    gap: 60px;
}

.story--sell .story_imgs_item--01 {
    width: 520px;
    margin-right: auto;
}

.story--sell .story_imgs_item--02 {
    width: 700px;
    margin-left: auto;
}

.story--sell .story_imgs_item--03 {
    width: 400px;
    margin-left: 90px;
}

/* 動画カルーセル
***************************************************************/
.story_video {
    margin-top: 100px;
    overflow: hidden;
}

.story_video_slider {
    overflow: visible;
}

.story_video_slide {
    padding: 10px 10px;
    outline: none;
    transform: scale(0.75);
    transition: transform 0.8s ease;
}

.slick-slide.is-active .story_video_slide {
    transform: scale(1);
}

.story_video_link {
    position: relative;
    display: block;
    border: 8px solid #D62722;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.8s ease, border-color 0.8s ease;
}

/* アクティブのホバーで拡大 */
.slick-slide.is-active .story_video_link:hover {
    transform: scale(1.03);
}

/* 非アクティブはカーソルをデフォルトに */
.slick-slide:not(.is-active) .story_video_link {
    cursor: default;
    transform: scale(0.75);
    filter: blur(4px);
    border-color: transparent;
}

.story_video_link img {
    width: 100%;
    height: auto;
    display: block;
}

.story_video_play {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
}

.story_video_play img {
    width: 100%;
    height: 100%;
}

.story_video_caption {
    margin-top: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
}

/* 非アクティブのキャプション非表示 */
.slick-slide:not(.is-active) .story_video_caption {
    visibility: hidden;
}

.story_video_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #1B2B5B;
}

.story_video_prev,
.story_video_next {
    background: none;
    border: none;
    font-size: 12px;
    font-weight: bold;
    color: #1B2B5B;
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.story_video_prev img,
.story_video_next img {
    width: 17px;
    height: auto;
}

.story_video_prev:hover,
.story_video_next:hover {
    opacity: 0.6;
}

.story_video_sep {
    color: #1B2B5B;
}

/* ECO買取（売る専用）
***************************************************************/
.sell_eco {
    max-width: 1320px;
    margin: 100px auto 0;
}

.sell_eco_inner {
    background: url('/v3/pc/img/sell-buy-cycle/story_bg.jpg') center top / 100% auto repeat-y;
    padding: 75px 72px;
}

.sell_eco_title {
    font-size: 30px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 50px;
    background: #FFF;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.sell_eco_body {
    display: flex;
    align-items: center;
}

.sell_eco_illust {
    flex: 1;
    padding-right: 60px;
    display: flex;
    align-items: center;
}

.sell_eco_illust_left img,
.sell_eco_illust_arrow img,
.sell_eco_illust_right img {
    display: block;
}

/* ECO買取アニメーション */
.sell_eco_illust_left,
.sell_eco_illust_right {
    opacity: 0;
    transition: opacity 0.42s ease;
}

.sell_eco_illust_arrow {
    margin: 0 20px;
    width: 58px;
    height: 195px;
    flex-shrink: 0;
}

.sell_eco_arrow_path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.315s ease-out;
}

.sell_eco_arrow_path--1 {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

.sell_eco_arrow_path--2 {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.sell_eco_arrow_path--3 {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

.sell_eco_arrow_head {
    opacity: 0;
    transition: opacity 0.16s ease;
}

.sell_eco_illust.is-visible .sell_eco_arrow_path--1 {
    stroke-dashoffset: 0;
    transition-delay: 0.21s;
}

.sell_eco_illust.is-visible .sell_eco_arrow_path--2 {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.37s ease-out;
    transition-delay: 0.37s;
}

.sell_eco_illust.is-visible .sell_eco_arrow_path--3 {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.21s ease-out;
    transition-delay: 0.63s;
}

.sell_eco_illust.is-visible .sell_eco_arrow_head {
    opacity: 1;
    transition-delay: 0.74s;
}

/* 発火後 */
.sell_eco_illust.is-visible .sell_eco_illust_left {
    opacity: 1;
    transition-delay: 0s;
}

.sell_eco_illust.is-visible .sell_eco_illust_right {
    opacity: 1;
    transition-delay: 0.74s;
}

.sell_eco_text {
    position: relative;
    flex: 1;
    padding-left: 60px;
    font-size: 14px;
    line-height: 2;
    color: #1B2B5B;
}

/* 縦線（上から下へ伸びるアニメ用に擬似要素化） */
.sell_eco_text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0;
    background: #1B2B5B;
    transition: height 0.74s ease-out;
}

/* right画像アニメ完了(1.16s)後に縦線が伸びる */
.sell_eco_illust.is-visible ~ .sell_eco_text::before {
    height: 100%;
    transition-delay: 1.16s;
}

/* テキスト各段落を上から順にフェードイン */
.sell_eco_text p {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.42s ease, transform 0.42s ease;
}

.sell_eco_illust.is-visible ~ .sell_eco_text .sell_eco_text_lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.16s;
}

.sell_eco_illust.is-visible ~ .sell_eco_text .sell_eco_link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.37s;
}

.sell_eco_illust.is-visible ~ .sell_eco_text .sell_eco_note {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.58s;
}

.sell_eco_text p + p {
    margin-top: 1.5em;
}

.sell_eco_text_lead {
    font-weight: bold;
}

.sell_eco_link {
    margin-top: 1em;
    text-align: right;
}

.sell_eco_link a {
    color: #1B2B5B;
    text-decoration: underline;
    font-weight: bold;
}

.sell_eco_note {
    margin-top: 1.5em;
    font-size: 14px;
    line-height: 1.8;
    color: #1B2B5B;
}

/* 買う（個別）
***************************************************************/
.story--buy .story_inner {
    padding: 260px 60px 0 0;
}

.story--buy .story_title {
    margin-left: 60px;
}

.story--buy .story_text {
    padding: 40px 0 0 0;
    gap: 7em;
}

.story--buy .story_text--02 {
    margin-left: 48px;
}

.story--buy .story_imgs {
    width: 857px;
    gap: 73px;
}

.story--buy .story_imgs_item--01 {
    width: 469px;
    margin-left: auto;
}

.story--buy .story_imgs_item--02 {
    width: 716px;
}

/* 買うリスト
***************************************************************/
.buy_list {
    max-width: 1320px;
    margin: 100px auto 0;
}

.buy_list_inner {
    background: url('/v3/pc/img/sell-buy-cycle/story_bg.jpg') center top / 100% auto repeat-y;
    padding: 75px 72px;
}

.buy_list_title {
    font-size: 30px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 50px;
    background: #FFF;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.buy_list_title span {
    display: inline;
}

.buy_list_grid {
    display: flex;
    justify-content: center;
    gap: 0;
}

.buy_list_item {
    width: 200px;
    text-align: center;
}

.buy_list_item_en {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #D62722;
    text-transform: uppercase;
    margin-bottom: 25px;
    padding: 0 15px;
    position: relative;
}

.buy_list_item_en::before,
.buy_list_item_en::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #1B2B5B;
}

.buy_list_item_en::before {
    left: 0;
}

.buy_list_item_en::after {
    right: 0;
}

.buy_list_item:not(:first-child) .buy_list_item_en::before {
    display: none;
}

.buy_list_item_img {
    width: 160px;
    height: 160px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #FFF;
}

.buy_list_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buy_list_item_label {
    font-size: 24px;
    font-weight: bold;
    color: #1B2B5B;
}

.buy_list_item_desc {
    font-size: 14px;
    font-weight: bold;
    color: #1B2B5B;
}

/* 買うコンテンツ */
.buy_list_content {
    margin-top: 50px;
    border-top: 1px solid #1B2B5B;
    padding-top: 50px;
}

.buy_list_content_title {
    font-size: 26px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
    margin-bottom: 20px;
}

.buy_list_content_lead {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    color: #1B2B5B;
    text-align: center;
    margin-bottom: 30px;
}

.buy_list_content_cards {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.buy_list_content_card {
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.buy_list_content_card a {
    display: block;
    transition: opacity 0.3s ease;
}

.buy_list_content_card a:hover {
    opacity: 0.7;
}

.buy_list_content_card img {
    display: block;
    width: 587px;
    height: auto;
}

/* 巡る（個別）
***************************************************************/
.story--cycle .story_inner {
    padding: 260px 0 0 60px;
}

.story--cycle .story_title {
    margin-bottom: -20px;
}

.story--cycle .story_text {
    padding: 75px 0 0 40px;
}

.story--cycle .story_text--02 {
    margin-left: 48px;
}

.story--cycle .story_imgs {
    width: 826px;
    gap: 72px;
}

.story--cycle .story_imgs_item--01 {
    width: 766px;
}

.story--cycle .story_imgs_item--02 {
    width: 610px;
    margin-left: auto;
}

/* 巡るリスト（サイクル図）
***************************************************************/
.cycle_list {
    max-width: 1320px;
    margin: 100px auto 0;
}

.cycle_list_inner {
    background: url('/v3/pc/img/sell-buy-cycle/story_bg.jpg') center top / 100% auto repeat-y;
    padding: 75px 72px;
}

.cycle_list_title {
    font-size: 30px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.6;
    margin-bottom: 50px;
    background: #FFF;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.cycle_list_steps {
    display: flex;
    justify-content: center;
    gap: 0 50px;
}

.cycle_list_step {
    width: 254px;
    text-align: center;
    position: relative;
}

/* ステップ順番表示アニメーション
   1. 縦線・矢印（擬似要素）が先に同時フェードイン
   2. その後 STEP.01→04 の中身が順番にフェードイン */

/* STEP本体は常に表示（擬似要素＝縦線/矢印を個別制御するため） */
.cycle_list_step {
    opacity: 1;
}

/* 縦線（両端）・矢印（step間の>）は初期非表示 */
.cycle_list_step:first-child::before,
.cycle_list_step:last-child::after,
.cycle_list_step:not(:last-child)::after {
    opacity: 0;
    transition: opacity 0.56s ease;
}

/* STEPの中身は初期非表示（下からフェード用） */
.cycle_list_step > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.56s ease, transform 0.56s ease;
}

/* 発火：縦線・矢印を同時にフェードイン（先） */
.js-cycle-steps.is-visible .cycle_list_step:first-child::before,
.js-cycle-steps.is-visible .cycle_list_step:last-child::after,
.js-cycle-steps.is-visible .cycle_list_step:not(:last-child)::after {
    opacity: 1;
}

/* 発火：STEPの中身を 01→04 の順にフェードイン（後） */
.js-cycle-steps.is-visible .cycle_list_step > * {
    opacity: 1;
    transform: translateY(0);
}

.js-cycle-steps.is-visible .cycle_list_step:nth-child(1) > * {
    transition-delay: 0.42s;
}

.js-cycle-steps.is-visible .cycle_list_step:nth-child(2) > * {
    transition-delay: 0.7s;
}

.js-cycle-steps.is-visible .cycle_list_step:nth-child(3) > * {
    transition-delay: 0.98s;
}

.js-cycle-steps.is-visible .cycle_list_step:nth-child(4) > * {
    transition-delay: 1.26s;
}

/* ステップ間の矢印 */
.cycle_list_step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -30px;
    width: 15px;
    height: 47px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='47' viewBox='0 0 15 47'%3E%3Cpolyline points='0,0 15,23.5 0,47' fill='none' stroke='%231B2B5B' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cycle_list_step_num {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #D62722;
    margin-bottom: 15px;
    position: relative;
    padding: 0 15px;
}

/* 両端の縦線（STEP.01の左・STEP.04の右）
   → step直下の擬似要素にして、中身の遅延フェードの影響を受けないようにする。
     step_numの縦棒と同じ見た目・位置に合わせる（step上部のnum位置） */
.cycle_list_step:first-child::before,
.cycle_list_step:last-child::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 1px;
    height: 40px;
    background: #1B2B5B;
}

.cycle_list_step:first-child::before {
    left: 0;
}

.cycle_list_step:last-child::after {
    right: 0;
    /* 矢印用のbackground指定を打ち消す（last-childは矢印を持たない） */
    background: #1B2B5B;
}

.cycle_list_step_logo {
    width: 31px !important;
    height: auto;
    vertical-align: middle;
    margin-left: 5px;
}

.cycle_list_step_img {
    width: 254px;
    margin: 0 auto 20px;
}

.cycle_list_step_img img {
    width: 100%;
    height: auto;
}

.cycle_list_step_label {
    font-size: 24px;
    font-weight: bold;
    color: #1B2B5B;
}

.cycle_list_step_desc {
    font-size: 14px;
    font-weight: bold;
    color: #1B2B5B;
}

/* 登場人物
***************************************************************/
.characters {
    background: #1B2B5B;
    margin-top: 140px;
    padding: 100px 0;
}

.characters_inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px;
}

.characters_title {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 24px;
    margin-bottom: 10px;
}

.characters_title_en {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #D62722;
    text-transform: uppercase;
}

.characters_title_ja {
    font-size: 26px;
    font-weight: bold;
    color: #FFF;
}

.characters_hero {
    display: flex;
    align-items: center;
    gap: 88px;
}

.characters_hero_img {
    width: 293px;
    height: 293px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 50px;
}

.characters_hero_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.characters_hero_label {
    font-size: 24px;
    font-weight: bold;
    color: #FFF;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.1em;
}

.characters_hero_desc {
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
    color: #FFF;
}

.characters_sub_list {
    display: flex;
    gap: 55px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 40px 10px 0;
    margin-top: 40px;
}

/* 2人の場合 */
.characters_sub_list:has(.characters_sub:nth-child(2):last-child) {
    padding: 40px 50px 0;
    gap: 100px;
}

/* 1人の場合 */
.characters_sub_list:has(.characters_sub:first-child:last-child) {
    padding: 40px 140px 0;
    gap: 0;
}

/* 1人の場合：主人公も2カラムに */
.characters:has(.characters_sub:first-child:last-child) .characters_hero {
    display: grid;
    grid-template-columns: 293px 1fr;
    gap: 0 100px;
    align-items: center;
}

.characters:has(.characters_sub:first-child:last-child) .characters_hero_img {
    width: 293px;
    height: 293px;
    grid-row: 1 / 3;
}

.characters:has(.characters_sub:first-child:last-child) .characters_hero_label {
    align-self: end;
    margin-bottom: 15px;
}

.characters:has(.characters_sub:first-child:last-child) .characters_hero_desc {
    align-self: start;
}

/* 1人の場合：サブキャラも2カラムに */

.characters_sub_list:has(.characters_sub:first-child:last-child) .characters_sub {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0 125px;
    align-items: center;
    text-align: left;
}

.characters_sub_list:has(.characters_sub:first-child:last-child) .characters_sub_img {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    margin: 0;
    grid-row: 1 / 3;
}

.characters_sub_list:has(.characters_sub:first-child:last-child) .characters_sub_name {
    margin-bottom: 15px;
    align-self: end;
}

.characters_sub_list:has(.characters_sub:first-child:last-child) .characters_sub_desc {
    font-size: 14px;
    align-self: start;
}

/* サブキャラが1人の時だけ .br-single を表示（2人以上で非表示） */
.characters_sub_list .br-single {
    display: none;
}

.characters_sub_list:has(.characters_sub:first-child:last-child) .br-single {
    display: inline;
}

.characters_sub {
    flex: 1;
    text-align: center;
    color: #FFF;
}

.characters_sub_img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
}

.characters_sub_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.characters_sub_name {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 15px;
}

.characters_sub_desc {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
}

/* プロフィール
***************************************************************/
.profile {
    padding: 200px 0 100px;
}

.profile_inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.profile_photo {
    flex-shrink: 0;
}

.profile_photo img {
    width: 300px;
    height: auto;
}

.profile_body {
    padding-top: 20px;
}

.profile_name {
    font-size: 30px;
    font-weight: bold;
    color: #1B2B5B;
    margin-bottom: 25px;
}

.profile_desc {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    color: #1B2B5B;
}

/* インタビュー・メイキング
***************************************************************/
.interview {
    padding-bottom: 100px;
}

.interview_inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px;
}

.interview_block {
    margin-bottom: 100px;
}

.interview_block:last-child {
    margin-bottom: 0;
}

.interview_title {
    font-size: 28px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
    margin-bottom: 15px;
}

.interview_lead {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    color: #1B2B5B;
    text-align: center;
    margin-bottom: 20px;
}

.interview_video {
    max-width: 658px;
    margin: 0 auto;
}

.interview_video_link {
    position: relative;
    display: block;
    border: 8px solid #D62722;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.interview_video_link:hover {
    transform: scale(1.03);
}

.interview_video_link img {
    width: 100%;
    height: auto;
    display: block;
}

.interview_video_play {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
}

.interview_video_play img {
    width: 100%;
    height: 100%;
}

.interview_caption {
    margin-top: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #1B2B5B;
    text-align: center;
}

/* モーダル
***************************************************************/
.video_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video_modal.is-active {
    opacity: 1;
    visibility: visible;
}

.video_modal_inner {
    position: relative;
    width: 960px;
    max-width: 90%;
    aspect-ratio: 960 / 541;
}

.video_modal_inner iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video_modal_close {
    position: fixed;
    top: 0;
    right: 0;
    width: 76px;
    height: 76px;
    background: #D62722;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.video_modal_close::before,
.video_modal_close::after {
    content: '';
    position: absolute;
    width: 33px;
    height: 3px;
    background: #FFF;
    border-radius: 2px;
}

.video_modal_close::before {
    transform: rotate(45deg);
}

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

/* セカストを知る
***************************************************************/
.lower_area_wrap {
    background: #E8E8E8;
}

section.lower_area {
    width: 100%;
    padding: 96px 0;
}

.cmn_maintitle {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
}

.know_ss,
.magazine {
    margin: auto;
    width: 1200px;
}

.magazine {
    margin: 64px auto;
}

.lower_area h2:nth-of-type(2) {
    margin-top: 64px;
}

ul.about_link_list {
    margin-bottom: 0;
}

ul.about_link_list a,
ul.magazine_link_list a {
    transition: all .3s ease;
}

ul.about_link_list a:hover,
ul.magazine_link_list a:hover {
    opacity: .6;
}

.about_title {
    margin-bottom: 24px;
}

ul.about_link_list {
    display: flex;
}

ul.about_link_list li {
    display: flex;
    flex-basis: 386px;
}

ul.about_link_list li:not(:first-child) {
    margin-left: 21px;
}

ul.about_link_list li a {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 4px 4px 8px 0 #DADDE3;
}

ul.about_link_list li a:hover {
    opacity: .5;
}

ul.magazine_link_list {
    display: flex;
    justify-content: center;
}

ul.magazine_link_list li {
    display: flex;
    flex-basis: 386px;
}

ul.magazine_link_list li:not(:first-child) {
    margin-left: 21px;
}

ul.magazine_link_list li a {
    width: 100%;
    padding: 30px 40px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 4px 4px 8px 0 #DADDE3;
    background: #FFF;
    text-decoration: none;
}

ul.magazine_link_list li a:hover {
    opacity: .5;
}

ul.magazine_link_list li a p {
    font-size: 12px;
    text-align: center;
}

.magazine_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 71px;
}

/* LINE・会員募集
***************************************************************/
.outdoor_bottom_link {
    padding: 96px 0;
    background: #FFF;
}

.outdoor_bottom_link_title {
    text-align: center;
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    color: #707070;
}

.outdoor_bottom_link_list,
.outdoor_bottom_link_list li {
    list-style: none;
}

.outdoor_bottom_link_list {
    display: flex;
    justify-content: center;
}

.outdoor_bottom_link_list .outdoor_bottom_link_title {
    font-weight: bold;
}

/* タイマー設定
***************************************************************/
.timerSetting {
    display: none !important;
}

.timerSetting.show {
    display: block !important;
}