@charset "UTF-8";

/*---------- width-display ----------*/

.pc{ display: none !important;}
.sp{ display: block !important;}
.sp-inlineb{ display: inline-block!important;}
.pc-inlineb{ display: none!important;}
.each-column .sp-pc{ display: block !important;}
.each-column .w1600{display: none !important;}
.each-column .w2000{display: none !important;}

.region{font-size:0.6em;margin-left:1.6em;}

@media screen and (max-width: 480px), print {
.f-small{font-size: 9px!important;}
}
/*------ loader ------*/

#loader-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #000;
    z-index: 100;
    }

#loader {
    display: none;
    position: fixed;
    top: 45%;
    margin:0 auto;
    width: calc(100% - 60px);
    padding: 0 30px;
    height: auto;
    color: #fff;
    z-index: 101;
    }

#loader img{
    color:#fff;
    z-index: 103;
    opacity: 1;
    width: 100%;
    max-width: 837px;
    height: auto;
    }

::selection {background:rgba(115, 193, 211,.4);}
::-moz-selection{background:rgba(115, 193, 211,.4);}

/*------ common ------*/

html,body{
    width: 100%;
    min-width:100%;
    height:100%;
    font-family:"Noto Sans Japanese";
    font-weight:200;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
/*    overflow-x:auto;*/
    }

body{
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
/*    overflow-x: hidden;*/
    }

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

#overlay,.control{font-family:"Roboto","Noto Sans Japanese";}

main{min-height: 100vh;}

.inner,.watches-inner{
    margin: 0;
    padding:60px 30px;
    z-index: 2;
    position: relative;
    }

header {
    width: 100%;
    height: 46px;
    position: fixed;
    top:0;
    transition: top .6s ease;
    left: 0;
    z-index: 100;
    background-color:#fff;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);
    }

header h1{
    height:14px;
    width: 187.25px;
    padding:16px 0;
    margin: 0 auto;
    }

header h1 img{
    display: block;
    height: 16px;
    width: 214px;
    }

footer{
    text-align: center;
    font-size: 12px;
    font-weight:100;
    padding: 15px 0 13px 0;
    color: #999;
    background: #fff;
    z-index: 2;
    position: relative;
    width: 100%;
    clear: both;
    }

footer a{color: #999;}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, ul {
    margin: 0;
    padding: 0;
    font-weight: 300;
    }

h2{
    text-align: center;
    font-size: 28px;
    margin: 45px 0;
    text-transform: uppercase;
    letter-spacing: .03em;
    }

h3{
    margin:20px 0 15px 0;
    font-size: 16px;
    text-align: center;
    }

section{
    width: 100%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    }

p,tbody{
    font-size: 13px;
    }

p{
    line-height: 1.9em;
    text-align: justify;
    }

ul{display: inline-block;}

li{list-style: none;}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
    }

a img {border: none;}

*:focus {outline: none;}

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

a:link { color:#000;}

a:hover { text-decoration: none;color:#73c1d3;  transition-duration:.2s;}

a>h3{color:#000;}

.watches > .inner,.watches > .watches-inner,.history > .inner{padding:60px 15px;}
.watches > .inner>ul{width:100%;}

.each-column{overflow-x: hidden;}
.each-column .inner{padding:30px;}

.news > .inner{margin-bottom: 30px;}

.each-of-the-model .concept .inner p{max-width:600px;margin: 0 auto 45px;}

.bg-gray{background: #f5f5f5;}

.scroll{overflow: hidden;}

.no-scroll{overflow: visible;}

.left{text-align: left!important;}

.right{text-align: right!important;}

/*-------- margin --------*/

/*
.mt75{margin-top: 75px!important;}
.mr75{margin-right: 75px!important;}
.mb75{margin-bottom: 75px!important;}
.ml75{margin-left: 75px!important;}
*/

.mt60{margin-top: 60px!important;}
.mr60{margin-right: 60px!important;}
.mb60{margin-bottom: 60px!important;}
.ml60{margin-left: 60px!important;}

.mt30{margin-top: 30px!important;}
.mr30{margin-right: 30px!important;}
.mb30{margin-bottom: 30px!important;}
.ml30{margin-left: 30px!important;}

.mt0{margin-top: 0!important;}
.mr0{margin-right: 0!important;}
.mb0{margin-bottom: 0!important;}
.ml0{margin-left: 0!important;}

@media screen and (max-width: 768px), print {
.mt1em_sp{margin-top: 1em!important;}
}
/*-------- padding --------*/

.pb120{padding-bottom: 120px!important;}

.pt60{padding-top: 60px!important;}
.pr60{padding-right: 60px!important;}
.pb60{padding-bottom: 60px!important;}
.pl60{padding-left: 60px!important;}

.pb45{padding-bottom: 45px!important;}

.pt30{padding-top: 30px!important;}
.pr30{padding-right: 30px!important;}
.pb30{padding-bottom: 30px!important;}
.pl30{padding-left: 30px!important;}

.pb0{padding-bottom: 0!important;}
.pt0{padding-top: 0!important;}

@media screen and (max-width: 768px), print {
.p45sp{padding: 45px!important;width: calc(100% - 90px);}
}
/*-------- menu --------*/

.menu-trigger,.menu-trigger span {
    display: inline-block;
    transition: all .6s;
    box-sizing: border-box;
    }

.menu-trigger {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 18px;
    height: 16px;
    z-index: 9999;
    }

.menu-trigger span {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 2px;
    background-color: #000;
    }

.menu-trigger span:nth-of-type(1) {top: 0px;}
.menu-trigger span:nth-of-type(2) {top: 7px;}
.menu-trigger span:nth-of-type(3) {top: 14px;}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(7px) rotate(-45deg);
    transform: translateY(7px) rotate(-45deg);
    }
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
    }
.menu-trigger.active span{ background-color: #fff;}

#overlay{
    display: none;
    width:50%;
    min-width: 250px;
    max-width: 300px;
    height:100%;
    text-align: right;
    position: fixed;
    top: 0;
    right:0;
    z-index: 100;
    background: rgba(0,0,0,0.85);
    box-sizing: border-box;
    }

#overlay .menu-list{margin:3em 2em 3em 0;}

#overlay ul{
    padding:15px 0;
    font-size: 16px;
    font-weight:200;
    display: inherit;
    margin: 0 auto;
    }

#overlay ul li{
    line-height: 2.5em;
    color: #fff;
    }

#overlay ul li.small{
    line-height: 1.4em;
    color: #fff;
    font-size: .85em;
    }

#overlay ul li a{
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    }

#overlay ul li a.inline{display: inline-block;}


/*-------- SNS-btn --------*/
.btn-more {
position:fixed;
bottom:0px;
right:0px;
z-index: 99;
width: 46px;
height: 46px;
background: #000;
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 46px; 
font-size: 14px;


}
.dropdown {
background-color: #000;
}

.dropdown ul {
margin: 0;
padding:10px 0 0; 
background: #000;
bottom: 46px;
right: 0px;
width: 46px;
position: fixed;

}

.dropdown ul li {
list-style: none;
width: 22px;
height: 22px;
margin: 0 auto;
padding: 12px;
text-align: center;
color: #fff;

}

.fa{
color: #fff;
font-size: 22px!important;
}

/*-------- index--------*/

#container {
    width: 100%;
/*      height: 100vh!important;*/
    overflow: hidden;
    position: relative;
    }

#container>img{
    position: absolute;
    padding:15px;
    height: 25%;
    max-height: 300px;    
    }

#container ul.sm-slider{position: relative;}

.watches li.inview:hover,.watches li.inview2:hover,.watches li.inview3:hover,.watches li.inview4:hover{
    transform: translateY(-10px);
    transition-duration:.4s;
    background: #fff;
    box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.4);
    }

.watches li.inview img,.watches li.inview2 img,.watches li.inview3 img,.watches li.inview4 img{
    max-width: calc(100% - 20px);
    padding: 10px;
    }

/*------ inview ---------*/
.inview,.inview3,.inview2,.inview4{
    opacity: 0; 
    transition-duration: .7s; 
    transform: translate(0,15px);
    -webkit-transform: translate(0,15px);
    }

.inview {transition-delay: .2s;}
.inview2{transition-delay: .4s;}
.inview3{transition-delay: .6s;}
.inview4{transition-delay: .8s;}

.inview-left,.inview-right{
    opacity: 0; 
    transition-duration: 2s; 
    transition-delay: .8s;
    }

.inview-left{
    transform: translate(-100px,0);
    -webkit-transform: translate(-100px,0);
    }

.inview-right{
    transform: translate(100px,0);
    -webkit-transform: translate(100px,0);
    }

.watches .inview ,.watches .inview3{transition-delay: .3s;}
.watches .inview2,.watches .inview4{transition-delay: .6s;}

.visible,.visible2,.visible3,.visible4,.visible-left,.visible-right{
    opacity: 1.0;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    }

.news li{
    margin-bottom: 30px;
    font-size: 14px;
    }

.news p{line-height: 2em;}

.watches .inner > ul > li,.watches .watches-inner > ul > li,.history .inner > ul > li,.column .inner > ul > li{
    width:calc(50% - 10px);
    height: auto;
    margin: 15px 5px 30px 5px;
    position: relative;
    float: left;
    display: inline-block;
    }

/*.column .inner > ul > li.wide{width:calc(100% - 10px);}*/

.column .inner > ul > li{margin: 5px;}

.philosophy p{margin-bottom: 30px;}

.news .inner>ul{
    max-width:378px!important;
    margin: 0 auto;
    display: block;
    }

.news .inner .date{
    color: #fff;
    background: #808080;
    padding: 4px 10px 5px;
    display:inline;
    line-height: 4em;
    }

/*------ watches index ---------*/

.controls {
    margin-bottom: 75px;
    text-align: center;
    width: 100%;
    height: 40px;
    max-width:600px;
    margin: 0 auto 60px;
    }

.control {
    position: relative;
    display:block;
    float:left;
    width: 25%;
    height: 40px;
    background: #fff;
    font-size: 12px;
    border: solid 1px #000;
    transition: background 150ms;
    }

@media screen and (min-width: 430px), print {
.control{font-size: 14px;}
}
@media screen and (min-width: 530px), print {
.control{font-size: 15px;}
}
@media screen and (min-width: 630px), print {
.control{font-size: 16px;}
}

.control:nth-child(2){border-left:none;}
.control:nth-child(3){border-left: none;border-top: solid 1px #000;}
.control:nth-child(4){border-left:none;border-top: solid 1px #000;}

.control:hover {
    background: #000;
    color: #fff;
    transition-duration: .9s;
    }

.mixitup-control-active {
    background: #000;
    color: #fff;
    border: solid 1px #000;
    }

.mixitup-control-active[data-filter]:after {
    background: transparent;
    }

.container {
    padding: 0;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: justify;
    }

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
    }

.mix,.gap {
    display: inline-block;
    vertical-align: top;
    }

.slider-wrap,.model-list{
    width:calc(50% - 20px);
    height: auto;
    margin: 10px 10px 60px 10px;
    position: relative;
    float: left;  
    }

.model-spec{
    text-align: center;
    padding: 0;
    }

.model-spec ul{
    padding: 0;
    line-height: 1.4em;
    letter-spacing: .04em;
    font-size: 13px;
    width:100%!important;
    }

/*----------- color navi -----------*/
/*

.ex_clearfix{text-align: center;}

.ex_clearfix ul{padding: 0;margin:15px 0;}

.ex_clearfix li {
    padding:4px;
    margin:2px;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    }

.ex_clearfix li a{
    display:block;
    width: 20px;
    height: 20px;
    }

.ex_clearfix li a:link    {}
.ex_clearfix li a:visited {}
.ex_clearfix li a:hover  {opacity:0.8;}
.ex_clearfixli a:active  {opacity:0.8;}

.ex_clearfix li a:hover img {filter:alpha(opacity=80);}
.ex_clearfix li a span{display: inline-block;height: 20px;}
*/

/*--------product page-----------*/

.concept{padding-top: 46px;}

.concept p{
    text-align: center;
    margin-bottom: 45px;
    }

.concept img{margin:0 auto;}

.concept .main-img{padding: 45px 0;}


.logo-h{
    margin: 0 auto;
    width: 30%;
    max-width: 150px;
    height:auto;  
    }

.logo-v{
    margin: 0 auto;
    width: 50%;
    max-width: 350px;
    height:auto;
    max-height: 120px;
    }

.pp02{
    width:100%;
    max-width:250px;
    margin:0 auto;
    padding:30px 0 45px;
    }

.pp02-small{
    width:100%;
    max-width:100px;
    margin:0 auto;
    padding:30px 0 45px;
    }

.pp02-wide{
    width:100%;
    max-width:500px;
    margin:0 auto;
    padding:30px 0 45px;
    }

.pp03{display:inline-block;}

.designer-img{margin: 0 auto;}

.designer > .inner>p{margin: 30px 0;}

.works,.clm2{
    width: 100%;
    display: inline-block!important;
    }

.works-short{
    width: 100%;
    max-width:378px;
    display: block;
    margin:auto;
    position: relative;
    
    }

.works-short li{
    position: relative;
    }

.works img,.works-short img{
    float:left;
    display:block;
    padding-bottom: 15px;
    }

.link-btns{
    text-align: center;
    padding:1px 0 30px;
    clear: both;
    }

.link-btns-discon-pdf{
    text-align: center;
    padding:0;
    clear: both;
    }

.link-btn{
    display:block;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9em;
    text-align: center;
    padding: 9px 0;
    background-color: #fff;
    margin: 30px auto;
    border: solid 1px #565656;
    width: 100%;
    max-width: 374px;
    }

.link-btn:hover{
    color: #fff;
    background-color: #000;
    transition-duration:.5s;
    }

/* photoswipe */

.gallery li{cursor: zoom-in;}

.gallery02 li,.gallery02-insetto li{
    width: 50%;
    height: auto;
    float: left;
    }

.gallery02,.gallery02-insetto{width: 100%;}

.none{display: none;}

/*MODELS scroll*/
#item-space-limited,
#item-space-models{
width:0;
padding-right: 30px;
}
.item {
vertical-align: top;
}

.item img{padding-bottom: 60px;}

.item .each-spec{padding-left: 20px;}

.item .each-spec p{text-align: start!important;}

.item h3{
    text-align: left;
    border-bottom: solid 1px #000;
    padding-bottom: .6em;
    margin: 0 0 20px 0;
    line-height: 1;
}

.item span{
    background: #000;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding:1px 7px 3px;
    margin:0;
    float:right;
}

.item span.small{font-size: .5em;}

#models,#limited{padding-top: 50px;}

#limited h2{font-size: 21px;margin-left: 30px;margin-right: 30px;}

.common-spec table{margin: 0 auto;}

.common-spec tbody{line-height: 1.7em;}

.common-spec tr{
    text-align: left;
    padding-bottom:8px;
    display: block;
    }

.common-spec th{
    width:100px;
    font-weight: 400;
    padding-right: 15px;
    vertical-align: top;
    }

.common-spec p{padding-bottom: 10px;}

.product-tile .product-swatches .selected img, .product-tile .product-swatches img:hover{
    border: 1px solid #fff;
    height: 12px;
    padding: 1px;
    width: 12px;
    }

/*----------- gallery  -----------*/


.gallery02 li:hover,.gallery02-insetto li:hover{
    transform: translateY(-20px);
    transition-duration:.4s;
    background: #333;
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.4);
    }

.appear-from p {
    -webkit-transition: all 1s;
    -webkit-transform: translate(0, 0);
    opacity: 1;
    }

.appear-from p.move {
    -webkit-transform: translate(-10px, 0);
    opacity: 0;
    }

/*----------- column  -----------*/

.column　ul:before,.column　ul:after {
    content: "";
    clear: both;
    display: block;
    }

.column h2{margin-bottom:30px;}
.each-column h2{text-transform: none;}
.column .category,.column .vol,.each-column .vol,.each-column .release-date{font-size: 11px;}
.column .category,.each-column .category{color:#3f747a;letter-spacing: .04em;}
.column .vol,.each-column .release-date{color:#808080;line-height: 1em;margin-top: 10px;}
.column ul {width:100%;}
.column ul h3{text-align: left;font-size: 13px;margin:4px 0 2px 0;}
.column li a>div>div{padding: 10px;min-height: 100px;}
.column li a>div{box-shadow: 0 0 0 1px rgba(128,128,128,.2);transition-duration: .4s;}
.column li a>div:hover{box-shadow: 0 0 0 1px rgba(128,128,128,.8);transition-duration: .4s;color: #000;}
.column li.coming-soon a>div:hover{box-shadow: 0 0 0 1px rgba(128,128,128,.2);}


.youtube{
position:relative;
width: 100%;
padding-top:56.25%;
}
.youtube iframe{
position:absolute;
top:0;
right:0;
width: 100%;
height: 100%;
}
/*----------- history  -----------*/

.chronology{
width: 100%;
margin: 20px 0;
background: url(../images/chronology_line_center.png) 15px top repeat-y;
}

.chronology div{margin-bottom: 45px;}
.chronology:after {content: ""; display: table; clear: both;}

.chronology_left, .chronology_right{
clear: both;
float: none;
width: 100%;
text-align: left;
background: url(../images/chronology_line_right.png) left 26px no-repeat;
}

.chronology span.year{
margin-left:30px;
top:.9em;
background:#fff;
padding:0 .8em .2em .5em;
position:absolute;
font-size: 16px;
}

.chronology span.milestone{
top:1.3em;
position:absolute;
background: #000;
color: #fff;
font-size: 14px;
line-height: 1;
padding:1px 7px 3px;
margin:0;
right: 0;
}


.chronology_left .chronology_photo, .chronology_right .chronology_photo {
clear: both;
float: none;
}
.chronology_photo img, .chronology_photo img {
max-width: 100%;

}

.chronology_left p, .chronology_right p{
    text-align: left;
    margin: 20px 0 20px 20px;
    padding-top: 45px;
}

/*----------- column -----------*/

.column-number{
    top: 70px;
    right:-3px;
    font-family: "Avenir Next","Noto Sans Japanese";
    font-weight: 500;
    font-size: 14px;
    position:absolute;
    min-width: 130px;
    width: 30%;
    margin: 0 auto;
    padding:4px 1.4em 0 1em;
    text-align: left!important;
    margin: 0!important;
    line-height: 1.8em;
    border: 1px solid #000;
    background: rgba(255,255,255,.4);
}
.column-number-white{
    color: #fff;
    background: rgba(0,0,0,.6);
    border: 1px solid #d3d3d3;
}

.column-number span{letter-spacing: 0.04em;}

.column-number:before {
    position: absolute;
    content: "";
    width: 100%;
    min-height: 100%;
    top: 3px;
    left: 3px;
    border: 1px solid #d3d3d3;
    padding-bottom: 0;
    padding-right:0;
}

.column-number-white:before {
border: 1px solid #444;
}

.each-column .column-title h2{
    font-size: 20px;
    text-align: left;
    line-height: 1.4em;
    font-weight: 400;
    margin: 6px 0;
}
.each-column-container section{
    margin-bottom: 45px;
    clear: both;
}

.each-column-container h3{
    font-size: 16px;
    text-align: left;
    margin:3em 0 0.8em;
    line-height: 1.6em;
    font-weight: 400;
}
.each-column .inner section img{margin:1.2em 0;}
.each-column .inner section .clm2{margin:.2em 0;}
.each-column .inner section .clm2 img{
    float:left;
    display:block;
    margin: 0;
}


.each-column .inner section p{
    margin-bottom:1em;
    font-size: 14px;
    line-height: 2em;
    letter-spacing: 0.04em;
    font-weight:200;
}
.column-title{
    padding-bottom: 15px;
    border-bottom: solid 1px #000;
    margin-bottom: 30px;
}

.coming-soon{filter: grayscale(100%);opacity: 0.6;}
.column-credit{
    text-align: right;
    font-size: 0.6em!important;
    margin-top: 5em;
    padding-right: 1em;
}
span.column-status{
    color: #fff;
    background: #000;
    float: right;
    font-size: .7em;
    padding: 2px 5px;
}
.longitudinal-section{overflow: hidden;}
.longitudinal-section h3{margin-top: 0!important;}
.longitudinal-section p{overflow: hidden;}

.longitudinal{
    width: 50%;
    max-width:300px;
    margin: 1.2em auto!important;
}

.longitudinal-right{
    margin: 1.2em auto!important;
}

.important h3{font-size: 22px;}
.important h3 span{font-size: 13px; font-weight: 300;}



.accordion {
    position: absolute;
    left: 10px;
    bottom: 15px;
    width:calc(100% - 24px);
    margin: 0 0 0 2px;
    overflow: hidden;
    color: #fff;
    font-weight: 100;
    height: 60px;
    }
    
 @media screen and (min-width: 768px), print {
.accordion {
    left: 25px;
    bottom: 30px;
    }} 
    
.accordion li p {
    float: left;
    cursor: pointer;
    margin-left: 3px;
    background: #000;
    font-size: 12px;
    width: 6px;
    height:60px;
    }
    
.accordion li .inner{
    float: left;
    display: none;
    margin: 0;
    padding: 1em .8em;
    background: rgba(0,0,0,.7);
    font-size: 12px;
    height: 36px;
    
    }

.accordion li .inner a{
    color: #fff;
    }
    
.accordion li .inner-open{
    display: inline-block;
    max-width:calc(100% - 48px);
    }
    
.accordion .inner > li{
    float: left;
    width:100%;
    }
.concept .logo-h_o702{padding-top: 75px;}
.concept .main-img_o702{padding-top: 60px;}

@media screen and (min-width: 420px), print{
.gallery02-insetto{width: 100%;}
.gallery02-insetto li{
width: 25%;
max-width: 180px;
height: auto;
float: left;
}
}
    
@media screen and (min-width: 480px), print{
.watches > .inner,.watches > .watches-inner,.history > .inner{padding:60px 30px;}
.each-column .inner section p{font-size: 15px;}
}

@media screen and (min-width: 600px), print{
.longitudinal{
    width: 40%;
    max-width:300px;
    float: left;
    margin: .6em 2em .6em 0!important;
}

.longitudinal-right{
    float:right;
    margin: .6em 0 .6em 2em!important;
}

}
@media screen and (min-width: 820px), print{
.gallery02-insetto{max-width: 720px; padding: 0 calc(50% - 360px);}
}