@charset "utf-8";

@media print, screen and (min-width:768px){
  .breadcrumbs_wrap .content_inner {
      max-width: 1276px;
      padding: 10px 50px 0px;
      width: auto;
  }
}

.main_visual_full{
  background: url(/jpn/decarbonization/efforts/images/key_bg.jpg) no-repeat bottom center;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 154px 0 148px;
}
.page_efforts .content_inner_wide{
  max-width: 980px;
}
.content_inner_wide .txt{
  font-size: 18px;
  line-height: 2;
}
.content_inner_wide .txt_main_cp{
  font-size: 24px;
  margin-bottom: 21px;
}
.content_inner_wide h1{
  font-size: 56px;
  font-weight: bold;
  margin-bottom: 58px;
  line-height: 1.6;
}


.sec1 .thum_text_link_wrap._col3 {
  padding-top: 7px;
}
.sec1 .thum_text_link_wrap figure{
  overflow: hidden;
}
.sec1 .thum_text_link_wrap figure img{
  /* transition: all .4s ease; */
  transition: transform .4s;
}
.sec1 .thum_text_link_wrap .thum_text_link a:hover figure img{
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}
.sec1 .ttl_bdr_blue .txt_main, .sec2 .ttl_bdr_blue .txt_main {
  color: #222;
}
.sec1 .thum_text_link_wrap._col3 .thum_text_link_txtarea {
  padding: 5px 30px 37px;
}
.sec1 .thum_text_link_wrap._col3 .thum_text_link a:after {
  bottom: 21px;
}
.sec1 .thum_text_link_wrap._col3 .thum_text_link:last-child {
  margin-right: 0;
}
.sec2.more_links {
  padding-bottom: 0px;
}
.sec2.more_links .thum_text_link_wrap .thum_text_link {
  background: none;
}
.sec2.more_links .thum_text_link_wrap .thum_text_link .bordered_link {
  border: 1px solid #ddd;
  position: relative;
  z-index: 0;
}

.sec2.more_links .thum_text_link_wrap .thum_text_link a .thum_text_link_ttl {
  transition: color .2s;
  text-align: center;
}
.sec2.more_links .thum_text_link_wrap .thum_text_link a:after {
  display: none;
}
.sec2.more_links .thum_text_link_wrap .thum_text_link .thum_text_link_txtarea {
  padding: 12px 10px 12px;
}
.thum_text_link_wrap .thum_text_link .thum_text_link_thum, .thum_text_link_wrap .thum_text_link .thum_text_link_ttl{
  margin-bottom: 0;
}

/* 
-------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .sec1 {
    margin-bottom: 37px;
    padding-top: 80px !important;
  }
  
  .sec1 .thum_text_link_wrap._col3 {
    max-width: 1467px;
    padding: 0 50px;
    margin: 0 auto;
  }
  .content_inner_wide h1 {
      padding-left: 20px;
  }
  .sec1 .bg_light_gray_sec {
    padding: 77px 0;
  }
  .sec1 .thum_text_link_wrap {
    margin: 0 86px;
  }
  .sec1 .thum_text_link_wrap._col3 .thum_text_link {
    width: calc((100% - 76px) / 3);
    margin-right: 38px;
  }
  .sec2 {
    padding-top: 40px;
    margin-bottom: 20px;
  }
  .sec2 .ttl_bdr_blue {
    margin-bottom: 53px;
  }
  .sec2 .thum_text_link_wrap._col2 .thum_text_link {
    width: calc((100% - 34px) / 2);
    margin-right: 32px;
  }
  .sec2 .thum_text_link_wrap._col2 .thum_text_link:last-child {
    margin-right: 0;
  }
  .sec2.more_links {
	padding-bottom: 15px;
  }
  .sec2.more_links .thum_text_link_wrap .thum_text_link a .thum_text_link_txtarea {
    position: relative;
    z-index: 0;
  }
  .sec2.more_links .thum_text_link_wrap .thum_text_link a .thum_text_link_txtarea::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ff0a14;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .2s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    z-index: -2;
  }
  .sec2.more_links .thum_text_link_wrap .thum_text_link a:hover .thum_text_link_txtarea::after{
    transform: scale(1, 1);
    transform-origin: left top;
    visibility: visible;
  }
  .sec2.more_links .thum_text_link_wrap .thum_text_link a:hover{
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .pc_only,
  .pc {
    display: none !important;
  }
  .main_visual_full{
    margin-bottom: 10px;
    padding: 50px 0;
    background-image: url(/jpn/decarbonization/efforts/images/sp_key_bg.jpg);
    background-position: bottom center;
    background-size: cover;
  }
  .content_inner_wide .txt_main_cp {
      font-size: 18px;
      margin-bottom: 30px;
  }
  .content_inner_wide h1{
    font-size: 24px;
    margin-bottom: 0;
  }
  .content_inner_wide .txt {
      font-size: 14px;
      text-align: left;
      padding-bottom: 20px;
  }
  .sec1 .sec_inner {
    width: 100%;
    padding: 0 20px;
  }
  .sec1.bg_light_gray_sec .thum_text_link_wrap._col3 .thum_text_link_txtarea {
    padding: 20px 20px 40px;
  }
}


/* sec_aim
-------------------------------------------------- */
.sec_aim{
  padding: 90px 0;
  text-align: center;
}
.sec_aim .aim_ttl{
  font-weight: bold;
  letter-spacing: 0.15em;
  margin-bottom: 42px;
}
.sec_aim .sec_aim_inner{
  margin-right: auto;
  margin-left: auto;
}

.sec_aim .aim_fig{
  width: 100%;
  padding-top: 98.7%;
  position: relative;
  z-index: 1;
}
.sec_aim .aim_fig .aim_fig_inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.sec_aim .aim_fig .aim_cap{
  font-weight: bold;
  line-height: 1.1;
  position: relative;
  z-index: 4;
  margin: 50px 0 0;
}

.sec_aim .aim_fig .aim_list{
	width: 614px;
	height: 586px;
  position: absolute;
  z-index: 3;
}
.sec_aim .aim_fig .aim_list li{
  width: 70%;
  height: 70%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
.sec_aim .aim_fig .aim_list li .aim_list_inner{
	position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sec_aim .aim_fig .aim_list li dl{
  width: 100%;
}
.sec_aim .aim_fig .aim_list li dt{
  font-weight: bold;
}
.sec_aim .aim_fig .aim_list li dd{
  font-weight: bold;
}
.sec_aim .aim_fig .aim_list li.aim_list1{
	width: 410px;
    height: 378px;
	background-image: url(/jpn/decarbonization/efforts/images/aim_circle01.png);
	color: #fff;
	top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.sec_aim .aim_fig .aim_list li.aim_list2{
    width: 410px;
    height: 378px;
	background-image: url(/jpn/decarbonization/efforts/images/aim_circle02.png);
	color: #fff;
	bottom: 0;
    left: 0;
}
.sec_aim .aim_fig .aim_list li.aim_list3{
	width: 298px;
	height: 410px;
	background-image: url(/jpn/decarbonization/efforts/images/aim_circle03.png);
	color: #fff;
	bottom: 0;
	right: 0;
}
.sec_aim .aim_fig .aim_list li.aim_list4{
  background-image: url(/jpn/decarbonization/efforts/images/aim_circle04.png);
  color: #f07e13;
  bottom: 0;
  right: 0;
}
.sec_aim .aim_fig .aim_list li.aim_list1 dl {
	position: absolute;
    top: 58px;
}
.sec_aim .aim_fig .aim_list li.aim_list2 dl {
	position: absolute;
    bottom: 64px;
    right: 10px;
}
.sec_aim .aim_fig .aim_list li.aim_list3 dl {
	position: absolute;
    top: 34%;
    left: 42px;
}

.sec_aim .aim_fig .aim_bg{
  width: 70.894%;
  height: 71.828%;
  margin: auto;
  background: url(/jpn/decarbonization/efforts/images/aim_circle_bg.png) center center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

/*ANIMATION*/
.sec_aim.js_effect{}
.sec_aim.js_effect.js_effect_show{}

/*.sec_aim.js_effect .aim_ttl{
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .4s ease-out, transform .4s ease-out;
}*/
.sec_aim.js_effect.js_effect_show .aim_ttl{
  opacity: 1;
  transform: translateY(0);
}

.sec_aim.js_effect .aim_fig .aim_cap{
  opacity: 0;
  transition: opacity .4s 1.2s ease-out;
}
.sec_aim.js_effect.js_effect_show  .aim_fig .aim_cap{
  opacity: 1;
}

.sec_aim.js_effect .aim_fig .aim_list li{
  opacity: 0;
  transition: opacity .4s .6s ease-out, transform .4s .6s ease-out;
}
.sec_aim.js_effect.js_effect_show .aim_fig .aim_list li{
  opacity: 1;
}
.sec_aim.js_effect .aim_fig .aim_list li.aim_list1{transform: translate(-20px, -20px);}
.sec_aim.js_effect.js_effect_show  .aim_fig .aim_list li.aim_list1{transform: translate(0, 0);}
.sec_aim.js_effect .aim_fig .aim_list li.aim_list2{transform: translate(-20px, 20px);}
.sec_aim.js_effect.js_effect_show  .aim_fig .aim_list li.aim_list2{transform: translate(0, 0);}
.sec_aim.js_effect .aim_fig .aim_list li.aim_list3{transform: translate(20px, 20px);}
.sec_aim.js_effect.js_effect_show  .aim_fig .aim_list li.aim_list3{transform: translate(0, 0);}

.sec_aim.js_effect .aim_fig .aim_list li.aim_list4{transform: translate(20px, 20px);}
.sec_aim.js_effect.js_effect_show  .aim_fig .aim_list li.aim_list4{transform: translate(0, 0);}

.sec_aim.js_effect .aim_fig .aim_bg{
  opacity: 0;
  transform: scale(.5, .5);
  transition: opacity .8s 1.2s ease-out, transform .8s 1.2s ease-out;
}
.sec_aim.js_effect.js_effect_show .aim_fig .aim_bg{
  opacity: 1;
  transform: scale(1, 1);
}

@media print, screen and (min-width: 768px) {
  .sec_aim{
    padding-left: 16px;
  }
  .sec_aim .aim_ttl{
    font-size: 28px;
  }
  .sec_aim .sec_aim_inner{
    max-width: 615px;
  }
  
  .sec_aim .aim_fig .aim_cap{
    font-size: 36px;
  }
  
  .sec_aim .aim_fig .aim_list li dt{
    font-size: 26px;
  }
  .sec_aim .aim_fig .aim_list li dd{
    font-size: 17px;
  }
  .sec_aim .aim_fig .aim_list li.aim_list3 dd{
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .sec_aim {
      padding: 50px 0;
  }
  .sec_aim .aim_ttl{
    font-size: 20px;
  }
  
  .sec_aim .aim_fig .aim_cap{
    font-size: 4.8vw;
  }
  
  .sec_aim .aim_fig .aim_list li dt{
    /* font-size: 14px; */
    font-size: 3.7333vw;
  }
  .sec_aim .aim_fig .aim_list li dd{
    margin-top: 5px;
    /* font-size: 12px; */
    font-size: 3.2vw;
  }
  .sec_aim .aim_fig .aim_list li.aim_list3 dd{
    /* font-size: 10px; */
    font-size: 2.667vw;
    letter-spacing: -0.05em;
  }
}

@media screen and (max-width: 399px) {
  .sec_aim .aim_fig .aim_list li.aim_list3 dd{
    letter-spacing: -0.1em;
  }
}

@media screen and (max-width: 767px) {
.sec_aim .aim_fig .aim_list{
	width: 100%;
	height: 100%;
}

.sec_aim .aim_fig .aim_list li.aim_list1,
.sec_aim .aim_fig .aim_list li.aim_list2 {
	width: 67.5%;
    height: 65.5%;
}
.sec_aim .aim_fig .aim_list li.aim_list3 {
	width: 49%;
    height: 71.5%;
}
.sec_aim .aim_fig .aim_list li.aim_list1 dl {
    top: 36px;
}
.sec_aim .aim_fig .aim_list li.aim_list2 dl {
    bottom: 40px;
    right: 0;
}
.sec_aim .aim_fig .aim_list li.aim_list3 dl {
    top: 38%;
    left: 17%;
}
.sec_aim .aim_fig .aim_cap {
    margin: 30px 0 0;
}
}