.site-main{
    overflow: hidden;
}

/* メインビジュアル */
/* WordPress実装時にbackground-imageは管理画面からの画像出力になるので、html側に記述を移植する */
.hero{
    display: flex;
    position: relative;
    /* aspect-ratio: 375/600; */
    align-items: center;
    justify-content: center;
}
.hero__logo-title{
    width: 120rem;
    z-index: 1;
}
.hero__logo-image{
    display: block;
    width: 100%;
    color: var(--color-snow);
}
.hero__slideshow{
    /* aspect-ratio: 375/600; */
    width: 100%;
    height: 100%;
    position: absolute;
}

@media screen and (min-width: 768px) {
    .hero{
        /* aspect-ratio: 1440/800; */
    }
    .hero__logo-title{
        width: 12.5%;
        max-width: 180rem;
    }
    .hero__slideshow{
        /* aspect-ratio: 1440/800; */
    }

}

/* about */

.about {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    padding: 80rem 20rem 40rem;
}
.about__label{
    font-weight: 400;
    margin: 0;
    font-family: var(--font-family-en-primary);
}
.about__content{
    flex-grow: 1;
}
.about__title {
    margin-bottom: 25rem;
}
.about__description{
    margin: 0;
}
.about__btn-wrapper{
    margin: 50rem 0 0;
}

@media screen and (min-width: 768px) {
    .about {
        flex-direction: row;
        gap: 170rem;
        padding: 120rem 20rem 65rem;
    }
    .about__title {
        margin-bottom: 40rem;
    }
    .about__basic-link{
        margin-top: 70rem;
    }
}
@media screen and (min-width: 960px) {
    .about {
        gap: 325rem;
    }

}
@media screen and (min-width: 1440px) {
    .about {
        aspect-ratio:auto;
    }
}



/* business */
/* 近浦: 申し送り事項1
フォントサイズの体系的な定義（メディアクエリに応じた）を今後見直す必要があります */

/* 近浦: 申し送り事項2
メディアクエリは 768〜968まではタブレット縦、968〜1280まではタブレット横、小さめのPC、1280以上は14インチ以上のPCを想定しています */

.business{
    padding: 40rem 0 40rem;
}
.business__heading-group{
    margin-bottom: 30rem;
}
.business__label{
    font-family: var(--font-family-en-tertiary);
    margin: 0 0 10rem;
}
.business__image-wrapper{
    width: 264rem;
    height: 358rem;
    margin-left: auto;
    margin-top: -130rem;
    position: relative;
    right: -20rem;
}

.business__image{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 40rem;

}
.business__container{
    margin-right: 20rem;
}
.business__panel{
    padding: 60rem 20rem 190rem 20rem;
    border-radius: 0 40rem 0 0;
    background-color: var(--color-mint);
}
.business__title{
    margin: 0;
    letter-spacing: 0;
}
.business__text{
    letter-spacing: 0.8rem;
    margin-block: 0;
    margin: 0;
}
.business__link{
    font-size: 12rem;
    color: var(--color-birch);
    font-weight: 500;
    line-height: 16rem;
    padding: 16rem 18rem;
    border-radius: 32rem;
    text-decoration: none;
    font-family: "Space Grotesk";
}
.business__link::after{
    background-image: url(../../img/icons/arrow_right_iconly_pro-white.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12rem;
    height: 12rem;
    display: block;
    flex-shrink: 0;
}
.business__btn-wrapper{
    margin: 30rem 0 0;
}
@media screen and (min-width: 768px) {
    .business{
        padding: 65rem 0 80rem;
    }
    .business__heading-group{
        margin-bottom: 40rem;
    }
    .business__container{
        margin-right: calc((100vw - 83.3vw) / 2) ;
    }
    .business__panel{
        padding: 90rem  105rem 150rem calc((100vw - 83.3vw) / 2);
    }
    .business__image-wrapper{
        width: 320rem;
        left: 0;
        height: fit-content;
        margin-right: 105rem;
        margin-top: calc(-40.7vw + 180rem);
    }

}

@media screen and (min-width: 968px) {
    .business__message{
        width: 370rem;
    }
    .business__image-wrapper{
        width: 350rem;
        margin-top: calc(-40.7vw + 120rem);
    }
}
@media screen and (min-width: 1280px) {
    .business__container{
        margin-right: calc((100vw - var(--fixed-content-width)) / 2) ;
    }
    .business__panel{
        padding: 140rem 105rem 140rem  calc((100vw - var(--fixed-content-width)) / 2);
    }
    .business__image-wrapper{
        width: 472rem;
        margin-top: -500rem;
    }
    .business__btn-wrapper{
        margin: 50rem 0 0;
    }
    .business__message{
        width: 600rem;
    }
}





/* magazine */
.magazine{
    padding: 40rem 0;
    max-width: 1440rem;
    margin: 0 auto;
    overflow: hidden;
}
.magazine__list-wrapper{
    max-width: 1440rem;
    margin: 0 auto;
}
.magazine__content{
    padding: 0 20rem 0;
    margin: 0 auto 40rem;
}
.magazine__title{
    margin: 0 0 30rem 0;
    text-align: center;
    line-height: 125%;
    font-family: var(--font-family-en-tertiary);
}
.magazine__description{
    margin: 0;
    text-align: center;
}
.magazine__list{
    display: inline-flex;
    gap: 20rem;
    padding: 0 20rem;
}
.magazine__card{
    text-decoration: none;
    position: relative;
}
.magazine__card-image{
    width: 100%;
    height: 305rem;
    object-fit: cover;
    display: block;
}
.magazine__card-meta{
    font-size: 40rem;
    color: var(--color-birch);
    font-weight: 700;
    margin: 0;
    position: absolute;
    bottom: 142rem ;
    left: 20rem;
    margin-block: 0;
    font-family: "Space Grotesk";
}
.magazine__card-meta-part{
    font-size: 16rem;
    color: var(--color-birch);
    font-weight: 700;
    display: block;
    font-family: "Space Grotesk";
}
.magazine__card-title{
    margin: 0;
    background-color:var(--color-snow);
    padding: 22rem 0 24rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap:20rem ;
    flex-direction: column;
    margin-block: 0;
} 
.magazine__card-title::after{
    content: "";
    background-image: url(../../img/icons/icon-back.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 24rem;
    height:12rem;
    display: block;
    flex-shrink: 0;
}
.magazine__nav-button{
    display: block;
    margin: 30rem 20rem 0 auto;
}

.magazine__arrow-wrapper{
    display: none;
}
.magazine__btn-wrapper{
    text-align: center;
    margin-top: 40rem;
}

@media screen and (min-width: 768px) {
    .magazine{
        padding: 65rem 0 75rem;
    }
    .magazine__btn-wrapper{
        margin-top: 60rem;
    }
    .magazine__list{
        gap: 48rem;
    }
    .magazine__title{
        margin-bottom: 40rem;
    }
    .magazine__card-image{
        height: 368rem;
    }
    .magazine__card-meta{
        bottom: 0;
        top: 267rem;
        left: 30rem;
        font-size: 60rem;
        height: fit-content;
    }
    .magazine__card-meta-part{
        font-size: 20rem;
    }
    .magazine__card-title{
        padding: 25rem 0 28rem;
        row-gap: 30rem;
    } 
    .magazine__arrow-wrapper{
        position: absolute;
        top: 395rem;
        right: 95rem;
        z-index: 1;
        display: block;
    }
    .magazine__button-wrapper{
        margin-top: 53rem ;
    }

}

/* brands */

.brands{
    padding: 40rem 0 50rem;
}
.brands__container{
    margin-left: 20rem;

}
.brands__panel{
    padding: 50rem 20rem 100rem ;
    border-radius: 40rem 0 0 0;
    background-color: var(--color-oat);
}
.brands__heading-group{
    margin-bottom: 30rem;
}
.brands__label{
    margin: 0 0 10rem;
    font-family:var(--font-family-en-tertiary) ;
}
.brands__title{
    margin-bottom: 0;
}
.brands__description{
    margin-bottom: 0;
}
.brands__image-wrapper{
    width: 335rem;
    height: 230rem;
    margin-right: auto;
    margin-top: -50rem;
    position: relative;
    left:-20rem;
}
.brands__list-wrapper{
    overflow: scroll;
    width: 100vw;
    margin-left: -20rem;
}
.brands__image{
    width: 100%;
    display: block;
    object-fit: cover;
    height: 100%;
    border-radius: 42rem;
}
.brands__btn-wrapper{
    margin: 30rem 0 0;
}
.brands-pc-none{
    display: flex;
}
.brands-sp-none{
    display: none;
}
.brands__slide{
    transition:opacity 0.5s ease-in-out;
}
.brands__slide-image{
    width: 100%;
    display: block;
    object-fit: cover;
    height: 100%;
    border-radius: 40rem;
}



@media screen and (min-width: 768px) {
    .brands{
        padding: 75rem 0 80rem;
    }
    .brands__container{
        margin-left: calc((100vw - 83.3vw) / 2);
    }
    .brands__heading-group{
        margin-bottom: 60rem;
    }
    .brands__image-wrapper{
        max-width: 784rem;
        width: 50%;
        left: 0;
        height: fit-content;
        margin-left:auto;
        margin-right: calc((100vw - 83.3vw) / 2) ;
        margin-top: calc(-40.7vw + 200rem);
    }
    .brands__panel{
        padding: 90rem calc((100vw - 83.3vw) / 2) 150rem calc((100vw - 83.3vw) / 2);
    }
    .brands__button-wrapper{
        margin: 40rem 0 0;
    }
    .brands__all-link{
        padding: 1.11vw 1.38vw;
        border-radius: 2.22vw;
        font-size: 0.833vw;
    }
    .brands__list-wrapper{
        margin-left: calc(50% - 50vw); 
    }
    .brands__btn-wrapper{
        margin-top: 40rem;
    }
}

@media screen and (min-width: 968px) {
    .brands__details{
        width: 530rem;
        margin-right: auto;    
    }
    .brands__image-wrapper{
        max-width: 784rem;
        width: 50%;
        margin-top: -148rem;
    }
}

@media screen and (min-width: 1280px) {
    .brands-pc-none{
        display: none;
    }
    .brands-sp-none{
        display: flex;
    }
    .brands__container{
        margin-left: calc((100vw - var(--fixed-content-width)) / 2);
    }
    .brands__panel{
        padding: 100rem calc((100vw - var(--fixed-content-width)) / 2) 165rem 105rem;    
    }
    .brands__details{
        width: 264rem;
    }
    .brands__image-wrapper{
        width: 784rem;
        margin-top: -393rem;
        margin-left: 415rem;
        margin-right: calc((100vw - var(--fixed-content-width)) / 2);
    }
}

/* support-athletes */

.support-athletes{
    padding: 50rem 0 ;
}
.support-athletes__container{
    padding: 60rem 20rem;
    background-image:url(../../img/front-page/support-athletes/support-athletes-main_sara-takanashi-sp.jpg) ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 560rem;
    width: 375rem;
    position: relative;
}
.support-athletes__slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}
.support-athletes__header-text{
    z-index: 2;
    position: relative;
}
.support-athletes__heading-group{
    margin-bottom: 30rem;
}
.support-athletes__label{
    color: var(--color-snow);
    margin: 0 0 10rem;
    font-family: var(--font-family-en-tertiary);
}
.support-athletes__title{
    margin: 0 ;
    letter-spacing: 0;
    color: var(--color-snow);
}
.support-athletes__description{
    color: var(--color-snow);
    margin-bottom: 0;
}
.support-athletes__list-wrapper{
    overflow: scroll;
    width: 100vw;
    margin-right: -20rem;
}
.support-athletes__btn-wrapper{
    margin-top: 30rem;
}
.support-athletes-pc-none{
    display: flex;
}
.support-athletes-sp-none{
    display: none;
}
.support-athletes__slide{
    /* アニメーションのスピード等は個々のスライダーで調整も可能です。 */
    transition:opacity 0.5s ease-in-out;
}
.support-athletes__slide-image{
    width: 100%;
    display: block;
    object-fit: cover;
    height: 100%;
    border-radius: 40rem;
}



@media screen and (min-width: 768px) {
    .support-athletes{
        padding: 80rem 0 80rem;
    }
    .support-athletes__btn-wrapper{
        margin-top: 70rem;
        text-align: center;
    }
    .support-athletes__container{
        background-image:url(../../img/front-page/support-athletes/support-athletes-main_sara_takanashi-pc.jpg) ;
        width: 100%;
        height: auto;
        padding: 200rem 20rem;
    }
    .support-athletes__heading-group{
        margin-bottom: 60rem;
    }
    .support-athletes__title{
        text-align: center;
    }
    .support-athletes__label{
        text-align: center;
        margin-bottom: 20rem;
    }
    .support-athletes__description{
        text-align: center;
    }
    .support-athletes__button-wrapper{
        margin: 40rem 0 0;
    }
    .support-athletes__list-wrapper{
        margin-right: calc(50% - 50vw); 
    }
}

@media screen and (min-width: 1280px) {
    .support-athletes-pc-none{
        display: none;
    }
    .support-athletes-sp-none{
        display: flex;
    }
}



/* news */

.news{
    padding: 50rem 20rem 80rem;
}
.news__header{
    display: flex;  
    flex-direction: column;
    gap: 30rem;
}
.news__title{
    text-align: center;
    margin-bottom: 0;
    font-family: var(--font-family-en-tertiary);
}
.news__list{
    padding: 0;
    margin-block: 0;
}
.news__item{
    border-top:1rem solid var(--color-fogstone);
}
.news__item:last-of-type{
    border-bottom:1rem solid var(--color-fogstone);
}
.news__link{
    padding: 30rem 0;
    display: block;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36rem;
}
.news__meta{
    margin: 0;
    display: flex;
    gap: 10rem;
}
.news__content{
    display: flex;
    gap: 10rem;
    flex-direction: column;
}
.news__date{
    margin: 0;
    line-height: 20rem;
    letter-spacing: normal;
}
.news__body{
    display: flex;
    color: var(--color-raven);
}
.news__category{
    color: var(--color-ocean-haze);
    font-family:var(--font-family-en-primary);
    margin:0;
    line-height: 20rem;
}
.news__new-badge{
    color: var(--color-terracotta);
    font-family: var(--font-family-en-secondary);
    margin: 0;
}
.news__new-badge--active{
    display: block;
}
.news__article-title{
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4rem;
    margin: 0;
    transition: 1s all ease;
}
.news__read-more-text{
    display: none;
}
.news__link::after{
    content: "";
    background-image: url(../../img/icons/icon-arrow-right-black.svg);
    background-size: 100% 100%;
    width: 18rem;
    height:8rem;
    flex-shrink: 0;
}
.news__link:hover .news__article-title{
    text-decoration: none;
    color: var(--color-forest);
}
.pc-none{
    display: block;
}
.sp-none{
    display: none;
}
.news__title-text{
    font-weight: 600;
}
.news__btn-wrapper-sp{
    margin-top: 40rem;
    text-align: center;
}
.news__btn-wrapper{
    margin-top: 40rem;
}
@media screen and (min-width: 768px) {
    .pc-none{
        display: none;
    }

    .sp-none{
        display: flex;
    }
    .news{
        padding: 80rem 20rem 130rem;
    }
    .news__header{
        flex-direction: row;
        justify-content: space-between;
        gap: 152rem;
    }
    .news__title{
        text-align: left;
        margin-bottom: 0;
    }
    .news__content{
        flex-direction: row;
        gap: 76rem;
    }
    .news__body{
        gap: 20rem;
        flex-direction: column;
    }
    .news__meta{
        gap: 12rem;
        margin: 0;
        flex-direction: column;
    }
    .news__new-badge{
        font-style: normal;
    }
    .news__link{
        padding: 40rem 0 40rem;
    }
    .news__link::after{
        display: none;
    }
    .news__read-more-text::after{
        content: "";
        background-image: url(../../img/icons/icon-arrow-right-black.svg);
        background-size: 100% 100%;
        width: 18rem;
        height:8rem;
        flex-shrink: 0;
    }
    .news__read-more-text{
        font-size: var(--font-size-sm);
        color: var(--color-raven);
        font-family:var(--font-family-en-tertiary);
        font-weight: 500;
        font-style: normal;
        line-height: 20rem;
        display: flex;
        align-items: center;
        gap: 10rem;
    }
    .news__button-wrapper{
        min-width: 8.33vw;
        width: 100%;
        margin: 40rem 0 0;
    }
}

@media screen and (min-width: 960px) {
    .news__link{
        gap: 120rem;
    }
}



/* 以下近浦追記 */
/* -------------------------------------------
    メインビジュアルを動かす追加クラス
------------------------------------------- */

/* 設定：ここだけで動きを調整 */
:root {
  --breath-duration: 20s;  /* 1サイクルの時間（拡大→縮小で1セット） */
  --breath-scale: 1.25;    /* 最大拡大率 */
}

.effect-breath-zoom {
    /* 常にGPUレイヤーを確保し、カクつきを防ぐ */
    will-change: transform;
    /* 読み込まれた瞬間から無限ループ開始 */
    animation: breathLoop var(--breath-duration) ease-in-out infinite alternate;
}

/* アニメーション定義 */
@keyframes breathLoop {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(var(--breath-scale));
    }
}

/* -------------------------------------------
    機械的な動きに見えないようにランダム化
------------------------------------------- */

/* 偶数番目の親要素(li)の中にある画像は、動きを「逆（縮小から）」にする */
li:nth-child(even) .effect-breath-zoom {
    animation-direction: alternate-reverse;
}

/* 3の倍数の親要素の中にある画像は、時間を少しずらす */
li:nth-child(3n) .effect-breath-zoom {
    animation-duration: calc(var(--breath-duration) * 1.2); /* 少しゆっくりに */
}

/* -------------------------------------------
    レイアウト補正用クラス
------------------------------------------- */

/* 1. 親要素(li)用: はみ出し防止と領域確保 */
.u-slide-mask {
    width: 100% !important;
    height: 100% !important; /* 親コンテナの高さに強制一致 */
    overflow: hidden !important; /* 拡大してもはみ出させない */
    position: absolute; /* モジュールの指定と重複しても安全なように */
    top: 0;
    left: 0;
}

/* 2. pictureタグ対策: インライン要素による隙間を排除 */
.u-slide-mask picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* 3. 画像(img)用: どんなサイズでも隙間なく埋める */
.u-img-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

.top-main-visual-slideshow{
    height: 100%;
}
.hero{
    height: 100vh;
}

/* スライダー */
.business__topics-nav-button{
    display: block;
    margin-left: auto;
    margin-right: 20rem;
}
.glide__track{
    position: relative;
    left: 20rem;
}
.glide__controlers--top-magazine{
    margin-top: 30px;
}