@charset "UTF-8";

/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
line-height:line-height;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

body {
line-height:1;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/*----------------------------------------
	ここから
----------------------------------------*/
html,html * {
padding:0;
margin:0;
box-sizing:border-box;
}

html,body {
height:100%;
width:100%;
}

body {
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size:16px;
font-weight:300;
color:#888;
background-color:#FEFCF7;
}

a {
text-decoration:none;
color:#888;
}

/*----------------------------------------
	共通
----------------------------------------*/
.outer {
width:100%;
height:100%;
display:table;
overflow:hidden;
text-align:center;
position:relative;
}

.inner {
display:table-cell;
vertical-align:middle;
padding:80px 0 20px;
position:relative;
margin:0 auto;
}

.wrap {
width:90%;
max-width:1040px;
margin:0 auto 30px;
}

p {
font-size:16px;
line-height:28px;
margin:0;
padding:0;
}

.text_column {
text-align:center;
line-height:28px;
}

h1 {
font-size:20px;
font-weight:500;
line-height:30px;
}

h2 {
font-weight:400;
line-height:28px;
}

h3 {
font-size:20px;
line-height:30px;
}

h4 {
line-height:25px;
}

h5 {
font-size:14px;
line-height:23px;
}

.title {
font-size:20px;
letter-spacing:3px;
margin-bottom:30px;
}

.t_ye {
color:#FFE400;
}

.notes {
font-size:14px;
line-height:20px;
margin-top:10px;
}

.top5 {
margin-top:5px;
}

.top20 {
margin-top:20px;
}

.box_wrap {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
flex-wrap:wrap;/*複数行に配置*/
-webkit-flex-wrap:wrap; /* Safari etc. */
-ms-flex-wrap:wrap;     /*IE10         */
font-size:16px;
line-height:26px;
}

.box_wrap .box {
margin:10px;
width:100%;
align-items:center;/*上下中央*/
-webkit-align-items:center; /* Safari etc. */
-ms-align-items:center; /* IE10 */
}

.box_wrap .b3 {
width:calc(33.3% - 20px);
/*横3分割*/
}

/*----------------------------------------
	ボタン
----------------------------------------*/
.button {
position:relative;
display:inline-block;
padding:0;
max-width:350px;
width:100%;
background-color:#5BB3E5;
border:2px solid #5BB3E5;
color:#fff;
text-align:center;
text-decoration:none;
transition:all .3s;
font-weight:400;
margin:30px 0 0;
line-height:35px;
}

.button::after {
position:absolute;
top:50%;
right:15px;
display:block;
content:'';
width:8px;
height:8px;
margin-top:-4px;
border-top:2px solid #fff;
border-right:2px solid #fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

.button:hover {
background-color:#fff;
color:#5BB3E5;
}

.button:hover::after {
border-color:#5BB3E5;
}

/*----------------------------------------
	scroll矢印
----------------------------------------*/
.scroll {
position:relative;
display:inline-block;
padding-top:35px;
width:100%;
text-align:center;
text-decoration:none;
transition:all .3s;
font-size:14px;
color:#fff;
}

.scroll span {
position:absolute;
top:0;
left:50%;
width:16px;
height:16px;
margin-left:-8px;
border-left:1px solid #fff;
border-bottom:1px solid #fff;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:sdb 1.5s infinite;
animation:sdb 1.5s infinite;
box-sizing:border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-5px, 5px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-5px, 5px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

.scroll:hover {
color:#FFE400;
}

.s2 {
color:#888;
}

.s2 span {
border-left:1px solid #999;
border-bottom:1px solid #999;
}

.s2:hover {
color:#73BAE6;
}

/*----------------------------------------
	矢印
----------------------------------------*/
.arrow {
position:absolute;
left:50%;
bottom:25px;
display:inline-block;
width:30px;
height:30px;
margin-left:-15px;
border-bottom:solid 2px #ccc;
border-right:solid 2px #ccc;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#About,#About2,#About3 {
background-color:#5BB3E5;
color:#fff;
}

#UXMethod {
background-color:#73BAE6;
color:#fff;
}

#Work2 {
background-color:#FCF7E9;
}

/*----------------------------------------
	ヘッダー
----------------------------------------*/
header {
width:100%;
position:fixed;
top:0;
left:0;
background-color:#FEFCF7;
z-index:100;
}

.header_wrap {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
justify-content:space-between;/*左右端に等間隔*/
-webkit-justify-content:space-between; /* Safari etc. */
-ms-justify-content:space-between;     /* IE10 */
align-items:center;/*上下中央*/
-webkit-align-items:center; /* Safari etc. */
-ms-align-items:center;     /* IE10 */
width:90%;
max-width:1040px;
height:70px;
margin:0 auto;
}

header img {
width:210px;
}

nav ul {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
}

nav li {
font-size:16px;
margin:0 0 0 20px;
padding:0;
}

nav a {
color:#5BB3E5;
}

nav a:hover {
color:#666;
}

nav a.current {
border-bottom:2px solid #FF0004;
}

/*----------------------------------------
	01-top
----------------------------------------*/
#Top .wrap {
width:100%;
max-width:100%;
}

#Top .sen {
height:100%;
min-height:350px;
background-image:url(../img/tensen.svg);
background-size:cover;
background-position:top;
background-repeat:no-repeat;
margin:80px 0 0;
position:relative;
}

#Top .sen h2 {
padding:60px 0;
margin:0;
}

.logo {
width:100%;
margin-top:60px;
max-width:150px;
}

/*----------------------------------------
	02-About
----------------------------------------*/
#About img {
width:100%;
max-width:500px;
margin:0 0 30px;
}

#About h2 {
margin-bottom:10px;
}

#About h1 span {
color:#D1D1D1;
}

#About h1 {
margin-top:30px;
}

/*----------------------------------------
	02-2-About2
----------------------------------------*/
#About2 h1 {
margin-bottom:10px;
}

#About2 .box_wrap {
flex-flow:column nowrap;/*縦並び 単一行*/
-webkit-flex-flow:column nowrap;/* Safari etc. */
-ms-flex-flow:column nowrap;/* IE10 */
margin-top:20px;
}

#About2 .box {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
flex-direction:row;/*横一列、左から右へ*/
-webkit-flex-direction:row; /* Safari etc. */
-ms-flex-direction:row; /* IE10 */
align-items:center;/*上下中央*/
-webkit-align-items: center; /* Safari etc. */
-ms-align-items: center; /* IE10 */
text-align:left;
margin:5px auto;
width:100%;
max-width:530px;
}

#About2 .co1 {
width:153px;
height:80px;
position:relative;
}

#About2 .co1 span {
font-size:13px;
font-weight:400;
line-height:20px;
text-align:center;
position:absolute;
top:20px;
right:0;
width:90px;
text-align-last:center;
}

#About2 .c1 {
background-image:url(../img/cot01.svg);
background-size:cover;
}

#About2 .c2 {
background-image:url(../img/cot02.svg);
background-size:cover;
}

#About2 .c3 {
background-image:url(../img/cot03.svg);
background-size:cover;
}

#About2 .c4 {
background-image:url(../img/cot04.svg);
background-size:cover;
}

#About2 .c5 {
background-image:url(../img/cot05.svg);
background-size:cover;
}

#About2 .c6 {
background-image:url(../img/cot06.svg);
background-size:cover;
}

#About2 .co2 {
font-size:35px;
font-weight:400;
margin-left:30px;
color:#ccc;
}

#About2 p {
margin:0 0 0 10px;
padding:0 0 2px;
-webkit-flex:1px;
-ms-flex:1px;
flex:1px;
/*可変*/
}

/*----------------------------------------
	02-3-About-3
----------------------------------------*/
#About3 img {
width:100%;
max-width:500px;
margin-bottom:30px;
}

#About3 h2 {
margin:30px 0 5px;
}

#About3 h3 {
font-size:25px;
margin-bottom:5px;
}

#About3 .box {
background-color:#73BAE6;
padding:15px;
}

#About3 .box img {
width:60%;
max-width:250px;
margin:10px 0 0;
}

/*----------------------------------------
	04-UX-Method
----------------------------------------*/
#UXMethod .box_wrap {
margin:20px 0 0;
}

#UXMethod .box img {
width:90px;
}

/*----------------------------------------
	04-Work
----------------------------------------*/
#Work .box {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
line-height:26px;
width:100%;
max-width:450px;
flex-direction:row;/*1行*/
-webkit-flex-direction:row; /* Safari etc. */
-ms-flex-direction:row; /* IE10 */
align-items:flex-start;/*上揃え*/
-webkit-align-items:flex-start; /* Safari etc. */
-ms-align-items:flex-start; /* IE10. */
text-align:left;
margin:0 auto 15px;
}

#Work img {
min-width:50px;
margin:0 30px 10px 0;
}

#Work .box_wrap {
flex-flow:column nowrap;
-webkit-flex-flow:column nowrap; /* Safari etc. */
-ms-flex-flow:column nowrap; /* IE10 */
}

#Work2 img {
width:80%;
max-width:400px;
height:auto;
margin:10px 0;
}

/*----------------------------------------
	05-Art＆Event
----------------------------------------*/
#ArtEvent {
flex-flow:column nowrap;
-webkit-flex-flow:column nowrap; /* Safari etc. */
-ms-flex-flow:column nowrap; /* IE10. */
}

#ArtEvent .inner {
display:flex;
display:-webkit-flex; /* Safari etc. */
display:-ms-flexbox;  /* IE10        */
}

#ArtEvent h2 {
font-size:30px;
margin:10px 0 20px;
}

#ArtEvent img {
width:100%;
max-width:1080px;
}

#ArtEvent .box_wrap .b2 {
width:calc(50% - 20px);
/*横2分割*/
}

#ArtEvent .box {
margin-bottom:80px;
}

/*----------------------------------------
	06-Contact
----------------------------------------*/
#Contact {
width:100%;
position:relative;
height:100%;
min-height:100%;
}

#Contact ul br {
display:none;
}

#Contact ul {
font-size:14px;
line-height:22px;
margin-bottom:40px;
}

#Contact .wrap {
margin-bottom:50px;
}

.logo_waku {
width:100%;
max-width:500px;
border-bottom:1px solid #ccc;
margin:0 auto 40px;
padding-bottom:30px;
}

/*----------------------------------------
	フッター
----------------------------------------*/
footer {
text-align:center;
font-size:12px;
line-height:50px;
position:absolute;
bottom:0;
left:0;
width:100%;
border-top:1px solid #ddd;
background-color:#FEFCF7;
z-index:100;
}

/* Toggle Button */
#nav-toggle {
display:none;
position:absolute;
right:0;
top:10px;
width:34px;
height:36px;
cursor:pointer;
z-index:101;
}

#nav-toggle span {
display:block;
position:absolute;
border-bottom:solid 3px #5BB3E5;
width:70%;
left:0;
-webkit-transition:.35s ease-in-out;
-moz-transition:.35s ease-in-out;
transition:.35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
top:0;
}

#nav-toggle span:nth-child(2) {
top:10px;
}

#nav-toggle span:nth-child(3) {
top:20px;
}


/*----------------------------------------
	1000以下
----------------------------------------*/
@media (max-width: 1000px){
#UXMethod .box br {
	display: none;
}
}

/*----------------------------------------
	900以下
----------------------------------------*/
@media (max-width: 900px){
#ArtEvent .text_column br {
	display: none;
}
#ArtEvent .text_column {
	text-align: left;
}
#About3 .box br {
	display: none;
}
}

/*----------------------------------------
	760以下
----------------------------------------*/
@media (max-width: 760px){
.header_wrap {
	width: 100%;
	margin: 0px auto;
	flex-direction:column;/*複数行*/
	-webkit-flex-direction:column; /* Safari etc. */
	-ms-flex-direction:column; /* IE10 */
	align-items:center;/*左右中央寄せ*/
	-webkit-align-items:center; /* Safari etc. */
	-ms-align-items:center; /* IE10 */
	justify-content:center;/*上下中央寄せ*/
	-webkit-justify-content:center; /* Safari etc. */
	-ms-justify-content:center; /* IE10 */
}
header img {
	width: 190px;
	margin: 11px 0px;
}
nav li {
	margin: 0px 10px;
	padding: 0px;
}
#Top .sen {
	min-height: 300px;
}
#Top .sen h2 {
	padding: 50px 0px;
}
}

/*----------------------------------------
	700以下
----------------------------------------*/
@media (max-width: 700px){
.text_column br	{
	display: none;
}
.text_column {
	text-align: left;
}
#About3 .box_wrap .box {
	margin: 10px;
	width: 100%;
}
#ArtEvent .box_wrap .box {
	width: 100%;
}
#About3 .box br {
	display: block;
}
}

/*----------------------------------------
	650以下
----------------------------------------*/
@media (max-width: 650px){
#About2 p br {
	display: none;
}
.box_wrap .box {
	margin: 20px;
 }
.box_wrap .b2 {
	width: calc(50% - 40px);/*横2分割*/
}
#UXMethod h3 {
	font-size: 18px;
}
}
	
/*----------------------------------------
	500以下
----------------------------------------*/
@media (max-width: 500px){
body, .s2 {
	color: #222;
}
.header_wrap {
	height: 45px;
}
header img {
	width: 180px;
	margin: 0px;
}
#Top .sen {
	min-height: 260px;
	margin: 20px 0px 0px 0px;
}
#Top .sen h2 {
	padding: 40px 0px;
}
.logo {
	margin-top: 30px;
 }
#About .inner {
	padding: 60px 0px 0px;
}
#About img {
 	width: 90%;
	margin: 0px 0px 20px;
 }
#About2 .box_wrap {
	border-top: 1px dashed #9FE4FF;
}	
#About2 br {
	display: none;
}
#About2 .box {
	border-bottom: 1px dashed #9FE4FF;
	margin: 0px;
	padding: 5px 0px;
}
#About2 .co2 {
	display: none;
}
#About2 .co1 {
	width: 45px;
	height: 80px;
	position: relative;
	margin-right: 10px;
}
#About2 .co1 span {
	display: none;
}
.box_wrap .box {
	margin: 10px;
	width: 100%;
}
#UXMethod .box br {
	display: block;
}
#Work br {
	display: none;
}
#ArtEvent .box_wrap .box {
	margin: 0px 0px 50px 0px;
}
#ArtEvent h3 {
	font-size: 18px;
}
#Contact ul br {
	display: block;
}
#Contact ul {
	margin-bottom: 0px;
}


	
#global-nav {
	position: absolute;/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #FEFCF7;
	width: 100%;
	text-align: center;
	padding: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#global-nav ul {
	flex-direction:column;
	-webkit-flex-direction:column; /* Safari etc. */
	-ms-flex-direction:column; /* IE10 */
	border-bottom: 1px solid #ccc;
}
#global-nav ul li {
	margin: 0px;
}
#global-nav ul li:after  {
	display: none;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
	font-size: 18px;
	width: 100%;
	display: block;
	padding: 20px 0;
	border-top: 1px solid #ccc;
}
#nav-toggle {
	display: block;
	}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.open #nav-toggle span:nth-child(2) {
	opacity: 0;
}
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}
	
/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
	-moz-transform: translateY(545px);
	-webkit-transform: translateY(545px);
	transform: translateY(545px);
}
	
	
nav a {
	color: #5BB3E5;
}
nav a:hover {
	background-color: #eee;
}
nav a.current{
	border-bottom: none;
}
}