/*
99Lime.com HTML KickStart by Joshua Gatcke
style.css
*/
/*---------------------------------
IMPORTS
-----------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,100,200,300,500,600,700,800,900);
/*@import url(https://fonts.googleapis.com/css?family=Share+Tech);
@import url(https://fonts.googleapis.com/css?family=Arimo:400,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text|IM+Fell+English);*/
/*@font-face {
font-family: 'mplus';
src: url('../ofj_font/mplus.eot');
src: url('../ofj_font/mplus.eot?#iefix') format('embedded-opentype'),
url('../ofj_font/mplus.woff') format('woff'),
url('../ofj_font/mplus.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}*/
/*@font-face {
font-family: 'mplus';
src: url('../m_font/mplus-2p-regular.eot');
src: url('../m_font/mplus-2p-regular.eot?#iefix') format('embedded-opentype'),
url('../m_font/mplus-2p-regular.woff') format('woff'),
url('../m_font/mplus-2p-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}*/
/*@font-face {
font-family: 'hare';
src: url('../hare/Harenosora.woff') format('woff'),
url('../hare/Harenosora.otf') format('opentype');
font-weight: normal;
font-style: normal;
}*/
/*---------------------------------
OVERRIDES
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
font-family: 'Montserrat','dnp-shuei-gothic-kin-std',Meiryo, Osaka, sans-serif;
font-weight:normal;
}
thead th,
tbody th{
font-family:'dnp-shuei-gothic-kin-std','Work Sans',Meiryo, Osaka, sans-serif;
}
button,
a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"]{
font-family: 'dnp-shuei-gothic-kin-std','Work Sans',Meiryo, Osaka, sans-serif;
}
blockquote{
font-family: 'dnp-shuei-gothic-kin-std','Work Sans',Meiryo, Osaka, sans-serif;
}
/*---------------------------------
LAYOUT
-----------------------------------*/
body{
margin:0;
padding: 0 0 0;
/*color:#221E1F;*/
color:#333;
background:#e1e1e1;
font:normal 0.9em/150% 'Montserrat','dnp-shuei-gothic-kin-std',Meiryo, Osaka, sans-serif;
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
-webkit-text-size-adjust: 100%;
overflow:hidden;
}
html,body{ height:100%;}
#container{ width:100%;
/* background-color:#FFF;*/}
#container{ overflow:hidden;}
main{ background-color:#FFF;}
#loader {
width: 100%;
height: 100%;
display: none;
position: fixed;
_position: absolute; /* IE6 */
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
z-index: 9999;
}
#loader img{
width:24px;
height:24px;
}
#fade {
width: 100%;
height:100%;
display: none;
background-color: #FFF;
position: fixed;
top: 0px;
left: 0px;
z-index: 9990;
}
#svg{
width:25%;
height:100%;
display:block;
z-index:1;
top:0;
right:0;
position:fixed;
/*opacity:0.5;*/
}
.svg1{
width:80%;
height:auto;
max-width:400px;
display:block;
margin:0 auto;
z-index:10;
position:relative;
}
.svg2{
width:20%;
max-width:80px;
height:auto;
display:block;
margin:0 auto;
position:relative;
z-index:10;
}
.svg3{
width:800px;
left:50%;
top:0;
/*margin-top:-300px;*/
margin-left:-400px;
height:100%;
position:absolute;
z-index:8;
pointer-events: none;
}
.svg3 .txtmG{pointer-events: auto;}
.svg3 .txtmG a text{
font-size:0.8em;
fill:#333;
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
font-family:'Montserrat','dnp-shuei-gothic-kin-std',Meiryo, Osaka, sans-serif;
/*font-weight:700;*/
cursor: pointer;
}
.svg4{
top:0;
right:0;
position:absolute;
}
.svg3 .txtmG a.active text{
font-size:0.8em;
fill:#FFF;
}
.svg3 .txtmL{
stroke:#930;
stroke-width:0;
/* -moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;*/
}
.svg3 .txtmL.active{
fill:#C30;}
@media all and (max-width: 768px) {
.svg1{ width:60%; }
}
.testlist{
position:absolute;
width:45%;
height:100%;
top:0;
right:0;
overflow:hidden;
padding:0;
margin:0;
/* background:#FF9;*/
}
.testlist li{
width:95%;
height:100%;
padding:0;
margin:0 auto;
list-style:none;
display:none;
}
.testlist li.active{ display:block;}
.testlist li .bgimgbox{
position:relative;
width:40.2vw;
height:22.45vw;
top:50%;
right:0;
/*overflow:hidden;*/
padding:0;
margin:0;
margin-top:-11.225vw;
z-index:5;
box-shadow:0px 0px 12px 3px rgba(4,4,4,0.07);
-moz-box-shadow:0px 0px 12px 3px rgba(4,4,4,0.07);
-webkit-box-shadow:0px 0px 12px 3px rgba(4,4,4,0.07);
}
.testlist li .bgimgbox a{
display:block;
width:100%;
height: 100%;
/*height:auto;
pointer-events: none;*/
position: relative;
z-index: 9999;
}
.testlist li .color-wrapper{
position:absolute;
content:'';
top:0%;
right:0;
height:100%;
width:75%;
background-color:#fff;
}
.testlist li .bgimgbox img{
position:absolute;
display:block;
width:100%;
height:auto;
margin:auto; padding:0;
top:0;
bottom:0;
left:0;
right:0;
}
.testlist li.active .bgimgbox img{
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation:animation-bgimgbox 0.4s linear;
-moz-animation:animation-bgimgbox 0.4s linear;
-ms-animation:animation-bgimgbox 0.4s linear;
animation:animation-bgimgbox 0.4s linear;
}
@keyframes animation-bgimgbox {
from{
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-o-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
}
to{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.testlist li .bgimgbox span{
display:none;
/*font-weight:700;*/
}
main{
position:relative;
display:none;
/*background:#fff;*/
padding-left:46px;
}
@media all and (max-width: 768px) {
main{padding-left:0;}
.testlist{
position:static;
width:100%;
height:auto;
margin:7% auto;
padding-bottom:20px;
/* background:#FF9;*/
}
.testlist li{
width:86%;
height:auto;
padding:0;
margin:35px 7% 0;
position:relative;
list-style:none;
display:block;
}
.testlist li .bgimgbox{
width:100%;
height:auto;
overflow:hidden;
padding:0;
margin:0 auto 0;
z-index:5;
}
.testlist li .bgimgbox span{
padding:10px 0 7px;
position:relative;
display:block;
}
.testlist li .bgimgbox a{
width:100%;
height:auto;
pointer-events:auto;
display:block;
color:#fff;
text-decoration:none;
}
.testlist li .color-wrapper{
position:absolute;
top:0%;
right:0;
height:100%;
width:100%;
background-color:#fff;
}
.testlist li .bgimgbox img{
position:static;
width:100%;
height:auto;
max-height:auto;
margin:0; padding:0;
}
/*.testlist li:hover .bgimgbox img{
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-o-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
}*/
#svg{ display:none;}
.svg3{display:none;}
}
#hlogo{
position:absolute;
top:20px;
right:20px;
width:100px;
height:100px;
margin:0;
}
#hlogo img{
width:100%;
height:auto;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
}
/* Waypoints */
.effect{}
.effect .ef{}
.pp{}
.bounceInLeft, .bounceInRight,.fadeIn,.fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay1 { animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
.delay2 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.delay3 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay4 { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; }
.delay5 { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay6 { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay7 { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; }
.delay8 { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; }
.delay9 { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }
.delay10 { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay11 { animation-delay: 1.1s; -webkit-animation-delay: 1.1s; }
.delay12 { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; }
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
background:#FFF;
position:relative;
overflow:hidden;
margin:0 auto;
}
#section1{background:#FFF;}
/*#container,.section,#section1{background:#EEE7D3;}*/
#section1 .fp-tableCell {
vertical-align:center;
}
#section1 .intro{
width:84%;
height:auto;
margin:0 8%;
}
header{
width:46px;
height:100%;
top:0;
left:0;
z-index:100;
position:fixed;
/*border-right:1px solid #D4C7AD;*/
/*background:#f6f6f6;*/
/*background:#eee;*/
}
header .hnav{
width:auto;
height:100%;
}
header .hnav ul{
margin:0;
padding:0;
width:auto;
height:100%;
list-style:none;
position:relative;
/*font-weight:700;*/
}
header .hnav ul li{
margin:0;
padding:0;
text-align:center;
width:80px;
margin-top:-1em;
left:-15px;
position:absolute;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* header .hnav ul li:first-child{ top:20%; }
header .hnav ul li:nth-child(2){ top:40%; }
header .hnav ul li:nth-child(3){ top:60%; }
header .hnav ul li:nth-child(4){ top:80%; } */
header .hnav ul li:first-child{ top:20%; }
header .hnav ul li:nth-child(2){ top:35%; }
header .hnav ul li:nth-child(3){ top:50%; }
header .hnav ul li:nth-child(4){ top:65%; }
header .hnav ul li:nth-child(5){ top:80%; }
header .hnav ul li a{
line-height:2em;
text-decoration:none;
color:#333;
position:relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
padding:0;
}
header .hnav ul li a:hover,header .hnav ul li a.active{
color:#CC5C20;
}
header .hnav ul li a.active{
cursor:default;
}
header .hnav ul li a::before{
position:absolute;
content:'';
bottom:-20px;
left:0;
width:0;
height:20px;
background:#D4C7AD;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
header .hnav ul li a::after{
position:absolute;
content:'';
bottom:-20px;
left:0;
width:0;
height:20px;
background:#CC5C20;
transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
}
header .hnav ul li a:hover::before,header .hnav ul li a.active::before{
width:100%;
z-index:-1;
}
header .hnav ul li a:hover::after,header .hnav ul li a.active::after{
width:100%;
z-index:2;
transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
}
@media all and (max-width: 768px) {
#section1{padding-top:90px;}
/*#psection1 .intro{margin-left:2%; }*/
header{
width:100%;
height:50px;
position:absolute;
}
header .hnav ul{
width:100%;
height:100%;
margin:0 auto;
text-align:center;
}
header .hnav ul li{
margin:7px 7px 0;
width:auto;
left:0;
top:0;
display:inline-block;
position:relative;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
header .hnav ul li:first-child,
header .hnav ul li:nth-child(2),
header .hnav ul li:nth-child(3),
header .hnav ul li:nth-child(4),
header .hnav ul li:nth-child(5){ top:0; }
header .hnav ul li a::before{
bottom:auto;
top:-20px;
left:0;
width:0;
height:20px;
}
header .hnav ul li a::after{
bottom:auto;
top:-20px;
left:0;
width:0;
height:20px;
}
}
@media all and (max-width: 480px) {
header .hnav ul{font-size: 0.8em;}
}
#section2{
}
footer{
width:100%;
padding:0;
}
footer .copyright{
font-size:0.72em;
color:#333;
text-align:center;
width:100%;
margin:20px auto 3px;
position:absolute;
bottom:5px;
}