@charset "utf-8";

/***************************************************************************
*
* KAKI STYLE
*
***************************************************************************/
/*#main*/



/*#content*/
/*.areaIntro*/
.areaIntro .introTitle {
	font-size: 28px;
	text-align: center;
}
.areaIntro .introLogo {
	width: 352px;
	margin: 29px auto 0;
}
.areaIntro .introSub {
	font-size: 16px;
	text-align: center;
	margin-top: 21px;
}
.areaIntro .introBanner {
	margin-top: 49px;
}
.areaIntro .introBanner img {
	width: 100%;
}
/*areaIntro*/

/*areaLive*/
.areaLive {
	margin-top: 38px;
}
.areaLive .liveTitle {
	font-size: 32px;
	color: #170505;
	text-align: center;
}
.areaLive .liveSub {
	font-size: 16px;
	margin-top: 33px;
	text-align: center;
	line-height: 32px;
}
.areaLive .cmBtn {
	width: 530px;
	margin: 49px auto 0;
}
.areaLive .cmBtn a {
	display: block;
	position: relative;
	background: #003555;
	font-size: 16px;
	color: #fff;
	text-align: center;
	padding: 28px 0;
}
.areaLive .cmBtn a:before {
	content: '';
	position: absolute;
	width: 36px;
	height: 30px;
	top: 53%;
	left: 135px;
	transform: translateY(-50%);
	background: url(../img/kaki/menu_icon.svg) no-repeat left center;
	background-size: 100%;
}
.areaLive .liveWrap {
	margin-top: 57px;
}
.areaLive .liveLeft {
	float: left;
	width: 528px;
}
.areaLive .liveLeft .leftTitle {
	font-size: 24px;
}
.areaLive .liveLeft .leftSub {
	font-size: 16px;
	line-height: 32px;
	margin-top: 9px;
}
.areaLive .liveLeft .leftPhoto {
	width: 373px;
	margin-top: 24px;
	margin-left: 45px;
}
.areaLive .liveRight {
	float: right;
	width: 528px;
}


/*areaInfomation*/
.areaInfomation {
	margin-top: 9px;
}

.infoBanner {
	margin-top: 78px;
}
.infoBanner img {
	width: 100%;
}
/*areaInfomation*/

/*areaOyster*/
.areaOyster {
	margin-top: 38px;
}
.areaOyster .oysList {
	margin-top: 76px;
}
.areaOyster .oysList li {
	float: left;
	position: relative;
	width: 341px;
	min-height: 308px;
	text-align: center;
	padding: 20px 20px;
	margin-right: 38px;
	margin-bottom: 58px;
	background: #EEF7FA;
}
.areaOyster .oysList li:nth-child(3n) {
	margin-right: 0;
}
.areaOyster .oysList li .oysNumber {
	position: absolute;
	top: -35px;
	left: 50%;
	width: 70px;
	height: 70px;
	font-size: 18px;
	background: #fff;
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	font-weight: bold;
}
.areaOyster .oysList li .oysNumber span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.areaOyster .oysList li .oysSub {
	line-height: 20px;
	margin-top: 11px;
}
.areaOyster .cmBtn {
	margin-top: 0;
}
/*areaOyster*/

/*.areaGallery*/
.areaGallery {
	margin-top: 81px;
}
.areaGallery .gallerySlide {
	margin-top: 54px;
}
.areaGallery .gallerySlide img {
	width: 100%;
}
/*areaGallery*/

/*areaFaq*/
.areaFaq {
	margin-top: 104px;
}
.areaFaq .listQuestion{
	margin-top: 54px;
}
/*areaFaq*/
.areaAccess {
	margin-top: 0;
}


/*SP STYLE*/
@media (max-width: 768px) {
	/*#main*/
	#main .mainTitle {
		width: 145px;
	}
	/*#main*/
	#content {
		margin-top: 0;
	}
	.areaAccess {
		margin-top: 30px;
	}
	/*areaIntro*/
	.areaIntro .introTitle {
		font-size: 24px;
	}
	.areaIntro .introLogo {
		width: 90%;
		margin: 30px auto 0;
	}
	.areaIntro .introBanner {
		margin-top: 30px;
	}
	/*areaIntro*/

	/*areaLive*/
	.areaLive {
		margin-top: 30px;
	}
	.areaLive .liveTitle {
		font-size: 24px;
	}
	.areaLive .liveSub {
		margin-top: 20px;
		line-height: 25px;
	}
	.areaLive .cmBtn {
		width: 100%;
		margin: 30px auto 0;
	}
	.areaLive .cmBtn a {
		padding: 20px 0;
	}
	.areaLive .cmBtn a:before {
		position: static;
		display: inline-block;
		vertical-align: middle;
		top: auto;
		left: auto;
		transform: none;
		margin-right: 5%;
	}
	.areaLive .liveWrap {
		margin-top: 30px;
	}
	.areaLive .liveLeft .leftTitle {
		font-size: 20px;
		text-align: center;
	}
	.areaLive .liveLeft .leftSub {
		line-height: 25px;
		margin-top: 15px;
	}
	.areaLive .liveLeft .leftPhoto {
		margin: 30px auto 0;
		width: 90%;
	}
	.areaLive .liveLeft,
	.areaLive .liveRight {
		width: 100%;
	}
	.areaLive .liveRight {
		margin-top: 30px;
	}
	/*areaLive*/

	/*.areaInfomation*/
	.areaInfomation {
		margin-top: 30px;
	}
	.areaInfomation .btnPhone {
		margin-top: 15px;
	}
	
	.infoBanner {
		margin-top: 30px;
	}
	
	/*areaOyster*/
	.areaOyster {
		margin-top: 30px;
	}
	.areaOyster .oysList {
		margin-top: 60px;
	}
	.areaOyster .oysList li {
		width: 100%;
		min-height: 308px;
		padding: 20px 20px;
		margin-right: 0;
		margin-bottom: 60px;
	}
	/*areaOyster*/
	
	/*areaGallery*/
	.areaGallery {
		margin-top: 30px;
	}
	.areaGallery .gallerySlide {
		margin-top: 30px;
	}
	/*areaGallery*/

	/*areaFaq*/
	.areaFaq {
		margin-top: 30px;
	}
	.areaFaq .listQuestion li {
		width: 100%;
		margin-right: 0;
		padding: 50px 17px 28px;
	}
	.areaFaq .listQuestion li .text {
		padding-top: 0;
	}
	.areaFaq .listQuestion li .questTitle{
		font-size: 17px;
		margin-bottom: 20px;
	}
	/*areaFaq*/

	/*areaAccess*/
	.areaAccess .infoFrame {
		width: 100%;
	}
	.areaAccess .tableWrap {
		width: 100%;
	}
	.infoFrame,
	.infoTable {
		width: 100%;
	}
	.tableWrap {
		width: 100%;
		margin: 0;
	}
	.areaAccess .btnPhone {
		margin-top: 15px;
	}
	.cmBtn {
		width: 100%;
	}
}