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

/* --------------------------------------------------------------------------------------
font-family
--------------------------------------------------------------------------------------- */

@font-face{
    font-family: 'NotoSansSC';
    src:url(../font/NotoSansSC-Thin.otf);
    font-weight:100;
    font-style:normal;
}
@font-face{
    font-family: 'NotoSansSC';
    src:url(../font/NotoSansSC-Light.otf);
    font-weight:300;
    font-style:normal;
}
@font-face{
    font-family: 'NotoSansSC';
    src:url(../font/NotoSansSC-Regular.otf);
    font-weight:400;
    font-style:normal;
}
@font-face{
    font-family: 'NotoSansSC';
    src:url(../font/NotoSansSC-Bold.otf);
    font-weight:700;
    font-style:normal;
}

/* --------------------------------------------------------------------------------------
 上部
--------------------------------------------------------------------------------------- */
.top_contents_top_box{
	width: 100%;
	min-height:274px;
	background-color: #00A6E7;
	margin-top: 240px;
	color: #fff;
}

.top_contents_top_box .wrapper{
	width: 820px;
	margin: auto;
	padding-top: 40px;
}

.top_contents_top_box h2{
    font-family: "NotoSansSC","微软雅黑";
	font-size: 42px;
	font-weight: 700;
}
.top_contents_top_box h2 span{
	display: inline-block;
	background-color: #fff;
	color: #00A6E7;
	font-size: 14px;
	padding: 6px 10px;
	margin: 0 16px 0 0;
	vertical-align: middle;
}
.top_contents_top_box .txt{
	font-size: 20px;
	margin-top: 16px;
	line-height: 35px;
}

/* ナビゲーション */
.top_contents_top_box ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 26px;
}

.top_contents_top_box li{
	border-right: 1px solid #fff;
}
.top_contents_top_box li:last-child{ border-right: none; }

.top_contents_top_box li a{
	display: block;
	padding: 6px 16px;
	font-size: 20px;
	line-height: 26px;
	color: #fff;
    font-family: "NotoSansSC","微软雅黑";
	font-weight: 300;
	transition: .5s;
}
.top_contents_top_box li a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

/* --------------------------------------------------------------------------------------
 section共通
--------------------------------------------------------------------------------------- */
#section01,
#section02,
#section03,
#section04{
	display: block;
	width: 100%;
	border-top: 40px solid #E9E8E8;
	margin-top: 40px;
}

#section01 h3,
#section02 h3,
#section03 h3,
#section04 h3{
	font-size: 42px;
	color: #00A6E7;
	margin-top: 40px;
	font-family: "NotoSansSC","微软雅黑";
	font-weight: 700;
}

#section01 .txt,
#section02 .txt,
#section03 .txt,
#section04 .txt{
	margin-top: 50px;
	font-size: 16px;
	line-height: 36px;
}

/* --------------------------------------------------------------------------------------
 section01
--------------------------------------------------------------------------------------- */
#section01 .wrapper{
	width: 960px;
	margin: auto;
	padding-bottom: 590px;
	background: url("../top/section01_img02.jpg") center bottom no-repeat;
}

#section01 .wrapper .box{
	min-height: 445px;
	padding-right: 470px;
	background: url("../top/section01_img01.jpg") right top no-repeat;
}

/* --------------------------------------------------------------------------------------
 section02
--------------------------------------------------------------------------------------- */
#section02 .wrapper{
	width: 960px;
	margin: auto;
	padding-bottom: 430px;
	background: url("../top/section02_img01.jpg") center bottom no-repeat;
}

/* --------------------------------------------------------------------------------------
 section03
--------------------------------------------------------------------------------------- */
#section03 .wrapper{
	width: 960px;
	margin: auto;
	padding-bottom: 430px;
	background: url("../top/section03_img01.jpg") center bottom no-repeat;
}
#section03 .wrapper ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
	font-size: 16px;
	line-height: 36px;
}
#section03 .wrapper li{
  position: relative;
  padding-left: 15px;
	width: 50%;
	list-style: none;
}
 
#section03 .wrapper li:before {
  content: "";
  position: absolute;
  top: .9em;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #231815;
  border-radius: 50%;
}
#section03 .wrapper .list_txt{
	font-size: 16px;
	line-height: 36px;}

/* --------------------------------------------------------------------------------------
 section04
--------------------------------------------------------------------------------------- */
#section04 .wrapper{
	width: 960px;
	margin: auto;
	padding-bottom: 560px;
	background: url("../top/section04_img01.jpg") center bottom no-repeat;
}