@charset "UTF-8";
/*top.css*/

/*============================
#contsWrap
============================*/
.contsInner.top {
    background-image: none;
    z-index: 1;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(10%, rgba(255,255,255,0.9)),color-stop(20%, rgba(255,255,255,1)),color-stop(80%, rgba(255,255,255,1)),color-stop(90%, rgba(255,255,255,0.9)),to(rgba(255,255,255,0)));
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 10%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0.9) 90%,rgba(255,255,255,0) 100%);
    overflow: hidden;
    height: 876px;
}
.swiper-container {
  height: 876px;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    content: none;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    content: none;
}
.top_main {
    width: 1200px;
    height: 768px;
    margin: 0 auto;
    top: 87px;
    position: relative;
}
.top_main > img {
    position: absolute;
    top: -20px;
    left: calc((1680px - 1200px) / -2);
    display: block;
    width: 1680px;
    height: 768px;
    z-index: 1;
}
.lead {
    top: 100px;
    left: 0px;
    /*left: -45px;*/
    z-index: 3;
}
.visual {
    bottom: 5px;
    left: 35px;
    z-index: 2;
}
.mov {
    position: absolute;
    bottom: 20px;
    /*bottom: 270px;*/
    /*bottom: 30px;*/
    /*left: 0px;*/
    left: 0px;
    /*left: 825px;*/
    z-index: 4;
}
.mov a {
    width: 400px;
    height: 188px;
    /*    width: 346px;
    height: 252px;*/
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 8px 50px;
    /*padding: 36px 13px;*/

}
.mov a::before {
    content: '';
    background: url('../img/mov_frame2.png?190409') no-repeat center center;
    display: inline-block;
    width: 400px;
    height: 188px;
    /*    width: 346px;
    height: 252px;*/
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
.mov img {
    width: 100%;
    height: 100%;
}

.infoArea {
    /* background-image: url('../common/img/line_ptrn.png'); */
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #fff;
    padding: 20px;
    padding-top: 12px;
}
.infoArea .inner {
    width: 1200px;
    margin: 0 auto;
}
.bnr_topArea {
    width: 1200px;
    padding: 0 30px 56px 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -ms-flex-align: center;
        -webkit-box-align: center;
            align-items: center;
    /* margin-top: -80px; */
    position: relative;
    z-index: 1;
}
.bnr_topArea ul.basicFlx.sa {
    justify-content: center;
}
.bnr_topArea ul.basicFlx.sa li {
    margin: 0 10px;
}
.twArea {
    background: url('../img/frm_tw_pc.png') no-repeat center top;
    width: 446px;
    height: 375px;
    padding: 50px 30px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
}
.twArea .btn {
    position: absolute;
    top: 12px;
    right: 105px;
}
.twArea iframe {
    overflow-y: scroll;
    border-radius: 0 0 50px 50px;
}
.newsArea {
    background: url('../img/frm_news_pc.png') no-repeat center top;
    width: 690px;
    height: 375px;
    padding: 50px 30px 25px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
}
.newsArea .btn {
    position: absolute;
    top: 12px;
    right: 120px;
}
#backnumber.listBox {
    height: 300px;
    padding: 0 25px;
}
.specList {
    background: url('../img/bdr_infoArea_btm_pc.png');
    background-color: #fff;
    color: #412f0c;
    text-align: center;
    line-height: 1.6;
    padding: 50px 20px 20px;
    background-repeat: no-repeat;
    background-position: center top;
}
.bannerArea {
    background-color: #fff;
    padding: 20px 0;
}
.bnr {
    width: 1100px;
    height: 100px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 20px solid #000;
}
.top #footer {
    background-image: none;
}

.bnr_app {
    margin-right: 10px;
    margin-bottom: 10px;
}


.bnr_appArea {
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    align-items: flex-end;
}
.bnr_appArea a {
    margin: 0 15px;
}

/*2021.07.20 Mount*/
.fv-btn__layout-01 {
    width: 179px;
    height: 54px;
    position: absolute;
    top: 100px;
    right: 0px;
    z-index: 1;
    left: 1006px;
    margin: auto;
}
.fv-btn__layout-01 a {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/btn_product.png),url(../img/btn_product_on.png);
    background-size: 100% auto, 0 0;
    background-repeat: no-repeat;
    transition: 0.3s;
}
.fv-btn__layout-01 a:hover {
    background-size: 0 0, 100% auto;
}
.fv-btn__layout-02 {
    width: 340px;
    height: 78px;
    position: absolute;
    bottom: 66px;
    left: 0;
    z-index: 1;
}
.fv-btn__layout-02 a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% auto, 0 0;
    background-repeat: no-repeat;
    transition: 0.3s;
}
.fv-btn__layout-02 a:hover {
    background-size: 0 0, 100% auto;
}

.fv-btn__layout-02.img_top_bg_pc6 a {
    background-image: url(../img/btn_youtube@2x.png), url(../img/btn_youtube_on@2x.png);
}
.fv-btn__layout-02.img_top_bg_pc7 a {
    background-image: url(../img/btn_youtube@2x.png), url(../img/btn_youtube_on@2x.png);
}

.top_main__link {
  display: block;
  position: absolute;
  top: -20px;
  left: calc((1680px - 1200px) / -2);
  display: block;
  width: 1680px;
  height: 768px;
  z-index: 1;
}
.top_main__link img {
  display: block;
  width: 1680px;
  height: 768px;
  z-index: 1;
}
.swiper-slide {
    background: none;
}

/*FV swiper 上書き*/
.swiper-pagination {
    background: none !important;
}
.swiper-pagination span:nth-child(1) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(2) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(3) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(4) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(5) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(6) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(7) {
    background-image: none !important;
    width: 62px !important;
    height: 5px !important;
    background: #eeeddb !important;
    box-sizing: border-box;
    /* border-top: solid 6px #FFF;
    border-bottom: solid 6px #FFF; */
}

.swiper-pagination span:nth-child(1):hover,
.swiper-pagination span:nth-child(1).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(2):hover,
.swiper-pagination span:nth-child(2).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(3):hover,
.swiper-pagination span:nth-child(3).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(4):hover,
.swiper-pagination span:nth-child(4).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(5):hover,
.swiper-pagination span:nth-child(5).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(6):hover,
.swiper-pagination span:nth-child(6).swiper-pagination-bullet-active {
    
}

.swiper-pagination span:nth-child(7):hover,
.swiper-pagination span:nth-child(7).swiper-pagination-bullet-active {
    
}

.swiper-pagination-bullet {
    width: 62px !important;
    height: 17px !important;
    opacity: 1 !important;
    background-color: transparent !important;
    /* box-shadow: 0px 0px 4px rgba(0,0,0,0.25); */
    position: relative;
}
.swiper-pagination-bullet-active:after {
    content:  "";
    width: 100%;
    height: 100%;
    background: #786f49;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: pagination_bar;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes pagination_bar {
    0% {
        width: 0px;
    }
    100% {
        width: 62px;
    }
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    margin-bottom: -2px !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 3px !important;
    border-radius: 0px;
}