@charset "UTF-8";
/*---------------------- Body ------------------------*/
@media (orientation: landscape) and (min-width: 768px){
body{
background-image: url("../images/history/main_bg.jpg");
background-size:cover;
background-position: center;
background-attachment: fixed;
}
}
@media (orientation: portrait) and (min-width: 768px){
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background:url("../images/history/main_bg.jpg") center no-repeat;
background-size:cover;
}
}
@media (orientation: landscape) and (max-width: 767px){
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("../images/history/main_bg.jpg") center no-repeat;
background-size:cover;
}
}
@media (orientation: portrait) and (max-width: 767px){
body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height: 100vh;
background:url("../images/history/main_bg.jpg") center no-repeat;
background-size:cover;
}
}
/*---------------------- Global Navi Button ------------------------*/
#gNaviBtn span {
border-bottom: solid 2px #000;
}
/*---------------------- Effect Fade ------------------------*/
.effect-fade {
opacity : 0;
transition : all 2000ms;
}
.effect-fade.effect-scroll {
opacity : 1;
}
/*---------------------- History ------------------------*/
#history li{
list-style-type: none;
}
#history li .photo img{
display: block;
}
@media (min-width: 768px){
#history{
padding:0 6%;
}
#history .title{
height:calc(100vh - (22vw + 120px));
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height:300px;
}
#history .logo{
text-align: center;
margin-bottom:7%;
}
#history h1{
text-align: center;
font-size: 2em;
letter-spacing: 0.3em;
}
#history .downArrow{
width: 20px;
height: 20px;
border: 5px solid;
border-color:  transparent transparent #ccc #ccc;
transform: rotate(-45deg);
position: fixed;
left:50%;
margin-left:-21px;
bottom:5%;
}
#history ul{
padding:0 0 20px;
}
#history li{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width:1280px;
margin:0 auto 120px;
background: rgba(255,255,255,0.5);
}
#history li.reverse{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#history li .photo img{
height:22vw;
}
#history li .text{
box-sizing: border-box;
padding:0 4%;
}
#history li .text h2{
font-size:1.5em;
margin-bottom:25px;
letter-spacing: 0.2em;
}
#history li .text p{
line-height: 200%;
}
}
@media (max-width: 1365px) and (min-width: 768px) {
#history .title{
height:calc(100vh - (30vw + 80px));
}
#history ul{
padding:0 0 10px;
}
#history li{
margin:0 auto 80px;
}
#history li .photo img{
height:30vw;
}
#history li .text h2{
font-size:1.4em;
margin-bottom:20px;
}
#history li .text p{
font-size: 0.9em;
}
}
@media (orientation: portrait) and (min-width: 768px){
#history .title{
height:auto;
min-height:350px;
}
}
@media (max-width: 767px){
#history{
padding:80px 20px 0;
}
#history .title{
text-align: center;
}
#history .logo{
text-align: center;
margin-bottom:20px;
}
#history .logo img{
width:40%;
height:auto;
}
#history h1{
text-align: center;
font-size: 1.3em;
letter-spacing: 0.3em;
margin-bottom:30px;
}
#history .downArrow{
display: none;
}
#history li .photo img{
width:100%;
}
#history li .text{
padding:20px 0 30px;
}
#history li .text h2{
font-size:1.2em;
margin-bottom:15px;
letter-spacing: 0.2em;
line-height: 150%;
text-align: center;
}
#history li .text p{
line-height: 200%;
font-size: 0.9em;
}
}