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

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

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

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

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

.top_contents_top_box h2{
	font-family: "NotoSansJP";
	font-size: 42px;
	font-weight: 700;
}

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

.top_contents_top_box li{
	font-size: 20px;
	color: #fff;
	font-family: "NotoSansJP";
	font-weight: 700;
	padding: 8px 0 8px 20px;
	margin-top: 36px;
}
.top_contents_top_box li.btn{
	width: 150px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	text-align: center;
	padding: 8px 0px;
}
.top_contents_top_box li:nth-child(2n){ border-right: none; }

.top_contents_top_box li a{
	display: block;
	color: #fff;
	transition: .5s;
}
.top_contents_top_box li a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

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

#section01 h3,
#section02 h3{
	font-size: 42px;
	color: #23B6BC;
	margin-top: 40px;
	font-family: "NotoSansJP";
	font-weight:900;
}

#section01 .wrapper,
#section02 .wrapper{
	width: 960px;
	margin: auto;
}


/* --------------------------------------------------------------------------------------
 TOP_section01
--------------------------------------------------------------------------------------- */
#section01 ul.list{
	margin-top: 36px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#section01 ul.list li{
	width: 288px;
	padding-top: 200px;
	padding-bottom: 50px;
}
#section01 ul.list li.box01{ background: url("../../case_study/img/section01_img01.jpg") top left no-repeat;}
#section01 ul.list li.box02{ background: url("../../case_study/img/section01_img02.jpg") top left no-repeat;}
#section01 ul.list li.box03{ background: url("../../case_study/img/section01_img03.jpg") top left no-repeat;}
#section01 ul.list li.box04{ background: url("../../case_study/img/section01_img04.jpg") top left no-repeat;}
#section01 ul.list li.box05{ background: url("../../case_study/img/section01_img05.jpg") top left no-repeat;}
#section01 ul.list li.box06{ background: url("../../case_study/img/section01_img06.jpg") top left no-repeat;}

#section01 ul.list li .txt{
	font-size:22px;
	font-weight: 300;
	text-align: center;
}

#section01 ul.list li .btn{ margin: 16px auto 0 auto; text-align: center;}

#section01 ul.list li .btn a{
	display: inline-block;
	color: #fff;
	padding: 8px 12px;
	background: #23B6BC;
	font-weight: 700;
	border-radius: 8px;
	transition: .5s;
}

#section01 ul.list li .btn a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

/* --------------------------------------------------------------------------------------
 TOP_section02
--------------------------------------------------------------------------------------- */
#section02 .wrapper{
	margin-top: 36px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#section02 h3{width: 100%;}

#section02 .box{
	width: 290px;
	margin-top: 70px;
}
#section02 .box h4{
	font-size: 30px;
	padding-bottom: 8px;
	border-bottom: 1px solid #231815;
	font-weight: 400;
}

#section02 ul.list{}
#section02 ul.list li {
 position: relative;
	font-size: 20px;
	padding: 14px 0 14px 24px;
	margin-bottom:5px;
}
#section02 ul.list li:before {
	content:'';
	position: absolute;
}
#section02 ul.list li:before {
	top: 18px;
	left: 0;
	width: 12px;
	height: 12px;
	background: #E6211A;
}


/* --------------------------------------------------------------------------------------
 中ページ（課題別）
--------------------------------------------------------------------------------------- */
#issue_contents{
	width:920px;
	margin: 300px auto 0 auto;
}

#issue_contents section{
	display: block;
	width: 100%;
	margin-top: 50px;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#issue_contents section figure{
	display:block;
	width: 430px;
	margin-right: 24px;
	text-align: center;
}

#issue_contents section h3{
	font-size: 30px;
	font-weight: 700;
}

#issue_contents section .txt_box{ overflow: hidden; font-weight: 400; width: 464px;}
#issue_contents section .txt_box p{ margin-top: 30px; line-height: 32px;}