/* 
 *　おたり移住navi
 *　　小谷のこと
 */
* {
	color: #370000;
}
h2 {
	font-size: 4.9rem;
	font-weight: bold;
	margin: 0;
}
p {
	font-size: 2.5rem;
	line-height: 1.4em;
	margin: 0;
}
h3 {
	background-image: url(../img/about/under_line.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	font-size: 3.4rem;
	font-weight: bold;
	padding-bottom: 10px;
	text-align: right;
}
h4 {
	background-position: left top;
	background-repeat: no-repeat;
	font-size: 1.8rem;
	font-weight: bold;
	height: 54px;
	line-height: 46px;
	margin: 0;
	padding-left: 56px;
	white-space: nowrap;
}

/* あいさつ */
div#intro {
	background-image: url(../img/about/bg_article.png);
	height:  570px;
	margin: 58px auto 0;
	max-width: 1140px;
	padding-top: 48px;
	text-align: center;
	width: calc(95% - 2em);
}
div#photos {
	margin: 103px auto 0;
	max-width: 1460px;
	width: 95%;
}
div#photos ul {
	font-size: 0;
	list-style: none;
	padding: 0;
	width: 100%;
}
div#photos ul li {
	display: inline-block;
	font-size: 0;
	margin-left: calc((100% - 1284px) / 8);
	margin-right: calc((100% - 1284px) / 8);
	vertical-align: top;
}
div#photos ul li:nth-child(1) {
	margin-top: 23px;
}
div#photos ul li:nth-child(3) {
	margin-top: 2px;
}
div#photos ul li:nth-child(4) {
	margin-top:  22px;
}
div#photos ul li img {
	display: inline-block;
}

/* 小谷の四季 */
div#four_seasons {
	margin: 170px auto 0;
	max-width: 799px;
	width: 90%;
}
div#four_seasons p {
	font-size: 2.6rem;
	margin-bottom: 25px;
}
div#four_seasons h2 ,
div#four_seasons p {
	display: inline-block;
	vertical-align: bottom;
}
div#youtbe {
	background-image: url(../img/about/bg_youtube.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
	max-width: 517px;
	padding: 30px;
	width: calc(95% - 60px);
}
div#youtube_wrap {
	margin-bottom: 42px;
	position: relative;
	width: 100%;
}
div#youtube_wrap:before {
	content: "";
	display: block;
	padding-top: 66.344%;
	width: 100%;
}
div#youtube_wrap:after {
	bottom: -54px;
	content: url(../img/about/youtube.png);
	display: block;
	position: absolute;
	right: 0;
}
div#youtube_wrap iframe {
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}

/* 基本データ */
div#basic_data {
	margin: 85px auto 0;
	max-width:716px;
	position: relative;
	width: 95%;
}
div#basic_data:before {
	content:  "";
	display: block;
	padding-top: 111.87%;
}
div#basic_data_inner {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
div#basic_data h2 {
	display: block;
	margin-left: 30px;
}
img#map_japan {
	bottom: 30%;
	height: auto;
	left: 0;
	max-width: 565px;
	position: absolute;
	width: 100%;
}
img#map_nagano {
	bottom: 0;
	height: auto;
	max-width: 338px;
	right: 0;
	position: absolute;
	width: 100%;
}

/* アクセス */
div#access {
	margin: 30px auto 0;
	max-width: 652px;
	width: 95%;
}
div#route {
	font-size: 0;
	max-width: 576px;
	width: 100%;
}
h4.by_car {
	background-image: url(../img/about/icon_by_car.png);
}
h4.by_train {
	background-image: url(../img/about/icon_by_train.png);
}
div#route {
	font-size: 0;
}
div.tile {
	background: rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	display: inline-block;
	margin-left: calc((100% - 528px) / 3);
	max-width: 252px;
	padding: 6px;
	vertical-align: top;
	width: calc(100% - 12px);
}
div.tile ul {
	font-size: 1.4rem;
	list-style: none;
	padding: 0;
}
div.tile ul li {
	height: 2em;
}
div.tile ul li.route:before {
	content: "↓";
	display: inline-block;
}

@media (max-width: 1440px) {
	div#photos ul li {
		margin-left: 2%;
		margin-right: 0;
		width: calc(92% / 3);
	}
	div#photos ul li img {
		height: auto;
		width: 100%;
	}
}
@media (max-width: 1200px) {
	div#intro {
		background-color: #FFFEDF;
		background-image: none;
		border-radius: 80px;
		height: auto;
		margin: 58px 2.5% 0;
		padding: 48px 1em;
	}
	div#photos ul li {
		margin-left: 2%;
		margin-right: 0;
		width: 47%;
	}
}
@media (max-width: 860px) {
	h2 {
		font-size: 4rem;
	}
	p {
		margin: 0 0 0.5em;
		text-align: left;
	}
	p br {
		display: none;
	}
	div#photos {
		margin-top: 30px;
	}
	div#four_seasons {
		margin-top: 30px;
	}
}
@media (max-width: 740px) {
	div#photos ul li {
		margin: 0 0 20px;
		text-align: center;
		width: 100%;
	}
	div#photos ul li img {
		max-width: 280px;
	}
	div#basic_data:before {
		display: none;
	}
	div#basic_data_inner {
		overflow: hidden;
		position: static;
	}
	img#map_japan {
		float: left;
		margin-top: 0px;
		position: static;
	}
	img#map_nagano {
		float: right;
		margin-top: -25px;
		position: static;
	}
}
@media (max-width: 600px) {
	div.tile {
		display: block;
		margin: 0 auto 20px;
	}
}
@media (max-width: 375px) {
	div#access {
		width: 100%;
	}
	div.tile {
		max-width: 260px;
	}
	h3 {
		margin-right: 2.5%;
	}
}