@import url(base.css);
.intro-main,
.intro-video {
    width: 100vw;
    top: 0;
    left: 0
}

?@charset "UTF-8";
h1,
address,
blockquote,
button,
dd,
dt,
h2,
h3,
h4,
h5,
h6,
input,
li,
p,
pre,
select,
td,
textarea,
th {
    font-size: 14px;
    -webkit-text-size-adjust: none
}

article,
aside,
figure,
footer,
header,
main,
nav,
section {
    display: block
}

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

a {
    color: #000
}

a:active,
a:hover {
    color: #000;
    text-decoration: none
}

*,
:after,
:before {
    box-sizing: border-box
}

body {
    font-size: 14px;
    color: #353535;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    position: relative
}

.sp {
    display: none
}

.intro-video {
    position: fixed;
    height: 100vh;
    z-index: 2
}

.intro-video iframe,
.intro-video video {
    width: 100vw;
    height: 100%;
    background: #000
}

.intro-main {
    background: rgba(0, 0, 0, .2);
    height: 100vh;
    z-index: 5;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease
}

#pause-button,
.intro-lang {
    position: fixed;
    right: 30px;
    display: inline-block;
    z-index: 6;
    padding: 10px;
    width: 60px;
    height: 35px;
    outline: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700
}

.intro-main.show {
	background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    visibility: visible
}

#pause-button {
    bottom: 30px;
    background: #fff;
    opacity: .8;
    border: none
}

.intro-lang {
    top: 30px;
    text-align: center;
    color: #fff;
    border: 1px solid;
    text-decoration: none;
    transition: all 1s ease
}

.intro-lang:hover {
    color: #d8a725;
    border: 1px solid #d8a725
}

.btn-txt01,
.btn-txt02 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    transition: all .5s ease;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.btn-txt01 {
    opacity: 1
}

#pause-button.active .btn-txt01,
.btn-txt02 {
    opacity: 0
}

#pause-button.active .btn-txt02 {
    opacity: 1
}

.intro-menu,
.intro-menu.action {
    background: url(../images/Asset-1.png) no-repeat;
    width: 122px;
    height: 132px;
    position: relative;
    background-size: 100% auto
}

.intro-menu.action {
    background: url(../images/Asset-2.png) no-repeat;
    background-size: 100% auto
}

.intro-menu {
    cursor: pointer
}

.intro-menu li {
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease
}

.intro-menu li a,
.intro-menu li a:before {
    position: relative;
    display: block;
    transition: all .5s ease
}

.intro-menu li.show {
    opacity: .9;
    visibility: visible
}

.intro-menu li a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #fff
}

.intro-menu li:nth-child(1) {
    bottom: -52px;
    left: 50%;
    transform: translateX(-50%)
}

.intro-menu li:nth-child(1).show {
    bottom: -75px
}

.intro-menu li:nth-child(2) {
    top: 74px;
    right: -88px
}

.intro-menu li:nth-child(2).show {
    top: 94px;
    right: -115px
}

.intro-menu.EN li:nth-child(2).show {
    right: -115px
}

.intro-menu li:nth-child(3) {
    top: 0;
    right: -75px
}

.intro-menu li:nth-child(3).show {
    right: -97px
}

.intro-menu.EN li:nth-child(3).show {
    right: -105px
}

.intro-menu li:nth-child(4) {
    top: -57px;
    left: 50%;
    transform: translateX(-50%)
}

.intro-menu li:nth-child(4).show {
    top: -77px
}

.intro-menu li:nth-child(5) {
    top: 12px;
    left: -77px
}

.intro-menu li:nth-child(5).show {
    left: -97px
}

.intro-menu.EN li:nth-child(5).show {
    left: -110px
}

.intro-menu li:nth-child(6) {
    top: 80px;
    left: -94px
}

.intro-menu li:nth-child(6).show {
    top: 107px;
    left: -118px
}

.intro-menu.EN li:nth-child(6).show {
    top: 107px;
    left: -115px
}

.intro-menu li a:before {
    content: '';
    width: 39px;
    height: 39px;
    left: calc(50% - 20px)
}

.intro-menu li:nth-child(1) a:before {
    background: url(../images/intro_ico01_W.png) no-repeat;
    margin-bottom:10px;
}

.intro-menu li:nth-child(2) a:before {
    background: url(../images/intro_ico02_W.png) no-repeat;
    display: inline-block;
    left: 0;
    vertical-align: middle;
    margin-right: 8px
}

.intro-menu li:nth-child(3) a:before {
    background: url(../images/intro_ico03_W.png) no-repeat;
    display: inline-block;
    left: 0;
    vertical-align: middle;
    margin-right: 8px
}

.intro-menu li:nth-child(4) a:before {
    background: url(../images/intro_ico04_W.png) no-repeat;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px)
}

.intro-menu li:nth-child(5) a:before {
    background: url(../images/intro_ico05_W.png) no-repeat;
    position: absolute;
    right: 0;
    top: calc(50% - 20px);
    left: auto
}

.intro-menu li:nth-child(6) a:before {
    background: url(../images/intro_ico06_W.png) no-repeat;
    position: absolute;
    right: 0;
    top: calc(50% - 20px);
    left: auto
}

.intro-menu li:hover a {
    color: #70ab4b;
}

.intro-menu li:nth-child(5) a,
.intro-menu li:nth-child(6) a {
    padding-right: 49px
}

.intro-menu li:nth-child(4) a {
    padding-bottom: 49px
}

.intro-menu li:hover:nth-child(1) a:before {
    background: url(../images/intro_ico01_hv.png) no-repeat
}

.intro-menu li:hover:nth-child(2) a:before {
    background: url(../images/intro_ico02_hv.png) no-repeat
}

.intro-menu li:hover:nth-child(3) a:before {
    background: url(../images/intro_ico03_hv.png) no-repeat
}

.intro-menu li:hover:nth-child(4) a:before {
    background: url(../images/intro_ico04_hv.png) no-repeat
}

.intro-menu li:hover:nth-child(5) a:before {
    background: url(../images/intro_ico05_hv.png) no-repeat
}

.intro-menu li:hover:nth-child(6) a:before {
    background: url(../images/intro_ico06_hv.png) no-repeat
}

@media screen and (max-width:768px) {
    #footer,
    #main,
    #wrapper {
        min-width: 100%
    }
    .b01-itm-txt,
    .b01-txt,
    .b02-txt,
    .b03-list li,
    .main-list li,
    .menu-icon {
        font-size: 14px
    }
    .b03-img,
    .main-img,
    .menu-icon {
        text-align: center
    }
    #wrapper {
        margin: 0;
        padding-top: 65px
    }
    .container {
        padding: 0 3%;
        width: 100%
    }
    .sp {
        display: block
    }
    .pc {
        display: none
    }
    .menu-icon {
        width: 40px;
        height: 38px;
        box-sizing: border-box;
        text-transform: uppercase;
        line-height: 1em;
        cursor: pointer;
        color: #fff;
        padding: 8px 0;
        z-index: 99999;
        background: #16404e;
        display: block
    }
    .menu-icon span {
        display: block;
        margin: 0 auto 15px;
        width: 26px;
        height: 3px;
        background-color: #fff;
        -webkit-transition-duration: 0;
        -moz-transition-duration: 0;
        -ms-transition-duration: 0;
        -o-transition-duration: 0;
        transition-duration: 0;
        -webkit-transition-delay: .2s;
        -moz-transition-delay: .2s;
        -ms-transition-delay: .2s;
        -o-transition-delay: .2s;
        transition-delay: .2s;
        top: 10px;
        left: 0;
        position: relative
    }
    .menu-icon span::after,
    .menu-icon span::before {
        display: block;
        content: '';
        position: absolute;
        width: 26px;
        height: 3px;
        background-color: #fff;
        -webkit-transition-property: margin, -webkit-transform;
        -webkit-transition-duration: .2s;
        -moz-transition-duration: .2s;
        -ms-transition-duration: .2s;
        -o-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-delay: .2s, 0;
        -moz-transition-delay: .2s, 0;
        -ms-transition-delay: .2s, 0;
        -o-transition-delay: .2s, 0;
        transition-delay: .2s, 0
    }
    .menu-icon span::before {
        margin-top: -8px
    }
    .menu-icon span::after {
        margin-top: 8px
    }
    .menu-icon.active span {
        background-color: transparent
    }
    #header,
    .gnavi {
        position: fixed;
        background: rgba(255, 255, 255, .9);
        z-index: 999
    }
    .menu-icon.active span::after,
    .menu-icon.active span::before {
        margin-top: 0;
        -webkit-transition-delay: 0, .2s;
        -moz-transition-delay: 0, .2s;
        -ms-transition-delay: 0, .2s;
        -o-transition-delay: 0, .2s;
        transition-delay: 0, .2s
    }
    .menu-icon.active span::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    .menu-icon.active span::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
    #totop {
        width: 50px;
        right: 3%;
        bottom: 50px;
        line-height: 0
    }
    #totop a:nth-child(2) {
        width: 40px;
        display: block;
        margin: 0 auto
    }
    #header,
    .gnavi,
    .submenu {
        width: 100%;
        left: 0
    }
    #totop a {
        margin-bottom: 5px
    }
    #header {
        top: 0;
        padding: 10px 0
    }
    .gnavi {
        top: 65px;
        height: calc(100% - 65px);
        overflow: auto;
        display: none
    }
    .gnavi a {
        display: block;
        padding: 10px 20px;
        background: #16404e;
        color: #fff;
        margin: 0 0 1px
    }
    .gnavi li {
        margin: 0
    }
    .submenu {
        position: relative;
        top: 0;
        display: block
    }
    .submenu a {
        background: #d1a541;
        color: #fff!important
    }
    .h-menu>li:nth-child(1) a {
        width: 26px;
        height: 25px;
        overflow: hidden;
        display: block;
        padding-left: 26px
    }
    .h-menu>li:nth-child(2) a,
    .h-menu>li:nth-child(3) a {
        width: 20px;
        height: 25px;
        overflow: hidden;
        display: block;
        padding-left: 20px
    }
    .h-menu>li:nth-child(2) a {
        width: 26px
    }
    .h-menu>li:nth-child(4) span {
        width: 26px;
        height: 25px;
        overflow: hidden;
        display: block;
        padding-left: 26px
    }
    .main-item .container {
        display: block;
        height: auto;
        padding: 0
    }
    .main-img {
        width: 100%;
        margin: 0
    }
    .main-img img {
        margin: 0 auto;
        max-width: 100%;
        width: 100%
    }
    .main-slide:after,
    .main-slide:before,
    .mainvisual:before {
        display: none
    }
    .box03 .container,
    .sp-cont,
    .sp-main {
        display: block
    }
    .main-cont {
        width: 100%;
        padding: 30px 3%;
        background: #16404e
    }
    .b03-ttl,
    .main-ttl {
        font-size: 24px
    }
    .main-btn a {
        font-size: 17px;
        width: 170px
    }
    .idx-h3 {
        font-size: 24px;
        background-size: 230px auto;
        padding-bottom: 25px
    }
    .b01-ttl a,
    .b02-ttl,
    .sp-main-btn a {
        font-size: 17px
    }
    .b02-item {
        width: calc(35% - 10px)
    }
    .b02-item:nth-child(3n+1) {
        width: 65%
    }
    .box03 {
        padding: 40px 0
    }
    .b03-img {
        width: 100%;
        margin: 0 0 10px
    }
    .b04-slide {
        padding: 0 30px
    }
    .b04-slide .slick-prev.slick-arrow {
        left: 0
    }
    .b04-slide .slick-next.slick-arrow {
        right: 0
    }
    .main-slide .slick-prev.slick-arrow {
        left: 20px
    }
    .main-slide .slick-next.slick-arrow {
        right: 20px
    }
    .main-slide .slick-arrow {
        width: 18px;
        height: 42px;
        transform: none;
        top: 35%
    }
    .main-slide .slick-dots {
        bottom: 0
    }
    .footer01 .container {
        flex-wrap: wrap
    }
    .f-mod {
        max-width: none;
        margin: 0 0 15px
    }
    .under #main {
        width: 100%;
        padding: 0 3%
    }
    .sp-main-img {
        width: 100%;
        justify-content: center;
        margin: 0 0 30px
    }
    .sp-main-thumb {
        margin: 0 10px 0 0
    }
    .sp-main-info {
        width: 100%
    }
    .sp-main-ttl {
        font-size: 22px
    }
    .sp-cont-main {
        width: 100%;
        margin: 0 0 30px
    }
    .sp-cont-related {
        margin: 0 auto;
        width: 100%
    }
    .sp-cont-list {
        display: flex;
        flex-wrap: wrap
    }
    .sp-cont-item {
        width: 32%;
        margin-right: 2%;
        margin-bottom: 20px
    }
    .mua-item:nth-child(2n),
    .sp-cont-item:nth-child(3n) {
        margin-right: 0
    }
    .sp-itm-ttl {
        font-size: 16px
    }
    .sp-itm-price {
        font-size: 20px;
        line-height: 1em
    }
    .under-img {
        width: 40%;
        min-height: 300px
    }
    .under-main {
        width: 60%;
        padding: 30px
    }
    .under-ttl01 {
        font-size: 17px
    }
    .under-txt {
        font-size: 14px
    }
    .under-ttl {
        font-size: 22px;
        background-size: 250px auto
    }
    .mua-item {
        width: calc(50% - 5px)
    }
}

@media screen and (max-width:640px) {
   
}

@media screen and (max-width:425px) {
    
}

@media screen and (max-width:375px) {
    .intro-menu,
    .intro-menu.action {
        width: 100px;
        height: 108px
    }
    .intro-menu.EN li:nth-child(2).show {
        top: 77px;
        right: -116px
    }
    .intro-menu.EN li:nth-child(3).show {
        right: -109px
    }
    .intro-menu.EN li:nth-child(6).show {
        top: 90px;
        left: -114px
    }
}