/* ==========================================
   Café Haven
   style.css
========================================== */


/* ==========================================
   基本設定
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;

    color: #5c4a3d;

    background:
        linear-gradient(
            135deg,
            #fffaf3,
            #f8efe5
        );

    line-height: 1.8;

}


/* ==========================================
   リンク
========================================== */

a {

    color: inherit;

    text-decoration: none;

}


button,
input {

    font-family: inherit;

}


/* ==========================================
   ヘッダー
========================================== */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        15px
        50px;

    background:
        rgba(
            255,
            250,
            243,
            0.95
        );

    backdrop-filter: blur(10px);

    border-bottom:
        1px solid
        #eadfd3;

}


/* ロゴ */

.logo {

    font-size: 25px;

    font-weight: bold;

    color: #765541;

}


.logo a {

    transition:
        0.3s;

}


.logo a:hover {

    opacity: 0.7;

}


/* ==========================================
   ナビゲーション
========================================== */

nav {

    display: flex;

    gap: 30px;

}


nav a {

    position: relative;

    font-size: 15px;

    color: #6d5a4c;

    transition:
        0.3s;

}


nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    background: #b58b6d;

    transition:
        width 0.3s;

}


nav a:hover {

    color: #a57552;

}


nav a:hover::after {

    width: 100%;

}


/* ==========================================
   メイン
========================================== */

main {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding:
        60px 30px 100px;

}


/* ==========================================
   ページヘッダー
========================================== */

.page-header {

    text-align: center;

    margin-bottom: 60px;

}


.page-header h1 {

    font-size: 42px;

    color: #654b3a;

    letter-spacing: 2px;

    margin-bottom: 10px;

}


.page-header p {

    color: #8c7a6d;

    font-size: 16px;

}


/* ==========================================
   MENU & ACCOUNTING
========================================== */

.shop-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        380px;

    gap: 40px;

    align-items: start;

}


/* ==========================================
   メニューエリア
========================================== */

.menu-area {

    width: 100%;

}


.menu-section {

    margin-bottom: 70px;

}


.section-title {

    margin-bottom: 30px;

}


.section-title h2 {

    display: inline-block;

    font-size: 28px;

    color: #654b3a;

    margin-bottom: 5px;

}


.section-title p {

    color: #9a887b;

    font-size: 14px;

}


/* ==========================================
   商品グリッド
========================================== */

.menu-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 30px;

}


/* ==========================================
   商品カード
========================================== */

.product-card {

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #eee2d6;

    border-radius: 20px;

    box-shadow:
        0 8px 25px
        rgba(
            80,
            60,
            40,
            0.08
        );

    transition:
        transform 0.3s,
        box-shadow 0.3s;

}


.product-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(
            80,
            60,
            40,
            0.13
        );

}


/* ==========================================
   商品画像
   ★ 全商品同じサイズ
========================================== */

.product-image {

    width: 100%;

    height: 280px;

    overflow: hidden;

    background: #f5eadf;

}


.product-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}


/* ==========================================
   商品情報
========================================== */

.product-info {

    padding: 25px;

}


.product-info h3 {

    margin-top: 10px;

    margin-bottom: 5px;

    font-size: 21px;

    color: #5d4637;

}


.effect {

    margin-bottom: 10px;

    font-size: 13px;

    color: #99877a;

}


.price {

    margin-bottom: 20px;

    font-size: 22px;

    font-weight: bold;

    color: #9a6949;

}


/* ==========================================
   カテゴリーラベル
========================================== */

.category-label {

    display: inline-block;

    padding:
        4px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: bold;

}


.food-label {

    background: #f7e6d8;

    color: #a16b48;

}


.drink-label {

    background: #e5eee8;

    color: #5e806d;

}


.set-label {

    background: #eee5f1;

    color: #80628c;

}


/* ==========================================
   会計追加ボタン
========================================== */

.add-button {

    width: 100%;

    padding:
        12px 20px;

    border: none;

    border-radius: 10px;

    background: #8f684e;

    color: #ffffff;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;

    transition:
        0.3s;

}


.add-button:hover {

    background: #72513d;

    transform:
        translateY(-2px);

}


/* ==========================================
   会計エリア
========================================== */

.accounting-area {

    position: sticky;

    top: 100px;

}


.accounting-box {

    padding: 25px;

    background: #ffffff;

    border:
        1px solid
        #eadfd3;

    border-radius: 20px;

    box-shadow:
        0 8px 30px
        rgba(
            80,
            60,
            40,
            0.10
        );

}


/* ==========================================
   会計ヘッダー
========================================== */

.accounting-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        #eee2d6;

}


.accounting-header h2 {

    font-size: 23px;

    color: #654b3a;

}


#cart-count {

    padding:
        4px 10px;

    border-radius: 20px;

    background: #f5eadf;

    color: #8b684f;

    font-size: 12px;

}


/* ==========================================
   カート
========================================== */

#cart {

    margin-top: 10px;

}


/* ==========================================
   カートが空の場合
========================================== */

.empty-cart {

    padding:
        35px 15px;

    text-align: center;

    color: #a29286;

    font-size: 13px;

}


.empty-cart p + p {

    margin-top: 5px;

}


/* ==========================================
   会計カテゴリー
========================================== */

.cart-category-title {

    margin-top: 18px;

    margin-bottom: 5px;

    padding-bottom: 5px;

    border-bottom:
        2px solid
        #eadfd3;

    font-size: 14px;

    font-weight: bold;

    color: #6d5141;

}


.cart-category-title:first-child {

    margin-top: 10px;

}


.cart-category-title span {

    display: inline-block;

}


/* ==========================================
   カート商品
========================================== */

.cart-item {

    display: grid;

    grid-template-columns:
        minmax(150px, 1fr)
        auto;

    gap: 15px;

    padding:
        15px 0;

    border-bottom:
        1px solid #f0e7df;

}


/* 商品画像 */

.cart-item-image {

    width: 55px;

    height: 55px;

    overflow: hidden;

    border-radius: 10px;

    background: #f5eadf;

}


.cart-item-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* 商品情報 */

.cart-item-info {

    min-width: 0;

}


.cart-item-info h3 {

    margin-bottom: 2px;

    font-size: 14px;

    color: #654b3a;

    /* 商品名を改行させない */
    white-space: nowrap;

}


.cart-item-info p {

    font-size: 12px;

    color: #99877a;

}


/* ==========================================
   個数操作
========================================== */

.quantity-control {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

}


.quantity-control button {

    width: 27px;

    height: 27px;

    border:
        1px solid
        #dbcabd;

    border-radius: 7px;

    background: #fffaf5;

    color: #745542;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    transition:
        0.2s;

}


.quantity-control button:hover {

    background: #f1e4d8;

}


.quantity-control span {

    min-width: 25px;

    text-align: center;

    font-size: 13px;

    font-weight: bold;

}


/* ==========================================
   小計
========================================== */

.cart-subtotal {

    grid-column:
        2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 5px;

}


.cart-subtotal span {

    font-size: 11px;

    color: #a29286;

}


.cart-subtotal strong {

    font-size: 14px;

    color: #8f6042;

}


/* ==========================================
   合計金額
========================================== */

.total-box {

    margin-top: 20px;

    padding:
        20px;

    text-align: center;

    border-radius: 15px;

    background: #fff8ef;

}


.total-box p {

    font-size: 13px;

    color: #917c6c;

}


.total-box h2 {

    margin-top: 5px;

    font-size: 30px;

    color: #8b5f43;

}


/* ==========================================
   お預かり金額
========================================== */

.payment-box {

    margin-top: 20px;

}


.payment-box h3 {

    margin-bottom: 10px;

    font-size: 15px;

    color: #654b3a;

}


#received {

    width: 100%;

    padding:
        12px 15px;

    border:
        1px solid
        #dbcabd;

    border-radius: 10px;

    outline: none;

    font-size: 15px;

    background: #fffdf9;

}


#received:focus {

    border-color:
        #a98063;

    box-shadow:
        0 0 0 3px
        rgba(
            169,
            128,
            99,
            0.12
        );

}


/* ==========================================
   お釣り
========================================== */

.change {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    padding:
        12px 15px;

    border-radius: 10px;

    background: #f7f0e8;

}


.change span {

    font-size: 13px;

    color: #816e60;

}


.change strong {

    font-size: 18px;

    color: #76513b;

}


/* ==========================================
   リセットボタン
========================================== */

.reset-button {

    width: 100%;

    margin-top: 20px;

    padding:
        12px;

    border:
        1px solid
        #d9c9bb;

    border-radius: 10px;

    background: #ffffff;

    color: #7b6657;

    font-size: 13px;

    cursor: pointer;

    transition:
        0.3s;

}


.reset-button:hover {

    background: #f8eee5;

}


/* ==========================================
   Café Havenについて
========================================== */

.about-section {

    margin-bottom: 70px;

    padding:
        40px;

    background: #ffffff;

    border:
        1px solid
        #eee2d6;

    border-radius: 20px;

    box-shadow:
        0 8px 25px
        rgba(
            80,
            60,
            40,
            0.06
        );

}


.about-section > h2 {

    margin-bottom: 20px;

    font-size: 27px;

    color: #654b3a;

}


.about-section > p {

    margin-bottom: 12px;

    color: #77685d;

}


/* ==========================================
   コンセプト
========================================== */

.concept-box {

    padding:
        30px;

    border-radius: 15px;

    background: #fff8ef;

}


.concept-box h3 {

    margin-bottom: 10px;

    font-size: 21px;

    color: #8a6248;

}


.concept-box p {

    color: #77685d;

}


/* ==========================================
   作業内容
========================================== */

.work-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 30px;

    margin-top: 30px;

}


.work-card {

    padding: 35px;

    background: #ffffff;

    border:
        1px solid
        #eee2d6;

    border-radius: 20px;

    box-shadow:
        0 5px 20px
        rgba(
            80,
            60,
            40,
            0.08
        );

}


.work-icon {

    margin-bottom: 15px;

    font-size: 45px;

}


.work-card h3 {

    margin-bottom: 25px;

    font-size: 22px;

    color: #6d5141;

}


.work-item {

    margin-top: 15px;

    padding: 18px;

    border-radius: 12px;

    background: #fffaf3;

}


.work-item h4 {

    margin-bottom: 5px;

    font-size: 17px;

    color: #8c684f;

}


.work-item p {

    margin: 0;

    color: #6f6259;

}


/* ==========================================
   情報カード
========================================== */

.info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 25px;

    margin-top: 30px;

}


.info-card {

    padding:
        25px;

    text-align: center;

    border-radius: 15px;

    background: #fffaf5;

}


.info-card h3 {

    margin-bottom: 8px;

    font-size: 18px;

    color: #765541;

}


.info-card p {

    font-size: 14px;

    color: #8c7b6e;

}


/* ==========================================
   フッター
========================================== */

footer {

    padding:
        30px;

    text-align: center;

    border-top:
        1px solid
        #eadfd3;

    background: #fffaf3;

}


footer p {

    font-size: 13px;

    color: #9a887b;

}


/* ==========================================
   スマートフォン
========================================== */

@media (
    max-width: 1000px
) {

    .shop-layout {

        grid-template-columns: 1fr;

    }


    .accounting-area {

        position: static;

    }

}


/* ==========================================
   タブレット
========================================== */

@media (
    max-width: 768px
) {

    .header {

        flex-direction: column;

        gap: 10px;

        padding:
            15px 20px;

    }


    nav {

        gap: 15px;

        flex-wrap: wrap;

        justify-content: center;

    }


    nav a {

        font-size: 13px;

    }


    main {

        padding:
            40px 15px 70px;

    }


    .page-header {

        margin-bottom: 40px;

    }


    .page-header h1 {

        font-size: 30px;

    }


    .menu-grid {

        grid-template-columns: 1fr;

    }


    .product-image {

        height: 260px;

    }


    .work-grid {

        grid-template-columns: 1fr;

    }


    .info-grid {

        grid-template-columns: 1fr;

    }


    .about-section {

        padding: 25px;

    }

}


/* ==========================================
   スマートフォン小画面
========================================== */

@media (
    max-width: 480px
) {

    .logo {

        font-size: 21px;

    }


    nav {

        gap: 10px;

    }


    nav a {

        font-size: 12px;

    }


    .page-header h1 {

        font-size: 25px;

    }


    .section-title h2 {

        font-size: 23px;

    }


    .product-image {

        height: 230px;

    }


    .product-info {

        padding: 20px;

    }


    .accounting-box {

        padding: 20px;

    }


    .work-card {

        padding: 25px;

    }

}