html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

.show--sp {
    display: none;
    visibility: hidden;
}

@media (max-width: 1023px) {
    .show--pc {
        display: none !important;
        visibility: hidden;
    }

    .show--sp {
        display: block;
        visibility: visible;
    }
}

img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

header {
    background-color: #FFF;
}

@media (max-width: 1023px) {
    header {
        position: fixed;
        width: 100%;
        z-index: 9999;
        height: auto;
    }

    header.active {
        height: 100vh;
    }
}

header .navbar {
    height: 125px;
    padding: 0 10%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;

    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    header .navbar {
        padding: 0;
        max-width: calc((1050/1280)*100vw);
        gap: calc((20/1280)*100vw);
    }
}

@media (max-width: 1023px) {
    header .navbar {
        height: 100px;
        align-items: center;
        padding: 0 3.3%;
        max-width: 100%;
        gap: 0;
    }
}

@media (max-width: 767px) {
    header .navbar {
        height: 50px;
    }
}

header .navbar .logo {
    position: relative;
    z-index: 100;
    width: 141px;
    margin-bottom: 10px;
    z-index: 1;
}

@media (max-width: 1023px) {
    header .navbar .logo {
        width: 25%;
        margin-bottom: 0;
    }
}

header .navbar .logo img {
    width: 100%;
}

.nav-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    margin-bottom: 15px;
}

@media (max-width: 1280px) {
    .nav-list {
        margin-bottom: calc((15/1280)*100vw);
    }
}

@media (max-width: 1023px) {
    .nav-list {
        display: none;
    }
}


.nav-list li {
    padding: 10px 12px;
    border-right: 1px solid #A1CBE4;
}

@media (max-width: 1280px) {
    .nav-list li {
        padding: calc((10/1280)*100vw) calc((12/1280)*100vw);
    }
}

.nav-list li a {
    color: inherit;
    text-decoration: none;
    line-height: 1.2;
    display: block;
    transition: all 0.3s;
    position: relative;
}

@media (max-width: 1280px) {
    .nav-list li a {
        font-size: max(10px, calc((16/1280)*100vw));
    }
}

.nav-list li a:after {
    transition: all 0.3s;
}

.nav-list li a:hover:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: #A1CBE4;
}

.burger {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    visibility: hidden;
}

@media (max-width: 1023px) {
    .burger {
        position: relative;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        visibility: visible;
        width: 60px;
        height: 40px;
    }

    .burger .burger-line {
        width: 55px;
        height: 8px;
        background-color: #005D95;
    }

    .burger .burger-close {
        display: none;
        visibility: hidden;
    }

    .burger.active .burger-close {
        position: absolute;
        bottom: -18px;
        left: 50%;
        width: 100%;
        color: #005D95;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        transform: translate(-50%, 100%);
        display: block;
        visibility: visible;
    }
}

@media (max-width: 767px) {
    .burger {
        width: 40px;
        height: 20px;
    }

    .burger .burger-line {
        width: 27px;
        height: 4px;
        background-color: #005D95;
    }

    .burger .burger-close {
        display: none;
        visibility: hidden;
    }

    .burger.active .burger-close {
        position: absolute;
        bottom: -18px;
        left: 50%;
        width: 100%;
        color: #005D95;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        transform: translate(-50%, 100%);
        display: block;
        visibility: visible;
    }
}

header .drawer {
    display: none;
    visibility: hidden;
}

@media (max-width: 1023px) {
    header .drawer.active {
        display: block;
        visibility: visible;
        background-color: #fff;
        overflow: auto;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 50;
    }

    header .drawer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 70px;
        height: 100%;
        margin: auto;
        padding: 0 5%;
        padding-top: 16vh;
        position: relative;
    }

    header .drawer-inner ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    header .drawer-inner li {
        transform: translate3d(0, 0, 0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width: fit-content;
        text-align: center;
    }

    header .drawer-inner li a {
        font-size: 36px;
        color: #94B9CB;
        width: fit-content;
        font-weight: 700;
        text-decoration: none;
    }
}

@media (max-width: 767px) {
    header .drawer.active {
        display: block;
        visibility: visible;
        background-color: #fff;
        overflow: auto;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 50;
    }

    header .drawer-inner {
        row-gap: 35px;
        height: 100%;
        margin: auto;
        padding: 0 5%;
        padding-top: 16vh;
    }

    header .drawer-inner li a {
        font-size: 18px;
    }
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1023px) {
    .inner {
        max-width: calc(750px + 9.2%);
        margin: 0 auto;
        padding: 0 4.6%;
    }
}

/* =================================
FV
================================= */
.fv {
    background-image: url(../images/fv.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 720px;
    position: relative;
    z-index: -1;
}

@media (max-width: 1023px) {
    .fv {
        padding-top: 100px;
        background-image: url(../images/fv-sp.png);
        height: 700px;
    }
}

@media (max-width: 767px) {
    .fv {
        padding-top: 50px;
        height: 350px;
    }
}

.fv-catch {
    position: absolute;
    width: 328px;
    top: calc(240/1280*100%);
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
    .fv-catch {
        position: absolute;
        width: calc(320/750*100vw);
        top: calc(180/700*100%);
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* @media (max-width: 1023px) {
    .fv-catch {
        position: absolute;
        width: calc(32/750*100vw);
        height: auto;
        top: calc(190/700*100%);
        transform: translate(-50%, 0%);

    }
} */

#mask,
#mask-sp {
    visibility: hidden;
}

#mask path,
#mask polyline,
#mask rect,
#mask line,
#mask-sp path,
#mask-sp polyline,
#mask-sp rect,
#mask-sp line {
    fill: none;
    stroke: #fff;
    stroke-width: 12.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 1;
}

.fv-slider {}

.fv-slider-wrapper {
    transition-timing-function: linear !important;
}


/* ==========================
共通
========================== */
.new::before {
    position: absolute;
    content: "new";
    top: 50%;
    left: 0px;
    transform: translate(-100%, -50%);
    width: 60px;
    aspect-ratio: 1/1;
    background-color: #fff;
    border: 1px solid #FF0000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #FF0000;
    text-transform: uppercase;
    z-index: 1;
}

@media (max-width: 767px) {
    .new::before {
        width: 30px;
        height: 30px;
        font-size: 10px;
        left: 22px;
    }
}


.bg-right-blue {
    background: #E7EFF2;
}

/* サムネイル部分のスタイル修正 */
.thumbnails-wrapper {
    position: relative;
    /* width: fit-content; */
    width: 660px;
    margin: auto;
}

@media (max-width: 767px) {
    .thumbnails-wrapper {
        width: 300px;
        /* max-width: 100%; */
    }
}

.thumbnails-container {
    margin: 20px auto 0;
    display: flex;
    width: fit-content;
    gap: 10px;
    position: relative;
    overflow-x: auto;
    max-width: 760px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .thumbnails-container {
        margin-top: 10px;
        gap: 5px;
        max-width: 100%;
    }
}

.slide-thumbnail {
    width: 90px;
    min-width: 90px;
    height: 90px;
    min-height: 90px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
}

@media (max-width: 767px) {
    .slide-thumbnail {
        width: 45px;
        min-width: 45px;
        height: 45px;
        min-height: 45px;
        height: auto;
    }
}

.slide-thumbnail::before {
    background-color: #000;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    opacity: .5;
    transition: all 0.3s;
}

.slide-thumbnail:hover:before {
    background: transparent;
    opacity: 1;
}

.slide-thumbnail.active:before {
    background: transparent;
    opacity: 1;
}


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

.thumbnail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    content: '';
    width: 12px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.3s;
}

@media (max-width: 767px) {
    .thumbnail-arrow {
        width: 9px;
        height: 17px;
    }
}


.thumbnail-arrow-prev {
    left: -26px;
    transition: all 0.3s;
}

@media (max-width: 767px) {
    .thumbnail-arrow-prev {
        left: -15px;
        transition: all 0.3s;
    }
}

.thumbnail-arrow-prev:hover {
    opacity: .7;
}

.thumbnail-arrow-next {
    right: -26px;
    transition: all 0.3s;
}

@media (max-width: 767px) {
    .thumbnail-arrow-next {
        right: -15px;
    }
}


.thumbnail-arrow-next:hover {
    opacity: .7;
}

/* 矢印のアイコン */
.thumbnail-arrow::before {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center/cover;
}

@media (max-width: 767px) {
    .thumbnail-arrow::before {
        width: 8px;
        height: 13px;
    }
}

.thumbnail-arrow-prev::before {
    transform: rotate(-180deg);
}

/* =================================
CM紹介
================================= */
.commercial .inner {
    padding-top: 40px;
    padding-bottom: 80px;
}

@media (max-width: 1023px) {
    .commercial .inner {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .commercial .inner {
        padding-top: 25px;
        padding-bottom: 22px;
    }
}

.commercial-bg-right-blue .inner {
    padding-top: 0;
    padding-bottom: 40px;
}

@media (max-width: 767px) {
    .commercial-bg-right-blue .inner {
        padding: 0;
    }
}

.commercial .section-ttl {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 767px) {
    .commercial .section-ttl {
        font-size: 18px;
    }
}

.commercial .lead-box .text-box {
    margin-top: 36px;
    color: #231815;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 1.85;
    text-align: center;
}

@media (max-width: 767px) {
    .commercial .lead-box .text-box {
        margin-top: 18px;
        color: #231815;
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
    }
}

.commercial .lead-box .text-box .mark {
    font-size: 10px;
    font-weight: 600;
    vertical-align: top;
}

.commercial .lead-box .text-box small {
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    line-height: 1.5;
}

.commercial section.commercial-movie {
    padding: 12px 32px 32px;
    background: linear-gradient(to right, #A1CBE4, #E3DCE4);
    border-radius: 20px;
    margin-bottom: -40px;
    text-align: center;
    position: relative;
    top: -40px;
}

@media (max-width: 1023px) {
    .commercial section.commercial-movie {
        margin-top: 80px;
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .commercial section.commercial-movie {
        margin-top: 50px;
        padding-inline: 25px;
    }
}

.commercial-movie-title-en {
    position: absolute;
    right: 0;
    top: -69px;
    z-index: -1;
}


@media (max-width: 767px) {
    .commercial-movie-title-en {
        top: -36px;
        max-width: 156px;
    }
}

.commercial-wrapper {
    max-width: 720px;
    margin: auto;
}

.commercial section.commercial-movie .section-sub-ttl {
    display: block;
    position: relative;
    font-size: 33px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 767px) {
    .commercial section.commercial-movie .section-sub-ttl {
        font-size: 16px;
        /* padding-left: 18px; */
    }
}

@media (max-width: 374px) {
    .commercial section.commercial-movie .section-sub-ttl {
        font-size: 13px;
    }
}

.commercial section.commercial-movie .section-sub-ttl.new::before {
    transform: translate(0, -50%);
}


.commercial-slide {
    padding-top: 20px;
}

@media (max-width: 767px) {
    .commercial-slide {
        padding-top: 8px;
    }
}

.commercial section.commercial-movie .commercial-items {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 40px;
}

@media (max-width: 767px) {
    .commercial section.commercial-movie .commercial-items {
        margin-top: 25px;
        row-gap: 20px;
    }
}

.commercial section.commercial-movie .commercial-items li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.commercial section.commercial-movie .commercial-items .commercial-item-grid {
    display: grid;
    width: 100%;
    column-gap: 3.7%;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
}

.commercial section.commercial-movie .commercial-items .commercial-item .thumbnail {
    width: 100%;
}

.commercial section.commercial-movie .commercial-items .commercial-item a {
    width: 100%;
    text-decoration: none;
    display: block;
}

@media (max-width: 1023px) {
    .commercial section.commercial-movie .commercial-items .commercial-item--small a {
        position: relative;
        background-color: #94B9CB;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .commercial section.commercial-movie .commercial-items .commercial-item--small a::before {
        position: absolute;
        content: '';
        display: inline-block;
        background-image: url(../images/start.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 45px;
        height: 45px;
        top: 50%;
        right: 18%;
        transform: translate(0, -50%);
    }
}

@media (max-width: 767px) {
    .commercial section.commercial-movie .commercial-items .commercial-item--small a {
        height: 40px;
    }

    .commercial section.commercial-movie .commercial-items .commercial-item--small a::before {
        width: 22px;
        height: 22px;
        right: 9%;
    }
}

@media (max-width: 1023px) {
    .commercial section.commercial-movie .commercial-items .commercial-item .button-text {
        margin-top: 0;
        width: 100%;
        color: #000;
    }
}


/* 矢印スタイル */
#container .swiper-button-next,
#container .swiper-button-prev {
    width: 46px;
    height: 46px;
    z-index: 1;
}

@media (max-width: 767px) {

    #container .swiper-button-next,
    #container .swiper-button-prev {
        width: 23px;
        height: 23px;
    }
}

#container .swiper-button-next:after,
#container .swiper-button-prev:after {
    background: url(../images/slider-arrow.svg) no-repeat center center/cover;
    content: '';
    width: 46px;
    height: 46px;
    z-index: 1;
    transition: all 0.3s;
}

@media (max-width: 767px) {

    #container .swiper-button-next:after,
    #container .swiper-button-prev:after {
        width: 23px;
        height: 23px;
    }
}

#container .swiper-button-next:hover:after,
#container .swiper-button-prev:hover:after {
    opacity: .7;
}


#container .swiper-button-prev:after {
    transform: rotate(-180deg);
}

.commercial-arrow-wrapper {
    position: relative;
}

#container .commercial-button-prev {
    left: -86px;
}

@media (max-width: 1023px) {
    #container .commercial-button-prev {
        left: -43px;
    }
}

@media (max-width: 767px) {
    #container .commercial-button-prev {
        left: -13px;
        margin-top: 0;
    }
}

#container .commercial-button-next {
    right: -86px;
}

@media (max-width: 1023px) {
    #container .commercial-button-next {
        right: -43px;
    }
}

@media (max-width: 767px) {
    #container .commercial-button-next {
        right: -13px;
        margin-top: 0;
    }
}

/* CM切り替えボタンのスタイル */
.commercial-btns {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-radius: 0 0 4px 4px;
}

@media (max-width: 767px) {
    .commercial-btns {
        border-radius: 4px;
        padding: 5px;
    }
}

.commercial-btns p {
    cursor: pointer;
    padding: 8px 15px;
    box-sizing: border-box;
    padding: 0;
    background: #fff;
    border: 2px solid #00A3D5;
    color: #00A3D5;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .commercial-btns p {
        padding: 0;
        border: 1px solid #00A3D5;
        height: 23px;
        font-size: 10px;
    }
}

.commercial-btns p.active,
.commercial-btns p:hover {
    background-color: #00A3D5;
    color: #fff;
}

.commercial-btns p.active {
    pointer-events: none;
}

.commercial section.commercial-movie .commercial-items .commercial-item img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

.commercial section.commercial-movie .commercial-items .commercial-item--kokoku {
    width: 585px;
}

@media (max-width: 767px) {
    .commercial section.commercial-movie .commercial-items .commercial-item--kokoku {
        width: 66%;
    }
}

.commercial section.commercial-movie .commercial-items .commercial-item--kokoku .thumbnail .js-moda-image-inner {
    position: relative;
}

.commercial-item--kokoku .thumbnail .js-moda-image-inner::after {
    position: absolute;
    display: inline-block;
    content: "";
    bottom: 2px;
    right: 0;
    background-image: url(../images/ico-zoom.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
}

@media (max-width: 767px) {
    .commercial-item--kokoku .thumbnail .js-moda-image-inner::after {
        width: 20px;
        height: 20px;
    }
}


@media (max-width: 767px) {
    .commercial section.commercial-movie .commercial-items .commercial-item--kokoku .thumbnail .js-moda-image-inner::after {
        bottom: 1.5px;
        right: 0;
    }
}

.commercial section.commercial-movie .commercial-item--kokoku .modal-content {
    width: fit-content;
    max-width: 60vw;
}

.commercial section.commercial-movie .commercial-item--kokoku .modal-content img {
    max-height: 90vh;
    object-fit: contain;
}

@media (max-width: 767px) {
    .commercial section.commercial-movie .commercial-item--kokoku .modal-content {
        max-width: 80vw;
    }
}

/* gif部分 */
.commercial-thumbnail {
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .gif-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        z-index: 1;
    }
}

/* モバイルでは常に非表示 */
@media (max-width: 767px) {
    .gif-overlay {
        display: none;
    }
}

/* CSSのみでのホバー効果（JavaScriptと併用） */
.commercial-thumbnail:hover .gif-overlay {
    opacity: 1;
}

/* =================================
ラジオCM
================================= */
.commercial-radio {
    padding: 32px;
    background: linear-gradient(to right, #A1CBE4, #E3DCE4);
    border-radius: 20px;
    margin-top: 10px;
    position: relative;
}

@media (max-width: 767px) {
    .commercial-radio {
        padding: 20px 25px;
    }
}

.commercial-radio-title-en {
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 767px) {
    .commercial-radio-title-en {
        max-width: 144px;
    }
}

.commercial section.commercial-radio .section-sub-ttl {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 767px) {
    .commercial section.commercial-radio .section-sub-ttl {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }
}

.radio-slider-wrapper {
    margin-top: 30px;
    position: static;
    z-index: 1;
}

@media (max-width: 767px) {
    .radio-slider-wrapper {
        margin-top: 10px;
    }
}

.commercial section.commercial-radio .radio-item .thumbnail {
    text-align: center;
}

.commercial section.commercial-radio .radio-item .thumbnail a {
    margin-left: -5px;
    width: 100%;
    max-width: 350px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .commercial section.commercial-radio .radio-item .thumbnail a {
        max-width: 165px;
        margin-left: 0;
    }
}

.commercial section.commercial-radio .radio-item .thumbnail a.new::before {
    left: -20px;
}

@media (max-width: 767px) {
    .commercial section.commercial-radio .radio-item .thumbnail a.new::before {
        left: -8px;
    }
}

.commercial section.commercial-radio .radio-item .thumbnail img {
    aspect-ratio: 350/80;
    max-width: 350px;
}

.commercial section.commercial-radio p {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .commercial section.commercial-radio p {
        margin-top: 5px;
        font-size: 10px;
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    .commercial section.commercial-radio .caution-text {
        margin-top: 10px;
    }
}


.commercial section.commercial-radio .js-modal .modal-content {
    width: 500px;
}

@media (max-width: 767px) {
    .commercial section.commercial-radio .js-modal .modal-content {
        width: 70%;
    }
}

.commercial section.commercial-radio .js-modal .modal-content audio {
    margin: 0 auto;
    max-width: 100%;
}

/* ラジオCMスライダー用スタイル */
/* スライダーのスタイル */
.radio-items.swiper {
    width: 100%;
    overflow: hidden;
}

.radio-items .swiper-wrapper {
    display: flex;
}

/* ナビゲーションエリア */
.radio-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto 0;
    width: fit-content;
}

@media (max-width: 767px) {
    .radio-slider-nav {
        margin-top: 10px;
    }
}

/* ページネーションのスタイル */
.radio-slider-nav .radio-pagination {
    text-align: center;
    position: static;
    width: fit-content;
    z-index: 1;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #00A3D5;
    opacity: 1;
}

@media (max-width: 767px) {
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }
}

#container .swiper-pagination-bullet {
    margin: 0 10px;
    transition: all 0.3s;
}

@media (max-width: 767px) {
    #container .swiper-pagination-bullet {
        margin: 0 6px;
    }
}

#container .swiper-pagination-bullet:hover {
    background-color: #00A3D5;
}

.swiper-pagination-bullet-active {
    background-color: #00A3D5;
    opacity: 1;
}


.radio-button-prev {
    left: 40px;
    margin-top: -40px;
}

@media (max-width: 767px) {
    .radio-button-prev {
        left: 16px;
        margin-top: -30px;
    }
}

.radio-button-next {
    right: 40px;
    margin-top: -40px;
}

@media (max-width: 767px) {
    .radio-button-next {
        right: 16px;
        margin-top: -30px;
    }
}

/* ナビゲーション内の左右の矢印 */
#container .radio-button-nav-prev::after,
#container .radio-button-nav-next::after {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center / cover;
}

@media (max-width: 767px) {

    #container .radio-button-nav-prev::after,
    #container .radio-button-nav-next::after {
        width: 8px;
        height: 14px;
    }
}

#container .radio-button-nav-prev {
    margin-top: -12px;
    left: -50px;
    width: 12px;
    height: 21px;
    top: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    #container .radio-button-nav-prev {
        width: 9px;
        height: 17px;
        margin-top: -9px;
        left: -10px;
    }
}

#container .radio-button-nav-next {
    margin-top: -12px;
    right: -50px;
    width: 12px;
    height: 21px;
    top: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    #container .radio-button-nav-next {
        width: 9px;
        height: 17px;
        margin-top: -9px;
        right: -18px;
    }
}

.radio-button-nav-prev::after,
.radio-button-nav-next::after {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center / cover;
}

.js-modal .modal {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
}

.js-modal .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    margin: auto;
    padding: 20px;
    border: none;
    width: fit-content;
    align-items: flex-end;
}

@media (max-width: 767px) {
    .js-modal .modal-content {
        width: 90%;
    }

    .js-modal .modal-content iframe {
        width: 100%;
        height: auto;
    }
}

.js-modal .modal-close {
    border: none;
    background: none;
    cursor: pointer;
    color: #fff;
    text-align: right;
    font-size: 28px;
    font-weight: bold;
    width: fit-content;
}

.js-modal .modal-close:hover,
.js-modal .modal-close:focus {
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
}

.banner {
    max-width: 640px;
    margin: 0 auto;
}

.banner a {
    transition: all .4s;
}

.banner a:hover {
    opacity: .7;
    transition: all .4s;
}

.bg-gradation {
    padding: 80px 0;
    background-image: url(../images/bg-gradation.jpg);
    background-position: center;
    background-size: cover;
}

@media (max-width: 767px) {
    .bg-gradation {
        padding: 20px;
    }
}

.bg-gradation section {
    max-width: 960px;
    margin: 0 auto;
    background-color: #F0F8FA;
}

@media (max-width: 1023px) {
    .bg-gradation section {
        max-width: calc(750px + 9.2%);
        margin: 0 4.2%;
        margin: 0 auto;
    }
}

.bg-gradation section .inner {
    padding: 80px 60px 95px 60px;
}

@media (max-width: 1023px) {
    .bg-gradation section .inner {
        padding: 40px 25px 55px 25px;
    }
}

@media (max-width: 767px) {
    .bg-gradation section .inner {
        padding: 20px 12px 20px 12px;
    }
}

/* タイトルの初期スタイル */
.js-clip-path {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .6s ease-out;
}

.bg-gradation section .section-gradation-ttl {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #00A3C1, transparent);
    color: #fff;
    font-size: 28px;
    padding: 5px 100px 5px 55px;
    margin-left: -60px;
}

@media (max-width: 1023px) {
    .bg-gradation section .section-gradation-ttl {
        padding: 5px 25px 5px 25px;
        margin-left: -4.2%;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .bg-gradation section .section-gradation-ttl {
        width: 58%;
        font-size: 14px;
        padding: 5px 12px 5px 12px;
        margin-left: -12px;
        margin-bottom: 0;
    }
}

.bg-gradation .tab-contents section .section-gradation-ttl {
    margin-left: -120px;
    height: 44px;
    box-sizing: border-box;
    padding-left: 80px;
}

@media (max-width: 767px) {
    .bg-gradation .tab-contents section .section-gradation-ttl {
        width: 95%;
        margin-left: -10px;
        padding-left: 12px;
        height: 22px;
    }
}

.bg-gradation .tab-contents section .section-gradation-sub-ttl {
    font-size: 26px;
}

@media (max-width: 767px) {
    .bg-gradation .tab-contents section .section-gradation-sub-ttl {
        font-size: 10px;
        height: 18px;
    }
}

.bg-gradation section .section-gradation-sub-ttl {
    margin-top: 40px;
    background: linear-gradient(90deg, #F3BBFF 12%, rgba(0, 162, 193, .3) 60%, transparent);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    padding: 8px 0 5px 20px;
    display: flex;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .bg-gradation section .section-gradation-sub-ttl {
        margin-top: 8px;
        font-size: 14px;
        padding: 0px 0 0px 10px;
        height: 22px;
    }
}

.bg-gradation section .section-gradation-sub-ttl .small-text {
    font-size: 13px;
}

@media (max-width: 767px) {
    .bg-gradation section .section-gradation-sub-ttl .small-text {
        font-size: 10px;
    }
}

.bg-gradation section .image-items-grid {
    display: grid;
    column-gap: 3.7%;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
    max-width: 664px;
    margin-inline: auto;
}

@media (max-width: 1023px) {
    .bg-gradation section .image-items-grid {
        margin-top: 23px;
    }
}

@media (max-width: 767px) {
    .bg-gradation section .image-items-grid {
        column-gap: 15px;
    }
}

.bg-gradation section .flex-box {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    column-gap: 6.5%;
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box {
        row-gap: 25px;
    }
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box {
        row-gap: 13px;
    }
}

.bg-gradation section .flex-box .text-box {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box .text-box {
        width: 100%;
    }
}

.bg-gradation section .flex-box .text-box h3 {
    margin-bottom: 13px;
    font-size: 28px;
    font-weight: 700;
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box .text-box h3 {
        font-size: 20px;
    }
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box .text-box h3 {
        margin-bottom: 8px;
    }
}

.bg-gradation section .flex-box .img-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 8px;
}

@media (max-width: 1023px) {
    .bg-gradation section .flex-box .img-box {
        flex-direction: row;
        align-items: flex-start;
        row-gap: 8px;
    }

    .bg-gradation section .flex-box ul.img-box {
        column-gap: 5px;
    }

    .bg-gradation section .flex-box ul.img-box img {
        width: 100%;
    }
}

/* =================================
グラフィック紹介
================================= */
.graphic {
    padding-top: 50px;
}

@media (max-width: 767px) {
    .graphic {
        padding-top: 45px;
    }
}

.graphic .bg-right-blue {
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .graphic .bg-right-blue {
        padding-bottom: 40px;
    }
}

.graphic-bg {
    padding: 26px 32px 50px;
    background: linear-gradient(to right, #A1CBE4, #E3DCE4);
    border-radius: 20px;
    margin-top: 80px;
    margin-bottom: -40px;
    text-align: center;
    position: relative;
    top: -40px;
}

@media (max-width: 767px) {
    .graphic-bg {
        padding: 0;
        margin-top: 65px;

    }
}

.graphic-movie-title-en {
    position: absolute;
    right: 0;
    top: -70px;
    z-index: -1;
    width: 100%;
    max-width: 426px;
}

@media (max-width: 767px) {
    .graphic-movie-title-en {
        max-width: 213px;
        top: -35px;
    }
}

@media (max-width: 767px) {
    .graphic-wrapper {
        padding-inline: 25px;
        padding-bottom: 25px;
    }
}

.graphic .section-ttl {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 767px) {
    .graphic .section-ttl {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .graphic .inner {
        padding: 0;
    }
}

.graphic .section-sub-ttl {
    margin: auto;
    display: inline-block;
    font-size: 34px;
    font-weight: 700;
    width: 380px;
    /* width: fit-content; */
    position: relative;
}

.graphic .section-sub-ttl.new::before {
    transform: translate(0, -50%);
}

@media (max-width: 767px) {
    .graphic .section-sub-ttl {
        margin-left: -10px;
        width: 100%;
        font-size: 18px;
    }

    .graphic .section-sub-ttl.new {
        margin-left: 0px;
    }
}

@media (max-width: 374px) {
    .graphic .section-sub-ttl {
        font-size: 13px;
    }
}

.graphic-arrow-wrapper {
    position: relative;
    padding: 0 40px;
    margin: 0 auto;
    max-width: 800px;
}

.graphic-slider {
    padding-top: 14px;
}

@media (max-width: 767px) {
    .graphic-slider {
        padding-top: 40px;
    }
}

/* .graphic-thumbnails{
overflow-x: auto;
} */

.graphic .thumbnail {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .graphic .thumbnail {
        margin-top: 20px;
    }
}

.graphic .js-moda-image-inner {
    max-width: 380px;
    margin: auto;
    position: relative;
}

@media (max-width: 767px) {
    .graphic .js-moda-image-inner {
        max-width: 190px;
    }
}

.graphic .thumbnails-container {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .graphic .thumbnails-container {
        margin-top: 20px;
    }
}

.graphic .js-modal-image {
    margin: 0 auto;
    width: fit-content;
    display: block;
}


/* .graphic .slide-thumbnail {
    width: 140px;
    min-width: 140px;
    height: 186px;
    min-height: 186px;
}

@media (max-width: 767px) {
    .graphic .slide-thumbnail {
        width: 56px;
        min-width: 56px;
        height: 74px;
        min-height: 74px;
    }
} */


#container .graphic .swiper-button-next,
#container .graphic .swiper-button-prev {
    top: 60%;
}

@media (max-width: 767px) {
    #container .graphic .swiper-button-next {
        right: 15px;
    }

    #container .graphic .swiper-button-prev {
        left: 15px;
    }
}

@media (max-width: 767px) {
    .graphic .thumbnail-arrow-prev {
        left: -15px;
    }

    .graphic .thumbnail-arrow-next {
        right: -15px;
    }
}

.graphic .modal-content img {
    width: 560px;
}

/* =================================
キャラクター紹介
================================= */
.character {
    position: relative;
}

.bg-gradation section.character .inner {
    padding-top: 100px;
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .bg-gradation section.character .inner {
        padding-block: 56px 18px;
        padding-inline: 20px;
    }
}

.character .character-title-en {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 518px;
}

@media (max-width: 767px) {
    .character .character-title-en {
        max-width: 258px;
    }
}

.bg-gradation .character-item+.character-item {
    margin-top: 55px;
}

@media (max-width: 767px) {
    .bg-gradation .character-item+.character-item {
        margin-top: 20px;
    }
}

.bg-gradation .character .image-items-grid {
    margin-top: 40px;
}

@media (max-width: 1023px) {
    .bg-gradation .character .image-items-grid {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .bg-gradation .character .image-items-grid {
        margin-top: 5px;
    }
}

.bg-gradation .character .text-box {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
}

@media (max-width: 767px) {
    .bg-gradation .character .text-box {
        margin-top: 12px;
        font-size: 10px;
        line-height: 2;
    }
}

.bg-gradation .character .image-items {
    margin-top: 40px;
}

@media (max-width: 1023px) {
    .bg-gradation .character .image-items {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .bg-gradation .character .image-items {
        margin-top: 10px;
    }
}

/* スライダー */
.character-arrow-wrapper {
    margin-top: 40px;
    position: relative;
}

@media (max-width: 767px) {
    .character-arrow-wrapper {
        margin-top: 20px;
    }
}

#container .character-button-prev {
    left: -23px;
}

@media (max-width: 767px) {
    #container .character-button-prev {
        left: -20px;
    }
}

#container .character-button-next {
    right: -23px;
}

@media (max-width: 767px) {
    #container .character-button-next {
        right: -20px;
    }
}

.character-slider-container {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .character-slider-container {
        margin-top: 20px;
    }
}

.character .pagination-container {
    position: relative;
}

/* ナビゲーションエリア */
.character-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto 0;
    width: fit-content;
}

@media (max-width: 767px) {
    .character-slider-nav {
        margin-top: 10px;
    }
}

.character-slider-nav .character-pagination {
    text-align: center;
    position: static;
    width: fit-content;
}

/* ナビゲーション内の左右の矢印 */
#container .character-button-nav-prev,
#container .character-button-nav-next {
    position: relative;
    width: 12px;
    height: 21px;
    cursor: pointer;
    margin: 0 15px;
}

@media (max-width: 767px) {

    #container .character-button-nav-prev,
    #container .character-button-nav-next {
        width: 9px;
        height: 17px;
        margin: 0;
    }
}

#container .character-button-nav-prev {
    left: -20px;
}

@media (max-width: 767px) {
    #container .character-button-nav-prev {
        left: -12px;
    }
}

#container .character-button-nav-next {
    right: -20px;
}

@media (max-width: 767px) {
    #container .character-button-nav-next {
        right: -12px;
    }
}

#container .character-button-nav-prev::after,
#container .character-button-nav-next::after {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center / cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {

    #container .character-button-nav-prev::after,
    #container .character-button-nav-next::after {
        width: 8px;
        height: 14px;
    }
}

#container .character-button-nav-prev::after {
    transform: translate(-50%, -50%) rotate(180deg);
}


/* =================================
ニュームスライダー紹介
================================= */
.nyumu-arrow-wrapper {
    margin-top: 40px;
    position: relative;
}

@media (max-width: 767px) {
    .nyumu-arrow-wrapper {
        margin-top: 20px;
    }
}

#container .nyumu-button-prev {
    left: -23px;
}

#container .nyumu-button-next {
    right: -23px;
}

.nyumu-slider-container {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .nyumu-slider-container {
        margin-top: 20px;
    }
}


.nyumu .pagination-container {
    position: relative;
}

/* ナビゲーションエリア */
.nyumu-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px auto 0;
    width: fit-content;
}

@media (max-width: 767px) {
    .nyumu-slider-nav {
        margin-top: 10px;
    }
}

.nyumu-slider-nav .nyumu-pagination {
    text-align: center;
    position: static;
    width: fit-content;
}

/* ナビゲーション内の左右の矢印 */
#container .nyumu-button-nav-prev,
#container .nyumu-button-nav-next {
    position: relative;
    width: 12px;
    height: 21px;
    cursor: pointer;
    margin: 0 15px;
}

@media (max-width: 767px) {

    #container .nyumu-button-nav-prev,
    #container .nyumu-button-nav-next {
        width: 9px;
        height: 17px;
        margin: 0;
    }
}

#container .nyumu-button-nav-prev::after,
#container .nyumu-button-nav-next::after {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center / cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {

    #container .nyumu-button-nav-prev::after,
    #container .nyumu-button-nav-next::after {
        width: 8px;
        height: 14px;
    }
}

#container .nyumu-button-nav-prev {
    left: -20px;
}

@media (max-width: 767px) {
    #container .nyumu-button-nav-prev {
        left: -12px;
    }
}

#container .nyumu-button-nav-next {
    right: -20px;
}

@media (max-width: 767px) {
    #container .nyumu-button-nav-next {
        right: -12px;
    }
}

#container .nyumu-button-nav-prev::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* =================================
制作スタッフ
================================= */
#container .staff {
    margin-top: 80px;
    position: relative;
}

@media (max-width: 767px) {
    #container .staff {
        margin-top: 40px;
    }
}

.staff .staff-title-en {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 264px;
}

@media (max-width: 767px) {
    .staff .staff-title-en {
        max-width: 132px;
    }
}

#container .staff .inner {
    padding-top: 100px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    #container .staff .inner {
        padding-block: 40px;
        padding-inline: 20px;
    }
}

#container .bg-gradation section.staff .section-gradation-ttl {
    margin-left: -60px;
}

@media (max-width: 767px) {
    #container .bg-gradation section.staff .section-gradation-ttl {
        margin-left: -20px;
        padding-left: 25px;
    }
}

.bg-gradation section.staff .section-gradation-sub-ttl {
    margin-top: 20px;
    height: 50px;
}

@media (max-width: 767px) {
    .bg-gradation section.staff .section-gradation-sub-ttl {
        margin-top: 15px;
        height: 32px;
    }
}

.staff ul {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    grid-auto-rows: 1fr;
}

@media (max-width: 767px) {
    .staff ul {
        margin-top: 20px;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        grid-auto-rows: initial;
    }
}

.staff li {
    background: #fff;
    width: 100%;
    box-shadow: 4px 4px 4px rgba(35, 24, 21, 0.4);
    border-radius: 10px;
}

.bg-gradation .staff h4 {
    font-size: 28px;
    margin-bottom: 13px;
}

@media (max-width: 767px) {
    .bg-gradation .staff h4 {
        font-size: 14px;
        margin-bottom: 0px;
    }
}

.bg-gradation .staff .flex-box {
    padding: 0 40px 30px;
    flex-direction: column;
}

@media (max-width: 767px) {
    .bg-gradation .staff .flex-box {
        padding: 0 10px 20px;
        gap: 0;
        margin-top: 15px;
    }
}

.bg-gradation .staff .flex-box .text-box {
    margin-top: 16px;
    padding-right: 16px;
    max-height: 192px;
    overflow-y: scroll;
    font-size: 12px;
    line-height: calc(18/12);
}

@media (max-width: 767px) {
    .bg-gradation .staff .flex-box .text-box {
        margin-top: 8px;
        font-size: 10px;
        line-height: calc(16/10);
        padding-right: 0;
    }

    .bg-gradation .staff .flex-box .text-box p {
        padding-right: 10px;
    }
}

.simplebar-track {
    background: #E1E1E1;
}

.bg-gradation .staff .flex-box .text-box {
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
}

.bg-gradation .staff .flex-box .text-box::-webkit-scrollbar {
    display: none;
}

/*　スクロールバーのツマミ部分の色を変えたい時　*/
.simplebar-scrollbar::before {
    background: #00A3D5;
    border-radius: 0;
}

/*　スクロールバーのツマミ部分の不透明度とhover時のtransitionを変えたい時　*/
.simplebar-scrollbar.simplebar-visible:before {
    opacity: 1;
    transition-duration: 0.2s;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 0;
    left: 0;
    right: 0;
}

/*　スクロールバー太さを変えたい時　*/
.simplebar-track.simplebar-vertical {
    width: 4px;
}

.bg-gradation .staff .flex-box .img-box {
    padding: 0 30px;
    margin-top: 30px;
}

@media (max-width: 767px) {
    .bg-gradation .staff .flex-box .img-box {
        padding: 0 5px;
        margin-top: 20px;
    }
}

.bg-gradation .staff .flex-box ul.img-box {
    flex-direction: row;
    padding: 0;
    gap: 0;
}

.bg-gradation .staff .flex-box ul.img-box li {
    box-shadow: none;
    border-radius: 0;
}

@media (max-width: 767px) {
    .bg-gradation section.location .section-gradation-ttl {
        width: 95%;
        margin-left: -10px;
        padding-left: 12px;
        height: 22px;
    }
}


.bg-gradation .location .location-box+.location-box {
    margin-top: 40px;
}

.bg-gradation .location .location-item {
    padding-top: 60px;
}

@media (max-width: 1023px) {
    .bg-gradation .location .location-item {
        padding-top: 0px;
    }
}

.bg-gradation .location .location-item .flex-box {
    gap: 8px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .bg-gradation .location .location-item .flex-box {
        gap: 20px;
    }
}

.bg-gradation .location .text-box {
    margin-bottom: 16px;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
}

@media (max-width: 1023px) {
    .bg-gradation .location .text-box {
        margin-top: 14px;
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.7;
    }
}

.bg-gradation .location .flex-box {
    margin-top: 0;
    margin-bottom: 120px;
}

@media (max-width: 1023px) {
    .bg-gradation .location .flex-box {
        margin-bottom: 0px;
    }
}

.bg-gradation .location .flex-box .text-box {
    font-size: 16px;
    line-height: 2;
    margin-left: -40px;
    max-width: 385px;
}

@media (max-width: 1023px) {
    .bg-gradation .location .flex-box .text-box {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .bg-gradation .location .flex-box .text-box {
        margin-top: 17px;
        font-size: 10px;
        line-height: 2;
        margin-left: 0;
    }
}

.bg-gradation .location figure {
    position: relative;
    padding-top: 55px;
    margin-top: 46px;
}

@media (max-width: 767px) {
    .bg-gradation .location figure {
        padding-top: 25px;
        margin-top: 25px;
        padding-inline: 5px;
    }
}

.bg-gradation #recycle-tab .location figure {
    margin-top: 0;
}

.bg-gradation #recycle-tab .location-item+.location-item {
    padding-top: 0;
}

.bg-gradation .location figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40px;
    margin-top: 0;
    padding: 0;
    justify-content: center;
    background: linear-gradient(to right,
            rgba(243, 187, 255, 0) 0%,
            rgba(243, 187, 255, 0.12) 0%,
            rgba(243, 187, 255, 0.3) 3%,
            rgba(243, 187, 255, 0.47) 4%,
            rgba(243, 187, 255, 0.61) 6%,
            rgba(243, 187, 255, 0.73) 8%,
            rgba(243, 187, 255, 0.83) 11%,
            rgba(243, 187, 255, 0.91) 13%,
            rgba(243, 187, 255, 0.96) 16%,
            rgba(243, 187, 255, 0.99) 20%,
            rgba(243, 187, 255, 1) 27%,
            rgba(234, 186, 252, 0.96) 33%,
            rgba(211, 183, 246, 0.87) 43%,
            rgba(173, 180, 237, 0.71) 56%,
            rgba(120, 174, 223, 0.5) 71%,
            rgba(54, 168, 206, 0.22) 87%,
            rgba(0, 163, 193, 0) 100%);
}


.bg-gradation .making .text-box {
    margin-top: 24px;
    margin-left: -40px;
    margin-right: -40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
}

@media (max-width: 1023px) {
    .bg-gradation .making .text-box {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.7;
    }
}

@media (max-width: 767px) {
    .bg-gradation .making .text-box {
        margin-top: 20px;
        margin-left: 0;
        margin-right: 0;
        font-size: 10px;
        line-height: 2;
    }
}

.bg-gradation .making .making-item {
    margin-top: 35px;

}

.bg-gradation .making .making-item-flex {
    display: flex;
    justify-content: space-between;
    column-gap: 25px;
}

@media (max-width: 1023px) {
    .bg-gradation .making .making-item-flex {
        margin-top: 0;
        flex-direction: column;
        align-items: center;
        width: 53%;
        margin: 0 auto;
    }

    .bg-gradation .making .making-item-flex figure {
        padding-top: 40px;
        max-width: 400px;
        text-align: center;
    }

    .bg-gradation .making .making-item-flex figure:first-of-type {
        padding-top: 20px;
        max-width: 400px;
        text-align: center;
    }
}

.bg-gradation .making figure {
    position: relative;
    padding-top: 45px;
}

@media (max-width: 1023px) {
    .bg-gradation .making figure {
        padding-top: 35px;
    }
}

@media (max-width: 767px) {
    .bg-gradation .making figure {
        padding-top: 20px;
    }
}


.bg-gradation .making figcaption {
    width: 100%;
    position: absolute;
    top: 0;
    height: 40px;
    justify-content: center;
    padding: 0;
    margin-top: 0;
    background: linear-gradient(to right,
            rgba(243, 187, 255, 0) 0%,
            rgba(243, 187, 255, 0.12) 0%,
            rgba(243, 187, 255, 0.3) 3%,
            rgba(243, 187, 255, 0.47) 4%,
            rgba(243, 187, 255, 0.61) 6%,
            rgba(243, 187, 255, 0.73) 8%,
            rgba(243, 187, 255, 0.83) 11%,
            rgba(243, 187, 255, 0.91) 13%,
            rgba(243, 187, 255, 0.96) 16%,
            rgba(243, 187, 255, 0.99) 20%,
            rgba(243, 187, 255, 1) 27%,
            rgba(234, 186, 252, 0.96) 33%,
            rgba(211, 183, 246, 0.87) 43%,
            rgba(173, 180, 237, 0.71) 56%,
            rgba(120, 174, 223, 0.5) 71%,
            rgba(54, 168, 206, 0.22) 87%,
            rgba(0, 163, 193, 0) 100%);
}

.bg-gradation .making .section-gradation-sub-ttl {
    height: 40px;
    justify-content: center;
    background: linear-gradient(to right,
            rgba(243, 187, 255, 0) 0%,
            rgba(243, 187, 255, 0.12) 0%,
            rgba(243, 187, 255, 0.3) 3%,
            rgba(243, 187, 255, 0.47) 4%,
            rgba(243, 187, 255, 0.61) 6%,
            rgba(243, 187, 255, 0.73) 8%,
            rgba(243, 187, 255, 0.83) 11%,
            rgba(243, 187, 255, 0.91) 13%,
            rgba(243, 187, 255, 0.96) 16%,
            rgba(243, 187, 255, 0.99) 20%,
            rgba(243, 187, 255, 1) 27%,
            rgba(234, 186, 252, 0.96) 33%,
            rgba(211, 183, 246, 0.87) 43%,
            rgba(173, 180, 237, 0.71) 56%,
            rgba(120, 174, 223, 0.5) 71%,
            rgba(54, 168, 206, 0.22) 87%,
            rgba(0, 163, 193, 0) 100%);
}

.bg-gradation .special {
    margin-top: 60px;
}

.bg-gradation .special .inner {
    padding: 80px 55px 50px 55px;
}

@media (max-width: 1023px) {
    .bg-gradation .special .inner {
        padding: 40px 25px 40px 25px;
    }
}

@media (max-width: 767px) {
    .bg-gradation .special .inner {
        padding: 20px 12px 20px 12px;
    }
}

.bg-gradation .special .text-box {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
}

@media (max-width: 767px) {
    .bg-gradation .special .text-box {
        margin-top: 20px;
        font-size: 10px;
        line-height: 1.7;
    }
}

.bg-gradation .special .section-gradation-sub-ttl {
    margin-top: 0;
}

/* =================================
タブ追加
================================= */
.bg-gradation .making .inner {
    padding-top: 0;
}

/* タブナビゲーションのスタイル */
.tabbed-sections {
    margin-top: 70px;
}

@media (max-width: 767px) {
    .tabbed-sections {
        margin-top: 35px;
    }
}

@media (max-width: 767px) {
    .tabbed-sections .inner {
        padding: 0;
    }
}

.tab-navigation {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

@media (max-width: 767px) {
    .tab-navigation {
        gap: 10px;
    }
}

.tab-button {
    padding: 12px 24px;
    height: 60px;
    border: none;
    background: #B0BBBB;
    font-size: 18px;
    border-radius: 20px 20px 0 0;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
    margin: 0 10px;
    width: 300px;
    transition: all 0.3s;
}

@media (max-width: 767px) {
    .tab-button {
        padding: 0;
        height: 35px;
        font-size: 10px;
        border-radius: 10px 10px 0 0;
        width: 100%;
        max-width: 90px;
        margin: 0;
    }
}

.tab-button:hover {
    background: #F0F8FA;
    color: #00A3D5;
}

.tab-button.active {
    background: #F0F8FA;
    color: #00A3D5;
    height: 70px;
}

@media (max-width: 767px) {
    .tab-button.active {
        height: 40px;
    }
}

/* タブコンテンツのスタイル */
.tab-contents {
    background: #F0F8FA;
    padding: 86px 60px;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .tab-contents {
        padding: 20px 10px;
    }
}

.tab-content {
    display: none;
    position: relative;
    z-index: 1;
}

.bg-gradation .tab-content .inner {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .bg-gradation .tab-content .inner {
        padding: 0;
    }
}


.tab-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom,
            #EBEBEB 0px,
            #EBEBEB 2px,
            transparent 2px,
            transparent 40px);
    z-index: 1;
}

.tab-content.active {
    display: block;
}

.tab-content .location,
.tab-content .making {
    position: relative;
    z-index: 2;
    background: transparent;
}

.tab-content .making {
    padding-top: 60px;
}

@media (max-width: 767px) {
    .tab-content .making {
        padding-top: 20px;
    }
}

#recycle-tab .making {
    margin-top: 80px;
}

@media (max-width: 767px) {
    #recycle-tab .making {
        margin-top: 40px;
    }
}

.bg-gradation .tab-content .flex-box .img-box {
    flex: auto;
    position: relative;
    /* transform: rotate(5deg); */
    height: fit-content;
    max-width: 340px;
    margin-top: -10px;
    margin-right: -15px;
}

@media (max-width: 767px) {
    .bg-gradation .tab-content .flex-box .img-box {
        max-width: 45%;
        margin-top: 30px;
        margin-right: 0;
    }
}

.bg-gradation .tab-content .flex-box .img-box::before {
    content: '';
    position: absolute;
    background: #fff;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    box-shadow: 2px 2px 2px rgba(35, 24, 21, 0.4);
    z-index: -1;
    left: -10px;
    top: -10px;
}

@media (max-width: 767px) {
    .bg-gradation .tab-content .flex-box .img-box::before {
        width: calc(100% + 10px);
        height: calc(100% + 10px);
        left: -5px;
        top: -5px;
    }
}

/* 共通スライダースタイル */
.making-mirai-slide,
.making-sustainability-slide,
.making-recycle-slide {
    height: auto;
    padding-bottom: 20px;
}

.making-mirai-slide figure,
.making-sustainability-slide figure,
.making-recycle-slide figure {
    height: 100%;
    display: flex;
    align-items: center;
}

.making-mirai-slide figure img,
.making-sustainability-slide figure img,
.making-recycle-slide figure img {
    width: auto;
    margin: auto;
}

@media (max-width: 767px) {

    .making-mirai-slide figure img,
    .making-sustainability-slide figure img,
    .making-recycle-slide figure img {
        width: 80%;
        max-width: 80%;
    }
}

.making-sustainability-arrow-wrapper,
.making-mirai-arrow-wrapper,
.location-recycle-arrow-wrapper,
.making-recycle-arrow-wrapper {
    margin-top: 40px;
    position: relative;
}

@media (max-width: 767px) {

    .making-sustainability-arrow-wrapper,
    .making-mirai-arrow-wrapper,
    .location-recycle-arrow-wrapper,
    .making-recycle-arrow-wrapper {
        margin-top: 20px;
    }
}

#container .making-sustainability-button-prev,
#container .making-mirai-button-prev,
#container .location-recycle-button-prev,
#container .making-recycle-button-prev {
    left: -45px;
    margin-top: 0;
}

@media (max-width: 767px) {

    #container .making-sustainability-button-prev,
    #container .making-mirai-button-prev,
    #container .location-recycle-button-prev,
    #container .making-recycle-button-prev {
        left: 0px;
    }
}

#container .location-recycle-button-prev {
    margin-top: -20px;
}

@media (max-width: 767px) {
    #container .location-recycle-button-prev {
        margin-top: -30px;
        left: -8px;
    }
}

#container .making-sustainability-button-next,
#container .making-mirai-button-next,
#container .location-recycle-button-next,
#container .making-recycle-button-next {
    right: -35px;
    margin-top: 0;
}

@media (max-width: 767px) {

    #container .making-sustainability-button-next,
    #container .making-mirai-button-next,
    #container .location-recycle-button-next,
    #container .making-recycle-button-next {
        right: 0px;
    }
}

#container .location-recycle-button-next {
    margin-top: -20px;
}

@media (max-width: 767px) {
    #container .location-recycle-button-next {
        margin-top: -30px;
        right: -8px;
    }
}


.making-mirai-slider-container,
.making-sustainability-slider-container,
.location-recycle-slider-container,
.making-recycle-slider-container {
    margin-top: 40px;
}

@media (max-width: 767px) {

    .making-mirai-slider-container,
    .making-sustainability-slider-container,
    .location-recycle-slider-container,
    .making-recycle-slider-container {
        margin-top: 20px;
    }
}

.tabbed-sections .pagination-container {
    position: relative;
}

/* ナビゲーションエリア */
.making-mirai-slider-nav,
.making-sustainability-slider-nav,
.location-recycle-slider-nav,
.making-recycle-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px auto 0;
    width: fit-content;
}

@media (max-width: 767px) {

    .making-mirai-slider-nav,
    .making-sustainability-slider-nav,
    .location-recycle-slider-nav,
    .making-recycle-slider-nav {
        margin-top: 0px;
    }
}

.location-recycle-slider-nav {
    margin-top: 30px;
}

@media (max-width: 767px) {
    .location-recycle-slider-nav {
        margin-top: 15px;
    }
}

.making-mirai-slider-nav .making-mirai-pagination,
.making-sustainability-slider-nav .making-sustainability-pagination,
.location-recycle-slider-nav .location-recycle-pagination,
.making-recycle-slider-nav .making-recycle-pagination {
    text-align: center;
    position: static;
    width: fit-content;
}

/* ナビゲーション内の左右の矢印 */
#container .making-mirai-button-nav-prev,
#container .making-mirai-button-nav-next,
#container .making-sustainability-button-nav-prev,
#container .making-sustainability-button-nav-next,
#container .location-recycle-button-nav-prev,
#container .location-recycle-button-nav-next,
#container .making-recycle-button-nav-prev,
#container .making-recycle-button-nav-next {
    position: relative;
    width: 12px;
    height: 21px;
    cursor: pointer;
    margin: 0 15px;
}

@media (max-width: 767px) {

    #container .making-mirai-button-nav-prev,
    #container .making-mirai-button-nav-next,
    #container .making-sustainability-button-nav-prev,
    #container .making-sustainability-button-nav-next,
    #container .location-recycle-button-nav-prev,
    #container .location-recycle-button-nav-next,
    #container .making-recycle-button-nav-prev,
    #container .making-recycle-button-nav-next {
        width: 9px;
        height: 17px;
        margin: 0;
    }

    #container .making-mirai-button-nav-prev,
    #container .making-sustainability-button-nav-prev,
    #container .location-recycle-button-nav-prev,
    #container .making-recycle-button-nav-prev {
        left: -12px;
    }

    #container .making-mirai-button-nav-next,
    #container .making-sustainability-button-nav-prev,
    #container .location-recycle-button-nav-next,
    #container .making-recycle-button-nav-next {
        right: -12px;
    }
}

#container .making-sustainability-button-nav-prev,
#container .location-recycle-button-nav-prev,
#container .making-recycle-button-nav-prev {
    left: -20px;
}

@media (max-width: 767px) {

    #container .making-sustainability-button-nav-prev,
    #container .location-recycle-button-nav-prev,
    #container .making-recycle-button-nav-prev {
        left: -10px;
    }
}

#container .making-sustainability-button-nav-next,
#container .location-recycle-button-nav-next,
#container .making-recycle-button-nav-next {
    right: -20px;
}

@media (max-width: 767px) {

    #container .making-sustainability-button-nav-next,
    #container .location-recycle-button-nav-next,
    #container .making-recycle-button-nav-next {
        right: -10px;
    }
}

#container .making-sustainability-button-nav-prev::after,
#container .making-sustainability-button-nav-next::after,
#container .making-mirai-button-nav-prev::after,
#container .making-mirai-button-nav-next::after,
#container .location-recycle-button-nav-prev::after,
#container .location-recycle-button-nav-next::after,
#container .making-recycle-button-nav-prev::after,
#container .making-recycle-button-nav-next::after {
    content: '';
    width: 12px;
    height: 21px;
    background: url(../images/slider-thumnail-arrow.svg) no-repeat center center / cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {

    #container .making-sustainability-button-nav-prev::after,
    #container .making-sustainability-button-nav-next::after,
    #container .making-mirai-button-nav-prev::after,
    #container .making-mirai-button-nav-next::after,
    #container .location-recycle-button-nav-prev::after,
    #container .location-recycle-button-nav-next::after,
    #container .making-recycle-button-nav-prev::after,
    #container .making-recycle-button-nav-next::after {
        width: 8px;
        height: 14px;
    }
}

#container .making-sustainability-button-nav-prev::after,
#container .making-mirai-button-nav-prev::after,
#container .location-recycle-button-nav-prev::after,
#container .making-recycle-button-nav-prev::after {
    transform: translate(-50%, -50%) rotate(180deg);
}


.bg-gradation #recycle-tab .location .location-recycle-slide-wrapper .text-box {
    font-size: 12px;
    max-width: 664px;
    margin: auto;
    margin-top: 10px;
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .bg-gradation #recycle-tab .location .location-recycle-slide-wrapper .text-box {
        font-size: 10px;
        line-height: 1.5;
        margin-top: 5px;
        max-width: 95%;
    }
}

.bg-gradation section .making-movie-ttl {
    margin-top: 100px;
}

@media (max-width: 1023px) {
    .bg-gradation section .making-movie-ttl {
        margin-top: 30px;
    }
}

/* =================================
WEB限定ボイス
================================= */
.special {
    background: #E7EFF2;
}


.special .inner {
    padding-block: 80px;
}

@media (max-width: 1023px) {
    .special .inner {
        padding-block: 40px;
    }
}

.special-wrapper {
    position: relative;
    background: #FFFFFF;
    padding: 108px 50px 60px;
}

@media (max-width: 1023px) {
    .special-wrapper {
        padding-top: 70px;
        padding-bottom: 20px;
        padding-inline: 15px;
    }
}

.special .special-title-en {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 414px;
}

@media (max-width: 767px) {
    .special .special-title-en {
        max-width: 207px;
    }
}

.special .voice-box {
    margin-top: 40px;
    background: linear-gradient(to right, rgba(161, 203, 228, 0.4), rgba(227, 220, 228, 0.4));
    position: relative;
    border-radius: 20px;
    height: 500px;
}

@media (max-width: 767px) {
    .special .voice-box {
        margin-top: 20px;
        height: 310px;
    }
}

.special-hukidashi {
    max-width: 130px;
    display: flex;
    top: -48px;
    left: 58px;
    position: absolute;
}

@media (max-width: 1023px) {
    .special-hukidashi {
        max-width: 65px;
        top: 36px;
        left: 20px;
    }
}

.special-ttl {
    position: absolute;
    top: -74px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    width: 100%;
    margin-left: 8px;
}

@media (max-width: 767px) {
    .special-ttl {
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 76.19%;
        margin-left: 0;
    }
}

.special .voice-box .text-box {
    padding-top: 64px;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 767px) {
    .special .voice-box .text-box {
        display: none;
    }
}

.special .img-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0px auto;
    text-align: center;
}

@media (max-width: 767px) {
    .special .img-wrapper {
        padding: 20px 0;
        width: 100%;
    }
}

.special .voice-btn {
    background-color: transparent;
    border: none;
    position: absolute;
    transition: all .2s;
    padding: 0;
}

@media (max-width: 1023px) {
    .special .voice-btn {
        transition: all .2s;
    }
}

.special .voice-btn.active {
    transform: translate(5px, 5px);
    transition: all .2s;
}

@media (max-width: 1023px) {
    .special .voice-btn.active {
        transform: translate(2px, 2px);
        transition: all .2s;
    }
}

#js-voice-btn1 {
    max-width: 358px;
    left: 10px;
    top: 90px;
}

@media (max-width: 767px) {
    #js-voice-btn1 {
        max-width: 179px;
        left: auto;
        right: 50px;
        top: 20px;
    }
}

#js-voice-btn2 {
    max-width: 228px;
    left: 54%;
    transform: translateX(-50%);
    bottom: -16px;
}

@media (max-width: 767px) {
    #js-voice-btn2 {
        max-width: 114px;
        left: 20px;
        transform: initial;
        bottom: 40px;
    }
}

#js-voice-btn2.active {
    transform: translate(calc(-50% + 5px), 5px);
}

@media (max-width: 1023px) {
    #js-voice-btn2.active {
        transform: translate(2px, 2px);
    }
}

#js-voice-btn3 {
    max-width: 246px;
    right: 60px;
    top: 104px;
}

@media (max-width: 767px) {
    #js-voice-btn3 {
        max-width: 123px;
        right: 36px;
        top: auto;
        bottom: 20px;
    }
}


.special .caution-text {
    font-size: 14px;
}

@media (max-width: 767px) {
    .special .caution-text {
        margin-top: 10px;
        font-size: 10px;
    }
}

.caution-text {
    margin-top: 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 1023px) {
    .caution-text {
        font-size: 11px;
    }
}

footer {
    background-image: url(../images/footer-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 20px 36px 20px;
    position: relative;
}

@media (max-width: 1023px) {
    footer .footer-inner {
        padding: 40px 20px 18px 20px;
    }
}

@media (max-width: 767px) {
    footer .footer-inner {
        padding: 20px 20px 9px 20px;
    }
}

footer .to-top {
    position: absolute;
    right: 80px;
    top: -50px;
    width: 100px;
    height: 100px;
    background: #00A3D5;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 767px) {
    footer .to-top {
        right: 20px;
        top: -30px;
        width: 50px;
        height: 50px;
        font-size: 10px;
    }
}

.bg-gradation .tab-content .flex-box .img-box footer .sns-ttl {
    font-size: 36px;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 1023px) {
    footer .sns-ttl {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    footer .sns-ttl {
        font-size: 18px;
    }
}

footer .sns-list {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 25px;
}

@media (max-width: 767px) {
    footer .sns-list {
        column-gap: 15px;
    }
}

footer .sns-list li {
    width: 78px;
    height: 78px;
}

@media (max-width: 767px) {
    footer .sns-list li {
        width: 50px;
        height: 50px;
    }
}

footer .sns-list li a {
    display: block;
    width: 100%;
    height: 100%;
}

footer .sns-list li a img {
    transition: all .5s;
}

footer .sns-list li a:hover img {
    opacity: .7;
    transition: all .5s;
}

footer .copyright {
    margin-top: 110px;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 767px) {
    footer .copyright {
        margin-top: 35px;
        color: #000;
        font-size: 12px;
    }
}

footer .copyright span {
    display: block;
}