@charset "utf-8";
/* ===========================================
 * ROOT
 * ======================================== */
:root {
  --font-fm-main: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --color-area_rurubu: #925CA4;
  --color-area-hokkaido: #02A0E9;
  --color-area-tohoku: #0076C2;
  --color-area-kanto: #009A45;
  --color-area-hokuriku: #929C27;
  --color-area-chubu: #8FC31F;
  --color-area-kinki: #BD8914;
  --color-area-chugoku: #D45336;
  --color-area_shikoku: #F18200;
  --color-area_kyushu: #E95378;
}
/* ===========================================
 * LIST
 * ======================================== */
h2 {
  width: 100%;
  padding-block: 12px;
  margin-bottom: 30px;
  text-align: center;
  font-family: "Hiragino Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  background-color: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 > span {
  display: block;
}
.category-wrap {
  padding-bottom: 40px;
}
.category-inner {
  padding-inline: 28px;
  display: grid;
  gap: 24px;
}
.product-card {
  display: grid;
  gap: 10px;
}
p {
  color: var(--common-accent-black, #111);
  font-family: "Hiragino Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 167.5%; /* 23.45px */
}
img {
  border-radius: 6px;
}

/* ===========================================
 * BACK
 * ======================================== */
.top__back {
  width: 100%;
  padding-top: 20px;
  padding-left: 14px;
  text-align: center;
  font: 600 normal 20px / 1.3 var(--font-fm-main);
  letter-spacing: 0.04px;
  color: #111111;
  display: block;
}
.top__back > span {
  width: fit-content;
  display: flex;
}
.top__back > span::before {
  content: "";
  width: 24px;
  height: 24px;
  background: center center / 24px 24px no-repeat url(/cp/tougou/assets/img/icon_arrow-left.svg);
}

/* ===========================================
 * TOTOP
 * ======================================== */
#totop {
  bottom: 10px;
}

/* ===========================================
 * TOP
 * ======================================== */
.top__wrap {
  padding-block: 0 40px;
  background: center bottom / 400px 30px repeat-x url(/cp/tougou/assets/img/michinoeki_kv_bk.png);
  background-color: #FDEC03;
  overflow: hidden;
  position: relative;
  z-index: auto;
}
.top__wrap::before,
.top__wrap::after {
  content: "";
  width: 5px;
  height: 1342px;
  background: left top / 5px 1342px repeat-y url(/cp/tougou/assets/img/michinoeki_kv_deco.png);
  position: absolute;
  z-index: auto;
  top: 0;
}
.top__wrap::before {
  left: 0;
}
.top__wrap::after {
  right: 0;
}
.top__inner {
  padding-inline: 14px;
}
.container {
  width: min(100%, 750px);
  margin-inline: auto;
  background-color: #FFFFFF;
}
/* ===========================================
 * NABI
 * ======================================== */
/* .navi__wrap {
  padding-bottom: 40px;
  background-color: #FDEC03;
} */
/* .navi__inner {
  padding-inline: 14px;
} */
.navi__btn__container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.navi__btn {
  width: calc((100% - (6px * 3)) / 4);
  padding-bottom: 15px;
  aspect-ratio: 1 / 1;
  text-align: center;
  font: 600 normal 14px / 1.3 var(--font-fm-main);
  color: #FFFFFF;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 4px 2px rgba(12, 12, 13, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
}
.navi__btn::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-inline: auto;
  border-top: solid 2px #FFFFFF;
  border-right: solid 2px #FFFFFF;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 20px;
  transform: rotate(135deg);
}
@media screen and (min-width: 560px) {
  .navi__btn {
    font: 600 normal 1.25vw / 1.3 var(--font-fm-main);
  }
}
/* るるぶオススメ */
#rurubu_special {
  background-color: #EFE6F2;
}
#rurubu_special h2 {
  background-color: #925CA4;
}
#rurubu_special h3 {
  color: #925CA4;
}
.btn__rurubu {
  background-color: #925CA4;
}
/* 北海道 */
#hokkaido {
  background-color: #E6EEF2;
}
#hokkaido h2 {
  background-color: #02A0E9;
}
#hokkaido h3 {
  color: #02A0E9;
}
.btn__hokkaido {
  background-color: #02A0E9;
}
/* 東北 */
#tohoku {
  background-color: #DAE9F2;
}
#tohoku h2 {
  background-color: #0076C2;
}
#tohoku h3 {
  color: #0076C2;
}
.btn__tohoku {
  background-color: #0076C2;
}
/* 関東 */
#kanto {
  background-color: #DAF2E5;
}
#kanto h2 {
  background-color: #009A45;
}
#kanto h3 {
  color: #009A45;
}
.btn__kanto {
  background-color: #009A45;
}
/* 北陸 */
#hokuriku {
  background-color: #EFF2E6;
}
#hokuriku h2 {
  background-color: #929C27;
}
#hokuriku h3 {
  color: #929C27;
}
.btn__hokuriku {
  background-color: #929C27;
}
/* 中部 */
#chubu {
  background-color: #EEF2E6;
}
#chubu h2 {
  background-color: #8FC31F;
}
#chubu h3 {
  color: #8FC31F;
}
.btn__chubu {
  background-color: #8FC31F;
}
/* 近畿 */
#kinki {
  background-color: #F2EFE6;
}
#kinki h2 {
  background-color: #BD8914;
}
#kinki h3 {
  color: #BD8914;
}
.btn__kinki {
  background-color: #BD8914;
}
/* 中国 */
#chugoku {
  background-color: #F2EFE6;
}
#chugoku h2 {
  background-color: #D45336;
}
#chugoku h3 {
    color: #D45336;
  }
.btn__chugoku {
  background-color: #D45336;
}
/* 四国 */
#shikoku {
  background-color: #F2EDE6;
}
#shikoku h2 {
  background-color: #F18200;
}
#shikoku h3 {
  color: #F18200;
}
.btn__shikoku {
  background-color: #F18200;
}
/* 九州・沖縄 */
#kyushu_okinawa {
  background-color: #F2E6E9;
}
#kyushu_okinawa h2 {
  background-color: #E95378;
}
#kyushu_okinawa h3 {
  color: #E95378;
}
.btn__kyushu_okinawa {
  background-color: #E95378;
}