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

html,
body {
    height: 100%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: #222;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit
}

/* --- Container --- */
.wrap {
    max-width: 1100px;
    margin: 36px auto;
    padding: 24px
}

header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px
}

.logo {
    display: flex;
    flex-direction: column
}

.logo h1 {
    font-size: 20px;
    letter-spacing: 1px
}

.logo p {
    font-size: 12px;
    color: #667
}

.hero {
    gap: 28px;
    align-items: center;
    margin-bottom: 36px
}

.hero .lead {
    background: linear-gradient(90deg, #fff, #fafaff);
    padding: 70px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(30, 30, 60, 0.06);
    margin: 100px 0
}

.lead h2 {
    font-size: 28px;
    margin-bottom: 18px;
    text-align: center;
    margin: 100px 0

}

.lead p {
    color: #445;
    margin-bottom: 18px;
    line-height: 1.6;
    text-align: center;
    margin: 150px 0
}

.cta {
    display: flex;
    gap: 12px
}

.btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    background: #2b67f6;
    color: white;
    font-weight: 600
}

.btn.secondary {
    background: transparent;
    color: #2b67f6;
    border: 1px solid rgba(43, 103, 246, 0.16)
}

/* --- Showcase card (3D feel) --- */
.card-shell {
    perspective: 1200px
}

.card {
    width: 380px;
    height: 380px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #eef2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(50, 60, 90, 0.08);
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s
}

.card:hover {
    transform: rotateX(6deg) rotateY(-8deg) translateY(-6px);
    box-shadow: 0 36px 70px rgba(50, 60, 90, 0.12)
}

.spoon-figure {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translateZ(40px)
}

/* simple SVG silhouette styling */
.spoon-figure svg {
    width: 100%;
    height: 100%;
    display: block
}

/* --- Gallery --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 36px
}

.product {
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 20px rgba(20, 30, 60, 0.04);
    cursor: pointer;
    transition: transform .18s
}

.product:hover {
    transform: translateY(-6px)
}

.product .thumb {
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff, #f0f4ff)
}

.product h3 {
    margin: 10px 0 6px;
    font-size: 16px
}

.product p {
    font-size: 13px;
    color: #556
}

/* modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 30, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px
}

.modal.open {
    display: flex
}

.modal-inner {
    width: 100%;
    max-width: 920px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(5, 10, 30, 0.6);
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.modal .meta h4 {
    margin-bottom: 8px
}

.close {
    position: absolute;
    right: 20px;
    top: 18px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px
}

footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #efeff5;
    color: #667;
    font-size: 13px;
    display: flex;
    justify-content: space-between
}

@media(max-width:880px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .card {
        width: 100%;
        height: 320px
    }

    .modal-grid {
        grid-template-columns: 1fr
    }
}
/* --------------------------------------------------
   以下は追加のページ用スタイル（About / Voices など）です。
   GUIDE: ここはトップ領域の基本スタイルとは別に管理しています。
   - 目的: About ページや「お客様の声」セクションの見た目を整える
   - 修正ポイント: 重複したリセットは上部で既に適用済みなので、ここではページ固有のスタイルのみ定義します
   -------------------------------------------------- */

/* コンテナ（About ページ等の共通幅） */
.container{
    max-width:1100px;
    margin:0 auto;
    padding:70px 20px;
}
/* Header / Hero（About 固有の背景や画像） */
.hero-img{
     width:100%; 
     display:block; 
     object-fit:cover; 
     height:auto; 
     max-height:600px; 
     max-width:600px; 
     margin:0 auto; 
    }





/* About セクション
   GUIDE: `.about` は About ページの主要なコンテンツ領域。
   `.lead` は本文の幅制限と行間を制御します。中央寄せが必要なら `.lead` に text-align を追加。 */

.about{ 
    padding:48px 0; 
}
.about h2{ 
    font-size:28px;
    color:#2b2b2b; 
    margin-bottom:12px;
    text-align: center;
}

.lead{ 
    font-size:16px; 
    line-height:1.9; 
    color:#444; 
    max-width:760px; 
    margin:0 auto 24px; 
    text-align:center; 
}

.recommend{
     background:transparent; 
     padding:36px 0; 
     display:flex; 
     justify-content:center;
}

/* Warped rectangle style for recommend section */
.recommend--warp{ 
    position: relative; 
    overflow: visible; 
}
.recommend--warp .recommend-inner{
    background: #FBD8B0; 
    transform: skewX(-6deg); 
    margin: 0 -50px; /* extend slightly beyond the container to feel full-width */
    padding: 28px 50px; 
    border-radius: 12px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.recommend--warp .recommend-inner > .container{
    transform: skewX(6deg); /* un-skew inner content so text is horizontal */
}

@media (max-width:780px){
    .recommend--warp .recommend-inner{ margin: 0 -20px; padding: 20px; transform: skewX(-4deg); }
    .recommend--warp .recommend-inner > .container{ transform: skewX(4deg); }
}

.recommend container{
     font-size:28px;
    color:#2b2b2b; 
    margin-bottom:12px;
    text-align: center;
}

.recommend h3{ 
    font-size:22px; 
    color:#2b2b2b; 
    margin-bottom:18px; 
    text-align: center; 
}

.recommend h4{ 
    font-size:22px; 
    color:#2b2b2b; 
    margin-bottom:18px; 
    text-align: center; 
}


.two-column{
     display:flex; 
     gap:36px; 
     align-items:center; 
     flex-wrap:wrap; 
     justify-content:center; 
}

.recommend .container{ 
    max-width:900px;
     width:100%; 
}

.img-wrap{ 
    width:100%; 
}

.img-wrap{ 
    width:100%; 
    display:block; 
    object-fit:cover; 
    height:auto; max-height:600px; 
}
.img-wrap img{ 
    width:100%; 
    max-width:420px; 
    border-radius:12px; 
    box-shadow:0 10px 24px rgba(20,20,30,0.06); 
}

/* If an image inside .img-wrap also uses .hero-img, make it match the hero sizing */
.img-wrap img.hero-img{ 
    width:100%; 
    max-width:600px; 
    height:auto; 
    max-height:600px; 
    border-radius:12px; 
    box-shadow:0 10px 24px rgba(20,20,30,0.06); 
}

sheck-list{ 
    list-style:none; 
    margin-top:12px; 
}

.check-list li{ 
    padding-left:20px; 
    margin-bottom:10px; 
    position:relative; 
}

.check-list li::before{ 
    content:""; 
    width:10px; 
    height:10px; 
    background:#ffd0a8;
     border-radius:50%; 
     position:absolute; 
     left:0; 
     top:6px; 
    }

    
/* Voices （お客様の声）
   GUIDE: ギャラリーと同じグリッド設定を使うと、レスポンシブで崩れにくいです。 */
.voices{ padding:40px 0; }
.voices h3{ font-size:20px; margin-bottom:18px; }
.voices-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.voice{ background:#fff; padding:18px; border-radius:12px; border:1px solid #f0e6de; box-shadow:0 8px 18px rgba(30,30,60,0.04); }
.voices .meta{ display:block; margin-top:8px; font-size:13px; color:#8b8b8b; }

/* Footer オーバーライド（ページ固有の背景など） */
footer{ background:#fbf0e6; padding:24px 0; margin-top:40px; text-align:center; color:#6b6b6b; }

/* レスポンシブ調整（About / Voices に特化した調整） */
@media (max-width:780px){
    /* モバイルでは高さを控えめに */
    .hero-img{ max-height:360px; height:auto; }
    .two-column{ flex-direction:column; }
}

/* END of additional page styles */