/*============================
mixin
============================*/
/*============================
easing
============================*/
/*color*/
/*size*/
@media screen and (min-width: 768px) {
  body {
    font-family: 'Noto Sans JP', sans-serif;
  }
  body #loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    display: block;
    background: #d60a32;
  }
  body .btn_shop a {
    border: 2px solid #000000;
    display: block;
    position: relative;
    width: 25vw;
    padding: 2.2vw 0 2.2vw;
    font-size: 1.2vw;
    font-weight: 700;
    text-align: center;
    color: #000000;
    line-height: 0;
    transition: background-color 0.3s;
  }
  body .btn_shop a:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.3vw;
    margin: -0.35vw 0 0 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.8vw 0.5vw 0 0.5vw;
    border-color: #000000 transparent transparent transparent;
  }
  body .slide.active .ttl:after {
    display: none;
  }
  body .slide .ttl {
    position: relative;
  }
  body .slide .ttl:before, body .slide .ttl:after {
    position: absolute;
    top: 50%;
    display: block;
    content: "";
    background-color: #ffffff;
  }
  body .slide .ttl:before {
    right: 1vw;
    margin-top: -0.1vw;
    width: 1vw;
    height: 0.2vw;
  }
  body .slide .ttl:after {
    right: 1.4vw;
    width: 0.2vw;
    height: 1vw;
    margin-top: -0.5vw;
  }
  body .slide ul.list {
    display: none;
  }
  body #header.cmn {
    position: absolute;
  }
  body #header.cmn .inner .logo {
    width: 20.4vw;
    height: 5.14vw;
    top: 6.64vw;
    left: 4.2vw;
  }
  body #header.cmn .inner .logo a {
    width: 14vw;
    position: absolute;
    top: 0.55vw;
    left: 6vw;
  }
  body #header.cmn .inner .menu {
    position: fixed;
  }
  body #header.cmn .inner .menu.active {
    background: #d60a32;
  }
  body #main {
    padding: 0 0 7vw;
  }
  body #main:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 50%;
    height: 100%;
    background: #d60a32;
  }
  body .headline {
    text-align: center;
  }
  body .headline .en, body .headline .jp {
    display: block;
  }
  body .headline .en {
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: 0.4vw;
  }
  body .headline .jp {
    font-size: 1.4vw;
    font-weight: 400;
    margin: 0.6vw 0 0;
  }
  body .inner {
    height: 100%;
  }
  body #kv {
    height: 65vw;
  }
  body #kv .inner .photo {
    position: absolute;
    top: 6.5vw;
    right: 4.5vw;
    z-index: 1;
    width: 65vw;
    border: 2px solid #000000;
  }
  body #kv .inner .item {
    position: absolute;
    top: 15.5vw;
    left: 7.5vw;
    z-index: 2;
    width: 26vw;
  }
  body #keep .inner .ttl {
    font-size: 2.2vw;
    text-align: center;
  }
  body #keep .inner ul.list {
    width: 58.5vw;
    margin: 2vw auto 0;
    display: flex;
    justify-content: space-between;
  }
  body #keep .inner ul.list li {
    width: 18vw;
  }
  body #keep .inner ul.list li figure img {
    border: 2px solid #000000;
  }
  body #keep .inner ul.list li figure figcaption {
    margin: 1.4vw 0 0;
    font-size: 1.4vw;
    text-align: center;
  }
  body #products {
    margin: 8vw 0 0;
  }
  body #products .inner .cnt01 {
    margin: 5vw 0 0;
  }
  body #products .inner .cnt01 .box {
    display: flex;
  }
  body #products .inner .cnt01 .box .left, body #products .inner .cnt01 .box .right {
    width: 50%;
    padding: 0 4vw;
  }
  body #products .inner .cnt01 .box .left img {
    border: 2px solid #000000;
  }
  body #products .inner .cnt01 .box .right {
    position: relative;
  }
  body #products .inner .cnt01 .box .right .txt01, body #products .inner .cnt01 .box .right .txt02, body #products .inner .cnt01 .box .right .subttl, body #products .inner .cnt01 .box .right .sup {
    color: #d60a32;
  }
  body #products .inner .cnt01 .box .right .txt01 {
    font-size: 1.4vw;
  }
  body #products .inner .cnt01 .box .right .txt02 {
    font-size: 2vw;
    margin: 0.6vw 0 0;
    font-weight: 700;
  }
  body #products .inner .cnt01 .box .right .txt02 .sup {
    font-size: 1vw;
    vertical-align: super;
  }
  body #products .inner .cnt01 .box .right .txt03 {
    font-size: 1.1vw;
    margin: 0.4vw 0 0;
  }
  body #products .inner .cnt01 .box .right .subttl {
    width: 39vw;
    margin: 2vw 0 0;
  }
  body #products .inner .cnt01 .box .right .sup {
    font-size: 1.1vw;
    margin: 1vw 0 0;
  }
  body #products .inner .cnt01 .box .right ul.list {
    margin: 2vw 0 0;
  }
  body #products .inner .cnt01 .box .right ul.list li {
    font-size: 1.1vw;
    line-height: 1.6;
    list-style: disc;
    margin: 0 0 0 1.6vw;
  }
  body #products .inner .cnt01 .box .right .btn_shop {
    position: absolute;
    bottom: 0;
  }
  body #products .inner .cnt02 {
    margin: 5vw 0 0;
  }
  body #products .inner .cnt02 .ttl {
    font-size: 2.2vw;
    text-align: center;
  }
  body #products .inner .cnt02 .box {
    width: 58vw;
    margin: 2vw auto 0;
    display: flex;
    justify-content: space-between;
  }
  body #products .inner .cnt02 .box .left, body #products .inner .cnt02 .box .right {
    width: 27vw;
  }
  body #products .inner .cnt02 .box figure img {
    border: 2px solid #000000;
  }
  body #products .inner .cnt02 .box figure figcaption {
    margin: 1vw 0 0;
    font-size: 1.4vw;
    font-weight: 700;
    text-align: center;
  }
  body #products .inner .cnt03 {
    width: 44vw;
    margin: 5vw auto 0;
  }
  body #products .inner .cnt03 + .cnt03 {
    margin: 1vw auto 0;
  }
  body #products .inner .cnt03 .ttl {
    font-size: 1.2vw;
    padding: 0.4vw 0.8vw 0.6vw;
    background: #000000;
    color: #ffffff;
  }
  body #products .inner .cnt03 .box {
    display: flex;
    justify-content: space-between;
    margin: 0.8vw 0 0;
  }
  body #products .inner .cnt03 .box .left, body #products .inner .cnt03 .box .right {
    width: 45%;
  }
  body #products .inner .cnt03 .box .right .txt {
    margin: 1vw 0 2vw;
  }
  body #products .inner .cnt03 .box .right .txt + .subttl {
    margin: 4vw 0 0;
  }
  body #products .inner .cnt03 .inner {
    display: none;
  }
  body #products .inner .cnt03 .subttl {
    margin: 1.4vw 0 0;
    font-size: 1.1vw;
    font-weight: 700;
  }
  body #products .inner .cnt03 .txt {
    margin: 0.8vw 0 0;
    font-size: 0.8vw;
    line-height: 1.4;
  }
  body #products .inner .cnt03 .txt02 {
    margin: 0.4vw 0 0;
    font-size: 0.8vw;
    line-height: 1.4;
  }
  body #howto {
    margin: 8vw 0 0;
  }
  body #howto .inner .cnt {
    width: 90vw;
    border: 2px solid #000000;
    background: #ffffff;
    margin: 5vw auto 0;
    padding: 4vw 12vw;
  }
  body #howto .inner .cnt .ttl {
    font-size: 1.6vw;
    font-weight: 700;
    text-align: center;
  }
  body #howto .inner .cnt .notes {
    font-size: 1.2vw;
    line-height: 1.6;
    text-align: center;
    margin: 1vw 0 0;
  }
  body #howto .inner .cnt ul.steps {
    padding: 3vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step + li.step {
    background: url(../img/howto_advice_line.png) left top repeat-x;
  }
  body #howto .inner .cnt ul.steps li.step.step01 {
    padding: 0 0 3vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 {
    padding: 0 0 5.4vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box {
    padding: 2vw 0 2vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box .left img {
    width: 12vw;
  }
  body #howto .inner .cnt ul.steps li.step.step03 .box {
    padding: 5vw 0 2vw;
  }
  body #howto .inner .cnt ul.steps li.step .box {
    display: flex;
  }
  body #howto .inner .cnt ul.steps li.step .box .left {
    width: 47%;
  }
  body #howto .inner .cnt ul.steps li.step .box .left img {
    width: 20vw;
    margin: 0 auto;
  }
  body #howto .inner .cnt ul.steps li.step .box .right {
    width: 53%;
    position: relative;
    padding: 0 0 0 3vw;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .num {
    position: absolute;
    left: 0;
    top: 4vw;
    width: 4.2vw;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .txt {
    position: relative;
    font-size: 1.3vw;
    font-weight: 700;
    line-height: 1.75;
    margin: 6vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .ast {
    font-size: 1.1vw;
    line-height: 1.6;
    margin: 2vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice {
    position: relative;
    padding: 4vw 0;
    background-color: #d60a32;
    border-radius: 5px;
  }
  body #howto .inner .cnt ul.steps li.step .advice:before {
    content: "";
    position: absolute;
    left: 0.3vw;
    top: 0.3vw;
    width: 13vw;
    height: 10vw;
    background: url(../img/howto_advice_heading.png) right top no-repeat/cover;
  }
  body #howto .inner .cnt ul.steps li.step .advice:after {
    content: "";
    position: absolute;
    top: -1.6vw;
    right: 4vw;
    width: 1.6vw;
    height: 1.6vw;
    background: url(../img/howto_advice_decoration.png) left top no-repeat;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box {
    display: flex;
    padding: 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box .bad, body #howto .inner .cnt ul.steps li.step .advice ul.box .good {
    width: 50%;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box .bad {
    border-right: 1px solid #ffffff;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box .img {
    width: 18vw;
    margin: 0 auto;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box .ttl {
    font-size: 1.6vw;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.33;
    color: #ffffff;
    text-align: center;
    margin: 1.6vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box .txt {
    font-size: 1.2vw;
    line-height: 1.375;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-align: center;
    padding: 2.3vw 0 0;
  }
  body #movie {
    margin: 8vw 0 0;
  }
  body #movie .inner {
    text-align: center;
  }
  body #movie .inner .ttl {
    font-size: 1.6vw;
    font-weight: 700;
    margin: 4vw 0 0;
  }
  body #movie .inner .txt {
    font-size: 1.25vw;
    line-height: 1.6;
    margin: 3.75vw 0 0;
  }
  body #movie .inner .box {
    display: flex;
    justify-content: space-between;
    width: 66.66667vw;
    margin: 3.75vw auto 0;
  }
  body #movie .inner .box figure {
    width: 31.25vw;
    position: relative;
    cursor: pointer;
  }
  body #movie .inner .box figure figcaption {
    margin: 0 auto 1.25vw;
    font-size: 1.4vw;
    font-weight: 700;
  }
  body #movie .inner .box figure iframe {
    width: 100%;
    height: 31.233vw;
    border: solid 2px #000000;
  }
  body #voice {
    margin: 8vw 0 0;
  }
  body #voice .inner .box {
    position: relative;
    background: #ffffff;
    width: 90.625vw;
    margin: 5.20833vw auto 0;
    padding: 4.16667vw 0;
    overflow: hidden;
    border: solid 0.15625vw #000000;
  }
  body #voice .inner .box .subttl {
    text-align: center;
  }
  body #voice .inner .box .subttl .txt {
    background: #d60a32;
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
    text-align: center;
    padding: 0.3125vw 1.04167vw 0.52083vw;
    font-size: 1.66667vw;
  }
  body #voice .inner .box .img01 {
    width: 44.79167vw;
    margin: 4.16667vw auto 0;
  }
  body #voice .inner .box ul {
    margin: 3.2vw auto 0;
    width: 56.25vw;
  }
  body #voice .inner .box ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  body #voice .inner .box ul li + li {
    margin: 1.14583vw 0 0;
  }
  body #voice .inner .box ul li:nth-child(odd):before {
    content: "";
  }
  body #voice .inner .box ul li:nth-child(odd) p:before {
    left: -1.16vw;
    background: url(../img/voice_txt_l.png) no-repeat 0 0/100%;
  }
  body #voice .inner .box ul li:nth-child(even):after {
    content: "";
  }
  body #voice .inner .box ul li:nth-child(even) p:before {
    right: -1.16vw;
    background: url(../img/voice_txt_r.png) no-repeat 0 0/100%;
  }
  body #voice .inner .box ul li:before, body #voice .inner .box ul li:after {
    z-index: 0;
    top: 0;
    left: 0;
    width: 6.25vw;
    height: 6.25vw;
    background: url(../img/voice_img01.png) no-repeat 0 0/100%;
    display: block;
  }
  body #voice .inner .box ul li p {
    border: 0.15625vw solid #d60a32;
    border-radius: 10px;
    padding: 1.5625vw;
    width: 48.4375vw;
    position: relative;
    font-size: 1.09375vw;
    line-height: 1.4;
    text-align: justify;
  }
  body #voice .inner .box ul li p:before {
    content: "";
    display: block;
    position: absolute;
    top: 2.39583vw;
    width: 1.2vw;
    height: 1.2vw;
  }
  body #voice .inner .box ul li p span {
    float: right;
  }
  body #faq {
    margin: 8vw 0 0;
  }
  body #faq .btn_shop {
    margin: 3vw 0 5.6vw;
  }
  body #faq .btn_shop a {
    margin: 1vw 0 0;
  }
  body #faq .inner .box {
    width: 90vw;
    border: 2px solid #000000;
    background: #ffffff;
    margin: 5vw auto 0;
    padding: 4vw 12vw;
  }
  body #faq .inner .box dl dt {
    margin-left: -5px;
    font-weight: 700;
  }
  body #faq .inner .box .link {
    color: #d60a32;
    font-size: 1.4vw;
    line-height: 1.5;
    margin: 2.6vw 0 0;
  }
  body #faq .inner .box .link a {
    position: relative;
    display: inline-block;
    padding-right: 14px;
    color: #d60a32;
    text-decoration: none;
  }
  body #faq .inner .box .link a:hover:before {
    transform: scaleX(0);
    transform-origin: right top;
  }
  body #faq .inner .box .link a:before {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #d60a32;
    transition: transform 0.3s ease-out;
    transform-origin: left top;
    backface-visibility: hidden;
  }
  body #faq .inner .box .link a:after {
    content: "";
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #d60a32;
    position: absolute;
    top: 50%;
    right: -2px;
    margin-top: -5px;
    transition: right 0.3s ease;
  }
  body #faq .inner .box .section {
    position: relative;
  }
  body #faq .inner .box .section + .section {
    margin: 1vw auto 0;
  }
  body #faq .inner .box .section .ttl {
    padding: 0.6vw 1vw 0.8vw;
    font-size: 1.8vw;
    color: #ffffff;
    background-color: #d60a32;
  }
  body #faq .inner .box .section ul.list {
    padding-bottom: 5px;
    margin: 2.4vw auto 0;
  }
  body #faq .inner .box .section ul.list li {
    margin: 0 0 6.6vw;
  }
  body #faq .inner .box .section ul.list li .question {
    display: flex;
    align-items: center;
    margin: 0 0 1vw;
  }
  body #faq .inner .box .section ul.list li .question:before {
    content: "";
    width: 5vw;
    height: 5vw;
    background: url(../img/faq-icon-q.png) right top no-repeat/cover;
  }
  body #faq .inner .box .section ul.list li .question .text {
    font-size: 1.8vw;
    vertical-align: middle;
    font-weight: 700;
    margin: 0 0 0 1vw;
    width: 60vw;
  }
  body #faq .inner .box .section ul.list li .answer {
    display: flex;
    margin: 0 0 0 6vw;
  }
  body #faq .inner .box .section ul.list li .answer:before {
    content: "";
    width: 2.8vw;
    height: 2.2vw;
    background: url(../img/faq-icon-a.png) right top no-repeat/cover;
  }
  body #faq .inner .box .section ul.list li .answer .text {
    font-size: 1.1vw;
    line-height: 1.75;
    color: #d60a32;
    margin: 0 0 0 1vw;
    width: 56vw;
  }
  body #online {
    float: left;
    width: 100vw;
    background: #ffffff;
    z-index: 1;
    position: relative;
  }
  body #online .inner {
    display: flex;
    width: 90vw;
    margin: 4.5vw auto 4.5vw;
    justify-content: space-between;
  }
  body #online .inner .ttl {
    width: 11.5vw;
    margin: 4vw 0 0 1vw;
  }
  body #online .inner .block {
    width: 80%;
  }
  body #online .inner .block .subttl {
    font-size: 1.3vw;
    padding: 0.8vw 1vw 0.8vw 2.4vw;
    display: inline-block;
  }
  body #online .inner .block .subttl.clear {
    background: url(../img/online_img01.png) left top no-repeat/contain;
  }
  body #online .inner .block .subttl.perl {
    background: url(../img/online_img02.png) left top no-repeat/contain;
  }
  body #online .inner .block ul.list {
    width: 73.2vw;
    display: flex;
    flex-wrap: wrap;
    margin: 0.5vw 0 0 0;
  }
  body #online .inner .block ul.list li {
    width: 14vw;
    border: 0.1vw solid #eeeeee;
    margin: 0 0 0.8vw;
  }
  body #online .inner .block ul.list li:not(:nth-child(5n+1)) {
    margin-left: 0.8vw;
  }
  body #online .inner .block ul.list li.cvr {
    position: relative;
  }
  body #online .inner .block ul.list li.cvr:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
  }
  body #online .inner .block ul.list + .subttl {
    margin: 1vw 0 0;
  }
  body #online .inner .block .annotation {
    font-size: 1vw;
    letter-spacing: -1px;
    margin: 0.6vw 0 0;
  }
  body #float {
    display: none;
  }
  body #float .close {
    position: absolute;
    width: 1.5625vw;
    height: 1.5625vw;
    top: -2.34375vw;
    right: 0;
    cursor: pointer;
  }
  body #float .close:before, body #float .close:after {
    top: -0.26042vw;
    right: 0.78125vw;
    display: block;
    content: "";
    position: absolute;
    width: 0.05208vw;
    height: 2.08333vw;
    background: #ffffff;
  }
  body #float .close:before {
    transform: rotate(45deg);
  }
  body #float .close:after {
    transform: rotate(-45deg);
  }
  body #float .close:hover {
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  body #float {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }
  body #float.show {
    display: block;
    opacity: 1;
    z-index: 9999;
  }
  body #float .bg {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  body #float .contents {
    width: 66.66667vw;
    height: 37.5vw;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  body #float .contents #float_mov {
    width: 100%;
    height: 100%;
  }
  body #float .contents #float_mov iframe {
    width: 100%;
    height: 100%;
  }
  body .modal {
    transition: all .5s ease-out;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(229, 0, 115, 0.9);
    z-index: 9999;
    overflow: scroll;
    opacity: 0;
    visibility: hidden;
  }
  body .modal.active {
    opacity: 1;
    visibility: visible;
  }
  body .modal .close {
    position: absolute;
    top: -40px;
    right: 0px;
    width: 26px;
  }
  body .modal .inner {
    background: #ffffff;
    width: 50vw;
    height: 10vw;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50vw;
    margin: -18vw 0 0 -25vw;
    height: 36vw;
    padding: 6.2vw;
  }
  body .modal .inner .ttl {
    font-size: 2vw;
    font-weight: 700;
    text-align: center;
  }
  body .modal .inner .box {
    display: flex;
    justify-content: space-between;
  }
  body .modal .inner .box .left {
    width: 12vw;
  }
  body .modal .inner .box .left img {
    width: 36%;
    margin: 28% 0 0 21%;
  }
  body .modal .inner .box .right {
    width: 25.5vw;
    margin: 3.5vw 0 0;
  }
  body .modal .inner .box .right .subttl {
    font-weight: 700;
    font-size: 1.2vw;
    margin: 1.6vw 0 0;
  }
  body .modal .inner .box .right .txt {
    font-size: 1vw;
    margin: 1vw 0 0;
    line-height: 1.3;
  }
  body#eng #keep .inner ul.list li figure figcaption {
    min-height: 3.5vw;
    line-height: 1.2;
  }
  body#eng #products {
    margin: 8vw 0 0;
  }
  body#eng #products .inner .cnt01 .box .right .txt01 {
    font-size: 1.3vw;
    line-height: 1.4;
    margin: -0.4vw 0 0;
  }
  body#eng #products .inner .cnt01 .box .right .btn_shop {
    position: static;
    margin: 1.8vw 0 0;
  }
  body#eng #movie .inner .box figure figcaption {
    font-size: 1.2vw;
  }
  body#cn_k #movie .inner .box {
    display: block;
  }
  body#cn_k #movie .inner .box .l {
    width: 100%;
    margin: 0 auto;
  }
  body#cn_k #movie .inner .box .l iframe {
    height: 37.65625vw;
  }
  body#cn_k #movie .inner .box .r {
    margin: 3.75vw auto 0;
  }
  body#eng #howto .inner .cnt ul.steps li.step .advice:before, body#cn_k #howto .inner .cnt ul.steps li.step .advice:before, body#cn_h #howto .inner .cnt ul.steps li.step .advice:before {
    background: url(../img/howto_advice_heading02.png) right top no-repeat/cover;
  }
}
/*size*/
/*color*/
@media screen and (max-width: 767px) {
  body {
    font-family: 'Noto Sans JP', sans-serif;
  }
  body #loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    display: block;
    background: #d60a32;
  }
  body #header.cmn .inner .menu.active {
    background: #d60a32;
  }
  body .btn_shop a {
    border: 0.5vw solid #000000;
    display: block;
    position: relative;
    width: 68vw;
    padding: 4.8vw 0 5.2vw;
    margin: 0 auto;
    font-size: 3.6vw;
    font-weight: 700;
    text-align: center;
    color: #000000;
    line-height: 0;
    background: #ffffff;
  }
  body .btn_shop a:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 4vw;
    margin: -0.7vw 0 0 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.4vw 1.1vw 0 1.1vw;
    border-color: #000000 transparent transparent transparent;
    z-index: 1;
  }
  body .slide.active .ttl:after {
    display: none;
  }
  body .slide .ttl {
    position: relative;
  }
  body .slide .ttl:before, body .slide .ttl:after {
    position: absolute;
    top: 50%;
    display: block;
    content: "";
    background-color: #ffffff;
  }
  body .slide .ttl:before {
    right: 3vw;
    margin-top: -0.2vw;
    width: 3vw;
    height: 0.6vw;
  }
  body .slide .ttl:after {
    right: 4.4vw;
    width: 0.6vw;
    height: 3vw;
    margin-top: -1.5vw;
  }
  body .slide ul.list {
    display: none;
  }
  body #main:before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    position: absolute;
  }
  body #main {
    padding: 0 0 20vw;
  }
  body #main:before {
    z-index: 0;
    width: 21vw;
    height: 100%;
    background: #d60a32;
  }
  body .headline {
    text-align: center;
  }
  body .headline .en, body .headline .jp {
    display: block;
  }
  body .headline .en {
    font-size: 8vw;
    font-weight: 700;
    letter-spacing: 1.2vw;
  }
  body .headline .jp {
    font-size: 3.7vw;
    font-weight: 400;
    margin: 2.4vw 0 0;
  }
  body .inner {
    width: 90vw;
    margin: 0 auto;
  }
  body #kv {
    height: 177vw;
  }
  body #kv .inner .photo {
    position: absolute;
    top: 21vw;
    z-index: 1;
    width: 100%;
    border: 0.5vw solid #000000;
  }
  body #kv .inner .item {
    position: absolute;
    top: 82vw;
    left: 0;
    z-index: 2;
    width: 100%;
  }
  body #keep .inner .ttl {
    font-size: 5.6vw;
    text-align: center;
  }
  body #keep .inner ul.list {
    width: 80vw;
    margin: 5.3vw auto 0;
  }
  body #keep .inner ul.list li + li {
    margin: 2.6vw auto 0;
  }
  body #keep .inner ul.list li figure {
    display: flex;
    align-items: center;
  }
  body #keep .inner ul.list li figure img {
    border: 0.5vw solid #000000;
    width: 37vw;
  }
  body #keep .inner ul.list li figure figcaption {
    margin: 0 0 0 5vw;
    font-size: 5.3vw;
    line-height: 1.4;
  }
  body #products {
    margin: 17vw 0 0;
  }
  body #products .inner .cnt01 {
    margin: 8vw 0 0;
  }
  body #products .inner .cnt01 .box .left img {
    border: 0.5vw solid #000000;
  }
  body #products .inner .cnt01 .box .right {
    margin: 10.6vw auto 0;
  }
  body #products .inner .cnt01 .box .right .txt01, body #products .inner .cnt01 .box .right .txt02, body #products .inner .cnt01 .box .right .subttl, body #products .inner .cnt01 .box .right .sup {
    color: #d60a32;
    background: #ffffff;
  }
  body #products .inner .cnt01 .box .right .sup {
    padding: 2vw 0 0.8vw;
  }
  body #products .inner .cnt01 .box .right .txt01 {
    font-size: 3.7vw;
    padding: 0.8vw 0.8vw 0;
  }
  body #products .inner .cnt01 .box .right .txt01 span {
    margin: 2vw 0 0;
    display: block;
  }
  body #products .inner .cnt01 .box .right .txt02 {
    font-size: 5.3vw;
    padding: 2.8vw 0.8vw 0;
    font-weight: 700;
  }
  body #products .inner .cnt01 .box .right .txt02 .sup {
    font-size: 2.8vw;
    vertical-align: super;
  }
  body #products .inner .cnt01 .box .right .txt03 {
    font-size: 3.2vw;
    margin: 0.6vw 0 0;
  }
  body #products .inner .cnt01 .box .right .subttl {
    padding: 5.2vw 0.8vw 0;
  }
  body #products .inner .cnt01 .box .right ul.list {
    margin: 5.6vw 0 0;
  }
  body #products .inner .cnt01 .box .right ul.list li {
    font-size: 3.2vw;
    line-height: 1.2;
    list-style: disc;
    margin: 0 0 0 4vw;
  }
  body #products .inner .cnt01 .box .right .btn_shop {
    margin: 5.3vw 0 0;
  }
  body #products .inner .cnt02 {
    margin: 13vw 0 0;
  }
  body #products .inner .cnt02 .ttl {
    font-size: 5.6vw;
    text-align: center;
  }
  body #products .inner .cnt02 .box {
    width: 90vw;
    margin: 6vw auto 0;
    justify-content: space-between;
    display: flex;
  }
  body #products .inner .cnt02 .box .left, body #products .inner .cnt02 .box .right {
    width: 43vw;
  }
  body #products .inner .cnt02 .box figure img {
    border: 0.5vw solid #000000;
  }
  body #products .inner .cnt02 .box figure figcaption {
    margin: 3vw 0 0;
    font-size: 3.4vw;
    font-weight: 700;
    text-align: center;
  }
  body #products .inner .cnt03 {
    width: 90vw;
    margin: 13vw auto 0;
  }
  body #products .inner .cnt03 + .cnt03 {
    margin: 5vw auto 0;
  }
  body #products .inner .cnt03 .ttl {
    font-size: 3.2vw;
    padding: 2.4vw 2vw;
    background: #000000;
    color: #ffffff;
  }
  body #products .inner .cnt03 .box {
    display: flex;
    justify-content: space-between;
    margin: 6vw 0 0;
  }
  body #products .inner .cnt03 .box .left {
    width: 45%;
  }
  body #products .inner .cnt03 .box .right {
    width: 50%;
  }
  body #products .inner .cnt03 .box .right .txt {
    margin: 2vw 0;
  }
  body #products .inner .cnt03 .box .right .txt + .subttl {
    margin: 6vw 0 0;
  }
  body #products .inner .cnt03 .inner {
    display: none;
  }
  body #products .inner .cnt03 .subttl {
    margin: 1vw 0 0;
    font-weight: 700;
    font-size: 2.4vw;
  }
  body #products .inner .cnt03 .txt {
    margin: 2vw 0 3vw;
    font-size: 2.1vw;
    line-height: 1.2;
  }
  body #products .inner .cnt03 .txt02 {
    margin: 1.2vw 0 8vw;
    font-size: 2.1vw;
    line-height: 1.2;
  }
  body #howto {
    margin: 18vw 0 0;
  }
  body #howto .inner .cnt {
    width: 90vw;
    border: 0.2vw solid #000000;
    background: #ffffff;
    margin: 8vw auto 0;
    padding: 8vw;
  }
  body #howto .inner .cnt .ttl {
    font-size: 3.7vw;
    font-weight: 700;
    text-align: center;
  }
  body #howto .inner .cnt .notes {
    font-size: 3.2vw;
    line-height: 1.6;
    text-align: center;
    margin: 4vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step {
    padding: 12vw 0 8vw;
  }
  body #howto .inner .cnt ul.steps li.step + li.step {
    background: url(../img/howto_advice_line.png) left top repeat-x;
  }
  body #howto .inner .cnt ul.steps li.step.step01 .box .left img {
    width: 40vw;
  }
  body #howto .inner .cnt ul.steps li.step.step01 .box .right .num {
    top: -6vw;
  }
  body #howto .inner .cnt ul.steps li.step.step01 .box .right .txt {
    margin: 4vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box {
    padding: 0 0 4vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box .left img {
    width: 24vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box .right .num {
    top: -2vw;
  }
  body #howto .inner .cnt ul.steps li.step.step02 .box .right .txt {
    margin: 8vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step.step03 {
    padding: 12vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step.step03 .box {
    padding: 3vw 0 6vw;
  }
  body #howto .inner .cnt ul.steps li.step.step03 .box .left img {
    width: 40vw;
  }
  body #howto .inner .cnt ul.steps li.step.step03 .box .right .num {
    top: -1vw;
  }
  body #howto .inner .cnt ul.steps li.step.step03 .box .right .txt {
    margin: 8vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .box {
    position: relative;
  }
  body #howto .inner .cnt ul.steps li.step .box .left img {
    width: 40vw;
    margin: 0 auto;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .num {
    position: absolute;
    left: 0;
    width: 12vw;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .txt {
    position: relative;
    font-size: 3.7vw;
    line-height: 1.4;
    font-weight: 700;
    margin: 3vw 0 0;
    text-align: center;
  }
  body #howto .inner .cnt ul.steps li.step .box .right .ast {
    margin-top: 4vw;
    font-size: 3.2vw;
    line-height: 1.6;
    text-align: center;
  }
  body #howto .inner .cnt ul.steps li.step .advice {
    position: relative;
    padding: 8vw 0;
    background-color: #d60a32;
    border-radius: 5px;
  }
  body #howto .inner .cnt ul.steps li.step .advice:before {
    content: "";
    position: absolute;
    left: 0.4vw;
    top: 0.4vw;
    width: 26vw;
    height: 20vw;
    background: url(../img/howto_advice_heading.png) left top no-repeat/cover;
  }
  body #howto .inner .cnt ul.steps li.step .advice:after {
    content: "";
    position: absolute;
    right: 4vw;
    top: -4vw;
    width: 4vw;
    height: 4vw;
    background: url(../img/howto_advice_decoration.png) left top no-repeat;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box {
    padding: 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box li {
    padding: 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box li + li {
    border-top: 1px solid #ffffff;
    width: 90%;
    margin: 6vw auto 0;
    padding: 6vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box li .img {
    width: 36vw;
    margin: 0 auto;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box li .ttl {
    font-size: 3.6vw;
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    margin: 4vw 0 0;
  }
  body #howto .inner .cnt ul.steps li.step .advice ul.box li .txt {
    padding: 3.4vw 2vw 0;
    font-size: 3.2vw;
    line-height: 1.6;
    color: #ffffff;
    text-align: center;
  }
  body #movie {
    margin: 18vw 0 0;
  }
  body #movie .inner {
    text-align: center;
  }
  body #movie .inner .ttl {
    font-size: 4.2vw;
    font-weight: 700;
    margin: 9vw 0 0;
    margin: 9.06667vw 0 0;
  }
  body #movie .inner .txt {
    font-size: 3.6vw;
    line-height: 1.6;
    margin: 8vw 0 0;
  }
  body #movie .inner .box figure {
    width: 89.33333vw;
    margin: 8vw auto 0;
    position: relative;
  }
  body #movie .inner .box figure figcaption {
    margin: 0 auto 3.73333vw;
    font-size: 3.73333vw;
    font-weight: 700;
  }
  body #movie .inner .box figure iframe {
    width: 100%;
    height: 89vw;
    border: solid 2px #000000;
  }
  body #voice {
    margin: 18vw 0 0;
  }
  body #voice .inner .box {
    position: relative;
    width: 100%;
    margin: 8vw auto 0;
    padding: 10vw 5.33333vw;
    background: #ffffff;
    border: solid 0.4vw #000000;
  }
  body #voice .inner .box .subttl .txt {
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
    font-size: 3.73333vw;
  }
  body #voice .inner .box .subttl .txt span {
    background: #d60a32;
    display: inline-block;
    padding: 0.53333vw 1.06667vw 1.06667vw;
  }
  body #voice .inner .box .subttl .txt span + span {
    margin: 1.33333vw 0 0;
  }
  body #voice .inner .box .img01 {
    width: 73.33333vw;
    margin: 6vw auto 0;
  }
  body #voice .inner .box ul {
    margin: 8vw 0 0;
  }
  body #voice .inner .box ul li {
    position: relative;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  body #voice .inner .box ul li + li {
    margin: 2.93333vw 0 0;
  }
  body #voice .inner .box ul li:nth-child(odd):before {
    content: "";
  }
  body #voice .inner .box ul li:nth-child(odd) p:before {
    left: -2.66666666vw;
    background: url(../img/voice_txt_l.png) no-repeat 0 0/102%;
  }
  body #voice .inner .box ul li:nth-child(even):after {
    content: "";
  }
  body #voice .inner .box ul li:nth-child(even) p:before {
    right: -2.66666666vw;
    background: url(../img/voice_txt_r.png) no-repeat 0 0/102%;
  }
  body #voice .inner .box ul li:before, body #voice .inner .box ul li:after {
    z-index: 0;
    top: 0;
    left: 0;
    width: 13.33333vw;
    height: 13.33333vw;
    background: url(../img/voice_img01.png) no-repeat 0 0/100%;
  }
  body #voice .inner .box ul li p {
    border: 2px solid #d60a32;
    border-radius: 10px;
    padding: 4vw;
    width: 61.33333vw;
    position: relative;
    font-size: 2.4vw;
    line-height: 1.4;
    text-align: justify;
  }
  body #voice .inner .box ul li p:before {
    content: "";
    display: block;
    position: absolute;
    top: 5vw;
    width: 2.66666666vw;
    height: 2.66666666vw;
  }
  body #voice .inner .box ul li p span {
    float: right;
  }
  body #faq {
    margin: 18vw 0 0;
  }
  body #faq .btn_shop {
    margin: 4vw 0 7.6vw;
  }
  body #faq .btn_shop a {
    margin: 2vw 0 0;
  }
  body #faq .inner .box {
    width: 90vw;
    border: 0.2vw solid #000000;
    background: #ffffff;
    margin: 5vw auto 0;
    padding: 8vw 4vw;
  }
  body #faq .inner .box dl dt {
    margin-left: -1.5vw;
    font-weight: 700;
  }
  body #faq .inner .box .link {
    color: #d60a32;
    font-size: 2.6vw;
    line-height: 1.6;
    margin: 3vw 0 0;
  }
  body #faq .inner .box .link a {
    position: relative;
    display: inline-block;
    padding-right: 14px;
    color: #d60a32;
    text-decoration: none;
  }
  body #faq .inner .box .link a:before {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #d60a32;
    transition: transform 0.3s ease-out;
    transform-origin: left top;
    backface-visibility: hidden;
  }
  body #faq .inner .box .link a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #d60a32;
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    position: absolute;
    top: 50%;
    right: -2px;
    margin-top: -5px;
    transition: right 0.3s ease;
  }
  body #faq .inner .box .section {
    position: relative;
  }
  body #faq .inner .box .section + .section {
    margin: 2vw auto 0;
  }
  body #faq .inner .box .section .ttl {
    margin: 0 auto;
    padding: 2.2vw 2vw;
    font-size: 3.8vw;
    font-weight: 700;
    color: #ffffff;
    background-color: #d60a32;
  }
  body #faq .inner .box .section .subttl {
    font-size: 3.8vw;
  }
  body #faq .inner .box .section ul.list {
    padding-bottom: 5px;
    margin: 5.3333vw auto 0;
  }
  body #faq .inner .box .section ul.list li {
    margin: 0 0 6.6vw;
  }
  body #faq .inner .box .section ul.list li .question {
    display: flex;
    align-items: center;
    margin: 0 0 4vw;
  }
  body #faq .inner .box .section ul.list li .question:before {
    content: "";
    width: 10vw;
    height: 9.6vw;
    background: url(../img/faq-icon-q.png) right top no-repeat/cover;
  }
  body #faq .inner .box .section ul.list li .question .text {
    font-size: 3.6vw;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 0 2vw;
    width: 70vw;
  }
  body #faq .inner .box .section ul.list li .answer {
    display: flex;
    margin: 0 0 4vw;
  }
  body #faq .inner .box .section ul.list li .answer:before {
    content: "";
    width: 5.5vw;
    height: 4.2vw;
    background: url(../img/faq-icon-a.png) right top no-repeat/cover;
    margin: 0 0 0 4vw;
  }
  body #faq .inner .box .section ul.list li .answer .text {
    font-size: 3.2vw;
    line-height: 1.4;
    color: #d60a32;
    margin: -1vw 0 0 2vw;
    width: 70vw;
  }
  body #online {
    float: left;
    width: 100%;
  }
  body #online .inner {
    padding: 13vw 0;
    background: #ffffff;
    width: 92vw;
  }
  body #online .inner .block {
    margin: 8vw auto 0;
  }
  body #online .inner .block .subttl {
    font-size: 3.6vw;
    padding: 2vw 1vw 2vw 6.2vw;
    display: inline-block;
  }
  body #online .inner .block .subttl.clear {
    background: url(../img/online_img01.png) left top no-repeat/contain;
  }
  body #online .inner .block .subttl.perl {
    background: url(../img/online_img02.png) left top no-repeat/contain;
  }
  body #online .inner .block ul.list {
    display: flex;
    flex-wrap: wrap;
    margin: 2vw auto 0;
  }
  body #online .inner .block ul.list li {
    width: 30vw;
    border: 0.27vw solid #eeeeee;
    margin-bottom: 1vw;
  }
  body #online .inner .block ul.list li:not(:nth-child(3n+1)) {
    margin-left: 1vw;
  }
  body #online .inner .block ul.list li.cvr {
    position: relative;
  }
  body #online .inner .block ul.list li.cvr:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ' ';
  }
  body #online .inner .block ul.list + .subttl {
    margin: 3vw 0 0;
  }
  body #online .inner .block .annotation {
    font-size: 2.4vw;
    line-height: 1.4;
    text-align: left;
    margin: 4vw auto 0;
  }
  body #float {
    display: none;
  }
  body #float .close {
    position: absolute;
    width: 4vw;
    height: 4vw;
    top: -6vw;
    right: 0;
    z-index: 9999;
  }
  body #float .close:before, body #float .close:after {
    top: -0.66667vw;
    right: 2vw;
    display: block;
    content: "";
    position: absolute;
    width: 0.53333vw;
    height: 5.33333vw;
    background: #ffffff;
    z-index: 9999;
  }
  body #float .close:before {
    transform: rotate(45deg);
  }
  body #float .close:after {
    transform: rotate(-45deg);
  }
  body #float {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }
  body #float.show {
    display: block;
    opacity: 1;
    z-index: 9999;
  }
  body #float .bg {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  body #float .contents {
    width: 86.66667vw;
    height: 56vw;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  body #float .contents #float_mov {
    width: 100%;
    height: 100%;
  }
  body #float .contents #float_mov iframe {
    width: 100%;
    height: 100%;
  }
  body .modal {
    transition: all .5s ease-out;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(229, 0, 115, 0.9);
    z-index: 9999;
    overflow: scroll;
    opacity: 0;
    visibility: hidden;
  }
  body .modal.active {
    opacity: 1;
    visibility: visible;
  }
  body .modal .close {
    position: absolute;
    top: -50px;
    right: 0px;
    width: 35px;
  }
  body .modal .inner {
    background: #ffffff;
    width: 90vw;
    height: 90vw;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50vw;
    margin: -45vw 0 0 -45vw;
    padding: 8vw 8vw 2vw;
  }
  body .modal .inner .ttl {
    font-size: 5vw;
    font-weight: 700;
    text-align: center;
  }
  body .modal .inner .box {
    display: flex;
    justify-content: space-between;
  }
  body .modal .inner .box .left {
    width: 30%;
  }
  body .modal .inner .box .left img {
    width: 60%;
    margin: 43% 0 0 0%;
  }
  body .modal .inner .box .right {
    width: 70%;
    margin: 7vw 0 0;
  }
  body .modal .inner .box .right .subttl {
    font-weight: 700;
    font-size: 3.4vw;
    margin: 3vw 0 0;
  }
  body .modal .inner .box .right .txt {
    font-size: 3vw;
    margin: 2.5vw 0 0;
    line-height: 1.3;
  }
  body#eng #keep .inner .ttl {
    line-height: 1.4;
  }
  body#eng #products {
    margin: 8vw 0 0;
  }
  body#eng #products .inner .cnt02 .ttl {
    line-height: 1.4;
  }
  body#cn_k #movie .inner .box {
    display: block;
  }
  body#cn_k #movie .inner .box .l {
    width: 100%;
  }
  body#cn_k #movie .inner .box .l iframe {
    height: 51.55vw;
  }
  body#cn_k #voice .inner .box .subttl .txt {
    font-size: 3.46667vw;
  }
  body#eng #howto .inner .cnt ul.steps li.step .advice:before, body#cn_k #howto .inner .cnt ul.steps li.step .advice:before, body#cn_h #howto .inner .cnt ul.steps li.step .advice:before {
    background: url(../img/howto_advice_heading02.png) right top no-repeat/cover;
  }
}

/*# sourceMappingURL=screen.css.map */