@charset "UTF-8";
/* ===================================
header & main slider
==================================== */
header {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

header.scrolled {
    background-color: rgba(7, 2, 2, 0.3);
}

.main__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
}

/* div.slideとvideo.slide共通のスタイル */
.main__slider .slide {
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 3s ease;
    z-index: 0;
}

.main__slider .slide.active {
    opacity: 1 !important;
    z-index: 1 !important;
}

/* div.slide内の画像 - 基本スタイル */
.main__slider .slide img {
    position: absolute; 
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* video.slideのスタイル */
.main__slider video.slide {
    object-fit: cover;
    display: block;
}

/* PC用画像はPCで表示、スマホで非表示 */
.main__slider .slide .slide__img-pc {
    display: block;
}

.main__slider .slide .slide__img-sp {
    display: none;
}

/* スマホ・タブレットでは逆にする */
@media screen and (max-width: 768px) {
    .main__slider .slide .slide__img-pc {
        display: none !important;
    }
    
    .main__slider .slide .slide__img-sp {
        display: block !important;
    }

    /* GPU加速を有効化 */
    .main__slider .slide {
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: opacity;
    }

    /* ヘッダーのtransitionを軽くする */
    header.scrolled {
        transition: background-color 0.2s ease;
    }
    
    /* スクロール時の再描画を最適化 */
    .main__slider {
        transform: translateZ(0);
    }
}

/* メインタイトル */
.main__title {
    position: absolute;
    writing-mode: vertical-rl;
    top: 50%;
    left: 100px; 
    transform: translateY(-50%);
    color: #FFF;
    font-size: clamp(3.6rem, 2.5vw, 5.4rem); 
    font-family: "Kaisei Tokumin", serif;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.2;
    z-index: 10;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    padding-bottom: 40px;
}

.line1,
.line2 {
    display: block;
    white-space: nowrap;
}

.line1 {
    margin-top: -6em;
}

.line2 {
    margin-top: 3em;
    margin-right: 2vw;
}

/* スクロールダウン */
.scroll_down {
    position: absolute;
    bottom: 0; 
    left: 4%;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll_down a {
    position: absolute;
    left: 10px;
    bottom: 87px;
    color: #FFF;
    font-size: 14px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    writing-mode: vertical-lr;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FFF;
    animation: circlemove 1.6s ease-in-out infinite,
               cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
    0% { bottom: 160px; }
    100% { bottom: 0px; }
}

@keyframes cirlemovehide {
    0% { opacity: 0; }
    50% { opacity: 1; }
    80% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* スマホ・タブレット用：丸を下から上に動かす */
@media screen and (max-width: 1024px) {
    .scroll_down:before {
        animation: circlemove-mobile 1.6s ease-in-out infinite,
                   cirlemovehide-mobile 1.6s ease-out infinite;
    }
    
    @keyframes circlemove-mobile {
        0% { bottom: 0px; }
        100% { bottom: 160px; }
    }
    
    @keyframes cirlemovehide-mobile {
        0% { opacity: 0; }
        50% { opacity: 1; }
        80% { opacity: 0.9; }
        100% { opacity: 0; }
    }
}

.scroll_down:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: 160px;
    background: #fff;
}

/* レスポンシブ調整 */
@media screen and (min-width: 1441px) {
    .main__title {
        font-size: 5.2rem;
        left: 120px; 
    }
}

/* 1440px幅のノートPC向け */
@media screen and (max-width: 1440px) and (max-height: 900px) {
    .main__title {
        top: 50%;
        font-size: 3rem;
        left: 60px; 
    }
    
    .scroll_down {
        bottom: 0;
    }

    .scroll_down:after {
        height: 120px;
    }

    @keyframes circlemove {
        0% { bottom: 120px; }
        100% { bottom: 0px; }
    }

    .scroll_down a {
        font-size: 1.2rem;
        bottom: 64px;
    }
}

/* さらに小さいノートパソコン */
@media screen and (max-width: 1366px) and (max-height: 768px) {
    .main__title {
        top: 40%;
        font-size: 3rem;
        left: 50px; 
    }
    
    .scroll_down {
        bottom: 10px;
        font-size: 0.85rem;
    }
    
    .main__slider .slide img {
        object-position: center 40%;
    }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main__title {
        padding-bottom: 80px;
        left: 60px;
    }
}

/* 375px以下のスマホ */
@media screen and (max-width: 374px) {
    .main__title {
        font-size: 2.4rem;
        left: 40px;
        padding-top: 30px;
    }
}

/* ===================================
whitespace
==================================== */
.section--whitespace {
    background-color: var(--offwhite);
    padding-bottom: 90px;
}

.whitespace__img1 {
    display: flex;
    justify-content: center; 
    margin: 0 5.3% 89px;
}

.whitespace__img1 img {
    width: 100%;
    max-width: 661px;
    height: auto;
}

.spbr {
    display: none;
}

.whitespace__top {
    display: flex;
    align-items: center;
    max-width: 1440px; 
    margin: 0 auto 80px; 
    justify-content: space-between;
    padding: 0 20px;
}

.whitespace__img2 {
    justify-content: flex-end;
    display: flex;
    flex-shrink: 1;
    min-width: 0;
    flex: 1;
}

.whitespace__img2 img {
    width: 100%; 
    max-width: clamp(315px, 90vw, 748px);  
    height: auto;
}

.whitespace__txt2 {
    text-align: left;
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: 500;
    width: 100%; 
    max-width: 513px;
    flex-shrink: 0;
    margin-left: clamp(0px, 5vw, 100px);
    margin-right: clamp(0px, 5vw, 116px);
}

.whitespace__txt2 p {
  margin-bottom: 56px; 
}

.whitespace__middle {
    display: flex;
    margin-top: 50px;
    max-width: 1440px; 
    align-items: center;
    gap: 273px;
    margin: 0 auto;
}

.whitespace__img3 {
    overflow: hidden;
    width: 100%;
    max-width: 367px;
    min-width: 295px;
    height: auto;
    margin-left: 171px;
}

.whitespace__txt3 {
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    max-width: 380px;
    flex-shrink: 0;
}

.whitespace__txt3 p {
    margin-bottom: 56px; 
}

.whitespace__row {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px; 
    gap: 40px;
    margin: 0 auto;
    margin-top: 36px;
}

.whitespace__column1,
.whitespace__column2 {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whitespace__column1 {
    margin-top: 132px;
}

.whitespace__img4,
.whitespace__img5 {
    height: auto;
    display: block;
    margin-bottom: 48px;
}

.whitespace__img4 {
    width: clamp(375px, 90vw, 651px);
}

.whitespace__img5 {
    width: clamp(250px, 90vw, 402px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin-left: 100px;
}

.whitespace__txt5 {
    text-align: right;
    font-family: "Shippori Mincho", serif;
    font-size: 1.8rem;
    font-weight: 500;
}
 
.spbr {
  display: none;
}

/* whitespace sp・タブレット　*/
@media screen and (max-width: 1024px) {
  .spbr {
    display: inline;
  }

  .pcbr {
    display: none;
  }

  .section--whitespace {
    padding-bottom: 60px;
  }

  .section__topic--whitespace .section__topic--line1 {
    display: inline-block;
    transform: translateX(-1.5em);
  }
  
  .section__topic--whitespace .section__topic--line2 {
    display: inline-block;
    transform: translateX(1em);
  }

  .whitespace__img1 {
    margin-bottom: 50px;
  }

  .whitespace__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    padding: 0;
  }
  
  .whitespace__txt2 {
    padding: 0 16px;
    margin-bottom: 24px;
    line-height: 2.3;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .whitespace__txt2 p {
    margin-bottom: 0;
  }

  .whitespace__img2 {
    display: flex;
    justify-content: flex-end;
    margin-left: 60px;
  }     

  .whitespace__img2 img {
    max-width: 100%;
    width: 100%;
    height: auto;
  } 
             
  .whitespace__middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }

  .whitespace__img3 {
    justify-content: flex-start;
    margin-left: 0;
    display: block;
  }

  .whitespace__img3 img {
    max-width: 295px;
  }

  .whitespace__txt3 {
    text-align: left;
    line-height: 2.3;
    margin-left: 72px;
  }

  .whitespace__txt3 p {
    margin-bottom: 0;
  }

  .whitespace__row {
    flex-direction: column;
    gap: 0;
  }

  .whitespace__column2 {
    order: 1;
  } 

  .whitespace__column1 {
    order: 2; 
    margin-top: 40px;
  }

  .whitespace__img5 {
    margin-left: 125px;
    max-width: 250px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .whitespace__txt5 {
    text-align: left;
    line-height: 2.3;
    margin-left: 70px;
  }

  .whitespace__img4 {
    max-width: 100%;
    object-fit: contain;
  }
}

/* whitespace タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .whitespace__middle {
        gap: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    } 

    .whitespace__txt2 {
        margin-left: 180px;
    }

    .whitespace__img3 {
        flex: 0 0 320px;
        margin-left: 0;
    }
     
    .whitespace__txt3 {
        flex: 1;
        max-width: 100%;
        margin-left: 40px;
        padding-top: 90px;
    } 
    
    .whitespace__column2 {
        margin-left: 200px;
    }
} 

/* 375px以下のスマホ */
@media screen and (max-width: 374px) {
    .whitespace__img3 img {
        width: 240px;
    }

    .whitespace__txt2,
    .whitespace__txt3,
    .whitespace__txt5 {
        font-size: 1.6rem;
    }

    .whitespace__txt3 {
        margin-left: 34px;
    }

    .whitespace__txt5 {
        margin-left: 0;
    }

    .whitespace__img5 {
        margin-left: 70px; 
    }
}

/* ===================================
marche
==================================== */
.section--marche {
    background-color: var(--lightgray)
}

.marche__block {
    padding-bottom: 90px;
}

.marche__txt {
    text-align: center;
    font-family: "Hina Mincho", serif;
    font-size: 1.6rem;
    margin-bottom: 80px;
}

.marche__txt p {
    margin-bottom: 40px;
} 

.marche__slider {
    overflow: hidden;
}

.marche__track {
    display: flex;
    white-space: nowrap;
    animation: slide 52s linear infinite;
    will-change: transform;
}

.marche__item {
    flex-shrink: 0;
    width: 440px;
    height:290px;
    margin-right: 0;
}

.marche__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-6160px);
    }
}

/* marche sp タブレット共通　*/
@media screen and (max-width: 1024px) {
    .marche__txt {
        text-align: left;
        line-height: 1.8;
        padding: 0 2.8%;
        margin-bottom: 36px;
    }

    @keyframes slide-sp {
        0% { transform: translateX(0); }
        100% { transform: translateX(-3920px); } /* ← スマホ用に調整 */
    }

    .marche__track {
        animation: slide-sp 52s linear infinite;
    }

    .marche__item {
        width: 280px;
        height: 180px;
    }

    .marche__block {
        padding-bottom: 60px;
    }
}

/* ===================================
花と古道具
=====================================*/
.antique__block {
    background-color: var(--mossgreen);
    padding-bottom: 90px     ;
}

.section__subtopic {
    color: #FFF;
    font-family: "Kaisei Decol", serif;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: normal;
    padding: 60px 0;
    background-image: url(../images/antique_img_8.webp);
    opacity:0.6;
    background-position: center;
    background-size: cover;
}

.antique__txt {
    color:var(--offwhite);
    font-family: "Hina Mincho", serif;
    font-size: 1.6rem;
    text-align: left;
    max-width: 860px;
    margin: 0 auto;
    padding: 80px 3% 50px;
}

.antique__txt p {
    margin-bottom: 40px;
}

.english {
    font-family: "Kaisei Opti", serif;
}

.antique__slider {
    overflow: hidden;
}

.antique__track {
    display: flex;
    white-space: nowrap;
    animation: slide 52s linear infinite;
    will-change: transform;
}

.antique__item {
    flex-shrink: 0;
    width: 440px;
    height:290px;
    margin-right: 0;
}

.antique__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.instagram-link {
    margin-top: 20px;
}

.instagram-link a {
    color: #edbd90;
    font-family: "Kotta One", serif; 
    text-decoration: none;
    transition: color 0.3s ease;
}

.instagram-link a:hover {
    color: #eb6715;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-6160px);
    }
} 

/* 花と古道具 sp・タブレット共通　*/
@media screen and (max-width: 1024px) {
    .section__subtopic {
        font-size: 2.2rem;
        padding: 24px 0;
    }

    .antique__txt {
        line-height: 1.8;
        padding: 36px 2.8% 0;
    }

    .antique__block {
        padding-bottom: 60px;
    } 

    @keyframes slide-sp {
        0% { transform: translateX(0); }
        100% { transform: translateX(-3920px); } /* ← スマホ用に調整 */
    }

    .antique__track {
        animation: slide-sp 52s linear infinite;
    }

    .antique__item {
        width: 280px;
        height: 180px;
    }
}

/* 花と古道具　タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .section__subtopic {
        padding: 38px 0;
    }
}
/* ===================================
arrangement
=====================================*/
.section--arrangement {
    background-color: var(--lightgray);
    padding-bottom: 90px;
}

.arrangement__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.arrangement__grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.arrangement__txt {
    font-family: "Hina Mincho", serif;
    font-size: 1.6rem;
    padding: 80px 0 40px;
}

.arrangement__txt p {
    margin-bottom: 40px;
}

.btn--arrangement {
    --btn-bg-color: var(--graige);
    --btn-text-color: var(--offwhite);
    --btn-line-color: var(--offwhite);
    --btn-arrow-default-img: url(../images/white_arrow.png);
    --btn-arrow-hover-img: url(../images/white_arrow.png);
}

.btn--arrangement .btn__arrow {
    background-image: var(--btn-arrow-default-img); 
    transition: transform 0.6s ease-in-out; 
}

.btn--arrangement:hover {
    background-color: var(--deepblue);
} 

.btn--arrangement:hover .btn__arrow {
    transform: translateX(8px); 
}

.instagram-link {
    color: #a50261;
    transition: color 0.3s ease;
}

.instagram-link:hover {
    color: #e7128f;
}

/* arrangement sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .section--arrangement {
        padding-bottom: 60px;
    }

    .arrangement__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 0 6.6%;
    }

    .arrangement__txt{
        text-align: left;
        line-height: 1.8;
        padding: 36px 2.8% 0;
    }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .arrangement__grid {
        gap: 45px;
        padding: 0 5.8%;
    }
}

/* ===================================
workshop
=====================================*/
.section--workshop {
    background-color: var(--graige);
    padding-bottom: 90px;
}

.workshop__img {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    gap: 56px;
    width: clamp(280px, 90vw, 461px);
}

.workshop__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.workshop__txt {
    color: var(--offwhite, #FFFAF6);
    font-family: "Hina Mincho", serif;
    font-size: 1.6rem;
    padding: 80px 0 40px;
}

.workshop__txt p {
    margin-bottom: 40px;
}

.btn--workshop {
    --btn-bg-color: var(--lightgray);
    --btn-line-color:var(--brown);
    --btn-arrow-default-img: url(../images/brown_arrow.png);
    --btn-arrow-hover-img: url(../images/white_arrow.png);
}

.btn--workshop .btn__arrow {
    background-image: var(--btn-arrow-default-img); /* 茶色の画像を適用 */
}

.btn--workshop:hover {
    background-color: var(--mossgreen);
    --btn-text-color: var(--offwhite);
    --btn-line-color: var(--offwhite);
}

.btn--workshop:hover .btn__arrow {
    background-image: var(--btn-arrow-hover-img); /* 白い画像に差し替え */
    transform: translateX(8px);
}

/* workshop スマホ専用 */
@media screen and (max-width: 767px) {

}

/* workshop sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .section--workshop {
        padding-bottom: 60px;
    }

    .workshop__img {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin: 0 auto;
    }

    .workshop__txt {
        text-align: left;
        line-height: 1.8;
        padding: 36px 2.8% 0;
    }
}
/* workshop タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .workshop__img {
        display: flex;
        flex-direction: row;
        width: clamp(341px, 90vw, 100%); 
        padding: 0 24px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .workshop__img img {
        width: clamp(341px, 45vw, 100%); 
        max-width: none;
        height: auto;
        display: block;
        object-fit: cover;
        flex-shrink: 0;
    }
}

/* ===================================
お正月飾り
=====================================*/
.section--newyearworkshop {
    background-image: url(../images/washi.jpg); 
    padding: 120px 0;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.workshop__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.workshop__img-wrapper {
    flex: 0 0 580px;
    height: 580px;
    position: relative;
    z-index: 3;
}

/* 青い和紙 */
.workshop__img-decoration {
    position: absolute;
    width: 580px;      
    height: 580px;
    top: 25px;    
    right: -25px;  
    width: 100%;
    height: 100%;
    background-image: url(../images/washi_5.webp); 
    background-size: cover;
    z-index: 1;  
}

.newyearworkshop__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
    z-index: 2; /* ★最前面 */
}

.workshop__content {
    flex: 0 0 715px;
    margin-left: -100px;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 2;
}

/* 和柄背景 */
.workshop__circle-pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-54%, -50%); /* 円の位置を微調整 */
    width: 727px;
    height: 727px;
    background-image: url(../images/wagara.png); /* 和柄の画像 */
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    opacity: 0.15;  
    z-index: 1;
}

/* その上に重なるテキスト和紙エリア */
.workshop__washi-area {
    position: relative;
    z-index: 2;
    background-image: url(../images/washi_2.webp); 
    padding: 20px 80px 20px 140px;
    width: 100%; 
    min-height: 328px;
    display: flex;
    align-items: center;
    background-size: cover;
}

.newyearworkshop__txt {
    font-family: "Shippori Mincho", serif;
    color: var(--darkbrown);
    font-size: 1.6rem;
    font-weight: 600;
    text-align: left;
    padding-left: 48px;
}

/* 金箔の調整（背景画像として散らす場合） */
.workshop__gold-leaf::before,
.workshop__gold-leaf::after {
    content: "";
    position: absolute;
    width: 281px; 
    height: 353px;
    background-image: url(../images/kinpaku.png); 
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; 
}

.workshop__gold-leaf::before {
    top: -5%;
    right: -10%;
}

.workshop__gold-leaf::after {
    bottom: -50%;
    right: 6%;
    transform: rotate(50deg); 
}

/* アニメーション（パソコン・スマホ共通） */
/* 1. テキスト和紙：右から左へ */
.workshop__content {
    opacity: 0;
    transform: translateX(50px);
}

.workshop__content.animate {
    animation: slideFromRight 0.8s ease-out forwards;
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 2. 青い和紙：下から上へ */
.workshop__img-decoration {
    opacity: 0;
    transform: translateY(50px);
}

.workshop__img-decoration.animate {
    animation: slideFromBottom 0.8s ease-out 0.5s forwards;
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. 画像：バウンドしながら登場 */
.workshop__img-wrapper {
    animation: none;
}

.newyearworkshop__img {
    opacity: 0;
    transform: scale(0.8) rotateY(10deg);
}

.newyearworkshop__img.animate {
    animation: bounceZoom 1s ease-out 1.2s forwards;
}

@keyframes bounceZoom {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateY(10deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) rotateY(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* お正月飾りsp */
@media screen and (max-width: 1024px) {
    /* 1. 全体のコンテナ設定 */
    .section--newyearworkshop {
        padding: 60px 0 40px;
    }
    .workshop__inner {
        flex-direction: column-reverse; 
        max-width: 450px;
        padding: 0; 
        margin: 0 auto;
    } 

    /* 2. 和紙エリア（上側） */
    .workshop__content {
        flex: 0 0 auto; 
        width: 100%;
        margin: 0;
        z-index: 2;
    }

    .workshop__washi-area {
        width: 92%;
        text-align: left;
        padding: 32px 20px; 
        min-height: auto; 
        display: block;      
        margin: 0 auto 40px;
    }

    .newyearworkshop__txt {
        text-align: left !important; 
        font-size: 1.6rem;
        display: block; 
        padding-left: 0; 
    } 

    /* 3. 画像エリア（下側・和紙に少し重なる） */
    .workshop__img-wrapper {
        flex: 0 0 auto;
        width: 90%;          
        max-width: 450px; 
        height: auto;    
        margin-left: 0;
        position: relative;
        margin: 0 0 45px 0;
        aspect-ratio: 1 / 1;
    }

    .newyearworkshop__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    } 

    /* 青い和紙の装飾（画像の下） */
    .workshop__img-decoration {
        width: 100%; 
        height: 100%;
        top: 20px;
        right: -20px;
        z-index: -1;
    } 

    /* 4. その他調整 */
    .workshop__circle-pattern {
        display: none;
    }

    /* 金箔をスマホサイズで散らす */
    .workshop__gold-leaf::before {
        width: 270px;
        height: 320px;
        top: 40%;
        right: 6%;
        transform: rotate(65deg);
    }
    .workshop__gold-leaf::after {
        display: none;
    } 
}

    /* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .workshop__inner {
        max-width: 768px; 
        flex-direction: column-reverse;
    }

    .workshop__washi-area {
        max-width: 680px;
        width: 70%;
        margin: 0 auto 40px;
    }

    .workshop__img-wrapper {
        flex: 0 0 auto; 
        width: 520px;
        max-width: 90%;
        height: auto;
        aspect-ratio: 1 / 1; 
        margin: 0 auto 60px;
        position: relative;
    }

    .workshop__img-decoration {
        width: 100%;
        height: 100%;
        top: 25px;
        right: -25px;
        position: absolute;
        z-index: -1;
    }

    .newyearworkshop__img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        display: block;
    }

    .newyearworkshop__txt {
        padding-left: 90px;
    }

    .workshop__gold-leaf::before {
        right: -20%;
        top: -30%;
    }

    .workshop__gold-leaf::after {
        display: block;
        bottom: -80%;
        left: -40%;
        transform: rotate(10deg)
    }

    .workshop__circle-pattern {
        display: block;
        width: 680px;
        height: 680px;
        transform: rotate(90deg);
        top: -30px;
        left: 45px;
    }   
}


/* 375px以下のスマホ */
@media screen and (max-width: 374px) {
   .workshop__washi-area {
        width: 100%;
        font-size: 1.5rem;
   } 
}
    



/* ===================================
news
=====================================*/
.section--news {
    background-color: var(--offwhite);
    padding-bottom: 90px;

}

.news__txt {
    font-family: "Kaisei Tokumin", serif;
    font-size: 2.5rem;
    font-weight: 400;
    background-color: rgba(194, 171, 171, 0.40);
    width: 100%;
    max-width: 516px;
    height: auto;
    margin: 0 auto;
    padding: 23px 32px;
    position: relative;
}

.news__txt::before,
.news__txt::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--brown);
}

.news__txt::before {
    top: 9px;
}

.news__txt::after {
    bottom: 9px;
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
}

.news__grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.btn--instagram {
    --btn-bg-color: var(--graige);
    --btn-text-color: var(--offwhite);
    --btn-line-color: var(--offwhite);
    --btn-arrow-default-img: url(../images/white_arrow.png);
    --btn-arrow-hover-img: url(../images/white_arrow.png);
    --btn-icon-img: url(../images/instagram_icon.png);
    font-family: "Kaisei Opti", serif;
    font-size: 2.2rem;
}

.btn--instagram .btn__arrow {
    background-image: var(--btn-arrow-default-img); 
    transition: transform 0.6s ease-in-out; 
}

.btn--instagram:hover {
    background-color: var(--brown);
} 

.btn--instagram:hover .btn__arrow {
    transform: translateX(8px); 
}

.btn__icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn--instagram .btn__icon--instagram {
    background-image: var(--btn-icon-img);
}

/* news sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .news__txt {
        font-size: 2rem;
        line-height: normal;
    }

    .news__grid {
        gap: 20px;
        padding: 36px 5.7%;
    }
    .news__grid img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .section--news {
        padding-bottom: 60px;
    }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .news__grid {
        gap: 45px;
        padding: 60px 5.8%;
    }
}

/* ===================================
postcard
=====================================*/
.section--postcard {
    background-color: var(--cream);
}

.postcard__title {
    position: relative;
    display: inline-block;
    margin: 90px 0;
}

.postcard__img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.postcard__instagram {
    margin-top: 15px;
    font-size: 1.6rem;
}

.section--postcard .postcard__instagram a {
    font-family: "Kotta One", serif;
    text-decoration: none;
    transition: color 0.3s ease;
    color: #b8076e;
}

.postcard__instagram a:hover {
    color: #E4405F; 
}

.sp-only {
    display: inline;
}    

.sp-only-txt {
    display: none;
}

.postcard__label {
    position: absolute;
    top: -8rem;
    left: -30rem;
    transform: rotate(-10deg);
    display: inline-block;
    font-family: "Oleo Script", system-ui;
    color: rgba(194, 178, 178, 0.60);
    font-size: 8.0rem;
    /* アニメーション追加 */
    animation: bounceIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(-100px) rotate(-10deg) scale(0.3);
    }
    50% {
        transform: translateY(10px) rotate(-10deg) scale(1.05);
    }
    70% {
        transform: translateY(-5px) rotate(-10deg) scale(0.95);
    }
    85% {
        transform: translateY(3px) rotate(-10deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-10deg) scale(1);
    }
}

.postcard__topic {
    font-size: 4.0rem;
    font-family: "Kaisei Opti", serif;
    background-color: rgba(144, 123, 123, 0.65);
    color: var(--offwhite);
    line-height: normal;
    padding: 16px 16px 16px 28px;
    display: block;
}

.postcard__topicline {
    display: flex;
    flex-direction: column;
    gap: 0; /* 余白をなくす */
}

.postcard__content {
    display: flex;
    align-items: flex-start;
    gap: 9rem;
    justify-content: center;
}

.postcard__img {
    width: 345px;
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}

.line {
    background-color: var(--offwhite);
    font-family: "Kaisei Opti", serif;
    font-size: 1.6rem;
    padding: 8px 12px ;
    display: inline-block;
    margin: 0 auto;
}

.postcard__txt {
    text-align: left;
    margin-top: 40px;
}
.postcard__txt p {
    margin-bottom: 30px;
}

.postcard__endlabel {
    font-size: 12.8rem;
    font-family: "Oleo Script", system-ui;
    color: rgba(194, 178, 178, 0.60);
    line-height: normal;
    padding-bottom: 30px;
}

.endlabel-word {
    display: inline; /* PC用 */
}

/* アニメーション後に表示 */
.postcard__topic.sp-only .char-animation {
    opacity: 0;
    animation: fadeInChar 0.5s forwards;
}

/* 一文字ずつ表示 - 詳細度を上げる */
.postcard__topic .char-animation,
.postcard__txt .char-animation,
.postcard__endlabel .char-animation {
    display: inline-block !important;
    opacity: 0;
    animation: fadeInChar 0.5s forwards;
}

@keyframes fadeInChar {
    to {
        opacity: 1;
    }
}

/* すでにあるCSSコードのあとに貼り付け */

.postcard__topic, 
.postcard__txt .line, 
.endlabel-word {
    min-height: 1.2em; /* 文字が消えた時のガタつき防止 */
}

.char-animation {
    display: inline-block;
    opacity: 0;
    animation: fadeInChar 0.5s forwards;
}

@keyframes fadeInChar {
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); }
}

/* sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .pc-only-txt {
        display: none;
    }

    .sp-only-txt {
        display: block;
    }

    .postcard__topic {
        font-size: 2.4rem;
        padding: 8px 12px 10px 12px;
    }

    .postcard__label {
        font-size: 5.6rem;
        left: -4rem;
    }

    .sp-only {
        display: block;
        line-height: normal;
        margin: 0;
        padding-top: 0; 
    }
    
    .postcard__content {
        display: block;
        gap: 0;
    }

    .postcard__img{
        margin: -40px auto 0;
    }

    .postcard__instagram {
        margin-top: 0;
    }

    .line {
        white-space: nowrap;
        padding: 2px 6px;
    }
        
    .postcard__txt {
        text-align: center;
    }

    .postcard__endlabel {
        font-size: 9.6rem;
        display: flex;
        flex-direction: column; 
        align-items: center; 
        gap: 0; 
    }

    .endlabel-word {
        display: block;
        line-height: 0.9;
    }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .postcard__label {
        left: -16rem;
        font-size: 6.2rem;
    }

    .postcard__topic {
        font-size: 2.6rem;
        padding: 10px 20px 12px 20px;
    }

    .postcard__endlabel {
        font-size: 10.0rem;
        padding-bottom: 30px;
        display: block;
        text-align: center;
    }

    .endlabel-word {
        display: inline;
        line-height: normal;
    }
}

/* 375px以下のスマホ */
@media screen and (max-width: 374px) {
  .line {
    font-size: 1.4rem; 
    padding: 0 4px;
  }

  .postcard__label {
    font-size: 5.0rem;
    left: -1.6rem;
  }

  .postcard__endlabel {
    font-size: 9.0rem;
  }
}

/* ===================================
ご来店案内
=====================================*/
.section--shopinfo {
    background-color: var(--darkbrown);
}

.shopinfo__content {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
}

.shopinfo__img {
    flex: 1 1 45%;
    display: flex;
    min-height: 500px;
    height: clamp(500px, 35vw, 600px);
}

.shopinfo__img img {
    width: 100%;
    height: 100%;  
    object-fit: cover;
    display: block;
}

.shopinfo__img, 
.shopinfo__txt {
    min-height: 500px;
    height: clamp(500px, 35vw, 600px);
}

.shopinfo__txt {
    flex: 1 1 55%;
    display: flex;
    background-color: var(--graige);
    color: var(--offwhite);
    font-family: "Kaisei Tokumin", serif;
    font-size: 1.6rem;
    padding: 63px 109px;
    text-align: left;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.kumagai__logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 1.2rem;
}

.info__note {
    display: flex;
    align-items: center;
    gap: 8px;
}

.map {
    width: 100%;
    min-height: 500px;
    height: clamp(500px, 35vw, 600px);
    border: 0;
}

.phone-link {
    display: flex;
    gap: 0.5em;
    transition: color 0.3s ease;
}
.phone-link:hover {
    color: #f49eae;
}

.phone-icon {
    width: 20px;
    height: auto;
    object-fit: contain;
}


/* ご来店案内 sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .shopinfo__content {
        display: block;
        height: auto;
    }

    .shopinfo__img {
        height: auto;
        min-height: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .shopinfo__img img {
        height: 100%;
        object-fit: cover; 
        width: 100%;
        display: block;
    }

    .kumagai__logo {
        max-width: 199px;
    }

    .shopinfo__txt {
        font-size: 1.6rem;
        padding: 42px 6.1% 20px;
        height: auto;
        min-height: auto;
    }

    .shopinfo__txt p:last-of-type {
        margin-bottom: 26px;
    }
    .info__note p {
        line-height: 1.2;
    }

    .note__icon {
        margin-bottom: 15px;
    }

    .info__note {
        gap: 38px;
    }

    .map {
        height: auto;
        min-height: 389px;
        aspect-ratio: 16 / 9;
    }
}

/* ご来店案内　タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .note__icon {
        margin-bottom: 28px;
        padding-left: 340px;
    }
}

/* ===================================
footer
=====================================*/
.footer {
    background-color: var(--darkbrown);
    padding: 18px 0;
}

.copy {
    color: var(--offwhite, #FFFAF6);
    text-align: center;
    font-family: "Kotta One", serif;
    font-size: 1.4rem;
    line-height: normal;
}

/* footer sp・タブレット共通 */
@media screen and (max-width: 1024px) {
    .copy {
        font-size: 1.3rem;
    }
}