@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    common.css
*
*
------------------------------------------------------------------------------------------ */
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

body{
    font-family: '游ゴシック','YuGothic',Meiryo,メイリオ,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    color: #000;
    font-size : 18px;
    background-color:#fff;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    word-break: normal;
    position: relative;
    z-index: 1;
}

body, html{
    width: 100%;
    height: 100%;
}

a, li, p, div, button{ outline: none !important; }
a{ color: #000; text-decoration: none;}

a, li, div, p{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}


@media screen and (min-width : 681px){
    img.sp{ display: none;}
    #wrap .bg.sp{ display: none;}
}

.section{
    width: 100%;
    position: absolute;
    z-index: 1 !important;
}

.section .fixed_elm{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.only_sp .section .fixed_elm,
.only_tablet .section .fixed_elm{
    background-position: top !important;
    -webkit-transform: perspective(0);
    transform: perspective(0);
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
} 

.section .fixed_elm.z{
    position: relative;
    z-index: 2;
}

.only_sp .section .fixed_elm.z,
.only_tablet .section .fixed_elm.z{
    -webkit-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 1px);
}

.section .fixed_elm.on{
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

.only_sp .section .fixed_elm.on,
.only_tablet .section .fixed_elm.on{
    z-index: -1;
}

#wrap{
    overflow: hidden;
    opacity: 0;
    position: relative;
    z-index: 1;
}

#wrap .bg{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#contents_area{
    overflow: hidden;
    position: relative;
}

.o_anim{
    opacity: 0;
}

/*

    .s00, .s00_2

*/
#wrap .txt_area{
    width: 100%;
    background-image:url(../images/parts_bg_title.png);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 5;
}

#wrap .s00 .txt_area{
    opacity: 0;
    width: 100%;
}

#wrap .s00 .bg{
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden
}

#wrap .s00 .txt_area_inner{
    width: 580px;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
}

#wrap .s00 .bg_02{
    position: relative;
    z-index: 2;
}

#wrap .s00_2 .txt_area_inner{
    width: 680px;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
}

#wrap .s20 .txt_area_inner,
#wrap .s21 .txt_area_inner{
    width: 680px;
    padding: 35px 0 50px 0;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
}

#wrap .s00 h1{
    position: relative;
    top: 0;
    left: 0;
}

#wrap .s00 .title li{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

#wrap .section .txt_box{
    position: absolute;
    top: 0;
    right: 30px;
    z-index: 1000;
}

#wrap .section .txt_box a{
    padding: 0 0 30px 0;
    display: inline-block;
    line-height: 0;
    font-size: 0;
    vertical-align: top;
    position: relative;
    transition: opacity .2s ease .05s;
}

#wrap .section .txt_box a:hover{
    opacity: .7;
}

#wrap .section .txt_box img{ height: auto; position: relative;}

#wrap .section .txt_box a:after{
    content: '';
    display: block;
    width: 100%;
    height: 30px;
    background-image:url(../images/parts_txt_box_bg.png);
    background-position: center top;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#wrap .section .txt_box a:before{
    content: '';
    display: block;
    width: 100%;
    height: 30px;
    background-image:url(../images/parts_btn_txt_store.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 104px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

#wrap.soon .section .txt_box a:before{
    background-image:url(../images/parts_btn_txt_detail.png) !important;
    background-size: 100px;
}

#wrap .section .txt_box.coming_soon span{
    position: absolute;
    top: -90px;
    left: -100px;
    z-index: -1;
}

#wrap .section .txt_box.coming_soon span img{
    width: 144px;
    height: auto;
}

#wrap .section .fixed{
    position: fixed !important;
}


.badge{
    position: fixed;
    bottom: 87px;
    right: 20px;
    z-index: 1 !important;
}

.on1014 .badge.oct{ display: none !important;}
.on1116 .badge{ display: none !important;}

.copyright{
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1 !important;
}

.btn_arrow{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    transition: all .1s ease;
    bottom: 25px;
    position: fixed;
    z-index: 1 !important;
}

.btn_arrow span{
    width: 60px;
    height: 65px;
    background-image:url(../images/parts_ico_page_arrow.png);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 60px;
    display: inline-block;
    position: relative;
    transition: background .1s ease;
    cursor: pointer;
}

.btn_arrow span:hover{
    background-position: center 5px;
}


/*
*
    .footer
*
*/

.section.footer{
    opacity: 0;
    text-align: center;
    background-color: #fff;
    position: relative;
    z-index: 10000;
}

.section.footer a{
    transition: opacity .2s ease .05s;
}

.section.footer a:hover{
    opacity: .7;
}

.foot_information{
    width: 100%;
    padding: 80px 0 35px 0;
    margin: 0 0 80px 0;
    display: inline-block;
    border-bottom: 1px solid #000;
}

.section.footer dl{
    display: inline-block;
    text-align: left;
    line-height: 2em;
    letter-spacing: .075em;
}

.section.footer dt{
    font-weight: bold;
    color: #FF0082;
}

.section.footer dd{
    margin: 0 0 35px 0;
    padding: 0 0 0 1em;
}

.section.footer .foot_banner .banner img{
    width: 100%;
    height: auto;
    margin: 0 0 15px 0;
}

.section.footer .foot_banner .banner{
    width: 100%;
    max-width: 1000px;
    display: inline-block;
    margin: 0 0 55px 0;
}

.section.footer .foot_banner .banner a{
    color: #FF0082;
    font-size: 14px;
    letter-spacing: .2em;
    font-weight: bold;
}
.section.footer .foot_banner .banner a:hover{
    text-decoration: underline;
}

.section.footer .foot_banner .banner_list{
    padding: 0 0 50px 0;
}

.section.footer .foot_banner .banner_list ul{
    width: 100%;
    max-width: 740px;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    font-size: 0;
}

.section.footer .foot_banner .banner_list li{
    width: 33.333%;
    line-height: 0;
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.section.footer .foot_banner .banner_list li img{
    width: 100%;
    height: auto;
}

.section.footer .foot_banner .sns_share{
    width: 100%;
    max-width: 1000px;
    padding: 0 0 50px 0;
    margin: 0 0 35px 0;
    display: inline-block;
    border-bottom: 1px solid #000;
}

.section.footer .foot_banner .sns_share h3{
    margin: 0 0 30px 0;
    font-size: 17px;
    letter-spacing: .15em;
}

.section.footer .foot_banner .sns_share li{
    margin: 0 26px;
    display: inline-block;
}

.section.footer .foot_banner .sns_share li img{
    width: 40px;
    height: auto;
}

.section.footer .foot_banner .foot_nav{
    padding: 0 0 30px 0;
    font-size: 16px;
}

.section.footer .foot_banner .foot_nav ul{
    padding: 0 0 20px 0;
    display: block;
}

.section.footer .foot_banner .foot_nav li{
    margin: 0 28px;
    display: inline-block;
    letter-spacing: .15em;
}

.section.footer .foot_banner .foot_nav .logo img{
    width: 230px;
    height: auto;
}


/* --------------------------------------------------------------------------------------------------------------
*
    max-width: 680px
*
-------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 680px) {
body{
    z-index: 10;
}

img.pc{ display: none;}

#wrap .bg{
    width: 100%;
    height: 100%;
}

#wrap .bg.pc{
    display: none;
}

/*

    .s00, .s00_2

*/
#wrap .s00 .txt_area img{
    width: 100%;
    max-width: 580px;
    height: auto;
}

#wrap .s00_2 .txt_area img{
    width: 95%;
}
    
#wrap .s00_2 .txt_area,
#wrap .s00 .txt_area{
    width: 100%;
    background-image:url(../images/parts_bg_title.png);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

#wrap .s00 .txt_area_inner{
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
}

#wrap .s00_2 .txt_area_inner{
    width: 100%;
}

#wrap .s20 .txt_area_inner,
#wrap .s21 .txt_area_inner{
    width: 100%;
    max-width: 580px;
    padding: 20px 0;
}

#wrap .s20 .txt_area img,
#wrap .s21 .txt_area img{
    width: 90%;
    height: auto;
}

#wrap .section .txt_box{ right: 5px !important;}
#wrap .section .txt_box.left{ left: 5px !important;}
#wrap .section .txt_box.right{ right: 5px !important;}
#wrap .section .txt_box.top{ top: 5px !important;}
#wrap .section .txt_box.b_40{ margin: 40px 0 0 0;}

#wrap .section.s01 .txt_box img{ width: 169px;}
#wrap .section.s02 .txt_box img{ width: 177px;}
#wrap .section.s03 .txt_box img{ width: 205px;}
#wrap .section.s04 .txt_box img{ width: 161px;}
#wrap .section.s05 .txt_box img{ width: 170px;}
#wrap .section.s06 .txt_box img{ width: 195px;}
#wrap .section.s07 .txt_box img{ width: 185px;}
#wrap .section.s08 .txt_box img{ width: 213px;}
#wrap .section.s09 .txt_box img{ width: 159px;}
#wrap .section.s10 .txt_box img{ width: 142px;}
#wrap .section.s11 .txt_box img{ width: 164px;}
#wrap .section.s12 .txt_box img{ width: 149px;}
#wrap .section.s13 .txt_box img{ width: 153px;}
#wrap .section.s14 .txt_box img{ width: 164px;}
#wrap .section.s15 .txt_box img{ width: 173px;}
#wrap .section.s16 .txt_box img{ width: 249px;}
#wrap .section.s17 .txt_box img{ width: 219px;}
#wrap .section.s18 .txt_box img{ width: 162px;}
#wrap .section.s19 .txt_box img{ width: 174px;}

#wrap .section.s22 .txt_box img{ width: 164px;}
#wrap .section.s23 .txt_box img{ width: 164px;}
#wrap .section.s24 .txt_box img{ width: 157px;}

#wrap .section .txt_box a{
    padding: 0 0 20px 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    transition: opacity .2s ease .05s;
}

#wrap .section .txt_box a:after{
    height: 20px;
    background-image:url(../images/parts_txt_box_bg.png);
}

#wrap .section .txt_box a:before{
    height: 20px;
    background-size: 74px;
}

#wrap.soon .section .txt_box a:before{
    background-size: 74px;
}

#wrap .section .txt_box.coming_soon span img{
    width: 80px;
    height: auto;
}

#wrap .section.s18 .txt_box.coming_soon span{ top: -40px; left: -60px;}
#wrap .section.s19 .txt_box.coming_soon span{ top: 10px; left: -70px;}

.btn_arrow{
    text-align: right;
    right: 10px !important;
    bottom: 5px !important;
}

.btn_arrow span{
    width: 45px;
    height: 50px;
    background-size: 45px;
}

.badge{
    left: 5px;
    bottom: 65px;
}

.badge img{
    width: 84px;
    height: auto;
}

.copyright{
    left: 10px;
    bottom: 10px;
}

.copyright img{
    width: 110px;
    height: auto;
}


/*
*
    .footer
*
*/
.foot_information{
    width: 100%;
    padding: 30px 0 5px 0;
    margin: 0;
    display: inline-block;
    border-bottom: none;
}

.section.footer dl{
    display: inline-block;
    padding: 0 15px;
    text-align: left;
    line-height: 2em;
    letter-spacing: .075em;
    font-size: 10px;
}

.section.footer dt{
    font-weight: bold;
    color: #FF0082;
}

.section.footer dd{
    margin: 0 0 25px 0;
    padding: 0 0 0 1em;
}

.section.footer .foot_banner .banner img{
    width: 100%;
    height: auto;
    margin: 0;
}

.section.footer .foot_banner .banner{
    width: inherit;
    padding: 0 5px;
    display: inline-block;
    margin: 0 0 15px 0;
}

.section.footer .foot_banner .banner a{
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: bold;
}

.section.footer .foot_banner .banner a:hover{
    text-decoration: underline;
}

.section.footer .foot_banner .banner_list{
    padding: 0 0 40px 0;
}

.section.footer .foot_banner .banner_list ul{
    width: 100%;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    font-size: 0;
}

.section.footer .foot_banner .banner_list li{
    width: 50%;
    line-height: 0;
    display: inline-block;
    box-sizing: border-box;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.section.footer .foot_banner .banner_list li img{
    width: 100%;
    height: auto;
}

.section.footer .foot_banner .sns_share{
    width: 100%;
    max-width: 1000px;
    padding: 0 0 50px 0;
    margin: 0 0 35px 0;
    display: inline-block;
    border-bottom: 1px solid #000;
}

.section.footer .foot_banner .sns_share h3{
    margin: 0 0 30px 0;
    font-size: 14px;
    letter-spacing: .15em;
}

.section.footer .foot_banner .sns_share li{
    margin: 0 10px;
    display: inline-block;
}

.section.footer .foot_banner .sns_share li img{
    width: 40px;
    height: auto;
}

.section.footer .foot_banner .foot_nav{
    padding: 0 0 30px 0;
    font-size: 14px;
}

.section.footer .foot_banner .foot_nav ul{
    padding: 0 0 20px 0;
    display: block;
}

.section.footer .foot_banner .foot_nav li{
    margin: 0 10px;
    display: inline-block;
    letter-spacing: .15em;
}

.section.footer .foot_banner .foot_nav .logo img{
    width: 230px;
    height: auto;
}



}