@charset "UTF-8";
/* CSS Document */

:root {
	--c-blk: #222222;
	--c-white: #fffff;
	--txt-size--regular : 17px;
	--font-family: 'Barlow Semi Condensed','Noto Sans JP', sans-serif;
	font-weight: 200;
	line-height: 1.3;
	letter-spacing: 0.6px;
}



body {
  background-color: var(--c-white); /* こういう感じで指定する */
  color:  var(--c-blk);
  margin-top: 80px;
  margin-left: 80px;
  margin-right: 104px;
  margin-bottom: 80px;
  font-family:  var(--font-family);
}

h1{font-size:46px;
color:  var(--c-blk);
position: fixed;
top:42px;
z-index:999;}

h2{font-size:14px;
color:  #CECECE;
position: fixed;
bottom:10px;
left:20px;
z-index:999;}


p{font-size: var(--txt-size--regular);
color:  var(--c-blk);}

li{font-size: var(--txt-size--regular);
	color:  var(--c-blk);}

a:hover{
	color: #c0c0c0;
}


.spacer{
	display: block;
	height: 12px;
}



/*---------------TOP--------------*/

.heading{
	font-size: 14px;
	font-weight: 700;
	line-height: 24px
}


.contents-wrap {
	width: 90%;
  	margin-top: 24%;
  	margin-left: 10%;
	display: flex;
	flex-direction: column;
	align-items:center;
	text-align : right;
}

.contents-info {	
	width: 90%;
  	margin-top: 16%;
  	margin-left: 8%;
	margin-bottom: -8%;
	text-align : left;
}

.contents-info li{
	line-height: 24px;
	font-size: 14px;
}

/*yoko*/
.contents-box {
	padding: 0;
	width: 50%;
	background-color: var(--c-white) ;
	padding-bottom: 30%;
	margin-left: 10%;

}
.contents-box li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:13px;
}

.contents-box img {
	display: block;
	width: 100%;
}

/*tate*/
.contents-box-H {
	padding: 0;
	width: 38%;
	background-color: var(--c-white) ;
	padding-bottom: 30%;
	margin-left: 10%;

}

.contents-box-H li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:13px;
}

.contents-box-H img {
	display: block;
	width: 100%;
}

/*------------------------------右側のナビ------------------------------*/
.glonav{
    position:fixed;
    text-align: center;
	bottom: 0px;
    right: 56px;
    color: var(--c-blk);}

.glonav a:hover {
	color: #c0c0c0;}/**/

.glonav-list{
    display: flex;/*これと*/
    flex-direction: column;/*これで縦に並ぶ〜*/
	text-decoration: none;
}

.glonav-list-item{
    transform:rotate(90deg);
	  position:relative; /* 追加 親メニューの固定 */
}

.glonav-list-item a{
    display: block;/*　リンクの範囲を広げて押しやすくする！　https://public-constructor.com/expand-link-click-range/*/
    width: 100%;/*これも↑*/
    height: 80px;/*これも↑*/
    padding: 5px;/*この余白はてきと〜*/
	font-size: 24px;
}
.glonav-list-item img{
    text-decoration: none;
    color: var(--c-blk);
	height: 24px; }

.instaicon{
	fill: #555555;
	max-width: 24px;
	vertical-align: middle;
}

.instaicon:hover{
	fill: #c0c0c0;
}

.instaicon svg{
	vertical-align: bottom;
}


/*------------------------------workドロップリンク-----------------------------*/

/* 追加 親メニューの固定 */

.glonav-list-item ul {
  position: absolute;
 left: 10px;
  top:100px;
transform:rotate(270deg);
}

/* ここまで */

.glonav-list li > ul > li{
  height: 0;
  overflow: hidden;
  transition: .3s;
}

.glonav-list li li a {
	font-size: 18px;
	width: 120px; /* 子メニューが折り返さないように調整 */
	/*border: 0.5px solid var(--c-blk);*/
}
.glonav-list li:hover > ul > li {
  height: 2rem;
	width: 2rem;
  overflow: visible;
}



/*---------------------CV---------------------------*/

.cv {margin-top: 12%;
	margin-left: 8%;
	flex-direction: column;/*これで縦に並ぶ〜*/
	text-decoration: none;
	list-style: none;
	max-width: 48%;}

.cv li {
	color:  var(--c-blk);
	}

li.CV-JP {
	font-size: 11pt;
	font-weight: 200;
	line-height: 1.5;
	}

span.CV-JP {
	font-size: 10.5pt;
	font-weight: 200;
	line-height: 1.6;
}

li.CV-link {
	font-size: 16px;}

.space {
	margin-top:1em;
	margin-bottom:0.1em;
	font-weight: bolder;
	color:  var(--c-blk);}

span.space-JP {
	font-size: 11pt;
	font-weight: bolder;
	line-height: 1.6;
}

.space-name {
	margin-bottom:0.2em;
	font-weight: bolder;
	color:  var(--c-blk);}

.space-name-JP {
	margin-bottom:1em;
	font-weight: 350;
	font-size: 15px;
	color:  var(--c-blk);}

hr {
    height: 0.5px;
	background-color: var(--c-blk);
	border:none;
	margin: 0%;
}

@media(max-width: 700px){
	.cv {
		max-width: 80%;}}

/*---------------------WORKS---------------------------*/


.works-wrap {
	width: 90%;
  margin-top: 32%;
  margin-left: 8%;
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	text-align : right;
	text-decoration: none;
	list-style: none}

.works-wrap li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:20px;
	text-align: left;
}

/*yoko*/
.works-box {
	padding: 0;
	width: 24%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;

}
.works-box li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.works-box img {
	display: block;
	width: 100%;
}

/*tate*/
.works-box-H {
	padding: 0;
	width: 19%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;

}

.works-box-H li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.works-box-H img {
	display: block;
	width: 100%;
}


/*tate-2*/

.works-box-H2 {
	padding: 0;
	width: 22%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;
}

.works-box-H2 li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.works-box-H2 img {
	display: block;
	width: 100%;
}

/*DRAWING*/

.works-box-d {
	padding: 0;
	width: 24%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;

}

.works-box-d li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.works-box-d img {
	display: block;
	width: 100%;
}

.works-box-dH {
	padding: 0;
	width: 17.3%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;
}

.works-box-dH li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.works-box-dH img {
	display: block;
	width: 100%;
}



/*---------------Exhibition--------------*/


.exhibition-wrap {
	width: 90%;
  margin-top: 16%;
  margin-left: 10%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align : left;
}


.exhibition-box {
	padding: 0;
	width: 90%;
	background-color: var(--c-white) ;
	padding-bottom: 0%;
	margin-right: 20%;

}
.exhibition-box li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:15px;
}

.exhibition-box img {
	display: block;
	width: 100%;
}


.exhibition-wrap2 {
	width: 100%;
  margin-top: 8%;
  margin-right: 30%;
	display: flex;
	flex-wrap: wrap;
	text-align : left;
	text-decoration: none;
	list-style: none}

.exhibition-wrap2 li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:20px;
	text-align: left;
}

/*law*/
.exhibition-box2 {
	padding: 0;
	width: 39%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 5.5%;

}
.exhibition-box2 li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:13px;
	text-align: left;
}

.exhibition-box2 img {
	display: block;
	width: 100%;
}

.exhibition-box3 {
	padding: 0;
	width: 39%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;

}

.exhibition-box3 img {
	display: block;
	width: 100%;
}

.exhibition-box4 {
	padding: 0;
	width: 26%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 5.5%;

}
.exhibition-box4 img {
	display: block;
	width: 100%;
}

.exhibition-box5 {
	padding: 0;
	width: 52%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;
}

.exhibition-box5 img {
	display: block;
	width: 100%;
}

.exhibition-box6 {
	padding: 0;
	width: 50%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;

}
.exhibition-box6 img {
	display: block;
	width: 100%;
}

.exhibition-box7 {
	padding: 0;
	width: 28%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 5.5%;
}

.exhibition-box7 img {
	display: block;
	width: 100%;
}

.exhibition-box8 {
	padding: 0;
	width: 41%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 5.5%;
}

.exhibition-box8 img {
	display: block;
	width: 100%;
}


.exhibition-box9 {
	padding: 0;
	width: 37%;
	background-color: var(--c-white) ;
	padding-bottom: 3%;
	margin-left: 3%;
}

.exhibition-box9 img {
	display: block;
	width: 100%;
}


/*------------------------------モーダル-----------------------------*/
.modal{
	display: none;
	max-height: calc(80% - 80px);
	height: 80%;
}

li.modal-wrapper {
	font-size: 16px;
}

.modal__img{
	position: relative;
	margin-left: 10%;
	width: auto;
	max-width: 80%;
	max-height: calc(80% - 80px);
}

.modal_H_img{
	position: relative;
	margin-left: 20%;
	width: auto;
	max-width: 50%;
	max-height: calc(80% - 80px);
}

.modaal-content-container ul{
	display: flex;
	flex-direction: column;
	align-items: center;
}


.modaal-container{
	background: rgba(0,0,0,0);
	box-shadow: none;
}

.modaal-content-container{
	padding: 0;
}

.modaal-fullscreen .modaal-close{
	background: rgba(0,0,0,0);
}

.modaal-close:after, .modaal-close:before {
    width: 1px;
    background: #000;
}

.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
	background: #000;
	opacity: .5;
}




/*スマホ仕様---------------------------------------*/

@media(max-width: 700px){
	body {
  background-color: var(--c-white); /* こういう感じで指定する */
  color:  var(--c-blk);
  margin-top: 8%;
  margin-left: 8%;
  margin-right: 8%;
  margin-bottom: 8%;
  font-family:  var(--font-family);
}}

@media(max-width: 700px){
		h1{font-size:40px;
color:  var(--c-blk);
position: fixed;
z-index:999;}}

@media(max-width: 700px){
	.glonav{
    	position:fixed;
    	text-align: right;
    	bottom: 8%;
    	right: 4%;
		color: var(--c-blk);}}

@media(max-width: 700px){
	.glonav-list-item{
    	text-align: center;
    	transform:rotate(90deg);}}

@media(max-width: 700px){
	.glonav-list-item a{
    	display: block;/*　リンクの範囲を広げて押しやすくする！　https://public-constructor.com/expand-link-click-range/*/
    	width: 100%;/*これも↑*/
    	height: 80px;/*これも↑*/
    	padding: 8px;/*この余白はてきと〜*/
		font-size: 20px;
	}}

@media(max-width: 700px){
	.glonav-list-item img{
    	text-decoration: none;
    	color: var(--c-blk);
		height: 20px; }}


	/*---------------top------------------*/
@media(max-width: 700px){
	.contents-wrap {
	width: 90%;
	margin-top: 40%;
	/*margin-top: 55%; infoないとき*/
	margin-left: -4%;
	display: flex;
	flex-direction:column;
	align-items:center;
	text-align : center;

	}

	.contents-info {	
	width: 90%;
  	margin-top: 54%;
  	margin-left: 2%;
	text-align : left;
	}

	.contents-info li{
	line-height: 24px;
	font-size: 14px;
	}

/*yoko*/
.contents-box {
	padding: 0;
	width: 92%;
	background-color: var(--c-white) ;
	padding-bottom: 45%;
	margin-left: 6%;

}
.contents-box li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:13px;
}

.contents-box img {
	display: block;
	width: 100%;
}

/*tate*/
.contents-box-H {
	padding: 0;
	width: 85%;
	background-color: var(--c-white) ;
	padding-bottom: 45%;
	margin-left: 6%;

}

.contents-box-H li{
	margin-top: 0.15rem;
	list-style: none;
	font-size:14px;
}

.contents-box-H img {
	display: block;
	width: 100%;
}

.cv {padding-top: 20%;
	margin-left: 3%;
	flex-direction: column;/*これで縦に並ぶ〜*/
	text-decoration: none;
    list-style: none}

}

/*スマホWORKS---------------------------*/


@media(max-width: 700px){
	.works-wrap {
	width: 90%;
  margin-top: 48%;
  margin-left: -4%;
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	text-align : right;

	}}

/*yoko*/
@media(max-width: 700px){
	.works-box {
	padding: 0;
	width: 80%;
	background-color: var(--c-white) ;
	padding-bottom: 8%;
	margin-left: 8%;

	}}

/*tate*/
@media(max-width: 700px){
.works-box-H {
	padding: 0;
	width: 72%;
	background-color: var(--c-white) ;
	padding-bottom: 8%;
	margin-left: 8%;

	}}


/*tate-2*/

@media(max-width: 700px){
	.works-box-H2 {
	padding: 0;
	width: 72%;
	background-color: var(--c-white) ;
	padding-bottom: 8%;
	margin-left: 8%;
	}}

/*drawing*/
	
@media(max-width: 700px){
	.works-box-d {
	padding: 0;
	width: 40%;
	background-color: var(--c-white) ;
	padding-bottom: 6%;
	margin-left: 6%;
	}}
	
	
@media(max-width: 700px){
	.works-box-dH {
	padding: 0;
	width: 40%;
	background-color: var(--c-white) ;
	padding-bottom: 6%;
	margin-left: 6%;
	}}
	
	/*スマホモーダル*/
@media(max-width: 700px){
	.modal{
	display: none;
	max-height: calc(100% - 80px);
	height: 100%;
	}}
	
@media(max-width: 700px){
	.modal__img{
	position: relative;
	margin-left: 0%;
	width: auto;
	max-width: 100%;
	max-height: calc(100% - 80px);
	}}

@media(max-width: 700px){
	.modal_H_img{
	position: relative;
	margin-left: 0%;
	width: auto;
	max-width: 100%;
	max-height: calc(100% - 80px);
	}}