@charset "utf-8";
@import url("/ssi/css/slick.css");
@import url("/ssi/css/life.css");

#main {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#main_header h1 {
	background: none;
	margin: 0;
	padding: 0;
	position: relative;
	background: #000;
	color: #fff;
	border-radius: 0;
}
#main_header h1 img {
	display: block;
	max-width: 100%;
	height: auto;
}
#main_header h1 .ttl_h1 {
	display: block;
	text-align: right;
	color: inherit;
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
	font-size: 2.8rem;
	line-height: 1.6;
	position: absolute;
	right: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

ul#miryoku_nav {
	margin: 0;
	padding: 0;
	list-style: none;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	        align-items: flex-start;
}

ul#miryoku_nav li img{
	max-width: 100%;
	height: auto;
}

#main_body h2 {
	background: none;
	color: currentColor;
	margin: 0 0 40px;
	padding: 0;
	text-align: center;
	position: relative;
	/* height: 210px; */
}
#main_body h2:before{
	content: '';
	display: block;
	width: 100%;
	height: 165px;
	background: #ffffff;
	position: absolute;
	top: 0px;
	left: 0px;
}
#main_body h2 img {
	position: relative;
	max-width: 330px;
	height: auto;
}

#main_body > div[id] {
	/* margin-top: 165px; */
	/* margin-bottom: 200px; */
	margin: 70px 0;
}
#main_body > div[id]:last-child{
	margin-bottom: 0;
}


#tabisuru {
	background: url(/img/life/miryoku/tabisuru_bg.png) repeat center top #9f4c80;
	color: #ffffff;
	/* margin-top: 165px; */
	/* position: relative; */
	/* margin-bottom: 200px; */
}

#main_body h2 img {
	/* transform: translateY(-50%); */
	/* position: absolute; */
	/* top: -165px; */
	/* left: 50%; */
	/* -webkit-transform: translateX(-50%); */
	/* transform: translateX(-50%); */
}

.mainimage {
	max-width: 100%;
	height: auto;
}

.miryoku_detail_box {
	display: -webkit-box;
	display: flex;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	        align-items: center;
	padding: 80px 0;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.miryoku_detail_box img{
	max-width: 100%;
	height: auto;
}

.miryoku_text {
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
	max-width: 430px;
}

a.miryoku_link {
	display: block;
	margin: 20px 0 0;
	padding: 20px 60px;
	text-align: center;
	color: #000000;
	text-decoration: none;
	background: #ffffff;
	position: relative;
	max-width: 430px;
	box-sizing: border-box;
	font-weight: 500;
	border-top: 1px solid #eee;
	border-left: 1px solid #ccc;
	border-right: 1px solid #999;
	border-bottom: 1px solid #666;
	-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
	        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
	border-radius: 8px;
}
a.miryoku_link:hover {
	border-color: #fff;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
a.miryoku_link:after{
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 3px solid #999999;
	border-top: none;
	border-left: none;
	position: absolute;
	right: 15px;
	top: 50%;
	-webkit-transform: translateY(-50%) rotate(-45deg);
	        transform: translateY(-50%) rotate(-45deg);
}

.miryoku_detail_box > div {
	margin: 0 40px;
}

#kurasu {
	background: url(/img/life/miryoku/kurasu_bg.png) repeat center top #485580;
	color: #ffffff;
}

#kurasu .miryoku_detail_box:nth-of-type(2) {
	-webkit-box-align: start;
	        align-items: flex-start;
}

#ajiwau {
	background: url(/img/life/miryoku/ajiwau_bg.png) repeat center top #c82222;
	color: #ffffff;
}

p.maintext {
	text-align: center;
	margin: 60px 0;
	text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#ajiwau ul.miryoku_list {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	        justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

#ajiwau ul.miryoku_list li {
	margin: 0 40px 80px;
}

#ajiwau ul.miryoku_list li p {
	background: rgba(0,0,0,0.2);
	padding: 10px 10px;
	margin: 0;
}

#ajiwau ul.miryoku_list li img {
	max-width: 100%;
	height: auto;
}

#shiru {
	background: url(/img/life/miryoku/shiru_bg.png) repeat center top #327f60;
	color: #ffffff;
}

#shiru .miryoku_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: stretch;
	        align-items: stretch;
}

#shiru .miryoku_list li {
	width: 430px;
	margin: 40px;
}

#shiru .miryoku_list li img {
	max-width: 100%;
	height: auto;
}

/* 旅するの写真 */
.tabisuru_photo{
	overflow: hidden;
}
.tabisuru_photo ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 
.tabisuru_photo ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	        align-items: flex-start;
} */

.tabisuru_photo ul li {
	display: block;
	margin: 40px;
}

/* 
.tabisuru_photo ul li:nth-child(n+7){
	display: none;
} 
*/

.tabisuru_photo ul li img {
	max-width: 100%;
	height: auto;
	border: 10px solid #fff;
}
/* 旅するの写真ここまで */

@media screen and (max-width : 900px) {
	#main_header h1 {
	}
	#main_header h1 img {
	}

	ul#miryoku_nav {
		-webkit-box-pack: center;
		        justify-content: center;
		margin-top: 30px;
	}
	ul#miryoku_nav li{
		width: 40%;
		margin: 0 5% 40px;
		text-align: center;
	}

	#main_body h2 {
	}

	#main_body > div[id] {
	margin: 40px 0;
	}

	#tabisuru {
	}

	#main_body h2 img {
	}

	.mainimage {
	}

	.miryoku_detail_box {
		display: block;
		max-width: 430px;
		margin: 0 auto;
		padding: 60px 20px;
	}

	.miryoku_text {
	}

	a.miryoku_link {
		padding: 20px 40px;
	}

	.miryoku_detail_box > div {
		margin: 0;
	}

	#kurasu {
	}

	#kurasu .miryoku_detail_box:nth-of-type(2) {
	}

	#ajiwau {
	}

	p.maintext {
	}

	#ajiwau ul.miryoku_list {
	}

	#ajiwau ul.miryoku_list li {
		width: 40%;
		margin: 0 2% 20px;
	}

	#ajiwau ul.miryoku_list li p {
	}

	#ajiwau ul.miryoku_list li img {
	}

	#shiru {
	}

	#shiru .miryoku_list {
	}

	#shiru .miryoku_list li {
		width: 40%;
		margin: 0 2% 10px;
	}


	.tabisuru_photo ul li img{
		width: 20vw;
		max-width: none;
		border-width: 1vw;
	}

}

@media screen and (max-width: 900px) {
	#mymainback{
		margin: 0;
	}
	#main_header h1 {
	}
	#main_header h1 img {
	}
	#main_header h1 .ttl_h1 {
		font-size: 1.8rem;
		line-height: 1.5;
		top: 5px;
		right: 5px;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	ul#miryoku_nav {
	}

	#main_body h2 {
	}

	#main_body > div[id] {
		padding: 0 0px 10px;
	}


	#tabisuru {
	}

	#main_body h2 img {
		max-width: 75%;
	}

	.mainimage {
	}

	.miryoku_detail_box {
	}

	.miryoku_text {
	}

	a.miryoku_link {
	}

	.miryoku_detail_box > div {
	}

	#kurasu {
	}

	#kurasu .miryoku_detail_box:nth-of-type(2) {
	}

	#ajiwau {
	}

	p.maintext {
		margin: 0px auto;
		padding: 40px 20px;
		max-width: 430px;
		text-align: left;
	}

	#ajiwau ul.miryoku_list {
		display: block;
		padding: 0px 20px;
	}

	#ajiwau ul.miryoku_list li {
		width: 100%;
		max-width: 430px;
		margin: 0 auto 40px;
	}

	#ajiwau ul.miryoku_list li p {
	}

	#ajiwau ul.miryoku_list li img {
	}

	#shiru {
	}

	#shiru .miryoku_list {
		display: block;
		padding: 0px 20px;
	}

	#shiru .miryoku_list li {
		width: 100%;
		max-width: 430px;
		margin: 0 auto 40px;
	}
	.tabisuru_photo ul li{
		margin: 10px 10px;
	}
	.tabisuru_photo ul li img{
		width: 20vw;
		height: auto;
		border-width: 1vw;
	}
}



/* 背景色変更時 */
.color_change #tabisuru,
.color_change #kurasu,
.color_change #ajiwau,
.color_change #shiru,
.color_change a.miryoku_link {
	background: none;
	color: inherit;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.color_change .miryoku_text,
.color_change p.maintext {
	text-shadow: none;
}
/* 背景色変更時 ここまで */