@charset "utf-8";
/*===========================
top
===========================*/
/* about.work.btn */

.circle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.circle {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 1px solid var(--primary-black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.arrow {
    font-family: "Noto Serif JP";
    font-size: 1.8rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.label {
    font-size: 1.6rem;
}

/* ボタン・ホバーアニメーション */
/* 丸が塗りつぶされる */
.circle-btn:hover .circle {
    background: var(--primary-black);
}

/* 矢印が右に動いて白くなる */
.circle-btn:hover .arrow {
    transform: translateX(4px);
    color: var(--primary-white);
}

/* フェード */
.js-fade {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 2s ease, transform 2s ease;
}
/* 見えたら発動 */
.js-fade.is-visible {
    opacity: 1;
    transform: scale(1);
}


/* common pc */
@media screen and (min-width: 769px){
.circle-btn {
    gap: 15px;
}

.circle {
    width: 60px;
    height: 60px;
}

.arrow {
    font-size: 2.4rem;
}

.label {
    font-size: 2.2rem;
    white-space: nowrap;
}

}/* pc 769px */

/* サークルボタン　ipad */
@media screen and (min-width:769px) and (max-width:960px) {
    .circle-btn {
        gap: 12px;
    }

    .circle {
        width: 47px;
        height: 47px;
    }

    .arrow {
        font-size: 1.8rem;
        font-weight: 500;
    }

    .label {
        font-size: 1.8rem;
        font-weight: 500;
    }
}
/* ipad */

/*===========================
main
===========================*/
/* article__header */
.article__header {
    position: relative;
    height: 100svh;
    overflow: hidden;
}

.mainImg-slider > div {
    position: absolute;              
    top: 0;                          
    left: 0;                         
    width: 100%;                     
    height: 100%;                    
    background-size: cover;          
    background-position: center;     
    opacity: 0;                      
    transition: opacity 2.5s ease;   
    will-change: transform, opacity; 
}
/* 画像ズーム */
.mainImg-slider > div.active {
    opacity: 1;                               /* 不透明にして表示 */
    animation: kenburns 10s ease-out forwards; /* ケンバーンズエフェクト：ゆっくりズームイン（8秒） */
}

@keyframes kenburns {
    from { transform: scale(1);}    /* アニメーション開始：等倍（ズームなし） */
    to {transform: scale(1.1);} /* アニメーション終了：5%だけ拡大 */
}

.slider01 {
    background-image: url('../images/mainImg-sp1.jpg'); /* 1枚目のスライド背景画像 */
}
.slider02 {
    background-image: url('../images/mainImg-sp2.jpg'); /* 1枚目のスライド背景画像 */
}
.slider03 {
    background-image: url('../images/mainImg-sp3.jpg'); /* 1枚目のスライド背景画像 */
}
.slider04 {
    background-image: url('../images/mainImg-sp4.jpg'); /* 1枚目のスライド背景画像 */
}

.article__header_text {
    position: absolute;
    top: 32%;
    right: 35%;
    z-index: 10;
}

.mainTitle {
    color: var(--primary-white);
    font-size: 2.5rem;
    font-weight: 600;
    writing-mode: vertical-rl;
    letter-spacing: 0.3em;
    line-height: 2;
    text-shadow:0 1px 3px rgba(0, 0, 0, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.25);
}

/* article__header pc */
@media screen and (min-width: 769px) {
    .article__header {
        height: 100svh;
    }

    .slider01 {
        background-image: url('../images/mainImg1.jpg'); /* 1枚目のスライド背景画像 */
    }
    .slider02 {
        background-image: url('../images/mainImg2.jpg'); /* 1枚目のスライド背景画像 */
    }
    .slider03 {
        background-image: url('../images/mainImg3.jpg'); /* 1枚目のスライド背景画像 */
    }
    .slider04 {
        background-image: url('../images/mainImg.jpg'); /* 1枚目のスライド背景画像 */
    }

    .article__header_text {
        right: 20%;  
        top: 30%;       
    }
    
    .mainTitle {
        font-size: 2.6vw;
        line-height: 2;
    }
}/* pc 769px */

/* article__header　ipad */
@media screen and (min-width:769px) and (max-width:960px) {
    .mainTitle {
        font-size: 3.5vw;
    }
}/* 769px-960px */

/* about */
.section--about {
    margin-top: 90px;
}

.title-about,
.sub__title-about {
    margin-left: 13%;
}

.about__contents {
    margin-top: 30px;
}

.about-img {
    width: 65%;              
    margin-left: 16%;
}

.about-img img {
    display: block;
    width: 100%;
    aspect-ratio: 244 / 310;
    object-fit: cover;
    border-radius: 4px;
}

.about_text {
    margin: 40px 0 80px 16%;
}

.about_text-name {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.about_text-ttl {
    font-size: 1.4rem;
    line-height: 1.8; 
    letter-spacing: 0.05em;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* about pc */
@media screen and (min-width: 769px) {
    .section--about {
        display: flex;
        width: 75%;
        margin: 180px auto 184px;
        padding: 0;
    }

    .title-about,
    .sub__title-about {
        margin-left: 0;
    }

    .about-header {
        width: 24vw;       
        max-width: 350px;  
        flex-shrink: 0;
        margin-top: 10px;
    }


    .about__contents {
        display: flex;
        align-items: flex-end;
        margin:0 auto;
        gap: 6vw;
    }

    .about-img {
        width: auto;
        height: auto;
        margin-left: 3vw;
        flex-shrink: 0;
        max-width: 23vw; 
    }

    .about-img img {
        aspect-ratio: 333 / 423;
    }

    .about_text {
        margin: 0;
        flex-shrink: 0;
        width: 23vw;
        max-width: 336px;
        box-sizing: border-box;
    }

    .about_text-name {
        font-size: 2.8rem;
        line-height: 1.34; 
        letter-spacing: 0.1em;
    }

    .about_text-ttl {
        font-size: 1.6rem;
        letter-spacing: 0.1em;
        margin-top: 34px;
        margin-bottom: 46px;
    }
}/* pc 769px */

/* about ipad */
@media screen and (min-width:769px) and (max-width:960px) {
    .section--about {
        margin: 120px auto 124px;
    }

    .about_text-name {
        font-size: 2rem;
    }

    .about_text-ttl {
        font-size: 1.4rem;
        line-height: 1.7; 
        letter-spacing: 0.05em;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}/* 769px-960px */

/* work */
.section--work {
    background-color: var(--primary-gray);
    padding: 70px 0;
}

.work-contents {
    margin-left: 8%;
    display: flex;
    align-items: center;
    gap: 4vw;
}

.work-text {
    flex-shrink: 0; /* テキスト列が縮まないように固定 */
}

.circle-btn-work {
    margin-top: 30px;
}

.works-arrows {
    display: flex;
    margin-top: 28px;
    gap: 30px;
    align-items: center;
}

.works-prev span,
.works-next span {
    font-size: 2.7rem;
}
/* ホバー */
.works-prev:hover span,
.works-next:hover span {
    opacity: 0.5;
}

/* スライダー */
.works-slider {
    min-width: 0;
    overflow: hidden;
}

.slick-list {
    overflow: hidden;
}

.works-slide {
    text-align: left;
    line-height: 0;
}

/* 内側：画像枠でズームを切り抜く */
.works-slide-inner {
    display: block; /* aタグをブロック化 */
    overflow: hidden;
}

.works-slide img {
    display: block;
    margin: 0;
    width: 55vw;
    aspect-ratio: 198 / 209;
    border-radius: 4px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.works-slide:hover img {
    transform: scale(1.08); /* ホバーでズーム */
}

/* work pc */
@media screen and (min-width: 769px) {
    .section--work {
        padding: 196px 0;
    }

    .work-contents {
        margin-left: 11%;
        gap: 6vw;
    }

    .work-text {
        width: 191px;
    }

    .circle-btn-work {
        margin-top: 54px;
    }

    .works-arrows {
        margin-top: 45px;
        gap: 35px;
    }
    
    .works-prev span,
    .works-next span {
        font-size: 4rem;
    }

    /* スライダー pc */
    .works-slide {
        padding:10px;
    }

    .works-slide img {
        width: 100%;
        aspect-ratio: 300 / 317;
    }

}/* pc 769px */

/* work ipad */
@media screen and (min-width:769px) and (max-width:960px) {
    .section--work {
        padding: 120px 0;
    }

    .work-contents {
        gap: 5vw;
    }

    .circle-btn-work {
        margin-top: 30px;
    }

    .works-arrows {
        margin-top: 27px;
        gap: 20px;
    }

    .works-slide {
        padding:6px;
    }


}/* ipad 769-960px */

/* stockists */
.section--stockists {
    background-color: #FFFCF5;
    padding: 70px 8% 90px;
}

.stockists-contents {
    display: flex;          
    flex-direction: column;
}

.stockists__img1 {
    width: 84vw;
    order: 1;
}

.stockists__img1 img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: 4px;
}

.stockists-wrap {
    margin-top: 34px;
    order: 2;
}

.stockists__img2 {
    width: 37vw;
    margin-left: auto;
    order: 3;
}

.stockists__img2 img {
    display: block;
    width: 100%;
    border-radius: 4px;
}

/* stockists画像を順番に表示 */
.stockists__img2.js-fade {
    transition-delay: 0.5s; /* 1枚目より0.5秒遅れて開始 */
}

.stockists-logo {
    margin-top: 10px;
    width: 35vw;
}

.stockists-logo img {
    display: block;
    width: 100%;
    aspect-ratio: 30 /17;
    object-fit: cover;
}

.shopAddress p,
.mapLink {
    font-size: 1.4rem;
    line-height: 1.6; 
    letter-spacing: 0.1em;
}

.stockists-text {
    margin-top: 25px;
}

.stockists-text p {
    font-size: 1.4rem;
    line-height: 1.6; 
    letter-spacing: 0.1em;
}

.stockists-text a {
    display: flex;
    margin-top: 30px;
    align-items: center;
}

.stockists-sns {
    font-family: "Noto Serif JP";
    font-size: 1.2rem;
    font-weight: 500;
}

.stockists-snsLogo {
    width: 25px;
    height: auto;
    margin-left: 6px;
}

/* stockists pc */
@media screen and (min-width: 769px) {
    .section--stockists {
        padding: 176px 0 196px;
    }

    .stockists-contents {
        width: 80%;
        margin: 0 auto;
        justify-content: space-around;
        display: flex;          
        flex-direction: row;
        align-items: flex-end;
    }

    .stockists__img1 {
        width: 25vw;
    }

    .stockists__img2 {
        width: 18.33vw;
        margin-left: 2vw;
        order: 2;
    }

    .stockists-wrap {
        margin-top: 0;
        margin-left: 6vw;
        order: 3;
    }

    .stockists-logo {
        margin-top: 28px;
        width: 13vw;
    }

    .shopAddress p,
    .mapLink {
        font-size: 1.6rem;
        line-height: 1.8; 
    }

    .stockists-text a {
        margin-top: 40px;
    }

    .stockists-text p {
        font-size: 1.6rem;
        line-height: 1.8; 
    }

    .stockists-sns {
        font-size: 1.4rem;
        font-weight: 500;
    }

    .stockists-snsLogo {
        margin-left: 10px;
    }
}/* pc 769px */

/* stockists ipad  */
@media screen and (min-width: 769px) and (max-width: 960px) {
    .section--stockists {
        padding: 120px 0 126px;
    }

    .stockists-contents {
        width: 90%;            
        align-items: center;  
        gap: 3vw;
    }

    .stockists__img1 {
        width: 30vw;           
    }

    .stockists__img2 {
        width: 23vw;          
        margin-left: 0;        
    }

    .stockists-wrap {
        margin-left: 3vw;      
    }

    /* 文字を少し小さく（折り返し改善） */
    .stockists-text p,
    .shopAddress p,
    .mapLink {
        font-size: 1.4rem;
        line-height: 1.7;
    }
}/* ipad 769-960px */

/* パララックス */
.parallax-section {
    position: relative;
    height: 60vw;
    overflow: hidden;
}

.parallax-img {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-image: url('../images/top_slider.jpg');
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* パララックス　pc */
@media screen and (min-width: 769px) {
    .parallax-section {
        height: 40vw;
    }
}/* pc 769px */

/* Atelier News */
.section--news {
    padding: 90px 8% 70px;
}

.instagramList {
    margin: 30px auto 0;
    width: 315px;
    position: relative;
    z-index: 1; /* 中身のz-indexを閉じ込めてローディングの下に保つ */
}

/* Atelier News pc */
@media screen and (min-width: 769px) {
    .section--news {
        padding: 196px 0 190px;
    }

    .news-contents {
        display: flex;
        width: 78%;
        margin: 0 auto;
        align-items: center;
    }

    .instagramList {
        margin-left: 11vw;
        width: 100%;
    }
}/* pc 769px */

/* Atelier News ipad */
@media screen and (min-width:769px) and (max-width:960px) {
    .section--news {
        padding: 126px 0 120px;
    }
}