/* styles -------------------------------------------------*/
html{ font-size: 62.5%;} /*初期値16pxの62.5%でルートが10px*/ 
body{
	margin: 0;
	font-family: "Arial" , "Helvetica" , "sans-serif" , "游ゴシック" , "Hiragino Kaku Gothic Pro" ,"Meiryo, Osaka", " ヒラギノ角ゴ Pro W3";
	line-height:1.8em;
	font-size: 1.6rem;
	color: #333;
	background-color: #ebe9dfs;
}
.wrapper_index{
	width:100%;
		margin: 0 auto;
		position:absolute;
		top: 35%;
		-webkit-transform: translateY(-35%);
		-ms-transform: translateY(-35%);
		transform: translateY(-35%);
}
.wrapper_index_cont{
	margin: 0px auto;
	max-width:280px;
	text-align: left;
	text-align:justify;
}
.wrapper_index_cont p{
	font-size: 0.85em;
	line-height: 1.75em;
}
.wrapper_index_cont h1{
	font-size: 1.5em;
	letter-spacing: -1px;
}

/* 基本 -------------------------------------------------*/
.wrapper * {
	margin: 0;
}
.wrapper img {
	width: 100%;
	height:auto;
	vertical-align: bottom;
}

.arrow_up{
  width: 30px;
  height: 30px;
  border: 2px solid;
  border-color: #333 #333 transparent transparent;
  transform: rotate(-45deg);
	margin: 0 auto;
}

a:hover .arrow_up{
	border-color: #999 #999 transparent transparent;
}
.font-mini{
	font-size: 0.75em;
}
/* Grid styles-------------------------------------------------*/
.wrapper {
	--side: 50px; /* 両サイドの余白サイズを変数で管理する */
	display: grid; /* グリッドレイアウト */
	grid-template-columns:1fr;
	grid-template-rows:1fr auto auto;
	grid-row-gap:40px;
	margin: 0 var(--side) 100px;
}
/* ----------------header---------------- */
header{
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	/* テキストのグリッド */
	display: grid; /* グリッドレイアウト */
	grid-template-columns:100px auto;
	padding: 30px 0;	
}
.logo{
	grid-column: 1 / 2;
	max-width: 35px;
}
header ul{
	grid-column: 2;
	writing-mode:vertical-rl;/* 縦書き */
	/* テキストの配置先 */
	justify-self:left;
	align-self: top;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.75em;
}
header ul li a:link , header ul li a:visited {
	padding: 0;
	color:#333;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none;
}
header ul li a:hover{
	color:#999;
}
/* ----------------works---------------- */
#works {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	/* テキストの配置先 */
	justify-self:center;
	align-self: center;
}
#works h1 , .works ul{
	text-align: center;
}
#works h1{
	font-size: 3em;
}
#works ul{
	list-style: none;
	margin: 0 40px 0 0;
	font-size: 0.85em;
	/* テキストのグリッド */
	display: grid; /* グリッドレイアウト */
	grid-auto-flow:column;
	justify-content: center;
}
#works ul li{
	padding: 30px 20px 40px 20px;
	text-align: center;
}
#works ul li a:link , #works ul li a:visited {
	color:#333;
	font-weight: 600;
	text-decoration: none;
}
#works ul li a:hover{
	color:#999;
}
#works .project_list{
	display: grid; /* グリッドレイアウト */
	grid-template-columns:repeat(4,1fr);
	grid-template-rows:auto auto auto;
	grid-column-gap:1px;
	grid-row-gap:1px;
}
/* ----------------about---------------- */
#about {
	grid-column: 1 / -1;
	grid-row: 3 / 5;
	padding: 50px 0 40px 0;
}
.about-text {
	font-size: 0.85em;
	line-height: 1.75;
}
#about h2 {
	font-size: 2.5em;
}
#about h2 span{
	font-size:  0.4em;
	padding-left: 10px;
}
#about h2 span::after , #about h2 span::before {
	content:"ー";
	margin: 0 10px;
	font-weight: lighter;
}
#about h3{
	margin-top: 2em;
}
#award{
	font-size: 0.85em;
	line-height: 1.5em;
}
/* ----------------portfolio---------------- */
#portfolio {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
}
#portfolio figure{
	justify-self:center;
	margin: 30px auto 30px auto;
}
#portfolio h1{
	font-size: 1em;
}
.portfolio-text p{
	font-size: 0.85em;
	line-height: 1.5;
}
.pbtn a:link ,.pbtn a:visited {
	margin-bottom: 20px;
	border: 1px solid #ccc;
  border-radius: 20px;

  color: #222;
  padding: 5px 12px;
  font-size: 0.75em;
	text-decoration: none;
	letter-spacing: 1px;
}
figcaption{
	font-size: 0.85em;
	line-height: 1.6;
	padding: 1.5em 0;
}
.pbtn a:hover {
  background: #eee;
	border: 1px solid #eee;
}
.ly_3{
	display: flex;
}
.ly_2{
	display: grid;
	grid-template:r
	grid-gap: 10px;
}
.wrap_border{
	border: 1px solid #ccc;
}
#portfolio .wrap_border figure{
	margin: 0;
}
/* /////////////画面横1000px以上///////////// */
@media (min-width: 1000px) {
.wrapper{
		--side:calc((100vw - 960px) / 2);
	}

}
/* /////////////画面横767px以下///////////// */
@media (max-width: 767px) {
	.wrapper {
	--side: 20px; /* 両サイドの余白サイズを変数で管理する */
	grid-row-gap:20px;
	margin: 0 var(--side) 20px;
}
.ly_3 , .ly_2{
	display: block;
}
.ly_3 figure , .ly_2 figure{
margin-bottom: 30px;
}
/* ----------------header---------------- */
header{
	padding: 30px 20px;	
}
/* ----------------works---------------- */
	#works h2{
	font-size: 2em;
}
	#works ul li{
	padding: 10px;
}
	
	#works .project_list{
	display: grid; /* グリッドレイアウト */
	grid-template-columns:repeat(2,1fr);
}
/* ----------------portfolio---------------- */
#portfolio h1{
	font-size: 0.85em;
}
#portfolio figure{
	margin: 10px auto 10px auto;
}
}
@media (max-width: 520px) {
	.wrapper {
	--side: 10px; /* 両サイドの余白サイズを変数で管理する */
}
/* ----------------about---------------- */
#about {
	padding: 35px 10px 40px 15px;
}
.about-text {
	font-size: 0.85em;
	line-height: 1.75;
}
#about h1 {
	font-size: 1.75em;
	line-height: 1.5;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #333;
}
#about h1 span{
	font-size:  0.4em;
	padding-left: 0px;
	display: block;
}
#about h1 span::after , #about h1 span::before {
	content:"";
	margin: 0px;
}

}