@CHARSET "UTF-8";
/* Reset CSS
 * --------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}








/* Custom CSS
 * ------------------------------------------------------------------------------------ */
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.wf-garamond { font-family: 'EB Garamond', serif; }

body{
	font-family: "游ゴシック","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Mincho Pro","Meiryo",sans-serif;
	color: #333;
	color: rgba(0,0,0,0.5);
	text-align:center;
	
}


/* ----------COLOR-------------------------------------------------------------------------- */
.color1{background-color: #141414;}
.color2{background-color: #F0CB64;}
.color3{background-color: #FFFFFF;}

.color1 h1{color: #ffffff;}
.color1 h2{color: #bbbbbb;}

/* ----------FONT-------------------------------------------------------------------------- */
h1 {
    font-size: 140%;
    color: #333333;
}
h2 {
    padding: 3% 0%;
}

p {
font-size: 13px;
line-height: 120%;
font-weight: 500;
}


/* ----------COMMON-------------------------------------------------------------------------- */
.layer {
    padding: 7% 10%;
}

.linewraptext {
    font-size: 140%;
    color: #333333;
    display: inline-block;
    padding: 1% 3%;
    letter-spacing: 0.3em;
    font-weight: bold;
    border: 6px solid;
}
.col_img{
	margin: 8% auto;
}

.fullviewport{
	width: 100vw;
	height: 100vh;
}

h1{
	text-align: left;
}

h1 img{
	    height: 2.5vh;
}


.pjcol{
width: 44%;
background-color: #fff;
float: left;
margin: 3%;
height: 32em;
}

.pjlink{
width: 44%;
background-color: #fff;
float: left;
margin: 3%;
height: 14em;
padding-top: 7em;
}

.subttl {
padding-top: 5%;
padding-left: 0%;
padding-right: 72%;
padding-bottom: 4%;
}


menu li a img{
width: 26%;
margin-top: 3%;
}

#golink{

}
/* ----------MENU-------------------------------------------------------------------------- */
#topmenu {
    position: absolute;
    width: 100%;
    z-index: 99;
    padding-bottom: 20px;
}

.btnb{
	width: 63%;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
	margin-top: 9vh;
}

/* ----------MENU_trigger-------------------------------------------------------------------------- */

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 36px;
height: 30px;
top: 15px;
left: 0px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-315deg) scale(.8);
  transform: translateY(13px) rotate(-315deg) scale(.8);
}
.menu-trigger.active span:nth-of-type(2) {
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 50%;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-13px) rotate(315deg) scale(.8);
  transform: translateY(-13px) rotate(315deg) scale(.8);
}
/* ----------MENU_open-------------------------------------------------------------------------- */
.articles-Wrapper.active{
    background-color: #000;
    height: 100%;
}

.menu-open.active{
	display: block !important;
}

menu{
	padding: 0;
	margin-top: 10vh;
}
menu li{

}
/* ----------MENU-SCROLLED-------------------------------------------------------------------------- */
/*スクロールしたら、このCSSを適用し、ナビゲーションバーの位置を固定する*/
.is-fixed {
    position: fixed !important;
    top: 5vw;
    height: 60px !important;
    width: 60px !important;
    border-radius: 30px;
    padding-bottom: 0px !important;
    right: 5vw !important;
    left: initial !important;
}
.menu-a{display: block;}
.is-fixed .menu-a{display: block;}
.is-fixed .menu-b{display :none;}


.articles-Wrapper {
}

/* ----------topvieoarrow-------------------------------------------------------------------------- */
#scroll_down{
position: absolute;
bottom: 10px;
margin: 0 auto 0 -18px;
display: inline-block;
left: 50%;
}

#go_top.show {
    right: 62px;
}
#go_top.show {
    right: 5vw;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -ms-filter: "alpha(opacity=$num)";
    opacity: 1;
}
#go_top {
    position: fixed;
    right: -45px;
    bottom: 5vw;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(0.3);
    -moz-transform: scale(0.3);
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -ms-filter: "alpha(opacity=$num)";
    opacity: 0;
    z-index: 10;
}

/* ----------TOP-------------------------------------------------------------------------- */
#topstory img {height: 100%;}

#topstory {
    height: 40vw;
    position: absolute;
    bottom: 10%;
    right: 10%;
}
#topstory img {height: 100%;}
.layertop {
	background-image: url(/imgs/top.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgb(0,0,0);
    background-size: cover;
}

/* ----------GRIDS-------------------------------------------------------------------------- */

.grids > div {
    float: left;
    width: 30%;
    height: auto;
    padding: 1.666%;
}
.grids > div img {
    width: 100%;
    float: left;
}
/* ----------raindrop-------------------------------------------------------------------------- */
.animewave canvas {
width:101%;
}

.animewave2 canvas {
width:101%;
}

.layer.animewave2 {
    background-color: #000;
}

.animewave2 + div {
	padding-top: 0px;
}
/* ----------VISION-------------------------------------------------------------------------- */
#vision {
    background-image: url(/imgs/bg_vision.png);
    background-position: 50% 13%;
    background-repeat: no-repeat;
    background-color: rgb(255,255,255);
    background-size: cover;
    padding-bottom: 17%;
}
/* ----------ABOUT-------------------------------------------------------------------------- */
#about {
	background-image: url(/imgs/bg_about.png);
	background-position: 0px 11vh;
	background-repeat: no-repeat;
	background-color: rgb(255,255,255);
	background-size: 100% auto;
	padding-bottom: 18Vh;
}
/* ----------PROJECT-------------------------------------------------------------------------- */
#project {
    background-position: 50% 13%;
    background-repeat: no-repeat;
    background-color: rgb(255,255,255);
    background-size: cover;
}
/* ----------COMPANYINFO-------------------------------------------------------------------------- */
#companyinfo {
    background-image: url(/imgs/bg_company.svg);
    background-position: 50% 13%;
    background-repeat: no-repeat;
    background-color: rgb(255,255,255);
    background-size: cover;
}

/* ----------CONTACT-------------------------------------------------------------------------- */
#contact {
    padding-left: 0;
    padding-right: 0;
}

form#mail_form{text-align: initial;}


/* ----------FOOTER-------------------------------------------------------------------------- */
#footer {
	background: #222222;
	clear: both;
	}

#footer h2{
	color: #dddddd;
	}
.btn:hover {opacity: 0.7;}
.verweb{display: initial;}
.versp{display: none;}

/* ----------MediaScreen-------------------------------------------------------------------------- */

@media screen and (orientation: portrait) {


.verweb{display: none;}
.versp{display: initial;}
.btnb {width: 78% !important;}
.br::before {
	content: "\A" ;
	white-space: pre ;
}
.col_img {margin: 8% auto;}

.btnb {
    width: 100% !important;
}
#about{
background-position: 0px 20vh !important;
}

#contact h2{
	padding-right: 10%;
	font-size: 67%;
}

.pjcol {
    width: 100%;
}

.pj_blank{
	display:none;
}
#vision{
	padding-bottom: 34%;
}
}