@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

// 固定色
$main-blue: #003685;
$main-yellow: #bf9a0e;
$sub-blue: #d6dfeb;

#header-img{
	background: url("../img/03-header.jpg") center / cover no-repeat ;
}

#works-menu{
	margin-top: 10rem;
	.category{
		margin-bottom: 5rem;
		h2{
			text-align: justify;
			@include sm{
				font-size: 24px;
				font-size: 2.4rem;
			}
		}
		ul{
			li{
				line-height: 2rem;
				margin-bottom: 1.5rem;
				cursor: pointer;
				transition:0.3s;
				&:hover{opacity: 0.7;}
				i{margin-right: 0.5rem;}
				p{
					display: inline;
				}
			}
			.hosou,.doboku{margin-left: 1rem;}
			.is_active{
				color: $main-blue;
				font-weight: 600;
				p{text-decoration:underline;}
			}
		}
	}
	#itemlist{
		.box{
			margin-bottom: 5rem;
			.img-box{
				overflow:hidden;
				img{transition:0.3s;}
			}
			dl{
				margin-top: 1.5rem;
				dt{
					font-weight: 500;
					font-size: 14px;
					font-size: 1.4rem;
					background: $main-blue;
					display: inline-block;
					padding: 0 1rem;
					margin-bottom: 0.75rem;
					color: #fff;
					transition: .3s;
				}
				dd{
					color: #333333;
					font-weight: 600;
					line-height: 2rem;
					transition: .3s;
				}
			}
		}
		.hosou dd,.doboku dd{
			text-decoration:underline;
		}
		.hosou,.doboku{
			&:hover{
				img{transform:scale(1.1,1.1);}
				dt{opacity: 0.7;}
				dd{opacity: 0.7;}
			}
		}
	}
}


//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー個ページ

#works-contents{
	margin-top: 10rem;
	dt{
		font-weight: 500;
		font-size: 14px;
		font-size: 1.4rem;
		background: $main-blue;
		display: inline-block;
		padding: 0 1rem;
		margin-bottom: 0.75rem;
		color: #fff;
	}
	dd{
		font-size: 25px;
		font-size: 2.5rem;
		font-weight: 600;
		margin-bottom: 3rem;
	}
	img{
		margin-bottom: 2rem;
		@include sm{
			height: 350px;
		    object-fit: cover;
		}
		@include xs{
			height: 250px;
		}
	}
	table{
		margin: 3rem auto 7rem;
		width: 50%;
		@include md{width: 70%;}
		@include sm{
			margin: 2rem auto 5rem;
			width: 100%;
		}
		th{
			width: 30%;
			padding: 1rem;
			font-weight: 100;
			border-bottom: 1px solid $main-blue;
		}
		td{
			border-bottom: 1px solid #C8C8C8;
			padding: 1rem 2rem;
		}
	}
	.link-box{
		text-align: center;
		margin-bottom: 10rem;
		@include sm{margin-bottom: 7rem;}
	}
}