/* ===============================================
   CSRで使用する共通のcss
=============================================== */

/* - - - - - - - - - - - - - - - - - - - - - 
	reset
- - - - - - - - - - - - - - - - - - - - - */

h3 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	border-bottom: none;
	letter-spacing: normal;
}

h4 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.5;
	border-bottom: none;
	letter-spacing: normal;
}

h5 {
	margin: 0;
	font-size: 1em;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.pc { display: block; }
.sp { display: none; }


/* - - - - - - - - - - - - - - - - - - - - - 
	base
- - - - - - - - - - - - - - - - - - - - - */

body {
	color: #4d4d4d;
}

.sp {
	display: none;
}

#corp_waku a {
	color: #4e4e4e;
}

#corp_waku a:hover,
#corp_waku a:focus {
	color: #4e4e4e;
	text-decoration: none;
}

img {
	border: none;
  vertical-align: bottom;
	max-width: 100%;
}

#corp_waku {
	padding-top: 3.5rem;
	width: 100%;
	max-width: 960px;
}

.waku_csr p {
	margin: 0 0 1.65em;
}

.box_inner {
	margin-bottom: 4.5rem;
}

.box {
	margin-bottom: 3.5rem;
}

.box_inner:last-of-type,
.box:last-of-type {
	margin-bottom: 0;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	clearfix
- - - - - - - - - - - - - - - - - - - - - */

.clearfix::after {
	content: '';
	clear: both;
	display: block;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	#csr_title
- - - - - - - - - - - - - - - - - - - - - */

#csr_title {
	display: none;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	#contents_title_area
- - - - - - - - - - - - - - - - - - - - - */

#contents_title_area {
	margin-bottom: 4rem;
}

.tab_csr {
}

.tab_csr ul {
	display: -ms-flexbox;
	display: flex;
}

.tab_csr ul li {
	border-right: 1px solid #d2d2d2;
	width: 25%;
	box-sizing: border-box;
}

.tab_csr ul li:first-child {
	border-left: 1px solid #d2d2d2;
}

.tab_csr ul li a {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 2.2;
	text-align: center;
	display: block;
}

#corp_waku .tab_csr ul li a:hover,
#corp_waku .tab_csr ul li.active a {
	color: #fff;
}

.tab_csr ul li span {
	display: none;
}

.contents_menu {
	padding: 1rem 1rem 1rem 15rem;
}

.contents_menu .list_contents {
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.contents_menu .list_contents li {
	margin-right: 2rem;
	width: 40%;
}

#contents_title {
	border-bottom: none;
}

#contents_title h2 {
	padding: 6rem 0 6rem 1.5rem;
	color: #fff;
	font-weight: 700;
	width: auto;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	.box_anchor
- - - - - - - - - - - - - - - - - - - - - */

.box_anchor {
	margin-bottom: 4rem;
	padding: 1.5rem 7rem 0.5rem;
}

.box_anchor ul {
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.box_anchor li {
	margin-bottom: 1rem;
	width: 50%;
}

.box_anchor li:hover {
	opacity: 0.8;
}

.box_anchor li a {
	font-weight: bold;
	text-decoration: none;
	display: block;
}

.box_anchor li a::before {
	margin-right: 0.7rem;
	padding: 0 0.5rem;
	color: #fff;
	content: '\02228';
	display: inline-block;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	parts
- - - - - - - - - - - - - - - - - - - - - */


/* --- .title_headline --- */

.title_headline {
	margin-bottom: 2.5rem;
	padding: 0 1rem;
	font-size: 2em;
	line-height: 2;
	border-bottom: 2px solid;
}

.title_headline2 {
	margin-bottom: 1.5rem;
	padding: 0 1.5rem;
	font-size: 1.35em;
	font-weight: 500;
	line-height: 3;
}

.title_headline3 {
	margin-bottom: 1rem;
	font-size: 1.1em;
}

.title_headline3::before {
	margin-right: 0.3rem;
	content: '';
	background-color: #4d4d4d;
	width: 12px;
	height: 12px;
	display: inline-block;
}


/* --- .list_contents --- */

.list_contents {
}

.list_contents li {
}

.list_contents li a {
	padding: 0.5rem;
	font-weight: bold;
	line-height: 1.8;
	text-decoration: none;
	display: block;
}

.list_contents li a::before {
	margin-right: 0.7rem;
	padding: 0 0.5rem;
	color: #fff;
	content: '>';
	display: inline-block;
}

#corp_waku .list_contents li a:hover,
#corp_waku .list_contents li.active a {
	color: #fff;
}

#corp_waku .list_contents li a:hover::before,
#corp_waku .list_contents li.active a::before {
	background-color: #fff;
}


/* --- .box_list ---　*/

.box_list,
.box_list_ol {
}

.box_list li {
	margin-bottom: 1rem;
	list-style: disc;
}

.box_list2 li {
	margin-bottom: 1rem;
	padding-left: 1em;
	text-indent: -1em;
}

.box_list2 li::before {
	color: #003f98;
	font-size: 0.85em;
	content: '●';
}

.box_list_ol li {
	margin-bottom: 1rem;
	counter-increment: number;
}

.box_list_ol li::before {
	margin-right: 0.2rem;
	padding: 2px 5px;
	color: #fff;
	font-size: 0.85em;
	background-color: #4d4d4d;
	border-radius: 7.5px;
	content: counter(number);
}


/* --- .box_gray --- */

.box_gray {
	padding: 2rem;
	background-color: #eee;
}

.box_gray_inner {
	padding: 2rem;
	background-color: #fff;
}


/* --- .box_pickup --- */

.box_pickup {
	border-top: 4px solid;
	border-bottom: 4px solid;
}

.pickup_head {
	margin-bottom: 1.5rem;
	display: table;
}

.img_pickup {
	margin-bottom: 1rem;
	background: url("../img/mark_pickup.png") no-repeat center center;
	width: 200px;
	height: 120px;
	display: table-cell;
}

.pickup_headline {
	padding-left: 2.5rem;
	font-size: 1.4em;
	font-weight: 700;
	letter-spacing: 0.1em;
	vertical-align: middle;
	display: table-cell;
}

.box_pickup_inner {
	padding: 0 3.5rem 1rem;
}


/* --- .btn --- */

.btn {
	background-color: #ccc;
	width: 70%;
	max-width: 240px;
}

.btn a {
	padding: 0.3rem;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.6;
	background: url("../img/mark_arrow_down.png") no-repeat 1.5rem center;
	display: block;
}

.btn a:hover {
	cursor: pointer;
}

.btn.active a {
	background: url("../img/mark_arrow_up.png") no-repeat 1.5rem center;
}

#corp_waku .btn a {
	color: #fff;
}

.btn span {
	padding-left: 5rem;
	border: 1px solid #fff;
	display: block;
}


/* --- img --- */

.float_img_left {
	margin-right: 2rem;
	float: left;
}

.float_img_right {
	margin-left: 2rem;
	float: right;
}

.float_img_left span,
.float_img_right span {
	margin-top: 0.5rem;
	font-size: 0.9em;
	display: block;
}

.box_img {
	margin-bottom: 1.5rem;
	text-align: center;
}

.box_img img + img {
	margin-left: 0.5rem;
}


/* --- .font ---　*/

.attention {
	color: #ff3300;
}

.indent {
	padding-left: 1em;
	text-indent: -1em;
	display: block;
}

.indent2 {
	padding-left: 2em;
	text-indent: -2em;
	display: block;
}

.indent3 {
	padding-left: 3em;
	text-indent: -3em;
	display: block;
}


/* --- .table_basic --- */

.table_basic {
	margin-bottom: 1.5rem;
	border: 1px solid #ddd;
}

.table_basic caption {
	margin-bottom: 0.5rem;
	font-weight: bold;
	text-align: left;
}

.table_basic caption::before {
	margin-right: 0.3rem;
	content: '';
	background-color: #4d4d4d;
	width: 12px;
	height: 12px;
	display: inline-block;
}

.table_basic caption span {
	width: 49%;
	display: inline-block;
}

.table_basic caption span:last-child {
	margin-left: auto;
	color: #4d4d4d;
	font-size: 0.9em;
	font-weight: normal;
	text-align: right;
}

.table_basic tr {
	border-bottom: 1px solid #ddd;
}

.table_basic th {
	text-align: center;
	background-color: #ddd;
	border-right: 1px solid #fff;
}

.table_basic thead th {
	border-bottom: 1px solid #fff;
}

.table_basic thead th:last-child {
	border-right: none;
}

.table_basic tbody td {
	border-right: 1px solid #ddd;
}

.table_basic th,
.table_basic td {
	padding: 1rem 3rem;
	font-size: 1.1em;
	font-weight: bold;
}


/* - - - - - - - - - - - - - - - - - - - - - 
/* @media SP
//////////////////////////*/

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

.pc { display: none; }

.sp { display: block; }

/* - - - - - - - - - - - - - - - - - - - - - 
	base
- - - - - - - - - - - - - - - - - - - - - */

#sp_navi {
	z-index: 100;
}

.sp {
	display: block;
}

#corp_waku {
	padding-top: 0;
}

.box_inner {
	margin: 0 5% 2.5rem;
}

.box {
	margin-bottom: 2rem;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	#topic_path
- - - - - - - - - - - - - - - - - - - - - */

#topic_path {
	display: none;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	#csr_title
- - - - - - - - - - - - - - - - - - - - - */

#csr_title {
	background-color: #0076bf;
	display: block;
	position: relative;
}

#csr_title p {
	margin: 0;
	line-height: 1;
	padding: 30px 6%;
}

#csr_title p a {
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.2em;
	box-sizing: border-box;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	#contents_title_area
- - - - - - - - - - - - - - - - - - - - - */

#contents_title_area {
	margin-bottom: 2rem;
}

.tab_csr ul {
	display: block;
}

.tab_csr ul li {
	border-right: none;
	width: 100%;
	position: relative;
}

.tab_csr ul li:not(.active) {
	display: none;
}

.tab_csr ul li a {
	padding-left: 20%;
	line-height: 3.4;
	text-align: left;
	position: relative;
	z-index: 0;
}

.tab_csr ul li span {
	padding: 0 0 0.4rem;
	text-align: center;
	background-color: #4d4d4d;
	position: absolute;
	top: 0.7rem;
	left: 7%;
	display: inline-block;
	z-index: 1;
}

.tab_csr ul li span.active {
	background-color: #626262;
}

.tab_csr ul li span img {
	width: 50%;
}

.contents_menu {
	padding: 0;
	display: none;
}

.contents_menu .list_contents {
	display: block;
	flex-wrap: nowrap;
}

.contents_menu .list_contents li {
	margin-right: 0;
	border-bottom: 1px solid #fff;
	width: 100%;
}

.contents_menu .list_contents li a {
	padding: 0 1.5rem 0 3.5rem;
	color: #fff;
	line-height: 3;
	background: url("../img/mark_arrow_right.png") no-repeat 5% center;
	background-size: 5%;
}

#corp_waku .contents_menu .list_contents li a {
	color: #fff;
	font-weight: normal;
}

#contents_title h2 {
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 1.25em;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	.box_anchor
- - - - - - - - - - - - - - - - - - - - - */

.box_anchor {
	margin: 0 5% 2rem;
	padding: 1.5rem 1.5rem 0.5rem;
}

.box_anchor ul {
	display: block;
	flex-wrap: nowrap;
}

.box_anchor li {
	margin: 0 1rem 1rem 0;
	width: auto;
	display: inline-block;
}


/* - - - - - - - - - - - - - - - - - - - - - 
	parts
- - - - - - - - - - - - - - - - - - - - - */


/* --- .title_headline --- */

.title_headline {
	margin-bottom: 1.5rem;
	padding: 0;
	font-size: 1.5em;
}

.title_headline2 {
	margin-bottom: 1rem;
	font-size: 1.2em;
}


/* --- .box_gray --- */

.box_gray {
	padding: 0.5rem;
}

.box_gray_inner {
	padding: 0.5rem;
}


/* --- .box_pickup --- */

.pickup_head {
	margin-bottom: 1.5rem;
	display: block;
}

.img_pickup {
	padding: 0.5rem 0;
	text-align: center;
	background: none;
	width: 100%;
	height: auto;
	display: block;
}

.img_pickup img {
	max-width: 50%;
	display: inline;
}

.pickup_headline {
	padding: 0 3%;
	line-height: 1.3;
	text-align: center;
	display: block;
}

.box_pickup_inner {
	padding: 0 1rem 1rem;
}


/* --- img --- */

.float_img_left,
.float_img_right {
	margin: 0 0 1.5rem;
	text-align: center;
	float: none;
}

.box_img img + img {
	margin: 1rem 0 0;
}
	



/* --- .table_basic --- */

.table_basic caption {
	font-size: 1.1em;
}

.table_basic caption span {
	width: 47.5%;
}

.table_basic th,
.table_basic td {
	padding: 0.5rem;
	font-size: 1em;
}


}
/* - - - - - - - - - - - - - - - - - - - - - 
	2021追記
- - - - - - - - - - - - - - - - - - - - - */

/* --- text --- */

.txt_c{
	text-align: center!important;
}
.txt_l{
	text-align: left!important;
}
.txt_r{
	text-align: right!important;
}
.txt_b{
	font-weight: bold!important;
}


/* --- flex --- */

.flex_container{
	display: flex;
}
.wrap{
	flex-wrap: wrap;
}
.between{
	justify-content:space-between;
}
.flex2_item{
	flex-basis: calc((100% - 30px) / 2);
}
.flex3_item{
	flex-basis: calc((100% - 30px) / 3);
}
.flex4_item{
	flex-basis: calc((100% - 100px) / 4);
}
.flex_container .flex_60p{
	flex: 1 1 60%;
	padding-right: 2vw;
}
.flex_container .flex_40p{
	flex: 0 0 40%;
}

@media(max-width: 768px){
	.flex_container{
		flex-wrap: wrap;
	}
	.flex2_item{
		flex-basis: 100%;
		margin-top: 1rem;
	}
	.flex3_item,.flex4_item{
		flex-basis: calc((100% - 20px) / 2);
		margin-top: 1rem;
	}
	.flex_container .flex_60p{
		flex: 1 1 100%;
		padding: 0 0 2vw 0;
	}
	.flex_container .flex_40p{
		flex: 0 0 100%;
		text-align: center;
	}
}

/* --- .csr_imgcap --- */

.csr_imgcap{
	font-size: 1em;
	margin-top: .5rem;
}

/* --- margin --- */

.mt40{
	margin-top: 40px!important
}
.mauto{
	margin: 0 auto;
}
/* --- .width ---　*/
.w-100p{
	width: 100%;
}
.w-50p{
	width: 50%;
}
@media(max-width: 768px){
.w-50p{
	width: 100%;
}
}
/* --- .font ---　*/

.indent5-4 {
	padding-left: 5.4em;
	text-indent: -5.4em;
	display: block;
}