/*
** body
*/

body {
  position: relative;
}

body.deactivation {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  overscroll-behavior: none;
}

body::before, body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  animation-name: curtainOpen;
  animation-iteration-count: 1;
  animation-duration: 0.75s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

body::before{
  z-index: calc(var(--z-index-max) + 10);
  background-color: var(--red);
  animation-delay: 1.5s;

}

body::after{
  z-index: calc(var(--z-index-max) + 11);
  background-color: #fff;
  animation-delay: 0.75s;
}

@keyframes curtainOpen {
  0% {
    width: 100vw;
  }
  100% { 
    width: 0;
    /* display: none; */
    visibility: hidden;
  }
}


/*
** #bg-layer
*/

#bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  width: 100svw;
  height: 100vh;
  height: 100svh;
  background-image: url(../../image/common/bg_general@sm.jpg);
  background-size : cover;
}


/*
** #cookie-banner
*/

#cookie-banner {
  position: fixed;
  bottom: 1.5em;
  left: 0;
  z-index: calc(var(--z-index-max) + 1);
  display: none;
}

.cookie-banner__inner {
  max-height: calc(100vh - (1.5em * 2));
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  border: 0.4rem solid var(--red);
  border-radius: 1.5em;
  padding: 1.5625em 1em 1.6875em;
}

.cookie-banner__contents {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: 1.25em;
}

.cookie-banner__description {
  font-size: 0.875em;
  font-weight: 500;
  text-align: justify;
}

.cookie-banner__description a {
  line-height: 1.25;
  border-bottom: 0.15rem solid var(--black);
}

.cookie-banner__description i {
  margin-left: 0.3em;
}

#cookie-banner .cookie__accept-block {
  border-radius: 1.25em;
}


/*
** .cookie__accept-block
*/

.cookie__accept-block {
  font-size: 0.75em;
  color: #fff;
  text-align: justify;
  background-color: var(--red);
  padding: 1em;
}


/*
** #modal
*/

#modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-max);
  display: none;
  width: 100vw;
  width: 100svw;
  height: 100vh;
  height: 100svh;
  background-color: rgba(0,0,0,0.6);
}

.modal__container {
  position: relative;
  width: auto;
  height: 100%;
}

.modal__container-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.modal__container-inner {
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none; /* Firefox:スクロールバー非表示 */
}

.modal__container-inner::-webkit-scrollbar {  
  display: none; /* Google Chrome、Safari、MicrosoftEdge:スクロールバー非表示 */
}

.modal__contents {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  background-color: #fff;
  border-radius: 0.625em;
  padding: 2.5em 1em 2.875em;
  margin: 2em auto;
}

.modal__title {
  font-size: 1.125em;
  font-weight: 500;
  text-align: center;
}

.modal__contents-body {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: 2em;
}

.modal__message {
  text-align: center;
  margin-top: 1.3125em;
}

.modal__message br {
  display: none;
}

.modal__message a {
  line-height: 1.25;
  border-bottom: 0.15rem solid var(--black);
}

.modal__message i {
  margin-left: 0.3em;
}

.modal__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 15em));
  grid-auto-rows: 3.125em;
  justify-content: center;
  column-gap: 0.875em;
}

.modal__buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.125em;
  line-height: 1;
  border: 0.2rem solid;
  border-radius: 4.375em;
  transition: var(--transition);
}

.modal__buttons button:not(.red) {
  color: var(--black);
  background-color: #fff;
  border-color: var(--red);
}

.modal__buttons button.red {
  color: #fff;
  background-color: var(--red);
  border-color: #fff;
}

@media (hover: hover) and (pointer: fine) {

  .modal__buttons button {
    cursor: pointer;
  }

  .modal__buttons button:not(.red):hover {
    color: #fff;
    background-color: var(--red);
    border-color: #fff;
  }
  
  .modal__buttons button.red:hover {
    color: var(--black);
    background-color: #fff;
    border-color: var(--red);
  }

}

#modal .cookie__accept-block {
  border-radius: 0.625em;
}


/*
** .header__page
*/

.header__page-general {
  border-bottom: 0.2rem solid var(--l-gray01);
  margin-bottom: 2.5em;
}

.header__page-general-lead { 
  font-size: 1.25em;
  margin-bottom: 2.25em;
}

.header__page-general-lead br {
  display: none;
}


/*
** .header__page-exception
*/

.header__page-exception {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: 1.875em;
  border-bottom: 0.2rem solid var(--l-gray01);
  padding-bottom: 1.875em;
  margin-bottom: 2.6875em; 
}

.header__page-exception-image {
  position: relative;
  width: 21.1875em;
  height: 14.125em;
  padding-top: 0.8125em;
  padding-bottom: 0.8125em;
  padding-left: 0.8125em;
  margin-left: auto;
}

.header__page-exception-image::before,
.header__page-exception-image::after {
  content: '';
  display: block;
  height: calc(100% - 0.8125em);
  position: absolute;
  right: 0;
  border-top-left-radius: 31.25em;
  border-bottom-left-radius: 31.25em;
}

.header__page-exception-image::before {
  top: 0;
  width: 100%;
  background-color: var(--red);
}

.header__page-exception-image::after {
  bottom: 0;
  width: calc(100% - 0.8125em - 0.5em);
  background-color: var(--green);
}

.header__page-exception-image img {
  position: relative;
  z-index: var(--z-index-low);
  width: 100%;
  height: 100%;
  border-top-left-radius: 31.25em;
  border-bottom-left-radius: 31.25em;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.header__page-exception-lead { 
  font-size: 1.25em;
}

.header__page-exception-lead br {
  display: none;
}


/*
** .slider__controls
*/

.slider__controls {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-auto-rows: max-content;
  align-items: center;
  column-gap: 1em;
  margin-top: 0.875em;
}

.slider__controls .slider__dots {
  order: 2;
}

.slider__controls .slider__arrows {
  display: contents;
}

.slider__controls .slider__arrows .arrow.prev {
  order: 1;
}

.slider__controls .slider__arrows .arrow.next {
  order: 3;
}


/*
** .slider__dots
*/

.slider__dots {
  position: relative;
  bottom: unset;
  display: grid;
  grid-template-columns: repeat(auto-fit, 0.75em);
  grid-auto-rows: 0.75em;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5em 1em;
}

.slider__dots .dot.dummy::before {
  content: '\25cf';
  display: block;
}

.slider__dots .slick-dots {
  display: contents;
}

.slider__dots .slick-dots li {
  width: 100%;
  height: 100%;
  margin: 0;
}

.slider__dots .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.slider__dots .dot.dummy::before,
.slider__dots .slick-dots li button:before {
  font-size: calc(((var(--font-size) / var(--screen-size-sm)) * 100vw) * 0.75);
  line-height: 1;
  width: 100%;
  height: 100%;
  color: var(--l-gray02);
  opacity: 1;
}

.slider__dots .dot.dummy::before,
.slider__dots .slick-dots li.slick-active button:before {
  color: var(--red);
  opacity: 1;
}

.slider__dots .dot.dummy:not(:last-child) {
  display: none;
}


/*
** .slider__arrows
*/

.slider__arrows .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  font-size: 1.2em;
  line-height: 1;
  background-color: #fff;
  border: 0.2rem solid;
  border-radius: 50%;
  transition: var(--transition);
}

.slider__arrows .arrow.slick-arrow:not(.slick-disabled) {
  color: var(--red);
  border-color: var(--red);
}

.slider__arrows .arrow.dummy,
.slider__arrows .arrow.slick-disabled {
  color: var(--l-gray02);
  border-color: var(--l-gray02);
}

.slider__arrows .arrow.slick-arrow ~ .arrow.dummy {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .slider__arrows .arrow.slick-arrow:not(.slick-disabled) {
    cursor: pointer;
  }
}


/*
** .slider__general
*/

.slider__general-list.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slider__general-list li {
  position: relative;
}

.slider__general-list li::before {
  content: '';
  display: block;
  padding-top: calc((3 / 4) * 100%);
}

.slider__general-list li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/*
** .slider__variable
*/

.slider__variable .slick-track {
  display: flex;
}

.slider__variable .slick-slide {
  height: auto;
}

.slider__variable-container .slider__arrows {
  display: flex;
  justify-content: flex-end;
  column-gap: 1em;
}


/*
** .button__ulike
*/

.button__ulike .wp_ulike_general_class {
  position: relative;
  box-shadow: none;
  padding: 0 !important;
  margin: 0 !important;
}

.button__ulike .wpulike-heart button.wp_ulike_btn {
  width: calc(((var(--font-size) / var(--screen-size-sm)) * 100vw) * 2.5);
  height: calc(((var(--font-size) / var(--screen-size-sm)) * 100vw) * 2.5);
  pointer-events: none;
  cursor: auto;
  padding: 0 !important;
}

.button__ulike .wpulike-heart .wp_ulike_put_image:after {
  width: 100%;
  height: 100%;
}

.button__ulike .wpulike-heart .wp_ulike_put_image:after {
  background-image: url(../../image/storenews/marker_wpulike.svg);
}

.button__ulike .wpulike-heart .wp_ulike_is_restricted .wp_ulike_put_image:after,
.button__ulike .wpulike-heart .wp_ulike_is_not_liked .wp_ulike_put_image.wp_ulike_btn_is_active::after {
  background-image: url(../../image/storenews/marker_wpulike@active.svg);
}

.button__ulike .wpulike-heart .wp_ulike_put_image.wp_ulike_btn_is_active::after {
  filter: none;
}

.button__ulike .button__ulike-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-low);
  display: block;
  width: 100%;
  height: 100%;
}

.button__ulike .wpulike-heart .wp_ulike_is_restricted .button__ulike-overlay,
.button__ulike .wpulike-heart button.wp_ulike_btn.wp_ulike_btn_is_active + .button__ulike-overlay {
  pointer-events: none;
  cursor: auto;
}

@media (hover: hover) and (pointer: fine) {
  .button__ulike .button__ulike-overlay {
    cursor: pointer;
  }
}


/*
** .button__general
*/

.button__general {
  width: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  min-width: 13.375em;
  height: 3.125em;
}

.button__general a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.125em;
  line-height: 1;
  border: 0.2rem solid;
  border-radius: 4.375em;
  padding-left: 1em;
  padding-right: 2em;
}

.button__general:not(.red) a {
  background-color: #fff;
  border-color: var(--red);
}

.button__general.red a {
  color: #fff;
  background-color: var(--red);
  border-color: #fff;
}

.button__general a::after {
  position: absolute;
  top: 50%;
  right: 0.8em;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}

.button__general:not(.red) a::after {
  color: var(--red);
}

.button__general.red a::after {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {

  .button__general:not(.red) a:hover {
    color: #fff;
    background-color: var(--red);
    border-color: #fff;
  }
  
  .button__general.red a:hover {
    color: var(--black);
    background-color: #fff;
    border-color: var(--red);
  }

  .button__general a:hover::after {
    right: 0.6em;
  }

  .button__general:not(.red) a:hover::after {
    color: #fff;
  }
  
  .button__general.red a:hover::after {
    color: var(--red);
  }

}


/*
** .button__mystore
*/

.button__mystore {
  position: relative;
  width: 100%;
  height: 3.125em;
  font-family: var(--noto-sans);
  font-size: calc((var(--font-size) / var(--screen-size-sm)) * 100vw);
  border: 0.2rem solid;
  border-radius: 5em;
  transition: var(--transition);
  padding-left: 0.875em;
  padding-right: 3.5em;
}

*.not-mystore .button__mystore {
  color: #fff;
  background-color: var(--red);
  border-color: #fff;
}

*.mystore .button__mystore {
  color: var(--black);
  background-color: #fff;
  border-color: var(--red);
}

.button__mystore::before {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: var(--z-index-low);
  display: block;
  transition: var(--transition);
}

*.not-mystore .button__mystore::before {
  content: '\02b';
  width: calc((3.125em / 2.4) - 0.8rem);
  font-size: 2.4em;
  color: var(--red);
  line-height: calc((3.125em / 2.4 * 0.95) - 0.8rem);
}

*.mystore .button__mystore::before {
  content: '\f068';
  width: calc((3.125em / 1.5) - 0.8rem);
  font-size: 1.5em;
  color: #fff;
  line-height: calc((3.125em / 1.5) - 0.8rem);
}

.button__mystore::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.2rem;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  width: calc(3.125em - 0.8rem);
  height: calc(3.125em - 0.8rem);
  border-radius: 50%;
  transition: var(--transition);
}

*.not-mystore .button__mystore::after {
  background-color: #fff;
}

*.mystore .button__mystore::after {
  background-color: var(--red);
}

.button__mystore span {
  display: inline-block;
  line-height: 1;
  transition: var(--transition);
}

*.not-mystore .button__mystore span {
  color: #fff;
}

.button__mystore span::before,
.button__mystore span::after {
  display: block;
}

*.not-mystore .button__mystore span::before {
  content: 'マイストア登録';
}

*.mystore .button__mystore span::before {
  content: 'マイストア登録済み';
  margin-bottom: 0.25em;
}

*.mystore .button__mystore span::after {
  content: '登録解除';
  font-size: 0.875em;
}

@media (hover: hover) and (pointer: fine) {

  .button__mystore {
    cursor: pointer;
  }
  
  *.not-mystore .button__mystore:hover {
    background-color: #fff;
    border-color: var(--red);
  }

  *.mystore .button__mystore:hover {
    background-color: var(--red);
    border-color: #fff;
  }

  *.not-mystore .button__mystore:hover::before {
    color: #fff;
  }
  
  *.mystore .button__mystore:hover::before {
    color: var(--red);
  }

  *.not-mystore .button__mystore:hover::after {
    background-color: var(--red);
  }
  
  *.mystore .button__mystore:hover::after {
    background-color: #fff;
  }

  *.not-mystore .button__mystore:hover span {
    color: var(--black);
  }

  *.mystore .button__mystore:hover span {
    color: #fff;
  }

}


/*
** .arrow__general
** .arrow__general-a
*/

.arrow__general::after,
.arrow__general-a a::after {
  content: '\f054';
  font-weight: normal;
  font-size: calc(((var(--font-size) / var(--screen-size-sm)) * 100vw) * 1.5);
  transition: var(--transition);
}


/*
** .image__image__not-found
*/

.image__not-found .image__placeholder {
  background-image: url(../../image/common/image_placeholder.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}