@charset "utf-8";
/* CSS Document */
html { overflow-x:hidden; }
body { font-family:  "Yu Gothic","Hiragino Kaku Gothic Pro", YuGothic, Meiryo, Osaka, "MS PGothic", sans-serif; color:#333333; }
header { height:60px; width:100%; position:fixed; top:0; left:0; background-color:#333333; z-index:3; }
header.shadow { box-shadow: 0px 1px 10px rgba(0,0,0,.3); }
header h1 a { text-indent:-9999px; display:inline-block; height:100%;width:203px; background-color:#FFF; vertical-align:top; background-image:url(../img/logo.png); background-repeat:no-repeat; background-position:center; background-size:auto 30px;  }
header h1 { width:236px; height:100%; }
header h1:after { content:""; display:inline-block; width: 0;
height: 0;
border-style: solid;
border-width: 60px 33px 0 0;
border-color: #ffffff transparent transparent transparent; }
nav#main { position:absolute; left:250px; top:0; height:100%;  }
nav#main .sub { display:inline-block; height:100%; }
nav#main a { display:inline-block; height:100%; padding:0 1em; line-height:60px; color:#FFF; text-decoration:none; font-size:90%; font-weight:bold; vertical-align:top; position:relative; }
nav#main a:before { content:""; display:block; width:100%; height:4px; background-color:rgba(255,255,255,.7); opacity:0; position:absolute; left:0; bottom:0;
-moz-transition: opacity 0.6s ease 0s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.6s ease 0s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.6s ease 0s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.6s ease 0s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.6s ease 0s,transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s; }
nav#main a.selected:before { opacity:1; }

nav#main a.drive { line-height:1.3; position:relative;
  display : -webkit-inline-box;
	display : -ms-inline-flexbox;
	display : -webkit-inline-flex;
	display : inline-flex;
  align-items: center; }
nav#main a.drive div { 
}
nav#main a.drive span { display:block; text-align:center; font-size:70%; font-weight:normal; opacity:.9; }
nav#main a.drive.z span { color:#DEBF4C; }
nav#main a.drive.a span { color:#57B8F8; }
nav#main a.drive.s span { color:#F0112C; }
nav#main .pull { display:none; position:relative; }
nav#sub { position:absolute; top:0; right:0; height:100%; }
nav#sub a {  display:inline-block; height:60px; line-height:60px; font-size:90%; vertical-align:middle; color:#FFF; text-decoration:none; padding:0 1em; }
nav#sub a:after { content:""; display:inline-block; height:100%; width:6px; background-image:url(../img/arrow.svg); background-position:center; background-size:contain; background-repeat:no-repeat; vertical-align:middle; margin-left:.7em; }
nav#sub a.contact { width:60px; height:60px; background-color:#998247; text-indent:-9999px; background-image:url(../img/contact.svg); background-repeat:no-repeat; background-position:center; padding:0; }

#push { margin-top:60px; 

}
#push.fadeOut {

-webkit-animation: fadeOut .9s cubic-bezier(.07,.91,.14,.84) both;
animation: fadeOut .9s cubic-bezier(.07,.91,.14,.84) both;
	
 }
#push.fadeIn { opacity:1;
-webkit-animation: fadeIn .5s cubic-bezier(.07,.91,.14,.84) .1s both;
	animation: fadeIn .5s cubic-bezier(.07,.91,.14,.84) .1s both;
 }
 
.ie #push.fadeOut {

-webkit-animation: fadeOutIE .9s cubic-bezier(.07,.91,.14,.84) both;
animation: fadeOutIE .9s cubic-bezier(.07,.91,.14,.84) both;
	
 }
.ie #push.fadeIn { opacity:1;
-webkit-animation: fadeInIE .5s cubic-bezier(.07,.91,.14,.84) .1s both;
	animation: fadeInIE .5s cubic-bezier(.07,.91,.14,.84) .1s both;
 }
 
 @-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform:translateY(5vw); }}
@keyframes fadeOut { to { opacity: 0; transform:translateY(5vw);  }}

@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform:translateY(5vw); }}
@keyframes fadeIn { from { opacity: 0; transform:translateY(5vw);  }}

@-webkit-keyframes fadeOutIE { to { opacity: 0; -webkit-transform:translateY(100px); }}
@keyframes fadeOutIE { to { opacity: 0; transform:translateY(100px);  }}

@-webkit-keyframes fadeInIE { from { opacity: 0; -webkit-transform:translateY(100px); }}
@keyframes fadeInIE { from { opacity: 0; transform:translateY(100px);  }}

#push.black { background-color:#000; }
#mainV { height:40vw;  position:relative; }
#mainV:before { content:""; display:block; width:100%; height:100%; background-image:url(../img/top/main1.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; opacity:0;
-webkit-transform:translateY(6vw);
-moz-transform:translateY(6vw);
-o-transform:translateY(6vw);
-ms-transform:translateY(6vw);
transform:translateY(6vw);
-moz-transition: opacity 0.6s ease 0s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.6s ease 0s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.6s ease 0s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.6s ease 0s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.6s ease 0s,transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
 }
.ie #mainV:before { 
-webkit-transform:translateY(100px);
-moz-transform:translateY(100px);
-o-transform:translateY(100px);
-ms-transform:translateY(100px);
transform:translateY(100px);
}

#mainV:after { content:""; display:block; width:100%; height:100%; background-image:url(../img/top/main2.png); background-position:left bottom; background-repeat:no-repeat; background-size:contain; position:absolute; top:0; left:0; opacity:0;
-webkit-transform:translateX(-6vw);
-moz-transform:translateX(-6vw);
-o-transform:translateX(-6vw);
-ms-transform:translateX(-6vw);
transform:translateX(-6vw);

-moz-transition: opacity 0.6s ease 0s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.6s ease 0s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.6s ease 0s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.6s ease 0s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.6s ease 0s,transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
 }
 
 .ie #mainV:after {
	-webkit-transform:translateX(-120px);
-moz-transform:translateX(-120px);
-o-transform:translateX(-120px);
-ms-transform:translateX(-120px);
transform:translateX(-120px); 
 }
 
 .history section.main figure {
	 opacity:0;
-webkit-transform:translateX(-6vw);
-moz-transform:translateX(-6vw);
-o-transform:translateX(-6vw);
-ms-transform:translateX(-6vw);
transform:translateX(-6vw);

-moz-transition: opacity 0.6s ease 0s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.6s ease 0s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.6s ease 0s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.6s ease 0s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.6s ease 0s,transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
 }
.ie .history section.main figure {
	-webkit-transform:translateX(-200px);
-moz-transform:translateX(-200px);
-o-transform:translateX(-200px);
-ms-transform:translateX(-200px);
transform:translateX(-200px); 
}

.intro #mainV:before { opacity:1;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
 }
.intro #mainV:after,.history.intro section.main figure { opacity:1;
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0); }


#mainV.adive:after { background-image:url(../img/a/1.png);}
.intro #mainV.adive:before { background-image:url(../img/a/2.jpg); opacity:.3;}
#mainV.sdive:after { background-image:url(../img/s/1.png);}
#mainV.sdive:before { background-image:none;}

#mainV.zdive {background-color:#000; }
#mainV .h2 img { height:13vw; width:auto; }
#mainV .h2 {  display:inline-block; }
#mainV .copy { position:absolute; width:70%; top:50%; right:0; text-align:center; z-index:1; opacity:0;
-webkit-transform:translateY(-25%);
-moz-transform:translateY(-25%);
-o-transform:translateY(-25%);
-ms-transform:translateY(-25%);
transform:translateY(-25%);

-moz-transition: opacity 0.6s ease .3s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-webkit-transition: opacity 0.6s ease .3s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-o-transition: opacity 0.6s ease .3s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-ms-transition: opacity 0.6s ease .3s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
transition: opacity 0.6s ease .3s,transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;

 }
.ie #mainV .copy {
	-webkit-transform:translateY(-25%);
-moz-transform:translateY(-25%);
-o-transform:translateY(-25%);
-ms-transform:translateY(-25%);
transform:translateY(-25%);
}

.history section.main .vCenter { opacity:0; text-align:center;
	-webkit-transform:translateY(-25%);
-moz-transform:translateY(-25%);
-o-transform:translateY(-25%);
-ms-transform:translateY(-25%);
transform:translateY(-25%);

-moz-transition: opacity 0.6s ease .3s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-webkit-transition: opacity 0.6s ease .3s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-o-transition: opacity 0.6s ease .3s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
-ms-transition: opacity 0.6s ease .3s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
transition: opacity 0.6s ease .3s,transform 0.6s cubic-bezier(.07,.91,.14,.84) .3s;
}
.ie .history section.main .vCenter {
-webkit-transform:translateY(-25%);
-moz-transform:translateY(-25%);
-o-transform:translateY(-25%);
-ms-transform:translateY(-25%);
transform:translateY(-25%);	
}

.intro #mainV .copy,.history.intro section.main .vCenter { opacity:1;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
 }
 .history section.main .vCenter p {font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif; }
 a.watch { display:block; color:#FFF; text-decoration:none; width:12em; font-size:1.3vw; padding:1em 1em; background-color:#A79256; text-align:left; border-radius:.2em; font-weight:bold; margin-top:1vw; background-image:url(../img/top/arrow2.svg); background-repeat:no-repeat; background-position:12em center; background-size:.4em; margin-right:auto; margin-left:auto; }
 a.watchb { display:block; color:#FFF; text-decoration:none; width:12em; font-size:1.3vw; padding:1em 1em; background-color:#A79256; text-align:left; border-radius:.2em; font-weight:bold; margin-top:1vw; background-image:url(../img/top/arrow2.svg); background-repeat:no-repeat; background-position:12em center; background-size:.4em; margin-right:auto; margin-left:auto; }
 .btBox { text-align:left; }
 
 #mainV h2 { font-size:5.5vw; text-align:left; display:inline-block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
  #mainV h2 span { font-size:20%; display:block;font-family:  "Yu Gothic","Hiragino Kaku Gothic Pro", YuGothic, Meiryo, Osaka, "MS PGothic", sans-serif; }
 #mainV.zdive h2 { color:#CCAB25; }
  #mainV.adive h2 { color:#0864A1; }
  #mainV.sdive h2 { color:#C30D23; }
  #mainV em{ color:#111;font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif;  font-weight:normal; text-align:left; font-style:normal; display:block; font-size:30%; margin-bottom:1em;}
  .android #mainV em { font-weight:normal; }
  #mainV.zdive em {color:#FFF; }
  #mainV strong { color:#666; display:block; font-weight:normal; font-size:18%; margin-top:2em; line-height:1.3; }
  #mainVzdive strong { color:#aaa;}
  #mainV #threeD { position:absolute; bottom:1.5vw; right:1.5vw; cursor:pointer; z-index:1; opacity:0;
  -moz-transition: opacity 1s ease .6s,-moz-transform 1s cubic-bezier(.07,.91,.14,.84) .6s;
-webkit-transition: opacity 1s ease .6s,-webkit-transform 1s cubic-bezier(.07,.91,.14,.84) .6s;
-o-transition: opacity 1s ease .6s,-o-transform 1s cubic-bezier(.07,.91,.14,.84) .6s;
-ms-transition: opacity 1s ease .6s,-ms-transform 1s cubic-bezier(.07,.91,.14,.84) .6s;
transition: opacity 1s ease .6s,transform 1s cubic-bezier(.07,.91,.14,.84) .6s;
 }
  .intro #mainV #threeD { opacity:1; }
  #mainV #threeD img { height:14vw; width:auto; margin-right:4vw; }
  #mainV #threeD #bt { width:4vw; height:4vw; background-color:rgba(0,0,0,.6); position:absolute; bottom:0; right:0; border-radius:.2em; background-image:url(../img/view.svg); background-position:center; background-repeat:no-repeat; background-size:80% auto; }
   #mainV p.cur { position:absolute; bottom:2vw; right:2vw; z-index:2; color:#ccc; padding-left:2vw; line-height:1.2; font-size:.7vw; }
 
 section.box { padding:6vw 5vw; text-align:center; }
 section.box.box2 { padding:4vw 2vw; }
  section.box.box2 h4 {font-size: 1.7vw; margin-bottom: 1em; }
  .ad section.box.box2 h4 { color:#0864A1; }
 section p,.productOpen #modal p { font-size:1.2vw; line-height:200%; }
 .black section p { color:#EDEDED; }
 .productOpen #modal.black p{ color:#EDEDED; }
 #top1 { background-image:url(../img/top/top1_1.jpg); background-position:center -6vw; background-repeat:no-repeat; background-size:cover; }
 .title { text-align:center;font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif; font-weight:normal; color:#111111; }
 .android .title { font-weight:normal; }
  .title span { display:block; font-size:50%; margin-bottom:.5em; }
  .title h2 { font-size:2.5vw; display:inline-block; vertical-align:1vw; }
  .title h3 { font-size:6.5vw; display:inline-block; line-height:1; vertical-align:bottom; }
  h3.titles { font-size:1.5vw; color:#111111; font-weight:normal; margin-top:2em; margin-bottom:7vw;}
  
  .clm3 {padding:0 0vw;
	  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;

  }
  
.clm3 li { padding:0 1vw; box-sizing:border-box; text-align:center;
	/*-ms-flex-preferred-size: 33.3333%;
               flex-basis: 33.3333%;
			   max-width:33.3333%;*/
			   
			   
}
.clm3 li .infos { display:inline-block; text-align:left;  margin-right:-.7em; }
.clm3 li img { /*width:100%; height:auto;*/ width:auto; height:20vw; }
.clm3 li h4 span { display:block; margin-bottom:.3em; }
.clm3 li h4 { font-size:1.3vw; color:#111; }
.clm3 li figure { margin-bottom:2vw; position:relative; }
.clm3 li figure figcaption { display:block; bottom:3.3%; position:absolute; font-size:.7vw; text-align:center; }
.clm3 li:nth-child(1) figure figcaption:nth-child(2) { left:7%; }
.clm3 li:nth-child(1) figure figcaption:nth-child(3) { left:47.2%; }
.clm3 li:nth-child(1) figure figcaption:nth-child(4) { left:66.2%; }
.clm3 li:nth-child(2) figure figcaption:nth-child(2) { left:16.333%; }
.clm3 li:nth-child(2) figure figcaption:nth-child(3) { left:56%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(2) { left:-9.333%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(3) { left:28.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(4) { left:46.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(5) { left:64.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(6) { left:82.7%; }
.srs span { display:inline-block; color:#FFF; font-weight:bold; background-color:#B3863E; font-size:1vw; padding:.3em .8em; margin-right:.8em; }
.srs { font-size:0.8vw; margin-bottom:.7vw; color:#B3863E; }
.srs.a {color:#172F47;  }
.srs.s {color:#882620;  }
.srs.a span { background-color:#172F47; }
.srs.s span { background-color:#882620; }
.clm3 li a { display:block; }
.clm3 li .aa { color:#998247; text-decoration:none; font-size:.8em; display:inline-block; padding:.8em 2em .8em 0; margin-top:.8em; background-image:url(../img/top/arrow.svg); background-position:right center; background-repeat:no-repeat; background-size:auto .8em; }

#top2 { background-image:url(../img/top/top2_1.jpg); background-position:center top; background-repeat:no-repeat; background-size:cover; }
.history section.main {background-image:url(../img/top/top2_1.jpg); background-position:center top; background-repeat:no-repeat; background-size:cover; }
.clm2 {padding:0 3vw;
	  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;

  }
  
.clm2 li:nth-child(1) {  box-sizing:border-box; text-align:left;
	-ms-flex-preferred-size: 40%;
               flex-basis: 40%;
			   max-width:40%;
			   
}
.clm2 li:nth-child(2) {  box-sizing:border-box; text-align:left; position:relative; padding:0 0vw 0 6vw;
	-ms-flex-preferred-size: 60%;
               flex-basis: 60%;
			   max-width:60%;
			   
}
.history .clm2 { padding: 0 0vw;}
.clm2 li:nth-child(1) img { width:100%; height:auto; }
.clm2 li:nth-child(2) h2 { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif; font-weight:normal; color:#111111; font-size:5vw; margin-bottom:2vw;}
.android .clm2 li:nth-child(2) h2  { font-weight:normal; }
.clm2 li:nth-child(2) h2+p {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif;
}
.history .main .clm2 li:nth-child(2) h2 {  font-size:4vw;}
.clm2 li:nth-child(2) h2 rt { font-size:1vw; }
.history .main .clm2 li:nth-child(2) h2 rt,section h2 rt {font-size:.7vw; }
a.bt { display:inline-block; color:#FFF; text-decoration:none; font-size:1.2vw; padding:.7em 1.3em; font-weight:bold; background-color:#A79256; border-radius:.2em; margin-top:2.5vw;  }
.vCenter { position:absolute; top:50%; 
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

footer { height:60px; background-color:#FFF; text-align:center; line-height:60px; position:relative; }
footer p { font-size:10px; }
footer a { display:block; height:100%; position:absolute; top:0; right:20px; color:#666; text-decoration:none; font-size:11px; padding:0 1em 0 2em; background-image:url(../img/arrow3.svg); background-repeat:no-repeat; background-position:right center; background-size:auto 8px; }



#modal { width:80%; position:fixed; top:50%; left:10%; background-color:#444; z-index:99; padding:0px 0; box-sizing:border-box; 
opacity:0;
-webkit-transform:translateY(200%) scale(.8);
-moz-transform:translateY(200%) scale(.8);
-o-transform:translateY(200%) scale(.8);
-ms-transform:translateY(200%) scale(.8);
transform:translateY(200%) scale(.8);

-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;

 }
.modalOpen #modal,.viewOpen #modal,.productOpen #modal {
	opacity:1;
-webkit-transform:translateY(-50%) scale(1);
-moz-transform:translateY(-50%) scale(1);
-o-transform:translateY(-50%) scale(1);
-ms-transform:translateY(-50%) scale(1);
transform:translateY(-50%) scale(1);
}
.modalOpen,.viewOpen,.productOpen { position:fixed; width:100%; }
.viewOpen #modal {
	width:40%;left:30%; background-color:#000;
}
.productOpen #modal {-webkit-overflow-scrolling: touch;
	width:80%;left:10%; background-color:#fff; overflow:auto; height:90%; border-radius:.2em;
}
.productOpen #modal .pBox:nth-child(1) { margin-top:0; }
.productOpen #modal.black { background-color:#222; }

#close { width:60px; height:60px; position:absolute; top:0; right:0; cursor:pointer; }
#modal .modal {
	position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
#modal .modal iframe {
     position: absolute;
     top: 0px;
     left: 0;
     width: 100%;
     height: 100%;
}

.viewOpen #modal .modal {
	padding-bottom: 100%; /*アスペクト比 16:9の場合の縦幅*/
}
.productOpen #modal .modal { padding:5vw; height:auto; }
#overlay { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,.9); z-index:98; opacity:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
-moz-transition: opacity 0.3s ease 0s;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
-ms-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.modalOpen #overlay,.ray #overlay,.viewOpen #overlay,.productOpen #overlay { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,.9); z-index:98; cursor:pointer;
 opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}
.modalOpen #overlay #modalClose,.viewOpen #overlay #modalClose,.productOpen #overlay #modalClose { width:60px; height:60px; position:absolute; top:0; right:0; cursor:pointer; background-image:url(../img/close.svg); background-repeat:no-repeat; background-size:15px; background-position:center; }
.viewOpen #overlay { background-color:rgba(0,0,0,1);}

#z1 { position:relative; }

#z1:before { content:""; display:block; width:100%; height:100%; background-image:url(../img/top/main1.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:0; }
.clm { position:relative; padding-top:5vw;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;

  }
  
.clm li {  box-sizing:border-box; text-align:left;
	-ms-flex-preferred-size: 50%;
               flex-basis: 50%;
			   max-width:50%;
			   
}
.clm li:nth-child(1) { line-height:0; }
.clm li:nth-child(2) { position:relative; }
.clm li img { width:90%; height:auto; }
.clm li h2,section h2,section.box.last h3 { color:#111;font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",'Noto Serif JP', "MS P明朝", "MS PMincho", serif; font-size:3vw; line-height:1.2;  }
.clm li h2 sup,section h2 sup,section.box.last h3 sup { font-size:10px; }
.android .clm li h2,.android section h2,section.box.last h3 { font-weight:normal; }
section h2 em { display:block; font-size:40%; font-style:normal; line-height:1.3; }
.mil { display:inline-block; text-align:left; }
.mil:before { content:""; display:inline-block; width:10vw; height:10vw; background-image:url(../img/a/12.png); background-repeat:no-repeat; background-size:contain; vertical-align:middle; margin-right:1vw; }
.mil h2 { display:inline-block;  vertical-align:-3vw;}
.zd .clm li h2,.black section h2 {color:#CCAB25; }
.clm li h3 { color:#FFF; font-size:1.7vw; margin-top:3vw; margin-bottom:.4em; line-height:1.2; }
.ad .clm li h3 { color:#0864A1; }
sup { font-size:10px; font-weight:normal; vertical-align:top; }

.list {padding:0vw 10vw 0vw 10vw; text-align:left;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.list li { margin:0 2vw 4vw 2vw; 
	-ms-flex-preferred-size: calc( 33.333% - 4vw );
               flex-basis: calc( 33.333% - 4vw );
			   max-width:calc( 33.333% - 4vw );
}
h2+.list { margin-top:4vw; }
.list li img { width:100%; height:auto; }
.list li h3 { font-size:1.2vw; color:#111; line-height:1.2; margin-bottom:.5em; }
.zd .list li h3 { color:#FFF; }
.list li figure { margin-bottom:1vw; }
.list li p { color:#EDEDED; font-size:1vw; line-height:1.5; }
p.cur,.productOpen #modal p.cur { font-size:.7vw; opacity:.6; line-height:1.4;}
h2 p.cur { margin-top:1vw; }
#modal p.cur { margin-top:6vw; }

.mainImage { height:40vw; background-image:url(../img/z/6.jpg); background-repeat:no-repeat; background-position:center bottom; background-size:cover; }
.mainImage figure { text-align:center; position:relative; height:100%; }
.mainImage figure img { height:30vw; width:auto; position:absolute; bottom:5vw; left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-o-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
  }
 section.center { text-align:center; }
section.box.ff { background-color:#FFF; color:#666; }
section.box.ff h2 { color:#111; margin-bottom:1em; }
section.box.ff h2 sup { font-size:10px; }
section.box.ff p { color:#666; }

.clm2.v2 {padding:0 5vw;
	  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;

-webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;

  }
  
.clm2.v2 li:nth-child(1) {  box-sizing:border-box; text-align:center;
	-ms-flex-preferred-size: 40%;
               flex-basis: 40%;
			   max-width:40%;
			   
}
.clm2.v2 li:nth-child(2) {  box-sizing:border-box; text-align:left; position:relative; padding:6vw 2vw 0 0vw;
	-ms-flex-preferred-size: 60%;
               flex-basis: 60%;
			   max-width:60%;
			   
}
.clm2.v2 li:nth-child(1) img { width:100%; height:auto; }
.clm2.v2 h3 { font-size:2.5vw; color:#008CD6; margin-bottom:1.2em; }
.clm2.v2 h3 span { display:block; font-size:50%; font-weight:normal; color:#111; margin-top:.5em; }
.clm2.v2 li:nth-child(2) li:nth-child(1) { max-width: 100%; width:12vw; float:left; }
.clm2.v2 li:nth-child(2) li { padding:0; text-align:left; }
.clm2.v2 li:nth-child(2) ul { overflow:hidden; }
.clm2.v2 li:nth-child(2) li:nth-child(2) { margin-left:14vw; max-width:100%; }
.clm2.v2 li:nth-child(2) li img { width:100%; height:auto; }
.clm2.v2 h4 { color:#111; font-size:1.4vw; margin-bottom:.5em;line-height: 1.5; }
.clm2.v2 li:nth-child(2) li p { line-height:1.6; }
.clm2.v2 li:nth-child(2) ul { margin-bottom:2vw; }

section.box.grey { background-color:#F4F4F4; }
section.box.blue { color:#008CD6; }
section.box.blue h3{ font-size: 2.5vw; }
section.box.blue h3 span { display:block; font-size: 50%;
    font-weight: normal;
    color: #111;
    margin-top: .5em; }
	
.image3 { text-align:center; margin-top:4vw; }
.image3 li { display:inline-block; margin:0 1.5vw; vertical-align:top; }
.image3 li img { height:10vw; width:auto;  }
.ad .image3 li img { height:5vw; width:auto;  }
.ad .image3 li p { font-size:1vw; text-align:left; }
.ad .image3 { margin:0;}
section.box.grey p,.sd section.box .list p { color:#666; line-height:1.5; }
.sd section.box .list p.flo { overflow:hidden; }
.sd section.box .list p.flo em { display:block; float:left;  }
.sd section.box .list p.flo em:before { content:""; display: block; width:4vw; height:4vw; background-image:url(../img/s/9.png); background-repeat:no-repeat; background-size:contain; font-size:.8vw; font-style:normal;}
.sd section.box .list p.flo em:after { content:"防水設計※2"; display: block;font-size:.8vw; font-style:normal; padding-top:.5vw;}
.sd section.box .list p.flo span { display:block; margin-left:5vw; } 
.image3 li figure { margin-bottom:2vw; }
section.box.grey.blue h4 { font-size:.7vw; text-align:center; margin-bottom:1.2em; }
section.box.grey.blue .inner { padding:4vw; text-align:left;font-size: .7vw; }
section.box.grey.blue .inner ul { text-align:center; }
section.box.grey.blue .inner ul li { display:inline-block; vertical-align:top; margin:0 1.5vw; text-align:left; }
section.box.grey.blue .inner ul li p span { display:block; margin-left:11em;}
section.box.grey.blue .inner ul li p { font-size:.7vw; }
.sd section.box.p { padding-top:0;}

.product { width:85%; margin:0 auto; }
.pBox { text-align:left; margin-top:6vw;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;
}
.pBox figure { -ms-flex-preferred-size: 30%;
               flex-basis: 30%;
			   max-width:30%;
			   }
.pBox .info { padding-left:4vw; box-sizing:border-box;
	 -ms-flex-preferred-size: 70%;
               flex-basis: 70%;
			   max-width:70%;
}
.pBox figure img { width:100%; height:auto; }
.pBox .info h3 { font-size:7vw; display:inline-block; vertical-align:bottom; color:#CCAB25; }
.ad .pBox .info h3 { color:#0764A0; }
.sd .pBox .info h3 { color:#C30C22; }
.pBox .info h3 span { font-size:20%; color:#111;
/*-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;*/}
.zd .pBox .info h3 span { color:#FFF; }
.pBox .info h4 { display:inline-block; vertical-align:1vw; color:#111; font-size:2.2vw; margin-left:1vw; }
.zd .pBox .info h4 { color:#FFF; }
.pBox .info h4 span { display:block; font-size:60%; font-weight:normal; margin-bottom:.5em; }
.pBox h5 { color:#BF9E35; font-size:2.2vw; margin-top:.5em; font-weight:normal; }
.zd .pBox h5 {color:#BF9E35; }
.ad .pBox h5 {color:#0764A0; }
.sd .pBox h5 {color:#C30C22; }
.pBox h5.new:after { content:"NEW"; display:inline-block; background-color:#C30D23; font-size:50%; vertical-align:.5vw; color:#FFF; font-weight:bold; height:2.2vw; line-height:2.2vw; padding:0 .7vw; border-radius:.2em; margin-left:.5vw; }
.pBox h5+p,.productOpen #modal .pBox h5+p { color:#666; font-size:.8vw; }
.zd .pBox h5+p,.productOpen #modal.zd .pBox h5+p { color:#ccc; }

.pBox .info .icon li { display:inline-block; vertical-align:top; width:6vw; margin-right:.5vw;}
.pBox .info .clm2.v3 h4 { margin-left:0; }
.pBox .info .icon li img { width:100%;  height:auto; }
.pBox .info .icon { margin-top:2vw; }
.pBox .info .icon li p,.productOpen #modal .pBox .info .icon li p { font-size:.8vw; color:#666; text-align:center; line-height:1.4; }
.zd .pBox .info .icon li p,.productOpen #modal.zd .pBox .info .icon li p {color:#ccc;  }
.pBox .info .icon li figure { line-height:0;max-width: 100%; }

.pBox .info .icon.icon2 li { width:auto; height:2vw; margin-right:1vw;}
.pBox .info .icon.icon2 li img { width:auto;  height:100%; }

.pBox .info .icon.icon3 li { width:auto; height:auto; margin-right:3vw; margin-bottom:3vw;}
.pBox .info .icon.icon3 li img { width:7vw;  height:auto; }
.pBox .info .icon.icon3 li p,.productOpen #modal .pBox .info .icon.icon3 li p { text-align:left; font-size:1.2vw; color:#111; }
.zd .pBox .info .icon.icon3 li p,.productOpen #modal.zd .pBox .info .icon.icon3 li p { color:#FFF; }

.clm2.v3 { overflow:hidden;display:block; padding:0;margin-top: 3vw; margin-bottom:0; }
.clm2.v3 li:nth-child(2) { margin-left:14vw; max-width:100%; padding:0 5vw 0 0; }
.clm2.v3 li img { width:100%; height:auto; }
.clm2.v3 h4 { color:#111; font-size:1.4vw; margin-bottom:.5em; }
.clm2.v3 li p { line-height:1.6; }
.clm2.v3 { margin-bottom:2vw; }
.clm2.v3  li:nth-child(1) {
    max-width: 100%;
    width: 12vw;
    float: left;
}
.clm2.v3 li:nth-child(2) {
    margin-left: 14vw;
    max-width: 100%;
}

.milBox { max-width:1000px; margin:0 auto;
	 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;

margin-top:5vw;
}
.milBox+p.cur { max-width:1000px; margin:0 auto; text-align:left; padding:0 2.5vw; box-sizing:border-box;}
.milBox li { text-align:left;
	 box-sizing:border-box;
	-ms-flex-preferred-size: 50%;
               flex-basis: 50%;
			   max-width:50%;
			   padding:0 2.5vw;
}
.milBox li h3 {
    font-size: 1.2vw;
    color: #111;
    line-height: 1.2;
    margin-bottom: .5em;
}
.milBox li p {
	font-size: 1vw; margin-bottom:2.5vw;
}

section.box.blues { background-color:#0864A1; }
section.box.blues h2,section.box.blues p { color:#FFF; }

.clmV4 { margin-top:4vw;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;
	 }
.clmV4 li { 
text-align:left;
	 box-sizing:border-box;
	-ms-flex-preferred-size: 50%;
               flex-basis: 50%;
			   max-width:50%;
			   padding: 2.5vw;
}
.clmV4 li .info,.clmV4 li figure { display:inline-block; vertical-align:top; }
.clmV4 li .info {width:70%; padding-top:3vw; }
.clmV4 li figure { width:30%; }
.clmV4 li figure img { width:100%; height:auto; }
.clmV4 li .info h3 { font-size:1.6vw; color:#FFF; line-height: 1.2;
    margin-bottom: .5em;}
	
	
section.box.dark { background-color:#161616;
}
section.box.dark h2 { color:#FFF; }

.zd .image3 li img {
    height: 5vw;
    width: auto;
}

.zd .blue .image3 li img {
    height: 10vw;
    width: auto;
}

.history figure { position:relative; }
.history figcaption { position:absolute; bottom:0; right:0; color:#998247; font-weight:bold; font-size:2vw; padding-left:2vw; }
.history figcaption strong,.history figcaption span { display:block; }
.history figcaption strong { color:#111; font-size:50%; margin-top:.3em; }
.history figcaption span { color:#111; font-size:40%; font-weight:normal; margin-top:.5em; line-height:1.3;  }
.history figcaption:before { content:""; width:1px; height:12vw; position:absolute; top:0; left:0; display:block; background-color:#666666; } 
section.year { position:relative; padding-top:5vw; }
section.year h2,section.box.last h2 { font-size:5vw; font-weight:normal; text-align:left; }
section.year h2:before,section.box.last h2:before { content:""; display:inline-block; height:2px; width:8vw; background-color:#111; vertical-align:middle; margin-right:1vw; }
section.year figure img { width:24vw; height:auto; }
section.year .figureBox { background-color:#F5F5F1; width:45%; position:relative; }
section.year figure { position:absolute; }
.history section.year figcaption { right:-2vw; }
section.box.last { padding-left:0; padding-right:0; 
background-image: url(../img/top/top1_1.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
	}
section.box.last .clm3 { padding: 6vw 8vw; }

section.year.y1960 { height:54vw; }
section.year .figureBox.f1 { margin-left:auto; height:32vw; }
section.year .figureBox.f1 figure { top:-2vw; left:-2vw; }
section.year .figureBox.f2 { margin-left:0; height:24vw; margin-top:-10vw; }
section.year .figureBox.f2 figure { top:-6vw; left:7vw; }
.history section.year .figureBox.f2 figcaption { right:-6vw; }

section.year.y1970 { height:32vw; }
section.year .figureBox.f3 { margin-left:auto; height:32vw; margin-top:-5vw; width:55% }
section.year .figureBox.f3 figure { top:-2vw; left:14vw; }
.history section.year .figureBox.f3 figcaption { right:auto; left:-6vw; bottom:-3vw;  }

section.year.y1980 { height:28vw; }
section.year.y1980 h2 { margin-left:auto; text-align:right;}
section.year.y1980 h2:before { display:none; }
section.year.y1980 h2:after{ content:""; display:inline-block; height:2px; width:8vw; background-color:#111; vertical-align:middle; margin-left:1vw; }
section.year .figureBox.f4 {  height:26vw; margin-top:-5vw; margin-left:13vw; }
section.year .figureBox.f4 figure { top:-2vw; left:9vw; }
.history section.year .figureBox.f4 figcaption { right:-4vw; }

section.year.y2010 { height:112vw; }
section.year .figureBox.f5 { margin-left:auto; height:25vw; }
section.year .figureBox.long figure img { width:auto; height:30vw; }
section.year .figureBox.f5 figure { top:-8vw; left:14vw; }
.history section.year .figureBox.f5 figcaption { right:auto; left:-9vw; bottom:0vw;  }

section.year .figureBox.f6 { margin-left:7vw; height:30vw; margin-top:-10vw; }
section.year .figureBox.f6 figure { top:-4vw; left:14vw; }
.history section.year .figureBox.f6 figcaption { right:-10vw; bottom:0vw;  }

section.year .figureBox.f7 { margin-left:auto; height:28vw; margin-top:5vw; margin-right:5vw; }
section.year .figureBox.f7 figure { top:-6vw; left:14vw; }
.history section.year .figureBox.f7 figcaption { right:auto; left:-9vw; bottom:0vw;  }

section.year .figureBox.f8 { margin-left:0vw; height:30vw; margin-top:-10vw; }
section.year .figureBox.f8 figure { top:-4vw; left:8vw; }
.history section.year .figureBox.f8 figcaption { right:-10vw; bottom:0vw;  }
section.year.last h3 { text-align:center; margin-top:4vw; }

.chart {
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-pack: distribute;
justify-content: space-around;
}
.chart li {
	-ms-flex-preferred-size: 50%;
               flex-basis: 50%;
			   max-width:50%;
}
.chart li img { width:100%; height:auto; }
section.box.blacks { background-color:#231815; }
section.box.blacks h2 { color:#FFF; }
section.box.blacks figure { position:relative; margin-top:4vw; }
section.box.blacks figure img { }
section.box.blacks figure a { display:block;text-indent:-9999px; position:absolute; border-radius:.6em; border:0px solid rgba(0,0,0,.0); box-sizing:border-box; 
-moz-transition: border 0.3s ease 0s,background-color 0.3s ease 0s;
-webkit-transition: border 0.3s ease 0s,background-color 0.3s ease 0s;
-o-transition: border 0.3s ease 0s,background-color 0.3s ease 0s;
-ms-transition: border 0.3s ease 0s,background-color 0.3s ease 0s;
transition: border 0.3s ease 0s,background-color 0.3s ease 0s;
}
section.box.blacks figure a:hover {border:.4vw solid rgba(0,0,0,.5); background-color:rgba(0,0,0,.1); }
section.box.blacks figure a.c1 { width:25%; height:25.7%; top:4.1%; left:25%; }
section.box.blacks figure a.c2 { width:21.6%; height:25.5%; top:25.5%; left:36.3%; }
section.box.blacks figure a.c3 { width:25.5%; height:28.6%; top:49.2%; left:25%; }
section.box.blacks figure a.c4 { width:18.8%; height:26.2%; top:62.3%; left:7.4%; }
section.box.blacks figure a.c5 { width:27.9%; height:27.2%; top:4.1%; left:69.6%; }
section.box.blacks figure a.c6 { width:25.4%; height:27.8%; top:41.5%; left:58%; }

.pTitle { border-bottom:1px solid #ccc; }

.fadePoint{ 
-webkit-transform:translateY(10vw);
-moz-transform:translateY(10vw);
-o-transform:translateY(10vw);
-ms-transform:translateY(10vw);
transform:translateY(10vw);
opacity:0; 

-moz-transition: opacity 1s ease-in-out 0s,-moz-transform 1s ease-in-out 0s;
-webkit-transition: opacity 1s ease-in-out 0s,-webkit-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 1s ease-in-out 0s,-o-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 1s ease-in-out 0s,-ms-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 1s ease-in-out 0s,transform 1s cubic-bezier(.07,.91,.14,.84) 0s;

}
.ie .fadePoint {
	-webkit-transform:translateY(100px);
-moz-transform:translateY(100px);
-o-transform:translateY(100px);
-ms-transform:translateY(100px);
transform:translateY(100px);
}
.fadePoint.fade { 
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
-o-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
opacity:1; 
}

a.fadePoint.fade { 
-webkit-animation: fadeIn .5s cubic-bezier(.07,.91,.14,.84) .1s both;
	animation: fadeIn .5s cubic-bezier(.07,.91,.14,.84) .1s both;
}



img { 
-moz-transition: opacity 1s ease-in-out 0s,-moz-transform 1s ease-in-out 0s;
-webkit-transition: opacity 1s ease-in-out 0s,-webkit-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 1s ease-in-out 0s,-o-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 1s ease-in-out 0s,-ms-transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 1s ease-in-out 0s,transform 1s cubic-bezier(.07,.91,.14,.84) 0s;
}
img.lazy { opacity:0; }

.loader,
.loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.loader {
  margin: -2.5em 0 0 -2.5em;
  font-size: 10px;
  position:absolute;
  top:50%; left:50%;
  text-indent: -9999em;
  border-top: .7em solid rgba(236,236,236, 0.2);
  border-right: .7em solid rgba(236,236,236, 0.2);
  border-bottom: .7em solid rgba(236,236,236, 0.2);
  border-left: .7em solid #ececec;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.intro .loader { display:none; }

.loadWrappr { width:100%; height:40vw; position:absolute; top:0; left:0; }
.intro .loadWrappr { display:none; }
.history section.main { position:relative; min-height:38vw; }
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


::selection {
  background: #A79256;
  color:#fff;
} 

.zd ::selection {
  background: #CCAB25;
  color:#fff;
}

.ad ::selection {
  background:#0864A1;
  color:#fff;
}
.sd ::selection {
  background:#C30D23;
  color:#fff;
}

p.em { margin-top:1em; }


@media screen and (min-width: 1151px) { 
nav#main a:hover:before {  }

nav#sub a {
	-moz-transition: opacity 0.3s ease 0s;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
-ms-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
nav#sub a:hover { opacity:.7; }

nav#sub a.contact { -moz-transition: background-color 0.3s ease 0s;
-webkit-transition: background-color 0.3s ease 0s;
-o-transition: background-color 0.3s ease 0s;
-ms-transition: background-color 0.3s ease 0s;
transition: background-color 0.3s ease 0s;
}
nav#sub a.contact:hover { background-color:#B9A368; opacity:1; }

a.watch,a.bt {
	-moz-transition: background-color 0.3s ease 0s;
-webkit-transition: background-color 0.3s ease 0s;
-o-transition: background-color 0.3s ease 0s;
-ms-transition: background-color 0.3s ease 0s;
transition: background-color 0.3s ease 0s;
}
a.watch:hover,a.bt:hover {
	background-color:#B39A5B;
}
	
a.watchb {
	-moz-transition: background-color 0.3s ease 0s;
-webkit-transition: background-color 0.3s ease 0s;
-o-transition: background-color 0.3s ease 0s;
-ms-transition: background-color 0.3s ease 0s;
transition: background-color 0.3s ease 0s;
}
a.watchb:hover {
	background-color:#B39A5B;
}	

.clm3 li a,#mainV #threeD {
	-moz-transition: opacity 0.3s ease 0s;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
-ms-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
 }
.clm3 li a:hover,.intro #mainV  #threeD:hover {
	opacity:.7;
}
}

@media screen and (min-width: 737px) { 
.pc{ display:block; }
.sp { display:none!important; }

.clm3 li:nth-child(1) .infos { padding-left: 2.5vw;}
.clm3 li:nth-child(2) .infos { padding-left: 7vw;}
.clm3 li:nth-child(3) .infos { margin-left: -4vw;}
.history section.main .vCenter p rt { font-size:.5vw; }
.btBox { margin-top:-4vw; position:relative; z-index:1; }
.clm3 { padding:0 4vw; }
}

@media screen and (max-width: 1250px) and (min-width: 737px) { 
.clm3 li figure figcaption {
	transform:scale(0.8);
}
.clm3 li:nth-child(3) figure figcaption:nth-child(6) { width:7em;  left: 78.7%; }
}

@media screen and (max-width: 1150px) { 
header { height:50px; background-color:#fff; z-index:3; }
	header h1 a {  display:block;width:auto; background-size:auto 20px;  }
header h1 { width:auto; height:100%; }
header h1:after { display:none;}
nav#main { position:relative; top:0; left:0; height:50px; background-color:#333333; text-align:center; z-index:-1;  }
nav#main .sub { display:block; height:auto; background-color:#998247; position:absolute; top:50px; left:0; width:100%; text-align:left; box-shadow: 0px 1px 10px rgba(0,0,0,.3);
-webkit-transform:scaleY(0);
-moz-transform:scaleY(0);
-o-transform:scaleY(0);
-ms-transform:scaleY(0);
transform:scaleY(0);

-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;

opacity:0;

-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;

}
nav#main .sub a { display:block; height:44px; padding:0 1em; line-height:44px; color:#FFF; text-decoration:none; font-size:80%; font-weight:bold; vertical-align:top;
 }
.mainOpen nav#main .sub {
	-webkit-transform:scaleY(1);
-moz-transform:scaleY(1);
-o-transform:scaleY(1);
-ms-transform:scaleY(1);
transform:scaleY(1);

opacity:1;

}
nav#main a.drive { opacity:0;font-weight:normal;
-webkit-transform:translateX(-10%);
-moz-transform:translateX(-10%);
-o-transform:translateX(-10%);
-ms-transform:translateX(-10%);
transform:translateX(-10%);

-moz-transition: opacity 0.3s ease .3s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) .3s;
-webkit-transition: opacity 0.3s ease .3s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) .3s;
-o-transition: opacity 0.3s ease .3s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) .3s;
-ms-transition: opacity 0.3s ease .3s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) .3s;
transition: opacity 0.3s ease .3s,transform 0.3s cubic-bezier(.07,.91,.14,.84) .3s;

}
.mainOpen nav#main a.drive { opacity:1;
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
-o-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0);
}

nav#main a.drive span { display:inline; text-align:left; font-size:70%; font-weight:normal; margin-left:1em; color:rgba(255,255,255,.8)!important; }
nav#main .pull { display:inline-block; height:100%; line-height:50px; color:#FFF; cursor:pointer; padding:0 1em; font-weight:bold; font-size:90%; z-index:1;  }
body.mainOpen nav#main .pull {  background-color:#998247; }
nav#main .pull:after { content:""; display:inline-block; height:100%; width:9px; background-image:url(../img/arrow2.svg); background-repeat:no-repeat; background-size:contain; vertical-align:middle; margin-left:.5em; background-position:center; }
body.mainOpen nav#main .pull:after {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
	 }
nav#main a { line-height:50px; }

body.mainOpen,body.subOpen { position:fixed; width:100%; }

.mainOpen #overlay,.subOpen #overlay { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0); cursor:pointer; z-index:2;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1); }

nav#sub { position:absolute; top:10px; right:10px; height:auto; background-color:#FFF; padding:20px 0; border-radius:.2em; box-shadow:0px 2px 15px rgba(0,0,0,.3);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);

-webkit-transform-origin:100% 0;
-moz-transform-origin:100% 0;
-ms-transform-origin:100% 0;
-o-transform-origin:100% 0;
transform-origin:100% 0;

opacity:0;

-moz-transition: opacity 0.3s ease 0s,-moz-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.3s ease 0s,-webkit-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.3s ease 0s,-o-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.3s ease 0s,-ms-transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.3s ease 0s,transform 0.3s cubic-bezier(.07,.91,.14,.84) 0s;
 }
.subOpen nav#sub {-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
opacity:1;
 }
nav#sub a {  display:block; height:44px; line-height:44px; font-size:80%; vertical-align:middle; color:#666; text-decoration:none; padding:0 2em; }
nav#sub a:after { content:""; display:inline-block; height:100%; width:6px; background-image:url(../img/arrow.svg); background-position:center; background-size:contain; background-repeat:no-repeat; vertical-align:middle; margin-left:.7em; }
nav#sub a.contact { width:auto; height:44px; background-color:transparent; text-indent:0px; background-image:none;  padding:0 2em;}
#menu { width:50px; height:50px; position:absolute; top:0; right:0; cursor:pointer; background-image:url(../img/menu.svg); background-repeat:no-repeat; background-position:center; background-size:4px 15px; }

#push { margin-top:100px; }

.history figcaption {
   
    bottom: -2vw;
    right: -2vw;
    
}
.history section.year figcaption {
    right: -6vw;
}
.history section.year .figureBox.f3 figcaption {

    left: -8vw;
    bottom: -3vw;
}
.history section.year .figureBox.f4 figcaption {
    right: -8vw;
}
.history section.year .figureBox.f6 figcaption {
    right: -14vw;
    bottom: 0vw;
}
.history section.year .figureBox.f7 figcaption {
 
    left: -9vw;
    bottom: -6vw;
}

section.year .figureBox.f1 {
    height: 34vw;
}

section.year .figureBox.f2 {

    height: 26vw;
    margin-top: -16vw;
}
section.year .figureBox.f4 {
    height: 27vw;
    margin-top: -7vw;

}
section.year .figureBox.f7 {

    height: 32vw;
    margin-top: 5vw;
	

}
section.year .figureBox.f8 {

    margin-top: -14vw;
}



nav#main .sub a.selected:before { opacity:0; }
nav#main .sub a { 
-moz-transition: background-color 0.3s ease 0s;
-webkit-transition: background-color 0.3s ease 0s;
-o-transition: background-color 0.3s ease 0s;
-ms-transition: background-color 0.3s ease 0s;
transition: background-color 0.3s ease 0s;
}
nav#main .sub a.selected { background-color:#8B7741; }
nav#main .pull:before { content:""; display:block; width:100%; height:4px; background-color:rgba(255,255,255,.7); opacity:0; position:absolute; left:0; bottom:0;
-moz-transition: opacity 0.6s ease 0s,-moz-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-webkit-transition: opacity 0.6s ease 0s,-webkit-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-o-transition: opacity 0.6s ease 0s,-o-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
-ms-transition: opacity 0.6s ease 0s,-ms-transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s;
transition: opacity 0.6s ease 0s,transform 0.6s cubic-bezier(.07,.91,.14,.84) 0s; }
nav#main .pull.selected:before { opacity:1; }
header.shadow { box-shadow: 0px 1px 10px rgba(0,0,0,.0); }
header.shadow #main { box-shadow: 0px 1px 10px rgba(0,0,0,.3); }
.clm li:nth-child(2) .vCenter { padding-right:2vw; }
}

@media screen and (min-width: 737px) and (max-width: 1150px) {
	nav#main .sub { text-align:center; }
nav#main .sub a { display:inline-block; }	
}

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

#mainV {
    height: 80vw;
    
}
#mainV .copy { 
    position: absolute; padding-right:0vw;
	width:64%;
    top: 50%;
    right: 0;
    text-align: center;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#mainV .h2 img {
    height: auto;
    width: 90%;
}
#mainV p.ray { width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,0); z-index:2; }
#mainV h2 { font-size:12vw; text-align:center; line-height:1; }
#mainV em { text-align:center; margin-bottom:.6em; font-size:25%; }
#mainV #threeD { z-index:2; }
a.watch {
    display: block;
    color: #FFF;
    text-decoration: none;
    width: 90%;
    font-size: 4vw;
    padding: 1em 1em;
    background-color: #A79256;
    text-align: left;
    border-radius: .2em;
    font-weight: bold;
    margin-top: 2vw;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
	background-position: 90% center;
}
a.watchb {
    display: block;
    color: #FFF;
    text-decoration: none;
    width: 90%;
    font-size: 4vw;
    padding: 1em 1em;
    background-color: #A79256;
    text-align: left;
    border-radius: .2em;
    font-weight: bold;
    margin-top: 2vw;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
	background-position: 90% center;
}	
.title h2 {
    font-size: 6.5vw;
    display: block;
    vertical-align: 1vw;
	margin-bottom:1vw;
}
.title h3 {
    font-size: 12vw;
    display: block;
    line-height: 1;
    vertical-align: bottom;
}

.pc{ display:none!important; }
.sp { display:block; }
h3.titles {
    font-size: 5vw;
    color: #111111;
    font-weight: normal;
    margin-top: 2em;
    margin-bottom: 7vw;
	line-height:1.3;
}


.clm3 {
    padding: 0 0vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
}
.clm3 li {
    padding: 0 3vw;
    box-sizing: border-box;
    text-align: left;   
    max-width: 100%;
	margin-bottom:12vw;
	
}
.clm3 li .infos { padding: 0 0 0 7vw; }
.srs {
    font-size: 3.5vw;
    margin-bottom: 3vw;
}
.srs span {

    font-size: 3vw;

}
.clm3 li h4 {
    font-size: 5vw;
}
.clm3 li .aa {

    margin-top: .3em;
 
}
.clm3 li img {
    width: auto;
    height: 57vw;
}
.clm3 li:nth-child(1) img { margin-left:-9vw; }
.clm3 li:nth-child(2) img { margin-left:-9vw; }
.clm3 li figure { text-align:center;margin-bottom: 4vw; }
.clm3 li figure figcaption { display:block; bottom:1.3%; position:absolute; font-size:2.5vw; text-align:center; 

}
.clm3 li:nth-child(1) figure figcaption:nth-child(2) { left:7%; }
.clm3 li:nth-child(1) figure figcaption:nth-child(3) { left:45.2%; }
.clm3 li:nth-child(1) figure figcaption:nth-child(4) { left:66.2%; }
.clm3 li:nth-child(2) figure figcaption:nth-child(2) { left:16.333%; }
.clm3 li:nth-child(2) figure figcaption:nth-child(3) { left:56%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(2) { left:-7.333%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(3) { left:26.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(4) { left:44.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(5) { left:62.7%; }
.clm3 li:nth-child(3) figure figcaption:nth-child(6) { left:79.7%; }

#top1 {
    background-image:none;
}

.clm2 {
    padding: 0 0vw;
    display: block;
    
}
.clm2 li:nth-child(1),.clm2 li:nth-child(2)  {

    max-width: 100%;
}
.clm2 li:nth-child(2)  { padding:0; margin-top:4vw; }

.vCenter {
    position:static;

    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.clm2 li:nth-child(2) h2 {

    font-size: 11vw;
    margin-bottom: 5vw;
}

section.box p,.productOpen #modal p {
    font-size: 4vw;
    line-height: 200%;
}

a.bt {
	display:block; text-align:center;
    font-size: 4vw;
padding: 1em 1.3em;
    margin-top: 4.5vw;
	margin-left:auto;
	margin-right:auto;
}
.clm2 li:nth-child(1) img { width:80%; }
.clm2 li figure { text-align:center; }

footer {
    height: auto;

    line-height: 1;
    position: relative;
}

footer a {border-top:1px solid #ddd;
    display: block;
    height: auto;
    position:static;

    text-decoration: none;
    font-size: 11px;
    padding:2em 1em;
    background-image:none;

}
footer p { border-top:1px solid #ddd;
	padding: 2em 1em ;
}
#modal { width:100%; left:0; }
.viewOpen #modal { height:100%;

}
.viewOpen #modal .modal { height:100%; padding:0; }
 
#z1:before { display:none; }
.clm li {
	-ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.clm {
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.clm li:nth-child(1) {
	background-image:url(../img/top/main1.jpg); background-position:left bottom; background-repeat:no-repeat; background-size:cover; text-align:center;
}
.clm li:nth-child(1) img { width:70%; }
section p { font-size:4vw; text-align:left; }
.clm li:nth-child(2) {
	padding: 6vw 5vw;
}
.clm li h2, section h2 {font-size: 6.5vw; }
.android .clm li h2, .android section h2 {font-size: 6.5vw; }
.clm li h3 {
    
    font-size: 4.7vw;
    margin-top: 6vw;
    margin-bottom: .4em;
    line-height: 1.2;
}
.list li {
    margin: 0 0vw 6vw 0vw;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.list { padding:0 0vw; }
.list li h3 {
    font-size: 4.7vw;
    line-height: 1.2;
    margin-bottom: .5em;
}
.list li figure {
    margin-bottom: 3vw;
}
section.box p.cur {
    font-size: 2vw; text-align:left; padding:2vw 3vw;
}
section.center { padding: 4vw 2vw; }
.mainImage figure img { height:70vw; }
.mainImage {
    height: 80vw;
}
.clm2.v2 {padding: 0 0vw;
	-webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
		 -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.clm2.v2 li:nth-child(1) {

    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.clm2.v2 li:nth-child(2) {
    
    padding: 0vw 0vw 0 0vw;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.clm2.v2 li:nth-child(1) img { width:70%; }
.clm2.v2 h3 { font-size:4.7vw; }
.clm2.v2 h3 span  { font-size:80%; line-height:1.4; }
.clm2.v2 li:nth-child(2) li:nth-child(1) {
    max-width: 100%;
    width: 20vw;
    float: left;
}
.clm2.v2 li:nth-child(2) li:nth-child(2) {
    margin-left: 24vw; margin-top:0;
    max-width: 100%;
}
.clm2.v2 h4 { font-size:4.7vw; }
.clm2.v2 li:nth-child(2) ul {
    margin-bottom: 6vw;
}

section.box.blue h3 {
    font-size: 5.7vw;
}
section.box.blue h3 span {
	font-size:60%;
}
.image3 li img {
    height: auto;
    width: 60%;
}

.zd .blue .image3 li img {
    height: auto;
    width: 60%;
}

.image3 li {
    display: inline-block;
    margin: 0 0 8vw 0;
    vertical-align: top;
}
.zd .blue .image3 {    margin-top: 8vw; }
.zd .blue .image3 li {
    display: inline-block;
    margin: 0 0 8vw 0;
    vertical-align: top;
}
.image3 li figure {
    margin-bottom: 4vw;
}
section.box.grey.blue h4 {
    font-size: 1.5vw;
    text-align: left;
    margin-bottom: 1.2em;
}
section.box.grey.blue .inner ul li p span {
    display: block;
    margin-left: 0em;
}
section.box.grey.blue .inner {
    padding: 4vw 0;
    text-align: left; font-size:1.5vw;
}
section.box.grey.blue .inner ul p { margin-bottom:.5em; font-size:1.5vw; }
.product {
    width: 100%;
    margin: 0 auto;
}
.pBox {
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  margin-top:14vw;
}
.pBox figure {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.pBox .info {
    padding-left: 0vw;
    box-sizing: border-box;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.pBox .info h3 {
    font-size: 22vw;

}
.pBox .info h4 {
    display: inline-block;
    vertical-align: 3vw;
    font-size: 7vw;
    margin-left: 2vw;
}
.pBox h5 {

    font-size: 6.2vw;
    margin-top: .5em;
    font-weight: normal;
}
.pBox h5.new:after {
    content: "NEW";
    display: inline-block;
    background-color: #C30D23;
    font-size: 70%;
    vertical-align: .5vw;
    color: #FFF;
    font-weight: bold;
    height: 7vw;
    line-height: 7vw;
    padding: 0 2vw;
    border-radius: .2em;
    margin-left: 2vw;
}
.pBox .info .icon li {
    display: inline-block;
    vertical-align: top;
    width: 20%;
}
.pBox .info .icon li p,.productOpen #modal .pBox .info .icon li p { line-height:1.3; font-size:1.8vw; }
.pBox .info .icon.icon2 li {
    width: auto;
    height: 8vw;
    margin-right: 1vw;
}
.pBox .info .icon.icon3 li img {
    width: 24vw;
    height: auto;
}
.pBox .info .icon.icon3 li p,.productOpen #modal .pBox .info .icon.icon3 li p  {
    text-align: left;
    font-size: 4vw;

}
.pBox .info .icon {
    margin-top: 4vw;
}
.pBox figure img {
    width: 80%;
    height: auto;
}
.pBox figure { text-align:center; line-height:0; }
.pBox .info .icon.icon3 li { margin-bottom:3vw; }

#mainV.adive:after { background-size:cover; }
#mainV.adive p.ray,#mainV.sdive p.ray { background-color:rgba(255,255,255,0); }
#mainV.adive .copy,#mainV.sdive .copy { padding:4vw 0; }
.ad .clm li:nth-child(1) { background-image:none; }

.clm2.v3 li:nth-child(1) {

    width: 20vw;

}

.clm2.v3 li:nth-child(2) {
    margin-left: 24vw; margin-top:0;
    max-width: 100%;
}
.clm2.v3 li:nth-child(1) img {
	
	width:100%; }

.clm2.v3 h4 {
    font-size: 4.7vw;
}
.clm2.v3 { margin-top:5vw; }
section.box.box2 h4 { font-size:5vw; }
section.box.box2 { padding: 6vw 5vw; }

.ad .image3 li img {
    height: 15vw;
    width: auto;
}
.ad .image3 li p {
    font-size: 4vw;
    text-align: left;
}

.milBox li {

    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 0 0vw;
}
.milBox {
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.milBox li h3 {
    font-size: 4.7vw;

}

.milBox li p {

    margin-bottom: 7vw;
}
section.box .milBox+ p.cur { padding:0; }
.mil { text-align:left; display:block; }
.mil:before {
 
    width: 15vw;
    height: 15vw;

    margin-right: 1vw;
	vertical-align:top;
}
section .mil h2 { font-size:6vw;
 
}
.android section .mil h2 { font-size:5vw;
    vertical-align: -6vw;
}
.clmV4 {
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.clmV4 li { 
-ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.clmV4 li .info h3 {
	font-size:4.7vw; }
	
#mainV #threeD img { display:none!important; }
#mainV #threeD #bt { width:12vw; height:12vw; cursor:pointer; }
#mainV #threeD { width:12vw; height:12vw;}
section.box p.cur { padding:0; }

.zd .image3 li img {
    height: 9vw;
    width: auto;
}
.zd .image3 li {
	margin: 0 1.5vw;
}

.history figcaption { text-align:left; font-size: 6vw; z-index:1;}
.history figcaption:before { height:26vw; }
.history .main .clm2 li:nth-child(2) h2 {
    font-size: 9vw;
}
section.year h2, section.box.last h2 { font-size:9vw; }
.history .main .clm2 li:nth-child(2) h2 { margin-top:12vw; }

.history section.year .figureBox.f2 figcaption {
    right: -20vw;
	bottom:-7vw;
}
.history section.year figcaption {
    right: -21vw;bottom:-12vw;
}
section.year.y1960 {
    height: 84vw;
}
section.year .figureBox.f2 {
    height: 24vw; width:40%;
}
section.year .figureBox.f1 {
    height: 46vw;
}
section.year .figureBox.f3 { height:38vw; }
.history section.year .figureBox.f3 figcaption {
    right: auto;
    left: -26vw;
    bottom: -8vw;
}
section.year.y1970 {
    height: 46vw;
}

section.year.y1980 {
    height: 44vw;
}
.history section.year .figureBox.f4 figcaption {
    right: -28vw;
}

.history section.year .figureBox.f5 figcaption {
    right: auto;
    left: -18vw;
    bottom: -15vw;
}
section.year .figureBox.f5 { height:32vw; }
section.year .figureBox.f5 figure {
    top: -8vw;
    left: 22vw;
}
section.year .figureBox.f6 figure {
    top: -4vw;
    left: 22vw;
}
.history section.year .figureBox.f6 figcaption {
    right: 13vw;
    bottom: -9vw; width:16vw;
}
section.year .figureBox.f7 figure {
    top: -6vw;
    left: 19vw;
}
.history section.year .figureBox.f7 figcaption {
    right: auto;
    left: -12vw;
    bottom: -22vw; width:28vw;
}
.history section.year .figureBox.f8 figcaption {
    right: -19vw;
    bottom: -15vw;
}
section.year .figureBox.f8 {

    height: 36vw;

}
section.year.y2010 {
    height: 139vw;
}
section.box.last h3 { font-size:7vw; }

section.box.blacks figure a:hover {border:0vw solid rgba(0,0,0,0); background-color:rgba(0,0,0,0); }
section.box.blacks figure a.c1 { width:18.6%; height:26.6%; top:3.9%; left:38.7%; }
section.box.blacks figure a.c2 { width:20.7%; height:25.4%; top:29.9%; left:50.8%; }
section.box.blacks figure a.c3 { width:20.7%; height:25.4%; top:54.2%; left:36.6%; }
section.box.blacks figure a.c4 { width:20.7%; height:25.4%; top:62.9%; left:19.2%; }
section.box.blacks figure a.c5 { width:38%; height:26.6%;  top:3.9%; left:58.6%; }
section.box.blacks figure a.c6 { width:20.7%; height:25.4%; top:42.7%; left:70%; }
section.box.blacks { background-color:#000; padding-left:0; padding-right:0; }

.sd section.box .list p.flo em:before { content:""; display: block; width:14vw; height:14vw; background-image:url(../img/s/9.png); background-repeat:no-repeat; background-size:contain; font-size:1.8vw; font-style:normal;}
.sd section.box .list p.flo em:after { font-size:1.8vw; padding-top:1vw;}
.sd section.box .list p.flo span { display:block; margin-left:16vw; } 
sup { font-size:50%; }
#mainV p.cur { font-size:1.5vw; }
#mainV strong { margin-top:1em; font-size:25%; }
#mainV:after { left:-24vw; }
.zd .blue .image3 li figure+p { text-align:center; }
.ad .clm h2 p.cur { font-size:2vw; }
section.box.last { background-image:none; }

.history section.main .vCenter,.ie .history section.main .vCenter {
	-webkit-transform:translateY(10%);
-moz-transform:translateY(10%);
-o-transform:translateY(10%);
-ms-transform:translateY(10%);
transform:translateY(10%);
}
.history.intro section.main .vCenter {
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
padding-top:1em;
 }
section.year .figureBox.f4 { height:31vw; }

.loader,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
}
.loader {
  margin: -1.25em 0 0 -1.25em;

  border-top: .4em solid rgba(236,236,236, 0.2);
  border-right: .4em solid rgba(236,236,236, 0.2);
  border-bottom: .4em solid rgba(236,236,236, 0.2);
  border-left: .4em solid #ececec;
 
}
.loadWrappr { height:80vw; }
.history section.main { min-height:100%; }

#z1 h2 { text-align:center; padding-top:6vw; }
.viewOpen #modalCloseSP,.productOpen #modalCloseSP { width:60px; height:60px; position:absolute; top:0; right:0; cursor:pointer; background-image:url(../img/close.svg); background-repeat:no-repeat; background-size:15px; background-position:center; }
.productOpen #modalCloseSP { background-image:url(../img/close2.svg); }
.zd .productOpen #modalCloseSP { background-image:url(../img/close.svg); }
.viewOpen #modalCloseSP,.productOpen #modalCloseSP { position:fixed; z-index:999; }
.viewOpen #modal { width:100%; left:0; }

.clm2 li:nth-child(2) h2 rt,.history .main .clm2 li:nth-child(2) h2 rt { font-size:2vw; }
.productOpen #modal {
	width:100%;left:0%; height:100%; border-radius:0em;
}
.productOpen #modal p.cur,section.box.grey.blue .inner ul li p,section.box.grey.blue h4,section.box.grey.blue .inner { font-size:2vw; }
section.box.grey.blue .inner ul li { display:block; }
.pBox h5+p, .productOpen #modal .pBox h5+p { font-size:3vw; }
.productOpen #modal .pBox { padding-top:8vw; }
}

@media screen and (max-width: 736px) and (orientation: landscape) {
	.viewOpen #modal {
    width: 40%;
    left: 30%;
	}
	
	
}

@media screen and (min-width: 737px) and (orientation: portrait) {
	.viewOpen #modal {
    width: 60%;
    left: 20%;
	}
}