@charset "utf-8";
/* bace ----------------------------------------------- */
@media print and (orientation:landscape) {body {zoom:100%;}}
@media print and (orientation:portrait) {body {zoom:68%;}}
html, body {height:100%;}
body {margin:0; padding:0;width:100%;-webkit-text-size-adjust: none; /* webkit */}
a {text-decoration:none;-webkit-transition: opacity 0.5s ease-out;-moz-transition: opacity 0.5s ease-out;-ms-transition: opacity 0.5s ease-out;transition: opacity 0.5s ease-out;}
a:hover {opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);/* IE lt 8 */-ms-filter: "alpha(opacity=50)"; /* IE 8 */}
a:link {text-decoration:none;}
a:visited {text-decoration:none;border:none;}
a:active {text-decoration:none;border:none;}
a:focus {outline: none;}
ul, ol ,li { list-style:none}
hr{color:#999;}
html{overflow-x:hidden;overflow-y:scroll;}
/* textstyle ------------------------------------------------------------ */
.min {font-family:"Hiragino Mincho ProN","ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;}
.goth {font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
.text-narrow {transform:scale(0.5, 1);}
/* br --------------------------- */
@media print,screen and (min-width:801px) {
.br_pc {display:inline;}
.br_land {display:none;}
.br_port {display:none;}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
.br_pc {display:none;}
.br_land {display:inline;}
.br_port {display:none;}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
.br_pc {display:none;}
.br_land {display:none;}
.br_port {display:inline;}
}
/* loading ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#loader {
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 margin-top:-85px;
 margin-left:-85px;
 z-index:501;
}
#fade {
 width:100%;
 height:100%;
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 z-index:500;
 background:#000;
 padding:0 0 100% 0;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#loader {
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 margin-top:-50px;
 margin-left:-70px;
 z-index:501;
}
#fade {
 width:100%;
 height:100%;
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 z-index:500;
 background:#000;
 padding:0 0 100% 0;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#loader {
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 margin-top:-85px;
 margin-left:-64px;
 z-index:501;
}
#fade {
 width:100%;
 height:100%;
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 z-index:500;
 background:#000;
 padding:0 0 100% 0;
}
}
/* page-top ------------------------------------------------------------ */
#page-top {
 position: fixed;
 bottom: 1%;
 right: 2%;
 font-size: 77%;
 opacity:0.7;
}
#page-top a {
 background: #000;
 text-decoration: none;
 color: #fff;
 width: 100px;
 padding: 10px 0;
 text-align: center;
 display: block;
 border-radius: 5px;
}
#page-top a:hover {
 text-decoration: none;
 background: #999;
}
/* parallax ------------------------------------------------------------ */
div.parallax{
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;	
}
.content {
 width: 100%;
}
.box{
 width: 95%;
 margin: 0 auto;
 min-height: 100vh;
 position: relative;
}
.parallax_img_1{
 background:url(../images/main01.jpg);	
}
.parallax_img_2{
 background:url(../images/main02.jpg);	
}
.parallax_img_3{
 background:url(../images/main03.jpg);	
}
.parallax_img_4{
 background:url(../images/main04.jpg);	
}
/* top ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
.scroll {
 position: absolute;
 bottom: 3%;
 left: 50%;
}
#top_logo {
 width:30%;
 float:right;
}
#top_logo img {
 width:100%;
 max-height:95vh;
}
#top_navi_wrap {
 position: absolute;
 bottom: 5%;
 left: 0;
}
#navi_wrap {
 margin-top:50px;
 left: 5%;
}
.navi {
 margin-top:40px;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
.scroll {
 position: absolute;
 bottom: 3%;
 left: 50%;
}
#top_logo {
 width:30%;
 float:right;
}
#top_logo img {
 width:100%;
 max-height:95vh;
}
#top_navi_wrap {
 position: absolute;
 bottom: 5%;
 left: 0;
}
#navi_wrap {
 margin-top:50px;
 left: 5%;
}
.navi {
 margin-top:15px;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
.scroll {
 position: absolute;
 bottom: 3%;
 left: 50%;
}
#top_logo {
 width:50%;
 float:right;
}
#top_logo img {
 width:100%;
 max-height:95vh;
}
#top_navi_wrap {
 position: absolute;
 bottom: 5%;
 left: 0;
}
#navi_wrap {
 margin-top:50px;
 left: 5%;
}
.navi {
 margin-top:15px;
}
}
/* logo ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
#logo {
 width:8%;
 margin-bottom:30px;
}
#logo img {
 width:100%;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#logo {
 width:8%;
 margin-top:-20px;
 margin-bottom:30px;
}
#logo img {
 width:100%;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#logo {
 width:22%;
 margin-bottom:30px;
}
#logo img {
 width:100%;
}
}
/* text ------------------------------------------------------------ */
@media print,screen and (min-width:801px) {
h2 {
 font-size:24px;
 line-height:180%;
 font-weight:100;
 margin-top:70px;
}
p {
 font-size:12px;
 line-height:220%;
 font-weight:100;
 margin-top:-10px;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
h2 {
 font-size:20px;
 line-height:180%;
 font-weight:100;
 margin-top:70px;
}
p {
 font-size:12px;
 line-height:240%;
 font-weight:100;
 margin-top:-10px;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
h2 {
 font-size:20px;
 line-height:180%;
 font-weight:100;
 margin-top:70px;
}
p {
 font-size: 12px;
 line-height: 240%;
 font-weight: 100;
 margin-top: -10px;
 text-align: justify;
}
}
/* philosophy ------------------------------------------------------------ */
#philosophy {
 padding: 50px 0 50px 0;
}
/* works ------------------------------------------------------------ */
#works {
 padding: 50px 0 50px 0;
}
#works_btn_wrap {
 width:102%;
 margin: 50px -1%;
 display: flex;
 flex-wrap: wrap;
}
#works_btn {
 margin:1%;
}
@media print,screen and (min-width:801px) {
#works_btn img {
 width:22vw;
}
}
@media only screen and (max-width:800px) and (orientation:landscape) {
#works_btn img {
 width:30.3vw;
}
}
@media only screen and (max-width:800px) and (orientation:portrait) {
#works_btn img {
 width:46.5vw;
}
}
/* works_page ------------------------------------------------------------ */
#page_wrapper {
 width: 100%;
 min-height:100vh;
 background: #f2f2f3;
 display: flex;
 justify-content: center;
 align-items: center;  
}
#works_wrap {
 width: 90%;
 max-width: 1200px;
 background: #fff;
 margin: 0 auto;
 padding: 2%;
}
#batsu {
 position: fixed;
 top: 5%;
 right: 5%;
}
#works_top {
 text-align: left;
}
#works_line {
 width: 100%;
 height: 1px;
 background: #333;
 margin: -5px 0 -5px 0;
}
#works_bottom {
 text-align: center;
}
#works_bottom img {
 max-width: 800px;
 width: 100%;
}
h3 {
 font-size:16px;
 line-height:100%;
 font-weight:100;
}
h4 {
 font-size:12px;
 line-height:100%;
 font-weight:100;
}
/* about ------------------------------------------------------------ */
#about {
 padding: 50px 0 50px 0;;
}
#about p {
 font-size: 15px;
 line-height: 360%;
 font-weight: 100;
 margin: 10% 0 20% 0;
 text-align: left;
}
/* contact ------------------------------------------------------------ */
#contact {
 padding: 50px 0 50px 0;
}
#mail {
 width:90%;
 max-width:350px;
 margin:15% 0 0 0;
}
#mail img {
 width:100%;
}
#mail p {
 font-size:11px;
 line-height:180%;
 font-weight:100;
 margin-top:10px;
}