@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
  --main: #93BAA8;
  --sub: #F2F7F5;
  --be: #F5F5F2;
  --accent: #DE8D8D;
  --padding: 72px;
}
@media screen and (max-width: 768px) {
  :root {
    --padding: 40px;
  }
}
html {
  overflow: auto;
}
body {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: .5px;
  font-weight: 400;
  font-size: 15px;
  color: #000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
@media screen and (max-width: 1180px) {
  body {
    font-size: 13px
  }
}
.shuei, #gnav a, .icon {
  font-family: "dnp-shuei-mgothic-std", sans-serif;
  font-weight: 600;
  font-style: normal;
}
body img {
  display: inline;
}
article, aside, footer, header, nav, section, main {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  line-height: 1.2;
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, mark, del, ins, strike, abbr, dfn, blockquote, q, cite, code, pre, ol, ul, li, dl, dt, dd, div, section, article, main, aside, nav, header, hgroup, footer, img, figure, figcaption, address, time, audio, video, canvas, iframe, details, summary, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
p {
  margin: 0
}
a {
  color: inherit;
  outline: none;
  text-decoration: none;
  display: inline-block;
}
a:hover img {
  opacity: .8;
}
img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: top;
}
video {
  max-width: 100%;
  height: auto;
}
code, kbd, pre, samp {
  font-size: inherit;
}
ul, ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  text-align: left;
  vertical-align: top;
}
blockquote, q {
  quotes: none;
}
blockquote::after, blockquote::before, q::after, q::before {
  content: "";
  content: none;
}
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
address {
  font-style: normal;
}
input, textarea, select {
  max-width: 100%;
}
.sp {
  display: none;
}
@media screen and (max-width: 1180px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .scroll_area {
    overflow-x: auto;
  }
}
/*-----------------------
/*clearfix
---------------------------------*/
/* For modern browsers */
.cf:before, .cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
/* For IE 6/7 only */
.cf {
  *zoom: 1;
}
.l-row {
  display: flex;
  flex-wrap: wrap;
}
.l-row--between {
  justify-content: space-between;
}
.l-row--center {
  justify-content: center;
}
.l-row--middle {
  align-items: center;
}
.l-row--end {
  align-items: flex-end;
}
.l-row.nowrap {
  flex-wrap: nowrap;
}
.l-row.l-row--2 > * {
  width: calc(100% / 2 - 1.6em);
}
.l-row.l-row--3 > * {
  width: calc(100% / 3 - 1.6em);
}
.l-row.l-row--4 > * {
  width: calc(100% / 4 - 1.6em);
}
.l-row.l-row--5 > * {
  width: calc(100% / 5 - 1.6em);
}
@media screen and (max-width: 768px) {
  .title02, .btn02 {
    font-size: 18px;
  }
  .l-row.l-row--1_sp > * {
    width: 100%;
  }
  .l-row.l-row--2_sp > * {
    width: 49%;
  }
  .l-row.l-row--3_sp > * {
    width: calc(100% / 3 - 1.6em);
  }
  .l-row.l-row--4_sp > * {
    width: calc(100% / 4 - 1.6em);
  }
  .l-row.l-row--5_sp > * {
    width: calc(100% / 5 - 1.6em);
  }
}
.bold{
	font-weight:bold;
}
.mr10 {
  margin-right: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb90 {
  margin-bottom: 90px;
}
.mt40 {
  margin-top: 40px
}
.txt_80 {
  font-size: .8em;
}
.txt_120 {
  font-size: 1.2em;
}
.tar {
  text-align: right;
}
.tac {
  text-align: center;
}
.fadein {
  opacity: 0;
  transition: all 1s ease 0s;
}
.fadein.is-in {
  opacity: 1
}
.fadein-up {
  -webkit-transform: translate(0, 20px);
  opacity: 0;
  transform: translate(0, 20px);
  transition: all .6s ease 0s;
  transition-delay: 0;
}
.fadein-up.is-in {
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transform: translate(0, 0);
}
.delay1 {
  opacity: 0;
  transition: all 0.8s ease 0s;
  transition-delay: .3s;
}
.delay2 {
  opacity: 0;
  transition: all 0.8s ease 0s;
  transition-delay: .7s;
}
.delay3 {
  opacity: 0;
  transition: all 0.8s ease 0s;
  transition-delay: 1.1s;
}
.delay1.is-in, .delay2.is-in, .delay3.is-in {
  opacity: 1;
}
.fadein-right {
  -webkit-transform: translate(3.8rem, 0);
  opacity: 0;
  transform: translate(3.8rem, 0);
  transition: all 0.8s ease 0s;
  transition-delay: .3s;
}
.fadein-right.is-in {
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transform: translate(0, 0);
}
.fadein-left {
  -webkit-transform: translate(-3.8rem, 0);
  opacity: 0;
  transform: translate(-3.8rem, 0);
  transition: all 0.8s ease 0s;
  transition-delay: .3s;
}
.fadein-left.is-in {
  -webkit-transform: translate(0, 0);
  opacity: 1;
  transform: translate(0, 0);
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.imgzoom {
  overflow: hidden;
}
.imgzoom img {
  -webkit-animation: zoomin .6s 1;
  animation: zoomin .3s 1;
  animation-fill-mode: forwards;
}
.imgzoom:hover img {
  -webkit-animation: zoomup .8s 1;
  animation: zoomup .6s 1;
  animation-fill-mode: forwards;
}
@keyframes zoomin {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomup {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.l-inner {
  max-width: 1180px;
  margin: 0 auto
}
@media screen and (max-width: 1180px) {
  .l-inner {
    margin: 0 5%;
  }
}
.p-ttl {
  text-align: center;
  font-size: 24px;
  letter-spacing: 1px;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 1180px) {
  .p-ttl {
    line-height: 1;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 25px
  }
}
.p-ttl span {
  display: block;
  color: var(--main);
  font-size: 14px;
  margin-top: 5px
}
.swiper-pagination {
  position: inherit;
  padding: 10px 0;
}
@media screen and (max-width: 1180px) {
  .swiper-pagination {
    padding: 0 0 10px;
  }
}
.swiper-pagination-bullet {
  margin: 0 5px
}
.swiper-pagination-bullet-active {
  background: var(--main)
}
.item_list li {
  text-align: center;
  margin: 0 1% 3%;
  position: relative
}
.item_list a {
  display: block;
}
.item_list .img, .item_list .img img {
  width: 100%;
  height: auto;
  display: block;
}
.item_list .item_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 8px
}
@media screen and (max-width: 768px) {
  .item_list .item_name {
    font-size: 12px;
  }
}
.item_list .item_info {
  justify-content: space-between;
}
.item_list .price {
  opacity: .6;
  font-size: 16px
}
@media screen and (max-width: 768px) {
  .item_list .price {
    font-size: 12px;
  }
}
.item_list .price span {
  font-size: 12px
}
.icon {
  display: inline-block;
  line-height: 1;
  border-radius: 4px;
  padding: 4px 8px 3px;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .icon {
    padding: 3px 5px 2px;
    font-size: 12px;
  }
}
.icon._freeshipping {
  background: var(--accent);
  color: #fff;
}
.icon._new {
  background: #fff;
  color: #BE3A77;
  border: 1px solid #BE3A77
}
/*---------------
header
----------------*/
.p-header__top {
  background: var(--main);
  padding: 5px 3%;
  justify-content: space-between;
  color: #fff;
}
@media screen and (max-width: 1180px) {
  .p-header__top {
    padding: 5px 1% 5px 3%;
  }
}
.p-header__top p {
  margin-bottom: 0;
}
.sub-nav {
  justify-content: flex-end;
  margin-bottom: 0;
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  .sub-nav {
    display: none;
  }
}
.sub-nav a {
  padding: 0 .6em;
  position: relative;
  font-size: 12px;
  color: #fff;
}
.sub-nav a:hover {
  opacity: .7
}
.sub-nav a:after {
  content: '|';
  position: absolute;
  top: 0;
  font-size: 14px;
  right: 0
}
.sub-nav li:last-child a:after {
  display: none
}
.p-header__middle {
  height: 78px;
  position: relative
}
@media screen and (max-width: 1180px) {
  .p-header__middle {
    height: 50px;
    width: 100%;
    background: #fff;
  }
  .p-header__middle.fixed {
    position: fixed;
    top: 0;
    z-index: 101
  }
}
.site-ttl {
  width: 25%;
  max-width: 260px;
  position: absolute;
  top: 14%;
  left: 3%;
  z-index: 100
}
.site-ttl span {
  font-size: 10px;
  opacity: .5
}
@media screen and (max-width: 1180px) {
  .site-ttl {
    width: 220px;
    max-width: 100%;
    top: 3px;
    left: 3%;
  }
}
.site-ttl a {
  align-items: center;
}
.site-ttl img {
  width: calc(100% - 6em);
  margin-right: 1em;
}
@media screen and (max-width: 1180px) {
  .site-ttl img {
    margin-right: 4px;
  }
}
.site-ttl span {
  font-size: 12px;
}
@media screen and (max-width: 1180px) {
  .site-ttl span {
    font-size: 10px;
    margin-top: 4px;
  }
}
.p-header__middle .linkarea {
  position: absolute;
  right: 3%;
  height: 78px;
  display: flex;
  align-items: center;
  top: 0;
  z-index: 11;
  font-size: 12px
}
.p-header__middle .linkarea .mypage {
  margin-right: 16px
}
.p-header__middle .linkarea .mypage a {
  position: relative;
  width: 80px
}
@media screen and (max-width: 768px) {
  .p-header__middle .linkarea .mypage a {
    width: auto
  }
}
.p-header__middle .linkarea .mypage a:after {
  content: 'マイページ';
  position: absolute;
  right: 0;
  top: 1px
}
@media screen and (max-width: 768px) {
  .p-header__middle .linkarea .mypage a:after {
    content: '';
    position: inherit;
  }
}
@media screen and (max-width: 768px) {
  .p-header__middle .linkarea .mypage {
    margin-right: 12px;
    width: 17px;
  }
}
.p-header__middle .linkarea .ico img {
  margin-right: 5px;
  width: 23px
}
@media screen and (max-width: 768px) {
  .p-header__middle .linkarea .ico img {
    width: 20px;
    margin-right: 9px;
  }
}
@media screen and (max-width: 1180px) {
  .p-header__middle .linkarea {
    height: 50px;
    right: 47px
  }
}
.total-quant {
  background: var(--accent);
}
@media screen and (max-width: 768px) {
  .total-quant {
    right: -4px;
  }
}
.p-search {
  text-align: center;
  position: relative;
}
.p-search input[type=text] {
  width: 90%;
  margin: 0 auto;
  padding: 1em 3em 1em 1.6em;
  background: #F0F0F0;
  border: none;
  border-radius: 3em;
  height: auto;
}
@media screen and (max-width: 1180px) {
  .p-search input[type=text] {
    width: 100%
  }
}
.p-search input[type=text].icon {
  margin: 0;
  padding: 0;
  background: url(../images/ico-search.svg) no-repeat center;
  cursor: pointer;
  width: 35px;
  height: 25px;
  border: none;
  position: absolute;
  top: 50%;
  right: -2em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.p-search .btn-outline-secondary {
  border-color: transparent;
  position: absolute;
  top: 7px;
  right: 16px;
}
.search {
  margin-right: 20px
}
@media screen and (max-width: 1180px) {
  /* spnav*/
  .spnav {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 79px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    overflow: auto;
    padding: 10px 0;
    z-index: 30
  }
  .spnav .inner {
    padding: 0;
  }
  #js-search {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50px;
    background: #fff;
    width: 100%;
    padding: 5%;
    z-index: 100;
    transition: all .4s;
  }
  .spnav.active, #js-search.active {
    opacity: 1;
    visibility: visible;
  }
  .openbtn {
    position: absolute;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: #fff;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .openbtn span {
    display: block;
    transition: all .4s;
    height: 3px;
    background-color: #606060;
    z-index: 40;
    margin: 1px 0;
    border-radius: 4px;
  }
  .openbtn span:nth-of-type(1) {
    top: 22px;
    width: 40%;
  }
  .openbtn span:nth-of-type(2) {
    top: 29px;
    width: 40%;
  }
  .openbtn span:nth-of-type(3) {
    top: 36px;
    width: 40%;
  }
  .openbtn.active span:nth-of-type(1) {
    transform: translateY(3px) rotate(-45deg);
  }
  .openbtn.active span:nth-of-type(2) {
    transform: translateY(-2px) rotate(45deg);
  }
  .openbtn.active span:nth-of-type(3) {
    display: none
  }
  .spnav .c-accordion {
    border: none
  }
  .spnav .c-accordion__title {
    text-align: left;
    font-size: 18px;
    padding: 0.5em 1em;
  }
  .spnav .c-accordion__title--arrow {
    right: 18px
  }
  .spnav .c-accordion__content {
    padding: 18px;
    background: var(--sub)
  }
  .spnav .c-accordion__content a {
    padding: .5em 0;
    font-size: 15px;
    position: relative;
    width: 100%
  }
  .spnav .c-accordion__content a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -4px;
  }
  .spnav ._main {
    border-bottom: 1px solid #ebebeb
  }
  .spnav ._sub {
    padding: 18px
  }
  .spnav ._sub a {
    padding: 12px 0;
    font-size: 14px;
  }
  .spnav ._main .c-accordion__content._series li {
    width: 48%;
    margin: 0 1% 1%;
    float: left;
  }
}
@media screen and (max-width: 768px) {
  .spnav {
    top: 50px
  }
}
/*---------------------------------------------
gnav
---------------------------------------------*/
#gnav {
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 10;
}
#gnav > ul {
  margin: 0 auto auto 270px;
  width: 100%;
  height: 78px;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
}
#gnav > ul > li > a {
  height: 78px;
  line-height: 78px;
  display: flex;
  align-items: center;
  text-align: center;
  transition: all 0s linear;
  text-decoration: none;
  padding: 0 2em 0 0;
  opacity: 1;
  font-size: 18px;
  letter-spacing: 1px
}
@media screen and (max-width: 1380px) {
  #gnav > ul > li > a {
    padding: 0 1em 0 0;
    font-size: 14px;
  }
}
#gnav > ul > li > a span {
  margin-left: 5px
}
.dli-plus {
  display: inline-block;
  vertical-align: middle;
  color: var(--main);
  line-height: 1;
  width: 14px;
  height: 0.2em;
  background: currentColor;
  border-radius: 0.4em;
  position: relative;
}
.dli-plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
#gnav > ul > li > a:hover .dli-plus:before {
  display: none
}
.navwrap {
  top: 78px;
  left: 0;
  width: 100%;
  margin: 0 auto;
  height: 0;
  text-align: center;
  background: var(--sub);
  position: absolute;
  z-index: 10;
  overflow: hidden;
  display: none;
}
.megainner {
  margin: 0 auto;
  padding: 30px 0;
  max-width: 1000px;
  height: auto;
  line-height: 1.5em;
  text-align: left;
  color: var(--bk);
  position: relative;
  box-sizing: border-box;
}
.megainner .site-nav__in {
  width: 100%;
  flex-direction: row;
}
.megainner .site-nav__in .ttl {
  margin-bottom: 1em;
  font-weight: 700
}
.site-nav__list {
  width: 100%;
}
.site-nav__list li {
  width: 24%;
  margin-right: 1%;
  margin-bottom: 1%
}
.site-nav__list li a {
  padding: 0.6em 1em;
  border: 1px solid #bbb;
  background: #fff;
  position: relative;
  display: block;
  border-radius: 3px;
}
.site-nav__list li a:hover {
  background: var(--main);
  color: #fff;
}
.site-nav__list li a:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #b5aeae;
  border-right: solid 2px #b5aeae;
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -4px;
  transform: rotate(45deg);
}
.mainwrap {
  overflow: hidden;
}
@media screen and (max-width: 1180px) {
  .mainwrap {
    padding-bottom: 64px
  }
}
/*---------------------------------------------
mv
---------------------------------------------*/
.topbnr_area {
  position: relative;
}
@media screen and (max-width: 1180px) {
  .topbnr_area {
    width: 100%;
    margin: 8px auto 0;
  }
}
@media screen and (max-width: 1180px) {
  .topbnr_list {
    margin-bottom: 30px
  }
}
.topbnr_list li a:hover {
  opacity: .8
}
.topbnr_list__img {
  border-radius: 30px
}
.topbnr_list__img img {
  border-radius: 30px
}
/*---------------------------------------------
/*category_area
---------------------------------------------*/
.category_area {
  background: url(../images/bg-category.jpg)no-repeat;
  background-size: cover;
  padding: var(--padding) 0;
}
@media screen and (max-width: 768px) {
  .category_area .l-inner {
    margin: 0
  }
}
.category_list {
  justify-content: space-between;
  padding: 0 5%
}
@media screen and (max-width: 768px) {
  .category_list {
    width: 640px;
  }
}
.category_list li {
  width: calc(100% / 6 - 4%);
  text-align: center;
  margin: 0 2% 3%;
}
@media screen and (max-width: 768px) {
  .category_list li {
    width: calc(100% / 6 - 2%);
    margin: 0 1% 10px;
  }
}
.category_list li .ttl {
  font-weight: 700
}
@media screen and (max-width: 768px) {
  .category_list li .ttl {
    font-weight: 12px
  }
}
/*---------------------------------------------
/*ranking_area
---------------------------------------------*/
.ranking_area {
  padding: var(--padding) 0;
}
.item_list._ranking li:nth-child(-n+3) {
  width: calc(100% / 3 - 2%);
}
@media screen and (max-width: 768px) {
  .item_list._ranking li:nth-child(-n+2) {
    width: calc(100% / 2 - 2%);
  }
  .item_list._ranking li:nth-child(3) {
    width: calc(100% / 3 - 2%);
  }
}
.item_list._ranking li:nth-child(n+4) {
  width: calc(100% / 5 - 2%);
}
@media screen and (max-width: 768px) {
  .item_list._ranking li:nth-child(n+4) {
    width: calc(100% / 3 - 2%);
  }
}
.item_list._ranking li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 3px;
  line-height: 20px;
  color: #fff;
  z-index: 2;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.item_list._ranking li:nth-child(-n+3):before {
  content: '';
  padding: 11px 30px 0 0;
  width: 70px;
  height: 70px;
}
.item_list._ranking li:nth-child(n+4):before {
  content: '';
  padding: 6px 20px 0 0;
  width: 50px;
  height: 50px;
}
.item_list._ranking li:nth-child(1):before {
  background: #E0D36A;
  content: '1';
  font-size: 20px;
}
.item_list._ranking li:nth-child(2):before {
  background: #C0C0C0;
  content: '2';
  font-size: 20px;
}
.item_list._ranking li:nth-child(3):before {
  background: #B49688;
  content: '3';
  font-size: 20px;
}
.item_list._ranking li:nth-child(4):before {
  background: #b5aeae;
  content: '4';
  font-size: 16px;
}
.item_list._ranking li:nth-child(5):before {
  background: #b5aeae;
  content: '5';
  font-size: 16px;
}
.item_list._ranking li:nth-child(6):before {
  background: #b5aeae;
  content: '6';
  font-size: 16px;
}
.item_list._ranking li:nth-child(7):before {
  background: #b5aeae;
  content: '7';
  font-size: 16px;
}
.item_list._ranking li:nth-child(8):before {
  background: #b5aeae;
  content: '8';
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .item_list._ranking li:nth-child(-n+3):before, .item_list._ranking li:nth-child(n+4):before {
    padding: 3px 20px 0 0;
    width: 40px;
    height: 40px;
  }
  .item_list._ranking li:nth-child(1):before, .item_list._ranking li:nth-child(2):before, .item_list._ranking li:nth-child(3):before {
    font-size: 16px
  }
}
/*---------------------------------------------
/*recommend_area
---------------------------------------------*/
.recommend_area {
  padding: var(--padding) 0;
  background: var(--sub)
}
.item_list._recommend li {
  width: calc(100% / 4 - 2%);
}
@media screen and (max-width: 768px) {
  .item_list._recommend li {
    width: calc(100% / 2 - 2%);
  }
}
/*---------------------------------------------
/*newitem_area
---------------------------------------------*/
.newitem_area {
  padding: var(--padding) 0
}
.category_list {
  justify-content: space-between;
}
.item_list._newitem li {
  width: calc(100% / 5 - 2%);
}
@media screen and (max-width: 768px) {
  .item_list._newitem li {
    width: calc(100% / 2 - 2%);
  }
}
.item_list._newitem li .item_name {
  position: relative;
  text-indent: 3em;
}
.item_list._newitem li .item_name:before {
  content: 'NEW';
  color: #BE3A77;
  line-height: 1;
  font-size: 12px;
  background: #fff;
  border: 1px solid #BE3A77;
  border-radius: 3px;
  padding: 4px 8px;
  position: absolute;
  top: 0;
  width: 4em;
  left: 0;
  text-align: center;
  text-indent: 0;
}
@media screen and (max-width: 768px) {
  .item_list._newitem li .item_name:before {
    padding: 1px 5px;
    font-size: 10px;
  }
}
/*---------------------------------------------
/*pickitem
---------------------------------------------*/
.pickitem {
  background: #F5F5F2;
  padding: var(--padding) 0
}
.pickitem_area {
  position: relative;
  overflow: hidden;
}
.pickitem_area .swiper-wrapper {
  margin-bottom: 55px
}
@media screen and (max-width: 1180px) {
  .pickitem_area .swiper-wrapper {
    margin-bottom: 0
  }
}
.swiper-button-prev, .swiper-button-next {
  height: 50px;
  width: 50px;
  background-image: none;
}
.pickitem_area .swiper-button-prev, .pickitem_area .swiper-button-next {
  margin-top: 0;
  top: 45%
}
.pickitem_area .swiper-button-prev {
  left: -34px
}
.pickitem_area .swiper-button-next {
  right: -34px
}
@media screen and (max-width: 1180px) {
  .pickitem_area .swiper-button-prev, .pickitem_area .swiper-button-next {
    display: none
  }
}
.swiper-button-prev::after, .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
  position: absolute;
}
.swiper-button-prev::after {
  background-image: url(../images/ico-arrow-l.svg);
}
.swiper-button-next::after {
  background-image: url(../images/ico-arrow-r.svg);
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
/*
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
	opacity: 0;
}
*/
/*---------------------------------------------
/*series
---------------------------------------------*/
.series {
  padding: var(--padding) 0
}
.series_area {
  position: relative;
}
.series_list {
  display: flex;
  gap: 20px 1%;
  flex-wrap: wrap;
  justify-content: space-between;
}
.series_list li {
  flex-basis: 380px;
  border-radius: 10px;
  border: none
}
@media screen and (max-width: 780px) {
  .series_list li {
    flex-basis: 49%;
    border-radius: 10px;
    border: none
  }
}
header .series_list {
  display: flex;
  gap: 5px 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
header .series_list li {
  border-radius: 10px;
  flex-basis: 19%;
  /*width: calc(100% / 5 - 2%);
    margin: 0 1% 1%;*/
  border: none
}
.series_list li a {}
.series_list li a .series__img {
  margin-bottom: 10px
}
.series_list li a .series__img img {
  border-radius: 30px 30px 0 0
}
.series_list li a .series__img img {
  border-radius: 10px
}
.series_list li a .series__txt {
  background: #fff;
  padding: 1em;
  display: block;
  border-radius: 30px;
}
.series_list li a .series__txt .ttl {
  margin-bottom: .6em;
  text-align: center;
  font-size: 16px;
  margin-top: 0;
}
.series_list li a .series__txt .read {
  opacity: .8
}
/*---------------
about
----------------*/
.about {
  background: url(../images/about-bg.jpg)no-repeat center center;
  background-size: cover;
  padding-bottom: 240px
}
@media screen and (max-width: 768px) {
  .about {
    padding-bottom: 120px
  }
}
.about-inner {
  width: 50%;
  padding: var(--padding) 3%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .about-inner {
    width: 97%
  }
}
.about-inner .logo {
  width: 200px;
  margin-bottom: 40px
}
@media screen and (max-width: 768px) {
  .about-inner .logo {
    width: 120px;
    margin-bottom: 20px
  }
}
.about-inner .ttl {
  margin-bottom: 30px;
  filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
}
.about-inner .ttl img {
  filter: drop-shadow(5px 5px 5px #ffffff);
}
.btn a {
  color: var(--main);
  padding: 1em;
  border: 3px solid var(--main);
  border-radius: 3em;
  margin: 40px auto 0;
  width: 390px;
  font-size: 20px;
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s
}
@media screen and (max-width: 768px) {
  .btn a {
    width: 276px;
    font-size: 14px;
  }
}
.btn a:hover {
  background: var(--main);
  color: #fff
}
.btn-icon {
  background: var(--main);
  color: #fff;
  border-radius: 3em;
  font-size: 12px;
  position: absolute;
  top: -10px;
  left: 0;
  display: block;
  padding: 4px 1em
}
@media screen and (max-width: 768px) {
  .btn-icon {
    top: -20px;
  }
}
.dli-right {
  display: inline-block;
  vertical-align: middle;
  color: var(--main);
  line-height: 1;
  position: relative;
  width: 16px;
  height: 16px;
  transform: translateX(-25%) rotate(45deg);
  margin-left: 16px;
  transition: all .2s
}
@media screen and (max-width: 768px) {
  .dli-right {
    width: 12px;
    height: 12px;
  }
}
.btn a:hover .dli-right {
  color: #fff;
  margin-left: 24px;
}
.dli-right::before, .dli-right::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1em;
}
.dli-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.25em;
}
.dli-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.25em;
}
/*---------------------------------------------
news
---------------------------------------------*/
.news {
  padding: var(--padding) 5%;
}
.news_list {
  max-width: 880px;
  margin: 0 auto;
}
.news_list li {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px dotted #5e5e5e
}
.news_list a:hover {
  text-decoration: underline
}
.news_list a span {
  display: block;
}
.news_list .day {
  margin-bottom: 1em;
  font-weight: 700;
  font-size: 14px;
  opacity: .3
}
/*---------------------------------------------
guide
---------------------------------------------*/
.guide {
  background: var(--sub);
  padding: var(--padding) 0;
}
.guide__list li {
  width: calc(100% / 4 - 2%);
  text-align: center;
  margin: 0 1% 3%;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 18px;
  padding: 20px
}
@media screen and (max-width: 768px) {
  .guide__list li {
    width: calc(100% / 2 - 2%);
    font-size: 14px;
  }
}
.guide__list li a {
  aspect-ratio: 1.5/1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
.guide__img {
  height: 80px;
  margin-bottom: 16px;
  display: block
}
@media screen and (max-width: 768px) {
  .guide__img {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .guide__img img {
    width: 70%
  }
}
/*---------------------------------------------
/*p-footer
---------------------------------------------*/
.p-footer {
  font-size: 14px;
  padding: 90px 0 20px;
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .p-footer {
    font-size: 13px;
    padding: 20px 0 20px
  }
  .p-footer > .l-inner {
    display: block;
    margin: 0
  }
}
.footer-logo {
  width: 200px;
}
@media screen and (max-width: 768px) {
  .footer-logo {
    width: 145px;
    margin: 0 auto 40px;
  }
}
.footer-nav {
  width: calc(100% - 250px);
  margin-left: 50px
}
@media screen and (max-width: 768px) {
  .footer-nav {
    width: 100%;
    margin-left: 0;
  }
}
.footer-nav__p {
  margin-bottom: 2em;
  margin-right: 2em
}
@media screen and (max-width: 768px) {
  .footer-nav__p {
    margin-right: 0;
    width: 100%;
    display: block;
  }
}
.footer-nav__p a {
  padding: 4px 0
}
@media screen and (max-width: 768px) {
  .footer-nav__p a {
    padding: 4px 5%;
    width: 100%;
    position: relative
  }
}
.footer-nav__ttl {
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid #5e5e5e;
  margin-bottom: 1em
}
@media screen and (max-width: 768px) {
  .footer-nav__ttl {
    border-bottom: none;
    padding-left: 2%;
    margin-bottom: 0;
  }
}
._item_category .footer-nav__ttl {
  width: 100%
}
.footer-nav__p .ttl {
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .footer-nav__p .ttl {
    border-bottom: 1px dotted #606060;
    font-weight: normal
  }
}
.footer-nav__c {
  margin: 0 1em;
}
.footer-nav__p .dli-right {
  display: none
}
@media screen and (max-width: 768px) {
  .footer-nav__c {
    margin: 0;
  }
  .footer-nav__c.c-accordion {
    border-bottom: none
  }
  .footer-nav__p .dli-right {
    width: 7px;
    height: 7px;
    right: 16px;
    position: absolute;
    top: 10px;
    color: #333;
    display: block
  }
  .footer-nav__p .dli-right::before {
    height: 0.1em;
  }
  .footer-nav__p .dli-right::after {
    width: 0.1em;
  }
}
.footer-nav__c ul {
  margin-left: 1em;
}
footer .copy {
  font-size: 10px;
  text-align: center;
}
.c-accordion {
  border-bottom: 1px dotted #606060;
}
.c-accordion__title {
  cursor: pointer;
  position: relative;
}
.c-accordion__content {
  display: none;
  padding: .4em .8em
}
.c-accordion__title--arrow {
  padding-right: 2.4em;
  position: relative
}
.c-accordion__title--arrow::after {
  -webkit-transform: translateY(-50%);
  background: transparent url(./img/arrow-bottom-w.png) no-repeat top center/cover;
  content: "";
  height: .8em;
  position: absolute;
  right: .4em;
  top: 50%;
  transform: translateY(-50%);
  transition: all .5s ease 0s;
  width: .8em
}
.c-accordion__title--arrow {
  padding: 0;
  position: absolute;
  right: 20px;
  width: 26px;
  height: 15px;
}
@media screen and (max-width: 1180px) {
  .c-accordion__title--arrow {
    right: 0px;
  }
  .footer-nav__c .c-accordion__title--arrow {
    right: 12px;
    top: 8px;
  }
}
.c-accordion__title--arrow::after, .c-accordion__title--arrow::before {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #333;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.c-accordion__title--arrow:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.is-checked .c-accordion__title--arrow::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.c-accordion_sp .c-accordion__title--arrow {
  display: none
}
@media screen and (max-width: 768px) {
  .c-accordion_sp .c-accordion__title--arrow {
    display: block
  }
  .js-accordion-content_sp {
    display: none;
    padding: .4em .8em
  }
}
/*打ち消し
body:not(.home) .site-content header{
	z-index: -1
}
*/
#tokushou .box {
  margin-bottom: 3em;
}
/*グローバルメニューの前に商品画像が来てしまう問題の対処*/
body.no-header-image header, body:not(.home) header {
  position: relative;
}
/*パンくず*/
.breadcrumb {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 60px;
  overflow-x: auto;
}
.breadcrumb span {
  font-size: 12px;
  line-height: 1.7;
  padding: 13.5px 0;
  display: inline;
}
.breadcrumb span {
  padding-right: 0;
}
.breadcrumb span br {
  display: none;
}
.breadcrumb .breadcrumb-inner {
  font-size: 12px;
  line-height: 1.7;
  padding: 13.5px 1rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /*width: 1200px;*/
}
@media only screen and (max-width: 991px) {
  .breadcrumb {
    margin-bottom: 20px
  }
  .p-breadcrumb {
    margin-bottom: 28px;
  }
  .breadcrumb span {
    font-size: 10px;
    height: 40px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
div.haneru-text-area {
  padding-left: 10px;
  margin-bottom: 40px;
}
div.eco-text-area {
  padding-left: 10px;
  margin-bottom: 40px;
}
p.haneru-text-area {
  font-size: 1em;
  line-height: 1.4;
  padding: 8px 5px;
}
p.eco-text-area {
  font-size: 1em;
  padding: 8px 5px;
}
.color-img {
  margin: 0px 10px;
}
.haneru-spec-title {
  background-color: var(--main);
  font-size: 1em;
  width: 25%;
  padding-top: 10px;
  color: #FFFFFF;
}
.haneru-spec-data {
  background-color: #f1f1ed;
  font-size: 1em;
  width: 75%;
  padding: 10px 6px;
  color: #333333;
  line-height: 1.4;
}
.eco-spec-title {
  background-color: var(--main);
  font-size: 1em;
  width: 25%;
  padding-top: 10px;
  color: #FFFFFF;
}
.eco-spec-data {
  background-color: #f1f1ed;
  font-size: 1em;
  width: 75%;
  padding: 10px 6px;
  color: #333333;
  line-height: 1.4;
}
/*楽天から移行した商品データを見やすく*/
.rakuten_pc_1, .rakuten_pc_2 {
  max-width: 720px;
  margin: 0 auto 1em;
}
.rakuten_pc_1 .bnr {
  margin-bottom: 1.5rem;
}
.rakuten_pc_1 h3.osusume {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
@media only screen and (max-width: 720px) {
  .rakuten_pc_1, .rakuten_pc_2 {
    max-width: 720px;
    margin: 0 -1.5rem 1em;
  }
  .rakuten_pc_1 tr td:nth-child(2) {
    width: 50%;
  }
  .rakuten_pc_1 .bnr img {
    width: 100%;
  }
  .haneru-spec-data, .haneru-spec-title, .eco-spec-title, .eco-spec-data {
    border-bottom: none;
    display: block;
    width: 100% !important;
    padding: 1.4rem !important;
  }
}
body:not(.blog).single-post .site-content {
  /*padding: var(--padding) 0;*/
}
body:not(.blog) .site-content {
  margin-bottom: 2.8rem;
}
/*/////////////////
カテゴリ人気ランキング
/////////////////*/
.category_ranking {
  margin-bottom: 20px;
  overflow-x: auto;
  border: 1px solid var(--main);
}
.category_ranking h4 {
  font-size: 25px;
  margin-bottom: 0px;
  background: var(--main);
  color: #fff;
  padding: 10px;
  width: 100%;
  max-width: none;
  min-width: 780px;
}
.category_ranking .rank {
  width: 100%;
  text-align: center;
  display: block;
  line-height: normal;
}
.category_ranking .rankimg {
  position: absolute;
  top: 3px;
  left: 33px;
  width: 16px;
  height: auto;
}
@media screen and (min-width: 1200px) {
  /*1200px以上ここから*/
  /*1200px以上ここまで*/
}
@media screen and (min-width: 1350px) {
  /*1350px以上ここから*/
  /*1350px以上ここまで*/
}
@media screen and (max-width: 46.25em) {
  /*740px以下*/
  .category_ranking h4 {
    font-size: 20px;
  }
}
#wc_delivery table#time dd {
  border-bottom: 1px solid #efefef;
  padding: 0 0 25px 30px;
}
main.cart-page, main.container {
  margin-bottom: 8rem;
}
.carousel.single-item-carousel .carousel-inner .carousel-item {
  aspect-ratio: auto;
}
.carousel.single-item-carousel .carousel-inner {
  transition: height 0.6s ease-in-out; /* 高さのトランジションを追加 */
}
.carousel-item.active, .carousel-item-next, .carousel-item-prev {
  display: block;
  opacity: 1; /* アクティブなアイテムは表示される */
}
.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 0; /* 次または前のアイテムは表示されない */
}
.field-price span.itemDeliveryMethod, .field-price span.delivery_time_limit, .field-price span.point {
  display: block;
  font-size: 1rem;
  margin-top: 1rem;
}
.field-price span.point {
  color: var(--tag-campaign-bg-color, #d82558);
}
.company p.message {
  font-size: 1.5rem;
  text-align: center;
}
.company th {
  background-color: var(--main);
  font-size: 1em;
  width: 25%;
  padding-top: 10px;
  color: #FFFFFF;
}
.company td {
  background-color: #f1f1ed;
  font-size: 1em;
  width: 75%;
  padding: 10px 6px;
  color: #333333;
  line-height: 1.4;
}
.company .aboutbox {
  margin-bottom: 5rem;
}
@media only screen and (max-width: 720px) {
  .company td, .company th {
    border-bottom: none;
    display: block;
    width: 100% !important;
    padding: 1.4rem !important;
  }
}
/*売り切れ表示*/
.item-category article.soldout .card-image::after {
  content: "SOLD OUT";
  position: absolute;
  z-index: 1;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(128, 128, 128, 0.7); /* グレーの透過背景 */
  padding: 10px 20px; /* テキストの背景サイズを調整 */
  font-size: 24px; /* テキストのサイズを調整 */
  font-weight: bold;
  text-align: center;
}
.come {}
.come a {
  color: var(--general-text-color, #1d3994);
  text-decoration: underline;
}
.come a:hover {
  color: var(--general-text-color, #1d54a7);
}
.star-rating, .star-counter-tit {
  display: inline-block;
}
.star-counter {
  width: 100%;
  max-width: 400px;
  min-width: 300px;
}
.review_count_star {
  display: flex;
  align-items: center;
}
.review_count_star .star-counter {
  display: none;
}
.article-item .group-add-item .current-status .campaign_message, .article-item .group-add-item .current-status .tag {
  margin-left: auto;
}
.item-category .star-rating {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .group-add-item .current-status .num-review {
    width: auto;
    margin: 0;
  }
  .review_count_star {
    justify-content: center;
  }
  .star-rating .star {
    font-size: 15px;
    width: 15px;
    height: 15px;
  }
}
/*---------------------------------------
p_footer_guide / [footer]お買い物ガイド
---------------------------------------*/
.guide .title02 {
  font-size: 24px;
  margin-bottom: 1em;
  position: relative;
}
.guide .title03 {
  padding-left: 1em;
  text-align: left;
}
.guide .title03:before {
  position: relative;
  content: '';
  width: 0.6em;
  height: 1px;
  top: -7px;
  left: -7px;
  background: #000;
  display: inline-block;
}
.guide_box__inner {
  padding-left: 40px
}
.pay_list {
  margin: 10px auto;
  border-top: 1px solid #ADAC9B;
  border-bottom: 1px solid #ADAC9B;
  padding: 2em 0 1em;
}
.pay_list .credit {
  width: 100% !important;
}
.pay_list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 1em;
}
.pay_list li:before {
  position: absolute;
  content: '';
  width: 2px;
  height: 2px;
  background: #000;
  left: 0;
  top: 50%;
}
.ico-guide {
  background: #C31919;
  color: #fff;
  text-align: center;
  padding: .5em 1em;
  font-size: 24px;
  line-height: 1;
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .guide .title02, .guide .btn02 {
    font-size: 18px;
  }
	.guide .title03 {
  padding-left: 0;
}
  .guide .ico-guide {
    font-size: 13px;
  }
  .guide_box__inner {
    padding-left: 0;

    margin: 0 auto 20px;
  }
}


.guide table.usces_calendar{
	width: 45%;
	display: inline-block;
}


.guide table.usces_calendar th,
.guide table.usces_calendar td{
	border: 1px solid #8F8F8F;
	padding: 4px;
	text-align: center;
	vertical-align: middle;
}

.guide table.usces_calendar th{
	background: #E4E4E4;
	font-weight: bold;
}

.guide table.usces_calendar td.businessday,
.guide .business_days_exp_box{
	background: #FF6C6E;
}

.guide .calendar{
	display: flex;
	column-gap:20px;
	flex-wrap: wrap;
}

.guide .calendar .this-month,
.guide .calendar .next-month{

}

.guide .calendar .afterword{
	width : 100%;
}

.guide table caption {
	caption-side: top;
    margin-bottom: .357em;
	text-align: left;
}

/* トップ: 季節のおすすめ導線 + 安心材料 (2026-06-10 トップ改善案①) */
.top-guide {
	background: var(--sub);
	padding: 36px 0 28px;
	margin-bottom: 40px;
}
.top-guide .p-ttl {
	margin-bottom: 20px;
}
.top-guide__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.top-guide__card {
	display: block;
	position: relative;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(147, 186, 168, .45);
	border-radius: 8px;
	padding: 18px 30px 16px 16px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.top-guide__card:hover {
	box-shadow: 0 4px 14px rgba(147, 186, 168, .35);
	transform: translateY(-2px);
}
.top-guide__card:after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--main);
	border-right: 2px solid var(--main);
	transform: rotate(45deg);
	margin-top: -4px;
}
.top-guide__card.is-event {
	border-color: var(--accent);
}
.top-guide__card.is-event:after {
	border-color: var(--accent);
}
.top-guide__badge {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	border-radius: 999px;
	padding: 4px 10px;
	margin-bottom: 8px;
}
.top-guide__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 6px;
}
.top-guide__note {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: #767f7a;
}
.top-guide__assurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 28px;
	margin-top: 20px;
}
.top-guide__assurance li {
	font-size: 13px;
	line-height: 1.6;
}
.top-guide__assurance li:before {
	content: '✓';
	color: var(--main);
	font-weight: 700;
	margin-right: 6px;
}
.top-guide__assurance li a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media screen and (max-width: 768px) {
	.top-guide {
		padding: 28px 0 22px;
		margin-bottom: 28px;
	}
	.top-guide__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.top-guide__card {
		padding: 14px 24px 12px 12px;
		border-radius: 6px;
	}
	.top-guide__card:after {
		right: 10px;
	}
	.top-guide__name {
		font-size: 14px;
		margin-bottom: 4px;
	}
	.top-guide__note {
		font-size: 11px;
	}
	.top-guide__assurance {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		gap: 6px 18px;
		margin-top: 16px;
	}
	.top-guide__assurance li {
		font-size: 12px;
	}
}

/* フッターabout: 会社の一文 (2026-06-10 aboutセクション完成) */
.about .about-meta {
	font-size: 12px;
	color: #767f7a;
	margin: 14px 0 18px;
}

/* 特集ページ (template-feature.php, 2026-06-10 楽天特集移植) */
.feature-page .container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 32px 16px 56px;
}
.feature-page .entry-title {
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 28px;
	text-align: center;
	margin-bottom: 12px;
}
/* テーマ側.entry-contentの左右paddingは#primaryの余白と二重になるため特集ページでは無効化 */
.feature-page .entry-content {
	padding-left: 0;
	padding-right: 0;
}
.feature-page .entry-content .feature-lead {
	text-align: center;
	font-size: 15px;
	line-height: 2;
	max-width: 800px;
	margin: 0 auto 36px;
}
.feature-page .entry-content h2 {
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 22px;
	border-left: 5px solid var(--main);
	padding: 4px 0 4px 14px;
	margin: 48px 0 18px;
}
.feature-page .entry-content h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 28px 0 10px;
}
.feature-page .entry-content p {
	font-size: 14px;
	line-height: 1.9;
	margin-bottom: 14px;
}
.feature-page .entry-content .feature-note {
	background: var(--sub);
	border-radius: 8px;
	padding: 18px 20px;
	margin: 24px 0;
}
.feature-page .entry-content a {
	color: inherit;
}
.feature-page .entry-content p a,
.feature-page .entry-content .feature-note a,
.feature-page .entry-content li a:not(.feature-items a):not(.feature-brands a) {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.feature-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 14px;
	margin: 18px 0 8px;
	padding-left: 0;
	list-style: none;
}
.feature-items li {
	list-style: none;
	margin: 0;
	width: calc(25% - 11px);
}
.feature-items li a {
	text-decoration: none;
}
/* 価格と送料無料バッジの縦位置を揃える */
.feature-items .item_info {
	align-items: center;
	gap: 6px;
}
.feature-items .icon._freeshipping {
	flex: 0 0 auto;
	white-space: nowrap;
}
.feature-items .price {
	line-height: 1.4;
}
.feature-scenes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 18px 0;
}
.feature-scenes > a {
	width: calc((100% - 24px) / 3);
	padding-right: 34px;
}
/* wpautopが挿入するbr/空pがグリッドセルを占有しないようにする */
.feature-scenes br,
.feature-scenes p:empty {
	display: none;
}
.feature-scenes a {
	display: block;
	background: #fff;
	border: 1px solid rgba(147, 186, 168, .45);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 700;
	position: relative;
}
.feature-scenes a:after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--main);
	border-right: 2px solid var(--main);
	transform: rotate(45deg);
	margin-top: -3px;
}
.feature-scenes a span {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #767f7a;
	margin-top: 4px;
}
@media screen and (max-width: 768px) {
	.feature-page .entry-title {
		font-size: 22px;
	}
	.feature-page .entry-content h2 {
		font-size: 18px;
		margin-top: 36px;
	}
	.feature-items {
		gap: 16px 10px;
	}
	.feature-items li {
		width: calc(50% - 5px);
	}
	.feature-scenes {
		gap: 8px;
	}
	.feature-scenes > a {
		width: calc(50% - 4px);
		padding-right: 30px;
	}
	.feature-scenes > a:last-child:nth-child(odd) {
		width: 100%;
	}
}

/* モノづくりページ用コンポーネント (2026-06-10 リッチ化) */
.feature-hero {
	margin: 4px 0 28px;
}
.feature-hero img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.feature-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	margin: 22px 0 44px;
}
.feature-media__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.feature-media.is-reverse .feature-media__img {
	order: 2;
}
.feature-media__txt p:last-child {
	margin-bottom: 0;
}
.feature-brands {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 16px;
	margin: 18px 0 8px;
	padding-left: 0;
	list-style: none;
}
.feature-brands li {
	list-style: none;
	margin: 0;
}
.feature-brands a {
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(147, 186, 168, .35);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.feature-brands a:hover {
	box-shadow: 0 4px 14px rgba(147, 186, 168, .35);
	transform: translateY(-2px);
}
.feature-brands img {
	display: block;
	width: 100%;
	height: auto;
}
.feature-brands .brand-body {
	display: block;
	padding: 14px 16px 16px;
}
.feature-brands .brand-name {
	display: block;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}
.feature-brands .brand-desc {
	display: block;
	font-size: 12px;
	color: #767f7a;
	line-height: 1.7;
}
.feature-shop {
	background: var(--sub);
	border-radius: 12px;
	padding: 28px;
	margin: 22px 0 44px;
}
.feature-shop__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 20px;
}
.feature-shop__photos img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.feature-shop__info .shop-name {
	display: block;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}
.feature-shop__info p:last-child {
	margin-bottom: 0;
}
/* wpautopのbr/空pがグリッドセルを占有しないようにする */
.feature-media br,
.feature-brands br,
.feature-shop__photos br,
.feature-media p:empty,
.feature-brands p:empty,
.feature-shop__photos p:empty {
	display: none;
}
/* テーマのul/liデフォルト余白(margin-left約1.6em・li padding)が
   グリッドの左右余白を不均等にするため、カード系リストでは打ち消す */
.feature-page .entry-content .feature-items,
.feature-page .entry-content .feature-brands {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
}
.feature-page .entry-content .feature-items li,
.feature-page .entry-content .feature-brands li {
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 768px) {
	.feature-hero img,
	.feature-media__img img {
		border-radius: 8px;
	}
	.feature-media {
		grid-template-columns: 1fr;
		gap: 14px;
		margin: 16px 0 34px;
	}
	.feature-media.is-reverse .feature-media__img {
		order: 0;
	}
	.feature-brands {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 10px;
	}
	.feature-brands .brand-body {
		padding: 10px 12px 12px;
	}
	.feature-brands .brand-name {
		font-size: 14px;
	}
	.feature-brands .brand-desc {
		font-size: 11px;
	}
	.feature-shop {
		padding: 18px;
		margin: 16px 0 34px;
	}
	.feature-shop__photos {
		gap: 10px;
		margin-bottom: 14px;
	}
}

/* コンテンツ移植第2弾コンポーネント (2026-06-10: ランキング/色特集/ハウツー) */
.feature-rank {
	margin: 26px 0 38px;
}
.feature-rank__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.feature-rank__no {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--main);
	color: #fff;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature-rank.is-1 .feature-rank__no {
	background: #c9a86a;
}
.feature-rank.is-2 .feature-rank__no {
	background: #9aa3ab;
}
.feature-rank.is-3 .feature-rank__no {
	background: #b98c68;
}
.feature-rank__head {
	border-bottom: 2px solid rgba(147, 186, 168, .35);
	padding-bottom: 12px;
}
.feature-rank__title {
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
}
.feature-rank-note {
	font-size: 11px;
	color: #8a938e;
	margin-top: -8px;
}
.feature-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 16px;
	padding: 14px 16px 14px;
	list-style: none;
	background: var(--sub);
	border-radius: 10px;
}
.feature-tags::before {
	content: 'こんな方におすすめ';
	display: block;
	width: 100%;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	color: #5a7d6c;
}
.feature-tags li {
	list-style: none;
	background: #fff;
	border: 1px solid rgba(147, 186, 168, .5);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	line-height: 1.5;
	color: #4e5a54;
	margin: 0;
}
.feature-tags li::before {
	content: '✓';
	color: var(--main);
	font-weight: 700;
	margin-right: 6px;
}
.feature-checks {
	padding: 18px 20px;
	list-style: none;
	margin: 14px 0 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 26px;
	background: var(--sub);
	border-radius: 10px;
}
.feature-page .entry-content .feature-checks {
	margin-left: 0;
	padding-left: 20px;
}
.feature-page .entry-content .feature-checks li {
	list-style: none;
	position: relative;
	padding: 0 0 0 24px;
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}
.feature-checks li:before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--main);
	font-weight: 700;
}
.color-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 22px;
	padding-left: 0;
	list-style: none;
}
.color-chips li {
	list-style: none;
	text-align: center;
	font-size: 11px;
	color: #666;
	margin: 0;
}
.color-chips .chip {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .08);
	margin: 0 auto 6px;
}
.feature-note.is-warn {
	background: #fdf4f3;
	border: 1px solid rgba(222, 141, 141, .45);
}
.feature-note.is-warn strong {
	color: #c06f6f;
}
.feature-voice {
	background: #fff;
	border: 1px solid rgba(147, 186, 168, .45);
	border-radius: 10px;
	padding: 14px 18px;
	margin: 14px 0 20px;
	font-size: 13px;
	line-height: 1.8;
}
.feature-voice:before {
	content: 'スタッフより';
	display: inline-block;
	color: var(--main);
	font-weight: 700;
	font-size: 12px;
	margin-right: 8px;
}
/* 特集ページ本文の行長と画像幅をPCで適正化 */
.feature-page .entry-content > p,
.feature-page .entry-content h3 {
	max-width: 880px;
}
.feature-page .entry-content .feature-lead {
	line-break: strict;
}
/* 裸テキストリンクのボタン化 */
.feature-btn {
	margin: 6px 0 26px;
}
.feature-btn a {
	display: inline-block;
	border: 1px solid var(--main);
	border-radius: 999px;
	padding: 10px 40px 10px 24px;
	font-size: 13px;
	font-weight: 700;
	color: #4e5a54;
	position: relative;
	text-decoration: none !important;
	transition: background .2s ease;
}
.feature-btn a:hover {
	background: var(--sub);
}
.feature-btn a:after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--main);
	border-right: 2px solid var(--main);
	transform: rotate(45deg);
	margin-top: -3px;
}
/* 本文内コンテンツ画像 */
.feature-img {
	margin: 16px 0 22px;
	max-width: 880px;
}
.feature-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.feature-img.is-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.feature-img.is-2col br,
.feature-img.is-2col p:empty {
	display: none;
}
@media screen and (max-width: 768px) {
	.feature-img.is-2col {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}
/* 特集バナーグリッド (フッターPICKUP / 特集一覧ページ共通) */
.feature-banners {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 16px;
	margin: 18px 0 8px;
	padding-left: 0;
	list-style: none;
}
.feature-banners li {
	list-style: none;
	margin: 0;
}
.feature-banners a {
	display: block;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .06);
	text-decoration: none !important;
	transition: box-shadow .2s ease, transform .2s ease;
}
.feature-banners a:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}
.feature-banners img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.feature-banners .banner-label {
	display: block;
	padding: 10px 14px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
}
.feature-banners__more {
	text-align: center;
	margin: 22px 0 6px;
}
.feature-banners__more a {
	display: inline-block;
	border: 1px solid var(--main);
	border-radius: 999px;
	background: #fff;
	padding: 12px 46px 12px 30px;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #4e5a54;
	position: relative;
	text-decoration: none;
	transition: background .2s ease;
}
.feature-banners__more a:hover {
	background: var(--sub);
}
.feature-banners__more a:after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--main);
	border-right: 2px solid var(--main);
	transform: rotate(45deg);
	margin-top: -4px;
}
@media screen and (max-width: 768px) {
	.feature-banners {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 10px;
	}
	.feature-banners .banner-label {
		padding: 8px 10px 10px;
		font-size: 11px;
	}
}
/* 商品ページの関連特集ブロック */
.related-features {
	margin: 32px 0 8px;
}
.related-features .feature-scenes a,
.related-features .feature-scenes a span {
	text-decoration: none;
}
.related-features__ttl {
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 16px;
	font-weight: 700;
	border-left: 4px solid var(--main);
	padding-left: 12px;
	margin-bottom: 12px;
}
/* PICKUPスライダー: 画像比率統一とキャプション */
.pickitem_list li a {
	position: relative;
	display: block;
}
.pickitem_list img {
	width: 100%;
	aspect-ratio: 1158 / 708;
	object-fit: cover;
	display: block;
}
.pickitem-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .55));
	color: #fff;
	font-family: "dnp-shuei-mgothic-std", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	padding: 30px 14px 10px;
	pointer-events: none;
}
@media screen and (max-width: 768px) {
	.feature-rank__no {
		width: 40px;
		height: 40px;
		font-size: 12px;
	}
	.feature-rank__title {
		font-size: 18px;
	}
	/* SPでは<br>固定改行を解除して自然な折返しにする(中央寄せの断片行・禁則崩れ対策) */
	.feature-lead br {
		display: none;
	}
	.feature-checks {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.color-chips .chip {
		width: 40px;
		height: 40px;
	}
	.pickitem-caption {
		font-size: 13px;
	}
}

/* ギフト導線 (2026-06-11 施策②: ラッピングバッジ・ギフトに人気ラベル・カート注記) */
.gift-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	clear: both; /* .field-priceがfloat:leftのため回り込みを解除 */
	margin: 16px 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: #FDF6F6;
	color: #000;
	line-height: 1.5;
}
.gift-badge__body a {
	color: #000;
	text-decoration: underline;
	margin-left: 6px;
}
.gift-badge__body a:hover {
	opacity: .7;
}
.gift-badge__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23DE8D8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4"/><path d="M5 12v8h14v-8"/><path d="M12 8v12"/><path d="M12 8c-1.5-3.5-6-3.5-6-1s4 2.5 6 1zm0 0c1.5-3.5 6-3.5 6-1s-4 2.5-6 1z"/></svg>') center / contain no-repeat;
}
.gift-badge__body strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
}
.gift-badge__body span {
	display: block;
	font-size: 12px;
	color: #666;
}
.item-gift-label {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 5px 12px;
	border-radius: 3px;
	margin: 0 8px 6px 0;
	vertical-align: middle;
}
.cart-gift-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: #FDF6F6;
	font-size: 13px;
	line-height: 1.6;
}
.cart-gift-note p {
	margin: 0;
}
.cart-gift-note__label {
	flex: 0 0 auto;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 5px 12px;
	border-radius: 3px;
}
.cart-gift-note__links a {
	margin-right: 16px;
	color: #000;
	text-decoration: underline;
}
.cart-gift-note__links a:hover {
	opacity: .7;
}
@media screen and (max-width: 768px) {
	.gift-badge {
		margin: 14px 0 10px;
		padding: 10px 12px;
	}
	.cart-gift-note {
		font-size: 12px;
		gap: 6px 10px;
	}
}

/* お知らせメール受信設定 (2026-06-11 施策①拡張: フォーム内チェックボックスと配信停止ページ) */
.hacoon-mailpref {
	max-width: 640px;
	margin: 18px auto 0;
	padding: 12px 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fafaf8;
	font-size: 13px;
	line-height: 1.7;
	text-align: left;
}
.hacoon-mailpref label {
	font-weight: 600;
	cursor: pointer;
}
.hacoon-mailpref input[type="checkbox"] {
	margin-right: 6px;
	transform: scale(1.15);
	vertical-align: middle;
}
.hacoon-mailpref__note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #666;
}
.hacoon-mailpref__note a {
	text-decoration: underline;
}
.mailstop-form {
	max-width: 560px;
	margin: 24px auto;
	padding: 24px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fafaf8;
}
.mailstop-form__row {
	margin: 0 0 16px;
}
.mailstop-form__row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}
.mailstop-form__row input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 15px;
}
.mailstop-form__row.is-radio label {
	display: inline-block;
	margin-right: 22px;
	font-weight: 400;
	cursor: pointer;
}
.mailstop-form__row.is-radio input {
	margin-right: 6px;
}
.mailstop-form__submit {
	margin: 0;
	text-align: center;
}
.mailstop-form__submit button {
	min-width: 220px;
	padding: 12px 28px;
	border: none;
	border-radius: 4px;
	background: var(--main);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.mailstop-form__submit button:hover {
	opacity: .8;
}
.mailstop-message {
	max-width: 560px;
	margin: 20px auto 0;
	padding: 14px 18px;
	border: 1px solid var(--main);
	border-radius: 6px;
	background: var(--sub);
	font-size: 14px;
}
.mailstop-message.is-error {
	border-color: var(--accent);
	background: #FDF6F6;
}

/* マイページ会員情報テーブルのポイント有効期限セル (2026-06-11) */
.hacoon-pexp-cell__note {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #888;
	line-height: 1.4;
}

/* トップページのロゴをh1化した際にレイアウトへ影響させない (SEO: トップh1) */
.site-ttl .site-ttl__h1 {
	display: contents;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* カート送料無料バー (施策⑥ 2026-06-12) ここから */
.hacoon-shipbar{margin:0 0 24px;padding:16px 18px;border:1px solid #ddd6cc;border-radius:8px;background:#faf8f4}
.hacoon-shipbar-done{color:#2e7d32;font-weight:bold;text-align:center}
.hacoon-shipbar-msg{margin:0;font-size:15px}
.hacoon-shipbar-msg strong{color:#c0392b;font-size:17px}
.hacoon-shipbar-sub{margin:14px 0 8px;font-size:13px;color:#666}
.hacoon-shipbar-items{display:flex;gap:10px;flex-wrap:wrap}
.hacoon-shipbar-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ddd6cc;border-radius:6px;background:#fff;text-decoration:none;color:#333;font-size:13px}
.hacoon-shipbar-item:hover{border-color:#9caf88}
.hacoon-shipbar-item img{width:44px;height:44px;object-fit:cover;border-radius:4px}
.hacoon-shipbar-item-price{color:#c0392b;font-weight:bold;white-space:nowrap}
@media (max-width:600px){.hacoon-shipbar-items{flex-direction:column}.hacoon-shipbar-item{width:100%}}
/* カート送料無料バー ここまで */