/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
button,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

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

body {
  background-color: #fff;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
@media print, screen and (min-width: 961px) {
  body {
    font-size: 18px;
  }
}
@media screen and (max-width: 960px) {
  body {
    font-size: 3.7333333333vw;
  }
}
body.is-fixed {
  width: 100vw;
  position: fixed;
  pointer-events: none;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

a,
button {
  color: #000000;
  text-decoration: none;
}
@media print, screen and (min-width: 961px) {
  a:hover,
  button:hover {
    color: #aaaaaa;
  }
}

.txt_red_underline {
  color: #cc0000;
  font-weight: 600;
  text-decoration: underline;
}

button {
  cursor: pointer;
}

b {
  font-weight: 700;
}

sup,
sub {
  font-size: 70%;
  font-weight: 100;
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
}

sup {
  bottom: 0.5ex;
}

sub {
  top: 0.5ex;
}

p.note,
ul.note li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #666666;
}
@media print, screen and (min-width: 961px) {
  p.note,
  ul.note li {
    font-size: 13px !important;
    line-height: 20px !important;
  }
}
@media screen and (max-width: 960px) {
  p.note,
  ul.note li {
    font-size: 3.2vw !important;
    line-height: 5.3333333333vw !important;
  }
}
p.note span:nth-child(odd),
ul.note li span:nth-child(odd) {
  margin-right: 0.2em;
  word-break: keep-all;
}
p.note sup:nth-child(odd),
ul.note li sup:nth-child(odd) {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 100%;
  font-weight: inherit;
  word-break: keep-all;
  height: auto;
  line-height: inherit;
  bottom: auto;
}
p.note a,
ul.note li a {
  color: #666666;
}
p.note a span,
ul.note li a span {
  text-decoration: underline;
}
p.note a:hover span,
ul.note li a:hover span {
  color: #aaaaaa;
}

@media print, screen and (min-width: 961px) {
  .note:not(:first-child) {
    margin-top: 20px;
  }
}
@media screen and (max-width: 960px) {
  .note:not(:first-child) {
    margin-top: 4vw;
  }
}

.caution,
.caution li,
.note.caution li {
  color: #cc0000;
}

.nowrap {
  white-space: nowrap;
}

.btn_general {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  border-radius: 100px;
  background-color: #000000;
  color: #fff;
  font-weight: 700;
}
@media print, screen and (min-width: 961px) {
  .btn_general {
    width: 460px;
    height: 80px;
    -webkit-box-shadow: 0px 9px 36px 0px rgba(73, 77, 82, 0.3);
            box-shadow: 0px 9px 36px 0px rgba(73, 77, 82, 0.3);
    font-size: 17px;
  }
}
@media screen and (max-width: 960px) {
  .btn_general {
    width: 82.6666666667vw;
    height: 17.3333333333vw;
    -webkit-box-shadow: 0px 2vw 6.5333333333vw 0px rgba(0, 0, 0, 0.22);
            box-shadow: 0px 2vw 6.5333333333vw 0px rgba(0, 0, 0, 0.22);
    font-size: 4vw;
  }
}
.btn_general.btn_disable {
  background-color: #d8d8d8;
  -webkit-box-shadow: none;
          box-shadow: none;
  pointer-events: none;
}

@media print, screen and (min-width: 961px) {
  .accordion_button:hover::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@media screen and (max-width: 960px) {
  .accordion_button {
    position: relative;
    width: 100%;
    text-align: left;
  }
}
.accordion_button::after {
  content: "";
  display: inline-block;
  background-color: #000000;
  -webkit-mask-image: url("/assets/img/common/icon_plus.svg");
          mask-image: url("/assets/img/common/icon_plus.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  position: absolute;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
@media print, screen and (min-width: 961px) {
  .accordion_button::after {
    width: 13px;
    height: 13px;
    right: 24px;
  }
}
@media screen and (max-width: 960px) {
  .accordion_button::after {
    width: 3.0666666667vw;
    height: 3.0666666667vw;
    top: 50%;
    right: 1.6vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.accordion_button.is-open::after {
  -webkit-mask-image: url("/assets/img/common/icon_minus.svg");
          mask-image: url("/assets/img/common/icon_minus.svg");
}
.btn_general.accordion_button {
  position: relative;
}
.btn_general.accordion_button::after {
  background-color: #fff;
}
@media screen and (max-width: 960px) {
  .btn_general.accordion_button::after {
    width: 3.3333333333vw;
    height: 3.3333333333vw;
    right: 4vw;
  }
}
.btn_general.accordion_button.is-open::after {
  -webkit-mask-image: url("/assets/img/common/icon_minus.svg");
          mask-image: url("/assets/img/common/icon_minus.svg");
}

.accordion_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.accordion_content.is-open {
  max-height: 1000px;
  -webkit-transition: all 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220);
  transition: all 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220);
}

.modal_bg {
  width: 100%;
  height: 100%;
  background-color: rgba(201, 201, 201, 0.8);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.modal_bg.is-active {
  opacity: 1;
  pointer-events: auto;
}

header {
  position: relative;
  z-index: 100;
}
@media print, screen and (min-width: 961px) {
  header {
    width: 100%;
    height: 100%;
    -webkit-transition-duration: 0;
            transition-duration: 0;
    pointer-events: none;
  }
}
@media screen and (max-width: 960px) {
  header .gnv {
    position: fixed;
    bottom: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@media print, screen and (min-width: 961px) {
  header.is-fixed {
    position: fixed;
    top: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  header.is-fixed + main {
    margin-top: 90px;
  }
}
@media print, screen and (min-width: 961px) {
  header.is-appear {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: -webkit-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000), -webkit-transform 1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  }
}
@media screen and (max-width: 960px) {
  header.is-appear .gnv {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
header .header {
  display: -ms-grid;
  display: grid;
  place-items: center;
  z-index: 10;
  pointer-events: none;
}
@media print, screen and (min-width: 961px) {
  header .header {
    width: 100%;
    height: 90px;
    position: absolute;
  }
}
@media screen and (max-width: 960px) {
  header .header {
    position: relative;
    height: 13.3333333333vw;
    border-bottom: 1px solid #e0e0e0;
  }
}
@media print, screen and (min-width: 961px) {
  header .header h1 {
    width: calc(100% - 80px);
    max-width: 1300px;
    position: absolute;
  }
}
header .header h1 a {
  pointer-events: all;
}
@media print, screen and (min-width: 961px) {
  header .header h1 img {
    width: 184px;
    margin-bottom: 15px;
  }
}
@media print and (max-width: 900px), screen and (min-width: 961px) and (max-width: 900px) {
  header .header h1 img {
    width: 149px;
  }
}
@media screen and (max-width: 960px) {
  header .header h1 img {
    width: 19.8666666667vw;
    width: 25.3333333333vw;
    margin-bottom: 1.3333333333vw;
  }
}
header nav {
  pointer-events: none;
  position: relative;
}
@media screen and (max-width: 960px) {
  header nav {
    z-index: 11;
  }
}
header nav .gnv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  position: relative;
  z-index: 9;
}
@media print, screen and (min-width: 961px) {
  header nav .gnv {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    border-bottom: 1px solid #e0e0e0;
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 6.6666666667vw;
    border-top: 1px solid #e0e0e0;
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
header nav .gnv li {
  pointer-events: all;
}
@media print, screen and (min-width: 961px) {
  header nav .gnv li {
    margin-left: 75px;
  }
}
@media print and (max-width: 1200px) and (min-width: 901px), screen and (min-width: 961px) and (max-width: 1200px) and (min-width: 901px) {
  header nav .gnv li {
    margin-left: 40px;
  }
}
@media print and (max-width: 980px), screen and (min-width: 961px) and (max-width: 980px) {
  header nav .gnv li {
    margin-left: 30px;
  }
}
header nav .gnv li > a,
header nav .gnv li button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  color: #000000;
  position: relative;
  cursor: pointer;
}
@media print, screen and (min-width: 961px) {
  header nav .gnv li > a,
  header nav .gnv li button {
    display: -ms-grid;
    display: grid;
    place-items: center;
    height: 90px;
    font-size: 19px;
  }
}
@media print and (max-width: 900px), screen and (min-width: 961px) and (max-width: 900px) {
  header nav .gnv li > a,
  header nav .gnv li button {
    font-size: 16px;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .gnv li > a::after,
  header nav .gnv li button::after {
    content: "";
    display: block;
    width: 130px;
    height: 4px;
    background-color: #aaaaaa;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) scaleY(0);
            transform: translateX(-50%) scaleY(0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  }
  header nav .gnv li > a:hover,
  header nav .gnv li button:hover {
    color: #aaaaaa;
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv li > a,
  header nav .gnv li button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2.6666666667vw 2vw;
    height: 16vw;
    font-size: 2.6666666667vw;
  }
  header nav .gnv li > a::after,
  header nav .gnv li button::after {
    content: "";
    display: block;
    width: 14.6666666667vw;
    height: 14.6666666667vw;
    border-radius: 50%;
    background-color: #eef1f2;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    z-index: -1;
  }
  header nav .gnv li > a::before,
  header nav .gnv li button::before {
    content: "";
    display: block;
    margin-bottom: 2.1333333333vw;
    width: 5.8666666667vw;
    height: 5.6vw;
    background-color: #000000;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .gnv li > a.is-active,
  header nav .gnv li button.is-active {
    color: #aaaaaa;
  }
  header nav .gnv li > a.is-active::after,
  header nav .gnv li button.is-active::after {
    -webkit-transform: translateX(-50%) scaleY(1);
            transform: translateX(-50%) scaleY(1);
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv li > a.is-active::after,
  header nav .gnv li button.is-active::after {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv .top a::before {
    -webkit-mask-image: url(../img/common/icon_top.png);
            mask-image: url(../img/common/icon_top.png);
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv .product button::before {
    -webkit-mask-image: url(../img/common/icon_product.png);
            mask-image: url(../img/common/icon_product.png);
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv .special {
    margin-right: -1.3333333333vw;
  }
  header nav .gnv .special button::before {
    -webkit-mask-image: url(../img/common/icon_special.png);
            mask-image: url(../img/common/icon_special.png);
  }
}
@media print, screen and (min-width: 961px) {
  header nav .gnv .shop {
    margin-right: 45px;
  }
}
@media print and (max-width: 1080px), screen and (min-width: 961px) and (max-width: 1080px) {
  header nav .gnv .shop {
    margin-right: 35px;
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv .shop {
    margin-right: -2.6666666667vw;
  }
  header nav .gnv .shop button {
    padding: 2.6666666667vw 0;
  }
  header nav .gnv .shop button::before {
    -webkit-mask-image: url(../img/common/icon_shop.png);
            mask-image: url(../img/common/icon_shop.png);
  }
}
@media print, screen and (min-width: 961px) {
  header nav .gnv .menu button {
    width: 90px;
    background-color: #14152e;
  }
  header nav .gnv .menu button span {
    display: none;
  }
  header nav .gnv .menu button::before {
    content: "";
    width: 34px;
    height: 22px;
    background-color: #fff;
    -webkit-mask-image: url(../img/common/icon_menu.svg);
            mask-image: url(../img/common/icon_menu.svg);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
  }
  header nav .gnv .menu button::after {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  header nav .gnv .menu button::before {
    -webkit-mask-image: url(../img/common/icon_menu.png);
            mask-image: url(../img/common/icon_menu.png);
  }
}
header nav .modal_menu {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow: scroll;
  background-color: #fff;
  position: fixed;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  scrollbar-width: none;
}
header nav .modal_menu::-webkit-scrollbar {
  display: none;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu {
    padding: 50px 0;
    max-height: calc(100% - 90px);
    top: 90px;
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh);
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu {
    max-height: calc(100% - 18.6666666667vw);
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    bottom: 16vw;
    -webkit-transform: translateY(200vh);
            transform: translateY(200vh);
  }
}
header nav .modal_menu.is-active {
  pointer-events: all;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu.is-active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu.is-active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
header nav .modal_menu div {
  margin: auto;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu div {
    max-width: 1024px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu div {
    padding: 9.6vw 5.3333333333vw 9.3333333333vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu div h2 {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu div h2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 6.9333333333vw;
    font-weight: 400;
  }
}
header nav .modal_menu .close {
  background: url(../img/common/icon_cross.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu .close {
    width: 28px;
    height: 28px;
    bottom: 40px;
    right: 40px;
    opacity: 0.5;
    -webkit-transition: -webkit-transform 0.45s ease;
    transition: -webkit-transform 0.45s ease;
    transition: transform 0.45s ease;
    transition: transform 0.45s ease, -webkit-transform 0.45s ease;
  }
  header nav .modal_menu .close:hover {
    opacity: 1;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu .close {
    width: 5.6vw;
    height: 5.6vw;
    top: 5.3333333333vw;
    right: 5.3333333333vw;
  }
}
header nav .modal_menu .close span {
  display: none;
}
header nav .modal_menu#menu_product .ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product .ttl {
    margin-top: 6.9333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product ul + .ttl {
    margin-top: 30px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product ul + .ttl {
    margin-top: 9.2vw;
  }
}
header nav .modal_menu#menu_product h3 {
  font-weight: 700;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product h3 {
    font-size: 15px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product h3 {
    font-size: 3.7333333333vw;
  }
}
header nav .modal_menu#menu_product .nv_all {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product .nv_all {
    font-size: 14px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product .nv_all {
    font-size: 3.7333333333vw;
  }
}
header nav .modal_menu#menu_product .nv_all::after {
  content: "";
  display: inline-block;
  background-color: #000000;
  -webkit-mask-image: url(../img/common/icon_arrow.svg);
          mask-image: url(../img/common/icon_arrow.svg);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product .nv_all::after {
    margin-left: 6px;
    width: 11px;
    height: 7px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product .nv_all::after {
    margin-left: 2.2666666667vw;
    width: 3.2vw;
    height: 2.1333333333vw;
  }
}
header nav .modal_menu#menu_product ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product ul {
    margin-top: 5px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product ul {
    margin-top: 3.8666666667vw;
    border-top: 1px solid #e0e0e0;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product ul li {
    margin-top: 15px;
    width: 20%;
    height: 38px;
    border-left: 1px solid #e0e0e0;
  }
  header nav .modal_menu#menu_product ul li:nth-child(5n), header nav .modal_menu#menu_product ul li:last-child {
    border-right: 1px solid #e0e0e0;
  }
  header nav .modal_menu#menu_product ul li:last-child:not(:nth-child(5n)) {
    width: calc(20% + 1px);
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product ul li {
    width: 50%;
    height: 14.8vw;
    border-bottom: 1px solid #e0e0e0;
  }
  header nav .modal_menu#menu_product ul li:nth-child(odd) {
    border-right: 1px solid #e0e0e0;
  }
}
header nav .modal_menu#menu_product ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  line-height: 1.3;
  position: relative;
}
header nav .modal_menu#menu_product ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product ul li a::before {
    width: 38px;
    height: 38px;
    left: 16px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product ul li a::before {
    width: 6.6666666667vw;
    height: 10.1333333333vw;
    left: 4vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_product ul li a {
    padding-left: 60px;
    font-size: 14px;
  }
  header nav .modal_menu#menu_product ul li a.styling-wax::before {
    background-size: 22px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_product ul li a {
    padding-left: 14vw;
    font-size: 3.4666666667vw;
  }
  header nav .modal_menu#menu_product ul li a.styling-wax::before {
    background-size: 5.3333333333vw;
  }
}
header nav .modal_menu#menu_product ul li a.skincare-facewash::before {
  background-image: url(../img/products/facecare/foaming.png);
}
header nav .modal_menu#menu_product ul li a.skincare-allinone::before {
  background-image: url(../img/products/facecare/perfect_cream_ex.png);
}
header nav .modal_menu#menu_product ul li a.skincare-basic::before {
  background-image: url(../img/products/facecare/perfect_gel.png);
}
header nav .modal_menu#menu_product ul li a.skincare-uv::before {
  background-image: url(../img/products/facecare/aging_uv.png);
}
header nav .modal_menu#menu_product ul li a.skincare-advanced::before {
  background-image: url(../img/products/facecare/eye_pack.png);
}
header nav .modal_menu#menu_product ul li a.skincare-brow::before {
  background-image: url(../img/products/facecare/trimmer.png);
}
header nav .modal_menu#menu_product ul li a.skincare-trouble::before {
  background-image: url(../img/products/facecare/anti_dry_lotion.png);
}
header nav .modal_menu#menu_product ul li a.skincare-traditional::before {
  background-image: url(../img/products/facecare/basic_after_shave_lotion.png);
}
header nav .modal_menu#menu_product ul li a.deodorant-hair::before {
  background-image: url(../img/products/smellcare/m_shampoo.png);
}
header nav .modal_menu#menu_product ul li a.deodorant-body::before {
  background-image: url(../img/products/smellcare/m_bodywash.png);
}
header nav .modal_menu#menu_product ul li a.deodorant-full::before {
  background-image: url(../img/products/smellcare/all_deo_wash.png);
}
header nav .modal_menu#menu_product ul li a.deodorant-paper::before {
  background-image: url(../img/products/smellcare/paper.png);
}
header nav .modal_menu#menu_product ul li a.styling-wax::before {
  background-image: url(../img/products/styling/wax_sh.png);
}
header nav .modal_menu#menu_product ul li a.styling-spray::before {
  background-image: url(../img/products/styling/spray_sh.png);
}
header nav .modal_menu#menu_product ul li a.styling-foam::before {
  background-image: url(../img/products/styling/form_sh.png);
}
header nav .modal_menu#menu_product ul li a.styling-gel::before {
  background-image: url(../img/products/styling/gel_sh.png);
}
header nav .modal_menu#menu_product ul li a.styling-cream::before {
  background-image: url(../img/products/styling/hair_cream.png);
}
header nav .modal_menu#menu_product ul li a.styling-fix::before {
  background-image: url(../img/products/styling/water_h.png);
}
header nav .modal_menu#menu_product ul li a.styling-grayhair::before {
  background-image: url(../img/products/styling/hair_dye_form_gh.png);
}
header nav .modal_menu#menu_product ul li a.styling-traditional::before {
  background-image: url(../img/products/styling/basic_hair_tonic.png);
}
header nav .modal_menu#menu_product ul li a.haircolor-onepush::before {
  background-image: url(../img/products/hair_dye/n_black.png);
}
header nav .modal_menu#menu_product ul li a.haircolor-design::before {
  background-image: url(../img/products/hair_dye/c_ash.png);
}
header nav .modal_menu#menu_product ul li a.haircolor-rinse::before {
  background-image: url(../img/products/hair_dye/cp_p_black.png);
}
header nav .modal_menu#menu_special ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_special ul {
    margin-top: 5px;
    gap: 9px;
  }
}
@media screen and (min-width: 961px) and (max-width: 1040px) {
  header nav .modal_menu#menu_special ul {
    margin: 5px auto;
    width: 680px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_special ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 3.8666666667vw;
  }
}
header nav .modal_menu#menu_special ul li.border {
  border: 1px solid #e0e0e0;
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_special ul li {
    margin-top: 2.6666666667vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_special ul li img {
    width: 335px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_special ul li img {
    width: 100%;
  }
}
header nav .modal_menu#menu_special ul li a {
  display: block;
  position: relative;
}
header nav .modal_menu#menu_special ul li a::after {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid #aaaaaa;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
}
header nav .modal_menu#menu_special ul li a:hover::after {
  opacity: 1;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop p {
    font-size: 14px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop p {
    margin-top: 7.7333333333vw;
    font-size: 3.7333333333vw;
  }
}
header nav .modal_menu#menu_shop ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop ul {
    margin-top: 15px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop ul {
    margin-top: 4.8vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop ul li {
    margin-right: 9px;
  }
  header nav .modal_menu#menu_shop ul li:nth-child(3n) {
    margin-right: 0;
  }
  header nav .modal_menu#menu_shop ul li:nth-child(n+4) {
    margin-top: 10px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop ul li:nth-child(even) {
    margin-left: 6.6666666667vw;
  }
}
header nav .modal_menu#menu_shop ul li a {
  display: -ms-grid;
  display: grid;
  place-items: center;
  border: 1px solid #e0e0e0;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop ul li a {
    width: 335px;
    height: 80px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop ul li a {
    width: 41.3333333333vw;
    height: 21.3333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop ul li a img.amazon {
    width: 130px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop ul li a img.amazon {
    width: 31.4666666667vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_shop ul li a img.rakuten {
    width: 123px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_shop ul li a img.rakuten {
    width: 29.8666666667vw;
  }
}
header nav .modal_menu#menu_shop ul li a:hover {
  border-color: #aaaaaa;
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul, header nav .modal_menu#menu_library div > ul {
    margin-top: 7.4666666667vw;
    border-top: 1px solid #e0e0e0;
  }
}
header nav .modal_menu#menu_menu div > ul li, header nav .modal_menu#menu_library div > ul li {
  font-weight: 700;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li, header nav .modal_menu#menu_library div > ul li {
    padding-bottom: 30px;
    font-size: 16px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li, header nav .modal_menu#menu_library div > ul li {
    padding: 2.6666666667vw 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 4vw;
  }
}
header nav .modal_menu#menu_menu div > ul li a, header nav .modal_menu#menu_library div > ul li a {
  display: block;
  background: none;
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li a, header nav .modal_menu#menu_library div > ul li a {
    padding: 3.4666666667vw 0;
  }
}
header nav .modal_menu#menu_menu div > ul li ul, header nav .modal_menu#menu_library div > ul li ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li ul, header nav .modal_menu#menu_library div > ul li ul {
    margin-top: 18px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li ul, header nav .modal_menu#menu_library div > ul li ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 5.0666666667vw;
  }
}
header nav .modal_menu#menu_menu div > ul li ul li, header nav .modal_menu#menu_library div > ul li ul li {
  font-weight: 400;
  border-bottom: none;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li ul li, header nav .modal_menu#menu_library div > ul li ul li {
    padding-bottom: 0;
    font-size: 14px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li ul li, header nav .modal_menu#menu_library div > ul li ul li {
    padding: 0;
    font-size: 3.7333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li ul li + li, header nav .modal_menu#menu_library div > ul li ul li + li {
    margin-top: 0;
    margin-left: 80px;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li ul li a::after, header nav .modal_menu#menu_library div > ul li ul li a::after {
    width: 11px;
    height: 7px;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li + li, header nav .modal_menu#menu_library div > ul li + li {
    margin-top: 30px;
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li h3, header nav .modal_menu#menu_library div > ul li h3 {
    padding-bottom: 15px;
    font-size: 15px;
  }
}
header nav .modal_menu#menu_menu div > ul li a, header nav .modal_menu#menu_library div > ul li a {
  display: block;
  position: relative;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li a, header nav .modal_menu#menu_library div > ul li a {
    padding: 18x 0;
  }
  header nav .modal_menu#menu_menu div > ul li a:hover::after, header nav .modal_menu#menu_library div > ul li a:hover::after {
    background-color: #aaaaaa;
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li a, header nav .modal_menu#menu_library div > ul li a {
    padding: 3.4666666667vw 0;
  }
}
header nav .modal_menu#menu_menu div > ul li a::after, header nav .modal_menu#menu_library div > ul li a::after {
  content: "";
  display: inline-block;
  background-color: #000000;
  -webkit-mask-image: url("/assets/img/common/icon_arrow_inpact.svg");
          mask-image: url("/assets/img/common/icon_arrow_inpact.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu div > ul li a::after, header nav .modal_menu#menu_library div > ul li a::after {
    margin-left: 10px;
    width: 15px;
    height: 9px;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu div > ul li a::after, header nav .modal_menu#menu_library div > ul li a::after {
    width: 3.0666666667vw;
    height: 2vw;
    position: absolute;
    top: 50%;
    right: 1.4666666667vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu .accordion_button, header nav .modal_menu#menu_library .accordion_button {
    pointer-events: none;
  }
  header nav .modal_menu#menu_menu .accordion_button::after, header nav .modal_menu#menu_library .accordion_button::after {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  header nav .modal_menu#menu_menu .accordion_button::after, header nav .modal_menu#menu_library .accordion_button::after {
    -webkit-mask-image: url("/assets/img/common/icon_plus.svg");
            mask-image: url("/assets/img/common/icon_plus.svg");
    width: 3.0666666667vw;
    height: 3.0666666667vw;
  }
}
header nav .modal_menu#menu_menu .accordion_button.is-open::after, header nav .modal_menu#menu_library .accordion_button.is-open::after {
  -webkit-mask-image: url("/assets/img/common/icon_minus.svg");
          mask-image: url("/assets/img/common/icon_minus.svg");
}
@media print, screen and (min-width: 961px) {
  header nav .modal_menu#menu_menu .accordion_content, header nav .modal_menu#menu_library .accordion_content {
    max-height: 1000px;
  }
}

main {
  overflow: hidden;
}
@media print, screen and (min-width: 961px) {
  main .contents {
    margin: auto;
    width: calc(100% - 40px);
    max-width: 1024px;
  }
}
@media screen and (max-width: 960px) {
  main .contents {
    margin-left: 5.3333333333vw;
    margin-right: 5.3333333333vw;
  }
}

@media print, screen and (min-width: 961px) {
  footer {
    margin-top: 160px;
  }
}
@media screen and (max-width: 960px) {
  footer {
    margin-top: 20vw;
    padding-bottom: 16vw;
  }
}
footer .bnr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: #eef1f2;
}
@media print, screen and (min-width: 961px) {
  footer .bnr {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 45px 0;
  }
}
@media screen and (max-width: 960px) {
  footer .bnr {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 11.2vw 5.3333333333vw 9.8666666667vw;
    width: 100%;
  }
}
@media print, screen and (min-width: 961px) {
  footer .bnr a {
    width: 248px;
    min-width: 248px;
  }
  footer .bnr a + a {
    margin-left: 80px;
  }
}
@media screen and (max-width: 960px) {
  footer .bnr a {
    width: 41.3333333333vw;
    min-width: 41.3333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  footer .bnr a figcaption {
    margin-top: 10px;
    font-size: 16px;
    line-height: 26px;
  }
}
@media screen and (max-width: 960px) {
  footer .bnr a figcaption {
    margin-top: 1.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 5.0666666667vw;
  }
}
footer .bnr a[target=_blank] figcaption::after {
  content: "";
  display: inline-block;
  background-color: #a0a0a0;
  -webkit-mask-image: url("/assets/img/common/icon_blank.svg");
          mask-image: url("/assets/img/common/icon_blank.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media print, screen and (min-width: 961px) {
  footer .bnr a[target=_blank] figcaption::after {
    margin-left: 5px;
    width: 12px;
    height: 12px;
  }
}
@media screen and (max-width: 960px) {
  footer .bnr a[target=_blank] figcaption::after {
    margin-left: 0.6666666667vw;
    width: 2.5333333333vw;
    height: 2.5333333333vw;
  }
}
footer h2 {
  text-align: center;
}
@media print, screen and (min-width: 961px) {
  footer h2 {
    margin-top: 60px;
  }
}
@media screen and (max-width: 960px) {
  footer h2 {
    margin-top: 12.5333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  footer h2 img {
    width: 214px;
  }
}
@media screen and (max-width: 960px) {
  footer h2 img {
    width: 46.1333333333vw;
  }
}
footer .product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media print, screen and (min-width: 961px) {
  footer .product {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 48px;
  }
}
@media screen and (max-width: 960px) {
  footer .product {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10.6666666667vw 5.3333333333vw 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
  }
}
@media print, screen and (min-width: 961px) {
  footer .product li + li {
    margin-left: 55px;
  }
}
@media screen and (max-width: 960px) {
  footer .product li + li {
    border-top: 1px solid #e0e0e0;
  }
}
footer .product a {
  display: block;
  position: relative;
}
@media print, screen and (min-width: 961px) {
  footer .product a {
    font-size: 17px;
  }
  footer .product a:hover::after {
    background-color: #aaaaaa;
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
}
@media screen and (max-width: 960px) {
  footer .product a {
    padding: 5.3333333333vw 0 5.4666666667vw;
  }
}
footer .product a::after {
  content: "";
  display: inline-block;
  background-color: #000000;
  -webkit-mask-image: url("/assets/img/common/icon_arrow_inpact.svg");
          mask-image: url("/assets/img/common/icon_arrow_inpact.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
@media print, screen and (min-width: 961px) {
  footer .product a::after {
    margin-left: 10px;
    width: 14px;
    height: 10px;
  }
}
@media screen and (max-width: 960px) {
  footer .product a::after {
    width: 3.0666666667vw;
    height: 2vw;
    position: absolute;
    top: 50%;
    right: 1.4666666667vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
footer h3 {
  text-align: center;
}
@media print, screen and (min-width: 961px) {
  footer h3 {
    margin-top: 48px;
    font-size: 15px;
  }
}
@media screen and (max-width: 960px) {
  footer h3 {
    margin-top: 6.6666666667vw;
    font-size: 3.4666666667vw;
  }
}
footer .sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media print, screen and (min-width: 961px) {
  footer .sns {
    margin-top: 16px;
  }
}
@media screen and (max-width: 960px) {
  footer .sns {
    margin-top: 3.7333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  footer .sns li + li {
    margin-left: 20px;
  }
}
@media screen and (max-width: 960px) {
  footer .sns li + li {
    margin-left: 4vw;
  }
}
footer .sns a {
  display: -ms-grid;
  display: grid;
  place-items: center;
  height: 100%;
}
@media print, screen and (min-width: 961px) {
  footer .sns img {
    width: 50px;
  }
}
@media screen and (max-width: 960px) {
  footer .sns img {
    width: 13.3333333333vw;
  }
}
@media print, screen and (min-width: 961px) {
  footer .sns .sns_x img {
    width: 34px;
  }
}
@media screen and (max-width: 960px) {
  footer .sns .sns_x img {
    width: 9.3333333333vw;
  }
}
footer .description {
  border-top: 1px solid #e0e0e0;
  color: #666666;
  text-align: center;
}
@media print, screen and (min-width: 961px) {
  footer .description {
    margin-top: 56px;
    padding: 32px 0;
    font-size: 12.5px;
  }
}
@media screen and (max-width: 960px) {
  footer .description {
    margin-top: 12.4vw;
    padding: 5.3333333333vw 5.3333333333vw;
    font-size: 2.8vw;
    line-height: 1.5;
  }
}

@media print, screen and (min-width: 961px) {
  .breadcrumb {
    margin: 115px auto 0;
    max-width: 1024px;
  }
}
@media screen and (max-width: 960px) {
  .breadcrumb {
    margin: 20vw 5.3333333333vw 0;
  }
}
.breadcrumb ul {
  display: inline;
  width: 100%;
}
.breadcrumb ul li {
  display: inline;
  color: #a0a0a0;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  fomnt-weight: 400;
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 961px) {
  .breadcrumb ul li {
    font-size: 16px;
  }
}
@media screen and (max-width: 960px) {
  .breadcrumb ul li {
    font-size: 3.7333333333vw;
    line-height: 5.8666666667vw;
  }
}
.breadcrumb ul li a {
  color: #000000;
}
.breadcrumb ul li a:hover {
  color: #aaaaaa;
}
.breadcrumb ul li + li::before {
  content: "-";
  display: inline-block;
  margin: 0 0.3em 0 0;
  color: #000000;
}
@media print, screen and (min-width: 961px) {
  .breadcrumb + footer {
    margin-top: 40px;
  }
}
@media screen and (max-width: 960px) {
  .breadcrumb + footer {
    margin-top: 6.9333333333vw;
  }
}

@media print, screen and (min-width: 961px) {
  .library,
  .recommend {
    margin-top: 60px;
    padding: 126px 0 0;
  }
}
@media screen and (max-width: 960px) {
  .library,
  .recommend {
    margin-top: 8vw;
    padding: 15.7333333333vw 0 0;
  }
}
.library h2,
.recommend h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media print, screen and (min-width: 961px) {
  .library h2,
  .recommend h2 {
    font-size: 66px;
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
  }
}
@media screen and (max-width: 960px) {
  .library h2,
  .recommend h2 {
    font-size: 10.6666666667vw;
    -webkit-transform: translateX(-0.8vw);
            transform: translateX(-0.8vw);
  }
}
.library h2 small,
.recommend h2 small {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 961px) {
  .library h2 small,
  .recommend h2 small {
    margin-top: 10px;
    font-size: 20px;
  }
}
@media screen and (max-width: 960px) {
  .library h2 small,
  .recommend h2 small {
    margin-top: 1.8666666667vw;
    font-size: 3.4666666667vw;
  }
}
.library h2 small::before,
.recommend h2 small::before {
  content: "";
  display: inline-block;
  background-color: #000000;
  position: relative;
  -webkit-transform: skewX(-37deg);
          transform: skewX(-37deg);
}
@media print, screen and (min-width: 961px) {
  .library h2 small::before,
  .recommend h2 small::before {
    margin-left: 13.5px;
    margin-right: 17px;
    width: 5.5px;
    height: 21px;
    top: 2px;
  }
}
@media screen and (max-width: 960px) {
  .library h2 small::before,
  .recommend h2 small::before {
    margin-left: 1.8666666667vw;
    margin-right: 2.6666666667vw;
    width: 0.8vw;
    height: 3.2vw;
    top: 0.2666666667vw;
  }
}
.library > div,
.recommend > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media print, screen and (min-width: 961px) {
  .library > div,
  .recommend > div {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 45px;
  }
}
@media screen and (max-width: 960px) {
  .library > div,
  .recommend > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 7.7333333333vw;
  }
}
.library > div a,
.recommend > div a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}
@media print, screen and (min-width: 961px) {
  .library > div a,
  .recommend > div a {
    padding: 30px 0 29px;
    max-width: 492px;
  }
  .library > div a:nth-child(1), .library > div a:nth-child(2),
  .recommend > div a:nth-child(1),
  .recommend > div a:nth-child(2) {
    border-top: 1px solid #e0e0e0;
  }
}
@media screen and (max-width: 960px) {
  .library > div a,
  .recommend > div a {
    padding: 5.3333333333vw 0 3.2vw;
    min-height: 44.8vw;
  }
  .library > div a:nth-child(1),
  .recommend > div a:nth-child(1) {
    border-top: 1px solid #e0e0e0;
  }
}
.library > div a picture,
.recommend > div a picture {
  overflow: hidden;
}
@media print, screen and (min-width: 961px) {
  .library > div a picture,
  .recommend > div a picture {
    margin-right: 22px;
    width: 234px;
  }
}
@media screen and (max-width: 960px) {
  .library > div a picture,
  .recommend > div a picture {
    margin-right: 4vw;
    width: 44vw;
  }
}
.library > div a picture img,
.recommend > div a picture img {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media print, screen and (min-width: 961px) {
  .library > div a div,
  .recommend > div a div {
    width: calc(100% - 264px);
  }
}
@media screen and (max-width: 960px) {
  .library > div a div,
  .recommend > div a div {
    width: calc(100% - 48vw);
  }
}
.library > div a div h3,
.recommend > div a div h3 {
  display: inline-block;
  background-color: #000000;
  color: #fff;
}
@media print, screen and (min-width: 961px) {
  .library > div a div h3,
  .recommend > div a div h3 {
    padding: 8px 8px;
    font-size: 16px;
  }
}
@media screen and (max-width: 960px) {
  .library > div a div h3,
  .recommend > div a div h3 {
    padding: 1.3333333333vw 2.4vw;
    font-size: 3.7333333333vw;
  }
}
.library > div a div p,
.recommend > div a div p {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 961px) {
  .library > div a div p,
  .recommend > div a div p {
    margin-top: 14px;
    line-height: 26px;
  }
}
@media screen and (max-width: 960px) {
  .library > div a div p,
  .recommend > div a div p {
    margin-top: 2.1333333333vw;
    line-height: 5.8666666667vw;
  }
}
.library > div a:hover picture img,
.recommend > div a:hover picture img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.mt-0 {
  margin-top: 0 !important;
}

.int-1 {
  padding-left: 1em;
  text-indent: -1em;
}

.int-1_1 {
  padding-left: 1.15em;
  text-indent: -1.15em;
}

.int-1_2 {
  padding-left: 1.2em;
  text-indent: -1.2em;
}