@charset "UTF-8";


/* 基本設定 */
body {
	text-align: left;
	letter-spacing: -0.01em;
	overflow-x: hidden;
	font-family: 'メイリオ', 'ヒラギノ角ゴ ProN', '游ゴシック', 'MS Pゴシック', sans-serif;
	background-image: url(images/bg.jpg);
	background-repeat: repeat;
	margin: 0;
	padding: 0;
}

/* テキストの自動拡大を無効化 */
body {
	-webkit-text-size-adjust: none;
	text-size-adjust: none; 
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	object-fit: cover;
}
a {
	text-decoration: none;
	color: #333333;
	vertical-align: bottom;
}
ol, ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}


/* -------------------------------------------------------------------
	● グリッド
-------------------------------------------------------------------- */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[header] 100px
		[hero] auto
		[breadcrumbs] auto
		[article] auto 
		[copyright] auto;
}

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


header {
	grid-row: header;
	justify-self: center;
	align-self: center;
}
.hero {
	grid-row: hero;
	grid-column: 1 / -1;
}
.breadcrumbs {
	grid-row: breadcrumbs;
}
.kiji {
	grid-row: article;
}
.copyright {
	grid-row: copyright;
	grid-column: 1 / -1;
}


/* -------------------------------------------------------------------
	■ ヘッダー（ ロゴ  ）
---------------------------------------------------------------------- */
header img {
	width: 100%;
	height: auto;
}


/* -------------------------------------------------------------------
	■ ヒーローイメージ
---------------------------------------------------------------------- */
figure.hero img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	filter: brightness(100%); /* 画像の明るさ */
	z-index: -1;
	position: relative; /* Edge用の設定 */
}


/* -------------------------------------------------------------------
	■ パンくずリスト / .breadcrumbs
---------------------------------------------------------------------- */
.breadcrumbs *, .breadcrumbs *:after, .breadcrumbs *:before {
	box-sizing: border-box;
}
.breadcrumbs {
	overflow: hidden;
	width: 100%;
	margin: 1em auto;
	padding: 0;
	list-style: none;
}
.breadcrumbs li {
	display: inline-block;
	padding: 0;
	margin: 0 0 0.5em 0;
}
.breadcrumbs a {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0.7em 1em 0.7em 2em;
	text-decoration: none;
	color: #ffffff;
	background-color: #8a8a8a;
}
.breadcrumbs li:first-child a {
	padding-left: 1em;
	border-radius: 5px 0 0 5px;
}
.breadcrumbs a::after,
.breadcrumbs a::before {
	position: absolute;
	top: 50%;
	right: -1.5em;
	margin-top: -1.48em;
	content: '';
	border-top: 1.48em solid transparent;
	border-bottom: 1.48em solid transparent;
	border-left: 1.5em solid;
}
.breadcrumbs a::after {
	z-index: 2;
	border-left-color: #8a8a8a;
}
.breadcrumbs a::before {
	z-index: 1;
	right: -1.8em;
	border-left-color: #ffffff;
}

.breadcrumbs li:nth-child(2) a       { background:        #949494; }
.breadcrumbs li:nth-child(2) a:after { border-left-color: #949494; }
.breadcrumbs li:nth-child(3) a       { background:        #bfbfbf; }
.breadcrumbs li:nth-child(3) a:after { border-left-color: #bfbfbf; }

.breadcrumbs li:last-child a {
	cursor: default;
	pointer-events: none;
	color: black;
	background: #e9e9e9;
	border-radius: 0 5px 5px 0;
}
.breadcrumbs li:last-child a:hover {
	background: none;
}
.breadcrumbs li:last-child a::before,
.breadcrumbs li:last-child a::after {
	content: normal;
}


/* -------------------------------------------------------------------
	■ 記事 / .kiji
---------------------------------------------------------------------- */
.kiji {
	margin-top: 15px;
	padding: 0px 10px;
	background-color: #ffffff;
}


/* -------------------------------------------------------------------
	■ 記事タイトル / .kijititle
---------------------------------------------------------------------- */
.kijititle {
	margin-top: 20px;
	padding: 0px 10px;
}
.kijititle h1 {
	margin-top: 10px;
	font-size: 25px;
	line-height: 1.2;
	color: #333333;
}
.kijititle h1 span {
	display: block;
	margin: 0px;
	padding: 0px;
	color: #930000;
	font-size: 13px;
	/* font-weight: blod; */
}
.kijititle p {
	margin-top: 30px;
	font-size: 15px;
	line-height: 1.5;
	color: #333333;
}

/* -- .artwork の回り込み -- */
.artwork-left::after {
	content: "";
	display: block;
	clear: both;
}
.artwork-left > figure {
	float: left;
	max-width: 25%; /* ココが基準 */
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 30px;
	margin-left: 0;
}
.artwork-left > figure img {
	width: 100%;
	height: 100px;
}


/* -------------------------------------------------------------------
	■ 府県マップ / .fuken-map
---------------------------------------------------------------------- */
.fuken-map {
	margin-top: 20px;
	padding: 10px;
}

/* font-awesome */
.hokkaido h2 i { color: #8886d9; margin-right: 10px; }
.tohoku h2 i { color: #619ffb; margin-right: 10px; }
.kanto h2 i { color: #3da942; margin-right: 10px; }
.chubu h2 i { color: #99cc33; margin-right: 10px; }
.kinki h2 i { color: #f2c100; margin-right: 10px; }
.chugoku h2 i { color: #ff9900; margin-right: 10px; }
.shikoku h2 i { color: #fd9fab; margin-right: 10px; }
.kyushu h2 i { color: #ff6460; margin-right: 10px; }
.okinawa h2 i { color: #ff6763; margin-right: 10px; }
.izu h2 i { color: #008000; margin-right: 10px; }



.fuken-map h2 {
	font-size: 25px;
	line-height: 1.2;
	color: #333333;
	text-box-trim: trim-both;
}
.fuken-map h2 span {
	display: block;
	margin: 0px;
	padding: 0px;
	color: #930000;
	font-size: 13px;
	/* font-weight: blod; */
}

/* 景観画像の表示・非表示 */
.no-map,
.no-map02 {
	display: none;
}

/* 府県マップ */
.fuken-map ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1%;
		margin-top: 15px;
}
.fuken-map li {
	margin-bottom: 5px;
}
.fuken-map ul li a {
	display: block;
}

/* 府県名*/
p.fuken {
	font-size: 16px;
	/* font-weight: bold; */
	padding: 6px 0 3px;
	text-align: center;
	color: #f0f8ff;
	background-color: #006400;
}
p.fuken-izu {
	font-size: 16px;
	/* font-weight: bold; */
	padding: 6px 0 3px;
	text-align: center;
	color: #000000;
	background-color: #c0e2a5;
}
p.fuken:hover,
p.fuken-izu:hover {
	color: #006400;
	background-color: #acd92a;
}

/* 見どころ */
p.highlight {
	font-size: 16px;
	padding: 6px 0 3px;
	text-align: center;
	background-color: #edf7d0;
	opacity: 0.9;
}


/* -------------------------------------------------------------------
	■ 画像の装飾 / 画像がヌルっと大きく ( nurutto ) 
----------------------------------------------------------------------- */
p.nurutto {
	overflow: hidden;
	width: 100%;
	height: auto;
	background-color: #acd92a;
}
p.nurutto-izu {
	overflow: hidden;
	width: 100%;
	height: auto;
	background-color: #edf7d0;
}

p.nurutto img,
p.nurutto-izu img {
	display: block;
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}
p.nurutto img:hover,
p.nurutto-izu img:hover {
	transform: scale(1.1);      /*画像の拡大率*/
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}


/*--------------------------------------------------------------------
	■ TOPへ戻る
-------------------------------------------------------------------- */
.modoru {
	margin-top: 100px;
	text-align: right;
}
.modoru a {
	text-decoration: none;
	font-size: 15px;
}
.modoru a:hover {
	color: #ff0000;
}


/* -------------------------------------------------------------------
	5. コピーライト
-------------------------------------------------------------------- */
.copyright {
	background-color: #444444;
	padding: 10px;
	text-align: center;
}
.copyright p {
	margin: 0;
	color: #ffffff;
	font-size: 14px;
}



/* *************** ▼ iPhone 12/13 *************** */
@media (max-width: 428px) {

} /* 注意 */


/* *************** ▼ iPhone 6/7/8 iOS *************** */
@media (max-width: 375px) {

} /* 注意 */


/* *************** ▼ Galaxy Note3 Android *************** */
@media (max-width: 360px) {

/* 記事 */
.artwork-left > figure {
	max-width: 30%;
	margin-right: 15px;
}

.kijititle h1 {
	font-size: 20px;
}
.kijititle h1 span {
	font-size: 11px;
}
.fuken-map h2 {
	font-size: 20px;
}
} /* 注意 */


/* *************** ▼ iPhone 5/5E *************** */
@media (max-width: 320px) {

} /* 注意 */




/* *************** △ iPhone 5/5E *************** */
@media (min-width: 568px) {

/* 記事タイトル */
.kijititle h1 {
	font-size: 35px;
}
.kijititle h1 span {
	font-size: 15px;
	/* font-weight: blod; */
}

/* 府県マップ */
.fuken-map h2 {
	font-size: 35px;
}
.fuken-map h2 span {
	font-size: 15px;
	/* font-weight: blod; */
}
.fuken-map ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1%;
		margin-top: 15px;
}

/* 景観画像の表示・非表示 */
.no-map02 {
	display: block;
}
} /* 注意 */


/* *************** △ Nexus 7 *************** */
@media (min-width: 600px) {

}/* -- 注意 -- */


/* *************** △ Nexus 6p *************** */
@media (min-width: 732px) {

}/* -- 注意 -- */


/* *************** △ iPad Mini *************** */
@media (min-width: 768px) {

body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[header] 100px
		[hero] auto
		[breadcrumbs] auto
		[article] auto 
		[copyright] auto;
}

/* パンくず */
.breadcrumbs {
	overflow: hidden;
	width: 100%;
	margin: 2em auto 1em;
}

/* ヒーロー */
figure.hero img {
	width: 100%;
	height: 350px;
}

/* 記事 */
.kijititle p {
	font-size: 16px;
}

/* .artwork  */
.artwork-left > figure {
	width: 30%;
	margin-right: 30px;
}
.artwork-left > figure img {
	max-width: 100%;
	height: 140px;
}

/* 府県マップ */
.fuken-map h2 {
	font-size: 35px;
}
.fuken-map h2 span {
	font-size: 15px;
	/* font-weight: blod; */
}
.fuken-map ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	column-gap: 1%;
		margin-top: 15px;
}

/* 景観画像の表示・非表示 */
.no-map,
.no-map02 {
	display: block;
}

/* -- TOPへ戻る ( #topbutton ) -- */
#topbutton {
	position: fixed;
	bottom: 5%;
	right: 1%;
	width: 10em;
	display: none;
}
}/* 注意 */


/* *************** △ iPad iPadOS *************** */
@media (min-width: 810px) {

/* .artwork  */
.artwork-left > figure {
	width: 30%;
	margin-right: 30px;
}
.artwork-left > figure img {
	max-width: 100%;
	height: 170px;
}
}/* 注意 */


/* *************** △ Galaxy Note 20 ULtra *************** */
@media (min-width: 883px) {

/* 記事 */
.kijititle p {
	font-size: 18px;
}
} /* 注意 */


/* *************** △ Nexus 7 *************** */
@media (min-width: 960px) {

article {
	padding: 20px;
}


/* .artwork  */
.artwork-left > figure {
	width: 40%;
	margin-right: 30px;
}
.artwork-left > figure img {
	max-width: 100%;
	height: 210px;
}
} /* 注意 */



/* *************** △ iPad Pro(12.9-inch) *************** */
@media (min-width: 1024px) {

} /* 注意 */


/* *************** △ iPad iPadOS *************** */
@media (min-width: 1080px) {

.breadcrumbs,
article {
	width: 1040px;
	margin-left: auto;
	margin-right: auto;
}
} /* 注意 */