.sustainability_contents ul{
  list-style: none;
}
.sustainability_contents ul li,
.sustainability_contents div,
.sustainability_contents figure
{
  box-sizing: border-box;
}
.sustainability_contents a:hover{
  text-decoration-line:none;
}
.sustainability_contents .inner,
#news,
#mainmenu,
#esg
{
  width: min(90%, 980px);
  margin:0 auto;
}

/* news */
#news{
  position: relative;
  margin:3em auto 0;
}
#news h2:not(span),
#sustainabilitytopics h2:not(span){
  font-size:700%;
  color:#0050ff;
  font-family: "sofia-pro-narrow", sans-serif;
  font-weight: 600;
  font-style: normal;
}
#news h2 span,
#sustainabilitytopics h2 span{
  display:block;
  font-size:28%;
  color:#0050ff;
  margin:.5em 0 0;
}
#news h2{
  margin:.5em 0 0;
  margin:0;
  width:20%;
}
#news ul {
  width:80%;
  margin:2em 0 0;
}
#news ul li{
  padding:1.3em 0;
  border-bottom:1px solid #0050ff;
  font-size:150%;
}
#news ul li{
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 1.2em;
}
#news ul li span.ymd{
  flex: 0 0 auto;
  font-weight: 600;
  color:#0050ff;
}
#news ul li p{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height:140%;
}
@media all and (max-width: 767px) {
#news{
  margin:4vw auto 0;
}
#news h2{
  margin:0;
  width:100%;
}
#news h2:not(span),
#sustainabilitytopics h2:not(span){
  font-size:12vw;
}
#news h2 span,
#sustainabilitytopics h2 span{
  margin:1vw 0 0;
}
#news ul{
  width:100%;
  padding:1vw 0;
  margin:0;
}
#news ul li{
  padding:3vw 0;
  font-size:3vw;
}
#news ul li{
  gap: .8em;
}
#news ul li span.ymd{
  font-size: 90%;
}
}
#news .news-mascot{
  position: absolute;
  bottom: -1em;
  right: 0;
  width: 13%;
  height: auto;
}
@media all and (min-width: 768px) {
#news{
  display: flex; flex-flow: row wrap; justify-content: space-between;
}
#news .news-mascot{
  display:none;
}
}
@media all and (max-width: 767px) {
#news .news-mascot{
  width: 17vw;
  right:-1vw;
  top:-2.5vw;
  animation: floating-y 2s ease-in-out infinite alternate-reverse;  
}
}
.wrapper{
  position: relative;
  background-color:#fff;
  padding:4em 0 0;
}
.wrapper .txt {
  color:#ebebeb;
  font-family: "sofia-pro-narrow", sans-serif;
  font-weight: 500;
  font-style: normal;
  fill: currentColor;
}

@media all and (min-width: 768px) {
.wrapper{
  padding:7em 0 0;
  /*background: url(../img/wakty1.png) no-repeat  right calc(50% - 500px) top .5% / 120px;*/
}
.wrap-mascot{
  position: absolute;
  z-index: 1;
  top: -1em;
  right:5%;
  width: 120px;
  height: auto;
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
}
@media all and (max-width: 767px) {
.wrap-mascot{
  display:none;
}
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(10%);
  }
}  


.wrapper::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  margin-top: 47%;
  height: 150px;
  background-color: #f5f5f5;
}
@media all and (max-width: 767px) {
  .wrapper::before{
    margin-top: 70.5%;
    height: 160px;
  }
}
.sus-loop{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  overflow-x: hidden;
  pointer-events: none;
  user-select: none;
}
.sus-loop svg{
  display: block;
  width: 120%;
  height: auto;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sus-loop .sus-dome{
  fill: #f5f5f5;
}
@media all and (max-width: 767px) {
  .sus-loop svg {
    width: 180%;
  }
}

.layer1{
  position: relative;
  z-index: 1;
  border-radius:60px 60px 0 0;
  background-color:#fff;
}
.layer2{
  border-radius:0 60px 0 0;
  background-color:#eff7ff;
}
.layer3{
  border-radius:60px 0 0 0;
  background-color:#fff;
}


/* mainmenu */
#mainmenu{
  position: relative;
  z-index: 1;
  margin:8em auto 10em;
}
#mainmenu h3{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  background-color:#fff;
  border:1px solid #0050ff;
  color:#0050ff;
  font-size:180%;
  border-radius:10px;
  width:86%;
  padding:.5em 0;
  margin:0 auto;
}
#mainmenu ul{
  display: flex; flex-flow: row wrap; justify-content: center;
}
#mainmenu ul li{
  width:31.5%;
  font-weight: 600;
  text-align:center;
  color:#0050ff;
  margin:1em 0 2.4em;
}
#mainmenu ul  li a{
  position: relative;
  background-color:#fff;
  border:1px solid #0050ff;
  border-radius:50px 50px 50px 0;
  display:block;
  aspect-ratio: 67 / 49;
  margin:0 0 .8em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  box-shadow: inset 0px 0px 0px 8px #fff;
  overflow: visible;
}
#mainmenu ul li.message a{
  border-radius:50px 50px 50px 0;
  background-image: url(../img/message.webp);
}
#mainmenu ul li.materiality a{
  border-radius:50px 50px 0 50px;
  background-image: url(../img/materiality.webp);
}
#mainmenu ul li.system a{
  border-radius:0 50px 50px 50px;
  background-image: url(../img/system.webp);
}
@media all and (min-width: 768px) {
#mainmenu ul{
  justify-content: space-between;
}
}
@media all and (max-width: 767px) {
#mainmenu{
  margin:8vw auto;
}
#mainmenu ul li{
  width:48%;
  margin:0 0 5vw;
}
#mainmenu ul li:first-of-type{
  margin:0 4% 5vw 0;
}
#mainmenu ul  li a{
  box-shadow: inset 0px 0px 0px 6px #fff;
}
#mainmenu h3{
  font-size:2.7vw;
  white-space:nowrap;
  width:90%;
}
#mainmenu ul li.message a{
  border-radius:8vw 8vw 8vw 0;
}
#mainmenu ul li.materiality a{
  border-radius:8vw 8vw 0 8vw;
}
#mainmenu ul li.system a{
  border-radius:0 8vw 8vw 8vw;
}
}

/* sdgs */
#sdgs{
  position: relative;
  padding:6.5em 0 8em;
  margin:10em auto 0;
}
#sdgs h2{
  position: absolute;
  top: -4em;
  left: 0;
  width: 100%;
  background: url(../img/sdgs.svg) no-repeat center top;
  text-align:center;
  padding:85px 0 0;
  background-size:380px;
}
#sdgs h2 .sdgs-mascot{
  position: absolute;
  top: -10px;
  left: calc(50% + 200px);
  width: 120px;
  height: auto;
}
#sdgs h2 span{
  color:#0050ff;
  font-size:200%;
  margin:.5em 0 0;
  display:block;
}
#sdgs ul{
  margin:3em auto;
  display: flex; flex-flow: row wrap; justify-content: center;
}
#sdgs ul li{
  width:34%;
  font-weight: 600;
  font-size:180%;
  text-align:center;
  color:#0050ff;
  margin:1em 1.5em 1em;
}
#sdgs ul  li a{
  position: relative;
  background-color:#fff;
  border:1px solid #0050ff;
  display:block;
  aspect-ratio: 67 / 49;
  margin:0 0 .8em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70%;
}
#sdgs ul li a::after{
  content: "";
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 12%;
  aspect-ratio: 1 / 1;
  background: url(../img/arrow.svg) no-repeat center / contain;
}
#sdgs ul li.week a{
  border-radius:50px 50px 0 50px;
  background-image: url(../img/week.png);
}
#sdgs ul li.hiroba a{
  border-radius:0 50px 50px 50px;
  background-image: url(../img/hiroba.png);
}
#sdgs ul li.channel a{
  border-radius:50px 50px 50px 0;
  background-image: url(../img/channel.svg);
}
#sdgs ul li.action a{
  border-radius:50px 50px 0 50px;
  background-image: url(../img/action.png);
}
@media all and (max-width: 767px) {
#sdgs{
  padding:12vw 0 12vw;
  margin:14vw auto 0;
}
#sdgs h2{
  top: -7vw;
  padding:13.5vw 0 0;
  background-size:60vw;
}
#sdgs h2 span{
  font-size:3.5vw;
}
#sdgs h2 .sdgs-mascot{
  width: 17vw;
  left: auto;
  right: 2vw;
  top: -1vw;
}
#sdgs ul{
  margin:3vw auto 0;
  justify-content: space-between;
}
#sdgs ul li{
  width:48.5%;
  margin:2vw 0;
  font-size:3vw;
}
#sdgs ul  li a{
  margin:0 0 1.5vw;
}
#sdgs ul li a::after{
  right: 10%;
  bottom: 10%;
  width: 12%;
}
#sdgs ul li.week a{
  border-radius:8vw 8vw 0 8vw;
}
#sdgs ul li.hiroba a{
  border-radius:0 8vw 8vw 8vw;
}
#sdgs ul li.channel a{
  border-radius:8vw 8vw 8vw 0;
}
#sdgs ul li.action a{
  border-radius:8vw 8vw 0 8vw;
}
}


/* sustainability topics */
#sustainabilitytopics{
  position: relative;
  width: min(98%, 980px);
  margin: 0 auto;
  padding-top: 7.7em;
}
#sustainabilitytopics .topics-head{
  position: absolute;
  top: -5em;
  left: 0;
  width: max-content;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 1.2em;
}
#sustainabilitytopics .topics-mascot{
  flex: none;
  width: 110px;
  height: auto;
}
#sustainabilitytopics a.btn_more{
  border-radius:100vh;
  display:block;
  padding:1em 0 1em 2em;
  color:#fff;
  background-color:#0050ff !important;
  font-weight: 600;
  font-size:160%;
  line-height:140%;
  background: url(../img/arrow_w.svg) no-repeat right 6% center;
  background-size: 8%; 
  width:180px;
  margin:.5em auto 0; 
}

@media all and (max-width: 767px) {
#sustainabilitytopics{
  padding-top: 8vw;
}
#sustainabilitytopics h2:not(span){
  font-size:8.8vw;
}

#sustainabilitytopics .topics-head{
  top: -6vw;
  left: 1vw;
  gap:1.4vw;
}
#sustainabilitytopics .topics-mascot{
  width: 15vw;
}
#sustainabilitytopics a.btn_more{
  padding:2.5vw 0 2.5vw 4vw;
  font-size:3.6vw;
  background: url(../img/arrow_w.svg) no-repeat right 6% center;
  background-size: 3.5vw; 
  width:40%;
  margin:0 auto; 
}
}

/* archive link */
.archive-link{
  position: relative;
  display: block;
  width:400px;
  margin: 5em auto 4em;
  border: 1px solid #0050ff;
  border-radius: 0 40px 0 40px;
  padding:1.25em 0;
  color: #0050ff !important;
  font-weight: 600;
  font-size: 210%;
  text-align:center;
  box-sizing: border-box;
}
.archive-link .archive-tag{
  position: absolute;
  top: 0;
  left: -1px;
  transform: translateY(-60%);
  background-color: #0050ff;
  color: #fff;
  font-size: 80%;
  padding: .6em 1em .6em 2em;
  border-radius:12px 12px 12px 0;
  background-image: url(../img/check.svg);
  background-repeat: no-repeat;
  background-position: .5em center;
  background-size: 1em auto;
}
.archive-link .archive-arrow{
  display: inline-block;
  width: 1.5em;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
  margin-left: .5em;
  background: url(../img/arrow.svg) no-repeat center / contain;
}
@media all and (max-width: 767px) {
.archive-link{
  border-radius: 0 6vw 0 6vw;
  font-size:3.8vw;
  padding:5vw 0 4vw;
  width:70%;
  margin:14vw auto 8vw;
}
.archive-link .archive-tag{
  left: -1px;
  font-size: 80%;
  padding: .6em 1em .6em 2em;
  border-radius:12px 12px 12px 0;
  background-image: url(../img/check.svg);
  background-repeat: no-repeat;
  background-position: .5em center;
  background-size: 1em auto;
}
.archive-link .archive-arrow{
  width:4vw;
  margin-left:1vw;
}
}




/* =========================================================
   ESGセクション 全体レイアウト
   ========================================================= */
#esg {
  margin: 3em auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5em;
}

#esg .evironment,
#esg .social,
#esg .governance {
  position: relative;
  color: #fff;
  border-radius: 0 30px 30px 30px;
  padding: .5em 2em 1em;
}

#esg .evironment {
  grid-column: 1 / -1;
  width: 100%;
  max-width: calc(50% - 1.1em);
  background-color: #33ca85;
}

#esg .social {
  grid-column: 1;
  background-color: #fb9957;
}

#esg .governance {
  grid-column: 2;
  background-color: #47cfd6;
}

@media all and (min-width: 768px) {
#esg .evironment {
  margin: 0 auto 1.5em;
}
}
@media all and (max-width: 767px) {
  #esg {
    grid-template-columns: 1fr;
    gap: 10vw;
    width:88%;
    margin:5vw auto;
  }
#esg .evironment,
#esg .social,
#esg .governance {
  border-radius: 0 6vw 6vw 6vw;
  padding:4vw 4vw 1vw;
}
  #esg .evironment {
    max-width: 100%;
  }
  #esg .social,
  #esg .governance {
    grid-column: 1;
  }
}

/* =========================================================
   h3 タブ本体 ＆ 逆角丸の完全物理構造
   ========================================================= */
#esg h3 {
  position: absolute !important;
  z-index: 3 !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateY(-40%) !important;
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  border-radius: 20px 20px 0 0;
  font-size: 600%;
  font-weight: 600;
  white-space: nowrap !important;
  padding: 0.15em 0.5em 0.15em 20%;
  background-repeat: no-repeat !important;
  margin: 0 !important;
  line-height: 0.9 !important;
}

#esg h3 .h3-label {
  display: flex !important;
  flex-direction: column !important;
}

#esg h3 span {
  display: block !important;
  font-size: 50% !important;
  margin-top: 0.25em !important; /* 英字との隙間確保 */
  line-height: 1 !important;
}

/* ---------------------------------------------------------
   逆角丸：h3の右下に「白い円（20px）」を置き、
   ボックス影（box-shadow）を各色で伸ばすことで絶対にくびれを作る
   --------------------------------------------------------- */
#esg h3::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;          /* h3の右下に固定 */
  right: -20px !important;       /* h3の右横へ突き出させる */
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% 0 0 0 !important; /* 左上を丸める */
  pointer-events: none !important;
  z-index: 4 !important;
}

/* 各カラーごとの背景画像 ＆ 影伸ばしによる逆角丸構築 */
#esg .evironment h3 {
  background-color: #33ca85 !important;
  background-image: url(../img/evironment.svg) !important;
  background-size: 25% !important;
  background-position: left 15% center !important;
}

#esg .social h3 {
  background-color: #fb9957 !important;
  background-image: url(../img/social.svg) !important;
  background-size: 32% !important;
  background-position: left 15% center !important;
}
#esg .governance h3 {
  background-color: #47cfd6 !important;
  background-image: url(../img/governance.svg) !important;
  background-size: 18% !important;
  background-position: left 12% center !important;
}


@media all and (max-width: 767px) {
#esg h3{
  top: -6vw;
  gap: 1.6vw;
  padding:2vw 6vw 2vw 16vw;
  font-size: 11vw;
  border-radius: 5vw 5vw 0 0;
}
#esg h3::before{
  width: 4.5vw;
  height: 4.5vw;
}
}

/* =========================================================
   リスト部分
   ========================================================= */
#esg .evironment ul,
#esg .social ul,
#esg .governance ul {
  margin: 0;
  padding: 4.5em 0 0 !important;
}

#esg .evironment ul li,
#esg .social ul li,
#esg .governance ul li {
  color: #fff;
}

#esg .evironment ul li a,
#esg .social ul li a,
#esg .governance ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8em 0;
  border-bottom: 1px solid rgba(255,255,255,.45);
  color: #fff;
  font-weight: 600;
  font-size: 190%;
  background: url(../img/arrow_s_w.svg) no-repeat right 2% center / 2%;
}

#esg .evironment ul li:last-child a,
#esg .social ul li:last-child a,
#esg .governance ul li:last-child a {
  border-bottom: none;
}

@media all and (max-width: 767px) {
#esg .evironment ul,
#esg .social ul,
#esg .governance ul {
  padding: 6vw 0 0 !important;
}
#esg .evironment ul li a,
#esg .social ul li a,
#esg .governance ul li a{
  padding: 3vw 0;
  font-size: 4vw;
}
}

/* =========================================================
   バッジ部分
   ========================================================= */
#esg .tbsgx,
#esg .tbscsr {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-24%);
  width: 46%;
  aspect-ratio: 208 / 63;
  background-color: #fff;
  border-radius: 18px 18px 0 18px;
  box-sizing: border-box;
}

#esg .tbsgx { border: 2px solid #33ca85; }
#esg .tbscsr { border: 2px solid #fb9957; }

#esg .tbsgx a,
#esg .tbscsr a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding:0 0 .5em 0.8em;
  text-decoration: none;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

#esg .tbsgx a {
  background-size:75%;
  background-image: url(../img/gx_logo.png);
  background-position: calc(50% - 0.8em) 30%;
}
#esg .tbscsr a {
  background-size:60%;
  background-image: url(../img/csr.png);
  background-position: center top 30%;
}

#esg .tbsgx a::after,
#esg .tbscsr a::after {
  content: "";
  position: absolute;
  top: 50%;
  right:.7em;
  transform: translateY(-50%);
  width: 12px;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#esg .tbsgx a::after { background-image: url(../img/arrow_s_g.svg); }
#esg .tbscsr a::after { background-image: url(../img/arrow_s_o.svg); }

#esg .badge-sub {
  color: #969696;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  width:100%;
}


@media all and (max-width: 767px) {
#esg .tbsgx,
#esg .tbscsr{
  border-radius: 3vw 3vw 0 3vw;
}
#esg .tbsgx a,
#esg .tbscsr a {
  padding:0 0 1vw 0;
}
#esg .tbsgx a::after,
#esg .tbscsr a::after {
  top: 50%;
  right:.8vw;
  width: 3vw;
}
#esg .badge-sub{
  font-size:2vw;
}
}

#esg ul.btn_sub{
  grid-column: 1 / -1;
  display: flex; flex-flow: row wrap; justify-content: center;
}
#esg ul.btn_sub li{
  width:32%;
}
#esg ul.btn_sub li a{
  border:1px solid #0050ff;
  border-radius:100vh;
  display:block;
  padding:1.1em 1.8em;
  color:#0050ff;
  font-weight: 600;
  font-size:160%;
  line-height:140%;
  background: url(../img/arrow_b.svg) no-repeat right 5% center;
  background-size: 6%;  
}
@media all and (min-width: 768px) {
#esg ul.btn_sub{
  justify-content: space-between;
}
}
@media all and (max-width: 767px) {
#esg ul.btn_sub li{
  width:78%;
  margin:0 auto 2vw;
}
#esg ul.btn_sub li a{
  background-size: 6%;  
  font-size:3.5vw;
  padding:4vw 4vw;
}
}