@charset "UTF-8";
/* CSS Document */
html::-webkit-scrollbar { width: 0; }
html,body{
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;  /* Firefox用 */
	-ms-interpolation-mode: nearest-neighbor;  /* IE用 */
	margin:0;
	padding:0;}
body{
	font-family: 'Montserrat', sans-serif;
	font-family: 'M PLUS 1p', sans-serif;
	color:#FFF;
	width: 100%;
	height:100%;}
a{
	color:rgba(255,255,255,1.00);
	text-decoration:none;
	}
a:hover{
	opacity: 0.75;
	}
/*============================================
ヘッダ
============================================*/
div#header{
	position:fixed;
	z-index:1001;
	background-color: rgba(2,2,20,0.9);
	margin-top:10px;
	display:flex;
	width: 100%;
	height: auto;
	}
div#header:not(#logo):not(#menu){	
	animation-name: bar;
    animation-duration: 1s;
	animation-timing-function:ease;}
#logo{
	margin-left:15%;
	opacity: 0;
	animation-fill-mode:forwards;
	animation-timing-function:ease;
	animation-name: fadein;
    animation-duration: 1s;
	animation-delay:1s;
	width:100%;
	}
#logo img[src$=".svg"]{
	display:block;
	max-height:150px;
	width:300px;
	margin:0 auto;
	}
@keyframes bar {
  0% {width: 0%;}
  100% {width: 100%;}}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateX(-50px);}
to {
    opacity: 1;
    transform: translateX(0);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-device-width : 480px){div#menu{
	font-size:2.9vw;
	opacity: 0;
	animation-timing-function:ease;
	animation-name: fadein;
    animation-duration: 1s;
	animation-delay: 1.5s;
	animation-fill-mode:forwards;
	flot:left;
	display:flex;
	width:100%;
	flex-direction: row;
	justify-content:space-between;
	}	}
@media only screen and (min-device-width : 480px){div#menu{
	font-size:12pt;
	opacity: 0;
	animation-timing-function:ease;
	animation-name: fadein;
    animation-duration: 1s;
	animation-delay: 1.5s;
	animation-fill-mode:forwards;
	flot:left;
	display:flex;
	width:100%;
	flex-direction: row;
	justify-content:space-between;
	}	}


.tab_item {
	font-weight:700;
	margin:auto ;
	margin-right:50px;
	list-style: none;
	-webkit-box-flex: 1;
	text-align:center;
	}	
.tab_item:active, .tab_content_description:checked{
	}
.tab_content{
	padding:200px 0px 0px 0px;
	margin:0px;
	}	
.tab_content_description{
	opacity: 0;
	animation-fill-mode:forwards;
	 animation-name: fadein;
    animation-duration: 1s;
	animation-timing-function:ease;
	height:auto;
	width:100%;
	background-color:rgba(255,255,255,0.24);
	margin:100px 0 100px 0;
	overflow:inherit;
	}
	.tab_content_description:after {
　content: "";
　display: block;
　clear: both;
}
.tab_item:hover {
	opacity: 0.75;
	}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
	}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 40px 40px 0;
	clear: both;
	overflow: hidden;
	}
/*選択されているタブのコンテンツのみを表示*/
#about:checked ~ #about_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
	display: block;
	}
	/*============================
アバウトタブ
============================*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-device-width : 480px){
	#us_content{
	margin:0px;
	width:100%;
	}
#we{
	width:100%;
	padding:40px  0px 60px 0px;
	}
#we_img{
	witdth:100%;
	margin:15px;
	display:block;}
#we_img img[src$=".svg"]{
	margin:15px auto;
	display:block;
	max-height:200px;
	max-width:700px;
	}
#we_text{
	font-size:2.9vw;
	padding:0 20px;
	max-width:700px;
	margin:0 auto;
	text-align:center;
	}
#we_text span{
	background-color:#000;
	}
#we_text h1{
	margin:10px 20px;
}
#member{
	flex-basis:200px;
	margin:0px;
	width:100%;
	display:flex;
	flex-direction: row;
	 justify-content: center; /* 子要素をflexboxにより中央に配置する */
	align-items: center;  
	}
.member_p{
	max-width:20%;
	min-width:15%;
	text-align:center;
	margin:10px 20px;
	display:block;
	max-height:300px;
	min-height:200px;
	/*background-color:rgba(4,4,4,0.9);*/
	}	}

@media only screen and (min-device-width : 480px){
	
	#us_content{
	margin:0px;
	width:100%;
	}
#we{
	width:100%;
	padding:40px  0px 60px 0px;
	}
#we_img{
	witdth:100%;
	margin:15px;
	display:block;}
#we_img img[src$=".svg"]{
	margin:15px auto;
	display:block;
	max-height:200px;
	max-width:700px;
	}
#we_text{
	font-size:12pt;
	padding:0 20px;
	max-width:700px;
	margin:0 auto;
	text-align:center;
	}
#we_text span{
	background-color:#000;
	}
#we_text h1{
	margin:10px 20px;
}
#member{
	flex-basis:200px;
	margin:0px;
	width:100%;
	display:flex;
	flex-direction: row;
	 justify-content: center; /* 子要素をflexboxにより中央に配置する */
	align-items: center;  
	}
.member_p{
	max-width:20%;
	min-width:15%;
	text-align:center;
	margin:10px 20px;
	display:block;
	max-height:300px;
	min-height:200px;
	/*background-color:rgba(4,4,4,0.9);*/
	}	}
	/*============================
ニュースタブ
============================*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-device-width : 480px){
div#news_content {
	margin:5%;}
div#news_content h1 {
	font-weight: bold;
	font-size: 3.5vw;
	background-color:#000;
}
div.news_detail {
	width:100%;}
div.news_img {
	
	width:100%;}
div.news_img img {
	width:100%;}
div.news_text {
	background-color:rgba(2,2,2,0.7);
	width:100%;
	font-size: 2.4vw;
	margin:5px;
	overflow:auto;}
div.news_text_ward{
	display:block;
	margin:1%;
	width:100%;}
div#news_content div.news_detail div.news_text h2 {}
div#news_content div.news_detail div.news_text h3 {}
div.news_other {
	width:100%;
	float:left;}
div.news_other iframe {
	margin:2% auto;}}
@media only screen and (min-device-width : 480px){div#news_content {
	margin:5%;}
div#news_content h1 {
	font-weight: bold;
	font-size: 3vw;
	background-color:#000;
}
div.news_detail {
	width:100%;}
div.news_img {
	float:left;
	width:40%;}
div.news_img img {
	width:100%;}
div.news_text {
	font-size:12pt;
	background-color:rgba(2,2,2,0.7);
	width:100%;
	float:right;
	margin:5px;}
div.news_text_ward{
	display:block;
	float:right;
	margin:1%;
	width:50%;}
div#news_content div.news_detail div.news_text h2 {}
div#news_content div.news_detail div.news_text h3 {}
div.news_other {
	width:100%;
	float:left;}
div.news_other iframe {
	margin:2% auto;}}

/*============================
フッター
============================*/
footer{
	animation-name: bar;
    animation-duration: 1s;
	animation-delay: .2s;
	animation-fill-mode:forwards;
	animation-timing-function:ease;
	position:fixed;
	z-index:1000;
	bottom:0px;
	min-height:70px;
	right:0px;
	left:0px;
	width:100%;
	background-color: rgba(2,2,20,0.9);
	}
div#footertext{
	opacity: 0;
	animation-fill-mode:forwards;
	 animation-name: fadein;
    animation-duration: 1s;
	animation-delay: 1s;
	margin:5px;
	margin-left:50px;
	position:absolute;
	}	
div#sns{
	opacity: 0;
	animation-fill-mode:forwards;
	animation-name: fadein;
    animation-duration: 1s;
	animation-delay: 1.5s;
	margin:5px;
	margin-right:50px;
	float:right;
	height:30px;
	}
div#sns img{
	height:100%;
	margin:5px;
	}
 .garally_content h1{
	  width:100%;
	 padding:2%;
	  background-color:#000;
	  }
	  .garally_content {
	  width:100%;
	  }
@media only screen and (max-device-width : 480px){#garally{
	width:100%;
	display:none;
	-webkit-flex-wrap: wrap;
   flex-wrap: wrap;}
.post {
    display: none;
    position: relative;
    margin: 1%;
    padding: 1%;
	width:29%;
}

.post-body, .post-src {
    padding: 10px;
    color: #6e7173;
    line-height: 15px;  
}
.post-photo {
    margin: auto;
    width: 100%; height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
	background-size:cover;
	display:block;
}
.post-footer {
    margin-top: 10px;
    padding: 5px 10px;
    color:rgba(225,225,225,.80);
    font-size: 11px;
    background: #000;
}
.post-link {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}}
@media only screen and (min-device-width : 480px){#garally{
	width:100%;
	display:flex;
	-webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   }
.post {
    display: none;
    position: relative;
    margin: 1%;
    padding: 1%;
	width:29%;
}
.post-ttl {
    padding: 10px 10px 0 10px;
    color: #494949;
    font-size: 16px;
    font-weight: bold;
}
.post-body, .post-src {
	display:none;
    padding: 10px;
    color: #6e7173;
    line-height: 15px;  
}
.post-photo {
    margin: auto;
    width: 100%; height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
	background-size:cover;
	display:block;
}
.post-footer {
    margin-top: 10px;
    padding: 5px 10px;
    color:rgba(225,225,225,.80);
    font-size: 11px;
    background: #000;
}
.post-link {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (max-device-width : 480px){
#tumblr li{
	width:20%;
	margin:2%;
list-style-type:none;
}
ul{
	display:flex;
	-webkit-flex-wrap: wrap;
   flex-wrap: wrap;
	}
#tumblr img{
width:100%;
height:auto;
display:block;
}
#clear{
clear:left;
}}
@media only screen and (min-device-width : 480px){
#tumblr li{
	list-style-type:none;
	display:none;
}
#tumblr img{
float:left;
margin:10px;
}
#clear{
clear:left;
}}