@charset "utf-8";

/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}


/* フォント */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ヘッダー */

.site-header {
    background-color: #4C0004;
    color: #F5F5F5;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

h1 {
    color: #F5F5F5;
    font-family: "GFS Didot", serif;
    font-weight: 270;
}

.header-area {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav ul {
    display: flex;
    gap: 30px;
}

.nav a {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    font-family: "GFS Didot", serif;
    font-weight: 270;
    letter-spacing: 0.1em;
}

/* 背景色 */

.items-page {
    background-color: #DCD189;
}

/* メイン画像 */

.main-item-image {
    background-color: #DCD189;
    width: 100%;
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.can-img {
    width: 85%;
    max-width: 900px;
    height: 500px;
    object-fit: cover;
    object-position: center 65%;
    margin-top: 60px;
}


.items-page h2 {
    color: #737372;
    font-size: 40px;
    font-family: "Shippori Mincho B1", serif;
    /* 文字を細く */
    font-weight: 200; 
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 8px;
    text-align: center;
}

.items-p p {
    color: #6E5E5E;
    font-family: "Shippori Mincho B1", serif;
    font-size: 20px;
    text-align: center;
    margin-bottom: 50px;
}

/* 息を吸う吐く整える */

.breath p {
    color: #6E5E5E;
    font-family: "Shippori Mincho B1", serif;
    font-size: 20px;
    font-weight: 100;
    text-align: center;
    margin-bottom: 20px;
}

html {
    scroll-behavior: smooth;
}

.breath a:hover {
    border-bottom: 0.5px solid #800000; 
}

.icon-img {
    width: 400px;
    height: auto;
    display: block;
    margin: 10px auto;
}


/* 息を吸う */

/* 画像とライン */
.suu-img  {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.suu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
    object-position: center 45%;
}

.wineled-line {
    background-color: #4C0004;
    width: 100%;
    height: 40px;
}

/* ロゴと息を吸う見出し */

.suu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 80px 0;
}

.suu-logo-img {
    width: 80px;
    height: auto;
}

.suu-text {
    font-family: "Shippori Mincho B1", serif;
    color: #005931;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.suu-title {
    margin-bottom: 5px;
    display: inline-block;
}

h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #005931;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #005931;
    padding-bottom: 5px;
}


/* ジグザグ */

/* ジグザグの1行1行の設定 */
.item-row {
    background-color: #0f6d43; 
    color: #ffffff;
    width: 92%;
    
    /* 左右中央に寄せて(auto)、下に隙間(60px)を作る */
    margin: 0 auto 60px;      
    border-radius: 12px;      
    
    padding: 30px 0;
    display: flex;
    justify-content: center;
    /* 画像が角丸からはみ出さないように */
    overflow: hidden;         
}


/* 最後のラインだけは、下の余白を無しにする（または調整する） */
.item-row:last-of-type {
    margin-bottom: 0;
}


.item-container {
    width: 90%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.item-row.reverse .item-container {
    flex-direction: row-reverse;
}

.item-text {
    flex: 1;
}

.item-text h4 {
    font-size: 23px;
    margin-bottom: 20px;
    font-family: "Shippori Mincho B1", serif;
}

.item-text ul {
    list-style: none;
    padding: 0;
}

.item-text li {
    font-family: "Shippori Mincho B1", serif;
    font-size: 15px;
    line-height: 2;
    font-weight: 200;
    margin-bottom: 10px;
}

.item-photo {
    flex: 1;
}

.item-photo img {
    width: 400px;
    height: 200px;
    object-fit: cover;
}


/* 横並び茶葉 */

h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #005931;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #005931;
    padding-top: 50px;
}

.leaf-section {
    padding: 40px 0 120px;
}

.leaf-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}

.leaf-item {
    flex: 1;
    text-align: center;
}

.leaf-image img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 25px;
}

.leaf-item h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 18px;
    font-weight: 400;
    color: #4B1F0F;
    border-bottom: 0.5px solid #4B1F0F;
    margin-bottom: 15px;
}

.leaf-item p {
    font-family: "GFS Didot", serif;
    font-size: 14px;
    /* font-weight: 200; */
    line-height: 1.8;
    color: #4B1F0F;
    margin-bottom: 10px;
}

.item-price {
    font-family: "GFS Didot", serif;
    font-size: 16px;
    font-weight: 400;
    color: #4B1F0F;
}

.item-price span {
    font-size: 10px;
    color: #4B1F0F;
    margin-left: 5px;
}




/* 息を吐く */

/* 画像とライン */
.haku-img  {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.haku-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
    object-position: center 70%;
}

.haku-wineled-line {
    background-color: #4C0004;
    width: 100%;
    height: 40px;
}

/* ロゴと息を吸う見出し */

.haku-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 80px 0;
}

.haku-logo-img {
    width: 80px;
    height: auto;
}

.haku-text {
    font-family: "Shippori Mincho B1", serif;
    color: #4C0004;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.haku-title {
    margin-bottom: 5px;
    display: inline-block;
}


/* ジグザグ */

.haku-box h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #4C0004;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #4C0004;
    padding-bottom: 5px;
}




/* ジグザグの1行1行の設定 */
.haku-box .item-row {
    background-color: #BB5838; 
    color: #ffffff;
    width: 92%;
    
    /* 左右中央に寄せて(auto)、下に隙間(60px)を作る */
    margin: 0 auto 60px;      
    border-radius: 12px;      
    
    padding: 30px 0;
    display: flex;
    justify-content: center;
    /* 画像が角丸からはみ出さないように */
    overflow: hidden;         
}


/* 最後のラインだけは、下の余白を無しにする（または調整する） */
.haku-box.item-row:last-of-type {
    margin-bottom: 0;
}


.haku-box.item-container {
    width: 90%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.haku-box.item-row.reverse .item-container {
    flex-direction: row-reverse;
}

.haku-box.item-text {
    flex: 1;
}

.haku-box.item-text h4 {
    font-size: 23px;
    margin-bottom: 20px;
    font-family: "Shippori Mincho B1", serif;
}

.haku-box.item-text ul {
    list-style: none;
    padding: 0;
}

.haku-box.item-text li {
    font-family: "Shippori Mincho B1", serif;
    font-size: 15px;
    line-height: 2;
    font-weight: 200;
    margin-bottom: 10px;
}

.haku-box.item-photo {
    flex: 1;
}

.haku-box.item-photo img {
    width: 400px;
    height: 200px;
    object-fit: cover;
}


/* 横並び茶葉 */

.haku-tea-leaf h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #4C0004;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #4C0004;
    padding-top: 50px;
}

.haku-tea-leaf
.leaf-section {
    padding: 40px 0 120px;
}

.haku-tea-leaf
.leaf-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}

.haku-tea-leaf
.leaf-item {
    flex: 1;
    text-align: center;
}

.haku-tea-leaf
.leaf-image img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 25px;
}

.haku-tea-leaf
.leaf-item h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 18px;
    font-weight: 400;
    color: #4B1F0F;
    border-bottom: 0.5px solid #4B1F0F;
    margin-bottom: 15px;
}

.haku-tea-leaf
.leaf-item p {
    font-family: "GFS Didot", serif;
    font-size: 14px;
    /* font-weight: 200; */
    line-height: 1.8;
    color: #4B1F0F;
    margin-bottom: 10px;
}

.haku-tea-leaf
.item-price {
    font-family: "GFS Didot", serif;
    font-size: 16px;
    font-weight: 400;
    color: #4B1F0F;
}

.haku-tea-leaf
.item-price span {
    font-size: 10px;
    color: #4B1F0F;
    margin-left: 5px;
}



/* 息を整える */

/* 画像とライン */
.totonoeru-img  {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.totonoeru-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
    object-position: center 45%;
}

.totonoeru-wineled-line {
    background-color: #4C0004;
    width: 100%;
    height: 40px;
}

/* ロゴと息を整える見出し */

.totonoeru-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 80px 0;
}

.totonoeru-logo-img {
    width: 80px;
    height: auto;
}

.totonoeru-text {
    font-family: "Shippori Mincho B1", serif;
    color: #815B14;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.totonoeru-title {
    margin-bottom: 5px;
    display: inline-block;
}


/* ジグザグ */

.totonoeru-box h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #815B14;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #815B14;
    padding-bottom: 5px;
}




/* ジグザグの1行1行の設定 */
.totonoeru-box .item-row {
    background-color: #AFA231; 
    color: #ffffff;
    width: 92%;
    
    /* 左右中央に寄せて(auto)、下に隙間(60px)を作る */
    margin: 0 auto 60px;      
    border-radius: 12px;      
    
    padding: 30px 0;
    display: flex;
    justify-content: center;
    /* 画像が角丸からはみ出さないように */
    overflow: hidden;         
}


/* 最後のラインだけは、下の余白を無しにする（または調整する） */
.totonoeru-box.item-row:last-of-type {
    margin-bottom: 0;
}


.totonoeru-box.item-container {
    width: 90%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.totonoeru-box.item-row.reverse .item-container {
    flex-direction: row-reverse;
}

.totonoeru-box.item-text {
    flex: 1;
}

.totonoeru-box.item-text h4 {
    font-size: 23px;
    margin-bottom: 20px;
    font-family: "Shippori Mincho B1", serif;
}

.totonoeru-box.item-text ul {
    list-style: none;
    padding: 0;
}

.totonoeru-box.item-text li {
    font-family: "Shippori Mincho B1", serif;
    font-size: 15px;
    line-height: 2;
    font-weight: 200;
    margin-bottom: 10px;
}

.totonoeru-box.item-photo {
    flex: 1;
}

.totonoeru-box.item-photo img {
    width: 400px;
    height: 200px;
    object-fit: cover;
}


/* 横並び茶葉 */

.totonoeru-tea-leaf h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 28px;
    color: #815B14;
    margin-left: 5%;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 0.5px solid #815B14;
    padding-top: 50px;
}

.totonoeru-tea-leaf
.leaf-section {
    padding: 40px 0 120px;
}

.totonoeru-tea-leaf
.leaf-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 100px;
    max-width: 1100px;
    margin: 0 auto;
    width: 90%;
}

.totonoeru-tea-leaf
.leaf-item {
    flex: 1;
    text-align: center;
}

.totonoeru-tea-leaf
.leaf-image img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 25px;
}

.totonoeru-tea-leaf
.leaf-item h3 {
    font-family: "Shippori Mincho B1", serif;
    font-size: 18px;
    font-weight: 400;
    color: #4B1F0F;
    border-bottom: 0.5px solid #4B1F0F;
    margin-bottom: 15px;
}

.totonoeru-tea-leaf
.leaf-item p {
    font-family: "GFS Didot", serif;
    font-size: 14px;
    /* font-weight: 200; */
    line-height: 1.8;
    color: #4B1F0F;
    margin-bottom: 10px;
}

.totonoeru-tea-leaf
.item-price {
    font-family: "GFS Didot", serif;
    font-size: 16px;
    font-weight: 400;
    color: #4B1F0F;
}

.totonoeru-tea-leaf
.item-price span {
    font-size: 10px;
    color: #4B1F0F;
    margin-left: 5px;
}

/* 注意書き */

.shop-info {
    text-align: center;
    margin-top: 80px; 
    margin-bottom: 40px;
    font-family: "Shippori Mincho B1", serif;
    color: #4B1F0F;
    font-size: 14px;
    line-height: 2;
}

.online-notice {
    font-size: 12px;
    opacity: 0.8; 
}



/* ここからfooter */


footer {
    padding: 80px 20px;
    background-color: #fff;
    text-align: center;
    color: #333;
}

.footer-logo {
    margin-bottom: 40px;
}

.footer-logo img {
    max-width: 300px;
    height: auto;
}

footer p {
    font-family: "Shippori Mincho B1", serif;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 5px;
}

.copyright {
    margin-top: 50px;
    font-family: "Shippori Mincho B1", serif;
    font-size: 12px;
    color: rgb(70, 70, 70);
}


/* 動き */

/* 1. 最初は透明で、少し下に下げておく */
.js-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* 2. JavaScriptで 'show' クラスがついたら表示する */
.js-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* 2番目の商品は0.3秒、3番目は0.6秒遅らせる設定 */
.leaf-item:nth-child(2) { transition-delay: 0.3s; }
.leaf-item:nth-child(3) { transition-delay: 0.6s; }

.leaf-image img {
    transition: transform 0.6s ease;
}

.leaf-image img:hover {
    transform: scale(1.05); /* 5%だけ大きくする */
}


/* レスポンシブデザイン */


@media screen and (max-width: 768px) {

    /* ヘッダー */
    .header-area {
        flex-direction: column;
        padding: 10px;
    }
    .nav ul {
        gap: 15px; 
        margin-top: 10px;
    }
    .nav a {
        font-size: 14px;
    }

    footer {
        padding: 40px 20px;
    }
    .footer-logo img {
        max-width: 200px;
    }
    
    /* 1. メインビジュアルの高さ調整 */
    .can-img {
        height: 300px; /* PC版500pxから縮小 */
        margin-top: 40px;
    }

    /* 2. セクションタイトル(h3)の余白調整 */
    h3, .haku-box h3, .totonoeru-box h3, .totonoeru-tea-leaf h3 {
        font-size: 24px;
        margin-left: 4%;
        padding-top: 30px;
    }

    /* 3. ジグザグ(Feature)を縦並びに修正 */
    .item-container, 
    .haku-box.item-container, 
    .totonoeru-box.item-container {
        flex-direction: column !important; /* 縦に並べる */
        gap: 20px;
        width: 85%;
    }

    /* reverse（左右反転）も強制的に縦並びにする */
    .item-row.reverse .item-container,
    .haku-box.item-row.reverse .item-container,
    .totonoeru-box.item-row.reverse .item-container {
        flex-direction: column !important;
    }

    .item-row, .haku-box.item-row, .totonoeru-box.item-row {
        padding: 40px 0;
    }

    .item-photo img, .haku-box.item-photo img, .totonoeru-box.item-photo img {
        width: 100%; /* 画像を横幅いっぱいにする */
        height: 200px;
        object-fit: cover;
        object-position: center;
        transform: scale(1.3);
    }

    .item-photo, 
    .haku-box.item-photo, 
    .totonoeru-box.item-photo {
        overflow: hidden;  /* はみ出た分をカット */
    }

    .item-text h4 {
        font-size: 20px;
        text-align: center; /* タイトルを中央に */
    }

    .suu-text p, .haku-text p, .totonoeru-text p {
        font-size: 18px;
    }

    /* 4. 商品一覧（3カラム）を1列にする */
    .leaf-container, .haku-tea-leaf .leaf-container, .totonoeru-tea-leaf .leaf-container {
        flex-direction: column;
        gap: 50px; /* 商品ごとの間隔 */
    }

    .leaf-item {
        width: 100%;
    }

    .leaf-item h3 {
        margin-left: 0;
        display: block;
        text-align: center;
    }

    /* 改行(<br>)をスマホでは無効化（読みやすさのため） */
    .leaf-item p br {
        display: none;
    }

    /* 5. 注意書きの文字サイズ調整 */
    .shop-info {
        padding: 0 20px;
        font-size: 13px;
    }

    /* 6. アイコン画像のサイズ調整 */
    .icon-img {
        width: 250px;
    }

    /* 7. ヘッダーの文字サイズ調整 */
    .nav a {
        font-size: 14px;
        gap: 15px;
    }
    .nav ul {
        gap: 15px;
    }
}