@charset "UTF-8";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  background: #fff;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

a {
  background: transparent;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before, q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button, input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

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

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/*---clearFix ------------------*/
/** overflow:hiddenを使用しないclearfix  extendをして使用 */
.clearfix:after {
  content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
  zoom: 100%;
}

.clearfix {
  display: block;
}

/* Noto sans */
@font-face {
  font-family: 'Noto Sans Thin';
  font-style: normal;
  font-weight: 100;
  src: url("../../fonts/notosans/NotoSans_thin.eot");
  /* IE9 Compat Modes */
  src: url("../../fonts/notosans/NotoSans_thin.eot?#iefix") format("embedded-opentype"), url("../../fonts/notosans/NotoSans_thin.woff") format("woff"), url("../../fonts/notosans/NotoSans_thin.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Noto Sans Regular';
  font-style: normal;
  font-weight: 100;
  src: url("../../fonts/notosans/NotoSans_regular.eot");
  /* IE9 Compat Modes */
  src: url("../../fonts/notosans/NotoSans_regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/notosans/NotoSans_regular.woff") format("woff"), url("../../fonts/notosans/NotoSans_regular.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Noto Sans Bold';
  font-style: normal;
  font-weight: 100;
  src: url("../../fonts/notosans/NotoSans_bold.eot");
  /* IE9 Compat Modes */
  src: url("../../fonts/notosans/NotoSans_bold.eot?#iefix") format("embedded-opentype"), url("../../fonts/notosans/NotoSans_bold.woff2") format("woff2"), url("../../fonts/notosans/NotoSans_bold.woff") format("woff"), url("../../fonts/notosans/NotoSans_bold.ttf") format("truetype");
  /* Safari, Android, iOS */
}

@font-face {
  font-family: "barlow-medium";
  src: url("../../../assets/fonts/barlow/barlow-medium.eot");
  src: url("../../../assets/fonts/barlow/barlow-medium.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/barlow/barlow-medium.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "barlow-light";
  src: url("../../../assets/fonts/barlow/barlow-light.eot");
  src: url("../../../assets/fonts/barlow/barlow-light.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/barlow/barlow-light.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "barlow";
  src: url("../../../assets/fonts/barlow/barlow-regular.eot");
  src: url("../../../assets/fonts/barlow/barlow-regular.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/barlow/barlow-regular.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "barlow-bold";
  src: url("../../../assets/fonts/barlow/barlow-bold.eot");
  src: url("../../../assets/fonts/barlow/barlow-bold.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/barlow/barlow-bold.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "barlow-semibold";
  src: url("../../../assets/fonts/barlow/barlow-semibold.eot");
  src: url("../../../assets/fonts/barlow/barlow-semibold.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/barlow/barlow-semibold.woff") format("woff");
  font-style: normal;
}

body, select, input, textarea {
  color: #000;
  font-family: 'barlow', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: inherit;
  cursor: inherit;
  cursor: pointer;
}

a:active, a:focus {
  outline: none;
}

@media all and (max-width: 758px) {
  /* Style adjustments for viewports 768px and under go here */
  html {
    height: 100%;
    overflow: auto;
    font-size: 62.5%;
  }
  body {
    background: #fff;
    border-top: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    letter-spacing: 0.02rem;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  li {
    list-style-type: none;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  p {
    margin: 0;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    letter-spacing: 0.02rem;
  }
  iframe {
    border: 0;
  }
  .pc {
    display: none !important;
  }
  body.page-fixed {
    height: 101%;
    overflow: hidden;
  }
  /*--------------------------------------------------
* header
* --------------------------------------------------*/
  .share-area {
    position: absolute;
    top: 0;
    margin-top: 5.625%;
    right: 6.25%;
    z-index: 2;
    text-align: right;
    width: 28.59375%;
  }
  .share-area a {
    display: inline-block;
    line-height: 0;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .share-area a img {
    width: 100%;
  }
  .share-area a:hover {
    opacity: 0.7;
  }
  .share-area .shareTW {
    width: 36.8852459016%;
    margin-right: 21.8579234973%;
  }
  .share-area .shareFB {
    width: 29.5081967213%;
  }
  /*--------------------------------------------------
* button
* --------------------------------------------------*/
  a.button {
    display: block;
    position: relative;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    margin: 0 auto;
    padding-top: 19.2307692308%;
  }
  a.button p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, -50%);
    color: #FFF;
    text-align: center;
    line-height: 1;
    font-family: 'barlow', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  a.button p {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  a.button p {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  a.button p {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  a.button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3.4615384615%;
    transform: translate(0, -50%);
    width: 3.4615384615%;
    height: 0;
    padding-top: 6.1538461538%;
    background: url("../../images/arrow-right.svg") top left no-repeat;
    background-size: contain;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  body.menu-opened header .navi-button .bar1 {
    top: 0%;
    transform: rotate(45deg);
  }
  body.menu-opened header .navi-button .bar2 {
    opacity: 0;
  }
  body.menu-opened header .navi-button .bar3 {
    top: 0%;
    transform: rotate(-45deg);
  }
  .scrollto {
    position: absolute;
    width: 12.96875%;
    padding-top: 10.9375%;
    height: 0;
    left: 0;
    right: 0;
    margin: 0 auto 5%;
    bottom: 0;
    line-height: 0;
  }
  .scrollto img {
    width: 57.8313253012%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translate(0, -50%) rotate(0);
    animation-name: top-scroll;
    animation-duration: 3s;
    animation-iteration-count: 1000;
  }
  p.scroll {
    color: #000;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    line-height: 1;
    font-family: 'barlow', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  p.scroll {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  p.scroll {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  p.scroll {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #shop-area {
    width: 81.25%;
    margin: 0 auto 0;
    border: #d62b0f 1px solid;
  }
  #shop-area h2 {
    background: #d62b0f;
    padding: 2.8846153846% 0;
  }
  #shop-area h2 p {
    color: #fff;
    line-height: 1;
    letter-spacing: 0.18rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #shop-area h2 p {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #shop-area h2 p {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #shop-area h2 p {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #shop-area .wrap {
    text-align: left;
    font-size: 0;
    padding: 5.7692307692%;
  }
  #shop-area .wrap a {
    display: inline-block;
    width: 47.3913043478%;
    transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 0 5.7692307692%;
  }
  #shop-area .wrap a:nth-child(2n) {
    margin-left: 4.5652173913%;
  }
  #shop-area .wrap a img {
    width: 100%;
  }
  #shop-area .wrap a:hover {
    opacity: 0.7;
  }
  /*--------------------------------------------------
* Footer
* --------------------------------------------------*/
  #footer .footerWrap {
    padding: 31px 0 0;
  }
  #footer .footerWrap .footer-logo {
    display: none;
  }
  #footer .footerWrap .gNav {
    margin: 0 auto 47px;
  }
  #footer .footerWrap .gNav .gNav-list {
    width: 86.7%;
    margin: 0 auto;
  }
  #footer .footerWrap .gNav .gNav-list:nth-of-type(3) {
    border-bottom: 1px solid #000;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item {
    position: relative;
    border-top: #000 1px solid;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item:last-of-type {
    border-bottom-width: 0;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 1.5384615385% 14px 1.3461538462% 0;
    font-size: 1.4rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item .sub-list {
    display: none;
  }
  #footer .footerWrap .share-list {
    width: 86.4%;
    margin: 30px auto 28px;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #footer .footerWrap .share-list > div {
    margin-bottom: 13px;
  }
  #footer .footerWrap .share-list .ig {
    margin-top: -3px;
    width: 103px;
  }
  #footer .footerWrap .share-list .ig img {
    width: 100%;
  }
  #footer .footerWrap .sns-list {
    display: -ms-flexbox;
    display: flex;
    height: auto;
    margin: 0 auto 48px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #footer .footerWrap .sns-list .sns-list-item {
    width: 11.2%;
  }
  #footer .footerWrap .sns-list .sns-list-item img {
    width: 100%;
  }
  #footer .footerWrap .sns-list .sns-list-item:nth-of-type(2) {
    margin: 0 25px;
  }
  #footer .footerWrap .registerBtn {
    width: 86.7%;
    margin: auto;
  }
  #footer .footerWrap .registerBtn a {
    width: 100%;
    text-align: center;
  }
  #footer .footerWrap .registerBtn a span {
    padding: 16px 0 0 35px;
    background-size: 37px auto;
    background-position: left calc(50% - 80px) top 18px;
    font-size: 1.7rem;
    display: inline-block;
    text-align: center;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footerWrap .registerBtn a span {
    font-size: 15px;
    font-size: 4.21875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footerWrap .registerBtn a span {
    font-size: 16.875px;
    font-size: 4.21875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footerWrap .registerBtn a span {
    font-size: 22.5px;
    font-size: 4.21875vw;
  }
}

@media all and (max-width: 758px) {
  #footer .footerWrap .registerBtn p {
    margin-top: 14px;
    font-size: 1.4rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footerWrap .registerBtn p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footerWrap .registerBtn p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footerWrap .registerBtn p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #footer .footer-bottom .footer-bottom-inner {
    width: 100%;
    margin: 0 auto;
    padding: 25px 0;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list {
    text-align: center;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list .blank {
    margin-left: 15px;
    padding-right: 16px;
    background-size: 10px 10px;
    background-position: right 4px;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    margin-top: 27px;
    text-align: center;
  }
  #footer #pagetopBtn.fix {
    bottom: 56px;
  }
  #footer #pagetopBtn a {
    right: 16px;
    width: 46px;
    height: 46px;
  }
  #footer {
    position: relative;
    background: #000;
  }
  #footer * {
    box-sizing: border-box;
  }
  #footer .footerWrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  #footer .footerWrap .share-list {
    display: -ms-flexbox;
    display: flex;
    font-size: 1rem;
    line-height: 1;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footerWrap .share-list {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footerWrap .share-list {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footerWrap .share-list {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #footer .footerWrap .sns-list {
    display: -ms-flexbox;
    display: flex;
    height: auto;
  }
  #footer .footerWrap .registerBtn a {
    display: block;
    position: relative;
    background-color: #f6cf28;
  }
  #footer .footerWrap .registerBtn a span {
    padding: 0;
    padding-left: 11.5384615385%;
    line-height: 1.2;
    margin: 5% 5% 0;
    position: relative;
    background-image: url(../../../assets/images/common/icon_gNav_register.png);
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: left top;
  }
  #footer .footer-bottom {
    background: #000;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list li {
    display: inline-block;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list .blank {
    background-image: url(../../../assets/images/common/icon_footer_blank.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  #footer .footer-bottom .footer-bottom-inner a {
    color: #fff;
    font-size: 1.2rem;
    vertical-align: top;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footer-bottom .footer-bottom-inner a {
    font-size: 12.2222222222px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footer-bottom .footer-bottom-inner a {
    font-size: 13.75px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footer-bottom .footer-bottom-inner a {
    font-size: 18.3333333333px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) {
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    color: #fff;
    font-size: 1.1rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    font-size: 11.6666666667px;
    font-size: 3.28125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    font-size: 13.125px;
    font-size: 3.28125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    font-size: 17.5px;
    font-size: 3.28125vw;
  }
}

@media all and (max-width: 758px) {
  #footer #pagetopBtn {
    display: block;
    position: absolute;
    bottom: calc(100% + 23px);
    left: 0;
    width: 100%;
    height: 0;
    z-index: 20;
  }
  #footer #pagetopBtn.fix {
    position: fixed;
  }
  #footer #pagetopBtn a {
    display: block;
    position: absolute;
    top: 0;
    opacity: .3;
  }
  #footer #pagetopBtn a img {
    width: 100%;
  }
  .btn-arrow::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 1.3px;
    content: "";
    display: block;
    background-color: #000;
    transform: translateX(-13px) translateY(-3px) rotate(45deg);
  }
  .btn-arrow::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 1.3px;
    content: "";
    display: block;
    background-color: #000;
    transform: translateX(-13px) translateY(3px) rotate(-45deg);
  }
}

@media all and (min-width: 759px) {
  /* Style adjustments for viewports 769px and over go here */
  html {
    font-size: 62.5%;
  }
  body {
    background: #fff;
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    letter-spacing: 0.04rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  li {
    list-style-type: none;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  p {
    margin: 0;
    letter-spacing: 0.04rem;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  iframe {
    border: 0;
  }
  .sp {
    display: none !important;
  }
  body.page-fixed {
    overflow: hidden;
  }
  /*--------------------------------------------------
* header
* --------------------------------------------------*/
  .share-area {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
  }
  .share-area a {
    display: inline-block;
    line-height: 0;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .share-area a img {
    width: 100%;
  }
  .share-area a:hover {
    opacity: 0.7;
  }
  .share-area .shareTW {
    width: 31.5px;
    margin-right: 13.5px;
  }
  .share-area .shareFB {
    width: 27px;
  }
  /*--------------------------------------------------
* Navi
* --------------------------------------------------*/
  section {
    width: 100%;
    margin: 0 auto;
  }
  section .section-inner {
    position: relative;
  }
  #shop-area {
    width: 100%;
    max-width: 1000px;
    margin: 3.90625% auto 0;
    border: #d62b0f 1px solid;
  }
  #shop-area h2 {
    background: #d62b0f;
    padding: 13px 0;

  }
  #shop-area h2 p {
    color: #fff;
    line-height: 1;
    letter-spacing: 0.18rem;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #shop-area h2 p {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #shop-area h2 p {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #shop-area .wrap {
    text-align: center;
    font-size: 0;
    padding: 3% 0;
  }
  #shop-area .wrap a {
    display: inline-block;
    width: 16.9%;
    transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 3%;
    margin-bottom: 8px ;
    margin-top: 10px;
  }
  #shop-area .wrap a img {
    width: 100%;
  }
  #shop-area .wrap a:hover {
    opacity: 0.7;
  }
  /*--------------------------------------------------
* Footer
* --------------------------------------------------*/
  #footer .footerWrap {
    padding: 133px 0 0;
  }
  #footer .footerWrap .footer-logo {
    display: none;
  }
  #footer .footerWrap .gNav {
    margin: 0 auto;
  }
  #footer .footerWrap .gNav .gNav-list {
    width: 428px;
    margin: 0 auto;
  }
  #footer .footerWrap .gNav .gNav-list:nth-of-type(3) {
    border-bottom: 1px solid #000;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item {
    position: relative;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item:last-of-type {
    border-bottom-width: 0;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 55px;
    padding-top: 17px;
    font-size: 1.6rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 10px;
    font-size: 1.25vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list {
    display: none;
  }
  #footer .footerWrap .share-list {
    width: 660px;
    margin: 0 auto 25px;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #footer .footerWrap .share-list .tw {
    margin: 0 20px;
  }
  #footer .footerWrap .share-list .ig {
    width: 104px;
  }
  .ig img {
    width: 100%;
  }
  #footer .footerWrap .sns-list {
    display: -ms-flexbox;
    display: flex;
    width: 160px;
    height: auto;
    margin: 0 auto 48px;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footerWrap .sns-list .sns-list-item img {
    width: 38px;
  }
  #footer .footerWrap .registerBtn {
    display: -ms-flexbox;
    display: flex;
    width: 86%;
    margin: 60px auto 40px;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footerWrap .registerBtn a {
    width: 200px;
    height: 40px;
  }
  #footer .footerWrap .registerBtn a span {
    padding: 9px 0 0 65px;
    background-size: 26px 18px;
    background-position: 18px 11px;
    display: inline-block;
    font-size: 1.4rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .registerBtn a span {
    font-size: 8.75px;
    font-size: 1.09375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .registerBtn a span {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  #footer .footerWrap .registerBtn p {
    width: calc(100% - 220px);
    font-size: 1.4rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .registerBtn p {
    font-size: 8.75px;
    font-size: 1.09375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .registerBtn p {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  #footer .footer-bottom {
    height: 50px;
  }
  #footer .footer-bottom .footer-bottom-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list {
    width: 315px;
    padding-top: 15px;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list .blank {
    margin-left: 25px;
    padding-right: 16px;
    background-size: 10px 10px;
    background-position: right 4px;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    padding-top: 17px;
  }
  #footer #pagetopBtn {
    bottom: calc(100% + 23px);
    left: 0;
  }
  #footer #pagetopBtn.fix {
    bottom: 66px;
  }
  #footer #pagetopBtn a {
    right: 35px;
    width: 46px;
    height: 46px;
  }
  #pagetopBtn a img {
    width: 100%;
  }
  #footer .footerWrap {
    padding: 133px 0 0;
  }
  #footer .footerWrap .footer-logo {
    display: none;
  }
  #footer .footerWrap .gNav {
    margin: 0 auto 60px;
  }
  #footer .footerWrap .gNav .gNav-list {
    width: 428px;
    margin: 0 auto;
  }
  #footer .footerWrap .gNav .gNav-list:nth-of-type(3) {
    border-bottom: 1px solid #000;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item {
    position: relative;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item:last-of-type {
    border-bottom-width: 0;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 55px;
    padding-top: 17px;
    font-size: 1.6rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 10px;
    font-size: 1.25vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a .btn-arrow::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 1.3px;
    content: "";
    display: block;
    background-color: #000;
    transform: translateX(-17px) translateY(-3px) rotate(45deg);
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a .btn-arrow::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 1.3px;
    content: "";
    display: block;
    background-color: #000;
    transform: translateX(-17px) translateY(3px) rotate(-45deg);
  }
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list {
    display: none;
  }
  #footer .footerWrap .share-list {
    width: 660px;
    margin: 0 auto 25px;
    -ms-flex-pack: center;
    justify-content: center;
  }
  #footer .footerWrap .share-list .tw {
    margin: 0 20px;
  }
  #footer .footerWrap .share-list .ig {
    width: 104px;
  }
  #footer .footerWrap .sns-list {
    display: -ms-flexbox;
    display: flex;
    width: 160px;
    height: auto;
    margin: 0 auto 48px;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footerWrap .sns-list .sns-list-item img {
    width: 38px;
  }
  #footer .footerWrap .registerBtn {
    display: -ms-flexbox;
    display: flex;
    width: 660px;
    margin: 20px auto 40px;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footerWrap .registerBtn a {
    width: 200px;
    height: 40px;
    font-size: 1.4rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .registerBtn a {
    font-size: 8.75px;
    font-size: 1.09375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .registerBtn a {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  #footer .footerWrap .registerBtn a span {
    padding: 9px 0 0 65px;
    background-size: 26px 18px;
    background-position: 18px 11px;
  }
  #footer .footerWrap .registerBtn a:hover span {
    background-image: url(../assets/images/common/icon_gNav_register_on.png);
  }
  #footer .footerWrap .registerBtn p {
    width: 440px;
    font-size: 1.4rem;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .registerBtn p {
    font-size: 8.75px;
    font-size: 1.09375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .registerBtn p {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  #footer .footer-bottom {
    height: 50px;
  }
  #footer .footer-bottom .footer-bottom-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list {
    width: 315px;
    padding-top: 15px;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list .blank {
    margin-left: 25px;
    padding-right: 16px;
    background-size: 10px 10px;
    background-position: right 1px top 2px;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    padding-top: 17px;
  }
  #footer #pagetopBtn {
    bottom: calc(100% + 23px);
    max-width: 1600px;
  }
  #footer #pagetopBtn.fix {
    bottom: 66px;
  }
  #footer #pagetopBtn a {
    right: 35px;
    width: 46px;
    height: 46px;
    transition: .4s ease-out 0s opacity;
  }
  #footer #pagetopBtn a:hover {
    opacity: 1;
  }
  #footer .footerWrap {
    max-width: 1600px;
    padding: 75px 0 0;
  }
  #footer .footerWrap .footer-logo {
    display: block;
    width: 149px;
    height: 28px;
    margin: 0 auto 55px;
  }
  #footer .footerWrap .gNav {
    display: -ms-flexbox;
    display: flex;
    width: 660px;
    margin-bottom: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #footer .footerWrap .gNav .gNav-list {
    width: 140px;
    margin: 0;
  }
  #footer .footerWrap .gNav .gNav-list:nth-of-type(3) {
    border-bottom-width: 0;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item {
    margin-bottom: 40px;
    border-width: 0;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a {
    display: inline;
    font-weight: 700;
    background-image: none;
  }
  #footer .footerWrap .gNav .gNav-list .gNav-list-item a .btn-arrow::after, #footer .footerWrap .gNav .gNav-list .gNav-list-item a .btn-arrow::before {
    display: none;
  }
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list {
    display: block;
  }
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list-item {
    margin-top: 15px;
  }
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list-item a {
    font-size: 1.3rem;
    font-weight: 400;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list-item a {
    font-size: 8.125px;
    font-size: 1.015625vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footerWrap .gNav .gNav-list .sublist-wrap .sub-list-item a {
    font-size: 13px;
  }
}

@media all and (min-width: 759px) {
  #footer .footer-bottom .footer-bottom-inner {
    max-width: 1600px;
  }
  #footer {
    position: relative;
    background: #000;
  }
  #footer * {
    box-sizing: border-box;
  }
  #footer .footerWrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  #footer .footerWrap .share-list {
    display: -ms-flexbox;
    display: flex;
    font-size: 1rem;
    line-height: 1;
  }
  #footer .footerWrap .sns-list {
    display: -ms-flexbox;
    display: flex;
    height: auto;
  }
  #footer .footerWrap .registerBtn a {
    display: block;
    position: relative;
    background-color: #f6cf28;
  }
  #footer .footerWrap .registerBtn a span {
    position: relative;
    background-image: url(../../../assets/images/common/icon_gNav_register.png);
    background-repeat: no-repeat;
  }
  #footer .footer-bottom {
    background: #000;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list li {
    display: inline-block;
  }
  #footer .footer-bottom .footer-bottom-inner .footer-link-list .blank {
    background-image: url(../../../assets/images/common/icon_footer_blank.png);
    background-repeat: no-repeat;
  }
  #footer .footer-bottom .footer-bottom-inner a {
    color: #fff;
    font-size: 1.2rem;
    vertical-align: top;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #footer .footer-bottom .footer-bottom-inner a {
    font-size: 7.5px;
    font-size: 0.9375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #footer .footer-bottom .footer-bottom-inner a {
    font-size: 12px;
  }
}

@media all and (min-width: 759px) {
  #footer .footer-bottom .footer-bottom-inner .footer-copyright {
    color: #fff;
    font-size: 1.1rem;
  }
  #footer #pagetopBtn {
    display: block;
    position: absolute;
    bottom: calc(100% + 23px);
    left: 0;
    width: 100%;
    height: 0;
    z-index: 20;
  }
  #footer #pagetopBtn.fix {
    position: fixed;
  }
  #footer #pagetopBtn a {
    display: block;
    position: absolute;
    top: 0;
    opacity: .3;
  }
  /*--------------------------------------------------
* Modal
* --------------------------------------------------*/
  @keyframes top-to {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(0, -2px) rotate(-8deg);
    }
    50% {
      transform: translate(0, -8px) rotate(4deg);
    }
    75% {
      transform: translate(0, -15px) rotate(-2deg);
    }
    100% {
      transform: translate(0, -8px) rotate(0);
    }
  }
}

@media print {
  body,
  html {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  header#navi-area,
  #contents {
    display: none;
  }
  footer .print {
    margin: 40px;
    display: block;
    font-size: 24px;
    color: #000;
    text-align: center;
  }
  #modal-gallery .image-target {
    width: 100%;
    height: 100%;
    max-width: none;
    background: none;
    top: 50%;
  }
  #modal-gallery .image-target #certtarget {
    width: 100%;
    height: auto;
    padding-top: 0;
    opacity: 1;
  }
}

@media all and (max-width: 758px) {
  html {
    overflow: auto;
    height: 100%;
  }
  body {
    height: 100%;
  }
  /*--------------------------------------------------
* Section
* --------------------------------------------------*/
  section {
    width: 100%;
  }
  section .section-inner {
    /*text-align: center;*/
    margin: 0 auto;
  }

  /*--------------------------------------------------
* Main
* --------------------------------------------------*/
  #main-area .section-inner {
    padding-bottom: 9.375%;
  }
  #main-area .scrollto {
    display: none;
  }
  #main-area .image-area {
    background: #c12420;
    position: relative;
    padding-top: 281.25%;
    margin-bottom: 2.34375%;
    line-height: 0;
    overflow: hidden;
  }
  #main-area .image-area > img,
  #main-area .image-area picture {
    position: absolute;
  }
  #main-area .image-area .title {
    width: 71.875%;
    top: 0;
    margin: 20.3125% auto 0;
    left: 0;
    right: 0;
    will-change: opacity;
  }
  #main-area .image-area .title img {
    width: 100%;
  }
  #main-area .image-area .atom {
    width: 46.25%;
    top: 0;
    margin-top: 109.375%;
    left: 9.375%;
  }
  #main-area .image-area .bj {
    width: 69.53125%;
    top: 0;
    margin-top: 192.8125%;
    right: -0.9375%;
  }
  #main-area .image-area .prod1 {
    width: 76.875%;
    top: 0;
    margin-top: 105%;
    right: -8.59375%;
    will-change: opacity, transform;
  }
  #main-area .image-area .prod2 {
    width: 73.75%;
    top: 0;
    margin-top: 195.3125%;
    left: -6.71875%;
    will-change: opacity, transform;
  }
  #main-area .text-area {
    text-align: center;
  }
  #main-area .text-area h2.anniv {
    position: relative;
    width: 96.875%;
    margin: 0 auto 4.6875%;
  }
  #main-area .text-area h2.anniv p {
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.06rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #main-area .text-area h2.anniv p {
    font-size: 25.5555555556px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #main-area .text-area h2.anniv p {
    font-size: 28.75px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #main-area .text-area h2.anniv p {
    font-size: 38.3333333333px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) {
  #main-area .text-area h2.anniv img {
    display: block;
    width: 82.1153846154%;
    margin: 0 auto 5.7692307692%;
  }
  #main-area .text-area > p {
    line-height: 1.8;
    letter-spacing: 0.12rem;
    margin: 0 9.375% 7.8125%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #main-area .text-area > p {
    font-size: 14.4444444444px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #main-area .text-area > p {
    font-size: 16.25px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #main-area .text-area > p {
    font-size: 21.6666666667px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) {
  #main-area .button-area {
    text-align: center;
    font-size: 0;
    width: 81.25%;
    margin: 0 auto;
  }
  #main-area .button-area a {
    display: block;
    margin: 0 auto 7.6923076923%;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #main-area .button-area a:after {
    background: url("../../images/arrow-down-w.svg") top left no-repeat;
    background-size: contain;
    width: 5.7692307692%;
    padding-top: 3.2692307692%;
    right: 3.4615384615%;
  }
  #main-area .button-area a p {
    color: #FFF;
    line-height: 1.2;
    margin-right: 7.6923076923%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #main-area .button-area a p {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #main-area .button-area a p {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #main-area .button-area a p {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  #main-area .button-area a.atom {
    background: #e94709;
  }
  #main-area .button-area a.bj {
    background: #000;
  }
  #main-area .button-area a.campaign {
    background: #00276c;
  }
  #main-area .button-area a:hover.atom {
    background: #ed6d34;
  }
  #main-area .button-area a:hover.bj {
    background: #4c4948;
  }
  #main-area .button-area a:hover.campaign {
    background: #004f8e;
  }
  /*--------------------------------------------------
* Atom
* --------------------------------------------------*/
  #atom-area .section-inner,
  #bj-area .section-inner {
    padding-bottom: 19.2307692308%;
  }
  #atom-area .image-area,
  #bj-area .image-area {
    line-height: 0;
    margin-bottom: 5.7692307692%;
  }
  #atom-area .image-area img,
  #bj-area .image-area img {
    width: 100%;
  }
  #atom-area .text-area h2,
  #bj-area .text-area h2 {
    text-align: center;
    margin-bottom: 7.6923076923%;
  }
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    line-height: 1.3;
    letter-spacing: 0.2rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 27.7777777778px;
    font-size: 7.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 31.25px;
    font-size: 7.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 41.6666666667px;
    font-size: 7.8125vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    letter-spacing: 0.08rem;
    margin-top: 1.9230769231%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    color: #e94709;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    font-size: 21.1111111111px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    font-size: 23.75px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    font-size: 31.6666666667px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    line-height: 2;
    letter-spacing: 0.12rem;
    margin: 0 9.375% 9.6153846154%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    font-size: 14.4444444444px;
    font-size: 4.0625vw;
    text-align: left;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    font-size: 16.25px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    font-size: 21.6666666667px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .products,
  #bj-area .products {
    margin-bottom: 7.03125%;
  }
  #atom-area .product,
  #bj-area .product {
    display: block;
    margin: 0 auto 7.6923076923%;
    width: 81.25%;
    vertical-align: top;
  }
  #atom-area .product .image-area,
  #bj-area .product .image-area {
    line-height: 0;
    width: 100%;
    margin-bottom: 2.8846153846%;
  }
  #atom-area .product .image-area img,
  #bj-area .product .image-area img {
    width: 100%;
  }
  #atom-area .product .text-area,
  #bj-area .product .text-area {
    padding: 0 0%;
  }
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    text-align: center;
    margin-bottom: 1.9230769231%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .product .text-area p span,
  #bj-area .product .text-area p span {
    color: #e94709;
  }
  #atom-area .info,
  #bj-area .info {
    margin: 0 auto;
    position: relative;
  }
  #atom-area .info .image-area,
  #bj-area .info .image-area {
    margin: 0 auto 5.46875%;
    width: 67.5%;
  }
  #atom-area .info .image-area img,
  #bj-area .info .image-area img {
    width: 100%;
  }
  #atom-area .info .text-area,
  #bj-area .info .text-area {
    width: 81.25%;
    margin: 0 auto;
    text-align: center;
    top: 0;
  }
  #atom-area .info .text-area p.note,
  #bj-area .info .text-area p.note {
    margin-bottom: 7.6923076923%;
    color: #292929;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .text-area p.note,
  #bj-area .info .text-area p.note {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .text-area p.note,
  #bj-area .info .text-area p.note {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .text-area p.note,
  #bj-area .info .text-area p.note {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    line-height: 1.4;
    margin-bottom: 0.9615384615%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    font-size: 18.8888888889px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    font-size: 21.25px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    font-size: 28.3333333333px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .info .text-area p span,
  #bj-area .info .text-area p span {
    color: #e94709;
  }
  #atom-area .info .text-area p.type,
  #bj-area .info .text-area p.type {
    color: #4d4d4d;
    margin-bottom: 1.1538461538%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .text-area p.type,
  #bj-area .info .text-area p.type {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .text-area p.type,
  #bj-area .info .text-area p.type {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .text-area p.type,
  #bj-area .info .text-area p.type {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .info .text-area p.price,
  #bj-area .info .text-area p.price {
    color: #4d4d4d;
    margin-bottom: 11.5384615385%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .text-area p.price,
  #bj-area .info .text-area p.price {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .text-area p.price,
  #bj-area .info .text-area p.price {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .text-area p.price,
  #bj-area .info .text-area p.price {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .info .text-area .limited,
  #bj-area .info .text-area .limited {
    background: #e94709;
    margin-bottom: 3.0769230769%;
    display: inline-block;
    padding: 0 5%;
  }
  #atom-area .info .text-area .limited p,
  #bj-area .info .text-area .limited p {
    color: #fff;
    margin: 0;
    white-space: nowrap;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .text-area .limited p,
  #bj-area .info .text-area .limited p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .text-area .limited p,
  #bj-area .info .text-area .limited p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .text-area .limited p,
  #bj-area .info .text-area .limited p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area .info .design,
  #bj-area .info .design {
    top: 0;
    margin: 0 auto 10.5769230769%;
    width: 81.25%;
  }
  #atom-area .info .design img,
  #bj-area .info .design img {
    width: 62.6923076923%;
    line-height: 0;
    margin-bottom: 1.9230769231%;
  }
  #atom-area .info .design p,
  #bj-area .info .design p {
    text-align: center;
    color: #4d4d4d;
    letter-spacing: 0.1rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area .info .design p,
  #bj-area .info .design p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area .info .design p,
  #bj-area .info .design p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area .info .design p,
  #bj-area .info .design p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #atom-area a.button,
  #bj-area a.button {
    width: 81.25%;
    padding-top: 15.625%;
    background: #e94709;
    margin-bottom: 0;
  }
  #atom-area a.button:hover,
  #bj-area a.button:hover {
    background: #ed6d34;
  }
  #atom-area a.button p,
  #bj-area a.button p {
    letter-spacing: 0;
    margin-right: 5.7692307692%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #atom-area a.button p,
  #bj-area a.button p {
    font-size: 13.8888888889px;
    font-size: 3.90625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #atom-area a.button p,
  #bj-area a.button p {
    font-size: 15.625px;
    font-size: 3.90625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #atom-area a.button p,
  #bj-area a.button p {
    font-size: 20.8333333333px;
    font-size: 3.90625vw;
  }
}

@media all and (max-width: 758px) {
  /*--------------------------------------------------
* BJ
* --------------------------------------------------*/
  #bj-area .text-area h2 p.sub {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  #bj-area .text-area h2 p.sub span {
    color: #000;
  }
  #bj-area .info .text-area p.note {
    letter-spacing: 0.1rem;
    line-height: 1.8;
    color: #292929;
  }
  #bj-area .info .text-area p {
    letter-spacing: 0.1rem;
    line-height: 1.6;
  }
  #bj-area .info .text-area p span {
    color: #000;
    font-weight: bold;
  }
  #bj-area .info .text-area .limited {
    background: #000;
  }
  #bj-area a.button {
    background: #000;
  }
  #bj-area a.button:hover {
    background: #4c4948;
  }
  #bj-area a.button p {
    letter-spacing: -0.02rem;
    margin-right: 6.5384615385%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #bj-area a.button p {
    font-size: 12.2222222222px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #bj-area a.button p {
    font-size: 13.75px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #bj-area a.button p {
    font-size: 18.3333333333px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) {
  /*--------------------------------------------------
* campaign
* --------------------------------------------------*/
  #collabo-area {
    /*--------------------------------------------------
  * designers
  * --------------------------------------------------*/
  }
  #collabo-area .section-inner {
    padding-bottom: 0;
  }
  #collabo-area .title-area {
    width: 100%;
    margin: 0 auto 4.6875%;
    background: #00276c;
    padding-top: 6.25%;
    padding-bottom: 7.8125%;
  }
  #collabo-area .title-area h2 {
    width: 81.25%;
    margin: 0 auto 4.6875%;
  }
  #collabo-area .title-area h2 img {
    width: 100%;
  }
  #collabo-area .title-area h3,
  #collabo-area .title-area .period {
    margin: 0 auto;
    text-align: center;
    width: 81.25%;
  }
  #collabo-area .title-area h3 p,
  #collabo-area .title-area .period p {
    color: #fff;
    font-weight: normal;
    display: block;
  }
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    letter-spacing: 0.18rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .title-area h3 {
    border-bottom: #fff 1px solid;
    padding-bottom: 5.7692307692%;
  }
  #collabo-area .title-area h3 .head {
    margin-bottom: 2.8846153846%;
  }
  #collabo-area .title-area h3 .body {
    letter-spacing: 0.16rem;
    vertical-align: bottom;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .title-area h3 .body {
    font-size: 18.3333333333px;
    font-size: 5.15625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .title-area h3 .body {
    font-size: 20.625px;
    font-size: 5.15625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .title-area h3 .body {
    font-size: 27.5px;
    font-size: 5.15625vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .title-area .period {
    padding-top: 5.7692307692%;
  }
  #collabo-area .title-area .period .head {
    margin-bottom: 3.8461538462%;
  }
  #collabo-area .title-area .period .body {
    letter-spacing: 0.08rem;
    vertical-align: top;
    text-align: justify;
    white-space: nowrap;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .title-area .period .body {
    font-size: 12.7777777778px;
    font-size: 3.59375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .title-area .period .body {
    font-size: 14.375px;
    font-size: 3.59375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .title-area .period .body {
    font-size: 19.1666666667px;
    font-size: 3.59375vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .title-area .period a.button {
    margin-top: 9.6153846154%;
    background: #FFF;
    padding-top: 19.2307692308%;
  }
  #collabo-area .title-area .period a.button:after {
    background: url("../../images/arrow-right-blue.svg") top left no-repeat;
    background-size: contain;
    right: 5.376344086%;
    width: 4.0322580645%;
    padding-top: 5.376344086%;
  }
  #collabo-area .title-area .period a.button p {
    color: #00276c;
  }
  #collabo-area .text-area {
    text-align: center;
    position: relative;
    margin: 0 9.375% 7.8125%;
  }
  #collabo-area .text-area .anniv {
    width: 82.1153846154%;
    margin-bottom: 7.6923076923%;
  }
  #collabo-area .text-area h2 {
    font-size: 36px;
    margin-bottom: 4.8076923077%;
  }
}

@media all and (max-width: 758px) and (max-width: 1279px) {
  #collabo-area .text-area h2 {
    font-size: 22.5px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 1280px) {
  #collabo-area .text-area h2 {
    font-size: 36px;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .text-area p {
    line-height: 2;
    color: #292929;
    letter-spacing: -0.02rem;
    margin-bottom: 5.7692307692%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .text-area p {
    font-size: 14.4444444444px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .text-area p {
    font-size: 16.25px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .text-area p {
    font-size: 21.6666666667px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .tez-products {
    margin: 0 3.125%;
    text-align: center;
  }
  #collabo-area .tez-products .note-area {
    text-align: center;
    margin: 0 3.125%;
    margin-bottom: 11.5384615385%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .tez-products .note-area {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .tez-products .note-area {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .tez-products .note-area {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .tez-products .prod1,
  #collabo-area .tez-products .prod2 {
    display: block;
    width: 100%;
  }
  #collabo-area .tez-products .prod1 .text-area,
  #collabo-area .tez-products .prod2 .text-area {
    width: 100%;
    margin: 0 auto;
  }
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    margin-bottom: 3.8461538462%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .tez-products .prod1 .image-area,
  #collabo-area .tez-products .prod2 .image-area {
    width: 100%;
    margin-bottom: 12.5%;
  }
  #collabo-area .tez-products .prod1 .image-area img,
  #collabo-area .tez-products .prod2 .image-area img {
    width: 100%;
  }
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    margin-right: 4.1666666667%;
  }
}

@media all and (max-width: 758px) and (max-width: 1279px) {
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    font-size: 12.5px;
    font-size: 1.5625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 1280px) {
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    font-size: 20px;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .tez-products .button {
    width: 100%;
  }
  #collabo-area .tez-products .prod1 {
    margin-right: 3.5%;
  }
  #collabo-area .tez-products .prod2 .image-area {
    margin-bottom: 2.0833333333%;
  }
  #collabo-area .tez-products .buttons {
    margin: 0 9.375%;
    margin-bottom: 11.5384615385%;
  }
  #collabo-area .tez-products .buttons .atom {
    margin-bottom: 11.5384615385%;
    background: #e94709;
  }
  #collabo-area .tez-products .buttons .atom p {
    margin-right: 3.8461538462%;
  }
  #collabo-area .tez-products .buttons .bj {
    background: #000;
  }
  #collabo-area .tez-products .buttons .bj p {
    line-height: 1.2;
    letter-spacing: -0.02rem;
    margin-right: 7.6923076923%;
  }
  #collabo-area .designers-area {
    margin: 17.3076923077% auto 0;
    background: #dcdddd;
    width: 100%;
    position: relative;
    padding-bottom: 6.25%;
  }
  #collabo-area .designers-area img.astro {
    width: 81.25%;
    position: relative;
    margin: 5% 1% 5% 9.5% !important;
  }
  #collabo-area .designers-area img.icons {
    position: absolute;
    width: 8.125%;
    right: 0.78125%;
    top: 0;
    margin-top: 25%;
  }
  #collabo-area .designers-area p {
    text-align: center;
    position: relative;
    width: 81.25%;
    line-height: 1.8;
    letter-spacing: 0.05rem;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 11.5384615385% 10.5769230769% auto;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .designers-area p {
    font-size: 14.4444444444px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .designers-area p {
    font-size: 16.25px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .designers-area p {
    font-size: 21.6666666667px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .designers-area h2 {
    color: #000;
    position: relative;
    width: 82.03125%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-weight: 400;
    letter-spacing: -0.08rem;
    margin: 0 11.5384615385% 7.6923076923% auto;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .designers-area h2 {
    font-size: 17.7777777778px;
    font-size: 5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .designers-area h2 {
    font-size: 20px;
    font-size: 5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .designers-area h2 {
    font-size: 26.6666666667px;
    font-size: 5vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .designers-area .designer {
    width: 81.25%;
    font-size: 0;
    margin: 0 auto;
  }
  #collabo-area .designers-area .designer .image-area {
    display: block;
    margin: 0 auto 5.7692307692%;
  }
  #collabo-area .designers-area .designer .image-area img {
    width: 100%;
  }
  #collabo-area .designers-area .designer .text-area {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  #collabo-area .designers-area .designer .text-area p {
    text-align: justify;
    line-height: 1.8;
    width: 100%;
    margin-bottom: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .designers-area .designer .text-area p {
    font-size: 14.4444444444px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .designers-area .designer .text-area p {
    font-size: 16.25px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .designers-area .designer .text-area p {
    font-size: 21.6666666667px;
    font-size: 4.0625vw;
  }
}

@media all and (max-width: 758px) {
  #collabo-area .designers-area .designer .text-area p.name {
    line-height: 1;
    text-align: center;
    margin-bottom: 5.7692307692%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .designers-area .designer .text-area p.name {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .designers-area .designer .text-area p.name {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .designers-area .designer .text-area p.name {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #collabo-area .designers-area .designer .text-area p.note {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #collabo-area .designers-area .designer .text-area p.note {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #collabo-area .designers-area .designer .text-area p.note {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  @keyframes top-scroll {
    0% {
      transform: translate(0, 0);
    }
    45% {
      transform: translate(0, 7px);
    }
    55% {
      transform: translate(0, 7px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}

@media all and (min-width: 759px) {
  html {
    height: 100%;
  }
  body {
    height: 100%;
  }
  /*--------------------------------------------------
* Section
* --------------------------------------------------*/
  section {
    width: 100%;
    max-width: 1280px;
  }
  section .section-inner {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  section .note-area {
    border-top: 1px solid #dedede;
    padding-top: 10px;
  }
  section .note-area p.note {
    color: #8c8b8b;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  section .note-area p.note {
    font-size: 6.875px;
    font-size: 0.859375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  section .note-area p.note {
    font-size: 11px;
  }
}

@media all and (min-width: 759px) {
  section .note-area p.note a {
    text-decoration: underline;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  section .note-area p.note a:hover {
    color: #dc2f13;
  }
  a.button {
    display: inline-block;
    position: relative;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: 0 auto;
    height: 78px;
  }
  a.button p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, -50%);
    color: #FFF;
    text-align: center;
    font-size: 24px;
    line-height: 1;
    font-family: 'barlow', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  a.button p {
    font-size: 15px;
    font-size: 1.875vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  a.button p {
    font-size: 24px;
  }
}

@media all and (min-width: 759px) {
  a.button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translate(0, -50%);
    width: 14px;
    height: 0;
    padding-top: 25px;
    background: url("../../images/arrow-right.svg") top left no-repeat;
    background-size: contain;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  a.button:hover:after {
    transform: translate(5px, -50%);
  }
  a.button.appear .sub:before, a.button.appear .sub:after {
    width: 112px;
  }
  /*--------------------------------------------------
* Main
* --------------------------------------------------*/
  #main-area .section-inner {
    padding-bottom: 5.859375%;
  }
  #main-area .image-area {
    background: #c12420;
    position: relative;
    padding-top: 40.625%;
    margin-bottom: 1.171875%;
    line-height: 0;
    overflow: hidden;
  }
  #main-area .image-area .scrollto {
    display: none;
  }
  #main-area .image-area h1 {
    position: absolute;
    width: 36.484375%;
    left: 2.96875%;
    margin-top: 20.703125%;
    top: 0;
    line-height: 0;
  }
  #main-area .image-area h1 img {
    width: 100%;
  }
  #main-area .image-area > img,
  #main-area .image-area picture {
    position: absolute;
  }
  #main-area .image-area .title {
    width: 17.140625%;
    top: 0;
    opacity: 0;
    margin-top: 10.909375%;
    left: 41.603125%;
    will-change: opacity;
  }
  #main-area .image-area .title img {
    width: 100%;
  }
  #main-area .image-area .atom {
    width: 21.23125%;
    top: 0;
    opacity: 0;
    margin-top: 5.09625%;
    left: 2.784375%;
  }
  #main-area .image-area .bj {
    width: 34.33125%;
    top: 0;
    opacity: 0;
    margin-top: 1.4%;
    right: -4.328125%;
  }
  #main-area .image-area .prod1 {
    width: 36.975%;
    top: 0;
    opacity: 0;
    margin-top: 3.03125%;
    left: 12.99375%;
    will-change: opacity, transform;
  }
  #main-area .image-area .prod2 {
    width: 36.975%;
    top: 0;
    opacity: 0;
    margin-top: 3.03125%;
    left: 50.11625%;
    will-change: opacity, transform;
  }
  #main-area .text-area {
    text-align: center;
  }
  #main-area .text-area h2.anniv {
    position: relative;
    width: 69.53125%;
    margin: 0 auto 1.953125%;
  }
  #main-area .text-area h2.anniv p {
    font-size: 36px;
    text-align: left;
    line-height: 1.3;
    padding-top: 7.5280898876%;
    margin-left: 36.2921348315%;
    margin-bottom: 0;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #main-area .text-area h2.anniv p {
    font-size: 22.5px;
    font-size: 2.8125vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #main-area .text-area h2.anniv p {
    font-size: 36px;
  }
}

@media all and (min-width: 759px) {
  #main-area .text-area h2.anniv img {
    position: absolute;
    display: block;
    width: 32.808988764%;
    top: 0;
    left: 0;
  }
  #main-area .text-area p {
    font-size: 16px;
    line-height: 2.2;
    margin-bottom: 3.125%;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #main-area .text-area p {
    font-size: 10px;
    font-size: 1.25vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #main-area .text-area p {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #main-area .button-area {
    text-align: center;
    font-size: 0;
  }
  #main-area .button-area a {
    display: inline-block;
    width: 23.125%;
    margin: 0 1.5625%;
    height: 0;
    padding-top: 6.09375%;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #main-area .button-area a:after {
    background: url("../../images/arrow-down-w.svg") top left no-repeat;
    background-size: contain;
    width: 8.1081081081%;
    padding-top: 4.3918918919%;
    right: 3.3783783784%;
  }
  #main-area .button-area a p {
    font-size: 20px;
    color: #FFF;
    letter-spacing: 0.08rem;
    line-height: 1.3;
    margin-right: 6.7567567568%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #main-area .button-area a p {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #main-area .button-area a p {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #main-area .button-area a.atom {
    background: #e94709;
  }
  #main-area .button-area a.bj {
    background: #000;
  }
  #main-area .button-area a.campaign {
    background: #00276c;
  }
  #main-area .button-area a.campaign p {
    letter-spacing: 0.02rem;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #main-area .button-area a.campaign p {
    font-size: 10.625px;
    font-size: 1.7vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #main-area .button-area a.campaign p {
    font-size: 17px;
  }
}

@media all and (min-width: 759px) {
  #main-area .button-area a:hover:after {
    transform: translate(0, 3%);
  }
  #main-area .button-area a:hover.atom {
    background: #ed6d34;
  }
  #main-area .button-area a:hover.bj {
    background: #4c4948;
  }
  #main-area .button-area a:hover.campaign {
    background: #004f8e;
  }
  /*--------------------------------------------------
* Atom
* --------------------------------------------------*/
  #atom-area .section-inner,
  #bj-area .section-inner {
    padding-bottom: 9.375%;
  }
  #atom-area .image-area,
  #bj-area .image-area {
    line-height: 0;
    margin-bottom: 3.125%;
  }
  #atom-area .image-area img,
  #bj-area .image-area img {
    width: 100%;
  }
  #atom-area .text-area h2,
  #bj-area .text-area h2 {
    text-align: center;
    margin-bottom: 1.953125%;
  }
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0.2rem;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 22.5px;
    font-size: 3.6vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #atom-area .text-area h2 p,
  #bj-area .text-area h2 p {
    font-size: 36px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 17px;
    letter-spacing: 0.08rem;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 10.625px;
    font-size: 1.7vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #atom-area .text-area h2 p.sub,
  #bj-area .text-area h2 p.sub {
    font-size: 17px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    color: #e94709;
    font-size: 23px;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    font-size: 14.375px;
    font-size: 1.796875vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #atom-area .text-area h2 p.sub span,
  #bj-area .text-area h2 p.sub span {
    font-size: 23px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    line-height: 2;
    margin-bottom: 3.515625%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    font-size: 10px;
    font-size: 1.6vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #atom-area .text-area p.lead,
  #bj-area .text-area p.lead {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .products,
  #bj-area .products {
    margin-bottom: 3.515625%;
  }
  #atom-area .product,
  #bj-area .product {
    display: inline-block;
    margin: 0 2.734375%;
    width: 34.765625%;
    vertical-align: top;
  }
  #atom-area .product .image-area,
  #bj-area .product .image-area {
    line-height: 0;
    width: 100%;
    margin-bottom: 2.2471910112%;
  }
  #atom-area .product .image-area img,
  #bj-area .product .image-area img {
    width: 100%;
  }
  #atom-area .product .text-area,
  #bj-area .product .text-area {
    padding: 0 8.9887640449%;
  }
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 15px;
    text-align: justify;
    margin-bottom: 6.7415730337%;
  }
}


  .tezuka_pc{
    display: none;
  }
    @media screen and (min-width: 759px){
     .tezuka_pc{
     display: block;
    }
  }

  .tezuka_sp {
    display: block;
  }

  @media screen and (min-width: 759px){
    .tezuka_sp {
  display: none;
  }
}


@media all and (min-width: 759px) and (max-width: 999px) {
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 9.375px;
    font-size: 1.5vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #atom-area .product .text-area p,
  #bj-area .product .text-area p {
    font-size: 15px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .product .text-area p span,
  #bj-area .product .text-area p span {
    color: #e94709;
  }
  #atom-area .product .text-area a,
  #bj-area .product .text-area a {
    width: 100%;
  }
  #atom-area .product .text-area a p,
  #bj-area .product .text-area a p {
    font-size: 22px;
    text-align: left;
    color: #FFF;
    line-height: 1.2;
    left: 17.8571428571%;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #atom-area .product .text-area a p,
  #bj-area .product .text-area a p {
    font-size: 13.75px;
    font-size: 1.71875vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #atom-area .product .text-area a p,
  #bj-area .product .text-area a p {
    font-size: 22px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .info,
  #bj-area .info {
    margin: 0 auto;
    position: relative;
  }
  #atom-area .info .image-area,
  #bj-area .info .image-area {
    margin: 0 auto 5.3125%;
    width: 35.9375%;
  }
  #atom-area .info .image-area img,
  #bj-area .info .image-area img {
    width: 100%;
  }
  #atom-area .info .text-area,
  #bj-area .info .text-area {
    position: absolute;
    width: 17.96875%;
    right: 10%;
    text-align: left;
    top: 0;
  }
  #atom-area .info .text-area p.note,
  #bj-area .info .text-area p.note {
    margin-bottom: 82.6086956522%;
    text-align: left;
  }
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    line-height: 1.8;
    margin-bottom: 0%;
    text-align: left;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    font-size: 9.375px;
    font-size: 1.171875vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #atom-area .info .text-area p,
  #bj-area .info .text-area p {
    font-size: 15px;
  }
}

@media all and (min-width: 759px) {
  #atom-area .info .text-area p span,
  #bj-area .info .text-area p span {
    color: #e94709;
  }
  #atom-area .info .text-area p.type,
  #bj-area .info .text-area p.type {
    margin-bottom: 0;
  }
  #atom-area .info .text-area .limited,
  #bj-area .info .text-area .limited {
    background: #e94709;
    display: inline-block;
    padding: 0 4.347826087%;
    margin-bottom: 8.6956521739%;
  }
  #atom-area .info .text-area .limited p,
  #bj-area .info .text-area .limited p {
    color: #fff;
    margin: 0;
  }
  #atom-area .info .design,
  #bj-area .info .design {
    top: 0;
    left: 14.375%;
    position: absolute;
    width: 12.5%;
  }
  #atom-area .info .design img,
  #bj-area .info .design img {
    width: 100%;
    line-height: 0;
    margin-bottom: 6.25%;
  }
  #atom-area .info .design p,
  #bj-area .info .design p {
    text-align: left;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #atom-area .info .design p,
  #bj-area .info .design p {
    font-size: 9.375px;
    font-size: 1.171875vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #atom-area .info .design p,
  #bj-area .info .design p {
    font-size: 15px;
  }
}

@media all and (min-width: 759px) {
  #atom-area a.button,
  #bj-area a.button {
    width: 39.375%;
    background: #e94709;
  }
  #atom-area a.button:hover,
  #bj-area a.button:hover {
    background: #ed6d34;
  }
  #atom-area a.button:after,
  #bj-area a.button:after {
    right: 3.9682539683%;
  }
  #atom-area a.button p,
  #bj-area a.button p {
    margin-right: 3.9682539683%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #atom-area a.button p,
  #bj-area a.button p {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #atom-area a.button p,
  #bj-area a.button p {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  /*--------------------------------------------------
* BJ
* --------------------------------------------------*/
  #bj-area .text-area h2 p.sub span {
    color: #000;
  }
  #bj-area .info .text-area p.note {
    margin-bottom: 60.8695652174%;
  }
  #bj-area .info .text-area p span {
    font-weight: bold;
    font-family: 'barlow-medium', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    color: #000;
  }
  #bj-area .info .text-area .limited {
    background: #000;
  }
  #bj-area a.button {
    width: 42.1875%;
    background: #000;
  }
  #bj-area a.button:hover {
    background: #4c4948;
  }
  #bj-area a.button:after {
    right: 3.7037037037%;
  }
  #bj-area a.button p {
    margin-right: 5.5555555556%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #bj-area a.button p {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #bj-area a.button p {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  /*--------------------------------------------------
* campaign
* --------------------------------------------------*/
  #collabo-area {
    /*--------------------------------------------------
  * designers
  * --------------------------------------------------*/
  }
  #collabo-area .title-area {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 2.8125%;
    background: #00276c;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  #collabo-area .title-area h2 {
    width: 90%;
    margin: 0 auto 3.3%;
    margin-bottom: 25px;
  }
  #collabo-area .title-area h2 img {
    width: 68%;
  }
  #collabo-area .title-area h3,
  #collabo-area .title-area .period {
    margin: 0 auto;
    text-align: left;
    width: 90%;
  }
  #collabo-area .title-area h3 p,
  #collabo-area .title-area .period p {
    color: #fff;
    display: inline-block;
  }
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    margin-right: 4.4444444444%;
    width: 41.1111111111%;
    text-align: left;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    font-size: 12.5px;
    font-size: 1.5625vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #collabo-area .title-area h3 .head,
  #collabo-area .title-area .period .head {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .title-area h3 {
    display: inline-block;
    zoom: 100%;
    display: block;
    font-size: 0;
    border-bottom: #fff 1px solid;
    padding-bottom: 1.4%;
    vertical-align: middle;
  }
  #collabo-area .title-area h3:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #collabo-area .title-area h3 .head {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    width: 47.7777777778%;
    margin-right: 0;
    letter-spacing: 0.4rem;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .title-area h3 .head {
    font-size: 20px;
    font-size: 3.2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .title-area h3 .head {
    font-size: 28px;
    width: 380px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .title-area h3 .body {
    display: inline-block;
    letter-spacing: 0.18rem;
    vertical-align: middle;
    line-height: 1;
    text-align: right;
    letter-spacing: 0.2rem;
    float: right;
    margin-top: 0.3333333333%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .title-area h3 .body {
    font-size: 17.5px;
    font-size: 2.8vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .title-area h3 .body {
    font-size: 28px;
    letter-spacing: 5px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .title-area .period {
    position: relative;
    padding-top: 1.2%;
  }
  #collabo-area .title-area .period .head {
    vertical-align: top;
    display: block;
  }
  #collabo-area .title-area .period .body {
    letter-spacing: 0.18rem;
    vertical-align: top;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .title-area .period .body {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .title-area .period .body {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .title-area .period a.button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 41.3333333333%;
    background: #FFF;
    height: 55px;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #collabo-area .title-area .period a.button:after {
    background: url("../../images/arrow-right-blue.svg") top left no-repeat;
    background-size: contain;
    right: 5.376344086%;
    width: 4.0322580645%;
    padding-top: 5.376344086%;
  }
  #collabo-area .title-area .period a.button:hover {
    opacity: 0.7;
  }
  #collabo-area .title-area .period a.button:hover:after {
    transform: translate(40%, -50%);
  }
  #collabo-area .title-area .period a.button p {
    margin-right: 8.064516129%;
    color: #00276c;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .title-area .period a.button p {
    font-size: 15px;
    font-size: 2.4vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .title-area .period a.button p {
    font-size: 20px;
    font-weight: bold;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .image-area {
    position: relative;
    margin-bottom: 4.296875%;
  }
  #collabo-area .text-area {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  #collabo-area .text-area .anniv {
    position: absolute;
    width: 21.2%;
    max-width: 212px;
    top: 0;
    left: 0%;
  }
  #collabo-area .text-area p.lead {
    padding-left: 25%;
    text-align: left;
    margin-bottom: 7.03125%;
  }
  #collabo-area .text-area p {
    font-size: 16px;
    line-height: 2.2;
    margin-bottom: 2.734375%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .text-area p {
    font-size: 10px;
    font-size: 1.6vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .text-area p {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .tez-products {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
  #collabo-area .tez-products .note-area {
    position: absolute;
    text-align: right;
    border: none;
    bottom: 0;
    margin-bottom: -6.25%;
    right: 0;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #collabo-area .tez-products .note-area {
    font-size: 10px;
    font-size: 1.25vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #collabo-area .tez-products .note-area {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .tez-products .prod1,
  #collabo-area .tez-products .prod2 {
    display: inline-block;
    vertical-align: top;
    width: 48%;
  }
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    margin-bottom: 4.1666666667%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .tez-products .prod1 .text-area h3,
  #collabo-area .tez-products .prod2 .text-area h3 {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .tez-products .prod1 .image-area,
  #collabo-area .tez-products .prod2 .image-area {
    width: 100%;
    position: relative;
    margin-bottom: 12.5%;
  }
  #collabo-area .tez-products .prod1 .image-area img,
  #collabo-area .tez-products .prod2 .image-area img {
    width: 100%;
  }
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    margin-right: 4.1666666667%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .tez-products .prod1 .button p,
  #collabo-area .tez-products .prod2 .button p {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .tez-products .button {
    width: 100%;
  }
  #collabo-area .tez-products .prod1 {
    margin-right: 3.5%;
  }
  #collabo-area .tez-products .prod1 .button {
    background: #e94709;
  }
  #collabo-area .tez-products .prod1 .button:hover {
    background: #ed6d34;
  }
  #collabo-area .tez-products .prod2 .button {
    background: #000;
  }
  #collabo-area .tez-products .prod2 .button p {
    letter-spacing: -0.02rem;
    margin-right: 8.3333333333%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .tez-products .prod2 .button p {
    font-size: 11.875px;
    font-size: 1.9vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .tez-products .prod2 .button p {
    font-size: 19px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .tez-products .prod2 .button:hover {
    background: #4c4948;
  }
  #collabo-area .designers-area {
    margin: 5.078125% auto 7.03125%;
    background: #dcdddd;
    width: 100%;
    max-width: 1000px;
    position: relative;
  }
  #collabo-area .designers-area img.astro {
    width: 69.5%;
    position: relative;
    margin-top: 4%;
    margin-bottom: 3%;
  }
  #collabo-area .designers-area img.icons {
    position: absolute;
    width: 5.2%;
    right: 4.8%;
    top: 0;
    margin-top: 14%;
  }
  #collabo-area .designers-area p {
    text-align: center;
    font-size: 16px;
    position: relative;
    line-height: 1.8;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 5.5%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .designers-area p {
    font-size: 10px;
    font-size: 1.6vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .designers-area p {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .designers-area h2 {
    font-size: 21px;
    color: #FFF;
    position: relative;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-weight: 400;
    margin-bottom: 4%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .designers-area h2 {
    font-size: 13.125px;
    font-size: 2.1vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .designers-area h2 {
    font-size: 21px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .designers-area .designer {
    width: 88%;
    font-size: 0;
    margin: 0 auto;
    text-align: left;
  }
  #collabo-area .designers-area .designer .image-area {
    width: 27.5%;
    display: inline-block;
    vertical-align: top;
  }
  #collabo-area .designers-area .designer .image-area img {
    width: 100%;
  }
  #collabo-area .designers-area .designer .text-area {
    display: inline-block;
    vertical-align: top;
    margin-left: 3.4090909091%;
    width: 63.6363636364%;
  }
  #collabo-area .designers-area .designer .text-area p {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .designers-area .designer .text-area p {
    font-size: 10px;
    font-size: 1.6vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .designers-area .designer .text-area p {
    font-size: 16px;
  }
}

@media all and (min-width: 759px) {
  #collabo-area .designers-area .designer .text-area p.name {
    line-height: 1;
    font-size: 20px;
    margin-bottom: 5.3571428571%;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .designers-area .designer .text-area p.name {
    font-size: 12.5px;
    font-size: 2vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .designers-area .designer .text-area p.name {
    font-size: 20px;
  }
}

@media all and (min-width: 759px) and (max-width: 999px) {
  #collabo-area .designers-area .designer .text-area p.note {
    font-size: 8.75px;
    font-size: 1.4vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1000px) {
  #collabo-area .designers-area .designer .text-area p.note {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  /*--------------------------------------------------
* SNS
* --------------------------------------------------*/
  #sns-area {
    background: #f1f1f1;
    padding-top: 60px;
    padding-bottom: 70px;
  }
  #sns-area h3 {
    font-family: 'barlow-medium', "Noto Sans Regular", "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 20px;
  }
}

@media all and (min-width: 759px) and (max-width: 1279px) {
  #sns-area h3 {
    font-size: 8.75px;
    font-size: 1.09375vw;
  }
}

@media all and (min-width: 759px) and (min-width: 1280px) {
  #sns-area h3 {
    font-size: 14px;
  }
}

@media all and (min-width: 759px) {
  #sns-area .icons {
    text-align: center;
    font-size: 0;
  }
  #sns-area .icons a {
    display: inline-block;
    line-height: 0;
    margin: 0 10px;
  }
  #sns-area .icons a:hover img {
    transform: rotate(360deg);
  }
  #sns-area .icons a img {
    width: 100%;
    /* older webkit */
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
    /* easeOutBack */
    transform: rotate(0deg);
  }
  #sns-area .icons .facebook {
    width: 22px;
  }
  #sns-area .icons .twitter {
    width: 25px;
  }
  #sns-area .icons .instagram {
    width: 23px;
  }
  @keyframes top-scroll {
    0% {
      transform: translate(0, -4px);
    }
    45% {
      transform: translate(0, 3px);
    }
    55% {
      transform: translate(0, 3px);
    }
    100% {
      transform: translate(0, -4px);
    }
  }
}