@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root{
  --black: #000000;
  --white: #ffffff;
  --main: #e60027;
  --main-dark: #b1000e;
  --gray-light: #f9f9f9;
  --gray-dark: #333333;
  --sus-01: #d9e59b;
  --sus-02: #f9d2cb;
  --sus-03: #9fdcd4;
  --sus-04: #bdcde7;
  --sus-05: #d1cfb2;
  --env-main: #51baae;
  --env-sub: #b9df52;
  --scl-main: #f781a1;
  --scl-sub: #fbb061;
  --gvn-main: #be91cb;
  --gvn-sub: #64a8df;
}
/*
=====================
メインイメージ
=====================
*/
.main_img {
  height: 350px;
  background: url(/assets/image/jp/ja/sustainability/index/main.jpg) no-repeat top 30% center / cover;
  position: relative;
}
.main_img_box {
  max-width: 1275px;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  height: 100%;
}
body > .where-not .main_img h1 {
  position: absolute;
  z-index: 1;
  max-width: 1275px;
  margin: auto;
  left: 0;
  right: 0;
  line-height: 1em;
  font-size: clamp(40px, 3vw, 45px);
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 20px;
}
.main_img h1 span {
  display: block;
  font-size: 0.5em;
}
.pickup {
  position: absolute;
  width: 50%;
  background: #fff;
  height: 90%;
  min-height: 270px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  text-align: center;
  padding: 2%;
  font-size: clamp(9px, 1.1vw, 14px);
  border-radius: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
}
.pickup:hover{
  transform: scale(1.03);
}
.pickup a{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pickup img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (min-width: 1023px) {
  .pickup img.pc{display: block;}
  .pickup img.tab,.pickup img.sp,.pickup img.min{display: none;}
}
@media screen and (min-width: 768px) and (max-width: 1022px) {
  .pickup img.pc,.pickup img.sp,.pickup img.min{display: none;}
  .pickup img.tab{display: block;}
}
@media screen and (min-width: 459px) and (max-width: 767px) {
  .pickup img.pc,.pickup img.tab,.pickup img.min{display: none;}
  .pickup img.sp{display: block;}
}
@media screen and (max-width: 458px) {
  .pickup img.pc,.pickup img.tab,.pickup img.sp{display: none;}
  .pickup img.min{display: block;}
}
/*
=====================
sus_cont
=====================
*/
.sus_cont {
  max-width: 1275px;
  margin: 24px auto;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sus_cont > div {
  width: 38%;
  position: relative;
  text-align: center;
}
.sus_cont .img_box {
  margin-bottom: 10px;
  overflow: hidden;
}
.sus_cont .img_box img {
  transition: 0.5s;
}
.sus_cont p {
  font-weight: bold;
  font-size: 20px;
}
body > #Contents .hht-wrap h3,
body > #Contents .hht-wrap p {
  color: #000;
}
.sus_cont > div:hover .img_box img,
.sus_cont > div > a:hover + .img_box img {
  transform: scale(1.2);
}
body > #Contents .hht-wrap .sus_cont a:hover {
  text-decoration: none !important;
}
.sus_cont_2{
  justify-content: center;
}
.sus_cont.sus_cont_2 > div{
  width: auto;
  margin: 10px;
}
.sus_cont.sus_cont_2 .img_box{
  margin-bottom: 0;
}
/*
=====================
materiality
=====================
*/
.mat {
  width: 100%;
  background: linear-gradient(90deg, var(--gray-light) 0%, var(--gray-light) 50%, #ededed 50%, #ededed 100%);
  margin: 20px 0;
}
.materiality {
  max-width: 1275px;
  margin: 0px auto;
  left: 0;
  right: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 4/1;
  border-radius: 10px;
  padding: 50px 0 24px 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.materiality_banner_box{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;  
}
.materiality_banner_box a {
  min-width: 290px;
  background: var(--main);
  padding: 20px 30px 20px 20px;
  color: #fff !important;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  transition: 0.5s;
  line-height: 1.5;
  font-weight: bold;
}
.materiality .materiality_banner span::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
}
.materiality h3,
.materiality p {
  z-index: 10;
}
body > .where-not .materiality h3 {
  font-size: 270%;
  line-height: 1;
}
body > .where-not .materiality p {
  margin: 20px 0;
  font-weight: bold;
}
body > .where-not .materiality h3 {
  position: relative;
}
body > #Contents .hht-wrap .materiality h3+p,
body > .where-not .materiality h3+p{
  margin:  20px 0 20px 0 ;
}
body > .where-not .materiality a:hover {
  background: var(--main-dark);
  text-decoration: none !important;
}
.materiality ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.materiality ul li {
  width: 200px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: .5s;
}
.materiality ul li .img_box{
  width: 140px;
  aspect-ratio: 1/1;
  transition: .5s;
  border-radius: 500px;
}
.materiality ul li:nth-child(1) .img_box{
  background: #fff url(/assets/image/jp/ja/sustainability/index/ico_01.png)no-repeat center center / 100px;
}
.materiality ul li:nth-child(2) .img_box{
  background: #fff url(/assets/image/jp/ja/sustainability/index/ico_02.png)no-repeat center center / 100px;
}
.materiality ul li:nth-child(3) .img_box{
  background: #fff url(/assets/image/jp/ja/sustainability/index/ico_03.png)no-repeat center center / 100px;
}
.materiality ul li:nth-child(4) .img_box{
  background: #fff url(/assets/image/jp/ja/sustainability/index/ico_04.png)no-repeat center center / 100px;
}
.materiality ul li:nth-child(5) .img_box{
  background: #fff url(/assets/image/jp/ja/sustainability/index/ico_05.png)no-repeat center center / 100px;
}
body > #Contents .hht-wrap .materiality ul li p {
  line-height: 1.5em;
  font-size: 90%;
  margin-top: 10px;
  display: inline-block;
    position: relative;
}
/*
=====================
banner
=====================
*/
.sus_banner {
  max-width: 1275px;
  margin: 80px auto;
  left: 0;
  right: 0;
  position: relative;
}
.sus_banner .sus_banner_box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.sus_banner .sus_banner_box div {
  width: 48%;
  border: 1px solid #000;
  transition: .5s;
}
.sus_banner .sus_banner_box div a{
  display: block;
}
.sus_banner .sus_banner_box div img {
  width: 100%;
}
.sus_banner .sus_banner_box div:hover{
  transform: scale(1.03);
}
/*
=====================
ESG
=====================
*/
.esg_action {
  max-width: 1275px;
  margin: 24px auto;
  left: 0;
  right: 0;
}
body > #Contents .hht-wrap .esg_action h3 {
  position: relative;
  padding-right: 1.5em;
  color: var(--white);
  padding: 7px 20px;
  font-size: 150%;
}
body > #Contents .hht-wrap .esg_action h3 {
  background-image: linear-gradient(50deg, var(--env-main), #b9df52);
}
body > #Contents .hht-wrap .esg_action h3.scl_dt {
  background-image: linear-gradient(50deg, #f781a1, #fbb061);
}
body > #Contents .hht-wrap .esg_action h3.gvn_dt {
  background-image: linear-gradient(50deg, #be91cb, #64a8df);
}
body > .where-not .esg_action ul {
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}
body > .where-not .esg_action ul li {
  margin: 0 40px 10px 0;
}
body > .where-not .esg_action ul li:has(h5) {
  margin: 0 20px 10px 0;
}
body > .where-not .esg_action ul li a {
  position: relative;
  padding: 0 20px 0 0;
}
body > .where-not .esg_action ul li a::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px var(--env-main);
  border-right: solid 2px var(--env-main);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  margin: auto;
  transition: .5s;
}
body > .where-not .esg_action ul + ul {
  margin-top: 0;
}
body > .where-not .esg_action .scl_dd ul li a::after {
  border-top: solid 2px var(--scl-main);
  border-right: solid 2px var(--scl-main);
}
body > .where-not .esg_action .gvn_dd ul li a::after {
  border-top: solid 2px var(--gvn-main);
  border-right: solid 2px var(--gvn-main);
}
body > .where-not .esg_action ul li a:hover::after{
  right:-5px;
}
body > .where-not .esg_action .env_dd {
  /* display: flex; */
  flex-wrap: wrap;
}
body > .where-not .esg_action .env_dd ul:first-child {
  width: 100%;
}
body > .where-not .esg_action .env_dd h5 {
  background: #dbf2ef;
  font-size: 17px;
  display: inline-block;
  padding: 3px 15px;
}
body > #Contents .esg_action a {
  color: #000;
  font-weight: bold;
}
/*
=====================
その他
=====================
*/
.sus_other {
  max-width: 1275px;
  margin: 24px auto;
  left: 0;
  right: 0;
}
.sus_other ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sus_other li {
  width: 19%;
}
.sus_other a {
  width: 100%;
  display: flex;
  border: 2px solid var(--main);
  padding: 20px;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sus_other a::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px var(--main);
  border-right: solid 2px var(--main);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
}
/* 
=======================================================
PC版（↑♾️〜1308px↓まで）
======================================================= 
*/
@media screen and (min-width: 1308px) {
  .pc {
    display: block;
  }
  .tab,
  .materiality ul li.tab {
    display: none;
  }
  .sp {
    display: none;
  }
  .esg_action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .esg_action_box {
    width: 32%;
  }
  .pickup span.sp {
    display: none;
  }
}
/* 
=======================================================
PC・TAB版（〜768px）
======================================================= 
*/
@media screen and (min-width: 768px) {
  .sus_cont > div+div{
  margin-left:20px;
}
}
/* 
=======================================================
TAB版（1307〜768px）
======================================================= 
*/
@media screen and (min-width: 768px) and (max-width: 1307px) {
  .pc {
    display: none;
  }
  .tab {
    display: block;
  }
  .sp {
    display: none;
  }
  .sus_other ul {
    justify-content: center;
  }
  .sus_other li {
    width: 30%;
    margin: 10px;
  }
  .pickup{
    right: 20px;
  }
  .pickup span.sp {
    display: none;
  }
  .materiality ul li:last-child {
    background: none;
    border: none;
    box-shadow: none;
  }
}
/* 
=======================================================
TAB・SP版（1307px↓以下）
======================================================= 
*/
@media screen and (max-width: 1307px) {
  body > .where-not .main_img h1 {
    margin-left: 20px;
  }
  .materiality {
    padding: 7%;
  }
  .materiality ul li {
    margin-bottom: 40px;
  }
  body > .where-not .materiality p {
    font-size: 12px;
    width: 100%;
  }
  body > .where-not .esg_action ul {
    display: flex;
  }
  body > .where-not .esg_action .env_dd,
  body > .where-not .esg_action .env_dd ul,
  body > .where-not .esg_action ul {
    display: block;
  }
}
/* 
=======================================================
SP版（767px↓以下）
======================================================= 
*/
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .tab,
  .materiality ul li.tab {
    display: none;
  }
  .pc-tab,
  .pickup span.pc-tab {
    display: none;
  }
  .sp {
    display: block;
  }
  .main_img {
    height: 470px;
    background: url(/assets/image/jp/ja/sustainability/index/main_sp.jpg) no-repeat right 10% center/cover;
  }
  body > .where-not .main_img h1 {
    justify-content: flex-start;
    margin-left: 6%;
    margin-top: 40px;
  }
  .pickup {
    width: 90%;
    height: 45%;
    right: 0;
    left: 0;
    bottom: 5%;
    top: auto;
    min-height: unset;
  }
  body > #Contents .hht-wrap .esg_action h3 {
    display: block;
    font-size: 20px;
  }
  .sus_cont > div {
    width: 100%;
  }
  .sus_cont > div + div {
    margin-top: 20px;
  }
  .sus_other li {
    width: 100%;
  }
  .sus_other li + li {
    margin-top: 10px;
  }
  body > .where-not .materiality p:not(.readmore) {
    width: 100%;
  }
  .materiality {
    justify-content: space-between;
    padding: 50px 20px 24px;
  }
  .materiality_banner_box a{
    width: 100%;
  }
  body > .where-not .materiality p {
    margin-inline: auto;
  }
  body > .where-not .materiality h3 {
    font-size: clamp(12px, 5vw, 40px);
    margin-left: 5%;
  }
  body > .where-not .materiality h3::before {
    left: -6vw;
    width: 4vw;
    height: 7vw;
  }
  body > .where-not [class^="hht-"] h3.scl_dt,
  body > .where-not [class^="hht-"] h3.gvn_dt {
    margin-top: 20px;
  }
  body > .where-not .esg_action .env_dd h5 {
    font-size: 15px;
  }
  .esg_action {
    display: block;
  }
  .sus_cont > div a {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }
  body > #Contents .hht-wrap .materiality ul li p {
    font-size: clamp(12px, 2vw, 16px);
  }
  .materiality .materiality_banner span {
    width: auto;
  }
  .sus_banner .sus_banner_box div {
    width: 100%;
  }
  .sus_banner .sus_banner_box div + div {
    margin-top: 10px;
  }
}
/* 
=======================================================
最小幅（290px↓以下）（以下固定）
======================================================= 
*/
@media screen and (max-width: 290px) {
}
@media print {
}