@charset "UTF-8";

/*----------------------------------------



index CSS



- common

- mv







-----------------------------------------*/





main {

	font-family: 'Shippori Mincho', serif;

	font-weight: 400;

}







/*----------------------------------------

top_mv

-----------------------------------------*/

.top_mv{

	margin: 0 0 70px 0;

}

.top_mv img{

	width: 100%

}

@media only screen and (max-width: 768px){

	.top_mv{

		margin: 0 0 40px 0;

	}

}







/*----------------------------------------

top_read

-----------------------------------------*/

.top_read{

	margin: 0 auto 10px;

	max-width: 1010px;

	position: relative;

}

.top_read::before {

  content: '';

  display: inline-block;

  background-image: url(../../asset/images/top/read_bg.jpg);

  background-size: contain;

  vertical-align: middle;

  width: 242px;

  height: 242px;

	position: absolute;

	z-index: -1;

	left: 0;

	top: -10px;

}

.top_read h2{

	text-align: center;

	color: #163971;

	font-size: 25px;

	font-family: 'Shippori Mincho', serif;

	font-weight: 400;

	margin: 0 0 60px 0;

	position: relative;

}

.top_read h2::after {

  content: '';

  display: block;

  background: #333333;

  background-size: contain;

  vertical-align: middle;

  width: 75px;

  height: 1px;

	left: 50%;

	position: relative;

	top: 30px;

	margin-left: -37px;

}

.top_read p{

	text-align: center;

	font-size: 18px;

	line-height: 1.8;

	font-family: 'Shippori Mincho', serif;

	font-weight: 400;

}

@media only screen and (max-width: 768px){

	.top_read{

		margin: 0 auto 10px;

		max-width: 1010px;

		position: relative;

		padding: 0 5%;

	}

	.top_read::before {

		content: '';

		display: inline-block;

		background-image: url(../../asset/images/top/read_bg.jpg);

		background-size: contain;

		vertical-align: middle;

		width: 120px;

		height: 120px;

		position: absolute;

		z-index: -1;

		left: 0;

		top: -10px;

	}

	.top_read h2{

		text-align: center;

		color: #163971;

		font-size: 20px;

		font-family: 'Shippori Mincho', serif;

		font-weight: 400;

		margin: 0 0 40px 0;

		position: relative;

		line-height: 1.5;

	}

	.top_read h2::after {

		content: '';

		display: block;

		background: #333333;

		background-size: contain;

		vertical-align: middle;

		width: 75px;

		height: 1px;

		left: 50%;

		position: relative;

		top: 15px;

		margin-left: -37px;

	}

	.top_read p{

		text-align: left;

		font-size: 16px;

		line-height: 1.6;

		font-family: 'Shippori Mincho', serif;

		font-weight: 400;

	}

}







/*----------------------------------------

top_navi

-----------------------------------------*/

.top_navi{

	padding: 50px 0 40px;

	max-width: 1100px;

	position: relative;

	margin: 0 auto;

}

.top_navi h3{

	text-align: center;

	color: #333333;

	font-size: 25px;

	font-weight: 400;



	margin: 0 0 30px 0;

	position: relative;

}

.top_navi h3::after {

  content: '';

  display: block;

  background: #333333;

  background-size: contain;

  vertical-align: middle;

  width: 50px;

  height: 1px;

	left: 50%;

	position: relative;

	top: 15px;

	margin-left: -25px;

}

.top_navi .txt1 {

	text-align: center;

	font-size: 16px;

	margin: 0 0 30px 0;

	line-height: 1.8;

}

.top_navi ul {

	text-align: center;

}

.top_navi ul li {

	display: inline-block;

	max-width: 337px;

	margin: 0 25px;

}

.top_navi ul li h4 {

	margin-bottom: 15px;

}

.top_navi ul li h4 span {

	text-align: center;

	color: #1D6B99;

	margin-bottom: 15px;

	font-size: 20px;

	font-weight: 400;

}

.top_navi ul li h4 span.racine::before {

  content: '';

  display: inline-block;

  background: url(../../asset/images/top/racine_logo.jpg);

  background-size: contain;

  vertical-align: middle;

  width: 117px;

  height: 37px;

	margin-right: 10px;

}

.top_navi ul li h4 span.crest::before {

  content: '';

  display: inline-block;

  background: url(../../asset/images/top/crest_logo.jpg);

  background-size: contain;

  vertical-align: middle;

  width: 82px;

  height: 39px;

	margin-right: 10px;

}

.top_navi ul li h4 span.rafine::before {

  content: '';

  display: inline-block;

  background: url(../../asset/images/top/rafine_logo.jpg);

  background-size: contain;

  vertical-align: middle;

  width: 45px;

  height: 33px;

	margin-right: 10px;

}

.top_navi ul li h4 span.cleseal::before {

  content: '';

  display: inline-block;

  background: url(../../asset/images/top/cleseal_logo.jpg);

  background-size: contain;

  vertical-align: middle;

  width: 60px;

  height: 44px;

	margin-right: 10px;

}



.top_navi ul li .box {

	border: #333333 solid 1px;

	margin: 0 0 38px 0;

}

.top_navi ul li .box .img {

	margin: 0 0 15px 0;

}

.top_navi ul li .box .name {

	margin: 0 0 15px 0;

	font-size: 20px;

}

.top_navi .btn {

	max-width: 252px;

	margin: 0 auto 0;

	display:block;

	background: #333333 url(../../asset/images/top/arrow.png) no-repeat 95% center;

	color: #FFF;

	padding: 12px 0;

	background-size: 8px 14px;

	text-align: center;

}



@media only screen and (max-width: 768px){

	.top_navi{

		padding: 30px 5% 40px;

		max-width: 1100px;

		position: relative;

		margin: 0 auto;

	}

	.top_navi h3{

		text-align: center;

		color: #333333;

		font-size: 20px;

		font-weight: 400;

		margin: 0 0 30px 0;

		position: relative;

	}

	.top_navi h3::after {

		content: '';

		display: block;

		background: #333333;

		background-size: contain;

		vertical-align: middle;

		width: 50px;

		height: 1px;

		left: 50%;

		position: relative;

		top: 15px;

		margin-left: -25px;

	}

	.top_navi .txt1 {

		text-align: left;

		font-size: 15px;

		margin: 0 0 25px 0;

		line-height: 1.8;

	}

	.top_navi ul {

		text-align: center;

	}

	.top_navi ul li {

		display: inline-block;

		max-width: 337px;

		margin: 0 25px;

	}

	.top_navi ul li h4 {

		margin-bottom: 15px;

	}

	.top_navi ul li h4 span {

		text-align: center;

		color: #1D6B99;

		margin-bottom: 15px;

		font-size: 18px;

		font-weight: 400;

	}

	.top_navi ul li h4 span.racine::before {

		content: '';

		display: inline-block;

		background: url(../../asset/images/top/racine_logo.jpg);

		background-size: contain;

		vertical-align: middle;

		width: 117px;

		height: 37px;

		margin-right: 10px;

	}

	.top_navi ul li h4 span.crest::before {

		content: '';

		display: inline-block;

		background: url(../../asset/images/top/crest_logo.jpg);

		background-size: contain;

		vertical-align: middle;

		width: 82px;

		height: 39px;

		margin-right: 10px;

	}

	.top_navi ul li h4 span.rafine::before {

		content: '';

		display: inline-block;

		background: url(../../asset/images/top/rafine_logo.jpg);

		background-size: contain;

		vertical-align: middle;

		width: 45px;

		height: 33px;

		margin-right: 10px;

	}

	.top_navi ul li h4 span.cleseal::before {

		content: '';

		display: inline-block;

		background: url(../../asset/images/top/cleseal_logo.jpg);

		background-size: contain;

		vertical-align: middle;

		width: 60px;

		height: 44px;

		margin-right: 10px;

	}



	.top_navi ul li .box {

		border: #333333 solid 1px;

		margin: 0 0 30px 0;

	}

	.top_navi ul li .box .img {

		margin: 0 0 15px 0;

	}

	.top_navi ul li .box .name {

		margin: 0 0 15px 0;

		font-size: 20px;

	}

	.top_navi .btn {

		max-width: 90%;

		margin: 0 auto 0;

		display:block;

		background: #333333 url(../../asset/images/top/arrow.png) no-repeat 95% center;

		color: #FFF;

		padding: 14px 0;

		background-size: 8px 14px;

		text-align: center;

	}



}