@charset "utf-8";

*{
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
}

:root{
	font-size:62.5%;
}

body{
	color:#333;
	font-size:1.6rem;
}

img{
	max-width:100%;
}

ul{
	list-style-type:none;
}

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

.flex{
	display: flex;
	flex-wrap: wrap;
}

header{
	background-image:url(../img/common/bg_top.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height:16rem;
	overflow:hidden;
}

header .flex{
	flex-wrap:nowrap;
}

header div.flex{
	justify-content: space-between;
}

header div.flex,main{
	max-width:120rem;
	margin:auto;
	padding:0 3rem 0;
}

header h1{
	min-width:18rem;
	max-width:18rem;
	padding-top:5rem;
}

header h1 a{
	display:block;
}

header h1 a:hover{
	opacity:0.5;
}

header nav{
	width:55rem;
	padding-top:9rem;
}

header nav li{
	margin-left:4rem;
}

header nav li a{
	display:block;
	position:relative;
	line-height:1.8;
}

header nav li:nth-child(1) a:hover,#about header nav li:nth-child(1){
	background-image:url(../img/common/about_on.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position-y: 3px;
}

header nav li:nth-child(2) a:hover,#news header nav li:nth-child(2){
	background-image:url(../img/common/news_on.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position-y: 3px;
}

header nav li:nth-child(3) a:hover,#works header nav li:nth-child(3){
	background-image:url(../img/common/works_on.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position-y: 3px;
}

header nav li:nth-child(4) a:hover{
	background-image:url(../img/common/address_on.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position-y: 3px;
}

header nav li a:hover::after,#about header nav li:nth-child(1) a::after,#news header nav li:nth-child(2) a::after,#works header nav li:nth-child(3) a::after{
	content:"";
	display:block;
	position:absolute;
	height:14rem;
	background-repeat: no-repeat;
	bottom:0;
	right:-120%;
	transform: rotate(25deg);
	background-size:15px;
	background-position:bottom;
}

header nav li:nth-child(1) a:hover::after,#about header nav li:nth-child(1) a::after{
	background-image:url(../img/common/green_pen.png);
	width:6.5rem;
}

header nav li:nth-child(2) a:hover::after,#news header nav li:nth-child(2) a::after{
	background-image:url(../img/common/red_pen.png);
	width:4.5rem;
}

header nav li:nth-child(3) a:hover::after,#works header nav li:nth-child(3) a::after{
	background-image:url(../img/common/blue_pen.png);
	width:5.5rem;
}

header nav li:nth-child(4) a:hover::after{
	background-image:url(../img/common/yellow_pen.png);
	width:7rem;
	right:-30%;
	bottom:3px;
}

main{
	margin-top:5rem;
	margin-bottom:4rem;
}

main .flex{
	margin-top:1rem;
}

main .flex li{
	margin-right:10px;
	margin-bottom:10px;
	text-align:center;
	position:relative;
}

main .flex li img{
	max-width:none;
	width:100%;
	border-radius: 15px;
}

main .flex li:nth-child(11),main .flex li:nth-child(17){
	margin-right:0;
}

main .flex li:nth-child(5){
	margin-right:calc((100% - 20px) / 2.565);
	margin-right:0;
}

main .flex li:nth-child(2n-1){
	width:calc((100% - 20px) / 2.565);
}

main .flex li:nth-child(2n){
	width:calc((100% - 20px) / 4.55);
}

main .flex li:nth-child(2){
	width:calc((100% - 20px) / 2.565);
}

main .flex li:nth-child(4){
	width:calc((100% - 20px) / 2.565);
}

main .flex li:nth-child(5){
/*	margin-right:auto;*/
	width:calc((100% - 20px) / 4.55);
}

main .flex li div.w_text{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	line-height:1.8;
}

main .flex li a:hover div.w_img{
	opacity:0.25;
}

main .flex li a div.w_text .w_cat{
	display:flex;
	flex-wrap: nowrap;
	justify-content:center;
}

main .flex li a div.w_text .w_cat::before,main .flex li a div.w_text .w_cat::after{
	content:"-";
}

main .flex li a:hover div.w_text{
	display:block;
}

footer{
	background-image: url(../img/common/bg_bottom.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-top:7.2rem;
}

footer .f_wrap{
	max-width:120rem;
	margin:auto;
	padding:0 5rem 0;
}

footer ul{
	margin-left:auto;
	width:12rem;
}

footer ul li{
	text-align:right;
	margin-bottom:1.2rem;
}

footer ul li a{
	line-height: 1.8;
	position:relative;
}

footer ul li a:hover::after{
	content:"";
	position:absolute;
	width:3rem;
	height:15rem;
	background-image:url(../img/common/black_pen.png);
	background-size:contain;
	background-repeat: no-repeat;
	transform: rotate(30deg);
	bottom:30%;
	left:130%;
}

footer ul li:nth-child(1){
	padding:0 2.4rem 0 1rem;
}

footer ul li:nth-child(2){
	padding:0 0 0 2.4rem;
}

footer ul li:nth-child(3){
	padding:0 1.4rem 0 0;
}

footer .copy{
	text-align:center;
	padding:3rem 0 8rem;
	font-size:1.1rem;
}


/* about */

.about{
	display: flex;
	line-height:1.8;
}

.left{
	min-width:14.5rem;
	margin-right:4rem;
	width:25%;
}

.about .left img{
	border-radius: 15px;
}

.about section{
	font-size:1.5rem;;
}

.about section h2{
	margin-bottom:3rem;
	font-weight:normal;
	font-size:1.8rem;
}

.about section p{
	margin-bottom:3rem;
}

.about section h3{
	font-weight:normal;
}

.about section dl{
	margin-bottom:3rem;
}

.about section dl.award{
	margin-bottom:1rem;
}

.about section dl dt{
	float:left;
	padding-top:0.5em;
}

.about section dl dd{
	padding-left:3em;
}

.about section dl dt+dd{
	padding-top:0.5em;
}


/* news */

.news{
	line-height:1.8;
}

.news dl dt{
	float:left;
	width:7em;
}

.news dl dd{
	padding-left:15%;
}

.news dl dd>a{
	display:flex;
	margin-bottom:3rem;
}

.news dl dd h2{
	font-size:1.8rem;
	font-weight: normal;
	margin-bottom:1em;
}

.news dl dd p.news_img img{
	border-radius: 15px;
}

.news dl dd div.news_text{
	width:90%;
	padding-left:3rem;
	font-size:1.5rem;
}


/* work */

.work .work_top{
	display:flex;
	margin-bottom:5rem;
}

.exhibition .work_top{
	margin-bottom:3rem;
}

.work .work_top.ch div:first-child{
	width:50%;
}

.work .work_top.rect .work_top_img{
	width:50%;
}

.work .work_top.square .work_top_img{
	width:35%;
}

.work .work_top.ch .work_top_img{
	margin-bottom:1.5rem;
	line-height:1;
}

.work .work_top.ch .work_top_img img{
	padding:0;
}

.work .work_top.ch .work_top_img:first-child{
	border:1px solid #333;
	padding-right:none;
}

.work .work_top img{
	max-width:none;
	width:100%;
	padding-right:5px;
}

.work .work_top.rect .desc{
	width:50%;
}

.work .work_top.ch .desc{
	width:100%;
	justify-content: left;
}

.work .work_top.square .desc{
	width:65%;
}

.work .work_top .desc{
	padding-left:35px;
	line-height:1.8;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}

.work .work_top .desc h2{
	font-size:2rem;
	font-weight:normal;
}

.work .work_top.ch .desc h2{
	padding-bottom:1.5rem;
}

.work .work_top .desc p{
	font-size:1.5rem;
}

.work .work_top.ch .desc p{
	padding-bottom:3rem;
}

.work .work_top.ch .desc dl dt{
	float:left;
}

.work .work_top.ch .desc dl dt::after{
	content:":";
	padding:0 0.5em;
}

.work .work_top.ch .desc dl dd{
	padding-left:3.5em;
}

.work .work_top .desc.work_credit{
	justify-content: left;
}

.work .work_top .desc.work_credit dl dt::after{
	content:":";
	padding:0 0.5em;
}

.work .work_top .desc.work_credit dl.exhibition_product{
	margin-top:3rem;
}

.work .work_top .desc.work_credit dl.exhibition_product dt{
	float:none;
}

.work .work_top .desc.work_credit dl.exhibition_product dd{
	padding:0;
}

.work .work_top.ch .desc .desc_img{
	width:50%;
	margin-top:3rem;
}

#works .work h3{
	font-size:1.5rem;
	font-weight:normal;
	margin-bottom:0.5rem;
}

.work ul.fl{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom:3.5rem;
}

.work ul.fl.j_left{
	justify-content: left;
	margin-bottom:6rem;
}

.work ul.fl.j_left li{
	padding-right:1.5rem;
}

.work ul.fl2{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom:1.5rem;
}

.work ul.fl img,.work ul.fl2 img{
	max-width:none;
	width:100%;
}

.work ul.fl li{
	margin-bottom:1.5rem;
}

.work ul.flex_3+h3+ul.flex_3+h3+ul.flex_3+h3+ul.flex_3{
	justify-content: left;
}

.work ul.flex_3 li{
	width:calc(100% / 3 - 0.7rem);
}

.work ul.black li{
	width:calc(100% / 3);
	background-color: #000;
}

.work ul.flex_3 li p{
	margin-bottom:1.5rem;
}

.work ul.flex_3 .vertical{
	width:calc(26.9% - 0.7rem);
	padding-left:1.5rem;
}

.work ul.flex_4 li{
	width:calc(25% - 0.75rem);
}

.work ul.flex_5 li{
	width:calc(20% - 0.8rem);
}

.work .work_credit{
	line-height:1.8;
	padding-bottom:1rem;
}

.work .work_credit dl dt{
	float:left;
}

.work .work_credit dl dt::after{
	content:"/";
	padding:0 0.5em;
}

.work .work_credit dl.exhibition{
	margin-top:3rem;
}

.work .work_credit dl.exhibition+dl dt::after{
	content:none;
}

.work .work_credit dl dd{
	padding-left:3.5em;
}
.work .work_credit dl dd.leftp{
	padding-left:6em;
}