@charset "UTF-8";

body {
	text-align: left;
	letter-spacing: -0.01em;
	overflow-x: hidden;
	font-family: 'MS Pゴシック', 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
article, aside, figcaption, figure,
footer, header, menu, nav, section { 
	display: block;
}
a {
	text-decoration: none;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
ol, ul {
	list-style: none;
}
* {
	margin: 0;
	padding: 0;
}


/*-- 画像がヌルっと大きく --*/
.famous-spa li {
	overflow: hidden;  /* 拡大時にはみ出た部分を隠す */
	width: 100%;   /* 画像の幅 */
	height: auto;      /* 画像の高さ */
}
.famous-spa li img {
	display: block;
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}
.famous-spa li img:hover {
	transform: scale(1.1);      /*画像の拡大率*/
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}


/* -------------------------------------------------------------------
	■ display: grid;（ 全国ホテル旅館 ）
---------------------------------------------------------------------- */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows:
		[head] 80px
		[intro] auto
		[title] auto
		[mapnav] auto
		80px
		[gokui] auto
		20px
		[ryokan] auto
		50px
		[foot] 50px;
	font-family: sans-serif;
}

header {
	grid-column-start: 2;
	grid-row-start: head;
	justify-self: center;
	align-self: center;
}
.intro {
	grid-column-start: 2;
	grid-row-start: intro;
}
.hero {
	grid-column-start: 2;
	grid-row-start: title;
}
h2 {
	grid-column-start: 2;
	grid-row-start: title;
	justify-self: center;
	align-self: end;
}
.mapnav {
	grid-column-start: 2;
	grid-row-start: mapnav;
}
.gokui {
	grid-column-start: 2;
	grid-row-start: gokui;
}
.ryokan {
	grid-column-start: 2;
	grid-row-start: ryokan;
}
footer  {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: foot;
	justify-self: center;
	align-self: center;
}

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


/* -------------------------------------------------------------------
	■ ヘッド（ 全国ホテル旅館 ）
---------------------------------------------------------------------- */
header {
	text-align: center;
}
header img {
	width: 100%;
}


/* -------------------------------------------------------------------
	■ 表題（ intro / 全国ホテル旅館 ）
---------------------------------------------------------------------- */
.intro h1 {
	margin-top: 10px;
	padding: 7px 0 5px 0;
	font-size: 25px;
	font-weight: 300;
	text-align: center;
	color: #ae3159;
	border-top: dashed 1px #000000;
	border-bottom: dashed 1px #000000;
}

.intro p {
	margin-top: 20px;
	font-size: 15px;
	color: #333333;
	line-height: 1.5;
}


/* -------------------------------------------------------------------
	■ ヒーロー（ 全国ホテル旅館 ）
---------------------------------------------------------------------- */
figure.hero {
	margin-top: 20px;
}

figure.hero img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

h2.catch {
	font-size: 25px;
	margin-bottom: 10px;
	color: #ffffff;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.4), 0 0 0.5em rgba(0, 0, 0, 0.4), 0 0 0.5em rgba(0, 0, 0, 0.4), 0 0 0.5em rgba(0, 0, 0, 0.4);
}


 /* -- ☆彡 画像がヌルっと大きく ( nurutto ) -- */
.nurutto {
	overflow: hidden;
	width: 100%;
	height: auto;
}
.nurutto img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.nurutto img:hover {
	transform: scale(1.1);		/*画像の拡大率*/
	transition-duration: 0.3s;
}


/* -------------------------------------------------------------------
	● マップナビ（ 全国ホテル旅館 ）
---------------------------------------------------------------------- */
.mapnav {
	margin-top: 20px;
}
.mapnav ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 1% 5px;
}

figure {
	border: solid 1px #000000;
	border-radius: 3px;
}
figcaption {
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
	color: #333333;
	background-color: #eeeeee;
}
.mapnav a:hover {
	display: block;
	background-color: #75dbe7;
}


/* -------------------------------------------------------------------
	● 楽しく泊まる極意 （ 全国ホテル旅館 ）
----------------------------------------------------------------------- */
.gokui {
	margin-top: 0px;
}
.gokui h2 span {
	display: block;
	font-size: 20x;
	font-weight: bold;
	color: #930000;
}
.gokui h2 {
	font-size: 20px;
	line-height: 1.3;
	text-align: left;
	text-align: center;
	color: #333333;
	padding: 7px 0 5px 0;
	border-top: dashed 1px #000000;
	border-bottom: dashed 1px #000000;
}
.gokui p {
	margin-top: 20px;
	font-size: 15px;
	color: #333333;
	line-height: 1.5;
}

/* -- 旅館のイメージ （ 全国ホテル旅館 ）-- */
.ryokan {
	margin-top: 20px;
}
.ryokan ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0px 0px;
}


/* -------------------------------------------------------------------
	■ TOPへ戻る ( #topbutton / 全国ホテル旅館 )
----------------------------------------------------------------------- */
#topbutton {
	position: fixed;
	bottom: 5%;
	right: 2%;
	width: 5em;
	display: none;
}
#topbutton a {
	color: white;
	text-decoration: none;
}
#topbutton a:hover {
	color: yellow;
	text-decoration: underline;
}


/* -------------------------------------------------------------------
	■ フッター ( 全国ホテル旅館 )
---------------------------------------------------------------------- */
footer {
	font-size: 14px;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
}

/* フッターのバー */
body::after {
	content: "";
	background-color: #444444;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
}


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

.mapnav ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 3px 3px;
}
}/* 注意 */


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

h2.catch {
	font-size: 20px;
}
}/* 注意 */


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

}/* 注意 */


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

/* スマホの基準 */

} /* 注意 */


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

} /* 注意 */


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

figure.hero img {
	height: 250px;
}

.intro h1 {
	margin-top: 20px;
}
} /* 注意 */


/* *************** ▲ Galaxy Note 3 *************** */
@media (min-width: 640px) {

}/* 注意 */


/* *************** Pixel 2 *************** */
@media (min-width: 731px) {

} /* 注意 */


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

} /* 注意 */


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

/* -- PC版ページの設定 / 全国ホテル旅館 -- */
body {
	display: grid;
	grid-template-columns: 50px 1fr 50px;
	grid-template-rows:
		[head] 100px
		[intro] auto
		[title] auto
		[mapnav] auto
		100px
		[gokui] auto
		20px
		[ryokan] auto
		50px
		[foot] 50px;
}

/* -- 文字サイズの変更 -- */
.intro h1 {
	margin-top: 10px;
	font-size: 30px;
}
.intro p {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.6;
}

h2.catch {
	font-size: 30px;
}

.gokui h2 span {
	font-size: 30x;
}
.gokui h2 {
	font-size: 30px;
}
.gokui p {
	font-size: 16px;
	line-height: 1.6;
}

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


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

}/* 注意 */


/* *************** Galaxy Note 9 *************** */
@media (min-width: 846px) {

}/* 注意 */


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

} /* 注意 */


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

} /* 注意 */


/* *************** Galaxy Note20 Android *************** */
@media (min-width: 915px) {

} /* 注意 */


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

} /* 注意 */


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

body {
	display: grid;
	grid-template-columns: 80px 1fr 80px;
	grid-template-rows:
		[head] 100px
		[intro] auto
		[title] auto
		[mapnav] auto
		120px
		[gokui] auto
		20px
		[ryokan] auto
		50px
		[foot] 50px;
}

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

/* -- 文字サイズの変更 -- */
.intro h1 {
	margin-top: 10px;
	font-size: 33px;
}
.intro p {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.6;
}

h2.catch {
	font-size: 33px;
}

.gokui h2 span {
	font-size: 33x;
}
.gokui h2 {
	font-size: 33px;
}
.gokui p {
	font-size: 18px;
	line-height: 1.6;
}

} /* 注意 */


/* ############### ▲ iPad Pro(12.9-inch) ############### */
@media (min-width: 1024px) {
body {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
} /* 注意 */