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

/*HEAD  VISUAL*/
.head_visual .sect_title:after{
	content: "About";
}
.overview_contents .sect_title:after{
	content: "Overview";
}
.access_contents .sect_title:after{
	content: "Access";
}
.sub_visual .sect_title{
	background-image: url( "../images/main_bg01.jpg");
}
/*MAIN CONTENTS
--------------------------------------------------*/
/*MAIN ABOUT*/
.about_text{
	text-align: center;
	color: #666;
	line-height: 1.6;
}
.about_text p{
    display: inline-block;
}
.about_text p:nth-child(2){
    background: -webkit-linear-gradient(left, #fffcb0 70%, transparent 70%);
    background: -moz-linear-gradient(left, #fffcb0 70%, transparent 70%);
    background: linear-gradient(left, #fffcb0 70%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 200% .8em; 
    background-position: 140% .5em;
    -webkit-transition: 2s ease-out;
    -moz-transition: 2s ease-out;
    -ms-transition:l 2s ease-out;
    -o-transition: 2s ease-out;
    transition: 2s ease-out;
}
.about_text.active p:nth-child(2){
	background-position: 0% .5em;
}
.about_contents .floatbox div img{
	display: block;
	max-width: 300px;
}
.about_contents .floatbox div .text{
	width: calc(100% - 300px);
	height: 200px;
	text-align: left;
	background-color: #fff;
	border-top: 1px #ccc solid;
	border-bottom: 1px #ccc solid;
	padding: 6px 10px;
}
.about_contents .floatbox div:nth-child(1) .text,
.about_contents .floatbox div:nth-child(3) .text{
	border-left: 4px #f29600 solid;
}
.about_contents .floatbox div:nth-child(2) .text{
	border-right: 4px #f29600 solid;
}
.about_contents .floatbox div:nth-child(1) img,
.about_contents .floatbox div:nth-child(2) .text,
.about_contents .floatbox div:nth-child(3) img{
	float: right;
}
.about_contents .floatbox div:nth-child(1) .text,
.about_contents .floatbox div:nth-child(2) img,
.about_contents .floatbox div:nth-child(3) .text{
	float: left;
}
.about_contents .text b{
	display: block;
	letter-spacing: 1px;
	padding-bottom: 4px;
	border-bottom: 2px #e7e7e7 dashed;
}
.about_contents .text b span{
	letter-spacing: normal;
}
.about_contents .text p{
    margin-top: 4px;
}
.about_contents .text p span{
    display: inline;
}
/* OVERVIEW */
.overview_contents table{
	display: block;
	border-spacing: 0;
	width: 100%;
}
.overview_contents table th{
	font-weight: 500;
	color: #333;
	text-align: left;
	vertical-align: middle;
	border-collapse: collapse;
	border-top: 1px #ccc solid;
	width: 30%;
	padding: 20px 10px;
}
.overview_contents table td{
	text-align: left;
	border-top: 1px #ccc solid;
	width: 70%;
	padding: 20px 10px;
}
.overview_contents table tr:last-child th,
.overview_contents table tr:last-child td{
	border-bottom: 1px #ccc solid;
}
/* ACCESS */
.place_box{
	position: relative;
}
.place_box:before,
.place_box:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	background: #f29600;
}
.place_box:before,
.place_box:after{
	bottom: 0;
}
.place_box .place_name{
	box-sizing: border-box;
	text-align: center;
}
.place_box .place_name b{
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
.place_box .place_name b span{
	color: #e84653;
	font-weight: 300;
	display: block;
}
.place_box .place_name b span:before{
	content: "";
	display: block;
	height: 1px;
	background: #f29600;
}
.place_box .place_name p{
	vertical-align: bottom;
}
.place_box .place_name p:nth-child(2){
    font-weight: 500;
}
.place_box .place_name p:nth-child(3),
.place_box .place_name p:nth-child(4){
    color: #888;
}
.place_box img{
	display: none;
}
/*MEDIA QUERIES
--------------------------------------------------*/
/*pc + tablet*/
@media (min-width: 641px) {
	.floatbox .inview .text{
        -webkit-transition:all 0.8s ease-out;
        -moz-transition:all 0.8s ease-out;
        -ms-transition:all 0.8s ease-out;
        -o-transition:all 0.8s ease-out;
        transition:all 0.8s ease-out;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
	}
	.floatbox .inview .text{
		position: relative;
		z-index: 0;
	}
	.floatbox .inview img{
		position: relative;
		z-index: 3;
	}
	.floatbox .inview:nth-child(1) .text,
	.floatbox .inview:nth-child(3) .text{
        -webkit-transform: translate(100%,0);
        -moz-transform: translate(100%,0);
        -ms-transform: translate(100%,0);
		transform: translate(100%,0);
	}
	.floatbox .inview:nth-child(2) .text{
        -webkit-transform: translate(-100%,0);
        -moz-transform: translate(-100%,0);
        -ms-transform: translate(-100%,0);
		transform: translate(-100%,0);
	}
	.floatbox .inview.active .text{
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
		transform: translate(0,0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
	}
	/*OVERNIEW*/
	.overview_contents table th{
		padding-left: 18px;
	}
}
/*smartphone*/
@media (max-width: 640px) {
	/* ABOUT */
    .about_text{
		font-size: 14px;
		padding-top: 20px;
		padding-bottom: 25px;
		line-height: 1.4;
    }
	.about_text p span{
		display: inline-block;
	}
    .about_text p:nth-child(2){
        display: inline;
		font-weight: 500;
    }
	.about_contents .floatbox{
		padding-bottom: 30px;
		text-align: center;
		overflow: hidden;
	}
	.about_contents .floatbox .inview{
		margin-bottom: 15px;
	}
	.about_contents .floatbox .inview:nth-child(3){
		margin-bottom: 0;
	}
	.about_contents .floatbox div{
		position: relative;
	}
	.about_contents .floatbox div .text,
	.about_contents .floatbox div img{
		display: inline-block;
		width: 100%;
		height: auto;
		max-width: 320px;
		vertical-align: top;
	}
	.about_contents .floatbox div:nth-child(1) img,
	.about_contents .floatbox div:nth-child(2) img,
	.about_contents .floatbox div:nth-child(3) img,
	.about_contents .floatbox div:nth-child(1) .text,
	.about_contents .floatbox div:nth-child(2) .text,
	.about_contents .floatbox div:nth-child(3) .text{
		float: none;
		border: none;
	}
	.about_contents .floatbox div .text{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%,0);
		z-index: 3;
		line-height: 1.4;
		color: #fff;
		background: rgba(0,0,0,0);
		text-shadow: 1px 1px 2px rgb(82,177,124);
	}
	.about_contents .floatbox div .text b{
		font-size: 18px;
		font-weight: 500;
		border-width: 1px;
		border-color: #fff;
		text-align: center;
	}
	.about_contents .floatbox div .text p{
		font-size: 13px;
	}
	/* INVEW */
	.floatbox .inview:before,
	.floatbox .inview img,
	.floatbox .inview .text{
        -webkit-transition:all 0.8s ease-out;
        -moz-transition:all 0.8s ease-out;
        -ms-transition:all 0.8s ease-out;
        -o-transition:all 0.8s ease-out;
        transition:all 0.8s ease-out;
	}
	.floatbox .inview:before{
		position: absolute;
		content: "";
		top: 0;
		left: 50%;
		transform: translate(-50%,0);
		background: rgba(82,177,124,0);
		width: 100%;
		height: 100%;
		max-width: 320px;
	}
	.floatbox .active:before{
		background: rgba(82,177,124,0.6);
	}
	.floatbox .inview .text{
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
	}
	.floatbox .active .text{
        -webkit-opacity: 1;
        -moz-opacity: 1;
        -ms-opacity: 1;
        -o-opacity: 1;
        opacity: 1;
	}
	/* OVERVIEW */
	.overview_contents table{
		margin: 30px 0 35px 0;
	}
	/* ACCESS */
	.place_box:nth-child(1){
		margin-top: 20px;
	}
	.place_box:last-child{
		margin-bottom: 35px;
	}
	.place_box{
		margin: 10px 0;
	}
    .map_box iframe{
		display: inline-block;
        width: 100%;
		height: 240px;
    }
    .place_box .place_name b{
        font-size: 18px;
	}
    .place_box .place_name b span{
        font-size: 13px;
	}
    .place_box .place_name p:nth-child(2){
        margin-top: 6px;
        margin-bottom: 4px;
    }
    .place_box .place_name p:nth-child(2) span{
        display: block;
    }
	.place_box .place_name p:nth-child(4),
	.access_contents .wrapper .place_box:last-child .place_name p:nth-child(3){
        margin-bottom: 8px;
	}
	.place_box .place_name p:nth-child(3) span,
	.place_box .place_name p:nth-child(4) span{
		font-size: 16px;
	}
}
/*tablet*/
@media (min-width: 641px) and (max-width: 893px) {
	/* ABOUT */
    .about_text{
		font-size: 18px;
		padding-top: 35px;
		padding-bottom: 50px;
    }
	.about_text p:nth-child(2){
		font-weight: 500;
	}
	.about_contents .floatbox{
		padding-bottom: 50px;
	}
	.about_contents .floatbox .inview{
		margin-bottom: 25px;
	}
	.about_contents .floatbox .inview:nth-child(3){
		margin-bottom: 0;
	}
    .about_contents .text b{
        font-size: 20px;
    }
	.about_contents .text p{
        line-height: 1.3;
	}
    /* OVERVIEW */
    .overview_contents table{
		margin: 45px 0 50px 0;
	}
	/* ACCESS */
	.place_box:nth-child(1){
		margin-top: 25px;
	}
	.place_box:last-child{
		margin-bottom: 30px;
	}
	.place_box{
		margin: 25px 0;
	}
    .map_box iframe{
		display: inline-block;
        width: 100%;
    }
	.place_box .place_name b{
		font-size:  20px;
	}
	.place_box .place_name b span{
		font-size:  16px;
	}
    .place_box .place_name p:nth-child(2){
        margin-top: 8px;
		font-size: 16px;
    }
	.place_box .place_name p:nth-child(3),
	.place_box .place_name p:nth-child(4){
		display: inline-block;
        margin: 8px 0;
	}
	.place_box .place_name p:nth-child(4){
		margin-left: 1em;
	}
	.place_box .place_name p:nth-child(3) span,
	.place_box .place_name p:nth-child(4) span{
		font-size: 18px;
	}
}
/*PC*/
@media (min-width: 894px) {
	/* ABOUT */
    .about_text{
		font-size: 18px;
		padding-top: 50px;
		padding-bottom: 60px;
        line-height: 1.6;
		font-weight: 500;
    }
	.about_contents .floatbox{
		padding-bottom: 70px;
	}
	.about_contents .floatbox .inview{
		margin-bottom: 30px;
	}
	.about_contents .floatbox .inview:nth-child(3){
		margin-bottom: 0;
	}
    .about_contents .text b{
        font-size: 22px;
		margin-top: 6px;
    }
	.about_contents .text p{
        line-height: 1.6;
	}
	.about_contents .text p span{
		display: block;
	}
    /* OVERVIEW */
    .overview_contents table{
		margin: 50px 0 75px 0;
		font-size: 15px;
	}
	.overview_contents table th{
		width: 330px;
		padding-left: 15px;
		padding-right: 0;
	}
	.overview_contents table td{
		width: 870px;
	}
	/* ACCESS */
	.place_box:nth-child(1){
		margin-top: 50px;
	}
	.place_box:last-child{
		margin-bottom: 70px;
	}
	.place_box{
		margin: 30px 0;
	}
    .place_box:before{
        top: 0;
    }
    .map_box{
        float: right;
        width: 50%;
    }
    .place_box .place_name{
        float: left;
        text-align: left;
        width: 49%;
    }
	.place_box .place_name b{
		position: relative;
		font-size: 20px;
		padding: 10px 5px;
	}
    .place_box .place_name b span{
        float: right;
        font-weight: 500;
        font-size: 12px;
        margin-top: 8px;
    }
    .place_box .place_name b:after{
		position: absolute;
		bottom: 1px;
		left: 0;
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #f29600;
    }
	.place_box .place_name b span:before{
		display: none;
	}
	.place_box .place_name p{
		padding-left: 5px;
	}
    .place_box .place_name p:nth-child(2){
        padding-top: 15px;
        padding-bottom: 5px;
		font-size: 16px;
    }
    .place_box .place_name p:nth-child(3) span,
    .place_box .place_name p:nth-child(4) span{
		font-size: 18px;
    }
    .place_box img{
        display: inline-block;
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 0;
    }
}