@charset "utf-8";

/*==========================================

common

==========================================*/
.fLeft{float:left;}
.fRight{float:right;}
.alignR{text-align:right !important;}
.alignC{text-align:center !important;}
.alignL{text-align:left !important;}
.alignVM{vertical-align:middle !important;}
.alignVT{vertical-align:top !important;}
.alignVB{vertical-align:bottom !important;}
.alignVBase{vertical-align:baseline !important;}
em{
    font-weight: bold;
    font-style: normal;
}
.first-child{margin-top:0px !important;}
.mAuto{margin:0 auto !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}

.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb35{margin-bottom:35px !important;}

.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}

.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}
.ml60{margin-left:60px !important;}
.ml65{margin-left:65px !important;}
.ml70{margin-left:70px !important;}
.ml135{margin-left:135px !important;}

.pt0{padding-top:0px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}

.font10{font-size: 10px;}
.font14{font-size: 14px;}
.bold{font-weight: bold;}
.colorR{color:#b5000e;}

/* list */
#contents p.note01,
#contents ul.note01 li{
    text-indent:-1.352em;
    margin-left:1.352em;
    line-height:150%;
}
/* Disc */
#contents ul.list-disc {
    margin-bottom:0;
}
#contents ul.list-disc li {
    margin-left:15px;
    list-style-type:disc;
}

/*==========================================

Layout

==========================================*/
/* contents
------------------------------------------*/
html,body {
    width: 100%;
    background:url(../images/bg_body.png) repeat center 0;
}
p,ul,li,dl,dt,dd,h1,h2,h3,h4{
    margin: 0;
    padding: 0;
    line-height: 1;
}
ul,li{
    list-style-type: none;
}
a,iframe{
    border: 0;
}
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

#wrap {
    width: 1500px;
    background: #fff;
    margin: 0 auto;
}

#contents { background:url(../images/bg_cont_01.jpg) no-repeat center 565px;}
#bg01 { background:url(../images/bg_cont_02.jpg) no-repeat center 1105px;}
#bg02 { background:url(../images/bg_cont_03.jpg) no-repeat center 1716px;}
#bg03 { background:url(../images/bg_cont_04.jpg) no-repeat center 2632px;}
#bg04 { background:url(../images/bg_cont_05.jpg) no-repeat center 3442px;}
#bg05 { background:url(../images/bg_cont_06.jpg) no-repeat center 4196px;}

/* head
------------------------------------------*/
#head{
    background:url(../images/bg_head_top.jpg) no-repeat center 0;
}
#head #btm{
    background:url(../images/bg_head_btm.png) no-repeat center 565px;
}
#head #inner{
    width: 1004px;
    min-height: 666px;
    margin: 0 auto;
    position: relative;
}
#head #inner h1{
    width: 713px;
    height: 460px;
    background:url(../images/h1.png) no-repeat 0 0;
    text-indent: -9999px;
    position: absolute;
    top: 113px;
    left: 312px;
}

/* main
------------------------------------------*/
#main{
    overflow: hidden;
}

#main .section {
    width: 1004px;
    margin: 0 auto;
    position: relative;
}

/* catch */
#main .section .catch {
    height: 331px;
    margin-top: 108px;
}
#main .section .catch p {
    width: 869px; height: 147px;
    margin: 0 auto;
    background:url(../images/txt_catch.png) no-repeat center 0;
    text-indent: -9999px;
}

/* pv */
#main .section .pv {
    height: 611px;
}
#main .section .pv h2 {
    width: 593px; height: 40px;
    margin: 0;
    background:url(../images/h2_pv.png) no-repeat 0 0;
    text-indent: -9999px;
}
#main .section .pv p a {
    display: block;
    width: 660px;
    height: 381px;
    margin: 47px auto 0;
    background:url(../images/btn_pv.png) no-repeat center 0;
    text-indent: -9999px;
}
#main .section .pv p a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}

/* story */
#main .section .story {
    height: 396px;
}
#main .section .story h2 {
    width: 203px; height: 43px;
    margin: 0;
    background:url(../images/h2_story.png) no-repeat 0 0;
    text-indent: -9999px;
}
#main .section .story p {
    width: 809px; height: 189px;
    margin: 41px auto 0;
    background:url(../images/txt_story.png) no-repeat 0 0;
    text-indent: -9999px;
}

/* apple watch */
#main .section .aw {
    height: 520px;
    background:url(../images/img_aw.png) no-repeat right 0;
}
#main .section .aw h2 {
    width: 689px; height: 54px;
    margin: 0;
    background:url(../images/h2_aw.png) no-repeat 0 0;
    text-indent: -9999px;
}
#main .section .aw p {
    width: 684px; height: 220px;
    margin: 64px 0 0 12px;
    background:url(../images/txt_aw.png) no-repeat 0 0;
    text-indent: -9999px;
}

/* screenshots */
#main .section .ss {
    height: 810px;
    position: relative;
}
#main .section .ss h2 {
    width: 451px; height: 43px;
    margin: 0;
    background:url(../images/h2_ss.png) no-repeat 0 0;
    text-indent: -9999px;
}
#main .section .ss #tabs {
    width: 421px; height: 723px;
    margin: 44px 0 0 42px;
    text-indent: -9999px;
    background:url(../images/img_ss_01.png) no-repeat 0 bottom;
}

#main .section .ss #tabs .panel {
    width: 247px; height: 308px;
    background:url(../images/img_switc_01.jpg) no-repeat 0 0;
    position: absolute;
    left: 119px; top: 294px;
}
#main .section .ss #tabs #panel2 {
    width: 247px; height: 308px;
    background:url(../images/img_switc_02.jpg) no-repeat 0 0;
    position: absolute;
    left: 119px; top: 294px;
}
#main .section .ss #tabs #panel3 {
    width: 247px; height: 308px;
    background:url(../images/img_switc_03.jpg) no-repeat 0 0;
    position: absolute;
    left: 119px; top: 294px;
}

#main .section #tabs #tab{
    width: 389px; height: 136px;
    position: absolute;
    right: 0; top: 338px;
    padding: 45px 45px 46px 50px;
    background:url(../images/img_ss_02.png) no-repeat 0 0;
}
#main .section #tabs #tab li{
    float: left;
    width: 109px;
    height: 136px;
    text-indent:-9999px;
    margin-left: 31px;
    background:url(../images/btn_switch.png) left top no-repeat;
}
#main .section #tabs #tab li:first-child{
    margin-left: 0;
}
#main .section #tabs #tab li.switch01{
    background-position: 0 0;
}
#main .section #tabs #tab li.switch02,
.en #main .section #tabs #tab li.switch02{
    background-position: -140px 0;
}
#main .section #tabs #tab li.switch03,
.en #main .section #tabs #tab li.switch03{
    background-position: -280px 0;
}
#main .section #tabs #tab li.switch01:hover,
#main .section #tabs #tab li.active.switch01{
    background-position: 0 -136px;
}
#main .section #tabs #tab li.switch02:hover,
#main .section #tabs #tab li.active.switch02{
    background-position: -140px -136px;
}
#main .section #tabs #tab li.switch03:hover,
#main .section #tabs #tab li.active.switch03{
    background-position: -280px -136px;
}
.disnon {
    display: none;
}


/* staff */
#main .section .staff {
    height: 665px;
}
#main .section .staff h2 {
    width: 191px; height: 43px;
    margin: 89px 0 0;
    background:url(../images/h2_staff.png) no-repeat 0 0;
    text-indent: -9999px;
}
#main .section .staff dl {
    width: 593px; height: 272px;
    margin: 43px 0 0 12px;
    text-indent: -9999px;
    background:url(../images/txt_staff.png) no-repeat 0 0;
}

/* spec */
#main .section .spec {
    height: 596px;
}
#main .section .spec .box {
    width: 768px; height: 310px;
    margin: 0 auto;
    padding-top: 67px;
    background:url(../images/bg_spec.png) no-repeat 0 0;
}
#main .section .spec dl {
    width: 613px; height: 176px;
    margin: 0 auto 0;
    text-indent: -9999px;
    font-size: 0;
    background:url(../images/txt_spec.png) no-repeat 0 0;
}
#main .section .spec p a {
    display: block;
    width: 174px;
    height: 49px;
    margin: 55px auto 0;
    background:url(../images/badge_app.png) no-repeat center 0;
    text-indent: -9999px;
}
#main .section .spec p a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}

.lang{
    width: 110px;
    height: 15px;
    position: absolute;
    top: 50px;
    right: 2%;
}
.lang li{
    width: 50px;
    float: left;
    text-indent: -9999px;
    margin-right: 5px;
}
.lang li a{
    display: block;
    width: 50px;
    background:url(../images/btn_lang.png) no-repeat right 0;
}
.lang li:first-child a{
    background:url(../images/btn_lang.png) no-repeat 0 0;
}
.lang li a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}


/* opacity */
#head,
.section div{
    transition: .9s;
}
.fade{
    opacity: 0;
}
.out{
    opacity: 1.0;
}

/* english */
.en #main .section .catch p {
    width: 992px; height: 141px;
    background:url(../en/images/txt_catch.png) no-repeat center 0;
}
.en #main .section .story p {
    width: 889px; height: 230px;
    margin: 18px auto 0;
    background:url(../en/images/txt_story.png) no-repeat 0 0;
}
.en #main .section .aw h2 {
    width: 834px; height: 51px;
    background:url(../en/images/h2_aw.png) no-repeat 0 0;
}
.en #main .section .aw p {
    width: 717px; height: 268px;
    background:url(../en/images/txt_aw.png) no-repeat 0 0;
}

.en #main .section .ss #tabs .panel {
    background:url(../en/images/img_switc_01.jpg) no-repeat 0 0;
}
.en #main .section .ss #tabs #panel2 {
    background:url(../en/images/img_switc_02.jpg) no-repeat 0 0;
}
.en #main .section .ss #tabs #panel3 {
    background:url(../en/images/img_switc_03.jpg) no-repeat 0 0;
}
.en #main .section #tabs #tab li{
    background:url(../en/images/btn_switch.png) left top no-repeat;
}

.en #main .section .staff dl {
    width: 640px; height: 270px;
    background:url(../en/images/txt_staff.png) no-repeat 0 0;
}
.en #main .section .spec dl {
    width: 550px; height: 177px;
    background:url(../en/images/txt_spec.png) no-repeat 0 0;
}