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

.under_ttl_inner {
	background:url(../img/satomi1/ttl_bg.png);
	background-size: cover;
}

.under_ttl{
 background: #f8f8f8;
}

.under_content h3{
	margin-bottom: 40px;
}
.gallery_area {
	margin-bottom: 60px;
}
.gallery_left {
	width: 480px;
	float: left;
}
.gallery_left ul li:hover{
	cursor:pointer;
}
.gallery_left ul li:not(:last-of-type) {
	float: left;
	margin-right: 20px;
}
#gallery_main {
	margin-bottom: 20px;
}

#gallery_main img{
	width:100%;
}

.gallery_right {
	margin-left: 40px;
	float: left;
}
.gallery_right section h4 {
	color: #c03738;
	margin-bottom: 8px;
}
.gallery_right section {
	margin-bottom: 20px;
}
.concept_area > div {
	width: 500px;
	float: left;
	margin-bottom: 60px;
}
.concept_area > div:nth-of-type(2n) {
	margin-left: 80px;
}
.concept_area > div section h4 {
	font-family: Helvetica, sans-serif, Arial;
	font-size: 2.2rem;
}
.concept_area > div section h4 span {
	background: #e6e6e6;
	width: 37px;
	height: 37px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}
.concept_area > div:nth-of-type(1) section h4 span {
	color: #ca3839;
}
.concept_area > div:nth-of-type(2) section h4 span {
	color: #113e5a;
}
.concept_area > div:nth-of-type(3) section h4 span {
	color: #8e268e;
}
.concept_area > div:nth-of-type(4) section h4 span {
	color: #0e7026;
}
.concept_area > div section p {
	margin-top: 10px;
	font-size: 1.4rem;
	padding-bottom: 10px;
}
.floorplan_box {
	margin-bottom: 50px;
}
.floorplan_box >div:first-of-type {
	width: 520px;
	float: left;
	border: #e6e6e6 1px solid;
	position: relative;
	height: 240px;
}
.floorplan_box >div:first-of-type > section {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
}
.floorplan_box >div:first-of-type > section p {
	padding-left: 100px;
}


.floorplan_box >div:first-of-type > section h6 span {
	color: #ca3839;
	font-size: 2rem;
}
.floorplan_box >div:last-of-type {
	float: left;
	margin-left: 40px;
	padding-top: 15px;
}

.gmap{
	width:520px;
	height:240px;
	float:left;
	border:1px solid #dadada;
}

.gmap iframe{
	height: 100%;
	width:100%;
}

.access_right{
	position: relative;
	width:520px;
	height:240px;
	text-align: center;
	float: left;
	border:1px solid #dadada;
	margin-left: 40px;
}

.access_right p{
	position: absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.facility_content{
	padding:0 45px;
}

.facility_content > div:first-of-type{
	margin-bottom: 60px;
}

.facility_list li{
	float:left;
	width:470px;
	padding:40px;
	border:#e6e6e6 1px solid;
	margin-bottom: 68px;
	position:relative;
}

.facility_list .list_number{
	display:inline-block;
	width:54px;
	height:54px;
	line-height: 54px;
	border-radius:27px;
	background:#ca3839;
	text-align: center;
	color:#fff;
	font-size: 2.7rem;
	position:absolute;
	top:-27px;
	left:-27px;
}

.facility_list li > div{
	float: left;
}

.facility_list li > section{
	float: left;
	margin-left:30px;
	width:218px;
}

.facility_list li > section h5{
	margin-bottom: 9px;
}

.facility_list li > section h5 span:first-of-type{
	font-size: 2rem;
	color:#ca3839;
	font-family: Helvetica,Arial, sans-serif;
}

.facility_list li > section h5 span:last-of-type{
	color:#999;
	font-size:1.3rem;
	margin-left: 20px;
}

.facility_list li > section p{
	font-size: 1.4rem;
}

.facility_list li:nth-of-type(2n){
	margin-left: 50px;
}

@media screen and (max-width: 798px) {
	
.floorplan_box >div:first-of-type > section h6{
	position: static;
}
	
	
.gallery_left{
	width:100%;
	float: none;
}
	
#gallery_main img{
	width:100%;
}

.gallery_left{
	margin-bottom: 30px;
}

.gallery_right section h4{
	margin-bottom: 10px;
}

.gallery_left ul li{
	width:20%;
	float:left;
}

.gallery_left ul li img{
	width:100%;
}

.gallery_left ul li:not(:last-of-type){
	margin-right: 6.6%;
}

.gallery_right{
	float: none;
	margin-left: 0;
}
	
.concept_area > div{
	width:100%;
	float: none;
	margin-bottom: 30px;
}

.concept_area > div p img{
	width:100%;
}

.concept_area > div:nth-of-type(2n){
	margin-left: 0;
}

.floorplan_box >div:first-of-type{
	width:80%;
	float:none;
	margin:0 auto 15px;
	height:auto;
}

.floorplan_box >div:first-of-type > section{
	position:static;
	-webkit-transform:none;
	transform:none;
	padding:10px;
}

.floorplan_box >div:last-of-type{
	float:none;
	margin:0 auto 30px;
	width:80%;
}

.floorplan_box >div:last-of-type img{
	width:100%;
}

.floorplan_box{
	margin-bottom: 0;
}

.facility_content{
	padding:0;
}

.facility_content > div:first-of-type img{
	width:100%;
}

.facility_list li {
    float: none;
    width: 100%;
    padding: 40px 20px 20px;
    margin-bottom: 50px;   
}

.facility_list li > div{
	float: none;
	text-align:center;	
}

.facility_list li > section {
    float: none;
    margin-left: 0;
    width: 100%;
}

.facility_list .list_number{
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}

.facility_list li:nth-of-type(2n){
	margin-left: 0;
}

.concept_area > div section h4 span{
	margin-right: 5px;
}

.concept_area > div section p{
	padding-left: 0;
}

.gmap{
	width:100%;
	float: none;
	margin-bottom:30px;
}

.access_right{
	width: 100%;
	float:none;
	margin-left:0;
	height:auto;
	padding:10px;
}
	
.access_right p{
	position: static;
	-webkit-transform:none;
	transform:none;
}

.floorplan_box >div:first-of-type > section p {
	padding-left: 0;
}
.floorplan_box >div:first-of-type > section {
	width: 100%;
}
	
}