@charset "UTF-8";
/*---------------------- Body ------------------------*/
@media (orientation: landscape) and (min-width: 768px){
body{
background-image: url("../images/concept/pc_main_photo01.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/concept/sp_main_photo01.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/concept/pc_main_photo01.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/concept/sp_main_photo01.jpg") center no-repeat;
background-size:cover;
}
}
/*---------------------- Concept ------------------------*/
#concept{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width:100%;
height:100vh;
}
@media (min-width: 768px){
#concept .inner{
text-align: center;
box-sizing: border-box;
background-color: rgba(255,255,255,0.85);
padding:50px 0 0;
width:800px;
height:480px;
display: none;
}
#concept .inner h1{
margin-bottom:40px;
}
#concept .inner h1 img{
width:180px;
height:auto;
}
#concept .inner h2{
font-size:1.6em;
margin-bottom:30px;
letter-spacing: 0.3em;
}
#concept .inner p{
line-height: 220%;
}
}
@media (max-width: 767px){
#concept{
padding:8%;
height: 100%;
box-sizing: border-box;
}
#concept .inner{
text-align: center;
padding:7% 6% 7% 7%;
background-color: rgba(255,255,255,0.85);
margin-top:10px;
}
#concept .inner h1{
margin-bottom:4%;
text-align: center;
}
#concept .inner h1 img{
width:40%;
height:auto;
}
#concept .inner h2{
font-size:1.2em;
margin-bottom:4%;
letter-spacing: 0.3em;
line-height: 150%;
display: inline-block;
text-align: left;
padding-left:1.2em;
}
#concept .inner p{
line-height: 200%;
font-size: 0.8em;
text-align: left;
letter-spacing: 0.09em;
}
}
@media (orientation: landscape) and (max-width: 767px){
#concept{
height: auto;
box-sizing: border-box;
}
#concept .inner{
padding:20px 20px 20px 25px;
background-color: rgba(255,255,255,0.85);
}
#concept .inner h1{
margin-bottom:15px;
}
#concept .inner h1 img{
width:100px;
height:auto;
}
#concept .inner h2{
font-size:1.1em;
margin-bottom:15px;
display: block;
padding-left:0;
}
#concept .inner h2 br{
display: none;
}
#concept .inner p{
line-height: 200%;
font-size: 0.7em;
}
}
@media (max-width: 374px){
#concept .inner h2{
font-size:1em;
}
#concept .inner p{
line-height: 200%;
font-size: 0.7em;
}
}