@charset "UTF-8";

/*基本設定*/

* {
	margin:0;
}

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

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

a:hover {
	color:#ef9504;
}

/*ヘーダー下の線*/

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

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


/*記事のタイトルの画像「不用品回収・買取」等*/

div.gyoumu-1 {
		grid-row:title;
		justify-self:center;
		text-align:center;
	}

div.gyoumu-1 {
	font-size:25px;
	font-family: Midashi Min MA31;
}


div.gyoumu-2 {
		grid-row:title-2;
		justify-self:center;
}



div.gyoumu h2 {
	font-size:20px;
	text-align:center;
	font-weight:normal;
	text-align:center;
	border:solid 1px #000000;
	padding:10px 40px:
	display:inline-block;
	margin-top:10px;
	border-radius:10px;
	background-color:rgba(224,226,228,0.5);
}

div.setumei {
		grid-row:kiji-1;
}

div.setumei p {
	margin-bottom:5px;
	font-size:16px;
	line-height:160%;
}



/*=====事例写真=====*/

h2 {
	grid-row:kiji-2;
	grid-column:1 / -1;
	width:333px;
	justify-self:center;
	font-size:20px;
	font-weight:normal;
	text-align:center;
	border:solid 1px #000000;
	padding:10px 40px:
	display:inline-block;
	margin-top:10px;
	border-radius:10px;
	background-color:rgba(224,226,228,0.5);

}
/*====写真一覧====*/
section {
	grid-row:kiji-3;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px 10px;
}

figcaption {
	font-size:13px;
	text-align:center;
}

article {
	outline-width:1px;
	outline-color:#DCDCDC;
	outline-style:solid;
	padding:8px;
}
article p {
	margin-bottom:8px;
	letter-spacing:1px;
}

article p.wave {
      text-decoration: underline wavy #ff5733; /* オレンジ色の波線 */
      text-decoration-thickness: 1px; /* 波線の太さ */
    }


/*フッター*/
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%;
	[head] 100px
	[title] auto
	[kiji-1] auto
	[kiji-2] auto
	[kiji-3] auto
	[foot] 100px;
}

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

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

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

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

/* ==PC版==：記事のタイトルと画像*/

/*==PC版==：記事のタイトルの画像「不用品回収・買取」等*/


div.gyoumu-1 {
	font-size:35px;
}

div.gyoumu-1 p {
	font-size:20px;
}


div.gyoumu-2 {
		width:50%;
}

div.gyoumu {
	display:grid;
	border-bottom:solid 1px #000000;
}


div.gyoumu h2 {
	justify-self:center;
	margin-bottom:10px;
		border:solid 0px #000000;
	padding:10px 40px:
	display:inline-block;
	margin-top:10px;
	border-radius:10px;
	background-color:#ffffff;

}

div.setumei {
	display:grid;	
}

div.setumei p {
	margin-bottom:5px;
	width:500px;
	justify-self:center;
}

/* ==PC版==事例写真*/

section {
	grid-template-columns:repeat(2,1fr);
	column-gap:20px;
	width:1024px;
		justify-self:center;
}



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