@charset "UTF-8";

/* 基本設定 */

* {
	margin: 0;
}
img {
	width: 100%
	height: auto;
}

/* グリッドの設定 */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head] 85px
		[hero] auto
		[breadcrumbs] auto
		[Prefectures] auto
		[toshimei] auto
		[cities] auto
		[article] auto
		50px
		[foot] 50px;
	font-family: sans-serif;
}

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

/* 配置の基本 */
header {
	grid-column-start: 2;
	grid-row-start: head;
	justify-self: center;
	align-self: center;
}
.hero {
	grid-column-start: 1 / -1;
	grid-row-start: hero;
}
.headimg-sp {
	grid-column-start: 1 / -1;
	grid-row: hero;
}
.breadcrumbs {
	grid-column-start: 1 / -1;
	gird-row: breadcrumbs;
}
.Prefectures {
	grid-column-start: 2;
	gird-row: prefectures;
}
article {
	grid-column-start: 2;
	grid-row-start: article;
}
footer {
	grid-column-start: 1 / -1;
	grid-row-start:foot;
}


/* -------------------------------------------------------------------
	■ ヘッド（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
header {
	justify-self: center;
	align-self: center;
}


/* -------------------------------------------------------------------
	② ヒーローイメージ（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
figure.hero img {
	width: 100%;
	height: 250px;
	object-fit: cover;
}
figcaption {
	margin-top: 5px;
	font-size: 14px;
}


/* -------------------------------------------------------------------
	③ パンくずリスト（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
.breadcrumbs {
	margin-top: 25px;
	text-align: center;
}
.breadcrumbs ul {
	display: flex;
	width: 100%;
	grid-gap: 3px;
	justify-content: center;
	padding: 0;
	list-style: none;
}
.breadcrumbs li {
	width: 23%;
	box-sizing: border-box;
}
.breadcrumbs a {
	display: block;
	font-size: 15px;
	color: #000000;
	padding: 10px 0 7px 0;
	border: solid 1px #000000;
	background-color: #eeeeee;
	margin-top: 1px;
}
.breadcrumbs a:hover {
	background-color: #000000;
	color: #ffffff;
}
.breadcrumbs li .koko {
	color: #ffffff;
	background-color: #000000;
}

/* -------------------------------------------------------------------
	④ 府県の紹介（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
.Prefectures {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 30px;
	padding: 0 0px; /*** 883px から設定する ***/
}
figure.map-Pref {
	display: none; /*** 600px から表示する ***/
	width: 100%;
	height: 100px;
	object-fit: cover;
}
.introduction p {
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	color: #333333;
}
span.red {
	color: #ff0000;
}


/* -------------------------------------------------------------------
	⑥ 都市名ボックス（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
.citybox {
	margin-top: 25px;
}
.citybox h2 {
	width: 100%;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: #ffffff;
	padding-left: 20px;
	background-color: #009944;
	padding: 3px 0 0px 5px;
}


/* -------------------------------------------------------------------
	⑦ 都市の紹介（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
.cityimgbox {
	margin-top: 0px;
	border: solid 1px #aaaaaa;
	background-color: #e6f2e7; /* 薄いグリーン */
}
.cityimgbox img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	vertical-align: bottom;
}

.cityimgbox p {
	font-size: 14px;
	line-height: 1.3;
	color: #174E80; /* ブルー */
	text-align: left;
	background-color: #ffffff;
	padding: 5px 8px 5px 15px; /* 内側の余白 */
	margin: 5px; /* 外側の余白 */
}

.cityimgbox p.text-left {
	text-align: left;
}

/* マージントップ */
.top10 {
	margin-top: 10px;
}
.top15 {
	margin-top: 15px;
}
.top20 {
	margin-top: 20px;
}

/* -- 観光・産物 -- */
.kanko ul {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0%; /* 1行1列は無効 */
	row-gap: 5px;
}
.kanko span {
	display: block;
	font-size: 16px; /* 1列 */
	line-height: 1.5;
	color: #174E80;
	background-color: #eeeeee;
	padding: 3px 0 0px 10px;
}
.kanko img {
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* -------------------------------------------------------------------
	footer（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
footer {
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	background: #dddddd;
}


/* -------------------------------------------------------------------
	modoru（ 伊豆 / 東・南・中・西 ）
---------------------------------------------------------------------- */
.modoru {
	text-align: right;
	padding-top: 20px;
	padding-right: 15px;
	padding-bottom: 30px;
}


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

} /* 注意 */


/* *************** Galaxy neto20 *************** */
@media (min-width: 412px) {

/* -- 観光・産物 / 2列 2行 -- */
.kanko ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1%;
	column-gap: 2%;
	row-gap: 5px;
}
.kanko span {
	font-size: 14px;
}
} /* 注意 */


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

/* -- 名所旧跡の紹介 -- */
.cityimgbox p {
	font-size: 15px;
}

/* -- 観光・産物 -- */
.kanko span {
	font-size: 15px;
}
} /* 注意 */


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

/* -- 観光・産物 / 2列 2行 -- */
.kanko ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1%;
	row-gap: 0px;
}
} /* 注意 */


/* *************** Galaxy neto3 *************** */
@media (min-width: 640px) {

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 3fr;
	grid-column-gap: 3%;
	column-gap: 3%;
}
figure.map-Pref {
	display: block; /*** ここから表示する ***/
	width: 100%;
	height: auto;
	display: flex; /* img の親要素(マップの表示位置の調整) */
}
figure.map-Pref img {
	align-items: center;
}
} /* 注意 */


/* *************** iPhone 6/7/8 *************** */
@media (min-width: 667px) {

} /* 注意 */


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

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 4fr;
	column-gap: 3%;
}
} /* 注意 */


/* *************** iPhone6/7/8/ Plus *************** */
@media (min-width: 736px) {

} /* 注意 */


/* *************** Galaxy s9/s9+ *************** */
@media (min-width: 740px) {

} /* 注意 */


/* *************** Galaxy s10/s10+ *************** */
@media (min-width: 760px) {

} /* 注意 */


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

/* ヘッダー / ナビ（ 横並び ）*/
header {
	padding-left: 30px;
}

/* -- ヒーローイメージ -- */
figure.hero {
	margin-top: 0px;
}

/* パンくずリスト */
.breadcrumbs {
	margin-top: 25px;
}
.breadcrumbs ul {
	grid-gap: 10px;
}
.breadcrumbs li {
	width: 12%;
}
.breadcrumbs a {
	font-size: 18px;
	font-weight: bold;
}

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 4fr;
	grid-column-gap: 3%;
	column-gap: 3%;
}
.introduction p {
	font-size: 16px;
}

/* -- 名所旧跡の紹介 -- */
.cityimgbox p {
	font-size: 16px;
}

/* -- 観光・産物 / 2列 2行 -- */
.kanko span {
	font-size: 16px; 
}
} /* 注意 */


/* *************** Nexus 10 *************** */
@media (min-width: 800px) {

} /* 注意 */


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

/*-- 観光・産物 / 1行 3列  --*/
.kanko ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 1%;
	row-column: 1%;
}
} /* 注意 */


/* *************** iPad Air *************** */
@media (min-width: 820px) {

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 5fr;
	grid-column-gap: 3%;
	column-gap: 3%;
}
} /* 注意 */


/* *************** iPad (11-inch) *************** */
@media (min-width: 834px) {

} /* 注意 */


/* *************** GalaxyS20+ *************** */
@media (min-width: 854px) {

} /* 注意 */


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

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	padding: 0 30px; /*** ここから設定する ***/
}
} /* 注意 */


/* *************** iPhone 11 Pro Max *************** */
@media (min-width: 896px) {

} /* 注意 */


/* *************** Galaxy Note 20 *************** */
@media (min-width: 915px) {

} /* 注意 */


/* *************** iPhone 12/13 Pro Max *************** */
@media (min-width: 926px) {

/*-- 府県の紹介 --*/
.introduction p {
	font-size: 17px;
}

/* -- 名所旧跡の紹介 -- */
.cityimgbox p {
	font-size: 17px;
}

/* -- 観光・産物 / 1列 -- */
.kanko span {
	font-size: 17px; 
}
} /* 注意 */


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

figure.hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	vertical-align: bottom;
}

/* パンくずリスト */
.breadcrumbs {
	margin-top: 25px;
}
.breadcrumbs ul {
	grid-gap: 10px;
}
.breadcrumbs li {
	width: 12%;
}
} /* 注意 */


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

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 5fr;
	padding: 0 50px;
}
.introduction p {
	font-size: 18px;
}
} /* 注意 */


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

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 5fr;
	padding: 0 100px;
}
} /* 注意 */


/* *************** ipad Air iPadOS *************** */
@media (min-width: 1180px) {

figure.hero img {
	width: 100%;
	height: auto;
}

/* パンくずリスト */
.breadcrumbs {
	margin-top: 25px;
}
.breadcrumbs ul {
	grid-gap: 10px;
}
.breadcrumbs li {
	width: 12%;
}
.breadcrumbs a {
	font-size: 18px;
	font-weight: bold;
}

/*-- 府県の紹介（ Prefectures ) --*/
.Prefectures {
	grid-template-columns: 1fr 5.5fr;
	padding: 0 100px;
}

/* 地域の紹介の画像サイズ */
.cityimgbox img {
	width: 100%;
	height: auto;
	object-fit: cover;
	vertical-align: bottom;
}
} /* 注意 */


/* ############### ■ 1180px以上～ ############### */
@media (min-width: 1180px) {
body {
	width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
} /* 注意 */