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


.ec_list {
  display: flex !important;
  flex-wrap: wrap;
}

.ec_link {
  height: 100%;
  margin-right: 5px;
  margin-top: 5px;
}

.rakuten_ec_wrap {
  display: block !important
}

.e-money-edy-only {
  display: flex !important;
  align-items: center !important;
  opacity: 0;
  width: auto !important;
}

.e-money-edy-img {
  width: auto !important;
}

.e-money-etc {
  padding-left: 8px;
}

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

.image_picker_image {
  width: 200px;
  height: 200px;
  cursor: pointer;
}

.thumbnail > p {
  font-size: 10px;
}

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;
}

.campaign-date {
  color: #d62b0f;
  text-align: center;
}

#TWpostButton {
  margin-top: 15px;
}

.products-area .balloon {
  background: #dc2f13;
  border-radius: 50%;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  right: -830px;
  left: 0;
  margin: auto;
  margin-top: 2.734375%;
  text-align: center;
}

.products-area .balloon > p {
  position: relative;
  width: 100%;
  top: 27px;
  border-bottom: 1px solid #FFF;
  padding-bottom: 2px;
  letter-spacing: 0.08rem;
  line-height: 1.7;
  display: inline;
  text-align: center;
  margin: 0 auto;
  color: #FFF;
  font-size: 25px;
}

.head {
  margin-top: 33px;
}

/*---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;
}

.head-select-list {
  display: none;
}

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

@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: YuGothic, "游ゴシック体", 'YuGothic M',  "ヒラギノ角ゴ 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;
  }
  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;
  }
  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
* --------------------------------------------------*/
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-top: 17.1875%;
    z-index: 30;
    will-change: opacity, transform;
    transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  header.before {
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    position: fixed;
  }
  header.scrolled {
    -webkit-transform: translate(0, 0%);
    transform: translate(0, 0%);
    transition: -webkit-transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, -webkit-transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
  }
  header.scrolled h1 {
    background: url("../../images/logo-g.svg") top left no-repeat;
    background-size: contain;
  }
  header.scrolled h1 img {
    opacity: 0;
  }
  header.scrolled .share-area a img {
    opacity: 0;
  }
  header.scrolled .share-area a .scrolled {
    opacity: 1;
  }
  header.scrolled .navi-button .bar {
    background: #333333;
  }
  header h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 28.125%;
    line-height: 0;
    margin: 5.625% 0 0 7.8125%;
  }
  header h1 a {
    display: block;
  }
  header h1 img {
    width: 100%;
  }
  header .share-area {
    position: absolute;
    right: 17.5%;
    top: 0;
    width: 19.375%;
    margin-top: 5.46875%;
    font-size: 0;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  header .share-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  header .share-area a {
    line-height: 0;
    display: inline-block;
    /* older webkit */
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
    /* easeOutBack */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  header .share-area a img {
    width: 100%;
  }
  header .share-area a .scrolled {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  header .share-area .shareFB {
    width: 29.0322580645%;
    margin-right: 32.2580645161%;
  }
  header .share-area .shareTW {
    floati: right;
    width: 36.2903225806%;
  }
  header .navi-button {
    display: block;
    position: absolute;
    width: 6.40625%;
    padding-top: 6.40625%;
    height: 0;
    top: 0;
    margin-top: 5.3125%;
    right: 5.9375%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  header .navi-button .bar {
    display: block;
    background: #FFF;
    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0;
    padding-top: 9.756097561%;
    width: 87.8048780488%;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  header .navi-button .bar1 {
    top: -58.5365853659%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  header .navi-button .bar2 {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  header .navi-button .bar3 {
    top: 58.5365853659%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  /*--------------------------------------------------
* Navi
* --------------------------------------------------*/
  #navi-area {
    display: none;
    height: 0;
    position: fixed;
    width: 100%;
    margin-top: 17.1875%;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: 30;
  }
  #navi-area .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(250, 250, 250, 0.9);
  }
  #navi-area .inner {
    position: relative;
  }
  #navi-area .inner ul {
    width: 81.25%;
    margin: 0 auto;
  }
  #navi-area .inner ul li {
    border-bottom: 1px solid #bfbfbf;
  }
  #navi-area .inner ul li:last-child {
    border: none;
  }
  #navi-area .inner ul li > a {
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.1rem;
    padding: 10.5769230769% 0 10.5769230769% 8.6538461538%;
    display: block;
    color: #292929;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #navi-area .inner ul li > a {
    font-size: 21.1111111111px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #navi-area .inner ul li > a {
    font-size: 23.75px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #navi-area .inner ul li > a {
    font-size: 31.6666666667px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) {
  #navi-area .inner ul li > a span {
    display: block;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #navi-area .inner ul li > a span {
    font-size: 18.8888888889px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #navi-area .inner ul li > a span {
    font-size: 21.25px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #navi-area .inner ul li > a span {
    font-size: 28.3333333333px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) {
  #navi-area .inner ul li .subnavi li {
    border: none;
  }
  #navi-area .inner ul li .subnavi li a {
    color: #626262;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    letter-spacing: 0.1rem;
    padding: 0 0 11.5384615385% 8.6538461538%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #navi-area .inner ul li .subnavi li a {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #navi-area .inner ul li .subnavi li a {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #navi-area .inner ul li .subnavi li a {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  body.menu-opened header .navi-button .bar1 {
    top: 0%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  body.menu-opened header .navi-button .bar2 {
    opacity: 0;
  }
  body.menu-opened header .navi-button .bar3 {
    top: 0%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /*--------------------------------------------------
* Footer
* --------------------------------------------------*/
  .topto {
    position: absolute;
    display: block;
    width: 15.3125%;
    right: 9.375%;
    bottom: 0;
    left: auto;
    margin-bottom: 22.8125%;
  }
  .topto img {
    width: 100%;
  }
  footer {
    background: #292929;
    width: 100%;
    position: relative;
  }
  footer .link-area {
    padding: 7.8125% 0;
    margin: 0 auto;
    width: 81.25%;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  footer .link-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  footer .link-area a {
    display: inline-block;
    color: #FFF;
    line-height: 0.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  footer .link-area a {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  footer .link-area a {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  footer .link-area a {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  footer .link-area a.official {
    display: block;
    padding-right: 28px;
  }
  footer .link-area a.about {
    float: left;
  }
  footer .link-area a.policy {
    position: relative;
    float: right;
    width: 50%;
  }
  footer .link-area a.policy span {
    display: inline-block;
    width: 9.2307692308%;
    position: relative;
    top: 2px;
    margin-left: 5.7692307692%;
    line-height: 0;
  }
  footer .link-area a.policy span img {
    width: 100%;
  }
  footer .copy {
    position: absolute;
    right: 9.375%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    display: block;
    margin: 0 auto;
    color: #FFF;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  footer .copy {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  footer .copy {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  footer .copy {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  /*--------------------------------------------------
* Modal
* --------------------------------------------------*/
  .modal {
    width: 100%;
    z-index: 200;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    height: 100%;
    display: none;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
  }
  .modal .close-button {
    position: fixed;
    width: 9.375%;
    display: block;
    margin-top: 6.25%;
    top: 0;
    right: 6.25%;
  }
  .modal .close-button img {
    width: 100%;
  }
  .modal .inner {
    position: relative;
    width: 100%;
    max-width: 81.25%;
    margin: 15.625% auto;
  }
  .modal .inner h3, .modal .inner h4, .modal .inner p {
    color: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .modal .inner h3 {
    display: inline-block;
    margin-bottom: 5.7692307692%;
    position: relative;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .modal .inner h3 p {
    font-size: 20px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .modal .inner h3 p {
    font-size: 22.5px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .modal .inner h3 p {
    font-size: 30px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) {
  .modal .inner h3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #FFF;
    width: 100%;
    height: 1px;
  }
  .modal .inner h4 {
    margin-top: 6.7307692308%;
    margin-bottom: 1.9230769231%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .modal .inner h4 {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .modal .inner h4 {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .modal .inner h4 {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  .modal .inner p {
    line-height: 1.6;
  }
}

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

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

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

@media all and (max-width: 758px) {
  .modal #modal-term {
    display: none;
  }
  .modal #modal-term h3 p {
    white-space: nowrap;
  }
  .modal #modal-contact {
    display: none;
  }
  .modal #modal-contact h3 p {
    white-space: nowrap;
  }
  .modal #modal-notice {
    display: none;
  }
  .modal #modal-notice h3 {
    margin-bottom: 0;
  }
  .modal #modal-privacy {
    display: none;
  }
  .modal #video-modal {
    display: none;
    height: 0;
    padding-top: 65.625%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: 0 auto;
  }
  .modal #video-modal iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
  }
}

@media all and (min-width: 759px) {
  /* Style adjustments for viewports 769px and over go here */
  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;
  }
  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
* --------------------------------------------------*/
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 30;
    will-change: opacity, transform;
    transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  header.before {
    transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    position: fixed;
  }
  header.scrolled {
    -webkit-transform: translate(0, 0%);
    transform: translate(0, 0%);
    transition: -webkit-transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, -webkit-transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
  }
  header.scrolled h1 {
    background: url("../../images/logo-g.svg") top left no-repeat;
    background-size: contain;
  }
  header.scrolled h1 img {
    opacity: 0;
  }
  header.scrolled .share-area a img {
    opacity: 0;
  }
  header.scrolled .share-area a .scrolled {
    opacity: 1;
  }
  header h1 {
    width: 102px;
    line-height: 0;
    margin: 20px 0 0 50px;
    background: none;
  }
  header h1 a {
    display: block;
  }
  header h1 img {
    transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
  }
  header .share-area {
    position: absolute;
    right: 50px;
    top: 20px;
    font-size: 0;
  }
  header .share-area a {
    line-height: 0;
    display: inline-block;
    /* older webkit */
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
    /* easeOutBack */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  header .share-area a img {
    width: 100%;
  }
  header .share-area a .scrolled {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  header .share-area a:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  header .share-area .shareFB {
    width: 19px;
    margin-right: 17px;
  }
  header .share-area .shareTW {
    width: 21px;
  }
  header .navi-button {
    display: none;
  }
  /*--------------------------------------------------
* Navi
* --------------------------------------------------*/
  #navi-area {
    display: none;
  }
  /*--------------------------------------------------
* Footer
* --------------------------------------------------*/
  .topto {
    position: absolute;
    display: block;
    width: 49px;
    right: 50px;
    bottom: 90px;
  }
  .topto:hover img {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
  .topto img {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
  }
  footer {
    background: #292929;
    width: 100%;
    position: relative;
  }
  footer .link-area {
    padding: 28px 50px;
  }
  footer .link-area a {
    display: inline-block;
    color: #FFF;
    font-size: 12px;
    line-height: 0.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  footer .link-area a.official {
    padding-right: 28px;
    margin-right: 28px;
  }
  footer .link-area a.about {
    margin-right: 40px;
  }
  footer .link-area a:hover {
    opacity: 0.6;
  }
  footer .link-area a.policy {
    position: relative;
  }
  footer .link-area a.policy span {
    display: inline-block;
    width: 20px;
    position: relative;
    top: 2px;
    margin-left: 10px;
    margin-top: 5px;
    line-height: 0;
  }
  footer .link-area a.policy span img {
    width: 100%;
  }
  footer .copy {
    position: absolute;
    right: 50px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #FFF;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /*--------------------------------------------------
* Modal
* --------------------------------------------------*/
  .modal {
    width: 100%;
    z-index: 200;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    height: 100%;
    display: none;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
  }
  .modal .close-button {
    position: fixed;
    width: 36px;
    display: block;
    top: 30px;
    right: 50px;
  }
  .modal .close-button img {
    width: 100%;
  }
  .modal .inner {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 100px auto;
  }
  .modal .inner h3, .modal .inner h4, .modal .inner p {
    color: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .modal .inner h3 {
    display: inline-block;
    margin-bottom: 30px;
    position: relative;
  }
  .modal .inner h3 p {
    font-size: 22px;
  }
  .modal .inner h3:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #FFF;
    width: 100%;
    height: 1px;
  }
  .modal .inner h4 {
    margin-top: 35px;
    margin-bottom: 5px;
    font-size: 18px;
  }
  .modal .inner p {
    font-size: 14px;
    line-height: 1.6;
  }
  .modal #modal-term {
    display: none;
  }
  .modal #modal-contact {
    display: none;
  }
  .modal #modal-notice {
    display: none;
  }
  .modal #modal-notice h3 {
    margin-bottom: 0;
  }
  .modal #modal-privacy {
    display: none;
  }
  .modal #video-modal {
    display: none;
    height: 560px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: 0 auto;
  }
  .modal #video-modal iframe {
    width: 100%;
    height: 100%;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
  }
  @-webkit-keyframes top-to {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    25% {
      -webkit-transform: translate(0, -2px) rotate(-8deg);
      transform: translate(0, -2px) rotate(-8deg);
    }
    50% {
      -webkit-transform: translate(0, -8px) rotate(4deg);
      transform: translate(0, -8px) rotate(4deg);
    }
    75% {
      -webkit-transform: translate(0, -15px) rotate(-2deg);
      transform: translate(0, -15px) rotate(-2deg);
    }
    100% {
      -webkit-transform: translate(0, -8px) rotate(0);
      transform: translate(0, -8px) rotate(0);
    }
  }
  @keyframes top-to {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    25% {
      -webkit-transform: translate(0, -2px) rotate(-8deg);
      transform: translate(0, -2px) rotate(-8deg);
    }
    50% {
      -webkit-transform: translate(0, -8px) rotate(4deg);
      transform: translate(0, -8px) rotate(4deg);
    }
    75% {
      -webkit-transform: translate(0, -15px) rotate(-2deg);
      transform: translate(0, -15px) rotate(-2deg);
    }
    100% {
      -webkit-transform: translate(0, -8px) rotate(0);
      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%;
  }
  body.page-fixed {
    /* overflow: hidden;
  height: 100%;
  background: none;
  #contents {
    pointer-events: none;
  } */
  }
  /*--------------------------------------------------
* Section
* --------------------------------------------------*/
  section {
    width: 100%;
  }
  section .section-inner {
    text-align: center;
    margin: 0 auto;
  }
  section .note-area {
    width: 81.25%;
    border-top: 1px solid #dedede;
    margin: 0 auto;
    padding-top: 2.34375%;
  }
  section .note-area p.note {
    color: #8c8b8b;
    line-height: 1.8;
    text-align: left;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  section .note-area p.note {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  section .note-area p.note {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  section .note-area p.note {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  section .note-area p.note a {
    text-decoration: underline;
  }
  .pre-order-button {
    display: block;
    background: #d62b0f;
    width: 81.25%;
    position: relative;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 2.8846153846% 0 3.4615384615%;
    margin: 0 auto;
  }
  .pre-order-button p {
    color: #FFF;
    text-align: center;
    line-height: 1.4;
  }
}

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

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

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

@media all and (max-width: 758px) {
  .pre-order-button p span {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .pre-order-button p span {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .pre-order-button p span {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .pre-order-button p span {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  .pre-order-button .sub {
    position: relative;
    display: inline-block;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .pre-order-button .sub {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .pre-order-button .sub {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .pre-order-button .sub {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  .pre-order-button .sub:before, .pre-order-button .sub:after {
    content: '';
    position: absolute;
    height: 1px;
    background: #FFF;
    top: 55%;
    width: 0px;
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 0ms;
    /* easeInOutQuint */
  }
  .pre-order-button .sub:before {
    left: 115%;
  }
  .pre-order-button .sub:after {
    right: 115%;
  }
  .pre-order-button.appear .sub:before, .pre-order-button.appear .sub:after {
    width: 115%;
  }
  .pre-order-button img {
    position: absolute;
    top: 50%;
    right: 3.4615384615%;
    width: 3.0769230769%;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .pre-order-button:hover {
    background: #e0604b;
  }
  .pre-order-button:hover img {
    right: 15px;
  }
  /*--------------------------------------------------
* Main
* --------------------------------------------------*/
  #main-area {
    height: 64%;
    width: 100%;
    background: #FFF;
    position: relative;
    overflow: hidden;
  }
  #main-area video {
    position: absolute;
    top: 50%;
    margin: auto;
    min-width: 100%;
    min-height: 80%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    width: 230%;
    background-size: cover;
  }
  #main-area .balloon {
    background: #dc2f13;
    border-radius: 50%;
    position: absolute;
    width: 150px;
    height: 150px;
    top: 0;
    right: -830px;
    left: 0;
    margin: auto;
    margin-top: 2.734375%;
    text-align: center;
  }
  #main-area .balloon > p {
    position: relative;
    width: 100%;
    top: 27px;
    border-bottom: 1px solid #FFF;
    padding-bottom: 2px;
    letter-spacing: 0.08rem;
    line-height: 1.7;
    display: inline;
    text-align: center;
    margin: 0 auto;
    color: #FFF;
    font-size: 25px;
  }
  #main-area .image-area {
    background: url("../../images/3rd/mainimage_sp.jpg") center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
  }
  #main-area .image-area p.name {
    color: #FFF;
    font-family: 'barlow-light', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 200;
    position: absolute;
    text-align: center;
    letter-spacing: 0.24rem;
    bottom: 0;
    margin-bottom: 25%;
    left: 0;
    right: 0;
    transition: all 1300ms cubic-bezier(0.215, 0.61, 0.355, 1) 300ms;
    /* easeOutQuint */
    will-change: opacity;
    opacity: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #main-area .image-area p.name {
    font-size: 26.6666666667px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #main-area .image-area p.name {
    font-size: 30px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #main-area .image-area p.name {
    font-size: 40px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) {
  #main-area .image-area p.name.appear {
    opacity: 1;
  }
  #main-area .video-button {
    bottom: 0;
    position: absolute;
    border: #FFF 1px solid;
    display: block;
    padding: 4.375% 0;
    left: 0;
    right: 0;
    margin: 0 auto 25.9375%;
    width: 57.8125%;
    line-height: 1;
    text-align: center;
    overflow: hidden;
  }
  #main-area .video-button .bg {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FFF;
    moz-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translate(-120%, 0%) skew(60deg);
    transform: translate(-120%, 0%) skew(60deg);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
  }
  #main-area .video-button p {
    color: #FFF;
    position: relative;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #main-area .video-button:hover .bg {
    width: 100%;
    -webkit-transform: translate(0%, 0) skew(0deg);
    transform: translate(0%, 0) skew(0deg);
  }
  #main-area .video-button:hover p {
    color: #333333;
  }
  #main-area .scrollto {
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    width: 9.84375%;
    padding-top: 9.84375%;
    height: 0;
    left: 0;
    right: 0;
    margin: 0 auto 10%;
    bottom: 0;
    line-height: 0;
    -webkit-animation-name: top-scroll;
            animation-name: top-scroll;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1000;
            animation-iteration-count: 1000;
  }
  #main-area .scrollto img {
    width: 46.0317460317%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    -webkit-transform: translate(0, -50%) rotate(0);
    transform: translate(0, -50%) rotate(0);
  }
  #main-area p.scroll {
    color: #FFF;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 2.8125%;
    line-height: 1;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

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

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

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

.rakuten-purchase-area {
  display: none !important;
}

@media all and (max-width: 758px) {
  /*--------------------------------------------------
* Purchase
* --------------------------------------------------*/
  .purchase-area {
    border: #dc2f13 2px solid;
    background: #FFF;
    display: inline-block;
    zoom: 100%;
    display: block;
    width: 81.25%;
    margin: 0 auto 9.84375%;
  }
  .purchase-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .purchase-area h3 {
    text-align: center;
    color: #FFF;
    background: #dc2f13;
    padding: 3.0769230769% 0;
  }
  .purchase-area h3 span {
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .purchase-area h3 span {
    font-size: 16.6666666667px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .purchase-area h3 span {
    font-size: 18.75px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .purchase-area h3 span {
    font-size: 25px;
    font-size: 4.6875vw;
  }
}

@media all and (max-width: 758px) {
  .purchase-area h3 p {
    display: inline;
    font-weight: bold;
  }
}

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

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

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

@media all and (max-width: 758px) {
  .purchase-area h4 {
    text-align: center;
    color: #dc2f13;
    border-bottom: 2px #dc2f13 solid;
    padding-bottom: 1.9230769231%;
    margin-bottom: 3.8461538462%;
    margin-top: 5.7692307692%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .purchase-area h4 {
    font-size: 12.2222222222px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .purchase-area h4 {
    font-size: 13.75px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .purchase-area h4 {
    font-size: 18.3333333333px;
    font-size: 3.4375vw;
  }
}

@media all and (max-width: 758px) {
  .purchase-area .net {
    width: 88.4615384615%;
    padding-bottom: 7.6923076923%;
    margin: 0 auto 7.6923076923%;
    border-bottom: #dc2f13 1px solid;
  }
  .purchase-area .net a {
    width: 47.3913043478%;
  }
  .purchase-area .shop {
    width: 88.4615384615%;
    margin: 0 auto;
  }
  .purchase-area .shop .wrap a {
    width: 100%;
    position: relative;
    padding-top: 19.5652173913%;
    margin-bottom: 6.5217391304%;
  }
  .purchase-area .shop .wrap a img {
    width: 2.8260869565%;
    position: absolute;
    right: 5.2173913043%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .purchase-area .shop .wrap a p {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 0;
    right: 0;
    margin: auto;
    color: #292929;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .purchase-area .shop .wrap a p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .purchase-area .shop .wrap a p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .purchase-area .shop .wrap a p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  .purchase-area .wrap {
    line-height: 0;
    white-space: nowrap;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  .purchase-area .wrap:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .purchase-area .wrap a {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    border: #dddddd 1px solid;
    line-height: 0;
  }
  .purchase-area .wrap a img {
    width: 100%;
  }
  .purchase-area .wrap a:hover {
    border: #dc2f13 1px solid;
  }
  /*--------------------------------------------------
* Title
* --------------------------------------------------*/
  #title-area {
    padding-top: 9.375%;
    padding-bottom: 10.9375%;
    /**
  * video
  */
  }
  #title-area h2 {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    color: #333333;
    margin-bottom: 7.8125%;
    letter-spacing: 0rem;
    line-height: 1.4;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #title-area h2 {
    font-size: 23.3333333333px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #title-area h2 {
    font-size: 26.25px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #title-area h2 {
    font-size: 35px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) {
  #title-area h2 p {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    margin-bottom: 3.90625%;
  }
  #title-area h2 p:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333333;
    width: 0%;
    height: 2px;
  }
  #title-area h2 p.line1 {
    font-weight: bold;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line1 span {
    margin-right: 1.5625%;
  }
  #title-area h2 p.line1:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 200ms;
    /* easeInOutQuint */
  }
  #title-area h2 p.line2 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 400ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line2:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 600ms;
    /* easeInOutQuint */
  }
  #title-area h2 p.line3 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 800ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line3:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 1000ms;
    /* easeInOutQuint */
  }
  #title-area h2 p.line4 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line4:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 1400ms;
    /* easeInOutQuint */
  }
  #title-area h2.appear p {
    opacity: 1;
  }
  #title-area h2.appear p:before {
    width: 100%;
  }
  #title-area .wena-image {
    width: 100%;
    margin-bottom: 6.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #title-area .wena-image.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner p.lead {
    text-align: center;
    margin-bottom: 6.25%;
    line-height: 1.9;
    color: #292929;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #title-area .section-inner p.lead.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner p.lead span {
    position: relative;
    top: -4px;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #title-area .section-inner p.lead span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #title-area .section-inner p.lead span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #title-area .section-inner p.lead span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #title-area .section-inner p.catch {
    text-align: center;
    margin: 0 auto 10.15625%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #title-area .section-inner p.catch {
    font-size: 20px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #title-area .section-inner p.catch {
    font-size: 22.5px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #title-area .section-inner p.catch {
    font-size: 30px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) {
  #title-area .section-inner p.catch.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner .pre-order-button {
    margin-bottom: 5px;
  }
  #title-area .active-campaign-area {
    margin: 0 auto 6.25%;
    width: 81.25%;
  }
  #title-area .video-area iframe {
    line-height: 0;
    width: 81.25%;
  }
  /**
* キャンペーン
*/
  .active-campaign-area {
    width: 100%;
    height: 55.7692307692%;
    background: #ffc0c0;
  }
  #title-area .active-campaign-area {
    margin: 0 auto 6.25%;
    width: 81.25%;
  }
  #title-area .video-area iframe {
    line-height: 0;
    width: 81.25%;
  }
  /**
* キャンペーン
*/
  .active-campaign-area {
    width: 100%;
    height: 55.7692307692%;
    background: #ffc0c0;
  }
  /*--------------------------------------------------
  * Leather
  * --------------------------------------------------*/
  #leather-area {
    position: relative;
    background: url("../../images/2nd/leather-bg-sp.jpg");
    background-size: cover;
    width:100%;
  }
  #leather-area .img-wrap {
    height: auto;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  #leather-area h2 {
    padding-top: 150px;
    padding-bottom: 15px;
    padding-left: 15px;
    position: relative;
    color: #FFF;
    line-height: 1;
    text-align: left;

  }
  #leather-area h2 p {
    margin-bottom: 3.125%;
    font-size: 48px;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  #leather-area h2 .sub {
    font-size: 3.75vw;
  }
  /*--------------------------------------------------
* Pro
* --------------------------------------------------*/
  #pro-area {
    position: relative;
    background: url("../../images/2nd/prod-bg.jpg") top left repeat;
  }
  #pro-area .img-wrap {
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  #pro-area .section-inner {
    position: relative;
    padding-top: 75%;
  }
  #pro-area h2 {
    padding-top: 6.25%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    color: #FFF;
    line-height: 1;
  }
  #pro-area h2 p {
    margin-bottom: 3.125%;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-area h2 p {
    font-size: 26.6666666667px;
    font-size: 7.5vw;
  }
  #leather-area h2 p {
    font-size: 26.6666666667px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-area h2 p {
    font-size: 30px;
    font-size: 7.5vw;
  }
  #leather-area h2 p {
    font-size: 30px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-area h2 p {
    font-size: 40px;
    font-size: 7.5vw;
  }
  #leather-area h2 p {
    font-size: 40px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) {
  #pro-area h2 .sub {
    margin-bottom: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-area h2 .sub {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-area h2 .sub {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-area h2 .sub {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #pro-area .img-area {
    position: absolute;
    top: 0;
    height: 100%;
    width: 130%;
    left: 50%;
    -webkit-transform: translate(-50%, 80px);
    transform: translate(-50%, 80px);
    background: url("../../images/2nd/pro.png") top center no-repeat;
    background-size: contain;
    margin-top: 26.5625%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    opacity: 0;
  }
  #pro-area .img-area.appear {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    opacity: 1;
  }
  #pro-area .badge {
    position: absolute;
    background: #d62b0f;
    border-radius: 50%;
    z-index: 3;
    bottom: 0;
    right: 5.3125%;
    margin-bottom: -19.375%;
    width: 29.375%;
    padding-top: 29.375%;
    height: 0;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
  }
  #pro-area .badge.appear {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  #pro-area .badge .inner {
    position: absolute;
    top: 49%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #pro-area .badge p {
    text-align: center;
    color: #FFF;
    position: relative;
    display: inline-block;
  }
  #pro-area .badge p:before {
    content: '';
    height: 1px;
    background: #FFF;
    width: 100%;
    bottom: 0;
    position: absolute;
  }
  #pro-area .badge .date {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    margin-bottom: 2.6595744681%;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #pro-area .badge .line2 {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 5.3191489362%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-area .badge .line2 {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-area .badge .line2 {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-area .badge .line2 {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #pro-info-area .section-inner {
    position: relative;
  }
  #pro-info-area .section-inner .info-wrap {
    padding-top: 9.375%;
  }
  #pro-info-area .section-inner .info-wrap > p {
    line-height: 1.9;
    letter-spacing: 0.08rem;
    color: #474747;
    z-index: 1;
    text-align: left;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-info-area .section-inner .info-wrap > p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-info-area .section-inner .info-wrap > p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-info-area .section-inner .info-wrap > p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #pro-info-area .section-inner .info-wrap h3 {
    width: 81.25%;
    margin: 6.25% auto;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    font-weight: normal;
    color: #474747;
    letter-spacing: 0.1rem;
    text-align: left;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-info-area .section-inner .info-wrap h3 {
    font-size: 21.1111111111px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-info-area .section-inner .info-wrap h3 {
    font-size: 23.75px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-info-area .section-inner .info-wrap h3 {
    font-size: 31.6666666667px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) {
  #pro-info-area .section-inner .info-wrap h3.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .image1 {
    width: 90.625%;
  }
  #pro-info-area .section-inner .image1 img {
    width: 100%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .image1 img.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .image2 {
    width: 81.25%;
    margin: 0 auto 1.5625%;
  }
  #pro-info-area .section-inner .image2 img {
    width: 100%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .image2 img.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .text1 {
    margin: 0 auto 9.375%;
    width: 81.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .text1.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .text2 {
    margin: 0 auto 1.5625%;
    width: 81.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .text2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area a.smart-detail {
    text-align: right;
    margin: 0 9.375% 9.375% auto;
    width: 81.25%;
    display: block;
  }
  #pro-info-area a.smart-detail p {
    display: inline-block;
    border-bottom: 1px solid #787878;
    padding-right: 5.7692307692%;
    position: relative;
    white-space: nowrap;
    color: #474747;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #pro-info-area a.smart-detail p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #pro-info-area a.smart-detail p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #pro-info-area a.smart-detail p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #pro-info-area a.smart-detail p .arrow {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    width: 3.8461538462%;
    padding-top: 5.7692307692%;
    height: 0;
    position: absolute;
    right: 1.5384615385%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url("../../images/arrow-right-b.svg") top left no-repeat;
    background-size: contain;
  }
  #pro-info-area .section-inner .products-area {
    margin-top: 40px;
  }
  .products-area {
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  .products-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .products-area .product {
    width: 81.25%;
    margin: 0 auto 12.5%;
    position: relative;
  }
  .products-area .product .wena {
    display: block;
    margin: 0 auto 8.6538461538% 19.2307692308%;
    width: 46.1538461538%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  .products-area .product .wena.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  .products-area .product .text-area {
    position: absolute;
    top: 0;
    padding-top: 26.8846153846%;
    text-align: left;
    left: 55.7692307692%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  .products-area .product .text-area.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  .products-area .product .text-area .name {
    color: #292929;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .products-area .product .text-area .name {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .products-area .product .text-area .name {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .products-area .product .text-area .name {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  .products-area .product .text-area .info {
    color: #4d4d4d;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    white-space: nowrap;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .products-area .product .text-area .info {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .products-area .product .text-area .info {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .products-area .product .text-area .info {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  .products-area .product .text-area .info span {
    white-space: nowrap;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .products-area .product .text-area .info span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  .products-area .product .text-area .info span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  .products-area .product .text-area .info span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  .products-area .product a {
    display: block;
    position: relative;
    padding-top: 15.625%;
    width: 100%;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .products-area .product a img {
    width: 2.8846153846%;
    position: absolute;
    top: 50%;
    right: 3.4615384615%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .products-area .product a p {
    text-align: center;
    line-height: 1.2;
    position: absolute;
    top: 50%;
    left: 0;
    right: 3.8461538462%;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}

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

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

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

@media all and (max-width: 758px) {
  .products-area .product a p span {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

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

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

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

@media all and (max-width: 758px) {
  .products-area .product a p.sub {
    position: relative;
    padding-top: 0;
    padding-bottom: 0.9615384615%;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    display: inline-block;
    letter-spacing: 0.06rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  .products-area .product a p.sub {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

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

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

@media all and (max-width: 758px) {
  .products-area .product a p.sub:before, .products-area .product a p.sub:after {
    content: '';
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 0ms;
    /* easeInOutQuint */
    position: absolute;
    height: 1px;
    top: 55%;
    width: 0;
    background: #bbbbbb;
  }
  .products-area .product a p.sub:before {
    left: 106%;
  }
  .products-area .product a p.sub:after {
    right: 106%;
  }
  .products-area .product a.appear p.sub:before, .products-area .product a.appear p.sub:after {
    width: 30%;
  }
  .products-area .silver a {
    background: #e4e4e4;
    background: #e4e4e4;
    background: linear-gradient(to bottom, #e4e4e4 0%, #d2d2d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#dcdcdc',GradientType=0 );
  }
  .products-area .silver a p{
    padding-top: 4px;
  }
  .products-area .silver a p {
    color: #484848;
  }
  .products-area .silver a p.sub:before, .products-area .silver a p.sub:after {
    background: #727272;
  }
  .products-area .black a {
    background: #373737;
    background: linear-gradient(to bottom, #373737 0%, #262626 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#262626',GradientType=0 );
  }
  .products-area .black a p {
    color: #FFF;
  }
  /*--------------------------------------------------
* Func area
* --------------------------------------------------*/
  #functions-area {
    background: #f8f8f8;
    padding-top: 9.375%;
  }
  #functions-area h2 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    font-weight: normal;
    text-align: center;
    margin-bottom: 6.25%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area h2 {
    font-size: 23.3333333333px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area h2 {
    font-size: 26.25px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area h2 {
    font-size: 35px;
    font-size: 6.5625vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .func-wrap {
    font-size: 0;
    margin-bottom: 9.375%;
    vertical-align: top;
  }
  #functions-area .func-wrap .func {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    vertical-align: top;
    display: block;
    margin: 0 auto 10.9375%;
    width: 81.25%;
  }
  #functions-area .func-wrap .func.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .func-wrap .func .image-area {
    margin-bottom: 4.6153846154%;
  }
  #functions-area .func-wrap .func .image-area img {
    width: 100%;
  }
  #functions-area .func-wrap .func .text-area .title-area {
    position: relative;
    border-bottom: 1px solid #bfbfbf;
  }
  #functions-area .func-wrap .func .text-area .title-area p {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    text-align: left;
    padding-left: 13.0769230769%;
    color: #292929;
    line-height: 1;
  }
  #functions-area .func-wrap .func .text-area .title-area .icon {
    position: absolute;
    left: 0;
  }
  #functions-area .func-wrap .func .text-area .title-area .name {
    letter-spacing: 0.1rem;
    padding-bottom: 0.5769230769%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .func-wrap .func .text-area .title-area .name {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .func-wrap .func .text-area .title-area .name {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .func-wrap .func .text-area .title-area .name {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .func-wrap .func .text-area .title-area .title {
    padding-bottom: 2.3076923077%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .func-wrap .func .text-area .title-area .title {
    font-size: 18.8888888889px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .func-wrap .func .text-area .title-area .title {
    font-size: 21.25px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .func-wrap .func .text-area .title-area .title {
    font-size: 28.3333333333px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .func-wrap .func .text-area .title-area .title span {
    position: absolute;
    top: 0;
    margin-top: 4.2307692308%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .func-wrap .func .text-area .title-area .title span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .func-wrap .func .text-area .title-area .title span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .func-wrap .func .text-area .title-area .title span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .func-wrap .func .text-area .text-body {
    padding-top: 2.3076923077%;
    color: #474747;
    line-height: 1.8;
    text-align: left;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .func-wrap .func .text-area .text-body {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .func-wrap .func .text-area .text-body {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .func-wrap .func .text-area .text-body {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .func-wrap .func .text-area .text-body:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #functions-area .func-wrap .func .text-area .text-body img {
    margin-top: 6.3461538462%;
    width: 100%;
  }
  #functions-area .func-wrap .func .text-area .text-body > p span {
    position: relative;
    top: -4px;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .func-wrap .func .text-area .text-body > p span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .func-wrap .func .text-area .text-body > p span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .func-wrap .func .text-area .text-body > p span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .func-wrap .func .text-area .text-body a {
    margin-top: 3.125%;
    display: block;
    text-align: right;
  }
  #functions-area .func-wrap .func .text-area .text-body a p {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding-right: 5.7692307692%;
  }
  #functions-area .func-wrap .func .text-area .text-body a p:after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #474747;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #functions-area .func-wrap .func .text-area .text-body a p span {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    width: 3.8461538462%;
    padding-top: 5.7692307692%;
    height: 0;
    position: absolute;
    right: 1.5384615385%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url("../../images/arrow-right-g.svg") top left no-repeat;
    background-size: contain;
  }
  #functions-area .func-wrap .func .text-area .text-body a:hover span {
    right: 0;
  }
  #functions-area .func-wrap .func .text-area .text-body a:hover p:after {
    content: '';
    background: #bfbfbf;
  }
  #functions-area .func-wrap .wallet .icon {
    width: 9.6153846154%;
    margin-top: 1.9230769231%;
  }
  #functions-area .func-wrap .notification .icon {
    width: 9.0384615385%;
    margin-top: 0.3846153846%;
  }
  #functions-area .func-wrap .activity .icon {
    margin-top: 0.3846153846%;
    width: 10.5769230769%;
  }
  #functions-area .func-wrap .walletleather .icon {
    width: 9.6153846154%;
    margin-top: 1.9230769231%;
  }
  #functions-area .func-wrap .batteryless .icon {
    width: 9.9384615385%;
    margin-top: 0.3846153846%;
  }
  #functions-area .func-wrap .waterploof .icon {
    margin-top: 0.3846153846%;
    width: 7.5769230769%;
  }
  #functions-area .scene-area {
    padding-top: 18.75%;
    padding-bottom: 18.75%;
  }
  #functions-area .scene-area h2 {
    width: 81.25%;
    text-align: center;
    white-space: nowrap;
    line-height: 1.7;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    margin: 0 auto 7.8125%;
  }
  #functions-area .scene-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .scene-area h2 {
    font-size: 20px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .scene-area h2 {
    font-size: 22.5px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .scene-area h2 {
    font-size: 30px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .scene-area .scene-wrap {
    font-size: 0;
  }
  #functions-area .scene-area .scene-wrap .scene {
    vertical-align: top;
    display: block;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 81.25%;
    margin: 0 auto 10.9375%;
    position: relative;
  }
  #functions-area .scene-area .scene-wrap .scene.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .scene-area .scene-wrap .scene .image-area {
    margin-bottom: 3.8461538462%;
  }
  #functions-area .scene-area .scene-wrap .scene .image-area img {
    width: 100%;
  }
  #functions-area .scene-area .scene-wrap .scene .image-area .plus {
    display: none;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area {
    position: relative;
    width: 100%;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner {
    margin: auto;
    width: 100%;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p {
    color: #292929;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    text-align: left;
    margin-bottom: 3.8461538462%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p {
    font-size: 25.5555555556px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p {
    font-size: 28.75px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p {
    font-size: 38.3333333333px;
    font-size: 7.1875vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p span {
    margin-right: 1.1538461538%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p span {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p span {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p span {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a {
    display: block;
    border: #494949 1px solid;
    position: relative;
    padding: 4.8076923077% 0;
    margin-top: 1.9230769231%;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a p {
    text-align: center;
    color: #292929;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a p {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a p {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a p {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a span {
    width: 3.4615384615%;
    line-height: 0;
    display: inline-block;
    position: absolute;
    right: 3.4615384615%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a span img {
    width: 100%;
  }
  /*--------------------------------------------------
* Active Area
* --------------------------------------------------*/
  #active-area-3rd .active-area {
    width: 100%;
    position: relative;
    margin-bottom: 10.9375%;
    margin-top: 40px;
  }
  #active-area-3rd .active-area h2 {
    color: #292929;
    letter-spacing: 0.18rem;
    font-weight: normal;
    text-align: left;
    line-height: 1.8;
    margin-left: 8.59375%;
    margin-bottom: 6.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area h2 {
    font-size: 21.1111111111px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area h2 {
    font-size: 23.75px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area h2 {
    font-size: 31.6666666667px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area p {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 81.25%;
    margin: 0 auto;
    left: 0;
    color: #474747;
    line-height: 2;
    text-align: left;
  }
  #active-area-3rd .active-area p.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area p span {
    position: relative;
    top: -4px;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area p span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area p span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area p span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area .image-1 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    line-height: 0;
    margin-bottom: 4.6875%;
    width: 90.625%;
    left: 0;
    top: 0;
  }
  #active-area-3rd .active-area .image-1.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-1 img {
    width: 100%;
  }
  #active-area-3rd .active-area .image-2 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 81.25%;
    margin: 0 auto 3.90625%;
    left: 9.375%;
  }
  #active-area-3rd .active-area .image-2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-2 img {
    width: 100%;
  }
  #active-area {
    padding-top: 12.5%;
  }
  #active-area .active-image {
    height: 0;
    padding-top: 53.90625%;
    position: relative;
    margin-bottom: 10.9375%;
  }
  #active-area-3rd .active-area h2 {
    color: #292929;
    letter-spacing: 0.18rem;
    font-weight: normal;
    text-align: left;
    line-height: 1.8;
    margin-left: 8.59375%;
    margin-bottom: 6.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area h2 {
    font-size: 21.1111111111px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area h2 {
    font-size: 23.75px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area h2 {
    font-size: 31.6666666667px;
    font-size: 5.9375vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area p {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 81.25%;
    margin: 0 auto;
    left: 0;
    color: #474747;
    line-height: 2;
    text-align: left;
  }
  #active-area-3rd .active-area p.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area p span {
    position: relative;
    top: -4px;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area-3rd .active-area p span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area-3rd .active-area p span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area-3rd .active-area p span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #active-area-3rd .active-area .image-1 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    line-height: 0;
    margin-bottom: 4.6875%;
    width: 90.625%;
    left: 0;
    top: 0;
  }
  #active-area-3rd .active-area .image-1.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-1 img {
    width: 100%;
  }
  #active-area-3rd .active-area .image-2 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 81.25%;
    margin: 0 auto 3.90625%;
    left: 9.375%;
  }
  #active-area-3rd .active-area .image-2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-2 img {
    width: 100%;
  }
  #active-area {
    padding-top: 12.5%;
  }
  #active-area .active-image {
    height: 0;
    padding-top: 53.90625%;
    position: relative;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area .active-image.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area .active-image .left,
  #active-area .active-image .right {
    position: absolute;
    height: 100%;
    top: 0;
  }
  #active-area .active-image .left {
    width: 66.5625%;
    background: url("../../images/2nd/active1.jpg") center center no-repeat;
    background-size: cover;
    left: 0;
  }
  #active-area .active-image .right {
    width: 33.4375%;
    background: url("../../images/2nd/active2.jpg") center center no-repeat;
    background-size: cover;
    right: 0;
  }
  #active-area h2 {
    color: #474747;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    letter-spacing: 0.2rem;
    margin-bottom: 6.25%;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    padding-top: 6.25%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area h2 {
    font-size: 26.6666666667px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area h2 {
    font-size: 30px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area h2 {
    font-size: 40px;
    font-size: 7.5vw;
  }
}

@media all and (max-width: 758px) {
  #active-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area h2 p {
    margin: 0 auto;
    margin-top: 2.8846153846%;
    letter-spacing: 0.14rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area h2 p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

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

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

@media all and (max-width: 758px) {
  #active-area .text {
    width: 81.25%;
    text-align: left;
    letter-spacing: 0.06rem;
    line-height: 2.2;
    color: #474747;
    margin: 0 auto 6.25%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area .text.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #active-area h3 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    text-align: center;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #active-area h3.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area h3 > div {
    background: #dc2f13;
    display: inline-block;
    position: relative;
    color: #FFF;
    padding: 1.875% 3.125%;
    letter-spacing: 0.1rem;
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
  }
  #active-area h3 > div p {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 0.06rem;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area h3 > div p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area h3 > div p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area h3 > div p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #active-area h3 a {
    display: block;
    width: 81.25%;
    margin: 0 auto;
    position: relative;
    color: #292929;
    letter-spacing: 0.1rem;
    white-space: nowrap;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #active-area h3 a p {
    position: relative;
    margin-bottom: 3.125%;
    line-height: 2;
    display: inline;
  }
  #active-area h3 a p:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #292929;
  }
  #active-area h3 a span {
    display: inline-block;
    width: 2.1875%;
    line-height: 0;
    margin: 0 0 0 3.125%;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #active-area h3 a span img {
    width: 100%;
  }
  #active-area .pre-order {
    display: inline-block;
    color: #dc2f13;
    margin-top: 5.46875%;
    margin-bottom: 12.5%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #active-area .pre-order {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #active-area .pre-order {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #active-area .pre-order {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #active-area .pre-order.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area .pre-order span {
    display: inline-block;
    width: 1.875%;
    line-height: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin: 0 0 0 3.125%;
  }
  #active-area .pre-order span img {
    width: 100%;
  }
  /*--------------------------------------------------
* Smart Area
* --------------------------------------------------*/
  #smart-area {
    padding-bottom: 15.625%;
  }
  #smart-area h2 {
    font-weight: normal;
    letter-spacing: 0.14rem;
    margin-bottom: 3.90625%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #smart-area h2 {
    font-size: 20px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #smart-area h2 {
    font-size: 22.5px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #smart-area h2 {
    font-size: 30px;
    font-size: 5.625vw;
  }
}

@media all and (max-width: 758px) {
  #smart-area .wrap {
    width: 81.25%;
    margin: 0 auto;
    margin-bottom: 22px;
    vertical-align: top;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  #smart-area .wrap:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #smart-area .wrap h3 {
    position: relative;
    margin-bottom: 2.6923076923%;
    line-height: 1;
    text-align: center;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #smart-area .wrap h3 {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #smart-area .wrap h3 {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #smart-area .wrap h3 {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #smart-area .wrap h3:before, #smart-area .wrap h3:after {
    content: '';
    height: 1px;
    background: #616161;
    width: 36.5384615385%;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #smart-area .wrap h3:after {
    right: 0;
  }
  #smart-area .wrap .smart {
    vertical-align: top;
    display: inline-block;
    float: left;
  }
  #smart-area .wrap .image-area {
    line-height: 0;
    margin-bottom: 2.8846153846%;
  }
  #smart-area .wrap .image-area img {
    width: 100%;
  }
  #smart-area .wrap .text-area {
    margin-bottom: 7.8125%;
  }
  #smart-area .wrap .text-area p {
    text-align: left;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #smart-area .wrap .text-area p span {
    margin-right: 1.1538461538%;
    margin-left: 0.5769230769%;
    position: relative;
    top: -5px;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #smart-area .wrap .text-area p span {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #smart-area .wrap .text-area p span {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #smart-area .wrap .text-area p span {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #smart-area a.smart-detail {
    text-align: right;
    margin: 0 9.375% 7.8125% auto;
    width: 81.25%;
    display: block;
  }
  #smart-area a.smart-detail p {
    display: inline-block;
    border-bottom: 1px solid #787878;
    padding-right: 5.7692307692%;
    position: relative;
    white-space: nowrap;
    color: #474747;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #smart-area a.smart-detail p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #smart-area a.smart-detail p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #smart-area a.smart-detail p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #smart-area a.smart-detail p span {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    width: 3.8461538462%;
    padding-top: 5.7692307692%;
    height: 0;
    position: absolute;
    right: 1.5384615385%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url("../../images/arrow-right-g.svg") top left no-repeat;
    background-size: contain;
  }
  #smart-area .products-area {
    margin-top: 14.0625%;
  }
  #smart-area .products-area img.wena {
    width: 45%;
    margin-bottom: 6.25%;
    margin-left: 13.4375%;
  }
  #smart-area .products-area .product {
    text-align: left;
    float: none;
    margin: 0 auto;
    position: relative;
  }
  #smart-area .products-area .product .text-area {
    position: absolute;
    display: block;
    top: 0;
    margin-top: 25%;
    padding-top: 0;
    left: 63.125%;
    text-align: left;
  }
  #smart-area .products-area .product .text-area p {
    white-space: nowrap;
  }
  #smart-area .products-area .product a {
    text-align: center;
    padding-top: 13.4615384615%;
  }
  #smart-area .products-area .product a p {
    width: 100%;
  }
  #smart-area .products-area .product a .sub {
    top: 60%;
    width: auto;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    padding-top: 0;
  }
  #smart-area .products-area .product a .sub:before, #smart-area .products-area .product a .sub:after {
    width: 130%;
  }
  /*--------------------------------------------------
* Campaign
* --------------------------------------------------*/
  #campaign-area {
    background: #f1f1f1;
    padding-bottom: 1px;
    padding-top: 12.5%;
  }
  #campaign-area .section-inner {
    position: relative;
    width: 81.25%;
    margin: 0 auto;
  }
  #campaign-area h2 {
    margin-top: -20.3125%;
    margin-bottom: 32px;
  }
  #campaign-area h2 p {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: #d8d8d8;
    line-height: 1;
    letter-spacing: 1rem;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #campaign-area .wrapp {
    position: relative;
  }
  #campaign-area .campaign-wrap {
    background: #FFF;
    box-sizing: border-box;
    border: #dc2f13 3px solid;
    margin-bottom: 7.8125%;
  }
  #campaign-area .campaign-wrap .campaign-sub {
    background: #dc2f13;
    border: #FFF 1px solid;
  }
  #campaign-area .campaign-wrap .campaign-body {
    position: relative;
    border-top: #dc2f13 3px solid;
  }
  #campaign-area p.sub {
    font-weight: bold;
    text-align: left;
    padding: 3.4615384615% 4.2307692308%;
    line-height: 1.3;
    letter-spacing: 0;
    color: #FFF;
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #campaign-area .badge {
    position: absolute;
    background: #dc2f13;
    border-radius: 50%;
    right: -9.2307692308%;
    top: 0;
    width: 26.5384615385%;
    height: 0;
    padding-top: 26.5384615385%;
    margin-top: 9%;
  }
  #campaign-area .badge p {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    color: #FFF;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #campaign-area .badge p:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 80%;
    background: #FFF;
    top: 57%;
    left: 0;
    right: 0;
    margin: auto;
  }
  #campaign-area .badge p span.date {
    display: inline;
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .badge p span.date {
    font-size: 18.8888888889px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .badge p span.date {
    font-size: 21.25px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .badge p span.date {
    font-size: 28.3333333333px;
    font-size: 5.3125vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .badge p span {
    display: block;
  }
  #campaign-area h3 {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    color: #dc2f13;
    margin: 0 0 3.4615384615% 3.8461538462%;
    text-align: left;
    background: #FFF;
  }
  #campaign-area h3 p {
    line-height: 1.2;
    display: inline-block;
    letter-spacing: 0rem;
    white-space: nowrap;
    padding: 0;
    position: relative;
    margin-bottom: 1.9230769231%;
    opacity: 0;
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area h3 p {
    /* font-size: 33.3333333333px; */
    /* font-size: 9.375vw; */
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area h3 p {
    font-size: 37.5px;
    font-size: 9.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area h3 p {
    font-size: 50px;
    font-size: 9.375vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area h3 p:before {
    content: '';
    width: 0%;
    height: 2px;
    background: #dc2f13;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #campaign-area h3 p.line1 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area h3 p.line1 {
    /* font-size: 33.3333333333px; */
    /* font-size: 9.375vw; */
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area h3 p.line1 {
    font-size: 37.5px;
    font-size: 9.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area h3 p.line1 {
    font-size: 50px;
    font-size: 9.375vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area h3 p.line1:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 200ms;
    /* easeInOutQuint */
  }
  #campaign-area h3 p.line2 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 400ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area h3 p.line2:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 600ms;
    /* easeInOutQuint */
  }
  #campaign-area h3 p.line3 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 800ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area h3 p.line3:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 1000ms;
    /* easeInOutQuint */
  }
  #campaign-area h3 p.line4 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area h3 p.line4:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 1400ms;
    /* easeInOutQuint */
  }
  #campaign-area h3.appear p {
    opacity: 1;
  }
  #campaign-area h3.appear p:before {
    width: 100%;
  }
  #campaign-area p.lead {
    color: #333333;
    text-align: left;
    position: relative;
    margin: 0 5.3846153846% 7.6923076923%;
    line-height: 2;
    letter-spacing: 0rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

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

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

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

@media all and (max-width: 758px) {
  #campaign-area h4 {
    color: #FFF;
    background: #353535;
    line-height: 1;
    font-size: 20px;
    padding: 10px 0;
    margin-bottom: 30px;
    letter-spacing: 0.06rem;
  }
  #campaign-area .steps {
    display: inline-block;
    zoom: 100%;
    display: block;
    text-align: center;
    font-size: 0;
    padding-bottom: 9.6153846154%;
    vertical-align: top;
  }
  #campaign-area .steps:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #campaign-area .steps .step {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 9.6153846154% 0;
  }
  #campaign-area .steps .step span.note {
    color: #838383;
    display: block;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step span.note {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step span.note {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step span.note {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step:last-child {
    margin: 0;
  }
  #campaign-area .steps .step h5 {
    text-align: left;
    color: #dc2f13;
    padding-bottom: 1.9230769231%;
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    margin-bottom: 3.8461538462%;
    border-bottom: 2px solid #dc2f13;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step h5 {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step h5 {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step h5 {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step p {
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #474747;
    margin-bottom: 3.8461538462%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step .tw-follow-button {
    display: block;
    background: #56a4df;
    width: 100%;
    text-align: center;
    color: #FFF;
    border-radius: 8px;
    position: relative;
    line-height: 1;
    padding: 4.6153846154% 0;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step .tw-follow-button {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step .tw-follow-button {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step .tw-follow-button {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step .tw-follow-button:after {
    content: '';
    position: absolute;
    background: url("../../images/arrow-right.svg") top left no-repeat;
    display: inline-block;
    right: 3.8461538462%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 2.5%;
    height: 0;
    padding-top: 4.2307692308%;
    background-size: contain;
  }
  #campaign-area .steps .step .tw-follow-button .icon {
    width: 5.1923076923%;
    line-height: 0;
    position: relative;
    margin-right: 3.4615384615%;
    display: inline-block;
    top: 50%;
    vertical-align: middle;
  }
  #campaign-area .steps .step .tw-follow-button .icon img {
    width: 100%;
  }
  #campaign-area .steps .step iframe {
    width: 100% !important;
  }
  #campaign-area .steps .step.exp {
    background: #FFF;
    border-radius: 7px;
    overflow: hidden;
  }
  #campaign-area .steps .step.exp h5 {
    background: #c9c9c9;
    color: #FFF;
    letter-spacing: 0.06rem;
    text-align: center;
    line-height: 1;
    border: none;
    padding: 2.6923076923% 0 2.6923076923%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step.exp h5 {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step.exp h5 {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step.exp h5 {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step.exp p {
    padding: 0 3.8461538462%;
    line-height: 1.8;
    margin-bottom: 3.8461538462%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #campaign-area .steps .step.exp p {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #campaign-area .steps .step.exp p {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #campaign-area .steps .step.exp p {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #campaign-area .steps .step.exp p .hashtags {
    color: #3a95ea;
    display: block;
  }
  #campaign-area .finished {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(41, 41, 41, 0.9);
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  #campaign-area .finished p {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    font-weight: bold;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    color: #FFF;
    line-height: 2;
    letter-spacing: 0.1rem;
  }
}

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

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

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

@media all and (max-width: 758px) {
  /*--------------------------------------------------
* Twitter Widget
* --------------------------------------------------*/
  #twitter-area {
    background: #f1f1f1;
    padding-bottom: 7.8125%;
  }
  #twitter-area .section-inner {
    overflow: hidden;
    width: 81.25%;
    margin: 0 auto;
    background: #FFF;
  }
  #twitter-area .section-inner iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 520px !important;
  }
  /*--------------------------------------------------
* Term
* --------------------------------------------------*/
  #term-area {
    background: #fff;
    padding-bottom: 10.15625%;
    padding-top: 7.8125%;
  }
  #term-area .section-inner {
    width: 81.25%;
    margin: 0 auto;
    text-align: left;
  }
  #term-area .section-inner h3 {
    display: inline-block;
    position: relative;
  }
  #term-area .section-inner h3 p {
    color: #2f2f2f;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #term-area .section-inner h3 p {
    font-size: 15.5555555556px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #term-area .section-inner h3 p {
    font-size: 17.5px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #term-area .section-inner h3 p {
    font-size: 23.3333333333px;
    font-size: 4.375vw;
  }
}

@media all and (max-width: 758px) {
  #term-area .section-inner h3:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms;
    /* easeInOutQuint */
    content: '';
    height: 1px;
    background: #070001;
  }
  #term-area .section-inner h3.appear:before {
    width: 100%;
  }
  #term-area .section-inner h4 {
    margin-bottom: 1.9230769231%;
    color: #2f2f2f;
    margin-top: 6.7307692308%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #term-area .section-inner h4 {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #term-area .section-inner h4 {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #term-area .section-inner h4 {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #term-area .section-inner > p {
    color: #4d4d4d;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #term-area .section-inner > p {
    font-size: 11.1111111111px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #term-area .section-inner > p {
    font-size: 12.5px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #term-area .section-inner > p {
    font-size: 16.6666666667px;
    font-size: 3.125vw;
  }
}

@media all and (max-width: 758px) {
  #term-area .section-inner > p:last-child {
    margin-bottom: 1.9230769231%;
  }
  #term-area .section-inner p.note {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #838383;
    margin-top: 1.9230769231%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #term-area .section-inner p.note {
    font-size: 0.0213675214;
    font-size: 0.0060096154/pxvw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #term-area .section-inner p.note {
    font-size: 0.0240384615;
    font-size: 0.0060096154/pxvw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #term-area .section-inner p.note {
    font-size: 0.0320512821;
    font-size: 0.0060096154/pxvw;
  }
}

@media all and (max-width: 758px) {
  #term-area .section-inner p.note a {
    text-decoration: underline;
  }
  #term-area .section-inner .links {
    margin-top: 10.5769230769%;
    border-top: #bfbfbf 1px solid;
    padding-top: 4.8076923077%;
    text-align: center;
  }
  #term-area .section-inner .links a {
    display: block;
    width: 100%;
    color: #4d4d4d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 3.8461538462%;
    text-align: left;
    position: relative;
    padding-left: 3.8461538462%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #term-area .section-inner .links a {
    font-size: 10px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #term-area .section-inner .links a {
    font-size: 11.25px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #term-area .section-inner .links a {
    font-size: 15px;
    font-size: 2.8125vw;
  }
}

@media all and (max-width: 758px) {
  #term-area .section-inner .links a span {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  /*--------------------------------------------------
* SNS
* --------------------------------------------------*/
  #sns-area {
    background: #f1f1f1;
    padding-top: 12.5%;
    padding-bottom: 26.5625%;
  }
  #sns-area h3 {
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    margin-bottom: 5.625%;
  }
}

@media all and (max-width: 758px) and (max-width: 420px) {
  #sns-area h3 {
    font-size: 13.3333333333px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 421px) {
  #sns-area h3 {
    font-size: 15px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) and (min-width: 601px) {
  #sns-area h3 {
    font-size: 20px;
    font-size: 3.75vw;
  }
}

@media all and (max-width: 758px) {
  #sns-area .icons {
    text-align: center;
    font-size: 0;
  }
  #sns-area .icons a {
    display: inline-block;
    line-height: 0;
    margin: 0 6.25%;
  }
  #sns-area .icons a img {
    width: 100%;
  }
  #sns-area .icons .facebook {
    width: 6.875%;
  }
  #sns-area .icons .twitter {
    width: 7.8125%;
  }
  #sns-area .icons .instagram {
    width: 7.03125%;
  }
  @-webkit-keyframes top-scroll {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    45% {
      -webkit-transform: translate(0, 7px);
      transform: translate(0, 7px);
    }
    55% {
      -webkit-transform: translate(0, 7px);
      transform: translate(0, 7px);
    }
    100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  @keyframes top-scroll {
    0% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    45% {
      -webkit-transform: translate(0, 7px);
      transform: translate(0, 7px);
    }
    55% {
      -webkit-transform: translate(0, 7px);
      transform: translate(0, 7px);
    }
    100% {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
}

@media all and (min-width: 759px) {
  html {
    height: 100%;
  }
  body {
    height: 100%;
  }
  /*--------------------------------------------------
* Section
* --------------------------------------------------*/
  section {
    width: 100%;
    min-width: 1000px;
  }
  section .section-inner {
    width: 1000px;
    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;
  }
  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;
  }
  .pre-order-button {
    display: block;
    font-size: 0;
    background: #d62b0f;
    width: 654px;
    position: relative;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 10px 0;
    margin: 0 auto;
    height: 60px;
  }
  .pre-order-button p {
    color: #FFF;
    text-align: center;
    font-size: 26px;
    line-height: 1.3;
  }
  .pre-order-button p span {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    font-size: 28px;
  }
  .pre-order-button .sub {
    font-size: 18px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  .pre-order-button .sub:before, .pre-order-button .sub:after {
    content: '';
    position: absolute;
    height: 1px;
    background: #FFF;
    top: 55%;
    width: 0px;
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 0ms;
    /* easeInOutQuint */
  }
  .pre-order-button .sub:before {
    left: 110px;
  }
  .pre-order-button .sub:after {
    right: 110px;
  }
  .pre-order-button.appear .sub:before, .pre-order-button.appear .sub:after {
    width: 112px;
  }
  .pre-order-button img {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .pre-order-button:hover {
    background: #e0604b;
  }
  .pre-order-button:hover img {
    right: 15px;
  }
  /*--------------------------------------------------
* Main
* --------------------------------------------------*/
  #main-area {
    height: 60%;
    min-height: 350px;
    width: 100%;
    background: #FFF;
    overflow: hidden;
    position: relative;
  }
  #main-area video {
    position: absolute;
    top: 50%;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    background-size: cover;
  }
  #main-area .balloon {
    background: #dc2f13;
    border-radius: 50%;
    position: absolute;
    width: 150px;
    height: 150px;
    top: 0;
    right: -70%;
    left: 0;
    margin: auto;
    margin-top: 2.734375%;
    text-align: center;
  }
  #main-area .balloon > p {
    position: relative;
    width: 100%;
    top: 27px;
    border-bottom: 1px solid #FFF;
    padding-bottom: 2px;
    letter-spacing: 0.08rem;
    line-height: 1.7;
    display: inline;
    text-align: center;
    margin: 0 auto;
    color: #FFF;
    font-size: 25px;
  }
  #main-area .image-area {
    background: url("../../images/3rd/mainimage.jpg") center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
  }
  #main-area .image-area p.name {
    color: #FFF;
    font-size: 30px;
    font-family: 'barlow-light', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 200;
    position: absolute;
    text-align: center;
    width: 400px;
    letter-spacing: 0.24rem;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 1300ms cubic-bezier(0.215, 0.61, 0.355, 1) 300ms;
    /* easeOutQuint */
    will-change: opacity;
    opacity: 0;
  }
  #main-area .image-area p.name.appear {
    opacity: 1;
  }
  #main-area .video-button {
    bottom: 95px;
    position: absolute;
    border: #FFF 1px solid;
    display: block;
    padding: 13px 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 208px;
    line-height: 1;
    text-align: center;
    overflow: hidden;
  }
  #main-area .video-button .bg {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FFF;
    moz-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translate(-120%, 0%) skew(60deg);
    transform: translate(-120%, 0%) skew(60deg);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
  }
  #main-area .video-button p {
    font-size: 18px;
    color: #FFF;
    position: relative;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #main-area .video-button:hover .bg {
    width: 100%;
    -webkit-transform: translate(0%, 0) skew(0deg);
    transform: translate(0%, 0) skew(0deg);
  }
  #main-area .video-button:hover p {
    color: #333333;
  }
  #main-area .scrollto {
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    width: 35px;
    padding-top: 35px;
    height: 0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 35px;
    line-height: 0;
    -webkit-animation-name: top-scroll;
            animation-name: top-scroll;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1000;
            animation-iteration-count: 1000;
  }
  #main-area .scrollto img {
    width: 16px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    /* older webkit */
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
    /* easeOutBack */
    -webkit-transform: translate(0, -50%) rotate(0);
    transform: translate(0, -50%) rotate(0);
  }
  #main-area .scrollto:hover img {
    -webkit-transform: translate(0, -50%) rotate(360deg);
    transform: translate(0, -50%) rotate(360deg);
  }
  #main-area p.scroll {
    color: #FFF;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    font-size: 10px;
    line-height: 1;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  /*--------------------------------------------------
* Purchase
* --------------------------------------------------*/
  .purchase-area {
    border: #dc2f13 2px solid;
    background: #FFF;
    display: inline-block;
    zoom: 100%;
    display: block;
    margin-bottom: 40px;
  }
  .purchase-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .purchase-area h3,
  .purchase-area h3.purchase-title {
    position: static;
    text-align: center;
    color: #FFF;
    background: #dc2f13;
    padding: 10px 0;
  }
  .purchase-area h3 span,
  .purchase-area h3.purchase-title span {
    font-size: 22px;
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
  }
  .purchase-area h3 p,
  .purchase-area h3.purchase-title p {
    display: inline;
    font-size: 20px;
    font-weight: bold;
  }
  .purchase-area h4 {
    font-size: 18px;
    text-align: center;
    color: #dc2f13;
    border-bottom: 2px #dc2f13 solid;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
  .purchase-area .net {
    margin: 22px 0 30px 30px;
    padding-right: 27px;
  }
  .purchase-area .net a {
    width: 213px;
  }
  .purchase-area .shop {
    float: right;
    width: 440px;
    margin: 22px 30px 30px 0;
    padding-left: 28px;
  }
  .purchase-area .shop .wrap a {
    width: 100%;
    position: relative;
    height: 86px;
  }
  .purchase-area .shop .wrap a img {
    width: 13px;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .purchase-area .shop .wrap a p {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 0;
    right: 0;
    margin: auto;
    font-size: 20px;
    color: #292929;
  }
  .purchase-area .shop .wrap a:hover img {
    right: 12px;
  }
  .purchase-area .wrap {
    line-height: 0;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  .purchase-area .wrap:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .purchase-area .wrap a {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    border: #dddddd 1px solid;
    line-height: 0;
  }
  .purchase-area .wrap a img {
    width: 100%;
  }
  .purchase-area .wrap a:hover {
    border: #dc2f13 1px solid;
  }
  /*--------------------------------------------------
* Title
* --------------------------------------------------*/
  #title-area {
    padding-top: 65px;
    padding-bottom: 80px;
    /**
  * video
  */
  }
  #title-area h2 {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    color: #333333;
    margin-bottom: 25px;
    font-size: 38px;
    line-height: 1.4;
  }
  #title-area h2 p {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
    opacity: 0;
    letter-spacing: 0.16rem;
  }
  #title-area h2 p:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333333;
    width: 0%;
    height: 2px;
  }
  #title-area h2 p.line1 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line1:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 200ms;
    /* easeInOutQuint */
  }
  #title-area h2 p.line2 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 400ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line2:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 600ms;
    /* easeInOutQuint */
  }
  #title-area h2 p.line3 {
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 800ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #title-area h2 p.line3:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 1000ms;
    /* easeInOutQuint */
  }
  #title-area h2.appear p {
    opacity: 1;
  }
  #title-area h2.appear p:before {
    width: 100%;
  }
  #title-area .wena-image {
    width: 100%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #title-area .wena-image.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner p.lead {
    text-align: center;
    margin-bottom: 50px;
    line-height: 2.1;
    color: #474747;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #title-area .section-inner p.lead.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner p.lead span {
    font-size: 10px;
    position: relative;
    top: -4px;
  }
  #title-area .section-inner p.catch {
    font-size: 28px;
    text-align: center;
    margin: 10px auto 50px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #title-area .section-inner p.catch.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #title-area .section-inner .pre-order-button {
    margin-bottom: 5px;
  }
  #title-area .active-campaign-area {
    margin-bottom: 80px;
  }
  #title-area .video-area iframe {
    line-height: 0;
    width: 100%;
    height: 570px;
  }
  /**
* キャンペーン
*/
  .active-campaign-area {
    width: 100%;
    height: 400px;
    background: #ffc0c0;
  }
  #title-area .active-campaign-area {
    margin-bottom: 80px;
  }
  #title-area .video-area iframe {
    line-height: 0;
    width: 100%;
    height: 570px;
  }
  /**
* キャンペーン
*/
  .active-campaign-area {
    width: 100%;
    height: 400px;
    background: #ffc0c0;
  }
  /*--------------------------------------------------
  * Leather
  * --------------------------------------------------*/
  #leather-area {
    position: relative;
    background: url("../../images/2nd/leather-bg.jpg");
    background-size: cover;
    width:100%;
    height:50%;
  }
  #leather-area .img-wrap {
    height: auto;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  #leather-area h2 {
    padding-top: 90px;
    position: relative;
    color: #FFF;
    line-height: 1;
    padding-bottom: 396px;
    text-align: left;

  }
  #leather-area h2 p {
    margin-bottom: 24px;
    font-size: 48px;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  #leather-area h2 .sub {
    margin-bottom: 0;
    font-size: 20px;
  }
  /*--------------------------------------------------
* Pro
* --------------------------------------------------*/
  #pro-area {
    position: relative;
    background: url("../../images/2nd/prod-bg.jpg") top left repeat;
  }
  #pro-area .img-wrap {
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
  }
  #pro-area .section-inner {
    position: relative;
  }
  #pro-area h2 {
    padding-top: 55px;
    position: relative;
    color: #FFF;
    line-height: 1;
    padding-bottom: 396px;
  }
  #pro-area h2 p {
    margin-bottom: 24px;
    font-size: 48px;
    letter-spacing: 0.1rem;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  #pro-area h2 .sub {
    margin-bottom: 0;
    font-size: 20px;
  }
  #pro-area .img-area {
    position: absolute;
    top: 0;
    height: 120%;
    width: 100%;
    min-width: 1000px;
    max-width: 1280px;
    margin: auto;
    left: 0;
    right: 0;
    margin-top: 187px;
    background: url("../../images/2nd/pro.png") center center no-repeat;
    background-size: contain;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-area .img-area.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-area .badge {
    position: absolute;
    background: #d62b0f;
    border-radius: 50%;
    top: 40px;
    right: 0;
    font-size: 0;
    width: 174px;
    height: 174px;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
  }
  #pro-area .badge.appear {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  #pro-area .badge .inner {
    position: absolute;
    top: 49%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #pro-area .badge p {
    text-align: center;
    color: #FFF;
    position: relative;
    display: inline-block;
  }
  #pro-area .badge p:before {
    content: '';
    height: 1px;
    background: #FFF;
    width: 100%;
    bottom: 0;
    position: absolute;
  }
  #pro-area .badge .date {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    margin-bottom: 5px;
  }
  #pro-area .badge .line2 {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 10px;
    font-size: 22px;
  }
  #pro-area .badge .line3 {
    font-size: 24px;
    line-height: 1.3;
  }
  #pro-info-area {
    padding-bottom: 40px;
  }
  #pro-info-area .section-inner {
    position: relative;
  }
  #pro-info-area .section-inner .info-wrap {
    height: 883px;
    margin-bottom: 80px;
  }
  #pro-info-area .section-inner .info-wrap > p {
    position: absolute;
    line-height: 1.9;
    letter-spacing: 0.08rem;
    font-size: 14px;
    color: #474747;
    z-index: 1;
    text-align: left;
  }
  #pro-info-area .section-inner .info-wrap h3 {
    position: absolute;
    font-size: 34px;
    font-weight: normal;
    top: 125px;
    left: 540px;
    color: #292929;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    text-align: left;
    z-index: 2;
    white-space: nowrap;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .info-wrap h3.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .image1 {
    position: absolute;
    width: 794px;
    top: 63px;
    left: -140px;
  }
  #pro-info-area .section-inner .image1 img {
    width: 100%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .image1 img.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .image2 {
    position: absolute;
    top: 522px;
    left: 520px;
    width: 480px;
    text-align: right;
  }
  #pro-info-area .section-inner .image2 img {
    width: 100%;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .image2 img.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .text1 {
    top: 256px;
    left: 700px;
    width: 310px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .text1.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .section-inner .text2 {
    top: 650px;
    left: 0;
    width: 480px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #pro-info-area .section-inner .text2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #pro-info-area .smart-detail {
    text-align: right;
    margin: 0 0 50px auto;
    top: 10px;
    display: block;
  }
  #pro-info-area .smart-detail p {
    display: inline-block;
    border-bottom: 1px solid #787878;
    padding-right: 20px;
    font-size: 14px;
    position: relative;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #pro-info-area .smart-detail p .arrow {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 6px;
    height: 9px;
    position: absolute;
    right: 6px;
    top: 5px;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
  .products-area {
    display: inline-block;
    zoom: 100%;
    display: block;
    margin-bottom: 80px;
    margin-top: 80px;
  }
  .products-area:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .products-area .product {
    width: 480px;
    position: relative;
  }
  .products-area .product .wena {
    display: block;
    margin: 0 auto 45px;
    width: 266px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  .products-area .product .wena.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  .products-area .product .text-area {
    position: absolute;
    top: 180px;
    text-align: left;
    left: 320px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  .products-area .product .text-area.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  .products-area .product .text-area .name {
    color: #292929;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    font-size: 18px;
  }
  .products-area .product .text-area .info {
    color: #292929;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    font-size: 16px;
  }
  .products-area .product .text-area .info span {
    font-size: 12px;
  }
  .products-area .product a {
    display: block;
    position: relative;
    width: 100%;
    height: 80px;
    font-size: 0;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .products-area .product a img {
    width: 11px;
    position: absolute;
    top: 50%;
    right: 18px;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .products-area .product a p {
    padding-top: 27px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 3px;
    font-size: 22px;
  }
  /* .products-area .silver a p{
    padding-top: 15px;
  } */
  .products-area .product a p span {
    font-size: 24px;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  .products-area .product a p.sub {
    position: relative;
    padding-top: 0;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    font-size: 16px;
    display: inline-block;
  }
  .products-area .product a p.sub:before, .products-area .product a p.sub:after {
    content: '';
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 0ms;
    /* easeInOutQuint */
    position: absolute;
    height: 1px;
    top: 61%;
    width: 0;
    background: #bbbbbb;
  }
  .products-area .product a p.sub:before {
    left: 110%;
  }
  .products-area .product a p.sub:after {
    right: 110%;
  }
  .products-area .product a:hover {
    opacity: 0.8;
  }
  .products-area .product a:hover img {
    right: 12px;
  }
  .products-area .product a.appear p.sub:before, .products-area .product a.appear p.sub:after {
    width: 115px;
  }
  .products-area .silver {
    float: left;
  }
  .products-area .silver a {
    background: #e4e4e4;
    background: #e4e4e4;
    background: linear-gradient(to bottom, #e4e4e4 0%, #d2d2d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#dcdcdc',GradientType=0 );
  }
  .products-area .silver a p {
    color: #484848;
  }
  .products-area .silver a p.sub:before, .products-area .silver a p.sub:after {
    background: #727272;
  }
  .products-area .black {
    float: right;
  }
  .products-area .black .wena,
  .products-area .black .text-area {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 160ms;
    /* easeOutQuint */
  }
  .products-area .black a {
    background: #373737;
    background: linear-gradient(to bottom, #373737 0%, #262626 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#262626',GradientType=0 );
  }
  .products-area .black a p {
    color: #FFF;
  }
  /*--------------------------------------------------
* Func area
* --------------------------------------------------*/
  #functions-area {
    background: #f8f8f8;
    padding-top: 55px;
    padding-bottom: 50px;
  }
  #functions-area h2 {
    font-size: 28px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 25px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #functions-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .func-wrap {
    font-size: 0;
    margin-bottom: 50px;
    vertical-align: top;
  }
  #functions-area .func-wrap .func {
    vertical-align: top;
    display: inline-block;
    width: 308px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #functions-area .func-wrap .func.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .func-wrap .func .image-area {
    margin-bottom: 10px;
  }
  #functions-area .func-wrap .func .image-area img {
    width: 100%;
  }
  #functions-area .func-wrap .func .text-area .title-area {
    position: relative;
    border-bottom: 1px solid #bfbfbf;
  }
  #functions-area .func-wrap .func .text-area .title-area p {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    text-align: left;
    padding-left: 55px;
    color: #292929;
    line-height: 1;
  }
  #functions-area .func-wrap .func .text-area .title-area .icon {
    position: absolute;
    left: 0;
  }
  #functions-area .func-wrap .func .text-area .title-area .name {
    font-size: 14px;
    letter-spacing: 0.1rem;
    padding-bottom: 5px;
  }
  #functions-area .func-wrap .func .text-area .title-area .title {
    font-size: 24px;
    padding-bottom: 11px;
  }
  #functions-area .func-wrap .func .text-area .title-area .title span {
    font-size: 14px;
    position: relative;
    top: -8px;
  }
  #functions-area .func-wrap .func .text-area .text-body {
    padding-top: 12px;
    font-size: 14px;
    color: #474747;
    line-height: 1.8;
    text-align: left;
  }
  #functions-area .func-wrap .func .text-area .text-body img {
    margin-top: 10px;
    width: 100%;
  }
  #functions-area .func-wrap .func .text-area .text-body > p span {
    font-size: 11px;
    position: relative;
    top: -3px;
  }
  #functions-area .func-wrap .func .text-area .text-body a {
    display: inline-block;
    text-align: right;
    margin-top: 15px;
    float: right;
  }
  #functions-area .func-wrap .func .text-area .text-body a p {
    position: relative;
    padding-right: 20px;
  }
  #functions-area .func-wrap .func .text-area .text-body a p:after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #474747;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #functions-area .func-wrap .func .text-area .text-body a p span {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    width: 6px;
    height: 9px;
    position: absolute;
    right: 5px;
    top: 45%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url("../../images/arrow-right-g.svg") top left no-repeat;
    background-size: contain;
  }
  #functions-area .func-wrap .func .text-area .text-body a:hover span {
    right: 0;
  }
  #functions-area .func-wrap .func .text-area .text-body a:hover p:after {
    content: '';
    background: #bfbfbf;
  }
  #functions-area .func-wrap .wallet .icon {
    width: 42px;
    top: 5px;
  }
  #functions-area .func-wrap .notification {
    margin: 0 38px;
  }
  #functions-area .func-wrap .batteryless {
    margin: 0 0 0 20px;
  }
  #functions-area .func-wrap .waterploof {
    margin: 0 0 0 20px;
  }
  #functions-area .func-wrap .easychange {
    margin: 0 0 0 20px;
  }
  #functions-area .func-wrap .notification .icon {
    width: 39px;
    top: 1px;
  }
  #functions-area .func-wrap .activity .icon {
    top: 2px;
    width: 45px;
  }
  #functions-area .func-wrap .walletleather .icon {
    width: 42px;
    top: 5px;
  }
  #functions-area .func-wrap .batteryless .icon {
    width: 42px;
    top: 5px;
  }
  #functions-area .func-wrap .waterploof .icon {
    width: 34px;
  }
  #functions-area .func-wrap .easychange .icon {
    width: 38px;
  }
  #functions-area .scene-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #functions-area .scene-area h2 {
    text-align: center;
    font-size: 28px;
    line-height: 1.4;
  }
  #functions-area .scene-area .scene-wrap {
    font-size: 0;
    padding-bottom: 50px;
  }
  #functions-area .scene-area .scene-wrap .scene {
    vertical-align: top;
    display: inline-block;
    width: 330px;
    position: relative;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #functions-area .scene-area .scene-wrap .scene.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #functions-area .scene-area .scene-wrap .scene .image-area img {
    width: 100%;
  }
  #functions-area .scene-area .scene-wrap .scene .image-area .plus {
    position: absolute;
    bottom: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: url("../../images/plus.svg") top left no-repeat;
    background-size: contain;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 388px;
    width: 318px;
    opacity: 0;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: rgba(255, 255, 255, 0.7);
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    width: 260px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p {
    color: #292929;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    font-size: 26px;
    text-align: left;
    margin-bottom: 15px;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner > p span {
    font-size: 18px;
    margin-right: 4px;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a {
    display: block;
    border: #494949 1px solid;
    position: relative;
    padding: 13px 0;
    margin-top: 28px;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a:hover {
    background: #494949;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a:hover p {
    color: #FFF;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a p {
    font-size: 16px;
    text-align: center;
    color: #292929;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a span {
    width: 10px;
    line-height: 0;
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #functions-area .scene-area .scene-wrap .scene .text-area .inner a span img {
    width: 100%;
  }
  #functions-area .scene-area .scene-wrap .scene:hover .text-area {
    opacity: 1;
  }
  #functions-area .scene-area .scene-wrap .scene:hover .image-area .plus {
    opacity: 0;
  }
  /*--------------------------------------------------
* Active Area
* --------------------------------------------------*/
  #active-area-3rd .active-area {
    padding-top: 760px;
    position: relative;
    margin-bottom: 40px;
    margin-top: -380px;
  }
  #active-area-3rd .active-area h2 {
    color: #FFF;
    font-size: 38px;
    position: absolute;
    top: 176px;
    left: 370px;
    letter-spacing: 0.18rem;
    font-weight: normal;
    text-align: left;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area-3rd .active-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area p {
    position: absolute;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    width: 510px;
    left: 0;
    top: 510px;
    font-size: 16px;
    color: #474747;
    line-height: 2;
    text-align: left;
  }
  #active-area-3rd .active-area p.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area p span {
    font-size: 11px;
    position: relative;
    top: -3px;
  }
  #active-area-3rd .active-area .image-1 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    position: absolute;
    width: 973px;
    left: -136px;
    top: 0;
  }
  #active-area-3rd .active-area .image-1.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-1 img {
    width: 100%;
  }
  #active-area-3rd .active-area .image-2 {
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    position: absolute;
    width: 492px;
    top: 398px;
    left: 528px;
  }
  #active-area-3rd .active-area .image-2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area-3rd .active-area .image-2 img {
    width: 100%;
  }
  #active-area {
    padding-bottom: 70px;
  }
  #active-area .active-image {
    height: 540px;
    position: relative;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area .active-image.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area .active-image .left,
  #active-area .active-image .right {
    position: absolute;
    height: 100%;
    top: 0;
  }
  #active-area .active-image .left {
    width: 66.5625%;
    background: url("../../images/2nd/active1.jpg") center center no-repeat;
    background-size: cover;
    left: 0;
  }
  #active-area .active-image .right {
    width: 33.4375%;
    background: url("../../images/2nd/active2.jpg") center center no-repeat;
    background-size: cover;
    right: 0;
  }
  #active-area h2 {
    font-size: 48px;
    color: #474747;
    letter-spacing: 0.2rem;
    margin-bottom: 40px;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
    padding-top: 40px;
  }
  #active-area h2.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area h2 p {
    margin-top: 5px;
    letter-spacing: 0.2rem;
    font-size: 20px;
  }
  #active-area .text {
    width: 650px;
    text-align: left;
    letter-spacing: 0.06rem;
    line-height: 2.2;
    color: #474747;
    margin: 0 auto 40px;
    font-size: 16px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area .text.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area h3 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area h3.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area h3 > div {
    background: #dc2f13;
    display: inline-block;
    position: relative;
    color: #FFF;
    padding: 2px 16px;
    letter-spacing: 0.1rem;
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
  }
  #active-area h3 > div p {
    display: inline-block;
    font-weight: bold;
  }
  #active-area h3 > div span {
    display: inline-block;
    width: 9px;
    line-height: 0;
    margin: 0 12px 0 19px;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #active-area h3 > div span img {
    width: 100%;
  }
  #active-area .pre-order {
    display: inline-block;
    color: #dc2f13;
    margin-top: 35px;
    font-size: 18px;
    letter-spacing: 0.08rem;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #active-area .pre-order.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #active-area .pre-order span {
    display: inline-block;
    width: 7px;
    line-height: 0;
    margin: 0 12px 0 7px;
    transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #active-area .pre-order span img {
    width: 100%;
  }
  #active-area .pre-order:hover {
    opacity: 0.7;
  }
  #active-area .pre-order:hover span {
    margin: 0 7px 0 12px;
  }
  /*--------------------------------------------------
* Smart Area
* --------------------------------------------------*/
  #smart-area h2 {
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 0.1rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  #smart-area .wrap {
    margin-bottom: 22px;
    vertical-align: top;
    display: inline-block;
    zoom: 100%;
    display: block;
  }
  #smart-area .wrap:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #smart-area .wrap h3 {
    font-size: 22px;
    position: relative;
    margin-bottom: 12px;
    line-height: 1;
    text-align: center;
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
  }
  #smart-area .wrap h3:before, #smart-area .wrap h3:after {
    content: '';
    height: 1px;
    background: #616161;
    width: 121px;
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #smart-area .wrap h3:after {
    right: 0;
  }
  #smart-area .wrap .heartrate {
    margin: 0 37px;
  }
  #smart-area .wrap .smart {
    vertical-align: top;
    display: inline-block;
    float: left;
    width: 308px;
    transition: all 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;
    /* easeOutQuint */
    -webkit-transform: translate(0, 80px);
    transform: translate(0, 80px);
    will-change: transform, opacity;
    opacity: 0;
  }
  #smart-area .wrap .smart.appear {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  #smart-area .wrap .image-area {
    line-height: 0;
    margin-bottom: 13px;
  }
  #smart-area .wrap .image-area img {
    width: 100%;
  }
  #smart-area .wrap .text-area p {
    text-align: left;
    font-size: 18px;
    line-height: 1.5;
  }
  #smart-area .wrap .text-area p span {
    font-size: 12px;
    margin-right: 5px;
    margin-left: 2px;
    position: relative;
    top: -5px;
  }
  #smart-area .smart-detail {
    text-align: right;
    margin: 0 0 50px auto;
    display: inline-block;
  }
  #smart-area .smart-detail p {
    display: inline-block;
    border-bottom: 1px solid #787878;
    padding-right: 27px;
    position: relative;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #smart-area .smart-detail p img {
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 6px;
    position: absolute;
    right: 6px;
    top: 7px;
  }
  #smart-area .smart-detail:hover p img {
    right: 2px;
  }
  #smart-area .products-area {
    margin-top: 80px;
  }
  #smart-area .products-area img.wena {
    width: 306px;
    margin-bottom: 50px;
  }
  #smart-area .products-area .product {
    float: none;
    margin: 0 auto;
    position: relative;
  }
  #smart-area .products-area .left {
    float: left;
  }
  #smart-area .products-area .right{
    float: right;
  }
  #smart-area .products-area .product .text-area {
    position: absolute;
    display: block;
    top: 184px;
    left: 416px;
    text-align: left;
  }
  #smart-area .products-area .product .text-area-two-columns {
    position: absolute;
    display: block;
    top: 184px;
    left: 360px;
    text-align: left;
  }
  #smart-area .products-area .product .text-area p {
    white-space: nowrap;
  }
  #smart-area .products-area .product a .sub {
    padding-top: 0;
    margin-bottom: 0;
  }
  /*--------------------------------------------------
* Campaign
* --------------------------------------------------*/
  #campaign-area {
    padding-bottom: 1px;
    background: #f1f1f1;
    padding-top: 60px;
  }
  #campaign-area .section-inner {
    position: relative;
  }
  #campaign-area h2 {
    margin-top: -94px;
    margin-bottom: 40px;
  }
  #campaign-area h2 p {
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: #d8d8d8;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 2rem;
  }
  #campaign-area .wrapp {
    position: relative;
  }
  #campaign-area .campaign-wrap {
    font-size: 0;
    display: table;
    background: #FFF;
    box-sizing: border-box;
    border: #dc2f13 5px solid;
    text-align: left;
    margin-bottom: 40px;
    width: 100%;
  }
  #campaign-area .campaign-wrap .campaign-sub {
    display: table-cell;
    position: relative;
    width: 253px;
    height: 100%;
    background: #dc2f13;
    border: #FFF 1px solid;
    vertical-align: middle;
  }
  #campaign-area .campaign-wrap .campaign-body {
    padding-top: 10px;
    display: table-cell;
    background: #FFF;
    vertical-align: middle;
    border-left: #dc2f13 5px solid;
  }
  #campaign-area p.sub {
    position: relative;
    white-space: nowrap;
    font-size: 28px;
    font-weight: bold;
    color: #FFF;
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    text-align: left;
    padding: 0 18px;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  #campaign-area p.sub span {
    font-size: 40px;
  }
  #campaign-area .badge {
    position: absolute;
    background: #dc2f13;
    border-radius: 52%;
    right: -25px;
    top: -46px;
    width: 138px;
    height: 0;
    padding-top: 138px;
  }
  #campaign-area .badge p {
    white-space: nowrap;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    color: #FFF;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 24px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  #campaign-area .badge p:before {
    content: '';
    position: absolute;
    height: 2px;
    width: 76%;
    background: #FFF;
    top: 54%;
    left: 0;
    right: 0;
    margin: auto;
  }
  #campaign-area .badge p span.date {
    font-size: 34px;
    display: inline;
    letter-spacing: 0;
    font-family: 'barlow-bold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 700;
  }
  #campaign-area .badge p span {
    display: block;
  }
  #campaign-area h3 {
    font-family: 'barlow', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 300;
    color: #dc2f13;
    margin-bottom: 18px;
    text-align: left;
    padding: 0px 10px 0px 10px;
    background: #FFF;
    margin: 0 0 0 26px;
  }
  #campaign-area h3 p {
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 1.1;
    display: inline-block;
    letter-spacing: 0.06rem;
    padding: 0 0;
    position: relative;
    font-weight: bold;
    opacity: 0;
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
  }
  #campaign-area h3 p:before {
    content: '';
    width: 0%;
    height: 3px;
    background: #dc2f13;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #campaign-area h3 p.line1 {
    font-size: 80px;
    letter-spacing: 0;
    white-space: nowrap;
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area h3 p.line1:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 200ms;
    /* easeInOutQuint */
  }
  #campaign-area h3 p.line2 {
    font-weight: bold;
    letter-spacing: 0;
    font-size: 40px;
    white-space: nowrap;
    padding-bottom: 6px;
    transition: all 700ms cubic-bezier(0.23, 1, 0.32, 1) 400ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area h3 p.line2:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 600ms;
    /* easeInOutQuint */
  }
  #campaign-area h3 p.line3:before {
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 500ms;
    /* easeInOutQuint */
  }
  #campaign-area h3.appear p {
    opacity: 1;
  }
  #campaign-area h3.appear p:before {
    width: 100%;
  }
  #campaign-area p.lead {
    color: #333333;
    text-align: left;
    position: relative;
    font-size: 17px;
    line-height: 1.8;
    margin: 5px 0 25px 43px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  #campaign-area h4 {
    color: #FFF;
    background: #353535;
    line-height: 1;
    font-size: 20px;
    padding: 10px 0;
    margin-bottom: 30px;
    letter-spacing: 0.06rem;
  }
  #campaign-area .steps {
    display: inline-block;
    zoom: 100%;
    display: block;
    text-align: center;
    font-size: 0;
    padding-bottom: 40px;
    vertical-align: top;
  }
  #campaign-area .steps:after {
    content: url("data:image/gif;base64,R0lGODlhZAAUAIAAAAD//wAAACH5BAEAAAAALAAAAABkABQAAAIshI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKZwUAOw==");
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  #campaign-area .steps .step {
    display: inline-block;
    width: 80%;
    vertical-align: top;
    margin: 0 30px 0 0;
  }
  #campaign-area .steps .step span.note {
    color: #838383;
    display: block;
    font-size: 14px;
  }
  #campaign-area .steps .step:last-child {
    margin: 0;
  }
  #campaign-area .steps .step h5 {
    text-align: left;
    color: #dc2f13;
    font-size: 24px;
    padding-bottom: 5px;
    font-family: 'barlow-semibold', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    margin-bottom: 20px;
    border-bottom: 2px solid #dc2f13;
  }
  #campaign-area .steps .step p {
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    color: #474747;
    letter-spacing: 0.04rem;
  }
  #campaign-area .steps .step .tw-follow-button {
    display: block;
    background: #56a4df;
    font-size: 14px;
    width: 252px;
    text-align: center;
    color: #FFF;
    border-radius: 12px;
    position: relative;
    line-height: 1;
    padding: 15px 0;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #campaign-area .steps .step .tw-follow-button:hover {
    opacity: 0.7;
  }
  #campaign-area .steps .step .tw-follow-button:after {
    content: '';
    position: absolute;
    background: url("../../images/arrow-right.svg") top left no-repeat;
    display: inline-block;
    right: 20px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 8px;
    height: 14px;
    background-size: contain;
  }
  #campaign-area .steps .step .tw-follow-button .icon {
    width: 19px;
    line-height: 0;
    position: relative;
    margin-right: 10px;
    display: inline-block;
    top: 1px;
    margin-left: -20px;
  }
  #campaign-area .steps .step .tw-follow-button .icon img {
    width: 100%;
  }
  #campaign-area .steps .step iframe {
    width: 100% !important;
  }
  #campaign-area .steps .step.exp {
    background: #FFF;
    border-radius: 7px;
    overflow: hidden;
  }
  #campaign-area .steps .step.exp h5 {
    border: none;
    background: #c9c9c9;
    color: #FFF;
    font-size: 16px;
    letter-spacing: 0.06rem;
    text-align: center;
    line-height: 1;
    padding: 10px 0 10px;
  }
  #campaign-area .steps .step.exp p {
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.08rem;
    margin-bottom: 14px;
  }
  #campaign-area .steps .step.exp p .hashtags {
    color: #3a95ea;
    display: block;
  }
  #campaign-area .finished {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(41, 41, 41, 0.9);
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  #campaign-area .finished p {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    font-weight: bold;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    color: #FFF;
    line-height: 2;
    letter-spacing: 0.1rem;
    font-size: 24px;
  }
  /*--------------------------------------------------
* Twitter Widget
* --------------------------------------------------*/
  #twitter-area {
    background: #f1f1f1;
    padding-bottom: 30px;
  }
  #twitter-area .section-inner {
    width: 1000px;
    margin: 0 auto;
    background: #FFF;
    padding: 15px 0;
  }
  #twitter-area .section-inner iframe {
    width: 100% !important;
    max-width: 550px !important;
    height: 550px !important;
    min-height: 500px !important;
  }
  /*--------------------------------------------------
* Term
* --------------------------------------------------*/
  #term-area {
    background: #fff;
    padding-bottom: 50px;
    padding-top: 55px;
  }
  #term-area .section-inner {
    width: 1000px;
    margin: 0 auto;
    text-align: left;
  }
  #term-area .section-inner h3 {
    display: inline-block;
    position: relative;
  }
  #term-area .section-inner h3 p {
    line-height: 0.9;
    font-size: 22px;
    padding-bottom: 5px;
    color: #2f2f2f;
  }
  #term-area .section-inner h3:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    content: '';
    height: 1px;
    transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1) 100ms;
    /* easeInOutQuint */
    background: #070001;
  }
  #term-area .section-inner h3.appear:before {
    width: 100%;
  }
  #term-area .section-inner h4 {
    font-size: 18px;
    line-height: 0.9;
    margin-bottom: 8px;
    color: #2f2f2f;
    margin-top: 25px;
  }
  #term-area .section-inner > p {
    font-size: 14px;
    color: #4d4d4d;
  }
  #term-area .section-inner > p:last-child {
    margin-bottom: 15px;
  }
  #term-area .section-inner p.note {
    color: #838383;
    font-size: 12px;
    margin-top: 5px;
  }
  #term-area .section-inner p.note a {
    text-decoration: underline;
  }
  #term-area .section-inner .links {
    margin-top: 50px;
    border-top: #bfbfbf 1px solid;
    padding-top: 5px;
    text-align: center;
  }
  #term-area .section-inner .links a {
    display: inline-block;
    width: 23.3%;
    font-size: 12px;
    color: #4d4d4d;
    text-align: left;
    position: relative;
    padding-left: 15px;
  }
  #term-area .section-inner .links a span {
    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    /* easeOutQuint */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #term-area .section-inner .links a:hover span {
    -webkit-transform: translate(4px, -50%);
    transform: translate(4px, -50%);
  }
  /*--------------------------------------------------
* SNS
* --------------------------------------------------*/
  #sns-area {
    background: #f1f1f1;
    padding-top: 60px;
    padding-bottom: 70px;
  }
  #sns-area h3 {
    font-family: 'barlow-medium', "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium",   "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 20px;
  }
  #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 {
    -webkit-transform: rotate(360deg);
    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 */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  #sns-area .icons .facebook {
    width: 22px;
  }
  #sns-area .icons .twitter {
    width: 25px;
  }
  #sns-area .icons .instagram {
    width: 23px;
  }
  @-webkit-keyframes top-scroll {
    0% {
      -webkit-transform: translate(0, -4px);
      transform: translate(0, -4px);
    }
    45% {
      -webkit-transform: translate(0, 3px);
      transform: translate(0, 3px);
    }
    55% {
      -webkit-transform: translate(0, 3px);
      transform: translate(0, 3px);
    }
    100% {
      -webkit-transform: translate(0, -4px);
      transform: translate(0, -4px);
    }
  }
  @keyframes top-scroll {
    0% {
      -webkit-transform: translate(0, -4px);
      transform: translate(0, -4px);
    }
    45% {
      -webkit-transform: translate(0, 3px);
      transform: translate(0, 3px);
    }
    55% {
      -webkit-transform: translate(0, 3px);
      transform: translate(0, 3px);
    }
    100% {
      -webkit-transform: translate(0, -4px);
      transform: translate(0, -4px);
    }
  }
}