@charset "utf-8";
/* =========================
    common
========================= */
:root{
  --bg:#efe9de;
  --ink:#2b2b2b;
  --muted:#6d6a66;
  --accent:#3b3a37;
  --accent-ink:#f3f2ee;
  --brand:#7a5b45;
  --max: min(800px, 92vw);
  --radius: 16px;
  --shadow: 0 12px 28px rgba(0,0,0,.15);
  --space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-6:3rem;--space-8:4rem;
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:1200px;margin:0 auto;padding:0}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
ul,li{list-style:none;padding-left:0}

body{
  /*font-family: "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN","Meiryo", "MS PGothic", sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 550;
  color:var(--ink);
  background-image:url('../images/background-sp.jpg');
  background-size:contain;
  background-repeat: repeat-y;
  background-position: top;
  line-height:1.5;
  letter-spacing:.02em;
}

/* =========================
    Foundation / Layout
========================= */
.l-container{
  width:var(--max);
  margin-inline:auto;
  padding-inline:clamp(12px,3vw,20px);
}

.l-header{}
.l-main {
  padding:0 0 40px;
}
.l-footer{
  padding:30px 0;
  background:#251d18;
  color:#e9e6de;
  font-weight:bold;
  text-align:center;
  line-height:1.2;
}

/* =========================
    Utilities
========================= */

/* =========================
    Components
========================= */
.c-logo__img{ display:block;width: 100%;height:auto; }

.c-sectionTitle{
  font-weight:850;
  line-height:1.2;
  margin:0;
  font-size:clamp(1.6rem,5vw,25px);
  letter-spacing:.01em;
}

/* =========================
    Project: Header
========================= */
.p-header__banner{
  margin-bottom: 15px;
  padding:10px;
  background:#1987ac;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.p-header__banner img{ margin-left:auto; }

.p-header__inner{
  display:flex;
  flex-direction:column;
  gap:30px;
  align-items:flex-start;
}

.p-header__info{
  display: flex;
  justify-content: center;
  width: 95%;
  margin: 30px auto;
}
.p-header__infoImg{ display:block; height:auto; }

/* =========================
    Project: Hero
========================= */
.p-hero{ 
    margin-top: 30px;
    padding-block:clamp(42px,8vw,90px);
    background-image:url(../images/vintageis-evernew.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: top center;
}
.p-hero__body{ display:grid; gap:clamp(10px,4vw,25px); }
.p-hero__figure{ margin:0; }
.p-hero__figure_large {margin: 0 -15px;}
.p-hero__img{ width:100%; height:auto;}
.p-hero__title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 950;
  font-size:clamp(1.2rem,7vw,1.4rem);
  line-height:1.5;
  margin:16px 0 0;
}
.p-hero__text{ margin:0; color:var(--ink); }

/* バリエーション */
.p-hero--alt .p-hero__img{ /* 必要なら差分スタイル */ }

/* =========================
    Project: Coffee / Chocolate
========================= */
.p-coffee__head,
.p-choco__head{
    width: 100%;
    padding:var(--space-3);
    background:#000000dd;
    color:#fffef7;
    box-shadow:var(--shadow);
    border:1px solid rgba(255,255,255,.06);
    text-align: center;
}

.p-coffee__headInner,
.p-choco__headInner {
    max-width: 800px;
    margin: 0 auto;
}

.p-coffee__head h2,
.p-choco__head h2 {
  font-size: clamp(32px,5vw,48px)
}

.p-coffee__lead,
.p-choco__lead{ font-size: clamp(14px,5vw,24px);font-weight:bold; margin:var(--space-2) 0 var(--space-2); }

.p-coffee__figure,
.p-choco__figure{ margin:0; }
.p-coffee__img,
.p-choco__img{ width:100%; height:auto; }

.p-coffee__intro,
.p-choco__intro{ padding-block:var(--space-4);}
.p-coffee__title,
.p-choco__title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 950;
  font-size:clamp(1.4rem,4.8vw,25px);
  line-height:1.25;
  margin:0 0 var(--space-2);
}
.p-coffee__text,
.p-choco__text{ margin:0; color:var(--ink); }

/* リストのグリッド（共通） */
.p-coffeeList,
.p-chocoList{
  display:grid;
  gap:var(--space-3);
  grid-template-columns:1fr;
  padding-block:var(--space-3);
}
@media (min-width:720px){
  .p-coffeeList,
  .p-chocoList{
    grid-template-columns:repeat(3,1fr);
  }
}

/* カード（共通） */
.p-coffeeCard,
.p-chocoCard{
  background:#ffffff88;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-3);
}
.p-coffeeCard__title,
.p-chocoCard__title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 950;
  font-size:clamp(1.1rem,3.6vw,25px);
  line-height:1.3;
  margin:0 0 10px;
}
.p-coffeeCard__subtitle,
.p-chocoCard__subtitle{ font-size: clamp(1.1rem,3.6vw,25px);font-weight:bold; color:#000; margin:0 0 30px; }
.p-coffeeCard__desc,
.p-chocoCard__desc{ margin:0 0 var(--space-2); }

.p-coffeeCard__figure,
.p-chocoCard__figure{ margin:0 0 var(--space-2); text-align:center; }
.p-coffeeCard__img{ max-width:170px; margin:0 auto; }
.p-chocoCard__img{ max-width:170px; margin-left:auto; margin-right: 60px; }


.p-coffeeCard__spec,
.p-chocoCard__spec{ margin:0; padding:0; }
.p-coffeeCard__specItem,
.p-chocoCard__specItem{ margin:.25rem 0;font-size: clamp(16px,3.6vw,18px); }

/* =========================
    Project: Access
========================= */
.p-access__inner{ padding-block:var(--space-4); }

.p-access__time{ margin:0 0 var(--space-3); }
.p-access__address{
  margin:0 0 20px;
  font-style:normal;
}
.p-access__tel{ text-decoration:underline; }

.p-access__map{
  width:85%;
  margin:0 auto;
  aspect-ratio:1/1;
  overflow:hidden;
  box-shadow:6px 6px 5px rgba(0,0,0,0.6);
}
.p-access__map > iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.p-access__map > iframe[style]{ width:100% !important; height:100% !important; }
@supports not (aspect-ratio:1/1){
  .p-access__map{ position:relative; }
  .p-access__map::before{
    content:"";
    display:block;
    padding-top:100%;
  }
  .p-access__map > iframe{
    position:absolute;
    inset:0;
  }
}

/* =========================
    Responsive
========================= */
@media (min-width:960px){
    body{
        background-image:url('../images/background.jpg');
    }
    p {font-size: 20px;}
    .c-logo {margin-left: -80px;}
    .c-logo__img{ width:410px;}
    .p-hero {
        background-size: auto;
        background-position: top left;
        background-position-x: 100px;
    }
    .p-header__inner{ flex-direction:row; align-items:center; justify-content:center; }
    .p-hero__figure_large {margin: 0 -60px;}
    .p-hero__title {font-size: 25px;}
    .p-coffeeCard, .p-chocoCard {
        background: none;
        box-shadow: none;
    }

    .p-coffeeList, .p-chocoList {
        display: block;
    }
}