@charset "UTF-8";

:root {
  --baceColor: #fff;
  --txtColor: #000;
}

/* ------------------------------------------------
  COMMON
------------------------------------------------ */
.pc_only,
.teaser_only {
  display: none !important;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
  font-family: "roboto", "sawarabi-gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--txtColor);
  background: var(--baceColor);
}

select,
input,
button,
textarea,
button {
  font-weight: normal;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s;
}

a img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

_::-webkit-full-page-media,
_:future,
:root a img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

main.main-area.scroll {
  /*padding-top: 0!important;*/
}

strong {
  font-weight: bold;
}

button {
  outline: none;
}

#Contents {
  padding-top: calc(80* (100vw / 375));
}


.btn_view {
  text-align: center;
}

.btn_view a {
  display: inline-block;
  font-size: calc(22 * (100vw / 750));
  border-bottom: 1px solid;
  padding-bottom: calc(10 * (100vw / 750));
  font-weight: bold;
}

.sec--staffcoordinate .btn_view {
  margin-top: calc(70 * (100vw / 750));
}


/* ------------------------------------------------
  アニメーション
------------------------------------------------ */
.commonfade {
  opacity: 0;
  -webkit-transition: .8s all ease-in;
  transition: .8s all ease-in;
}

.commonfade.fadein {
  opacity: 1;
}

/* ------------------------------------------------
  main-area
------------------------------------------------ */
.main-area {
  display: block;
  padding-top: calc(25* (100vw / 375));
  --font-ja: "sawarabi-gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}


/* ------------------------------------------------
  font
------------------------------------------------ */
.main-area.list,
.main-area.detail,
.wrap-user.mypage,
.wrap-user.favorite-list,
.wrap-user.mailmagazine-regist-input,
#guide,
#shoplist,
#CartList,
#cartselectWrap,
#dvUserBox {
  font-family: 'Noto Sans', sans-serif;
}

.main-area.list .img-container .soldout,
.main-area.detail .block-related .box-slider .slider-content li .soldout {
  font-family: "usual", 'Noto Sans', sans-serif;
}

.main-area.detail .block-title .price {
  font-size: 18px !important;
}

.main-area.detail .box-slider .slider-content li .txt .price {
  font-size: 1rem !important;
}

/* ------------------------------------------------
  info追従
------------------------------------------------ */
.info_fixed {
  width: calc(95* (100vw / 750));
  position: fixed;
  right: 0;
  bottom: calc(60* (100vw / 750));
  z-index: 99;
}

.info_fixed img {
  width: 100%;
}

.info_fixed.open {
  z-index: 102;
}

.info_fixed-inner {
  position: fixed;
  width: 100%;
  background: #fff;
  bottom: -100vh;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: calc(78* (100vw / 375)) calc(50* (100vw / 375));
  font-family: var(--font-ja);
  font-size: calc(13* (100vw / 375));
  border-radius: 5px 5px 0 0;
  text-align: left;
  overflow: scroll;
  pointer-events: auto;
  height: 82%;
  transition: 0.4s;
}

.info_fixed-inner.show {
  bottom: 0;
  z-index: 102;
}

.info_fixed .info_fixed_close {
  display: none;
}

.info_fixed.open .info_fixed_close {
  display: block;
  z-index: 101;
  width: calc(95* (100vw / 750));
  position: fixed;
  right: 0;
  bottom: calc(60* (100vw / 750));
}

.info_fixed-inner .info_fixedBox-ttl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #707070;
  padding-bottom: calc(9* (100vw / 375));
  margin-bottom: calc(40* (100vw / 375));
}

.info_fixed-inner h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: calc(17* (100vw / 357));
}

.info_fixed-inner .info_fixedBox-ttl p {
  font-size: calc(11* (100vw / 357));
  letter-spacing: 0;
}

.info_fixed-inner .info_fixedBox-txt {
  line-height: 2.1;
}

.info_fixed-inner p,
.info_fixed-inner p span {
  letter-spacing: 0.05em;
}

.info_fixed-inner .info_fixed-box>p,
.info_fixed-inner .info_fixed-box>ul {
  padding-left: calc(14* (100vw / 357));
}

/*========== infomation ==========*/
.info_fixed-inner .info_fixed-box.infomation {
  margin-bottom: calc(51* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation>p {
  margin: calc(80* (100vw / 750)) auto;
  font-size: calc(32* (100vw / 750));
}

.info_fixed-inner .info_fixed-box.infomation li {
  display: flex;
}

.info_fixed-inner .info_fixed-box.infomation li:not(:last-child) {
  margin-bottom: calc(31* (100vw / 375));
  position: relative;
}

.info_fixed-inner .info_fixed-box.infomation li:not(:last-child)::after {
  content: "▼";
  font-family: "roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(8* (100vw / 375));
  position: absolute;
  bottom: -70%;
  left: 36%;
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(2),
.info_fixed-inner .info_fixed-box.infomation li:nth-child(3) {
  position: relative;
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(2)::after {
  bottom: -30%;
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(3)::after {
  bottom: -55%;
}

.info_fixed-inner .info_fixed-box.infomation li>span {
  width: calc(30* (100vw / 357));
  margin-right: calc(9* (100vw / 357));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(1) {
  align-items: center;
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(1)>span img {
  width: calc(20* (100vw / 357));
  margin: 0 0 calc(4* (100vw / 357)) calc(3* (100vw / 357));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(2) {
  margin-bottom: calc(34* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(2)>span img {
  width: calc(20* (100vw / 375));
  margin: calc(8* (100vw / 375)) 0 0 calc(4* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(3) {
  margin-bottom: calc(42* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(3)>span img {
  width: calc(21* (100vw / 357));
  margin: calc(6* (100vw / 357)) 0 0 calc(2* (100vw / 357));
}

.info_fixed-inner .info_fixed-box.infomation li:nth-child(4)>span img {
  width: calc(21* (100vw / 375));
  margin: calc(3* (100vw / 375)) 0 0 calc(3* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation li>p {
  width: calc(220* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.infomation li>p span {
  display: block;
  font-size: calc(10* (100vw / 357));
  line-height: 1.6;
  letter-spacing: 0;
  margin-top: calc(5* (100vw / 357));
}

/* end infomation */

/*========== qa ==========*/
.info_fixed-inner .info_fixed-box.qa {
  margin-bottom: calc(75* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.qa .info_fixedBox-ttl {
  margin-bottom: calc(31* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.qa ul {
  padding-left: calc(17* (100vw / 357));
}

.info_fixed-inner .info_fixed-box.qa ul li {
  letter-spacing: 0.05em;
  margin-bottom: calc(16* (100vw / 375));
}

.info_fixed-inner .info_fixedBox-btn {
  font-family: "Times New Roman", Times, serif;
  font-size: calc(11* (100vw / 357));
  letter-spacing: 0;
  padding-top: calc(3* (100vw / 357));
  margin-left: calc(4* (100vw / 357));
}

/* end qa */

/*========== support ==========*/
.info_fixed-inner .info_fixed-box.support p {
  font-family: 'Noto Sans', sans-serif;
  font-size: calc(13* (100vw / 375));
  letter-spacing: 0.05em;
  padding-left: calc(37* (100vw / 750));
}

.info_fixed-inner .info_fixed-box.support .info_fixedBox-ttl {
  margin-bottom: calc(29* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.support .support_tel {
  font-size: calc(18* (100vw / 375));
  padding-left: calc(18* (100vw / 357));
  margin-bottom: calc(20* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.support .support_time {
  display: flex;
  align-items: center;
}

.info_fixed-inner .info_fixed-box.support .support_time span {
  font-size: calc(10* (100vw / 375));
  margin-left: calc(12* (100vw / 375));
}

.info_fixed-inner .info_fixed-box.support .support_fred {
  font-size: calc(10* (100vw / 375));
  line-height: 1.5;
  margin-top: calc(7* (100vw / 375));
  padding-left: calc(18* (100vw / 375));
}

.info_fixed-inner .info_fixed_close {
  display: block;
  width: calc(16* (100vw / 375));
  position: absolute;
  left: 6%;
  top: 3%;
}

.info_fixed-inner .info_fixed_close a {
  display: block;
}

.info_fixed-inner .info_fixed_close img {
  width: 100%;
}

/* end support */

/*========== info追従内アニメーション ==========*/
@-webkit-keyframes info_animation {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes info_animation {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.info_fixed-inner.show .info_fixed-box h3,
.info_fixed-inner.show .info_fixed-box p,
.info_fixed-inner.show .info_fixed-box ul li {
  opacity: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.info_fixed-inner.show .info_fixed-box.infomation ul li {
  opacity: 0;
  -webkit-transform: translateY(10%);
  -ms-transform: translateY(10%);
  transform: translateY(10%);
}

.info_fixed-inner.show .info_fixed-box.infomation h3 {
  -webkit-animation: info_animation 0.5s ease 0.5s 1 forwards;
  animation: info_animation 0.5s ease 0.5s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.infomation p {
  -webkit-animation: info_animation 0.5s ease 0.6s 1 forwards;
  animation: info_animation 0.5s ease 0.6s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.infomation>ul>li:nth-child(1) {
  -webkit-animation: info_animation 0.5s ease 0.7s 1 forwards;
  animation: info_animation 0.5s ease 0.7s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.infomation>ul>li:nth-child(2) {
  -webkit-animation: info_animation 0.5s ease 0.8s 1 forwards;
  animation: info_animation 0.5s ease 0.8s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.infomation>ul>li:nth-child(3) {
  -webkit-animation: info_animation 0.5s ease 0.9s 1 forwards;
  animation: info_animation 0.5s ease 0.9s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.infomation>ul>li:nth-child(4) {
  -webkit-animation: info_animation 0.5s ease 1.0s 1 forwards;
  animation: info_animation 0.5s ease 1.0s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.qa h3 {
  -webkit-animation: info_animation 0.5s ease 1.1s 1 forwards;
  animation: info_animation 0.5s ease 1.1s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.qa>ul>li:nth-child(1) {
  -webkit-animation: info_animation 0.5s ease 1.2s 1 forwards;
  animation: info_animation 0.5s ease 1.2s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.qa>ul>li:nth-child(2) {
  -webkit-animation: info_animation 0.5s ease 1.3s 1 forwards;
  animation: info_animation 0.5s ease 1.3s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.qa>ul>li:nth-child(3) {
  -webkit-animation: info_animation 0.5s ease 1.4s 1 forwards;
  animation: info_animation 0.5s ease 1.4s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.qa p {
  -webkit-animation: info_animation 0.5s ease 1.5s 1 forwards;
  animation: info_animation 0.5s ease 1.5s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.support h3 {
  -webkit-animation: info_animation 0.5s ease 1.6s 1 forwards;
  animation: info_animation 0.5s ease 1.6s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.support p:nth-of-type(1) {
  -webkit-animation: info_animation 0.5s ease 1.7s 1 forwards;
  animation: info_animation 0.5s ease 1.7s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.support p:nth-of-type(2) {
  -webkit-animation: info_animation 0.5s ease 1.8s 1 forwards;
  animation: info_animation 0.5s ease 1.8s 1 forwards;
}

.info_fixed-inner.show .info_fixed-box.support p:nth-of-type(3) {
  -webkit-animation: info_animation 0.5s ease 1.9s 1 forwards;
  animation: info_animation 0.5s ease 1.9s 1 forwards;
}

/* end info追従内アニメーション */

/* ------------------------------------------------
  header
------------------------------------------------ */
.header {
  font-family: "Times New Roman", Times, serif;
  width: 100%;
  z-index: 100;
  top: 0;
  position: fixed;
  transition: .8s all ease-in;
  transition-delay: 0.5s;
  background: none !important;
}

.header img {
  width: 100%;
}

.header .header-inner {
  position: relative;
  height: calc(130 * (100vw / 750));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: calc(47 * (100vw / 750)) 0 0;
  z-index: 10;
  color: #000000;
  transition: all 0.3s;
}

.header .header-inner.js-header-remove{
  opacity: 0;
  visibility: hidden;
}

.header .header-logo {
  width: calc(220 * (100vw / 750));
  margin: 0 auto;
}

.header .header-logo img {
  width: 100%;
  height: auto;
}

.header .btn-menu {
  position: absolute;
  width: calc(20 * (100vw/ 375));
  height: calc(13 * (100vw/ 375));
  left: calc(20 * (100vw/ 375));
  top: calc(25 * (100vw/ 375));
}

.header .btn-menu .border {
  display: block;
  width: 100%;
}

.header .btn-menu .border-t,
.header .btn-menu .border-m,
.header .btn-menu .border-b {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.header .btn-menu .border-t {
  top: 0;
}

.header .btn-menu .border-m {
  top: calc(6 * (100vw / 375));
}

.header .btn-menu .border-b {
  bottom: 0;
}

.header .btn-menu__icon {
  position: absolute;
  top: calc(52 * (100vw/ 750));
}

.header .btn-menu__icon a {
  display: inline-block;
}

.header .btn-menu__icon.btn-login {
  top: calc(56 * (100vw/ 750));
  left: calc(130 * (100vw/ 750));
}

.header .btn-menu__icon.btn-login img {
  width: calc(25 * (100vw / 750));
}

.header .btn-menu__icon.btn-search {
  top: calc(24 * (100vw/ 375));
  right: calc(59 * (100vw/ 375));
}

.header .btn-menu__icon.btn-search img {
  width: calc(16 * (100vw / 375));
}

.header .btn-cart {
  top: calc(24 * (100vw/ 375));
  right: calc(26 * (100vw/ 375));
}

.header .btn-cart img {
  width: calc(15 * (100vw / 375))
}

.header .btn-cart .cart-count {
  font-family: "roboto", sans-serif;
  font-size: calc(7 * (100vw / 375));
  line-height: 1.2857142857;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  border-radius: 50%;
  width: calc(11 * (100vw / 375));
  height: calc(11 * (100vw / 375));
  position: absolute;
  top: calc(-1 * (100vw / 375));
  right: calc(-6 * (100vw / 375));
}

/*========== ヘッダーカラー ==========*/
.header .header-logo,
.header .btn-menu__icon {
  filter: invert(0);
}

.header .btn-menu .border-t,
.header .btn-menu .border-m,
.header.open .btn-menu .border-m:after,
.header .btn-menu .border-b {
  background: var(--txtColor);
}

.header.js-colorChange .btn-cart .cart-count {
  background: none;
}

/* end ヘッダーカラー */

/* ------------------------------------------------
  ハンバーガーメニュー
------------------------------------------------ */
.header .sp-menu {
  position: fixed;
  height: 100%;
  width: 100%;
  background: var(--baceColor);
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: -100;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .4s;
  transition: .4s;
  pointer-events: none;
  overflow: scroll;
}

.header .sp-menu.show {
  opacity: 1;
  visibility: visible;
  z-index: 100;
  pointer-events: all;
}

/*========== header open ==========*/
.header.open .btn-menu {
  width: calc(16 * (100vw/ 375));
  height: calc(16 * (100vw/ 375));
  top: 37%;
}

.header.open .btn-menu .border-t {
  top: 50%;
  -webkit-transform: translate(50%) scale(0);
  transform: translate(50%) scale(0);
  width: 120%;
}

.header.open .btn-menu .border-m {
  top: 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 120%;
}

.header.open .btn-menu .border-m:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  -webkit-transition: all .4s;
  transition: all .4s;
  top: 50%;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.header.open .btn-menu .border-b {
  top: 50%;
  -webkit-transform: translate(-50%) scale(0);
  transform: translate(-50%) scale(0);
  width: 120%;
}

/*========== end header open ==========*/

.header .sp-menu .header-inner {
  background: #fff;
}

.header .sp-menu .menu-wrapper {
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.header .sp-menu .menu-inner {
  padding-bottom: calc(120 * (100vw / 750));
}

/*========== menu-inner__category ==========*/
.header .sp-menu .sp-menu__category {
  margin-bottom: calc(60 * (100vw / 375));
}

.header .sp-menu .menu-inner__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(35 * (100vw / 375));
  row-gap: calc(21* (100vw / 375));
  margin: calc(26* (100vw / 375)) auto calc(17 * (100vw / 375));
  position: relative;
}

.header .sp-menu .menu-inner__category li::after {
  content: "";
  width: 1px;
  height: 82%;
  background: #000;
  display: block;
  position: absolute;
  right: calc(-16* (100vw / 375));
  top: 15%;
}

.header .sp-menu .menu-inner__category li:nth-child(5)::after,
.header .sp-menu .menu-inner__category li:nth-child(9)::after {
  display: none;
}

.header .sp-menu .menu-inner__menu {
  padding: 0 0 calc(98 * (100vw / 375)) calc(59 * (100vw / 375));
  border-bottom: #CECECE 1px solid;
}

/*========== menu-inner__menubox ==========*/
.header .sp-menu .menu-inner__menubox {
  display: flex;
}

p.menu-inner__ttl {
  font-size: calc(12 *(100vw /375));
  letter-spacing: 0;
  width: 49%;
}

.header .sp-menu .menu-inner__menubox:not(:last-child) {
  margin-bottom: calc(120 * (100vw / 750));
}

.header .menu-inner__menubox:nth-child(2) .header .sp-menu .menu-inner__menubox .menu-inner__ttl {
  width: calc(156 * (100vw / 375));
}

.header .sp-menu .menu-inner__menubox>ul>li {
  font-size: calc(12 * (100vw / 375));
  letter-spacing: 0;
}

.header .sp-menu .menu-inner__menubox>ul>li.txt_gray {
  color: #C7C7C7;
  pointer-events: none;
}

.header .sp-menu .menu-inner__menubox>ul>li.txt_gray span {
  display: block;
  font-size: calc(22 * (100vw / 750));
  margin-top: calc(10 * (100vw / 750));
}

.header .sp-menu .menu-inner__menubox>ul>li.lines {
  line-height: 1.64;
  align-items: flex-start;
}

.header .sp-menu .menu-inner__menubox>ul>li.lines::before {
  margin-top: calc(20 * (100vw / 750));
}

/*========== sp-menu__bottom ==========*/
.header .sp-menu__bottom .menu-inner__menubox:not(:last-child) {
  margin-bottom: calc(68 * (100vw / 357));
}

.header .sp-menu__bottom .menu-inner__menubox:nth-child(2) {
  margin-bottom: 0;
}

.header .sp-menu .sp-menu__bottom ul>li:not(:last-child) {
  margin-bottom: calc(32 * (100vw / 375));
  line-height: 1;
}

/*========== dropdown ==========*/
.header .sp-menu .dropdown a {
  position: relative;
}

.header .sp-menu .menu-inner__menu .dropdown a.open {
  color: #CECECE;
}

.header .sp-menu .dropdown .arrow::before,
.header .sp-menu .dropdown .arrow::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  -webkit-transition: .2s;
  transition: .2s;
}

.header .sp-menu .arrow::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 0;
}

.header .sp-menu .open .arrow::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.header .sp-menu .menu-inner__menubox>ul>li .sub-menu {
  display: none;
  width: 100%;
  font-size: calc(12 * (100vw / 375));
  letter-spacing: 0;
}

.header .sp-menu .menu-inner__menubox>ul>li .sub-menu>ul {
  margin-top: calc(22* (100vw / 375));
}

.header .sp-menu .menu-inner__menubox>ul>li .sub-menu>ul>li:not(:last-child) {
  margin-bottom: calc(22* (100vw / 375));
}

.header .sp-menu .menu-inner__menubox>ul>li .sub-menu>ul>li a {
  font-weight: normal;
}

/*========== menu-inner__user ==========*/
.header .sp-menu .menu-inner__user {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 85%;
  column-gap: calc(17 * (100vw / 357));
  row-gap: calc(20 * (100vw / 357));
  margin: 0 auto;
}

.header .sp-menu .menu-inner__user>li {
  font-size: calc(12 * (100vw / 357));
  letter-spacing: 0;
}

.header .sp-menu .menu-inner__user>li .sub-menu {
  display: none;
  color: #707070;
  letter-spacing: 0.06em;
  margin-top: calc(10 * (100vw / 375));
}

.header .sp-menu .menu-inner__user .dropdown {
  width: auto;
  max-width: calc(144* (100vw / 375));
  margin-right: calc(11* (100vw / 375));
}

.header .sp-menu .menu-inner__user>li .arrow {
  position: absolute;
  top: 47%;
  width: calc(6* (100vw / 375));
  right: -14%;
  display: block;
}

.header .sp-menu .menu-inner__user>li .sub-menu li {
  font-family: var(--font-ja);
  font-size: calc(8* (100vw / 375));
  line-height: 2.25;
}

.header .sp-menu .menu-inner__user>li .sub-menu li a {
  font-weight: normal;
}

.header .sp-menu .menu-inner__userbottom {
  display: grid;
  width: 88.5%;
  grid-template-columns: 32.5%;
  row-gap: calc(20* (100vw / 375));
  padding: calc(28 * (100vw / 357)) 0 0 calc(30* (100vw / 375));
  margin: 0 0 calc(47* (100vw / 375)) calc(0* (100vw / 375));
}

.header .sp-menu .menu-inner__bottom {
  margin-left: calc(100 * (100vw / 750));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .sp-menu .menu-inner__bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.header .sp-menu .menu-inner__userbottom li {
  display: flex;
  align-items: center;
  font-size: calc(12 * (100vw / 375));
  letter-spacing: 0;
}

.header .sp-menu .menu-inner__login {
  grid-column: 1/3;
  grid-row: 1/2;
}

.header .sp-menu .menu-inner__login span {
  width: calc(25 * (100vw / 750));
  margin-right: calc(24 * (100vw / 750));
}

.header .sp-menu .menu-inner__login img {
  width: calc(21 *(100vw /375));
  margin-right: calc(6*(100vw /375));
}

.header .sp-menu .menu-inner__favorite {
  grid-column: 1/2;
  grid-row: 2/3;
}

.header .sp-menu .menu-inner__favorite span {
  width: calc(30 * (100vw / 750));
  margin-right: calc(30 * (100vw / 750));
}

.header .sp-menu .menu-inner__favorite img {
  width: calc(17 *(100vw /375));
  margin-right: calc(13*(100vw /375));
}

.header .sp-menu .menu-inner__info {
  grid-column: 2/3;
  grid-row: 2/3;
}

.header .sp-menu .menu-inner__info img {
  width: calc(22 *(100vw /375));
  margin-right: calc(8*(100vw /375));
}

.header .sp-menu .menu-inner__info-inner {
  display: flex;
  align-items: center;
}

.scroll-prevent {
  overflow: hidden;
}

/* ------------------------------------------------
  ハンバーガー内アニメーション
------------------------------------------------ */
@-webkit-keyframes hd_animation {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes hd_animation {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.header .sp-menu.show .menu-inner__menubox>ul>li,
.header .sp-menu.show .menu-inner__user>li {
  opacity: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.header .sp-menu.show .menu-inner__menubox .menu-inner__ttl,
.header .sp-menu.show .menu-inner__category {
  opacity: 0;
  -webkit-transform: translateY(10%);
  -ms-transform: translateY(10%);
  transform: translateY(10%);
}

.header .sp-menu.show .menu-inner__category {
  -webkit-animation: hd_animation 0.5s ease 0.3s 1 forwards;
  animation: hd_animation 0.5s ease 0.3s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(1),
.header .sp-menu.show .menu-inner__menubox:nth-child(1) .menu-inner__ttl {
  -webkit-animation: hd_animation 0.5s ease 0.4s 1 forwards;
  animation: hd_animation 0.5s ease 0.4s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(2) {
  -webkit-animation: hd_animation 0.5s ease 0.5s 1 forwards;
  animation: hd_animation 0.5s ease 0.5s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(3) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(4) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(5) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(6) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(7) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(8) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(9) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(1)>ul>li:nth-child(10) {
  -webkit-animation: hd_animation 0.5s ease 0.6s 1 forwards;
  animation: hd_animation 0.5s ease 0.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(2)>ul>li:nth-child(1),
.header .sp-menu.show .menu-inner__menubox:nth-child(2) .menu-inner__ttl {
  -webkit-animation: hd_animation 0.5s ease 0.7s 1 forwards;
  animation: hd_animation 0.5s ease 0.7s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(2)>ul>li:nth-child(2) {
  -webkit-animation: hd_animation 0.5s ease 0.8s 1 forwards;
  animation: hd_animation 0.5s ease 0.8s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(2)>ul>li:nth-child(3) {
  -webkit-animation: hd_animation 0.5s ease 0.9s 1 forwards;
  animation: hd_animation 0.5s ease 0.9s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(2)>ul>li:nth-child(4) {
  -webkit-animation: hd_animation 0.5s ease 1s 1 forwards;
  animation: hd_animation 0.5s ease 1s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(2)>ul>li:nth-child(5) {
  -webkit-animation: hd_animation 0.5s ease 1s 1 forwards;
  animation: hd_animation 0.5s ease 1s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(3)>ul>li:nth-child(1),
.header .sp-menu.show .menu-inner__menubox:nth-child(3) .menu-inner__ttl {
  -webkit-animation: hd_animation 0.5s ease 1.0s 1 forwards;
  animation: hd_animation 0.5s ease 1.0s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(3)>ul>li:nth-child(2) {
  -webkit-animation: hd_animation 0.5s ease 1.1s 1 forwards;
  animation: hd_animation 0.5s ease 1.1s 1 forwards;
}

.header .sp-menu.show .menu-inner__menubox:nth-child(3)>ul>li:nth-child(3) {
  -webkit-animation: hd_animation 0.5s ease 1.2s 1 forwards;
  animation: hd_animation 0.5s ease 1.2s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(1) {
  -webkit-animation: hd_animation 0.5s ease 1.3s 1 forwards;
  animation: hd_animation 0.5s ease 1.3s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(2) {
  -webkit-animation: hd_animation 0.5s ease 1.4s 1 forwards;
  animation: hd_animation 0.5s ease 1.4s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(3) {
  -webkit-animation: hd_animation 0.5s ease 1.5s 1 forwards;
  animation: hd_animation 0.5s ease 1.5s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(4) {
  -webkit-animation: hd_animation 0.5s ease 1.6s 1 forwards;
  animation: hd_animation 0.5s ease 1.6s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(5) {
  -webkit-animation: hd_animation 0.5s ease 1.7s 1 forwards;
  animation: hd_animation 0.5s ease 1.7s 1 forwards;
}

.header .sp-menu.show .menu-inner__user>li:nth-child(6) {
  -webkit-animation: hd_animation 0.5s ease 1.8s 1 forwards;
  animation: hd_animation 0.5s ease 1.8s 1 forwards;
}


/* ------------------------------------------------
  footer
------------------------------------------------ */
.footer {
  padding: calc(9* (100vw / 375)) 0 calc(10* (100vw / 375));
  text-align: center;
}

/*========== footer_mail ==========*/
.footer .footer_mail {
  padding-left: calc(20 * (100vw / 357));
  margin-bottom: calc(89 * (100vw / 375));
  display: none;
}

.footer .footer_mailmagazine {
  font-family: var(--font-ja);
  text-align: left;
  opacity: 70%;
}

.footer .error_inline {
  display: block;
  margin-bottom: calc(5 * (100vw / 375));
}

.footer .footer_mail .title {
  font-family: "Times New Roman", Times, serif;
  font-size: calc(16 * (100vw / 375));
  text-align: left;
}

.footer .footer_mail .flex {
  display: flex;
  margin: calc(21 * (100vw / 375)) auto calc(10 * (100vw / 375));
  position: relative;
  justify-content: left;
}

.footer .footer_mail .dvMailMagazineRegist input {
  font-family: "roboto", sans-serif;
  font-weight: 300;
  font-size: calc(10 * (100vw / 375));
  width: calc(290 * (100vw / 375));
  height: calc(60 * (100vw / 750));
  line-height: calc(60 * (100vw / 750));
  background: none;
  padding-left: calc(9 * (100vw / 375));
  border: 1px solid #000;
  letter-spacing: -0.02em;
}

.footer .footer_mail .dvMailMagazineRegist input::-webkit-input-placeholder {
  color: #767676;
  font-weight: 200;
}

.footer .footer_mail .btn {
  font-family: "Times New Roman", Times, serif;
  font-weight: 300;
  width: calc(86 * (100vw / 750));
  font-size: calc(20 * (100vw / 750));
  display: block;
  line-height: calc(60 * (100vw / 750));
  height: calc(60 * (100vw / 750));
  letter-spacing: 0.1em;
  text-align: center;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.footer .footer_mail #dvMailMagazineRegistInput>span {
  padding-top: calc(10 * (100vw / 750));
  display: block;
  font-size: calc(22 * (100vw / 750));
}

.footer .footer_mail .footer_mail_txt {
  font-family: var(--font-ja);
  font-size: calc(10 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0;
  text-align: left;
}

.footer .footer_mail .completeInfo {
  font-size: calc(8 * (100vw / 357));
  line-height: 1.7142857143;
  letter-spacing: 0.06em;
  margin: calc(20 * (100vw / 750)) 0 calc(60 * (100vw / 750));
}

/* 6/24追加 */
.footer .footer_mailmagazine_txt{
  font-family: var(--font-ja);
  width: calc(333* (100vw /375));
  font-size: calc(10 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0;
  text-align: left;
  margin-bottom: calc(10 * (100vw /375));
}

/*========== footer-sns ==========*/
.footer .footer-sns {
  font-family: "Times New Roman", Times, serif;
  display: flex;
  align-items: center;
  padding-left: calc(20 * (100vw / 357));
  margin-bottom: calc(17 * (100vw / 357));
}

.footer .footer-sns_ttl {
  font-size: calc(11 * (100vw / 357));
  letter-spacing: -0.02em;
}

.footer .footer-sns_list {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(22* (100vw / 357));
  margin-left: calc(18* (100vw / 357));
}

.footer .footer-sns_cont span {
  display: block;
}

.footer .footer-sns_cont img {
  width: 100%;
}

.footer .footer-sns_instagram {
  width: calc(22 * (100vw / 357));
}

.footer .footer-sns_line {
  width: calc(25 * (100vw / 357));
}

.footer .footer-sns_youtube {
  width: calc(25 * (100vw / 357));
  padding-top: 0.2rem;
}

.footer .footer-sns-app {
  margin-bottom: calc(30 * (100vw / 357));
}

.footer .footer-app_list {
  margin-left: calc(22* (100vw / 357));
  column-gap: calc(6* (100vw / 357));
}

.footer .footer-app_cont {
  width: calc(22* (100vw / 357));
  margin-right: calc(12* (100vw / 357));
}

.footer .footer-app_cont-appstore {
  width: calc(71 * (100vw / 357));
}

.footer .footer-app_cont-google {
  width: calc(78 * (100vw / 357));
}

.footer .footer-app_cont-appstore a,
.footer .footer-app_cont-google a {
  display: block;
}

/*========== footer-nav ==========*/
.footer .footer-nav {
  font-family: "Times New Roman", Times, serif;
  font-size: calc(11 * (100vw / 375));
  text-align: left;
  border-top: solid 1px #CECECE;
  padding: calc(20 * (100vw / 375)) 0 0 calc(20 * (100vw / 375));
  margin: 0 auto calc(34 * (100vw / 375));
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  column-gap: calc(18* (100vw / 375));
  row-gap: calc(19* (100vw / 375));
}

.footer .footer-nav .pagetop {
  width: calc(35 * (100vw / 375));
  height: calc(15 * (100vw / 375));
  position: absolute;
  right: 5.4%;
}

.footer .pagetop a {
  display: block;
}

.footer .pagetop a img {
  width: 100%;
}

.footer .footer-nav .dropdown a.open {
  color: #CECECE;
}

.footer .footer-nav .dropdown a .arrow {
  margin-left: 0;
  position: relative;
  display: inline-block;
  width: calc(14 * (100vw / 750));
  height: calc(14 * (100vw / 750));
  top: calc(4 * (100vw / 750));
  left: calc(2 * (100vw / 750));
}

.footer .footer-nav .dropdown a .arrow::before,
.footer .footer-nav .dropdown a .arrow::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(14 * (100vw / 750));
  height: 1px;
  background: #000;
  -webkit-transition: .2s;
  transition: .2s;
}

.footer .footer-nav .dropdown a .arrow::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 0;
}

.footer .footer-nav .dropdown a.open .arrow::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.footer .footer-nav .sub-menu {
  display: none;
}

.footer .footer-nav .sub-menu .box-menu {
  width: calc(144 * (100vw / 375));
  padding-top: calc(14 * (100vw / 375));
}

.footer .footer-nav .sub-menu .box-menu li {
  font-family: font-ja;
  font-size: calc(8 * (100vw / 375));
  line-height: 2.25;
  color: #707070;
}

.footer .footer-nav .sub-menu .box-menu li a {
  font-weight: normal;
}

.footer .footer-description {
  font-family: font-ja;
  font-size: calc(7 * (100vw / 357));
  line-height: 1.7142857143;
  letter-spacing: 0.06em;
  text-align: left;
  color: #707070;
  opacity: 50%;
  padding-left: calc(18 * (100vw / 357));
  margin-bottom: calc(12 * (100vw / 357));
}

.footer .footer-copyright {
  font-family: "roboto", sans-serif;
  font-weight: 300;
  font-size: calc(14 * (100vw / 750));
  letter-spacing: 0.07em;
  text-align: left;
  color: #707070;
  opacity: 50%;
  padding-left: calc(18 * (100vw / 357));
}

/********** App promotion banner **********/
.responsive-wrapper {
  outline: 0;
}


/*----▼ 検索履歴サジェスト　2023.11.20 ▼----*/
.ui-widget {
  font-size: calc(22* (100vw / 750));
  letter-spacing: 0.06em;
}

.ui-menu>li:hover {
  background: #E7EBE5;
}

.ui-menu .ui-menu-item {
  position: relative;
}

.ui-menu .ui-menu-item:not(:first-child) {
  border-top: 1px solid #000;
}

.ui-widget.ui-widget-content hr {
  display: none;
}

/*削除ボタン位置設定*/
.ui-menu button.ui-menu-item {
  position: absolute;
  background-image: url(/Contents/ImagesPkg/common/suggest_deleat.svg);
  background-color: transparent;
  left: -3.5rem;
  width: calc(30* (100vw / 750));
  height: calc(30* (100vw / 750));
  border: none;
  top: calc(15* (100vw / 750));
  list-style-image: none;
  font-size: 0;
}

.ui-menu-item-wrapper+.ui-widget.ui-widget-content.ui-front {
  display: block !important;
  border: none;
  background-color: transparent;
  z-index: 10;
  width: calc(30* (100vw / 750)) !important;
  height: calc(30* (100vw / 750));
  font-size: 0;
  border: none;
  position: absolute;
  top: 11px;
  right: 9px;
}

.ui-menu .ui-menu-item-wrapper {
  padding: calc(20* (100vw / 750)) 0 calc(23* (100vw / 750)) calc(16* (100vw / 750));
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.ui-menu.ui-widget * {
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "palt";
  text-align: left;
}

.ui-menu .ui-menu-item-wrapper img {
  height: auto;
  width: calc(120* (100vw / 750));
  margin-right: calc(32* (100vw / 750));
}

.ui-menu .ui-menu-item-wrapper p {
  width: 70%;
}

.ui-menu .ui-menu-item-wrapper .name {
  display: block;
  font-size: calc(20* (100vw / 750));
  margin-bottom: calc(10* (100vw / 750));
  line-height: 1.5;
}

.ui-menu .ui-menu-item-wrapper .price {
  font-family: "roboto", 'font-ja', sans-serif;
  font-size: calc(20* (100vw / 750));
  letter-spacing: 0.03em;
}

.ui-widget.ui-widget-content {
  background-color: #FFF;
  border: 1px solid #000;
  border-top: none;
  position: fixed;
}

.ui-menu button.ui-menu-item {
  right: 0;
  left: 0;
  top: 0;
}

.ui-menu .ui-menu-item-wrapper {
  max-width: 90%;
}

.ui-widget.ui-widget-content {
  position: relative;
  width: 80.8% !important;
  /* max-width: calc(630* (100vw / 750)); */
  max-height: 35vh;
  overflow-y: scroll;
}

/*----▲ 検索履歴サジェスト　2023.11.20 ▲----*/

/*検索履歴削除モーダル*/
.delHistoryAlertModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  padding: 30px 20px 40px;
  border: 1px solid #ccc;
  display: none;
  width: 90%;
  height: auto;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #000;
  font-size: calc(24* (100vw / 750));
  line-height: 1.75;
}

.delHistoryAlertModalBody {
  height: 30%;
  text-align: center;
}

.delHistoryModalClose {
  text-align: center;
  background-color: #ededed;
  margin: calc(20* (100vw / 750)) 0 0 0;
  padding: calc(20* (100vw / 750));
  font-size: calc(24* (100vw / 750));
}

.delHistoryModalClose:hover {
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ===============================================
* 検索ワードリセットボタン *
=============================================== */
.box-input input.input-text {
  position: relative;
}

.modalFilter .box-input input.input-text::-webkit-search-cancel-button,
.modal-inner .box-input input.input-text::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background-image: url(/Contents/ImagesPkg/common/searchword_deleat.svg);
  background-color: transparent;
  width: calc(17* (100vw /750));
  height: calc(17* (100vw /750));
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: calc(100% - 22px) !important;
  font-size: 0 !important;
}



/* =========================
  MIR260430 CUSTOM START
========================= */


/* =========================
  MIR260430 CUSTOM END
========================= */