@charset "utf-8";
/*
#wrapper {
	opacity:0;
	animation-name: FadeIn;
	animation-duration:.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes FadeIn {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}
*/
#intro_anim.first_load {
	opacity:1;
	z-index: 9999;
}

#intro_anim {
	display: block;
    position: fixed;
    background: #FFF;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity:0;
    z-index: -1;
}

#intro_anim span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 60%;
	max-width: 780px;
	height: auto;
	display: flex;
	gap:0 8%;
	align-items: center;
}

#intro_anim span figure {
	width: 50%;
}


main {
	padding-top:4em;
}

main section {
	margin-bottom:6em;
}

main section h2 {
	text-align:center;
	font-family: "Noto Sans", sans-serif;
	letter-spacing:0.1em;
	font-size:1.7em;
	color:var(--BaseColor);
	margin-bottom:0.7em;
}

#works ul {
	display: flex;
	flex-wrap:wrap;
	gap:7vw 4vw;
}

#works ul li {
	width:43vw;
}

#works ul li a {
	display: block;
	text-decoration: none;
	color:var(--BaseColor);
	font-size: 0.9em;
}

#works ul li a img {
	object-fit: cover;
	width:43vw;
	height:calc(43vw / 4 * 3);
}

#works ul li a figure {
}

#works ul li a figure figcaption {
	margin-top:0.6em;
	font-family: "Noto Sans", sans-serif;
	letter-spacing: 0.05em;
   font-size: 0.9em;
   font-weight:300;
}

#works ul li a figure figcaption span {
	display:inline-block;
}

#works ul li figure.line_gray img {
	outline: solid 1px #EEE;
	outline-offset: -1px;
}

#works ul li figure > span {
	display: block;
}
/*
#works ul li figure.fig_visma > span {
	background: #FFF;
}

#works ul li figure.fig_scan > span {
	background: #F1F1F1;
}
*/
#works ul li a > div {
	display: none;
}

#works ul li a > div p.in_charge {
	font-size: 0.8em;
	margin-bottom: 1em;
}

#works ul li a > div p {
	color:var(--DarkGray);
	font-size: 0.9em;
}

#works ul li a > div p span {
	display:block;
}

.more {
	text-align: center;
	margin-top:4vw;
}

.more a {
	position:relative;
	color:var(--BaseColor);
	font-size: 1.1em;
}

#news .container {
	max-width: 1080px;
	margin:0 auto;
}

#news ul {
	border-top: solid 1px var(--LightGray);
	width:100%;
	max-width: 1080px;
	margin:0 auto;
}

#news ul li {
	border-bottom: solid 1px var(--LightGray);
}

#news ul li a {
	width:100%;
	display: block;
	padding:1em 1.8em 1em 0;
	box-sizing: border-box;
	text-decoration: none;
	color:var(--BaseColor);
	position: relative;
	transition-duration: .3s;
}

#news ul li a:after {
	content:"";
	position: absolute;
	top:50%;
	right:4px;
	width:6px;
	height:6px;
	margin-top:-3px;
	border-right:solid 1px var(--DarkGray);
	border-top:solid 1px var(--DarkGray);
	transform: rotate(45deg);
	transition-duration: .3s;
}

#news ul li a dl dt {
	color:var(--DarkGray);
	font-size:0.9em;
	padding-bottom:0.3em;
	display: block;
}

#column ul {
	border-top: solid 1px var(--LightGray);
}

#column ul li  {
	border-bottom: solid 1px var(--LightGray);
}

#column ul li a {
	display: flex;
	align-items: center;
	gap:0 1.5em;
	padding:1em 0;
	font-size: 0.9em;
	color: var(--BaseColor);
	text-decoration: none;
	transition-duration: .3s;
}

#column ul li figure {
	width:calc(90vw * 0.3);
	min-width: calc(90vw * 0.3);
}

#column ul li figure img {
	object-fit:cover;
	width:calc(90vw * 0.3);
	height:calc(90vw * 0.3 / 3 * 2);
	box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
	transition-duration: .3s;
}

#column ul li a > div {
	width: 100%;
}

#column ul li a > div p {
	margin-bottom:0.4em;
}

#column ul li a > div span {
	display: inline-block;
	padding:0 0.7em;
	margin:0 0.2em 0.2em 0;
	font-weight:600;
	font-size: 0.9em;
	color:#FFF;
}

#foot_nav ul {
	border-top:solid 1px var(--BaseColor);
	width:100%;
	max-width: 1080px;
	margin:0 auto;
}

#foot_nav ul li {
	border-bottom:solid 1px var(--BaseColor);
}

#foot_nav ul li a {
	display: block;
	width:100%;
	padding:1.2em 3em 1.6em 0.7em;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	color:var(--BaseColor);
}

#foot_nav ul li a:after {
	content:"";
	position: absolute;
	top:50%;
	right:0.8em;
	width:12px;
	height:12px;
	margin-top:-8px;
	border-right:solid 1px var(--BaseColor);
	border-top:solid 1px var(--BaseColor);
	transform: rotate(45deg);
}

#foot_nav ul li a > div {
	display: flex;
	align-items: top;
	justify-content: space-between;
}

#foot_nav ul li a > div p {
	font-family: "Noto Sans", sans-serif;
	font-size: 1.5em;
	font-weight:600;
	letter-spacing: 0.1em;
	color:var(--DarkGray);
	min-width:8em;
}

#foot_nav ul li a > div p span {
	display: block;
	font-size: 0.6em;
	font-weight:400;
	color:var(--BaseColor);
	letter-spacing: 0.03em;
}

#foot_nav ul li a > div > div {
	width:5.5em;
}

#foot_nav ul li a > p {
	font-size: 0.9em;
	padding-top:0.6em;
	text-align: justify;
	color:var(--DarkGray);
}


@media print, screen and (min-width: 480px) {


}


@media print, screen and (min-width: 640px) {

main section h2 {
	font-size:2em;
}

#works ul {
	gap:6vw 4vw;
}

#works ul li a {
	font-size:1em;
}

#works ul li a figure figcaption {
	font-size:1em;
}

.more {
	margin-top:3vw;
}

#news ul li a {
	font-size: 1em;
}

#news ul li a dl {
	display: table;
	width:100%;
}

#news ul li a dl dd,
#news ul li a dl dt {
	display: table-cell;
}

#news ul li a dl dt {
	width:7em;
	max-width:7em;
	padding-bottom:0;
}

#foot_nav ul li a {
	display: flex;
	align-items: center;
	gap:0.5em;
}

#foot_nav ul li a > div {
	align-items: center;
	flex-direction: row-reverse;
	gap:0;
}

#foot_nav ul li a > div p {
	text-align: center;
	letter-spacing: 0.2em;
}

#foot_nav ul li a > div p span {
	font-weight:400;
}

#foot_nav ul li a > p {
	color:var(--BaseColor);
	padding-top:0;
}

}


@media print, screen and (min-width: 768px) {

#works ul {
	gap:5vw 4vw;
}

.more {
	margin-top:2vw;
}

}


@media print, screen and (min-width: 960px) {

#foot_nav ul li a > p {
	line-height:1.5;
}

.more {
	text-align: right;
}

.more a {
	padding-right:1.2em;
	text-decoration: none;
	transition-duration: .3s;
}

.more a:after {
	content:"";
	position: absolute;
	top:50%;
	right:4px;
	width:6px;
	height:6px;
	margin-top:-3px;
	border-right:solid 1px var(--DarkGray);
	border-top:solid 1px var(--DarkGray);
	transform: rotate(45deg);
	transition-duration: .3s;
}

/*
.more a:hover {
	text-decoration: none;
}
*/
#column ul {
	display: flex;
	flex-wrap: wrap;
	gap:0 3vw;
	border-top: none;
}

#column ul li {
	width:calc((90vw - 9vw) / 4);
	border-bottom:none;
}

#column ul li a {
	display: block;
	padding:0;
}

#column ul li figure {
	min-width: 0;
}

#column ul li figure img {
	width:calc((90vw - 9vw) / 4);
	height: calc((90vw - 9vw) / 4 / 3 * 2);
}

#column ul li a figure {
	margin-bottom:0.6em;
}

#column ul li a > div p {
	margin-bottom:0.6em;
	line-height: 1.6;
}

#column ul li a > div span {
	padding:0.2em 1.5em;
}

}


@media print, screen and (min-width: 1200px) {

main section {
	margin-bottom:8em;
}

#works ul {
	gap:60px calc((100vw - 300px) / 23);
}

#works ul li {
	width:calc((100vw - 300px) * 10 / 23);
}

#works ul li a figure > span {
	display: block;
	overflow: hidden;
}

#works ul li a img {
	width:calc((100vw - 300px) * 10 / 23);
	height:calc((100vw - 300px) * 10 / 23 / 4 * 3);
	transition-duration: .3s;
}

#works ul li a {
	position: relative;
}

#works ul li a:hover img {
	filter:brightness(0.4);
	transform:scale(1.1);
}

#works ul li a > div {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: auto;
	opacity: 0;
	transition-duration: .5s;
	padding:3em;
	box-sizing: border-box;
}

#works ul li a > div p {
	color:#FFF;
	line-height: 1.6;
	font-size: 14px;
}

#works ul li a > div p.in_charge {
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
	margin-bottom:0.6em;
}

#works ul li a:hover > div {
	opacity: 1;
}

#news ul li a {
	padding:1em 2.2em 1em 1em;
}

#news ul li a:after {
	right:20px;
}

#news ul li a:hover {
	background: #F5F5F5;
}

#news ul li a:hover:after {
	transform: translateX(6px) rotate(45deg);
}

.more {
	margin-top:30px;
}

.more a:hover {
	color:#999;
}

.more a:hover:after {
	transform: translateX(6px) rotate(45deg);
}

#column ul {
	gap:0 2vw;
}

#column ul li {
	width:calc(( ((100vw - 300px) * 21 / 23) - 6vw) / 4);
}

#column ul li figure img {
	width:calc(( ((100vw - 300px) * 21 / 23) - 6vw) / 4);
	height:calc(( ((100vw - 300px) * 21 / 23) - 6vw) / 4 / 3 * 2);
}

#column ul li a figure {
	overflow: hidden;
	width:100%;
}

#column ul li a:hover figure img {
	transform: scale(1.1);
}

#column ul li a > div {
	transition-duration: .3s;
}

#column ul li a:hover > div {
	opacity: 0.6;
}

#foot_nav ul li a {
	justify-content: center;
	gap:1.5vw;
	padding:2.2em 3em 2.6em 0.7em;
	transition-duration: .3s;
}

#foot_nav ul li a:hover {
	background: #F5F5F5;
}

#foot_nav ul li a:after {
	right:1.8em;
	transition-duration: .3s;
}

#foot_nav ul li a:hover:after {
	transform: translateX(6px) rotate(45deg);
}


#foot_nav ul li a > div {
	justify-content: space-between;
	gap:0.8vw;
}

#foot_nav ul li a > div p {
	font-size: 2vw;
}

#foot_nav ul li a > div p span {
	font-size: 0.5em;
}

#foot_nav ul li a > div > div {
	width:7em;
}

#foot_nav ul li a > p {
	font-size: 14px;
	width:39em;
}

}



@media print, screen and (min-width: 1400px) {

#foot_nav ul li a > div p {
	font-size: 30px;
}

#foot_nav ul li a > div p span,
#foot_nav ul li a > p {
	font-size: 15px;
}

#foot_nav ul li a > p {
	width:39em;
}

}


@media print, screen and (min-width: 1520px) {

#foot_nav ul li a {
	gap:22px;
}

#foot_nav ul li a > div {
	gap:12px;
}

}


@media print, screen and (min-width: 2000px) {

#works ul {
	gap: 60px;
}

#works ul li {
	width:calc((100% - 120px) / 3);
}

#works ul li a img {
	width:calc(( ((100vw - 300px) * 21 / 23) - 120px) / 3);
	height:calc(( ((100vw - 300px) * 21 / 23) - 120px) / 3 / 4 * 3);
}

}