@charset "utf-8";

/*

トップページ用のスタイルです。

*/

/* ------------ */
/* デザイン共通 */
/* ------------ */




/* -------------- */
/* メインビジュアル */
/* ------------- */

#main_visual{
	width:100%;
	position:relative;
	overflow: hidden;
}
/* #main_catch{display:none;} */
#main_visual .main_catch {
/*	position:relative;*/
	z-index:5;
}
#main_visual iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	height: calc(100% + 118%);
}
#main_visual p{
	position: relative;
	z-index: 7;
	text-align: center;
	vertical-align: middle;
	color:#fff;
	font-weight: normal;
	font-family:"游明朝", YuMincho,  "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.2;
}

#main_visual p span{
	display:inline-block;
	padding:10px;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	background:#27455b;
}

@media print,screen and (max-width:767px) {
	#main_visual { height:300px; }
	#main_visual .main_visual_inner{max-height:300px;}
	#main_visual p{
		padding-top:80px;
		font-size:30px;
	}
	#main_visual p span{font-size:10px;}
}

@media print,screen and (min-width:768px) {
	#main_visual{height:660px;}
	#main_visual .main_visual_inner{max-height:660px;}
	#main_visual p{
		padding-top:250px;
		font-size:54px;
	}
	#main_visual p span{font-size:18px;}
}


/* --------------- */
/* pickup_contents */
/* --------------- */

.pickup_contents{background:#f2f2f2;}

.pickup_contents a{
	text-align: center;
	line-height: 1;
	z-index:5;
}
/*
.point1{
	background:url(images/service_img_1.jpg) no-repeat center;
	background-size:cover;
}

.point2{
	background:url(images/service_img_2.jpg) no-repeat center;
	background-size:cover;
}
.point3{
	background:url(images/service_img_3.jpg) no-repeat center;
	background-size:cover;
}
*/
.pickup_contents > li {
	position:relative;
	list-style:none;
	background:url(images/home/pickup_sample.jpg) no-repeat center;
	background-size:cover;
}

.pickup_contents > li a > p::before,
.pickup_contents > li a > p::after{display: block;}
.pickup_contents .point1 a > p::before{content:"01."}
.pickup_contents .point2 a > p::before{content:"02."}
.pickup_contents .point3 a > p::before{content:"03."}
.pickup_contents li a:hover { text-decoration:none; }
.pickup_contents p::after{
	content:"";
	background:url(images/home/strong_arrow.png) no-repeat;
}

.pickup_contents > li ul,
.pickup_contents > li ol { margin:1rem auto; padding:0 0 0 1.5rem; }
.pickup_contents > li ul > li { list-style:disc; }
.pickup_contents > li ol > li { list-style:decimal; }

@media print,screen and (max-width:767px) {
	.pickup_contents{padding:20px 0;}
	.pickup_contents > li{
		width:90%;
		margin:0 auto;
	}
	.pickup_contents li a{
		display: block;
		width:100%;
		position: relative;
		overflow: hidden;
	}
	.pickup_contents > li:nth-child(2n) a{margin:20px 0;}
	.pickup_contents > li a > p::before{
		padding:45px 0 40px;
		font-size:35px;
	}
	.pickup_contents > li a > p{font-size:21px;}
	.pickup_contents > li a > p::after{
		width:35px;
		height:20px;
		margin:45px auto 20px;
		background-size:25px;
	}
}
@media print,screen and (min-width:768px) {
	.pickup_contents{
		display:-webkit-box;
		-webkit-box-pack:justify;
		display:-ms-flexbox;
		-ms-flex-pack:justify;
		display:flex;
		justify-content:space-between;
		width:100%;
		margin:0 auto;
		padding:30px 3% 0;
	}
	.pickup_contents > li{width:31.5%;}
	.pickup_contents > li a{
		display: block;
		width:100%;
		height:345px;
		position: relative;
		overflow: hidden;
	}
	.pickup_contents > li a > p::before{
		padding:50px 0 75px;
		font-size:48px;
	}
	.pickup_contents > li a > p{ font-size:2.4vw; }
	.pickup_contents > li a > p::after{
		width:33px;
		height:27px;
		margin:75px auto 40px;
		background-size:33px;
		-webkit-transition:0.35s ease-out;
		-moz-transition:0.35s ease-out;
		-ms-transition:0.35s ease-out;
		transition:0.35s ease-out;
	}
	.slide_up{
		width:100%;
		height:345px;
		position:absolute;
		z-index: 10;
		top:345px;
		left:0;
		padding:30px 10px;
		text-align: left;
		line-height: 1.75;
		-webkit-transition: 0.5s;
		-moz-transition:  0.5s;
		-ms-transition: 0.5s;
		transition: 0.5s;
	}
	.slide_up::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width:100%;
		height:345px;
		/*background-color: #24455b;
		opacity: 0.9;*/
	}
	.pickup_contents li a:hover .slide_up{
		top:0;
	}
}

/* ------------- */
/* home_intro_area */
/* ------------- */

#home_intro_area{
	display:-webkit-flex;
	display:flex;
	background:#f2f2f2;
}

@media print,screen and (max-width:767px) {
	#home_intro_area{
		-webkit-flex-direction:column;
		flex-direction:column;
		padding-top:60px;
		/*background:url(images/pc_img_sp.png) no-repeat 380px bottom #f2f2f2;
		background-size:320px;
		background-position:right bottom;
		*/
	}
	
	#home_intro_area > div{
		width:95%;
		margin:0 auto;
	}
	#home_intro_area h1{
		padding-bottom:30px;
		line-height: 1.25;
		
	}
	#intro_block p { padding-bottom:280px; }
}
@media print,screen and (min-width:768px) {
	#home_intro_area {
		-webkit-justify-content:space-between;
		justify-content:space-between;
		-webkit-align-items:center;
		align-items:center;
		padding:125px 0 100px;
		letter-spacing:-.40em;
	}
	#home_intro_area > div{
		width:60%;
		padding:0 3%;
		letter-spacing:normal;
	}
	#home_intro_area h1{
		padding-bottom:70px;
		color:#27455b;
		line-height: 1.5;
	}
	#home_intro_area figure {
		display:block;
		width:40%;
	}	
}

/* -------------- */
/* ボタンスタイル */
/* ------------- */
a.btn_round {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #009944;
  border: 2px solid #009944;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.btn_round:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.btn_round:hover {
  background: #fff;
  color: #009944;
}
a.btn_round:hover:before {
  border-top: 2px solid #acbcc5;
  border-right: 2px solid #acbcc5;
}

/* ----------------- */
/* home_service_area */
/* ----------------- */
.service_area li { list-style:none; }
.service_area li p{ font-weight: bold; }

.service_block{
	width:100%;
	-webkit-transition: 0.5s;
	-moz-transition:  0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
.service_area li a {
	display:block;
	width:100%;
}
.service_area li a img { width:100%; }
.service_area li a:hover { text-decoration:none; }
.service_area li a:hover .service_block{ opacity:0.75; }
@media print,screen and (max-width:767px) {
	#home_service_area{ padding:60px 0 20px; }
	.service_area{
		margin: 0 auto;
		padding-top:40px;
		text-align: center;
	}
	.service_area li{
		display: inline-block;
		width:44%;
		padding-bottom:40px;
		text-align: center;
		vertical-align: top;
	}
	.service_area li:nth-child(odd){margin-right:10px;}
	.service_area li:nth-child(even){margin-left:10px;}
	.service_area li p{padding-top:15px;}
}
@media print,screen and (min-width:768px) {
	#home_service_area{padding-top:80px}
	.service_area{
		display:flex;
		justify-content:space-between;
		width:95%;
		max-width:850px;
		margin:0 auto;
		padding:60px 0 100px;
	}
	.service_area li{
		width:24%;
		text-align: center;
	}
	.service_area li p{
		padding-top:30px;
		font-size:18px;
	}
	.service_block{
		min-width:150px;
	}
}


/* -------- */
/* おしらせ */
/* -------- */

.topics_contents_area { background:#f2f2f2; }
.topics_contents_area:nth-child(even) { background:#dfdfdf; }
.topics_contents_area a:hover { text-decoration:none; }
.topics_block{
	display: block;
	background:#fff;
	color:#000000;
}
.more_all {
	margin:0 auto;
	text-align: center;
}
.more_all a { display:inline-block; color:#000; }

.more_all::after {
	content:"";
	display: inline-block;
	width:16px;
	height:20px;
	margin-left:10px;
	vertical-align: middle;
	background: url(images/home/more_arrow.png) no-repeat;
	background-size:16px;
}
#map_canvas,
.map_area { position: relative;}

@media print,screen and (max-width:767px){
	.topics_contents_area{ padding: 50px 0 30px; }
	.topics_block{
		margin:20px 8% 0;
		padding:20px;
		transition: .3s;
		position: relative;
	}
	.more_all{
		margin-top:20px;
		font-size:18px;
	}
	#map_canvas,
	.map_area {
		position:relative;
		width:100%;
		height:400px;
		overflow:hidden;
	}
	.map_area iframe {
		position:absolute;
		width:100%;
		height:200%;
		top:-50%;
		right:0%;
		bottom:-50%;
		left:0%;
	}
}
@media print,screen and (min-width:768px) and (max-width:1024px){
	#home_topics_area .topics_block{font-size:14px;}

}
@media print,screen and (min-width:768px){
	.topics_contents_area h1 { padding-bottom:20px; }
	.topics_contents_area h1 span { display: block; }
	#home_topics_area {
		height:530px;
		display: flex;
	}
	#home_topics_area * { letter-spacing: normal; }
	.topics_contents_area,
	#map_canvas,
	.map_area {
		display: inline-block;
		position:relative;
		height:100%;
		vertical-align: top;
		overflow:hidden;
	}
	#map_canvas{
		border-left:#fff 2px solid;
	}
	.map_area iframe {
		position:absolute;
		width:100%;
		height:200%;
		top:-50%;
		right:0%;
		bottom:-50%;
		left:0%;
	}
	.topics_contents_area { padding:50px 0 40px; }
	.topics_block{
		margin:10px 10% 0;
		padding:10px 40px;
		transition: .3s;
		position: relative;
	}
	.topics_block::after {
		position: absolute;
		top:0;
		left: 50%;
		content: '';
		width: 0;
		height: 1px;
		background-color: #27455b;
		transition: .3s;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.topics_block:hover::after { width: 100%; }
	.topics_date { font-size:20px; }
	.more_all{
		font-size: 20px;
		position: relative;
		margin-top:30px;
	}
	.more_all::after {
		position: absolute;
		top:8px;
		-webkit-transition: 0.3s;
		-moz-transition:  0.3s;
		-ms-transition: 0.3s;
		transition: 0.3s;
	}
	.more_all:hover::after { margin-left:15px; }
	
}