/* ============================
   Colorful town -- LP Style
   ============================ */
:root {
   --bg: #ffffff;
   /* page background */
   --panel: #ffffff;
   /* card/background panels */
   --muted: #555555;
   /* secondary text */
   --line: #f0f0f0;
   /* borders */
   --brand: #ff7f32;
   /* orange brand */
   --accent: #fff4e8;
   /* pale orange bg */
   --price: #ff7f32;
   /* price color */
   --text: #222222;
   /* main text (not heavy black) */
}

/* Reset-ish */
*,
*::before,
*::after {
   box-sizing: border-box
}

html,
body {
   height: 100%
}

body {
   margin: 0;
   font-family: Noto Sans JP, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   background: var(--bg);
   color: var(--text);
   line-height: 1.65;
   background: url("../img/bg.webp") repeat;
   background-size: 45%;
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

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

.container {
   max-width: 100%;
   margin: 0 auto;
}

/* =====================
   Hero
   ===================== */
.hero {
   position: relative;
   padding: 0 0 3vw;
}

.hero__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 36vh;
   padding: 0;
}

.hero__image {
   width: clamp(700px, calc((1000 / 1280) * 100vw), 1000px);
}

.hero__image img {
  max-height: 90vh;
  margin: 0 auto;
}

.hero__image span {
   font-size: clamp(20px, 6vw, 40px);
   letter-spacing: .08em;
   text-align: center
}

.hero__txt {
  background: #fff;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, calc(25 / 1280 * 100vw), 25px) 0;
}

.hero__txt img {
   height: clamp(20px, calc(45 / 1280 * 100vw), 45px);
   width: auto;
}

/* =====================
   Global Nav
   ===================== */
.g-nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: #fff;
}

.g-nav__list {
  display: flex;
  gap: 1%;
  justify-content: center;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto;
  max-width: clamp(700px, calc(1000 / 1280 * 100vw), 1000px);
}

.g-nav__list li {
   flex: 0 0 auto;
   text-align: center;
   width: 19%;
   margin: 1vw auto;
}

.g-nav__link img {
   max-height: clamp(16px, calc(20 / 1280 * 100vw), 20px);
}


.g-nav__link {
   display: flex;
   padding: 1.5vw 0;
   border-radius: 10px;
   font-weight: 800;
   color: #fff;
   background: #d17b54;
   border: 1px solid #d17b54;
   transition: ease all 0.4s;
   font-size: clamp(15px, calc(20 / 1280 * 100vw), 20px);
   justify-content: center;
}


.g-nav__link:hover {
   background: #ae5962;
   border: 1px solid #ae5962;
   transition: ease all 0.4s;
}


.g-nav .container {
   padding: 0;
   margin: 0 auto;
   max-width: 1000px;
}

/* =====================
   Section blocks
   ===================== */
.section {
   padding: 0;
}

.section__title {
   display: block;
   background: #b83849;
   color: #fff;
   font-weight: 900;
   letter-spacing: .08em;
   padding: 1vw 0;
   margin: 1.4vw auto;
   font-size: clamp(22px, calc(31 / 1280 * 100vw), 31px);
   text-align: center;
}

/* =====================
   Store Card
   ===================== */
.card {
   padding: 0;
   overflow: hidden;
   max-width: clamp(700px, calc(1000 / 1280 * 100vw), 1000px);
   margin: 0 auto;
}

.card__head {
   background: #fff;
   color: #222;
   padding: 12px 14px;
   font-weight: 800;
   letter-spacing: .02em;
   border-bottom: 1px solid var(--line)
}

.card__body {}

.shop-rap {
   margin: 0 auto;
}

.shop-rap img {
   margin: 0 auto 1.8vw;
}

.shop-rap img:last-child {
  margin: 0 auto;
}

.product-info {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.caption {
   color: var(--muted)
}

.price {
   color: var(--price);
   font-size: clamp(18px, 4.5vw, 24px);
   font-weight: 900
}

.product-image {
   width: 100%;
   aspect-ratio: 16/9;
   background: #fafafa;
   border-top: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #999
}

/* Utilities */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

/* footer */
.lp--footer {
   background: #fff;
   padding: 5vw 10vw 1vw;
   margin: 5vw auto 0;
}

.ftr__inner {
   max-width: clamp(700px, calc(900 / 1280 * 100vw), 900px);
   margin: 0 auto;
}

.copyright {
   text-align: center;
   margin: 5vw auto 3vw;
   font-size: clamp(9px, calc(14 / 1280 * 100vw), 14px);
}





@media (max-width: 767px) {

/* sp > body */
   body {
      background-size: 67%;
   }

   .hero__txt {
      padding: 15px 0;
   }

/* sp > nav */
.g-nav__link img {
   max-height: clamp(12px, calc(14 / 375 * 100vw), 14px);
}
   .g-nav__link {
      padding: 3.6vw 1vw;
    border-radius: 7px;
   }
.g-nav__list {
   margin: 0 auto;
   padding: 1vw 1.8vw;
}

.g-nav__list li {
   width: 49%;
   margin: 0.8vw auto;
}

.g-nav__list li:nth-child(n+3) {
   width: 32%;
}

.g-nav__list li:last-child span {
   transform: scaleX(0.8);
   font-size: 74%;
}

/* sp > card */
.section__title {
   margin: 2.6vw auto;
}
.shop-rap img {
   margin: 0 auto 2.8vw;
}

/* sp > footer */
.lp--footer {
   margin: 10vw auto 0;
}




}