/* =============================================
    Body
   =============================================*/
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
}

@media only screen and (min-width: 835px) {

    body,
    header,
    .outer,
    .about .mv_i li {
        min-width: 1200px;
    }
}

body,
body * {
    box-sizing: border-box;
}

/* =============================================
    Layout
   =============================================*/
.sp {
    display: none;
}

.pc {
    display: block;
}

.none {
    display: none;
}

.wrapper {}

section {
    padding: 80px 0;
}

.outer {
    width: 100%;
    margin: 0 auto;
}

.inner {
    width: 1200px;
    margin: 0 auto;
}

.content {
    width: 900px;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex.nowrap {
    flex-wrap: nowrap;
}

.flex.right {
    justify-content: flex-end;
}

@media all and (-ms-high-contrast:none) {
    .flex.right {
        justify-content: space-around;
    }

    .mv .flex.right {
        justify-content: flex-end;
    }

    .product-cta .flex.right {
        justify-content: flex-end;
    }
}

.flex.center {
    justify-content: center;
}

.flex.left {
    justify-content: flex-start;
}

.flex.vertical {
    flex-direction: column;
}

.v-center {
    display: flex;
    justify-content: center;
}

.vh-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
}

button {
    font-family: 'Noto Sans JP';
}

/* =============================================
    Transition
   =============================================*/
.fadein.up {
    opacity: 0;
    transform: translateY(30px);
    transition: all .3s ease;
}

.fadein.scrollin.up {
    opacity: 1;
    transform: translateY(0);
}

.fadein.left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all .3s ease;
}

.fadein.scrollin.left {
    opacity: 1;
    transform: translateY(0);
}

.fadein.right {
    opacity: 0;
    transform: translateX(30px);
    transition: all .3s ease;
}

.fadein.scrollin.right {
    opacity: 1;
    transform: translateY(0);
}

.fadein.zoomout {
    opacity: 0;
    transform: scale(2, 2);
    transition: all .3s ease;
    transform-origin: center;
}

.fadein.scrollin.zoomout {
    opacity: 1;
    transform: scale(1, 1);
}

.fadein.delay02 {
    transition-delay: .2s;
}

.fadein.delay04 {
    transition-delay: .4s;
}

.fadein.delay05 {
    transition-delay: .5s;
}

.fadein.delay06 {
    transition-delay: .6s;
}

.fadein.delay08 {
    transition-delay: .8s;
}

.fadein.delay10 {
    transition-delay: 1.0s;
}

.fadein.delay15 {
    transition-delay: 1.5s;
}

img.fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

img.fit-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;'
}

.attention {
    color: #D70003;
}

/* =============================================
    マージン設定
   =============================================*/
.pt-0 {
    padding-top: 0px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

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

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-25 {
    margin-right: 25px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.ml-25 {
    margin-left: 25px !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.w-100 {
    width: 100px !important;
}

.w-110 {
    width: 110px !important;
}

.w-120 {
    width: 120px !important;
}

.w-130 {
    width: 130px !important;
}

.w-140 {
    width: 140px !important;
}

.w-150 {
    width: 150px !important;
}

.w-160 {
    width: 160px !important;
}

.w-170 {
    width: 170px !important;
}

.w-180 {
    width: 180px !important;
}

.w-190 {
    width: 190px !important;
}

.w-200 {
    width: 200px !important;
}

.w-210 {
    width: 210px !important;
}

.w-220 {
    width: 220px !important;
}

.w-230 {
    width: 230px !important;
}

.w-240 {
    width: 240px !important;
}

.w-250 {
    width: 250px !important;
}

.w-260 {
    width: 260px !important;
}

.w-270 {
    width: 270px !important;
}

.w-280 {
    width: 280px !important;
}

.w-290 {
    width: 290px !important;
}

.w-300 {
    width: 300px !important;
}

.w-310 {
    width: 310px !important;
}

.w-320 {
    width: 320px !important;
}

.w-330 {
    width: 330px !important;
}

.w-340 {
    width: 340px !important;
}

.w-350 {
    width: 350px !important;
}

.w-360 {
    width: 360px !important;
}

.w-370 {
    width: 370px !important;
}

.w-380 {
    width: 380px !important;
}

.w-390 {
    width: 390px !important;
}

.w-400 {
    width: 400px !important;
}

.w-410 {
    width: 410px !important;
}

.w-420 {
    width: 420px !important;
}

.w-430 {
    width: 430px !important;
}

.w-440 {
    width: 440px !important;
}

.w-450 {
    width: 450px !important;
}

.w-460 {
    width: 460px !important;
}

.w-470 {
    width: 470px !important;
}

.w-480 {
    width: 480px !important;
}

.w-490 {
    width: 490px !important;
}

.w-500 {
    width: 500px !important;
}

.w-510 {
    width: 510px !important;
}

.w-520 {
    width: 520px !important;
}

.w-530 {
    width: 530px !important;
}

.w-540 {
    width: 540px !important;
}

.w-550 {
    width: 550px !important;
}

.w-560 {
    width: 560px !important;
}

.w-570 {
    width: 570px !important;
}

.w-580 {
    width: 580px !important;
}

.w-590 {
    width: 590px !important;
}

.w-600 {
    width: 600px !important;
}

.w-610 {
    width: 610px !important;
}

.w-620 {
    width: 620px !important;
}

.w-630 {
    width: 630px !important;
}

.w-640 {
    width: 640px !important;
}

.w-650 {
    width: 650px !important;
}

.w-660 {
    width: 660px !important;
}

.w-670 {
    width: 670px !important;
}

.w-680 {
    width: 680px !important;
}

.w-690 {
    width: 690px !important;
}

.w-700 {
    width: 700px !important;
}

.w-710 {
    width: 710px !important;
}

.w-720 {
    width: 720px !important;
}

.w-730 {
    width: 730px !important;
}

.w-740 {
    width: 740px !important;
}

.w-750 {
    width: 750px !important;
}

.w-760 {
    width: 760px !important;
}

.w-770 {
    width: 770px !important;
}

.w-780 {
    width: 780px !important;
}

.w-790 {
    width: 790px !important;
}

.w-800 {
    width: 800px !important;
}

.w-810 {
    width: 810px !important;
}

.w-820 {
    width: 820px !important;
}

.w-830 {
    width: 830px !important;
}

.w-840 {
    width: 840px !important;
}

.w-850 {
    width: 850px !important;
}

.w-860 {
    width: 860px !important;
}

.w-870 {
    width: 870px !important;
}

.w-880 {
    width: 880px !important;
}

.w-890 {
    width: 890px !important;
}

/* =============================================
    Parts
   =============================================*/
/* font */
.en {
    font-family: 'Roboto', sans-serif !important;
}

.thin {
    font-weight: 100;
}

.regu {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

.black {
    color: #222222;
}

.white {
    color: #ffffff;
}

.gray {
    color: #707070;
}

.ta-center {
    text-align: center;
    display: block;
}

.ta-left {
    text-align: left;
    display: block;
}

.ta-right {
    text-align: right;
    display: block;
}

.fs-12 {
    font-size: 0.750rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1.000rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-20 {
    font-size: 1.250rem;
}

.fs-22 {
    font-size: 1.375rem;
}

.fs-24 {
    font-size: 1.500rem;
}

.fs-26 {
    font-size: 1.625rem;
}

.fs-28 {
    font-size: 1.750rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-32 {
    font-size: 2.000rem;
}

.fs-34 {
    font-size: 2.125rem;
}

.fs-40 {
    font-size: 2.500rem;
}

.fs-44 {
    font-size: 2.750rem;
}

.border {
    border-bottom: 1px solid #dedede;
}

sup {
    font-size: 0.5em;
    position: relative;
    top: -1em;
}

/* h2 */
section h2 {
    font-size: 3.125rem;
    text-align: center;
}

section h2 small {
    display: block;
    font-size: 1rem;
}

/* ----- button ----- */
/* btn-more */
.btn-more {
    display: block;
    border: 1px solid #fff;
    width: 300px;
    color: #fff;
    position: relative;
    text-align: center;
    transition: all .3s ease;
    padding: 17px 20px 17px 0;
}

.section-partner .btn-more {
    color: #fff !important;
}

a:hover .btn-more,
.btn-more:hover {
    background-color: #fff;
    color: #252525;
}

.section-partner a:hover .btn-more,
.section-partner .btn-more:hover {
    color: #252525 !important;
}

a:hover .btn-more::after,
.btn-more::after {
    content: url(../../img/icon-btn-arrow-white.png);
    position: absolute;
    right: 20px;
    margin-top: -3px;
}

.btn-more:hover::after {
    content: url(../../img/icon-btn-arrow-black.png);
}

.btn-more.black {
    border: 1px solid #222;
    color: #222 !important;
}

.btn-more.black:hover {
    background-color: #222;
    color: #fff !important;
}

.btn-more.black::after {
    content: url(../../img/icon-btn-arrow-black.png);
}

.btn-more.black:hover::after {
    content: url(../../img/icon-btn-arrow-white.png);
}

/* btn-cart */
.btn-cart {
    display: inline-block;
    width: 190px;
    height: 54px;
    line-height: 54px;
    border: 1px solid #fff;
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: normal;
    overflow: hidden;
    transition: transform .3s ease;
}

.btn-cart:hover {
    color: #222;
    background-color: #FFF;
}

section a.btn-cart {
    display: inline-block;
    width: 190px;
    height: 54px;
    line-height: 54px;
    border: 1px solid #fff;
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: normal;
    overflow: hidden;
    transition: transform .3s ease;
}

section a.btn-cart:hover {
    color: #222;
}

.btn-cart:before {
    content: url(../../img/icon-cart.png);
    position: absolute;
    left: 20px;
    top: 3px;
}

.btn-cart.black {
    border-color: #3F3F3F;
    color: #3F3F3F;
}

.btn-cart.black:hover {
    background-color: #3F3F3F;
}

.btn-cart.black:before {
    content: url(../../img/icon-cart-black.png);
}

.btn-cart.black:hover {
    color: #fff;
}

/* btn-shop-anchor */
.btn-shop-anchor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    height: 84px;
    color: #222222;
    border: 1px solid #222222;
    background-image: url(../../img/icon-arrow-down-black.png);
    background-position: right 30px center;
    background-repeat: no-repeat;
    transition: all .3s ease;
}

.btn-shop-anchor:hover {
    background-image: url(../../img/icon-arrow-down-white.png);
    background-color: #222;
    color: #fff;
}

.btn-shop-anchor2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    height: 84px;
    color: #222222;
    border: 1px solid #222222;
    background-image: url(../../img/icon-btn-arrow-black.png);
    background-position: right 30px center;
    background-repeat: no-repeat;
    transition: all .3s ease;
}

.btn-shop-anchor2:hover {
    background-image: url(../../img/icon-btn-arrow-white.png);
    background-color: #222;
    color: #fff;
}

/* btn-blank */
.btn-blank {
    display: block;
    height: 60px;
    line-height: 60px;
    background-image: url(../../img/icon-blank-black.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-color: #f6f6f6;
    color: #222222;
    transition: all .3s ease;
}

section a:link,
section a:visited {
    /*color:#222;*/
}

a:hover .btn-blank,
.btn-blank:hover {
    background-image: url(../../img/icon-blank-white.png);
    background-color: #222;
    color: #fff;
}

.btn-blank.btn-direct {
    background-color: #fff;
    border: 1px solid #fff;
    font-weight: bold;
}

a:hover .btn-blank.btn-direct,
.btn-blank.btn-direct:hover {
    background-color: #222;
    border: 1px solid #fff;
}

/* btn-back */
.btn-back {
    display: block;
    width: 300px;
    padding: 17px 20px 17px 0;
    border: 1px solid #000;
    text-align: center;
    color: #222;
    background-image: url(../../img/icon-arrow-back-black.png);
    background-repeat: no-repeat;
    background-position: left 30px center;
    transition: all .3s ease;
}

.btn-back:hover {
    background-color: #222;
    color: #fff;
    background-image: url(../../img/icon-arrow-back-white.png);
}

/* ----- link ----- */
a img {
    transition: opacity .3s ease;
}

a:hover img {
    opacity: 0.7;
}

.link-blank::after {
    content: url(../../img/icon-blank.png);
    margin-left: 0.5em;
}

.link-arrow::before {
    content: url(../../img/icon-info-arrow.png);
    margin-right: 1em;
    position: relative;
    top: -0.3em;
}

.link-manual {
    position: relative;
    color: #222;
    transition: all .3s ease;
}

.link-manual::before {
    content: url(../../img/icon-manual.png);
    position: relative;
    top: 1em;
    margin-right: 10px;
}

.link-manual:visited {
    color: #222;
}

.link-manual:hover {
    opacity: 0.7;
}

.link-option {
    position: relative;
    color: #222;
    transition: all .3s ease;
}

.link-option::before {
    content: url(../../img/icon-option.png);
    position: relative;
    top: 1em;
    margin-right: 10px;
}

.link-option:visited {
    color: #222;
}

.link-option:hover {
    opacity: 0.7;
}

.link-map {
    color: #222;
}

.link-map::before {
    content: url(../../img/icon-map.png);
    position: relative;
    top: 5px;
    margin-right: 10px;
}

/* =============================================
    Header
   =============================================*/
header {
    background-color: #2b2b2b;
    padding: 20px 0;
    text-align: center;
    position: inherit;
    width: 100%;
    z-index: 10;
    left: 0;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

header.drair_me {
    background: #deeedc;
    background: -moz-linear-gradient(left, #deeedc 0%, #b9c6d7 100%);
    background: -webkit-linear-gradient(left, #deeedc 0%, #b9c6d7 100%);
    background: linear-gradient(to right, #deeedc 0%, #b9c6d7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#deeedc', endColorstr='#b9c6d7', GradientType=1);
}

header.geske {
    background-color: #fff;
        padding: 20px 0;
        text-align: center;
        position: inherit;
        width: 100%;
        z-index: 10;
        left: 0;
        transition: all 0.3s;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

header a:visited {
    color: #fff;
}

header a:hover {
    opacity: 0.7;
}

header .header-row {
    position: relative;
}

header .header-row h1 img {
    width: 170px;
}

header .sub-nav {
    position: absolute;
    right: 0;
    top: -20px;
}

header.drair_me .sub-nav {
    position: absolute;
    right: 0;
    top: 0;
}

header.drair_me .sub-nav {
    position: absolute;
    right: 0;
    top: 0;
}

header .sub-nav li {}

header .sub-nav li:hover {
    cursor: pointer;
}

header .sub-nav li.sub-nav_li {
    position: relative;
}

header .sub-nav li.sub-nav_li a {
    padding: 25px 10px 15px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .sub-nav li.sub-nav_li a:nth-child(1)>img {
    margin-right: .5rem;
}

header .sub-nav li.sub-nav_li a:hover,
header .sub-nav li.sub-nav_li a:hover img {}

header .sub-nav li.sub-nav_li a img {
    transition: inherit;
}

header .sub-nav li.sub-nav_li .box_sub_navi {
    position: absolute;
    top: 67px;
    right: 0;
    background: #444444;
    width: 210px;
    z-index: 1;
    text-align: center;
    display: none;
    padding: 10px 20px;
}

header .sub-nav li.sub-nav_li .box_sub_navi.box_mailmagazine {
    padding: 10px 10px 10px 10px;
}

header .sub-nav li.sub-nav_li .box_sub_navi a {
    display: block;
}

header .sub-nav li.sub-nav_li:nth-child(1) .box_sub_navi {
    left: -30px;
}

header .sub-nav li.sub-nav_li:nth-child(2) .box_sub_navi {
    left: -83px;
}

header .sub-nav li.sub-nav_li:nth-child(3) .box_sub_navi {
    left: -283px;
}

header .sub-nav li.sub-nav_li.navi_over:hover .box_sub_navi {
    display: block;
}

.text_subnavi {
    padding: 15px 0 35px 0;
}

.btn_subnavi {
    background: url("../../img/icon-btn-arrow-white.png") no-repeat right 15px center;
    padding: 10px 0 10px 0;
    text-align: center;
    width: 300px;
    margin: 0 auto;
    border: 1px solid #FFF;
}

.title_box_sub_navi a {
    text-align: left;
    padding: 15px 10px 15px 60px !important;
    font-size: 14px;
    border-bottom: 1px solid #646464;
}

.title_box_sub_navi a.ico_member {
    background: url("../../img/header/ico_store_01.png") no-repeat 16px center;
    background-size: 26px;
    border: none;
}

.title_box_sub_navi a.ico_mypage {
    background: url("../../img/header/ico_store_02.png") no-repeat 16px center;
    background-size: 26px;

}

.title_box_sub_navi a.ico_cart {
    background: url("../../img/header/ico_store_03.png") no-repeat 16px center;
    background-size: 26px;
}

.title_box_sub_navi2 a.ico_mailmagazine {
    background: url("../../img/header/ico_store_04.png") no-repeat 16px center;
    background-size: 25px;
}

.title_box_sub_navi2 a {
    text-align: left;
    padding: 10px 10px 15px 50px !important;
    font-size: 14px;
}

header .sub-nav .link-cart {
    background: url("../../img/icon-cart-top.png") no-repeat 0 center;
    background-size: 22px 22px;
    padding-left: 30px;
    display: inline-block;
    height: 22px;
    box-sizing: border-box;
}

header .sub-nav .link-event {
    background: url("../../img/ico_event.png") no-repeat 0 0;
    background-size: 22px 22px;
    padding-left: 30px;
    padding-top: 3px;
    display: inline-block;
    height: 22px;
    box-sizing: border-box;
}

header .sub-nav .link-lang {
    padding: 25px 0 7px 0;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    margin-left: 15px;
}

header .box_select_lang {
    display: none;
    position: absolute;
    top: 55px;
    right: -17px;
    width: 100px;
}

header .box_select_lang a {
    display: block;
    padding: 0 15px 0 30px;

}

header .sub-nav .link-lang:hover {
    cursor: pointer;
}

header .sub-nav .link-lang:hover .box_select_lang {
    display: block;
}

.select_lang_in {}

.select_lang_in img {
    width: 25px;
    height: auto;
}

.select_lang_in span {
    vertical-align: top;
    padding-left: 10px;
}

header nav {
    margin-top: 10px;
}

header nav .current {
    opacity: 0.7;
}

header nav span {
    color: #FFF;
}

header nav ul li {
    position: relative;
}

header nav ul li:hover {
    cursor: pointer;
}

header nav ul li.actives:hover {
    cursor: auto;
}

.nav_over {
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    display: none;
    position: absolute;
    top: 40px;
    left: -50px;
    width: 400px;
    background-color: #444444;
    text-align: left;
    padding: 0 25px 25px 25px;
    z-index: 100;
}

.nav_over_in {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 25px 0 0 0;
}

.actives .nav_over {
    display: block;
}

header nav ul li:nth-child(3) .nav_over {
    display: none;
    position: fixed;
    top: 113px;
    left: 0;
    width: 100%;
    background-color: #444444;
    text-align: left;
    padding: 0 25px 25px 25px;
}

header nav ul li:nth-child(3).actives .nav_over {
    display: block;
}

div.link_nav_over {
    border-bottom: 1px solid #868686;
}

div.link_nav_over:last-child {
    border-bottom: none;
}

.link_nav_over a,
.link_nav_over span {
    display: block;
    padding: 20px 0 20px 56px;
}

ul.list_nav_over {
    padding: 0 0 0 0;
}

ul.list_nav_over li a {
    display: inline-block;
    padding: 5px 0 5px 0;
}

ul.list_nav_over li a::after {}

ul.list_nav_over li {
    list-style: disc;
    color: #FFF;
    margin: 0 0 0 56px;
}

.ico_dealer {
    background: url("../../img/ico_dealer.png") no-repeat 10px center;
    background-size: 31px 27px;
}

.ico_purchase {
    background: url("../../img/ico_purchase.png") no-repeat 5px center;
    background-size: 35px 28px;
}

.ico_studio {
    background: url("../../img/ico_studio.png") no-repeat 10px center;
    background-size: 27px 34px;
}

.ico_os {
    background: url("../../img/ico_os.png") no-repeat 10px center;
    background-size: 26px 25px;
}

ul.list_nav_over2 li {
    width: 23.5%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

ul.list_nav_over2_in li {
    width: 100%;
    float: none;
    height: inherit;
    padding: 0 0 0 0;
}

ul.list_nav_over2_in {}

ul.list_nav_over2 li .title_link_nav_over {
    font-size: 16px;
    color: #f9f9f9;
    font-weight: bold;
    padding: 0 0 10px 0;
    margin-bottom: 25px;
    border-bottom: 2px solid #646464;
}

ul.list_nav_over2 li a {
    display: block;
    padding: 3px 0;
}

ul.list_nav_over2_in li a {
    color: #f9f9f9;
    font-size: 15px;
}

.menu_01 {
    background: url("../../img/header/ico_01.png") no-repeat 0 center;
    background-size: 50px;
    padding: 0 0 0 60px;
    margin-bottom: 30px;
}

.menu_02 {
    background: url("../../img/header/ico_02.png") no-repeat 0 -8px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_03 {
    background: url("../../img/header/ico_03.png") no-repeat 0 center;
    background-size: 50px;
    padding: 0 0 0 60px;
    margin-bottom: 30px;
}

.menu_04 {
    background: url("../../img/header/ico_04.png") no-repeat 0 -6px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_05 {
    background: url("../../img/header/ico_05.png") no-repeat 0 center;
    background-size: 50px;
    padding: 0 0 0 60px;
    margin-bottom: 30px;
}

.menu_06 {
    background: url("../../img/header/ico_06.png") no-repeat 0 -6px;
    background-size: 50px;
    padding: 5px 0 30px 60px;
}

.menu_07 {
    background: url("../../img/header/ico_07.png") no-repeat 0 -9px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_08 {
    background: url("../../img/header/ico_08.png") no-repeat 0 -6px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_09 {
    background: url("../../img/header/ico_09.png") no-repeat 0 -7px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_10 {
    background: url("../../img/header/ico_10.png") no-repeat 0 0;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_11 {
    background: url("../../img/header/ico_11.png") no-repeat 0 -5px;
    background-size: 50px;
    padding: 5px 0 30px 60px;
}

.menu_12 {
    background: url("../../img/header/ico_12.png") no-repeat 0 0;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_13 {
    background: url("../../img/header/ico_13.png") no-repeat 0 -9px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_14 {
    background: url("../../img/header/ico_14.png") no-repeat 0 -7px;
    background-size: 50px;
    padding: 3px 0 30px 60px;
}

.menu_15 {
    background: url("../../img/header/ico_15.png") no-repeat 0 -8px;
    background-size: 50px;
    padding: 0 0 30px 60px;
}

.menu_16 {
    background: url("../../img/header/ico_16.png") no-repeat 0 -8px;
    background-size: 50px;
    padding: 3px 0 30px 60px;
}

.menu_17 {
    background: url("../../img/header/ico_17.png") no-repeat 0 -4px;
    background-size: 50px;
    padding: 3px 0 30px 60px;
    margin-bottom: 30px;
}

/* =============================================
    page nav
   =============================================*/
.page-nav-wrap {
    margin-top: 113px;
    padding: 28px 0;
    background-color: #f1f1f1;
}

.page-nav li {
    margin: 0 30px;
    width: auto;
}

.page-nav li a {
    font-size: 0.875rem;
    line-height: 1;
    color: #222222;
    transition: all .3s ease;
}

.page-nav li a:hover {
    text-decoration: underline;
}

/* =============================================
    Main Visual
   =============================================*/
.mv {
    position: relative;
}

.mv a,
.mv a:visited {
    display: block;
    width: 100%;
    height: 100%;
    ;
}

.mv .inner {
    position: relative;
}

.mv .copy {
    position: absolute;
}

.mv li {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    height: calc(100vh - 113px);
    min-height: 750px;
    /*width: 100vw;*/
}

@media only screen and (min-width: 1500px) {
    .mv li {
        min-height: 750px;
    }
}

@media only screen and (min-width: 1600px) {
    .mv li {
        min-height: 800px;
    }
}

@media only screen and (min-width: 1700px) {
    .mv li {
        min-height: 850px;
    }
}

@media only screen and (min-width: 1800px) {
    .mv li {
        min-height: 960px;
    }
}

.mv .navigation {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
}

.mv .swipe-nav {
    background-color: #fff;
    padding: 11px 0;
}

.mv .swipe-prev,
.mv .swipe-next {
    width: 48px;
    text-align: center;
    outline-style: none;
}

.mv .swipe-pagenation span {
    margin-right: 10px;
}

.mv .swipe-pagenation span:last-of-type {
    margin-right: 30px;
}

.mv .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
}

.mv .swiper-pagination-bullet-active {
    background-color: #000;
}

/* 固定ページMV */
.page-mv {
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 113px;
    padding-top: 115px;
    text-align: center;
    color: #fff;
}

.page-mv h2 {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
}

.page-mv h2+small {
    font-size: 1.250rem;
    letter-spacing: 0.1rem;
}

/* =============================================
    breadcrumb
   =============================================*/
.breadcrumb ul {
    font-size: 0.875rem;
    margin-top: 25px;
}

.breadcrumb ul li {
    color: #000000;
    font-weight: bold;
}

.breadcrumb ul a {
    color: #666666;
}

.breadcrumb ul a::after {
    content: url(../../img/icon-breadcrumb.png);
    margin: 0 10px;
}

/* =============================================
    Footer
   =============================================*/
footer {
    padding: 70px 0;
    background-color: #2b2b2b;
    text-align: center;
    color: #fff;
}

.business_form footer {
    z-index: 100;
    position: relative;
}

footer a,
footer a:visited {
    color: #fff !important;
}

footer a:hover {
    opacity: 0.7;
}

footer .footer-sns em {
    letter-spacing: 0.15em;
}

footer .footer-sns ul {
    margin-top: 20px;
}

footer .footer-sns li {
    margin: 0 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer .footer-sns li a {
    font-size: 12px !important;
}

footer .footer-sitemap {
    margin-top: 75px;
    text-align: left;
    line-height: 2em;
}

footer .footer-sitemap span {
    color: #c5c5c5;
    margin-left: 0.5em;
    display: inline-block;
    line-height: 1.4;
}

footer .footer-sitemap ul li ul {
    margin-left: 1em;
}

footer .footer-sitemap2 {
    text-align: left;
    line-height: 2em;
    width: 52%;
    margin: 20px auto 0 auto;
}

footer .footer-sitemap2 a {
    font-weight: bold;
}

footer .footer-sitemap3 {
    width: 94%;
    margin: 0 auto;
    padding: 40px 0 0 0;
}

footer .footer-sitemap3 ul {
    padding: 20px 0 0 0;
}

footer .footer-row {
    font-size: 10px;
    overflow: hidden;
}

footer .box_footer-logo {
    width: 140px;
    float: left;
    text-align: left;
}

footer .logo_jp {
    width: 140px;
    float: left;
    text-align: left;
}

footer .box_copy {
    text-align: right;
    padding-top: 30px;
}

.totop {
    position: fixed;
    right: 30px;
    bottom: 5px;
    z-index: 100;
}

.product-sub .totop,
.introduce .totop {
    bottom: 110px;
}

.box_logo {
    background: #f6f6f6;
    padding: 10px 5px 5px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
}

ul.list_box_logo {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.list_box_logo li {
    float: left;
    text-align: center;
    margin: 0 9px;
}

ul.list_box_logo li:nth-child(1) {
    width: 40px;
    padding-top: 2px;
}

ul.list_box_logo li:nth-child(2) {
    width: 33px;
}

ul.list_box_logo li:nth-child(3) {
    width: 63px;
    padding-top: 8px;
}

/* =============================================
    Product contents
   =============================================*/

/* ----- main visual ----- */
.mv .product-outlie {
    padding-top: 120px;
    width: 54%;
}

.mv .product-outlie .product-copy {
    margin-top: 60px;
    margin-bottom: 110px;
    font-size: 3.3125rem;
}

.mv .product-price {
    align-items: center;
}

.mv .btn-cart {
    width: 190px;
    margin-left: 30px;
}

.mv .product-outlie.right {
    margin-left: auto;
}

/* ----- feature ----- */
.color-variation li {
    margin: 60px 60px 0;
}

.color-variation .color-tag {
    margin-top: 20px;
    font-size: 0.875rem;
    border: 1px solid #707070;
    color: #707070;
    padding: 3px 30px;
    display: block;
    text-align: center;
}

.offer-second {
    background-color: #f3f4f5;
    padding: 100px 0;
    text-align: center;
}

.offer-list {
    margin-top: 80px;
}

.offer-list li {
    width: 31%;
    height: 250px;
    padding: 0 25px;
}

.offer-list.four-collum li {
    width: 22.5%;
    height: 250px;
}

.offer-img-full {
    width: 100%;
    height: auto;
    margin-top: 60px;
}

.offer-center {
    margin-top: 60px;
    letter-spacing: 0.05em;
    text-align: center;
}

.offer-center em,
.offer-center h2 {
    display: block;
    margin-bottom: 20px;
}

.offer-left {
    margin-top: 60px;
    letter-spacing: 0.05em;
}

.offer-left em {
    display: block;
    margin-bottom: 20px;
}

.img-offer {
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-offer.h-center {
    align-items: center;
}

.img-offer .txt {
    width: 50%;
    letter-spacing: 0.05em;
}

.img-offer .txt p {
    line-height: 1.78em;
}

.img-offer .txt em,
.img-offer .txt h2 {
    margin-bottom: 50px;
}

.img-offer.left .txt {
    margin: 0 0 200px 0;
}

.img-offer.right .txt {
    margin: 200px 0 0 auto;
}

@media all and (-ms-high-contrast:none) {
    /*.img-offer.right .txt {
    margin: 200px 0 0;
  }*/
}

.img-offer-small {
    margin-top: 60px;
    padding: 80px 70px;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    letter-spacing: 0.05em;
}

.img-offer-small em,
.img-offer-small h2 {
    margin-top: 150px;
    display: block;
    width: 50%;
    text-align: left;
}

.img-offer-small p {
    margin-top: 50px;
    width: 50%;
    line-height: 1.78;
}

/* ----- howto ----- */
.howto-list {
    margin-top: 100px;
}

.howto-list li {
    width: 49%;
}

.howto-list li img {
    width: 100%;
}

/* ----- voice ----- */
.voice-list {
    margin-top: 60px;
}

.voice-list li {
    padding: 35px 45px;
    margin-bottom: 10px;
    background-color: #f3f4f5;
    letter-spacing: 0.05em;
}

.voice-list .voice-age {
    display: inline-block;
    border-right: solid 1px #b6b7b8;
    width: 126px;
    font-weight: bold;
}

.voice-list .voice-txt {
    width: calc(100% - 126px);
    padding-left: 40px;
}

#voice .btn-more {
    margin: 50px auto 0;
}

/* ----- Q&A ----- */
section#qa {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.qa-list {
    margin-top: 60px;
}

.qa-list li {
    margin-bottom: 20px;
}

.qa-list .q {
    background-color: #f3f4f5;
    position: relative;
}

.qa-list .q .ttl {
    background: #1a1a1a;
    font-size: 1.875rem;
    padding: 7px 20px 15px;
    color: #fff;
    line-height: 1;
    margin-right: 30px;
}

.qa-list .q p {
    padding: 15px 0;
}

.qa-list .a {
    padding: 0;
    padding-left: 93px;
    max-height: 0;
    margin: 0;
    display: none;
    transition: all .3s ease;
}

.qa-list .a.open {
    padding: 20px 0;
    padding-left: 93px;
    max-height: none;
    display: block;
}

.qa-list .toggle-faq {
    background-image: url("../../img/support/icon-toggle-qa-black-open.png");
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: right 30px center;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.qa-list .toggle-faq:hover {
    opacity: 0.5;
}

.qa-list .toggle-faq.open {
    background-image: url(../../img/support/icon-toggle-qa-black-close.png);
}

/* ----- spec ----- */
.spec-list {
    margin-top: 60px;
    align-items: flex-start;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 40px;
}

.spec-list dl {
    width: 47.5%;
}

.spec-list dl dt,
.spec-list dl dd {
    border-bottom: 1px solid #e7e7e7;
    padding: 20px 0;
    line-height: 1.5em;
}

.spec-list dl dt:first-of-type,
.spec-list dl dd:first-of-type {
    border-top: 1px solid #e7e7e7;
}

.spec-list dl dt {
    width: 45%;
    padding-left: 2em;
    font-weight: bold;
}

.spec-list dl dd {
    width: 55%;
}

.spec-list dl dd.full {
    width: 100%;
    border-bottom: none;
}

.spec-list .link-manual {
    margin-right: 60px;
}

.spec-list .link-option {
    margin-left: 60px;
}

.hapi {
    margin-top: 60px;
    padding: 25px !important;
    position: relative;
    border: 1px solid #dedede;
    overflow: hidden;
}

@media only screen and (min-width: 835px) {
    .hapi {
        margin: 60px auto 0;
        width: 980px;
    }
}

.hapi em {
    position: relative;
}

.hapi em::before {
    content: "";
    display: block;
    width: 69px;
    height: 80px;
    background-image: url(../../img/icon-hapi.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -90px;
    top: 0;
}


/* ----- product ----- */
.product-name h1 {
    line-height: 1.2;
}

.product-name h1 .fs-32 {
    font-size: 28px;
}

.product-name .thin {
    padding-left: 0;
    display: block;
    font-size: 20px !important;
}

.product-name .fs-16 {
    font-size: 28px;
}


/* ----- product-cta ----- */
.product-cta {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 606px;
    position: relative;
}

.product-cta .inner {
    position: inherit !important;
}

@media only screen and (min-width: 1500px) {
    .product-cta {
        min-height: 606px;
    }
}

@media only screen and (min-width: 1600px) {
    .product-cta {
        min-height: 646px;
    }
}

@media only screen and (min-width: 1700px) {
    .product-cta {
        min-height: 687px;
    }
}

@media only screen and (min-width: 1800px) {
    .product-cta {
        min-height: 776px;
    }
}

.product-cta .product-name span {
    font-size: 2.8rem;
    line-height: 1.2;
}

.product-cta .product-name small {
    display: block;
}

.product-cta .product-price {
    margin-top: 114px;
    align-items: center;
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -600px;
    min-width: 1200px;

}

.product-cta .product-price.price2 {
    bottom: 150px !important;
}

.product-cta .btn-cart {
    margin-left: 20px;
}

/* ----- support ----- */
.related-list {
    margin: 60px auto 0;
}

.related-list li {
    text-align: center;
    margin: 0 100px;
    width: 210px;

    display: flex;
    flex-direction: column;
}

.related-list li * {
    display: block;
}

.related-list li img {
    margin-bottom: 50px;
    width: 200px;
    height: 300px;
    /* height: 100%; */
}

.related-list li em,
.related-list li small {
    transition: all .3s ease;
}

.related-list li a:hover em,
.related-list li a:hover small {
    opacity: 0.7;
}

/* ----- support ----- */
section#support {
    background-color: #f6f6f6;
}

.support-list li {
    margin-top: 60px;
    width: 17.5%;
    text-align: center;
}

.support-list li a {
    display: block;
    color: #333 !important;
}

.support-list li a:hover {
    opacity: 0.7;
}

.support-list li img,
.support-list li em {
    margin-bottom: 15px;
}

a.ico_pdf {
    background: url("../../img/ico_pdf.svg") no-repeat 0 4px;
    background-size: 18px 18px;
    padding: 0 0 0 25px;
    display: inline-block;
}

a.ico_pdf:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

.shop-outline-txt .btn-more {
    margin-top: 33px;
    float: right;
    margin-bottom: 70px;
    font-weight: normal;
}

.copy {
    text-align: right;
    padding: 10px 10px 0 0;
    font-size: 14px;
}




/* ----- modal ----- */

.box_modal {
    display: none;
}

.box_modal h2 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 30px 0;
}

.box_modal h3 {
    clear: both;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 25px 0 15px 0;
}

.box_modal h4 {
    clear: both;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 5px 0;
}

.box_teiki_m {
    padding: 0 15px 15px 15px;
    background: #f6f6f6;
    overflow: hidden;
}

.box_modal ul {
    width: 990px;
    margin: 0 auto;
    overflow: hidden;
}

.box_modal ul.modal_ul_02 {
    width: 655px;
}

.box_modal ul li {
    width: 320px;
    float: left;
    margin: 0 15px 15px 0;
}

.box_modal ul li:nth-child(3n) {
    margin: 0 0 15px 0;
}

.box_modal ul.modal_ul_02 li:nth-child(2) {
    margin: 0 0 15px 0;
}

ul.list_2 {
    width: 655px;
    margin: 0 auto;
}

.box_modal .title_contents_06 {
    width: 655px;
    background: none;
    color: #333;
    font-size: 18px;
    font-style: normal;
    text-align: center;
    font-weight: bold;
    padding-bottom: 0;
    margin: 0 auto;
}

.box_modal .title_contents_06 span {
    font-size: 32px;
}

#box_btn_over {
    background: rgba(0, 0, 0, 0.90);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 0 10px 0;
    z-index: 100;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.box_btn_price_03 {
    width: 600px;
    margin: 0 auto;
}

.box_modal .tab_teiki {
    color: #e15757 !important;
}

.box_modal ul.tab-group,
.box_modal ul.tab-group2 {
    width: 100%;
}

.box_modal li.tab,
.box_modal li.tab2 {
    padding: 15px 5px;
    list-style: none;
    text-align: center;
    cursor: pointer;
    background: #ccc;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-bottom: -1px !important;
    margin-right: 2% !important;
    color: #6A6A6A;
    font-weight: bold;
    width: 32% !important;
}

.box_modal li.tab:last-child,
.box_modal li.tab2:last-child {
    margin-right: 0 !important;
}

.box_modal li.tab:hover,
.box_modal li.tab2:hover {}

.box_modal .panel-group,
.box_modal .panel-group2 {
    width: 1045px;
    padding: 25px;
    border: 1px solid #ddd;
    clear: both;
    background: #FFF;
    margin-top: -1px;
}

.box_modal .panel,
.panel2 {
    display: none;
    overflow: hidden;
    min-height: 150px;
}

.box_modal .tab.is-active,
.box_modal .tab2.is-active2 {
    background: #FFF;
    color: #333;
    transition: all 0.2s ease-out;
}

.box_modal .panel.is-show,
.box_modal .panel2.is-show2 {
    display: block;
}

.btn_os {
    text-align: center;
    padding: 15px 0 0 0;
}




.panel ul,
.panel2 ul {
    margin-top: 40px;
}