@charset "UTF-8";
/* CSS Document */

/************************************************
coordinate_top.css 201804 EC
************************************************ */
.coordinate201709{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.coordinate201709 a:hover{
	opacity: 0.6;
}
.intro-box{
	margin: 0 auto 20px;
}
.intro{
	width: 740px;
	margin: auto;
}
.intro h3{
	font-size: 58px ;
	font-weight: 400;
	font-family: 'Jaldi', sans-serif;
	padding: 60px 0 40px;
	color: #000;
}
.intro ul{
 	margin: auto;
	margin-bottom: 40px;
}
.intro li {
	display: inline-block;
 	text-align: center;
}
.intro li img {
	width: 180px;
	height: auto;
}
.intro p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 30px;
	color: #000;
}
.intro p:nth-of-type(2) {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
}
.item-box{
	margin: 0 auto 40px;
}
.item-box .item{
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 30px;
}
.item-box .item .flL{
	width: 50%;
}
.item-box .item .flR{
	width: 50%;
	position: relative;
	text-align: left;
	padding: 50px 40px 20px;
	box-sizing: border-box;
}
#simple{
	background-color: #E7F4FB;
}
#natural{
	background-color: #EDF4EB;
}
#cafe{
	background-color: #F5EBDD;
}
#resort .flR{
	background-color: #F0E7F0;
}

.item-box .item .flR h4{
	font-size: 40px ;
	font-weight: 400;
	font-family: 'Jaldi', sans-serif;
	margin-bottom: 30px;
}
.item-box .item .flR p{
	font-size: 13px ;
	font-weight: 400;
	line-height: 1.6;
}
.item-box .item .flR p:nth-of-type(2){
	position: absolute;
	bottom: 24px;
	right: 24px;
	font-size: 13px ;
	font-weight: 400;
	margin-top: 20px;
	text-align: right;
}
.item-box .item .flR p a {
	display: inline-block;
	position: relative;
	width: 280px; height: 36px;
	box-sizing: border-box;
	border: 1px solid #000;
	text-decoration: none;
	text-align: center;
	letter-spacing: .02em;
	line-height: 36px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	color: #000;
	background: #fff;
}
.item-box .item .flR p a:before,
.item-box .item .flR p a:after {
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}
.item-box .item .flR p a:before {
	content: "";
	position: absolute;
	bottom: -4px; right: -4px;
	width: 280px; height: 1px;
	background: #000;
}
.item-box .item .flR p a:after {
	content: "";
	position: absolute;
	bottom: -4px; right: -4px;
	width: 1px; height: 36px;
	background: #000;
}
.item-box .item .flR .btn01 a:hover {
	background:  #5898B9;
	border-color: #5898B9;
	color: #fff;
}
.item-box .item .flR .btn01 a:hover:before,
.item-box .item .flR .btn01 a:hover:after {
	background: #5898B9;
}

.item-box .item .flR .btn02  a:hover {
	background-color: #88C780;
	border-color: #88C780;
	color: #fff;
}
.item-box .item .flR .btn02 a:hover:before,
.item-box .item .flR .btn02 a:hover:after {
		background: #D8A9D8;
}
	
.item-box .item .flR .btn03  a:hover {
	background-color: #D8A9D8;
	border-color: #D8A9D8;
	color: #fff;
}
.item-box .item .flR .btn03 a:hover:before,
.item-box .item .flR .btn03 a:hover:after {
	background-color: #D8A9D8;
}
.item-box .item .flR .btn04  a:hover {
	background-color: #DD9B40;
	border-color: #DD9B40;
	color: #fff;
}
.item-box .item .flR .btn04 a:hover:before,
.item-box .item .flR .btn04 a:hover:after {
	background-color: #DD9B40;
}

.list_item_box .l-data p.l-itemname{
	margin-top: 4px;
	text-align: center;
}
.list_item_box .l-data p{
	border-bottom: none;
}
.list_item_box .l-data{
	border-bottom: none;
}



@media screen and (max-width: 896px){
	
.coordinate201709 {
		width: 100%;
	}
.coordinate201709 p{
		font-size: 13px;
		line-height: 1.4;
		margin: 0;
		padding: 0;
	}

.intro-box{
	margin: 0 auto;
}
.intro{
	width: 100%;
	margin: auto;
}
.intro h3{
	font-size: 2.4em ;
	font-weight: 400;
	padding: 0;
	margin-bottom: 10px;
}
.intro ul{
 	margin: auto;
	padding: 0 3%;
	margin-bottom:14px;
}
.intro li {
	width: 50%;
	max-width: 180px;
	box-sizing: border-box;
	padding-bottom: 6px;
}
.intro li img {
	width: auto;
	height: auto;
}
.intro p {
	font-size: 1em;
	line-height: 1.5;
	padding: 0 2%;
	margin-bottom: 10px;
	text-align: left;
}
.intro p:nth-of-type(2) {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 14px;
}

.item-box{
	margin: 0 auto 40px;
}
.item-box .item{
	margin-bottom: 10px;
}
.item-box .item .flL {
	width: 100%;
	height: auto;
	margin: 0;
}
.item-box .item .flL img{
	width: 100%;
	height: auto;
}
.item-box .item .flR{
	position: relative;
	width: 100%;
	height: auto;
	text-align: left;
	padding: 20px;
}
.item-box .item .flR h4{
	font-size: 2.4em ;
	margin-bottom: 10px;
}
.item-box .item .flR p{
	font-size: 1em ;
	font-weight: 400;
	line-height: 1.6;
}
.item-box .item .flR br{
	display: none;
}
.item-box .item .flR p:nth-of-type(2){
	position: static;
	font-size: .8em ;
	font-weight: 600;
	margin-top: 10px;
	text-align: center ;
}
.item-box .item .flR p a {
	display: inline-block;
	position: relative;
	width: 240px; height: 32px;
	line-height: 32px;

}
.item-box .item .flR p a:before {
	width: 240px; height: 1px;
}
.item-box .item .flR p a:after {
	width: 1px; height: 32px;
}
	
	
}

@media screen and (max-width: 680px){ /*スマホ*/
	
	.intro{
		width: 100%;
		height: auto;
		margin: 0 auto 10px;
	}

	
	
}