:root {
    /* デフォルト値（必要に応じて変更可） */
    --lead: 80%;
    --split-gap: 0;
    --sep: 10px;      /* 2カラムの間の太さ */
    --accent: #E50112; /* 要求色 */
}

* {
    font-family: "Noto Sans JP", sans-serif;
}
body {
    font-family: "Noto Sans JP", sans-serif;
}
body.top {
    overflow-x: hidden;
}
.site-logo {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    color: #FF0000;
}
.site-logo img {
    width: 100%;
}
.movie-logo {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    color: #FF0000;
}
.movie-logo img {
    width: 100%;
}
body.terms h1 {
    margin: 50px 0;
}
body.terms h2 {
    margin: 50px 0 20px 0;
    font-size: 1.8em;
}
body.terms h3 {
    margin: 10px 0 20px 0;
    font-size: 1.5em;
}
body.terms p {
    margin-bottom: 20px;
}

h2.news {
    padding-left: 0.3em;
    border-left: 8px solid #E50112;
}
h3.subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 1.3em;
    color: #FF0000;
}
.custom-split {
    display: flex;
    align-items: stretch;
    background: var(--accent);
}
.custom-split > .lead-col {
    flex: 0 0 var(--lead);
    max-width: var(--lead);
}
.custom-split > .split-sep {
    flex: 0 0 var(--sep);
    max-width: var(--sep);
    background: var(--accent);
}
.custom-split > .movie-col {
    flex: 1 1 auto;
    max-width: calc(100% - var(--lead) - var(--sep));
}

/* 画像の周囲に同色の余白（10px） */
.main-movie .movie-frame {
    background: var(--accent);
    padding: 10px;            /* 余白 */
    display: inline-block;    /* 画像サイズにフィット */
}
.main-movie .movie-frame img {
    display: block;           /* 余白のズレ防止 */
    height: auto;
    max-width: 100%;
}

/* モバイルでは縦積み＋セパレーターは横線に */
@media (max-width: 768px) {
    .custom-split {
        flex-direction: column;
    }
    .custom-split > .lead-col,
    .custom-split > .movie-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .custom-split > .split-sep {
        width: 100%;
        max-width: 100%;
        height: var(--sep);
    }
}
.box-main-lead {

}
.main-lead {
    background-color: #E50112;
    color: #FFFFFF;
}
.main-lead h2 {
    padding-top: 0.5em;
    padding-left: 0.5em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
}
.main-lead h3 {
    display: inline-block;
    padding: 0.3em 1em;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 1.1em;
    color: #000000;
    background-color: #FFFFFF;
}
.main-movie {
    background-color: #E50112;
    color: #FFFFFF;
}
.main-movie img {
    margin: auto;
}
.main-slider{
    visibility: hidden; /* 初期状態では非表示 */
    /*background-color: #9f9f9f;*/
    padding-top: 2em;
    padding-bottom: 2em;
    background-color: #E50112;
}
.main-slider .slick-slide {
    /*margin: 0 2em; !* スライド間のマージン *!*/
    /*height: 300px; !* スライドの高さ *!*/
    margin: 0 10px; /* スライド間の間隔 */
    /*opacity: 0.5; !* 非アクティブなスライドの透明度 *!*/
    transition: transform 0.5s ease-out; /* スムーズなアニメーション */
}
.main-slider .slick-list {
    overflow: visible; /* スライダー外のスライドも表示するように設定 */
}
.main-slider .slick-center {
    opacity: 1.0; /* アクティブなスライドの透明度を通常に */
}
.main-slider .slick-slide img {
    width: 100%; /* 画像をスライドの幅いっぱいに表示 */
    height: 100%; /* 画像をスライドの高さいっぱいに表示 */
    object-fit: cover; /* 画像の比率を保ちつつ、指定した範囲に収める */
}
.thumbnail-slider {
    visibility: hidden; /* 初期状態では非表示 */
}
/* サムネイルスライダーのスタイル */
.thumbnail-slider .slick-slide {
    margin: 0 2px; /* スライド間のマージン */
    /*height: 100px; !* スライドの高さ *!*/
    opacity: 0.6; /* 非アクティブなスライドの透明度 */
    transition: opacity 0.3s; /* 透明度の変更にアニメーションを適用 */
}
.thumbnail-slider .slick-slide img {
    width: 100%; /* 画像をスライドの幅いっぱいに表示 */
    height: 100%; /* 画像をスライドの高さいっぱいに表示 */
    object-fit: cover; /* 画像の比率を保ちつつ、指定した範囲に収める */
}
.thumbnail-slider .slick-slide.slick-current {
    opacity: 1; /* アクティブなスライドの透明度を通常に */
}
.box-main-slider {
    position: relative;
    margin-bottom: 1em;
}
.slick-arrow {
    z-index: 99999;
}
.slick-prev:before,
.slick-next:before {
    font-size: 40px;
}
.seal__campaign {
    position: absolute;
    width: 250px !important;
    z-index: 9999;
    right: 10px;
    bottom: 10px;
}
ul.news-list {
    padding: 0;
}
ul.news-list li {
    list-style: none;
}
ul.news-list li div.date,
ul.news-list li div.title {
    display: inline-block;
}
ul.news-list li div.date {
    width: 90px;
}
footer {
    margin: 3em 0;
    text-align: center;
}
.h-50pc {
    height: 50%;
}
.h-100pc {
    height: 100%;
}
.btn-wins-primary {
    color: #FFFFFF !important;
    background-color: #E50112 !important;;
}
.btn-wins-primary:hover {
    color: #FFFFFF !important;;
    background-color: #E50112 !important;;
}