@charset "UTF-8";

/*基本設定*/

* {
	margin:0;
}

img {
	width:100%;
	height:auto;
}

/*ページ全体の設定*/
body {
	display:grid;
	grid-template-columns:20px 1fr 20px;
	grid-template-rows:
	[head] 100px
	[title] auto
	[sub] auto
	[recent] auto
	[foot] 100px;
	row-gap:20px;
	font-family:sans-serif;
}

/*パーツの配置*/
body > * {
	grid-column:2 / -2;
}

/*ヘッダー*/
header {
	grid-row:head;
	justify-self:center;
	align-self:center;
	font-size:30px;
	color:#555d6b;
}

/*ナビゲーションメニュー*/
nav {
	grid-row:head;
	justify-self:center;
	align-self:end;
}

nav ul {
	list-style-type:none;
	padding:0;
	display:grid;
	grid-auto-flow:column;
	column-gap:20px;
}

nav a {
	color:#666666;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
}

nav a:hover {
	color:#ef9504;
}
/*ヒーローイメージ*/
figure.hero {
	grid-column:1 / -1;
	grid-row:title / span 2;
}

figure.hero img {
	height:547px;
	object-fit:cover;
	vertical-align:bottom;
	filter:brightness(110%);
	z-index:-1;
	position:relative; /*Edge用の設定*/

}


/*タイトル*/
h1 {
	grid-row:title;
	justify-self:center;
	align-self:center;
	color:#000000;
	font-size:33px;
	font-weight:normal;
	line-height:1.2;
	text-shadow:0 0 5px #ffffff;
	text-align:center;
}

/*サブタイトル*/
p {
	grid-row:sub;
	text-align:center;

}

p a {
	color:#ffffff;
	text-decoration:none;
	display:inline-block;
	margin-top:10px;
}

p img {
	width:250px;
}
/*記事一覧*/
section {
	grid-row:recent;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px 10px;
}

section a {
	color:#000000;
	text-decoration:none;
}

section h3 {
	font-size:14px;
}

section h2 {
	grid-column:1 / -1;
	font-size:20px;
	font-weight:normal;
	text-align:center;
}

section a:hover {
	text-decoration:underline;
}
/*フッター*/
footer {
	grid-row:foot;
	justify-self:center;
	align-self:center;
	font-size:13px;
}

article img {
		height:200px;
	object-fit:cover;
}

/* フッターのバー */
body::after {
	content: "";
	background-color: #eeeeee;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
}

/* 会社概要ページ */

.far fa-clock {
	text-align:right;
}



table {
	border-collapse:collapse;
}

th,td {
	border:solid 1px #cccccc;
	padding:20px;
}

th {
	width:5em;
	text-align:left;
	background-color:#555d6b;
	color:#ffffff;
}

td {
	background-color:#e8eef9;
}

/* ===== PC版の設定 ===== */
@media (min-width: 768px) {

/* PC版：ページ全体の設定 */
body {
	grid-template-columns: 0.2fr repeat(6,1fr) 0.2fr;
	grid-column-gap: 5%;
	column-gap: 5%;
	grid-template-rows: 
		[head] 100px
		[title sub] auto
		[recent] auto
		[foot] 100px;
}

/* PC版：ヒーローイメージ */
figure.hero {
	grid-row: title;
	margin-top: -20px;
}

/* PC版：タイトル */
h1 {
	grid-column: 2 / span 3;
	max-width: 460px;
	padding:15px ;
	font-size:45px;
	background-color:rgba(255,255,255,0.8);
	border-radius:15px;
}

/* PC版：サブタイトル */
p {
	grid-column: 5 / span 3;
	align-self: center;
}

p img {
	width: 80%;
	max-width: 460px;
}

/* PC版：ヘッダー */
header {
	justify-self: start;
}

/* PC版：ナビゲーションメニュー */
nav {
	justify-self: end;
	align-self: center;
}

/* PC版：記事一覧 */
section {
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 20px;
	column-gap: 20px;
}

/* PC版：会社概要ページ */
article.profile {
		grid-column: 3 / span 4;
	justify-self: center;

}

}
/* ===== PC版の設定ここまで ===== */