@charset "UTF-8";


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

	SDGs

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

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

.sdgs_info{
	width: 1080px;
	margin: 0 auto 60px;
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.sdgs_info .logo_box{
	width: 480px;
}

.sdgs_info .text_box{
	width: calc(100% - 480px);
	padding-left: 46px;
	box-sizing: border-box;
}

.sdgs_info .text_box ul{

}

.sdgs_info .text_box ul li{
	font-size: 16px;
	line-height: 1.875;
	color: var(--color2);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 26px 0 26px 37px;
	border-bottom: 1px dotted var(--color2);
	position: relative;
}

.sdgs_info .text_box ul li:last-child{
	border-bottom: none;
}

.sdgs_info .text_box ul li::before{
	content: '一、';
	display: inline-block;
	position: absolute;
    top: 26px;
    left: 0;
}


.sdgs_cont_block{
	background: #e6effb;
	padding: 90px 0 105px;
}

.sdgs_cont_block .in_cont{
	width: 950px;
	margin: 0 auto 130px;
}

.sdgs_cont_block .in_cont:last-of-type{
	margin-bottom: 0;
}

.sdgs_cont_block .in_cont .goal_copy{
	background: #fff;
	border: 1px solid var(--color1);
	border-radius: 26px;
	margin-bottom: 68px;
	padding: 37px 70px;
	position: relative;
}

.sdgs_cont_block .in_cont .goal_copy::after{
    content: '';
    width: 20px;
    height: 20px;
    border-bottom: solid 1px var(--color1);
    border-right: solid 1px var(--color1);
    background: #fff;  
    transform:
      rotate(45deg)
      skew(
        calc((90deg - 65deg) / 2),
        calc((90deg - 65deg) / 2)
      ) translate(-50%, 0);
    position: absolute;
    bottom: -20px;
    left: 50%;
    
}

.sdgs_cont_block .in_cont .goal_copy p{
	font-size: 25px;
	font-weight: 500;
	color: var(--color1);
	line-height: 1.786;
	padding-left: 60px;
	position: relative;
}

.sdgs_cont_block .in_cont .goal_copy p::before{
	content: '一、';
	display: inline-block;
	position: absolute;
    top: 0;
    left: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul{
	counter-reset: num01 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li{
	display: flex;
	flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 1px dotted var(--color1);
    padding-bottom: 40px;
    margin-bottom: 50px;
    position: relative;
}

.sdgs_cont_block .in_cont .in_cont_ul > li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li::before{
	counter-increment: num01 1;
	content: counter(num01) '';
	display: inline-block;
	font-size: 70px;
	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: 0;
    left: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .image_box{
	width: 350px;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box{
	width: calc(100% - 350px);
	padding: 0 60px 0 75px;
	box-sizing: border-box;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .main{
	font-size: 25px;
	font-weight: 500;
	color: var(--color1);
	letter-spacing: 0.05em;
	margin-bottom: 26px;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul{
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul li{
	width: 70px;
	margin: 0 12px 26px 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul li:last-child{
	margin-right: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub p{
	text-indent: 1em;
	font-size: 15px;
	line-height: 2.0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num{
	margin-top: 1em;
	counter-reset: num02 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li{
	font-size: 18px;
	font-weight: 500;
	color: var(--color1);
	letter-spacing: 0.04em;
	margin-bottom: 35px;
	padding-left: 34px;
	position: relative;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li:last-child{
	margin-bottom: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li::before{
	counter-increment: num02 1;
	content: '('counter(num02) ')';
	display: inline-block;
	position: absolute;
    top: 0;
    left: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item{
	font-weight: 500;
	cursor: pointer;
	position: relative;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item::after{
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-top: solid 2px var(--color1);   /* 好みで色を変えてください */  
    border-right: solid 2px var(--color1);   /* 好みで色を変えてください */  
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item.active::after{
    transform: rotate(-45deg);
    top: 67%;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item small{
	font-size: 0.8em;
	font-weight: 500;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont{
	padding-top: 20px;
	display: none;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont .image_box{
	width: 260px;
	margin: 0 auto 18px;
	
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li p{
	margin: 14px 0 0 -34px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
}






.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot{
	margin-top: 14px;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot li{
	font-size: 16px;
	font-weight: 500;
	color: var(--color1);
	margin-bottom: 8px;
	padding-left: 1.2em;
	position: relative;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot li:last-child{
	margin-bottom: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot li::before{
	content: '・';
	display: inline-block;
	position: absolute;
    top: 0;
    left: 0;
}







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

@media(max-width:1300px){

.sdgs_info{
	width: 83.076923vw;
	margin: 0 auto 4.615385vw;
}

.sdgs_info .logo_box{
	width: 36.923077vw;
}

.sdgs_info .text_box{
	width: calc(100% - 36.923077vw);
	padding-left: 3.538462vw;
}

.sdgs_info .text_box ul li{
	font-size: 1.230769vw;
	padding: 2vw 0 2vw 2.846154vw;
}

.sdgs_info .text_box ul li::before{
    top: 2vw;
}


.sdgs_cont_block{
	padding: 6.923077vw 0 8.076923vw;
}

.sdgs_cont_block .in_cont{
	width: 73.076923vw;
	margin: 0 auto 10vw;
}

.sdgs_cont_block .in_cont .goal_copy{
	border-radius: 2vw;
	margin-bottom: 5.230769vw;
	padding: 2.846154vw 5.384615vw;
}

.sdgs_cont_block .in_cont .goal_copy::after{
    width: 1.538462vw;
    height: 1.538462vw;
    bottom: -1.538462vw;
}

.sdgs_cont_block .in_cont .goal_copy p{
	font-size: 1.923077vw;
	padding-left: 4.615385vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li{
    padding-bottom: 3.076923vw;
    margin-bottom: 3.846154vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li::before{
	font-size: 5.384615vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .image_box{
	width: 26.923077vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box{
	width: calc(100% - 26.923077vw);
	padding: 0 4.615385vw 0 5.769231vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .main{
	font-size: 1.923077vw;
	margin-bottom: 2vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul li{
	width: 5.384615vw;
	margin: 0 12px 2vw 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub p{
	font-size: 1.153846vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li{
	font-size: 1.384615vw;
	margin-bottom: 2.692308vw;
	padding-left: 2.615385vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont{
	padding-top: 1.538462vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont .image_box{
	width: 20vw;
	margin: 0 auto 1.384615vw;
	
}


.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li p{
	margin: 1.076923vw 0 0 -2.615385vw;
	font-size: 1.153846vw;
}


.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot{
	margin-top: 1.076923vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot li{
	font-size: 1.230769vw;
	margin-bottom: 0.615385vw;
}









}




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

@media(max-width:430px){

.sdgs_info{
	width: auto;
	margin: 0 5.333333vw 10.666667vw;
	display: block;
}

.sdgs_info .logo_box{
	width: 100%;
	margin: 0 auto 4.8vw;
}

.sdgs_info .text_box{
	width: auto;
	padding-left: 0;
}

.sdgs_info .text_box ul{

}

.sdgs_info .text_box ul li{
	font-size: 3.733333vw;
	line-height: 1.8;
	padding: 3.733333vw 0 3.733333vw 8vw;
}

.sdgs_info .text_box ul li::before{
    top: 3.733333vw;
}


.sdgs_cont_block{
	padding: 10.666667vw 5.333333vw;
}

.sdgs_cont_block .in_cont{
	width: auto;
	margin: 0 auto 16vw;
}

.sdgs_cont_block .in_cont .goal_copy{
	border-radius: 4.266667vw;
	margin-bottom: 10.666667vw;
	padding: 4.266667vw;
}

.sdgs_cont_block .in_cont .goal_copy::after{
    width: 5.333333vw;
    height: 5.333333vw;
    margin-bottom: -4.266667vw;
}

.sdgs_cont_block .in_cont .goal_copy p{
	font-size: 4.266667vw;
	line-height: 1.6;
	padding-left: 8vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li{
	display: block;
    padding-bottom: 4.266667vw;
    margin-bottom: 4.266667vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li::before{
	font-size: 16vw;
    top: 2.666667vw;
    left: 3.733333vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .image_box{
	width: auto;
	margin: 0 auto 5.333333vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box{
	width: auto;
	padding: 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .main{
	font-size: 4.266667vw;
	margin-bottom: 4.8vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul{
    flex-wrap: wrap;
    margin-bottom: 2.133333vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .icon_ul li{
	width: 12.8vw;
	margin: 0 2.666667vw 2.666667vw 0;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub p{
	font-size: 3.733333vw;
	line-height: 1.8;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li{
	font-size: 4.266667vw;
	margin-bottom: 4.266667vw;
	padding-left: 6.933333vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item::after{
    width: 1.6vw;
    height: 1.6vw;
    margin-top: -1.333333vw;
    border-top: solid 0.533333vw var(--color1);   /* 好みで色を変えてください */  
    border-right: solid 0.533333vw var(--color1);   /* 好みで色を変えてください */  
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .item small{
	display: inline-block;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont{
	padding-top: 5.333333vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li .cont .image_box{
	width: 80%;
	margin: 0 auto 4.8vw;
	
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .sub .num li p{
	margin: 3.733333vw 0 0 -6.933333vw;
	font-size: 3.733333vw;
}


.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot{
	margin-top: 3.2vw;
}

.sdgs_cont_block .in_cont .in_cont_ul > li .text_box .dot li{
	font-size: 3.733333vw;
	margin-bottom: 1.6vw;
}










}