@charset "UTF-8";


/***************************************************

	SDGs

***************************************************/

.page_head{
	background-image: url('../images/csr/csr_head_bg.jpg');
}

.page_head .text_wrapp{
	text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.h_caption{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 48px;
}

.scr_wrapp{

}

.tab-button {
	padding: 10px 20px;
	cursor: pointer;
	background: #fbfcfe;
	border: 1px solid #bed5f4;
	margin-right: 5px;
}

.tab-button.active {
	background: #e6effb;
}

.tab-content {
	width: 950px;
	margin: 0 auto;
	display: none;
}

.tab-content.active {
	display: block;
}

.tab-content .caption{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	margin-bottom: 36px;
}

.data_ul{
	counter-reset: num01 0; 
}

.data_ul > li{
	padding-left: 42px;
	margin-bottom: 32px;
	position: relative;
}

.data_ul > li:last-child{
	margin-bottom: 0;
}

.data_ul > li::before{
	counter-increment: num01 1;
	content: counter(num01) '.';
    display: inline-block;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-shadow: 1px 1px 1px var(--color1), -1px 1px 1px var(--color1), 1px -1px 1px var(--color1), -1px -1px 1px var(--color1);
    position: absolute;
    top: -5px;
    left: 0;
}

.data_ul li > .title{
	font-size: 24px;
	font-weight: 600;
	color: var(--color1);
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.data_ul li > .cont{
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	margin-top: 10px;
}

.data_ul li .in_ul01{
	margin-top: 14px;
}

.data_ul li .in_ul01 > li{
	margin-bottom: 26px;
}

.data_ul li .in_ul01 > li:last-child{
	margin-bottom: 0;
}

.data_ul li .in_ul01 li .in_title{
	font-size: 18px;
	font-weight: 600;
	color: var(--color1);
	line-height: 1.5;
	letter-spacing: 0.04em;
	padding-left: 22px;
	position: relative;
}

.data_ul li .in_ul01 .in_title::before{
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	background-image: url('../images/csr/circle_h.png');
	position: absolute;
    top: 5px;
    left: 0;
}

.data_ul li .in_ul01 .cont {
    padding-left: 22px;
}

.data_ul li .link{
	margin: 14px 0 0 22px;
}

.data_ul li .link a{
	display: inline-block;
	height: 26px;
	line-height: 26px;
	border-radius: 26px;
	border: 1px solid var(--color1);
	background: #fff;
	padding: 0 36px 0 16px;
	text-decoration: none;
	letter-spacing: 0.04em;
	position: relative;
}

.data_ul li .link a:before {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px var(--color1);
    border-right: solid 2px var(--color1);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 12px;
    bottom: 0;
    margin: auto;
}

.dot,
.num01{
	counter-reset: num02 0;
	margin-top: 14px;
}

.in_ul01 .dot,
.in_ul01 .num01{
	margin-left: 22px;
}

.dot > li,
.num01 > li{
	padding-left: 20px;
	margin-bottom: 14px;
	position: relative;
}

.dot > li:last-child,
.num01 > li:last-child{
	margin-bottom: 0;
}

.num01 > li::before{
    counter-increment: num02 1;
    content: counter(num02) '.';
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    position: absolute;
    top: 4px;
    left: 0;
}

.dot > li::before{
    content: '・';
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    position: absolute;
    top: 4px;
    left: 0;
}

.tab-content h3{
	font-size: 1.846154vw;
	margin-bottom: 3.230769vw;
}



/********************************************************************************
	リッキド用 CSS
********************************************************************************/

@media(max-width:1300px){

.page_head .text_wrapp{
	text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.h_caption{
	font-size: 1.384615vw;
	margin-bottom: 3.692308vw;
}

.tab-button {
	padding: 0.769231vw 1.538462vw;
	margin-right: 0.384615vw;
}

.tab-content {
	width: 73.076923vw;
}

.tab-content .caption{
	font-size: 1.230769vw;
	margin-bottom: 2.769231vw;
}

.data_ul > li{
	padding-left: 3.230769vw;
	margin-bottom: 2.461538vw;
}

.data_ul > li::before{
    font-size: 2.769231vw;
    top: -0.384615vw;
}

.data_ul li > .title{
	font-size: 1.846154vw;
}

.data_ul li > .cont{
	font-size: 1.230769vw;
	margin-top: 0.769231vw;
}

.data_ul li .in_ul01{
	margin-top: 1.076923vw;
}

.data_ul li .in_ul01 > li{
	margin-bottom: 2vw;
}

.data_ul li .in_ul01 li .in_title{
	font-size: 1.384615vw;
	padding-left: 1.692308vw;
}

.data_ul li .in_ul01 .in_title::before{
	width: 1.384615vw;
	height: 1.384615vw;
    top: 0.384615vw;
}

.data_ul li .in_ul01 .cont {
    padding-left: 1.692308vw;
}

.data_ul li .link{
	margin: 1.076923vw 0 0 1.692308vw;
}

.data_ul li .link a{
	height: 2vw;
	line-height: 2vw;
	border-radius: 2vw;
	padding: 0 2.769231vw 0 1.230769vw;
}

.data_ul li .link a:before {
    width: 0.461538vw;
    height: 0.461538vw;
    right: 0.923077vw;
}

.dot,
.num01{
	margin-top: 1.076923vw;
}

.in_ul01 .dot,
.in_ul01 .num01{
	margin-left: 1.692308vw;
}

.dot > li,
.num01 > li{
	padding-left: 1.538462vw;
	margin-bottom: 1.076923vw;
}

.num01 > li::before{
    font-size: 1.384615vw;
    top: 0.307692vw;
}

.dot > li::before{
    font-size: 1.384615vw;
    top: 0.307692vw;
}

.tab-content h3{
	font-size: 24px;
	font-weight: 600;
	color: var(--color1);
	letter-spacing: 0.04em;
	margin-bottom: 42px;
}




}




/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width:430px){

.page_head .text_wrapp{
	text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.h_caption{
	font-size: 4.266667vw;
	margin: 0 5.333333vw 8vw;
	text-align: left;
}

.scr_wrapp{

}

.tab-button {
	padding: 2.666667vw 5.333333vw;
	margin-right: 1.333333vw;
}

.tab-content {
	width: auto;
	margin: 0 5.333333vw;
}

.tab-content .caption{
	font-size: 3.733333vw;
	margin-bottom: 8vw;
}

.data_ul{
	counter-reset: num01 0; 
}

.data_ul > li{
	padding-left: 6.933333vw;
	margin-bottom: 4.8vw;
}

.data_ul > li:last-child{
	margin-bottom: 0;
}

.data_ul > li::before{
    font-size: 6.4vw;
    top: 1px;
}

.data_ul li > .title{
	font-size: 5.333333vw;
}

.data_ul li > .cont{
	font-size: 3.733333vw;
	margin-top: 2.666667vw;
}

.data_ul li .in_ul01{
	margin-top: 3.733333vw;
}

.data_ul li .in_ul01 > li{
	margin-bottom: 5.333333vw;
}

.data_ul li .in_ul01 li .in_title{
	font-size: 4.266667vw;
	padding-left: 4.8vw;
}

.data_ul li .in_ul01 .in_title::before{
	width: 4.266667vw;
	height: 4.266667vw;
    top: 1.066667vw;
}

.data_ul li .in_ul01 .cont {
    padding-left: 4.8vw;
}

.data_ul li .link{
	margin: 3.733333vw 0 0 4.8vw;
}

.data_ul li .link a{
	height: auto;
	line-height: 1.3;
	border-radius: 6.933333vw;
	padding: 2.133333vw 9.6vw 2.133333vw 4.266667vw;
}

.data_ul li .link a:before {
    width: 1.6vw;
    height: 1.6vw;
    border-top: solid 0.533333vw var(--color1);
    border-right: solid 0.533333vw var(--color1);
    right: 3.2vw;
}

.dot,
.num01{
	margin-top: 3.733333vw;
}

.in_ul01 .dot,
.in_ul01 .num01{
	margin-left: 0;
}

.dot > li,
.num01 > li{
	padding-left: 4.8vw;
	margin-bottom: 2.666667vw;
}

.num01 > li::before{
    font-size: 4.266667vw;
    top: 0.533333vw;
}

.dot > li::before{
    font-size: 4.266667vw;
    top: 0.533333vw;
}

.tab-content h3{
	font-size: 5.333333vw;
	margin-bottom: 5.866667vw;
}






}