@charset "UTF-8";

/*TOPページ用CSS*/


/*基本設定*/

* {
	margin:0;
}

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

/*ページ全体の設定*/
body {
	display:grid;
	grid-template-columns:20px 1fr 20px;
	grid-template-rows:
			[head] 120px
			[title] auto
			[sub] auto
			[sub-2] auto
			[sub-3] auto
			[recent] auto
			[tel] 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;
	column-gap:15px;
}


header img {
	width:280px;
}

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

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

a:hover {
	color:#ef9504;
}

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

/*ヒーローイメージ*/
figure.hero {
	grid-column:2 / -2;
	grid-row:title / span 2;
	align-self:center;
	justify-self:center;
	text-align:center;
}

figure.hero img {
	vertical-align:bottom;
	z-index:-1;
	position:relative;	/*Edge用の設定*/
}

figure.hero img.sale {
	width:100%;
	vertical-align:bottom;
	z-index:-1;
	position:relative;	/*Edge用の設定*/
}

/*ヒーローイメージ下の電話番号*/
figure.kakaku {
	grid-row:sub-2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px 10px;
	gap: 20px 10px;
	border-bottom:1px solid #00b2ff;
	padding-bottom:1em;
}

/*事業内容一覧の上の区切り線*/

div .border {
	grid-row:sub-3;
}

 .border {
	border-bottom:1px solid #00b2ff;
	padding-top: 1px;
	padding-bottom: 1px;
		grid-column:1 / -1;

}


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

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

section a:hover {
	text-decoration:underline;
}

section h3 {
	font-size:14px;
	text-align:center;
	font-family: Midashi Min MA31;
}

section p {
	grid-column: 1/ -1;
	font-size:14px;
	font-weight:normal;
	margin-top:-15px;
}

section h2 {
	grid-column: 1/ -1;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	border:solid 1px #000000;
	border-radius:10px;
	background-color:#eff0f1;
}

/*記事一覧の「事業内容」*/
section span {
	grid-column: 1/ -1;
	justify-self:center;
	width:100px;
}

article {
	outline-width:1px;
	outline-color:#DCDCDC;
	outline-style:solid;
	padding:2px;
}

/*フッター上の電話*/
div.tel {
	display:grid;
	grid-row:tel;
	grid-column: 1 / -1;
	justify-self:center;
	align-self:center;
}


/*フッター*/
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;
}


/* 会社概要ページ */

/* お問い合わせページ */

/* お問い合わせページ ヘッダーのバー */

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

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


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

/* PC版：タイトル */

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

header img {
	width:350px;
}

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

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

/* * PC版：ヘッダーの背景色 */
body::before {
	content: "";
	background-color:#f4fff4;
	grid-column: 1 / -1;
	grid-row:head;
	z-index:-1;
	border-bottom:solid 1px lime;
	margin-bottom:10px;
}

/** PC版：ヒーローイメージ下の電話番号*/
figure.kakaku {
	grid-row:sub-2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px 10px;
	gap: 20px 10px;
	max-width:1024px;
	justify-self:center;

}

div .border {
	grid-row:sub-3;
}



/* PC版：記事一覧 */
section {
	grid-row:recent;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	column-gap:20px;
	max-width:1024px;
	justify-self:center;
}

section h2 {
	width:300px;
	justify-self:center;
}


/*PC版　記事一覧の「事業内容」*/
section span {
	grid-column: 1/ -1;
	justify-self:center;
	width:144px;
}

section p {
	width:600px;
	justify-self:center;
	font-size:120%;
}


section h3 {
	font-size:20px;
	text-align:center;
	font-family: Midashi Min MA31;
}

/** PC版：フッター上の電話*/
div.tel {
	display:grid;
	grid-row:tel;
	grid-column: 1 /-1;
	justify-self:center;
	align-self:center;
}

footer {
	grid-row:foot;
	justify-self:center;
	align-self:center;
	font-size:18px;
}


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