@charset "UTF-8";

/* ▼▼▼ 施設案内
======================================================*/
.read_wrap h3.title_gold{
	/* color: #000; */
	text-align: center;
}
#about_area{
	padding-bottom: 130px;
}
.about_wrap_list li{
	padding-top: 120px;
	position: relative;
}
.about_wrap_list li:not(:last-child){
	margin-bottom: 70px;
}
.about_wrap_list li::before{
	content: '';
	width: calc(50vw + 317px);
	height: calc(100% - 120px);
	background: #F7F6F4;
	position: absolute;
	bottom: 0;
	z-index: 0;
}
.about_wrap_list li:nth-child(2n+1)::before{
	left: 0;
}
.about_wrap_list li:nth-child(2n)::before{
	right: 0;
}
.about_wrap_list li .img_wrap{
	width: calc(50vw + 97px);
	position: absolute;
	top: 0;
	z-index: 2;
}
.about_wrap_list li:nth-child(2n+1) .img_wrap{
	right: 0;
}
.about_wrap_list li:nth-child(2n) .img_wrap{
	left: 0;
}
.about_wrap_list li .txt_wrap{
	max-width: 1040px;
	margin: 0 auto;
	padding: 90px 20px 100px;
}
.about_wrap_list li .txt_inner{
	max-width: 34%;
	position: relative;
	z-index: 1;
}
.about_wrap_list li:nth-child(2n+1) .txt_inner{
	margin: 0 auto 0 0;
}
.about_wrap_list li:nth-child(2n) .txt_inner{
	margin: 0 0 0 auto;
}
.about_wrap_list h3.title_gold{
	margin-bottom: 30px;
}
.about_wrap_list h3.title_gold .about_title_sub{
	display: block;
	color: #000;
	font-size: 20px;
	font-weight: 400;
}
/* 上野芝マップ */
.uenoshiba_map{
	margin-bottom: 50px;
}
.uenoshiba_map_title{
	max-width: 941px;
	margin: 0 auto 40px;
}
.uenoshiba_map_read{
	margin: 0 auto 40px;
	font-size: 24px;
	font-weight: 600;
}
.uenoshiba_map_img{
	max-width: 978px;
	margin: 0 auto;
}
/* 神戸青谷360°動画 */
.movie360_area{
	max-width: 1000px;
	padding: 0 20px;
	margin: 0 auto 100px;
	text-align: center;
}
.movie360_wrap{
	width: 100%;
	padding-top: 78.125%;
	position: relative;
}
.movie360_wrap iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#faci_area,#regi_area{
	padding: 0 0 90px;
}
.read_wrap{
	margin-bottom: 60px;
}
.read_wrap p{
	font-size: 18px;
	text-align: center;
}
.read_wrap p:not(:last-child){
	margin-bottom: 40px;
}
.read_wrap p.ta_l{
	text-align: left;
}
.list_wrap .faci_list{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.list_wrap .faci_list li{
	-webkit-flex: 0 0 48%;
	-ms-flex: 0 0 48%;
	flex: 0 0 48%;
	width: 48%;
	max-width: 48%;
	margin-bottom: 40px;
}
.list_wrap .faci_list li p{
	padding: 5px 0 0;
	font-size: 20px;
}

/* 成城　お客様の声 */
#voice{
	margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
	#voice{
		margin-bottom: 50px;
	}
  }
  #voice .slider {
	position: relative;
	z-index: 1;
  }
  #voice .slider:before {
	content: "";
	width: 100vw;
	height: 80%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	background-color: #F7F6F4;
	z-index: -1;
  }
  @media screen and (max-width: 768px) {
	#voice .slider:before {
	  height: 65%;
	}
  }
  /* #voice .slider .slick-prev {
	left: -16px;
  }
  #voice .slider .slick-next {
	right: -16px;
  } */
  #voice .slider li.slide {
	padding: 10px;
  }
  #voice .slider li.slide .outer {
	border: solid 1px #B9B9B9;
	background-color: #fff;
	border-radius: 20px;
	padding: 45px 50px;
	box-shadow: 0px 5px 7px -1px rgba(120, 120, 120, 0.6);
  }
  @media screen and (max-width: 768px) {
	#voice .slider li.slide .outer {
	  padding: 30px 15px;
	  border-radius: 10px;
	}
  }
  #voice .slider li.slide .outer .inner {
	display: flex;
	align-items: center;
  }
  @media screen and (max-width: 768px) {
	#voice .slider li.slide .outer .inner {
	  display: block;
	}
  }
  /* #voice .slider li.slide .outer .inner .pic {
	width: 280px;
	flex-shrink: 0;
	margin-right: 45px;
  }
  @media screen and (max-width: 991px) {
	#voice .slider li.slide .outer .inner .pic {
	  margin-right: 25px;
	}
  }
  @media screen and (max-width: 768px) {
	#voice .slider li.slide .outer .inner .pic {
	  margin: 0 auto;
	  width: 200px;
	  max-width: 100%;
	}
  } */
  #voice .slider li.slide .outer .inner h3 {
	font-size: 1.4rem;
	font-weight: 600;
	color: #7B5B06;
  }
  @media screen and (max-width: 768px) {
	#voice .slider li.slide .outer .inner h3 {
	  padding-top: 15px;
	}
  }
  #voice .slider li.slide .outer .inner p {
	padding: 30px 0;
  }
  @media screen and (max-width: 768px) {
	#voice .slider li.slide .outer .inner p {
	  padding: 12px 0 0;
	}
  }
  #voice .slider li.slide .outer .inner .name {
	text-align: right;
  }
  #voice .slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    font-size: 0 !important;
    opacity: 1 !important;
    border: 1px solid #4A4949;
    border-radius: 50%;
    width: 10px !important;
    height: 10px !important;
    line-height: 10px !important;
    text-align: center;
	background-color: #E6E6E6;
	border: solid 1px #A2A2A2;
  }
  #voice .slick-dots .slick-active button:before {
	background-color: #917526;
	border: solid 1px #A2A2A2;
  }
  #voice .slick-arrow {
	background-color: #7B5B06;
	height: 95px;
	width: 27px;
	transition: 0.3s;
  }
  #voice .slick-arrow:hover {
	opacity: 0.7;
  }
  #voice .slick-arrow.slick-prev:before {
	content: url(../img/ic_slide_arw_right.svg) !important;
	width: 10px;
  }
  #voice .slick-arrow.slick-next:before {
	content: url(../img/ic_slide_arw_left.svg) !important;
	border-style: none !important;
	position: static !important;
  }

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {

	#about_area{
		padding-bottom: 50px;
	}
	.about_wrap_list li{
		padding-top: 0;
		position: relative;
	}
	.about_wrap_list li:not(:last-child){
		margin-bottom: 30px;
	}
	.about_wrap_list li::before{
		width: calc(100vw - 20px);
		height: calc(100% - 50px);
	}
	.about_wrap_list li .img_wrap{
		width: calc(100vw - 20px);
		position: relative;
	}
	.about_wrap_list li:nth-child(2n+1) .img_wrap{
		margin: 0 0 0 auto;
		right: auto;
	}
	.about_wrap_list li:nth-child(2n) .img_wrap{
		margin: 0 auto 0 0;
		left: auto;
	}
	.about_wrap_list li .txt_wrap{
		padding: 20px 20px 30px;
	}
	.about_wrap_list li .txt_inner{
		max-width: calc(100% - 20px);
	}
	.about_wrap_list h3.title_gold{
		margin-bottom: 15px;
	}
	.about_wrap_list h3.title_gold .about_title_sub{
		font-size: 14px;
	}

	/* 上野芝マップ */
	.uenoshiba_map{
		margin-bottom: 50px;
	}
	.uenoshiba_map_title{
		margin: 0 auto 20px;
	}
	.uenoshiba_map_read{
		margin: 0 auto 20px;
		font-size: 16px;
	}
	/* 神戸青谷360°動画 */
	.movie360_area{
		margin: 0 auto 50px;
	}

	#faci_area,#regi_area{
		padding: 0 0 30px;
	}
	.read_wrap{
		margin-bottom: 40px;
	}
	.read_wrap p{
		font-size: 16px;
	}
	.read_wrap p:not(:last-child){
		margin-bottom:20px;
	}
	.list_wrap .faci_list{
		display: block;
	}
	.list_wrap .faci_list li{
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	.list_wrap .faci_list li p{
		padding: 5px 0 0;
		font-size: 16px;
	}
	.white_box:not(:last-of-type){
		margin-bottom: 20px!important;
	}

}


/* 施設長からのご挨拶 */

#message_area {
	margin-bottom: 100px;
}

#message_area .message_box {
	border: solid 1px #B9B9B9;
    background-color: #fff;
    border-radius: 20px;
    padding: 45px 50px;
}

#message_area .message_box {
	background-color: #fff;
}

#message_area .message_box.messeage_02 {
	background-color: #BEAC71;
}

#message_area .message_box .d_flex {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
}
#message_area .message_box .d_flex .messageImg {
	width: 25%;
}

#message_area .message_box .d_flex .messageImg p {
	text-align: center;
	font-size: 18px;
	margin-top: .8rem;
}

#message_area .message_box .d_flex .messageImg span {
	font-size: 16px;
	display: block;
	text-align: center;
}

#message_area .message_box .d_flex .messageTxt {
	width: 68%;
}

#message_area .message_box .d_flex .messageTxt p {
	font-size: 16px;
}

@media screen and (max-width: 768px) { 
	#message_area {
		margin-bottom: 50px;
	}
	#message_area .message_box { 
		padding: 30px 15px;
        border-radius: 10px;
	}
	#message_area .message_box .d_flex .messageImg {
		width: 100%;
	}
	#message_area .message_box .d_flex .messageImg img {
		width: 100%;
		max-width: 180px;
		margin: 0 auto;
		display: block;
	}
	#message_area .message_box .d_flex .messageTxt {
		margin-top: 1rem;
		width: 100%;
	}
	
}


/*______________________________________ black_base_____
________________________________________________________ */
#guide.black_base #main {
	background-color: #000;
}
.black_base .header_btm #h_logo_facility,
.black_base h2.title_str,
.black_base .read_wrap h3.title_gold,
.black_base .read_wrap p.ta_l,
.black_base #faci_area,
.black_base #regi_area p,
.black_base #regi_area .title_under,
.black_base .about_title_sub,
.black_base .comment_wrap p {
	color: #fff;
}
.black_base h3.title_under {
	border-bottom: solid 1px #CBAF71;
	color: #CBAF71 !important;
}
.black_base .faci_slider_wrap {
	background-color: #fff;
}
.black_base .about_title_sub {
	color: #CBAF71;
}
.black_base .read_wrap h3.title_gold {
	color: #CBAF71;
}
.black_base #about_area .dot_list li a {
	color: #fff;
}
.black_base .color_wrap::before {
	background-color: #222222;
}