@charset "UTF-8";

/*===================問合せ、会社概要に使用*/

/*基本設定*/

* {
	margin:0;
}

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

/*ページ全体の設定*/
body {
	display:grid;
	grid-template-columns:20px 1fr 20px;
	grid-template-rows:
	[head] 120px
	[kiji-1]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;
	color:#000000;
	display:grid;
	grid-auto-flow:column;
}


header img {
	width:280px;
}

p.top img {
		vertical-align: middle;
}

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

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;
}

/* ヘッダーの背景色 */
body::before {
	content: "";
	background-color:#f4fff4;
	grid-column: 1 / -1;
	grid-row:head;
	z-index:-1;
}


/*ヘーダー下の線*/

#grid {
	grid-column:1 / -1;
	grid-row:head;
  display: grid;
  height: 1px;
  grid-template-rows: 1px 1fr;
  align-self:end;
  margin-bottom:3px;
}

#areaA {
  background-color: lime;
}
#areaB {
  background-color: lime;
}

h1 {
	font-size:25px;
	font-weight:normal;
}

article p {
	margin-bottom:2px;
}

/*フッター*/
footer {
	grid-row:foot;
	justify-self:center;
	align-self:center;
	font-size:13px;
}


/* フッターのバー */
body::after {
	content: "";
	background-color: #f4fff4;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
	border-top:solid 1px lime;
}

/*========================== 会社概要ページ */

.clock {
	font-size:13px;
}



table {
	border-collapse:collapse;
	font-size:90%;
}

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

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

td {
	background-color:#e8eef9;
}

td p {
	text-indent:0;
	font-size:90%;
	line-height:130%;
}

.kyoka {
	font-size:85%;
}


/*================================== お問い合わせページ */
figure img {
	width:30%;
	margin-top:10px;
	margin-bottom:10px;
}

h2 {
	margin-top:2em;
}

article.contact img {
	height:auto;
}

/* お問い合わせページ ヘッダーのバー */
header.contact {
	grid-row:head;
	justify-self:center;
	align-self:center;
	font-size:30px;
	color:#555d6b;
	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版：ヘッダー */
header {
	justify-self: start;
}

/* PC版：ヘッダーの会社アイコン */
header img {
	width:350px;
}

header p.top {
	font-size:25px;
	align-self:center;
	justify-self:start;
}

header p.top img {
	vertical-align:middle;
}
/* PC版：タイトル */
h1 {
	grid-column: 2 / span 3;
	max-width: 460px;
	font-size:30px;
	background-color:rgba(255,255,255,0.8);
	border-radius:15px;
}

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

p img {
	max-width: 460px;
}


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

nav a {
	font-size:16px;
	font-weight:normal;
}


/* PC版================================== お問い合わせページ */


/* PC版：会社概要ページ */

article {
	grid-row: title;
	justify-self: center;
}

/* PC版：問い合わせページ */
article.contact {
	grid-column: 3 / span 4;
	justify-self: center;
}

article.contact img {
	height:auto;
}



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