/* 基本カラー（青）:#1E2160 */


html{
scroll-behavior: smooth;
}



body{
margin:0;
padding:0;
font-family: "Sawarabi Gothic";
color:#fff;
}

a:link{color:#8fd9ff; text-decoration:underline; border:none;}
a:visited {color:#8fd9ff; text-decoration:underline; border:none;}
a:active, 
a:hover {color:#8fd9ff; text-decoration:underline; border:none;}



/* ================== contents ================== */

.container{
overflow: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}

.wrap {
position: relative;
width:100%;
height:100vh;
}

.contents{
width:100%;
height:100vh;
color:#fff;
text-align:center;
scroll-snap-align: start;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
-webkit-align-items:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
justify-content:center;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}

#top{
background: url('img/image_bg01.jpg') center/cover;
}

#about{
background: url('img/image_bg02.jpg') center/cover;
}

#works{
background: url('img/image_bg03.jpg') center/cover;
}

#flow{
background: url('img/image_bg04.jpg') center/cover;
}

#company{
background: url('img/image_bg005.jpg') center/cover;
}

#concept{
background: url('img/image_bg010.jpg') center/cover;
}

#planning{
background: url('img/image_bg011.jpg') center/cover;
}

#footer{
background: url('img/image_bg_blue.jpg') center/cover;
background-color:#141640;
}

.contents h2{
margin:-40px 0 0 0;
padding:10px;
font-size:200%;
font-family:"Sawarabi Gothic";
font-weight:normal;
text-align:center;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
display:block;
}

.subtitle{
margin:0;
padding:0;
font-size:18px;
}

.lead{
width:100%;
margin:30px 0 0 0;
padding:0;
font-size:18px;
line-height:1.8em;
word-break: break-all;
}

.copyright{
width:100%;
margin:15px 0 -10px 0;
font-size:12px;
}

.button{
margin:30px 0 0 0;
border:1px #fff solid;
border-radius:1px;
}

.button a{
margin:0;
padding:14px;
display:block;
text-decoration:none;
color:#fff;
font-size:90%;
border-radius:1px;
background-color:rgba(255,255,255,0.1);
}

.continue{
margin:14px 0 0 0 !important;
}

.button a:hover {
background-color:rgba(255,255,255,0.2);
}

.link a:link{color:#fff; text-decoration:none; border:none;}
.link a:visited {color:#fff; text-decoration:none; border:none;}
.link a:active, 
.link a:hover {color:#fff; text-decoration:none; border:none;}



@media screen and (min-width: 0px) and (max-width: 750px)  {

#about{
background: url('img/image_bg02_mobi.jpg') center/cover;
}

#works{
background: url('img/image_bg03_mobi.jpg') center/cover;
}

#flow{
background: url('img/image_bg04_mobi.jpg') center/cover;
}

#concept{
background: url('img/image_bg010_mobi.jpg') center/cover;
}

#planning{
background: url('img/image_bg011_mobi.jpg') center/cover;
}

.contents h2{
margin:0;
font-size:160%;
}

.deco:before{
content: url('image/logo_title_s.png');
margin:0 0 -5px 0;
}

.subtitle{
margin:0;
padding:0;
font-size:14px;
}

.lead{
margin:20px 0 0 0;
padding:0;
font-size:100%;
line-height:1.8em;
}


}




/* ================== intro ================== */

#intro .contents h1 img{
width:300px;
height:auto;
}

#intro .subtitle{
margin:-20px 0 0 0;
padding:0;
font-size:30px;
line-height:2em;
}

#intro ul{
margin:15px 0;
padding:10px;
list-style:none;
border:1px #fff solid;
}

#intro li{
margin:0;
padding:0;
display:block;
font-size:12px;
}

@media screen and (min-width: 0px) and (max-width: 750px)  {

#intro .contents h1 img{
width:60%;
height:auto;
}

#intro .contents h1{
margin:0;
padding:0;
}

#intro .subtitle{
margin:-10px 0 5px 0;
padding:0;
font-size:24px;
line-height:2em;
}

#intro ul{
margin:0;
padding:10px;
list-style:none;
}

#intro li{
margin:0;
padding:0;
display:block;
font-size:10px;
}

}



/* ================== about ================== */





/* ================== footer ================== */

#footer ul{
margin:0;
padding:0;
list-style:none;
text-align:center;
}

#footer li{
margin:0.2em 0 0 0;
padding:0;
display:block;
text-align:center;
}

#footer .contents h2{
margin:20px 0 0 0;
padding:0;
font-size:200%;
font-family:"Sawarabi Gothic";
font-weight:normal;
border-top:none;
border-bottom:none;
}

#footer h3{
margin:20px 0 6px 0;
padding:0;
font-size:20px;
text-align:center;
font-weight:normal;
font-family:"Sawarabi Gothic";
}

#footer .pict-box{
width:60%;
min-width:750px;
height:40%;
margin:0 auto;
padding:0;
background: url('img/image_bg05.jpg') center/cover;
display:block;
}

.note{
margin:20px 0 0 0;
padding:5px 10px;
font-size:12px;
line-height:1.4em;
border:1px #fff solid;
text-align: justify;
text-justify: inter-ideograph; /* IE用 */
-webkit-font-feature-settings: "palt";
}

@media screen and (min-width: 0px) and (max-width: 750px)  {

#footer li{
margin:0;
font-size:85%;
}

#footer .contents h2{
margin:0;
padding:0;
font-size:160%;
}

#footer h3{
margin:10px 0 0px 0;
font-size:16px;
}

#footer .pict-box{
width:100%;
min-width:100%;
height:200px;
margin:30px 0 0 0;
}

.note{
max-width:70%;
margin:-10px 0 0 0;
padding:5px 10px;
font-size:12px;
line-height:1.4em;
border:1px #fff solid;
}

}