@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: "Hannari"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("./HannariMincho-Regular.woff") format("woff");
}
.lp * {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  opacity: 0.6;
}

img {
  max-width: 100%;
}

p {
  line-height: 1.5;
  color: #333333;
}

html,
body {
  scroll-behavior: smooth;
}
@media screen and (max-width: 450px) {
  html,
  body {
    scroll-padding-top: 20vw;
  }
}

:root {
  font-size: min(16px, 1.6vw);
}
@media screen and (max-width: 450px) {
  :root {
    font-size: 4.2666666667vw;
  }
}

@media screen and (min-width: 451px) {
  .only-sp {
    display: none !important;
  }
}

@media screen and (max-width: 450px) {
  .only-pc {
    display: none !important;
  }
}

/*  #header / footer
---------------------------*/
@media screen and (max-width: 450px) {
  #header-top {
    display: none !important;
  }
}

.footer {
  max-width: var(--content-width);
  background-color: #fff;
  margin: 0 auto;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20px;
}
@media screen and (max-width: 450px) {
  .footer__row {
    display: block;
  }
}
.footer__row > * {
  width: calc(50% - 0.625rem);
}
@media screen and (max-width: 450px) {
  .footer__row > * {
    width: 100%;
  }
}
.footer .registBtn {
  display: flex;
  font-size: 1rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  padding: 0.333em;
  background-color: #909090;
  color: #fff;
}
@media screen and (max-width: 450px) {
  .footer .registBtn {
    margin-bottom: 1.25rem;
  }
}
.footer .footer_block {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #fff;
  position: relative;
  font-size: 14px;
}
@media screen and (max-width: 450px) {
  .footer .footer_block {
    padding: 0 1.25rem;
  }
}
.footer .footer_block .inner {
  padding-bottom: 60px;
  background: #fff;
  width: 100%;
}
.footer .footer_block h2 {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #333;
  line-height: 1;
  font-size: 18px;
}
.footer .more {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.nav-bg {
  background: #ddf1fa;
}

.nav {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0;
}
@media screen and (max-width: 450px) {
  .nav {
    max-width: inherit;
    width: 100%;
  }
}
.nav img {
  width: 100%;
}
.nav__list {
  display: flex;
  justify-content: space-between;
}
.nav__list li a:hover {
  opacity: 1;
}

/*  #freshers
---------------------------*/
#lp {
  /*font-size: 16px;*/
  width: 100%;
  padding-bottom: 6.25rem;
  margin: 0 auto;
  background: #fff;
  font-family: var(--ff-serif1);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  --ff-serif1: "Noto Serif JP", serif;
  --ff-serif2: "Shippori Mincho", serif;
  --ff-script1: "Parisienne", cursive;
  --content-width: 900px;
}

.lp {
  /* カラーバリエーション */
}
.lpTtl {
  display: block;
  width: 100%;
  background-color: #f7f7ed;
}
.lpTtl img {
  width: 100%;
  margin: 0 auto;
  max-width: var(--content-width);
  display: block;
}
.lpNav {
  background-image: url(../images/nav_bg.jpg);
  background-repeat: repeat;
  padding: min(100px, 10vw) min(50px, 5vw);
  width: 100%;
}
@media screen and (max-width: 450px) {
  .lpNav {
    background-size: 12.5px;
  }
  .lpNav--sticky {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .lpNav:has(.scrollable) {
    padding: 0;
  }
  .lpNav:has(.scrollable)::before, .lpNav:has(.scrollable)::after {
    content: "";
    display: block;
    width: 0.65em;
    height: 1em;
    position: absolute;
    top: calc(50% - 0.5em);
    background-color: rgba(0, 0, 0, 0.75);
  }
  .lpNav:has(.scrollable)::before {
    left: 2px;
    clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0 50%);
  }
  .lpNav:has(.scrollable)::after {
    right: 2px;
    clip-path: polygon(100% 50%, 0% 100%, 0% 0%, 100% 50%);
  }
}
.lpNav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
@media screen and (max-width: 450px) {
  .lpNav__inner.scrollable {
    overflow-x: scroll;
    width: 100%;
    padding: 10px 20px;
  }
}
.lpNav__inner ul {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.lpNav__inner ul li,
.lpNav__inner ul a,
.lpNav__inner ul img {
  display: block;
}
.lpNav__inner ul a {
  transition: opacity 200ms;
}
.lpNav__inner ul img {
  display: block;
  max-width: 100%;
}
.lpNav__inner .choice-btn-list {
  --gap: min(20px, 3vw);
  gap: var(--gap);
}
.lpNav__inner .choice-btn-list li {
  width: calc((100% - var(--gap)) * 0.5);
}
.lpNav__inner .choice-btn {
  width: 100%;
  font-size: min(32px, 4vw);
  color: #fff;
  background-color: #40845f;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  white-space: nowrap;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.lpNav__inner .choice-btn::after {
  content: "";
  display: block;
  width: 0.75em;
  height: auto;
  aspect-ratio: 6/5;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  background-color: currentColor;
  margin-left: 0.5em;
}
.lpNav__inner .color-btn-list {
  --gap: min(20px, 2.5vw);
  gap: var(--gap);
  flex-wrap: wrap;
}
@media screen and (max-width: 450px) {
  .lpNav__inner .color-btn-list {
    flex-wrap: nowrap;
    --unit: 20vw;
    width: calc((var(--unit) + var(--gap)) * 8);
    padding: 2vw;
  }
}
.lpNav__inner .color-btn-list li {
  width: calc((100% - var(--gap) * 3) * 0.25);
}
@media screen and (max-width: 450px) {
  .lpNav__inner .color-btn-list li {
    width: var(--unit);
  }
}
.lpNav__inner .color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1/1;
  font-family: var(--ff-script1);
  font-size: min(60px, 8vw);
  text-transform: capitalize;
  background-color: var(--color-main, #333);
  color: var(--color-text, #fff);
  border: 1px solid var(--color-border, #333);
  border-radius: 100vmax;
  font-weight: 400;
}
@media screen and (max-width: 450px) {
  .lpNav__inner .color-btn {
    font-size: 6vw;
  }
}
.lpNav__inner .color-btn::after {
  content: "";
  display: block;
  width: 0.33em;
  height: auto;
  aspect-ratio: 6/5;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  background-color: currentColor;
  margin-top: 0;
}
.lp .type-section {
  padding: 50px min(50px, 5vw);
  background-color: var(--bg-color, #f7f7ed);
}
.lp .type-section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  position: relative;
}
.lp .type-section__header {
  margin-bottom: 30px;
}
.lp .type-section__header .ttl {
  font-size: min(50px, 10vw);
  font-family: var(--ff-serif2);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--main-color, #333);
}
.lp .type-section__header .desc {
  padding-top: 0.25em;
  font-size: min(28px, 5.4vw);
  font-weight: 500;
  font-family: var(--ff-serif1);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 450px) {
  .lp .type-section__header .desc {
    padding-top: 0.5em;
  }
}
.lp .type-section .fig {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em 10px;
  margin-bottom: 25px;
}
.lp .type-section .fig img {
  display: block;
  max-width: 100%;
}
.lp .type-section .detail {
  font-family: var(--ff-serif1);
  font-weight: 600;
}
.lp .type-section .detail p {
  line-height: 1.8;
  font-size: min(16px, 4.6vw);
  letter-spacing: 0.05em;
}
.lp .type-section .btn {
  border-radius: 100vmax;
  position: absolute;
  bottom: 0.4em;
  right: 0;
  font-size: min(18px, 4.6vw);
  font-weight: 600;
  padding: 0.2em 1em 0.3em;
  color: #fff;
  background-color: var(--main-color, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4em;
  line-height: 1;
  min-width: 12em;
  letter-spacing: 0.1em;
  transition: ease 200ms;
}
@media screen and (max-width: 450px) {
  .lp .type-section .btn {
    position: relative;
    margin-top: 25px;
    font-size: 5vw;
  }
}
.lp .type-section .btn::after {
  content: "";
  display: block;
  width: 0.55em;
  height: auto;
  aspect-ratio: 5/6;
  clip-path: polygon(0 0, 100% 50%, 0% 100%);
  background-color: currentColor;
  margin-left: 0.5em;
}
.lp .type-section .product {
  display: block;
}
.lp .type-section .product img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.lp .type-section .detail-fig {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2em 0;
  padding: 50px 0 0;
}
@media screen and (max-width: 450px) {
  .lp .type-section .detail-fig {
    flex-direction: column;
    align-items: center;
  }
  .lp .type-section .detail-fig img {
    max-width: 80%;
  }
}
.lp .type-section .cv-btn {
  width: 100%;
  max-width: 500px;
  height: 3.5em;
  font-size: min(24px, 4.8vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color, #333);
  color: #fff;
  border-radius: 100vmax;
  letter-spacing: 0.2em;
  font-weight: 600;
  margin: min(100px, 10vw) auto 50px;
  transition: ease 200ms;
}
.lp .type-section .cv-btn:not(:last-child) {
  margin-bottom: min(200px, 20vw);
}
.lp .type-section .cv-btn::after {
  content: "";
  display: block;
  width: 0.55em;
  height: auto;
  margin-left: 0.75em;
  aspect-ratio: 5/6;
  clip-path: polygon(0 0, 100% 50%, 0% 100%);
  background-color: currentColor;
}
.lpItems {
  position: relative;
  padding: 100px 0;
  background-color: var(--color-bg, #f7f7ed);
}
@media screen and (max-width: 450px) {
  .lpItems {
    padding: 15vw 0;
  }
}
.lpItems__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}
.lpItems__note {
  position: absolute;
  font-family: "Hannari", "Sawarabi Mincho", serif;
  font-size: min(16px, 3.2vw);
  top: 1em;
  right: 1em;
}
.lpItems__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: min(18px, 5vw);
  color: var(--color-main, #333);
}
.lpItems__ttl span {
  font-size: min(70px, 10vw);
  font-family: var(--ff-script1);
  font-weight: 400;
}
.lpItems__list {
  width: min(var(--content-width), 100vw - 100px);
  margin: 0 auto;
}
.lpItems__list li {
  margin-top: min(50px, 5rem);
  --desc: min(440px, 45vw);
}
@media screen and (max-width: 450px) {
  .lpItems__list li {
    --desc: 90vw;
  }
}
.lpItems__list li a {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
}
@media screen and (max-width: 450px) {
  .lpItems__list li a {
    flex-direction: column;
  }
}
.lpItems__list li a:hover {
  opacity: 1;
}
.lpItems__list li .prod {
  transition: ease 200ms;
}
@media screen and (min-width: 451px) {
  .lpItems__list li .prod {
    max-width: calc(100% - var(--desc));
  }
}
.lpItems__list li .prod img {
  display: block;
  max-width: 100%;
}
.lpItems__list li .prod:hover {
  opacity: 0.6;
}
.lpItems__list li .detail {
  font-size: min(24px, 5vw);
  max-width: var(--desc);
}
.lpItems__list li .detail p {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2em 0;
  flex-wrap: wrap;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}
.lpItems__list li .detail p span {
  display: block;
  padding: 0 0.5em;
}
.lpItems__list li .detail p span:last-child {
  width: 100%;
}
.lpItems__list li .detail .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 2em;
  border-radius: 100vmax;
  background-color: var(--color-main, #333);
  color: var(--color-text, #fff);
  font-size: 0.85em;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  margin-top: 1em;
  transition: ease 200ms;
}
@media screen and (max-width: 450px) {
  .lpItems__list li .detail .btn {
    width: 100%;
    height: 3em;
  }
}
.lpItems__list li .detail .btn::after {
  content: "";
  display: block;
  width: 0.55em;
  height: auto;
  aspect-ratio: 5/6;
  clip-path: polygon(0 0, 100% 50%, 0% 100%);
  background-color: currentColor;
  margin-left: 0.5em;
}
.lpItems__list li .detail .btn:hover {
  opacity: 0.6;
}
@media screen and (min-width: 451px) {
  .lpItems__list li.reverse a {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 450px) {
  .lpItems__list li {
    margin-top: 20vw;
    flex-direction: column;
    padding: 0 0;
    gap: 0.5em;
  }
}
.lpItems.color-theme-white .lpItems__ttl {
  color: var(--color-border);
}
.lpItems.color-theme-white .detail .btn {
  background-color: var(--color-border);
  color: #fff;
}
.lp .color-type-a {
  --main-color: #3f815d;
  --bg-color: #effcf2;
}
.lp .color-type-b {
  --main-color: #01736f;
  --bg-color: #edfdfc;
}
.lp .color-type-c {
  --main-color: #2c7e96;
  --bg-color: #e2f4fe;
}
.lp .color-theme-black {
  --color-main: #000000;
  --color-border: #000000;
  --color-text: #ffffff;
  --color-bg: #dcdcdc;
}
.lp .color-theme-brown {
  --color-main: #604335;
  --color-border: #604335;
  --color-text: #ffffff;
  --color-bg: #ece2e0;
}
.lp .color-theme-blue {
  --color-main: #195a84;
  --color-border: #195a84;
  --color-text: #ffffff;
  --color-bg: #e1ecf2;
}
.lp .color-theme-green {
  --color-main: #0e5f50;
  --color-border: #0e5f50;
  --color-text: #ffffff;
  --color-bg: #e9f3f2;
}
.lp .color-theme-red {
  --color-main: #b83f37;
  --color-border: #b83f37;
  --color-text: #ffffff;
  --color-bg: #f3e9e8;
}
.lp .color-theme-navy {
  --color-main: #102457;
  --color-border: #102457;
  --color-text: #ffffff;
  --color-bg: #dde3f1;
}
.lp .color-theme-gray {
  --color-main: #707070;
  --color-border: #707070;
  --color-text: #ffffff;
  --color-bg: #eeeeee;
}
.lp .color-theme-white {
  --color-main: #ffffff;
  --color-border: #5f5f5f;
  --color-text: #5f5f5f;
  --color-bg: #ffffff;
}

/* ナビゲーションを途中から固定、フッター前で非表示に */
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

.is-hide {
  transform: translateY(-100%);
}

/* // ナビゲーションを途中から固定、フッター前で非表示に */
.flex_wrap {
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}
.flex_wrap-wrap {
  flex-wrap: wrap;
}

.navi_txt_item {
  border-left: 1px solid #ffffff;
  width: 100%;
  text-align: center;
}
.navi_txt_item:last-child {
  border-right: 1px solid #ffffff;
}
.navi_txt_item a {
  color: #ffffff;
  padding: 1.2em 0;
  display: block;
}

.navi_img {
  max-width: 950px;
  margin: 0 auto 10%;
}
.navi_img_item {
  display: block;
  margin-bottom: 3%;
}
.navi_img_item a {
  display: block;
}

#scrollToTop {
  z-index: 101;
  position: fixed;
  bottom: 3.75rem;
  right: 2.5rem;
  width: 44px;
  height: 44px;
  background: #40825e;
  border-radius: 100vmax;
}
@media screen and (min-width: 1001px) {
  #scrollToTop {
    right: auto;
    left: calc(50% + 400px);
  }
}
@media screen and (max-width: 450px) {
  #scrollToTop {
    right: 0.625rem;
  }
}
#scrollToTop::before {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  left: 14px;
  border-width: 0 8px 12px 8px;
  border-style: solid;
  border-color: transparent transparent #fff;
}

/* 商品一覧 */
.ctgr {
  width: 100%;
  max-width: var(--content-width);
  padding: 150px 0 75px;
  margin: 0 auto;
  background: #fff;
}
.ctgr + .ctgr {
  margin-top: -75px;
}
@media screen and (max-width: 450px) {
  .ctgr {
    padding: 5rem 0;
  }
  .ctgr + .ctgr {
    margin-top: -5rem;
  }
}
.ctgr__header {
  padding: 0;
  text-align: center;
  margin-bottom: 30px;
}
.ctgr__header p {
  font-size: 15px;
  line-height: 1.666;
  letter-spacing: 0.1em;
  text-align: center;
  color: #260e10;
}
@media screen and (max-width: 450px) {
  .ctgr__header p {
    font-size: 0.725rem;
  }
}
.ctgr__ttl img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.ctgr__wrap {
  width: calc(100% - 2.5rem);
  max-width: var(--content-width);
  margin: 0 auto;
  position: relative;
}
.ctgr .itemList {
  display: flex;
  flex-wrap: wrap;
  --gap: 1.25rem;
  gap: var(--gap);
}
@media screen and (max-width: 450px) {
  .ctgr .itemList {
    width: 100%;
    --gap: 0.625rem;
    gap: calc(var(--gap) * 2) var(--gap);
  }
}
.ctgr .itemList__item {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 451px) {
  .ctgr .itemList__item {
    width: calc((100% - var(--gap) * 3) * 0.25);
  }
  .ctgr .itemList__item .discountRate {
    font-size: 2.5rem;
  }
  .ctgr .itemList__item.featured {
    width: calc((100% - var(--gap) * 1) * 0.5);
  }
  .ctgr .itemList__item.featured .discountRate {
    font-size: 4rem;
  }
  .ctgr .itemList__item.featured .item_saleprice {
    font-size: 120%;
  }
}
@media screen and (max-width: 450px) {
  .ctgr .itemList__item {
    width: calc((100% - var(--gap)) * 0.5);
  }
  .ctgr .itemList__item .discountRate {
    font-size: 2.5rem;
  }
  .ctgr .itemList__item.featured {
    width: 100%;
  }
  .ctgr .itemList__item.featured .discountRate {
    font-size: 4rem;
  }
  .ctgr .itemList__item.featured .item_saleprice {
    font-size: 100%;
  }
}
.ctgr .itemList__item a {
  display: block;
}
.ctgr .linkArea {
  padding-top: 4.375rem;
}
.ctgr .linkArea .ttl {
  background-color: #e9f0e9;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0.33em;
  color: #594840;
}
.ctgr .linkArea__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 1.25rem;
  padding-top: 1rem;
}
.ctgr .linkArea__list li {
  display: block;
  width: calc((100% - 3.75rem) * 0.25);
}
@media screen and (max-width: 450px) {
  .ctgr .linkArea__list li {
    width: calc((100% - 1.25rem) * 0.5);
  }
}
.ctgr .linkArea__list li a {
  display: block;
  border-bottom: 2px solid #2a6835;
  color: #2a6835;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.9375rem;
  padding-bottom: 0.25em;
  padding-top: 1em;
}

.brandArea {
  display: block;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  background: #fff;
  padding-top: 4.6875rem;
  padding-bottom: 9.375rem;
}
.brandArea .ttl {
  background-color: #909090;
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0.33em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.brandArea__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9375rem 0.625rem;
  padding: 0 0.9375rem;
}
.brandArea__list li {
  width: calc((100% - 1.875rem) / 4);
}
.brandArea__list li a,
.brandArea__list li img {
  display: block;
  max-width: 100%;
}

/* 吹き出し */
.discountRate {
  position: absolute;
  display: flex;
  width: 100%;
  background: #e70202;
  color: #fff;
  transform: rotate(45deg);
  transform-origin: center top;
  left: 50%;
  justify-content: center;
  align-items: center;
  font-family: "Ubuntu", sans-serif;
  font-feature-settings: "palt";
  font-size: 4rem;
  font-weight: 700;
  padding-top: 0.45em;
  letter-spacing: -0.1em;
  gap: 0.1em;
  z-index: 10;
}
.discountRate span {
  font-size: 0.5em;
  line-height: 0.9;
}
.discountRate span span {
  display: block;
  font-size: 0.5em;
  letter-spacing: 0;
}

.item_img {
  border: 1px solid rgba(89, 73, 63, 0.25);
  margin-bottom: 0.3125rem;
}
.item_img img {
  display: block;
}

.item_price {
  margin-bottom: 0.3125rem;
}

.item_price {
  font-feature-settings: "palt";
  font-size: 150%;
  font-weight: bold;
  white-space: nowrap;
  color: #e70202;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.1em;
}
@media screen and (max-width: 450px) {
  .item_price {
    font-size: 5vw;
  }
}
.item_price span {
  font-size: 60%;
}

.item_saleprice {
  font-feature-settings: "palt";
  font-size: 120%;
  font-weight: 500;
  white-space: nowrap;
  color: #59493f;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.1em;
  margin-top: -0.625rem;
  margin-bottom: 0.625rem;
}
@media screen and (max-width: 450px) {
  .item_saleprice {
    font-size: 14px;
  }
}
.item_saleprice span {
  font-size: 12px;
}

.item_btn {
  color: #ffffff;
  background-color: #2f81a7;
  padding: 1em 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 450px) {
  .item_btn {
    color: #ffffff;
    background-color: #2f81a7;
    padding: 10px 0;
    font-size: 0.375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
  }
}

@media screen and (max-width: 450px) {
  .featured .item_btn {
    color: #ffffff;
    background-color: #2f81a7;
    padding: 0.8em 0;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
  }
}

/*****************************************************************************************
  liquid style
*****************************************************************************************/
@media screen and (max-width: 1024px) {
  #gift .main {
    overflow: hidden;
  }
  #gift .main img {
    width: 120%;
    position: relative;
    left: -10%;
  }
}
/*****************************************************************************************
  tablet style
*****************************************************************************************/
@media screen and (max-width: 768px) {
  /*  #header / footer
    ---------------------------*/
  #header_pc,
  #footer_pc {
    padding: 0 6%;
  }
  #header_pc table {
    min-width: 100%;
    width: 100%;
    margin: 0 auto 2%;
  }
  #header_pc table td {
    display: flex;
  }
  #gift {
    font-size: 80%;
  }
  .navi_txt,
  .navi_img,
  .ctgr_wrap {
    padding: 0 6%;
  }
  .navi_txt_item {
    align-self: stretch;
  }
  .navi_txt_item span {
    display: block;
  }
  /* 吹き出し */
  .ctgr_wrap::after {
    background-size: contain;
    width: 120px;
    height: 120px;
  }
}
/*****************************************************************************************
  sp style
*****************************************************************************************/
@media screen and (max-width: 450px) {
  /*  #header / footer
    ---------------------------*/
  #header_pc,
  #footer_pc {
    display: none;
  }
  #header_sp {
    display: block;
  }
  #gift .main img {
    width: 130%;
    left: -15%;
  }
  .flex_wrap {
    flex-wrap: wrap;
  }
  .navi_txt {
    padding: 0;
  }
  .navi_txt_item {
    width: 33%;
    border-left: none;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
  }
  .navi_txt_item:nth-child(2),
  .navi_txt_item:nth-child(5) {
    width: 34%;
  }
  .navi_txt_item:nth-child(3n) {
    border-right: none;
    margin: 0;
  }
  .navi_txt_item:nth-child(n+4) {
    border-bottom: 0;
  }
  .navi_img,
  .ctgr_wrap {
    padding: 0 4%;
  }
  .ctgr_wrap {
    padding-top: 12% !important;
  }
  .ctgr_wrap::after {
    background-size: contain;
    width: 80px;
    height: 80px;
  }
  .ctgr_name {
    font-size: 250%;
    margin: 0 auto 10%;
  }
}/*# sourceMappingURL=screen.css.map */