@charset "utf-8";
/* ************************************************** 
Name: sustn.css
Description: common for sustainability CSS
Create: 2025.8.26
Copyright 2025 CANON, Ltd.
***************************************************** */ 

/* ================================================== 
BreakPoint
-1380
-1100
-769
-579
-399
===================================================== */

:root {
  --main: #0366b4;/*ブランドカラー（ブルー）*/
  --main2: #76bff7;/*黒地用ブランドカラー（水色）*/
  --back: #F4F4F4;/*背景色（グレー）*/
  --blue-back: #EEF6FC;/*背景色（水色）*/
  --point: #fffb80;/*ボタン用ポイントカラー（黄色）*/
  --text: #333;/*通常文字色*/
  --accenttext: #0072BC;/*目立たせる文字色（ブルー）*/
  --paletext: #999999;/*淡い文字色*/
  --paletext2: #a7c6d9;/*淡い青系文字色*/
  --red: #D80030;/*日立レッド*/
  --round: 24px;/*通常角丸サイズ*/
  --round_s: 16px;/*小さめ角丸サイズ*/
  --border-color: #bbb;
  --border-color2: #A8C9E2;
  --border-btm-color: #E9E9E9;
}

/*--------------------------------------------------------------------------------------- 
元のCSS打ち消しや流用
---------------------------------------------------------------------------------------*/
main .site-footer {
  margin-top: 0;
}
main .title h1 {
  border: none;
  margin-bottom: 0;
  color: initial;
  cursor: initial;
}
main .title h1:hover {
  color: initial;
}
main .page-header {
  padding-bottom: 0;
  margin: 0 auto 0;
  border: none;
}
main .mod-contact {
  margin-top: 0 !important;
}
.mod-pnl-04 > .list > li > .pnl > .image {
  aspect-ratio: 355 / 222;
}
.mod-hdg-al3 {
  margin-top: 80px;
}
a .mod-link > .link-title::before {
  content: "";
  display: block;
  position: absolute;
  margin: auto 0;
  z-index: 0;
  top: 0;
  bottom: auto;
  left: 0;
  width: 17px;
  height: 26.4px;
  border-radius: 0;
  background: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB2aWV3Qm94PSIwIDAgMTcgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZD0ibTAgMGgxN3YxN2gtMTd6Ii8+PGcgc3Ryb2tlPSIjYzAwIj48cGF0aCBkPSJtMTMuNSA4LjVoLTExIi8+PHBhdGggZD0ibTE0LjUgOC40OTktNS42OTUtNS42NSIvPjxwYXRoIGQ9Im0xNC41IDguNS01LjY5NSA1LjY1Ii8+PC9nPjwvZz48L3N2Zz4=) no-repeat center;
  background-size: contain;
  line-height: 1.65;
}
a .mod-link > .link-title {
  display: block;
  position: relative;
  padding: 0 0 0 34px;
  float: left;
  color: #222;
  line-height: 1.65;
  text-decoration: none;
}
.mod-link .description {
  clear: both;
}
.mod-btn > .inner {
  margin-top: 0;
  margin-left: 0;
}
.btn.of-icon-download {
  margin-bottom: 8px;
}
/*------------------------------------------------------------------元のCSS打ち消しや流用*/



/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
@media (min-width: 1100px) {/*↑↑↑1100px以上↑↑↑*/
  .without_pc {/*PCだけ除外*/
    display: none;
  }
}
@media (max-width: 579px) {/*↓↓↓579px以下↓↓↓*/
  .without_sp-L {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 399px) {/*↓↓↓399px以下↓↓↓*/
  .without_sp {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 769px) {/*↓↓↓1099px以下↓↓↓*/
  .for_pc {/*PCだけ表示*/
    display: none;
  }
}
@media (min-width: 769px) {/*↑↑↑769px以上↑↑↑*/
  .for_sp-L {/*SPだけ表示*/
    display: none;
  }
}
@media (min-width: 400px) {/*↑↑↑400px以上↑↑↑*/
  .for_sp {/*SPだけ表示*/
    display: none;
  }
}
main img {
  max-width: 100%;
}
main figure {
  text-align: center;
  overflow: hidden;
}
main figure img {
  object-fit: cover;
}
main a > figure + p {
  margin-top: 8px;
}
/*見出しおよびテキスト装飾*/
body {
  color: var(--text);
  font-family: "Noto Sans JP";
}
main small {
  font-size: 1.2rem;
}
@media (max-width: 399px) {
  main small {
    font-size: 1rem;
  }
}
main small.prof {
  font-size: 1.4rem;
}
h2[class^="sustn"] {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  h2[class^="sustn"] {
    font-size: 2.4rem;
  }
}
h2.sustn {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  h2.sustn {
    display: block;
    padding: 0;
    text-align: center;
  }
}
h2[class^="sustn"]::before {
  content: '';
  display: inline-block;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/common/image/deco-h2.svg);
  width: 48px;
  height: 22px;
  margin-right: 8px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  h2[class^="sustn"]::before {
    display: block;
    margin: 0;
  }
}
h2.sustn::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border-color2); 
  margin-left: 8px;
}
@media screen and (max-width: 768px) {
  h2.sustn::after {
    content: unset;
  }
}
/* @media screen and (max-width: 768px) {
  h2.higher::before {
    position: absolute;
    top: 0;
    left: 0;
  }
  h2.higher {
    padding-left: 57px;
    position: relative;
  }
} */
.plain-html h3:not(.mod-contact__subtext) {
  font-size: 2.8rem;
}
@media screen and (max-width: 768px) {
  .plain-html h3:not(.mod-contact__subtext) {
    font-size: 2rem;
  }
}
main h4 {
  font-weight: bold;
  font-size: 2rem;
}
main dt {
  font-weight: bold;
}
main time {
  color: var(--paletext);
  display: inline-block;
}
.footnote {
  color: var(--paletext);
}
.footnote small {
  font-size: 1.4rem;
  font-family: "Poppins", "Noto Sans JP";
}
@media screen and (max-width: 767px) {
  .footnote small {
    font-size: 1.2rem;
  }
}
.footnote small::before {
  content: '*';
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.list-type-dot li::before {
  content: '・';
}
.list-type-dot li {
  text-indent: -1em;
  padding-left: 1em;
}
/*リンク装飾関連*/
a {
  color: #333;
  text-decoration: none;
}
/* ホバー */
a:hover > .arrow,
a:hover .arrow,
.arrows a:hover p,
.arrows a:hover {
  text-decoration: underline;
}
main a img,
.toggle-btn img {
  transition: .2s all;
  will-change: transform;
  backface-visibility: hidden;
}
main a:hover img:not(.normal-hover-img),
.toggle-btn:hover img {
  transform: scale(1.08);
  opacity: .85;
}
.arrow,
.arrows a p {
  position: relative;
  display: inline-block;
  padding-left: 24px;
}
.arrows > * {
  position: relative;
}
.arrows > *:not(.report.esg-back) a {
  padding-left: 24px;
}
.arrow::before,
.arrows > *:not(dt):not(li):not(.report.esg-back) a::before,
.arrows a p::before {
  content: "";
  width: 17px;
  height: 21.4px;
  background: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB2aWV3Qm94PSIwIDAgMTcgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZD0ibTAgMGgxN3YxN2gtMTd6Ii8+PGcgc3Ryb2tlPSIjYzAwIj48cGF0aCBkPSJtMTMuNSA4LjVoLTExIi8+PHBhdGggZD0ibTE0LjUgOC40OTktNS42OTUtNS42NSIvPjxwYXRoIGQ9Im0xNC41IDguNS01LjY5NSA1LjY1Ii8+PC9nPjwvZz48L3N2Zz4=) no-repeat center;
  background-size: contain;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease;
}
/* a:hover .arrow::before,
.arrows > *:not(dt):not(li) a:hover::before,
.arrows a:hover p::before {
  transform: translate(3px);
} */
.arrows_blue a {
  display: block;
}
.arrows_blue a p::after {
  content: '';
  width: 11px;
  height: 20px;
  display: inline-block;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/common/image/icon-arrow-blue.svg);
  position: absolute;
  bottom: 4px;
  margin-left: 8px;
  transition: transform 0.3s ease;
}
.arrows_blue a:hover p {
  text-decoration: underline;
}
.arrows_blue li:hover a p::after {
  transform: translateX(5px);
}
.arrows_blue a p {
  position: relative;
  line-height: 32px;
}
@media screen and (max-width: 767px) {
  .arrows_blue a p {
    padding-right: 5px;
  }
}
/*ボックス*/
.flexblock {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flexblock.center,
dl.center > * {
  text-align: center;
}
.flexblock.end {
  justify-content: flex-end;
}
.block {
  margin: auto;
  max-width: 100%;
}
@media (max-width: 1099px) {
  .flexblock {
    justify-content: center;
    gap: 32px 16px;
  }
}
@media screen and (max-width: 768px) {
  .flexblock {
    margin-top: 32px;
  }
}
.flexblock + .flexblock {
  margin-top: 80px;
}
.pic-txt .textbox {
  width: 545px;
  max-width:100%;
}
.textbox p:not(:last-child),
.textbox h3:not(:last-child),
.pic-txt:not(:last-child) {
  margin-bottom: 40px;
}
figure.no-border-radius {
  border-radius: unset;
}
@media screen and (max-width: 950px) {
  .img-wide {
    width: 100%;
    overflow-x: auto;  /* 横スクロール有効 */
    -webkit-overflow-scrolling: touch;
  }
  .img-wide img {
    height: 80vh;     /* 縦画面いっぱい */
    width: auto;       /* 横幅は自動 */
    display: block;
    max-width: unset;
  }
}
.circle {
  position: relative;
}
nav.circle {
  justify-content: center;
  margin-top: 40px;
}
.circle figure {
  border-radius: 300px;
  overflow: hidden;
  position: relative;
}
nav.circle figure,
nav.circle figure img {
  width: 290px;
}
@media screen and (max-width: 1229px) {
  nav.circle figure,
  nav.circle figure img {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 768px) {
  nav.circle figure,
  nav.circle figure img {
    width: 130px;
    height: 130px;
  }
}
@media screen and (max-width: 487px) {
  nav.circle figure,
  nav.circle figure img {
    width: 100px;
    height: 100px;
  }
}
.circle figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
main .circle img {
  max-width: none;
}
.textbox small:not(:last-child) {
  margin-bottom: 24px;
  display: block;
}
.textbox_wide {
  /* width: 1073px; */
  max-width: 100%;
  margin: 0 auto 30px;
}
.textbox_wide:last-child {
  margin-bottom: 80px;
}
.textbox.wide-3q {
  width: 75%;
}
@media screen and (max-width: 758px) {
  .textbox.wide-3q {
    width: unset;
  }
}
.flexblock.wide-half {
  justify-content: space-between;
  gap: 16px;
  margin: auto;
}
@media screen and (max-width: 578px) {
  .flexblock.wide-half {
    width: 300px;
    max-width: 85%;
  }
}
.wide-half > * {
  flex: 1;
}
@media screen and (max-width: 1379px) {
  .wide-half > * {
    flex: unset;
  }
}
.wide-half .banner .flexblock {
  justify-content: flex-start;
  gap: 0 16px;
}
@media screen and (max-width: 578px) {
  .wide-half .banner .flexblock {
    justify-content: center;
  }
}
.banner .flexblock dd {
  flex: 1;
}
@media screen and (max-width: 578px) {
  main .flexblock.wide-half figure img,
  main .flexblock.pic-txt.with-spic img {
    width: 100vw;
    height: auto;
    margin-bottom: 24px;
  }
}
.banner + ul {
  margin-top: 16px;
}
.white-pic {
  border: 1px solid #ddd;
}
[class^="blue-back"] {
  background: var(--blue-back);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
[class^="blue-back"] strong {
    font-size: 4rem;
    color: var(--accenttext);
    font-weight: 500;
}
[class^="blue-back"] dd {
    font-weight: bold;
}
.blue-back-small {
  width: 340px;
  min-height: 160px;
  padding: 24px;
}
.blue-back-small img {
  max-width: 80px;
  margin-top: 8px;
}
.blue-back {
  margin: 40px auto 0;
  width: 950px;
  max-width: 100%;
  min-height: 160px;
}
.blue-back.mod-btn a {
  margin: 0;
}
.flexblock:has(.blue-back-small) {
  justify-content: unset;
  gap: 32px;
  width: 1084px;
  max-width: 100%;
  margin: auto;
}
@media screen and (max-width: 1236px) {
  .flexblock:has(.blue-back-small) {
    justify-content: center;
  }
}
@media screen and (max-width: 578px) {
  .flexblock:has(.blue-back-small) {
    gap: 8px;
  }
  .blue-back-small {
    width: 100%;
    min-width: 300px;
    max-width: 300px;
  }
}
.blue-back-small + .footnote-box {
  width: 340px;
  display: flex;
  justify-content: center;
  align-items: self-end;
}
/*1:3サムネとテキストbox*/
.flexblock.pic-txt.with-spic {
  flex-wrap: nowrap;
  gap: 16px;
}
.flexblock.pic-txt.with-spic figure {
  min-width: 265px;
}
@media screen and (max-width: 578px) {
  .flexblock.pic-txt.with-spic {
    flex-wrap: wrap;
  }
}
/*サムネとリストの組み合わせbox*/
.flexblock.with-spic.of-list {
  justify-content: start;
}
.pic-txt.with-spic.of-list figure {
  height: auto;
  border-radius: unset;
  margin-right: 16px;
}
.line-up-in-a-row dl {
  display: flex;
  margin-top: 16px;
  font-size: 1.8rem;
}
.line-up-in-a-row dt {
  margin-right: 8px;
  text-align: justify;
  text-align-last: justify;
}
.line-up-in-a-row.max-letter4 dt {
  width: 4em;
}
.line-up-in-a-row.max-letter4 dt::after {
  content: "";
}
/*ボタン*/
.mod-lang-switch {
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1139px) {
  .mod-lang-switch {
    margin-right: 16px;
  }
}
.pic-txt .mod-btn > .inner > .btn {
  padding: 0;
}
.pic-txt .mod-btn[data-col-wide="2"] > .inner > .btn {
  min-width: 55%;
}
@media screen and (max-width: 768px) {
  .pic-txt .mod-btn .btn.of-arrow-right a {
    margin-right: 20px;
  }
}
@media screen and (min-width: 1200px), print {
  .sustn.common .mod-btn a {
    margin-left: 0;
  }
}
/*--------------------------------------------------------------------------------汎用*/



/*--------------------------------------------------------------------------------------- 
構造
---------------------------------------------------------------------------------------*/
.container {
  width: 90%;
  max-width: 1140px;
  margin: auto;
}
.container:not(:last-child) {
  margin-bottom: 80px;
}
.container.inner-width {
  max-width: 1088px;
}
main section {
  padding: 64px 0;
  position: relative;
}
@media screen and (min-width: 769px) and (max-width: 1379px) {
  main section {
    padding: 80px 16px;
  }
}
@media screen and (max-width: 768px) {
  main section {
    padding: 40px 0;
  }
}
article {
  position: relative;
  z-index: 1;
}
/*--------------------------------------------------------------------------------構造*/



/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
/*グレー*/
.back_color {
  background: var(--back);
}
/*--------------------------------------------------------------------------------背景*/



/*--------------------------------------------------------------------------------------- 
ページタイトル回り
---------------------------------------------------------------------------------------*/
.common .page-header {
  padding-top: 24px;
  margin-bottom: 0;
}
.page-title {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/common/image/page-title-bar.png);
  background-size: cover;
  height: 194px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  padding-left: 40px;
  background-repeat: no-repeat;
}
.page-title h1 {
  font-size: 3.8rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page-title h1::after {
  content: '';
  font-size: 2rem;
  font-weight: bold;
  color: var(--accenttext);
  opacity: .5;
  font-family: "Poppins", "Noto Sans JP";
}
@media screen and (max-width: 1099px) {
  .page-title {
    background-position: bottom 0px right -69px;
    /* background-size: 150%; */
  }
}
@media screen and (max-width: 767px) {
  .page-title {
    align-items: flex-start;
    padding-top: 16px;
    padding-left: 16px;
  }
  .page-title h1 {
    font-size: 2.8rem;
    line-height: 3rem;
  }
  .page-title h1::after {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 500px) {
  .page-title {
    background-size: 251%;
    background-repeat: no-repeat;
    background-position: right -99px bottom -14px;
    height: 138px;
  }
}
.template .page-title h1::after {
  content: 'Sample';
}
.message .page-title h1::after {
  content: 'Top Commitment';
}
.policy .page-title h1::after {
  content: 'Policy and Structure';
}
.value-creation-process .page-title h1::after {
  content: 'Value Creation Process';
}
.environment .page-title h1::after {
  content: 'Environment';
}
.esgdata .page-title h1::after {
  content: 'ESG Data';
}
.governance .page-title h1::after {
  content: 'Governance';
}
.social .page-title h1::after {
  content: 'Social';
}
.social-contribution .page-title h1::after {
  content: 'Social Contribution';
}
.material-issues .page-title h1::after {
  content: 'Material Topics';
}
.evaluation .page-title h1::after {
  content: 'External Evaluations and Initiatives';
}

/*---------------------------------------------------------------------ページタイトル回り*/



/*--------------------------------------------------------------------------------------- 
関連リンクコーナー　#links
---------------------------------------------------------------------------------------*/
#links h2 {
  margin-bottom: 40px;
  position: relative;
}
#links {
  padding-top: 64px;
}
#links h2::after {
  content: 'Link';
  position: absolute;
  right: 0;
  font-size: 6.2rem;
  top: -28px;
  opacity: .13;
  font-weight: 600;
}
#links .flexblock {
  justify-content: flex-start;
  gap: 14px;
}
@media screen and (max-width: 767px) {
  #links .flexblock {
    justify-content: center;
  }
}
#links figure {
  border-radius: var(--round_s);
}
/*--------------------------------------------------------------------関連リンクコーナー*/



/*--------------------------------------------------------------------------------------- 
アコーディオンボタン
---------------------------------------------------------------------------------------*/
.toggle-btn {
  display: flex;
  background: #fff;
  border-radius: var(--round);
  align-items: center;
  /* box-shadow: 0px 0px 62px #c3e3f582; */
  border: 1px solid #a7c6dd;
}
@media screen and (max-width: 767px) {
  .toggle-btn {
    border-radius: 16px;
  }
}
.toggle-btn figure {
  border-radius: 24px 0 0 24px;
}
.toggle-btn img {
  height: 138px;
}
@media screen and (max-width: 1100px) {
  .toggle-btn img {
      width: 350px;
  }
}
@media screen and (max-width: 767px) {
  .toggle-btn figure {
    border-radius: 16px 0 0 16px;
  }
  .toggle-btn img {
    width: 100px;
    height: 78px;
    object-fit: cover;
  }
}
.arrows .toggle-btn p::before {
  content: none;
}
.arrows .toggle-btn {
  padding-left: 0;
  cursor: pointer;
}
.arrows .toggle-btn p {
  font-size: 2.4rem;
  display: block;
  padding: 0;
  margin-top: 0;
  padding-left:24px;
  font-weight:500;
}
.arrows .toggle-btn p::after {
  content: '';
  font-size: 1.4rem;
  color: var(--paletext2);
  margin-left: 8px;
}
@media screen and (max-width: 767px) {
  .arrows .toggle-btn p {
    font-size: 1.8rem;
    padding-left: 16px;
  }
  .arrows .toggle-btn p::after {
    font-size: 1.2rem;
  }
}
/*アコーディオン開閉*/
.toggle {
  display: none;
}
.t_title,
.t_contents {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
.t_title {
  display: block;
  font-weight: bold;
}
.t_title::after {
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: all 0.3s;
  width: 11px;
  height: 22px;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/common/image/icon-arrow-blue.svg) no-repeat;
}
.t_contents {
  max-height: 0;
  overflow: hidden;
}
.toggle:checked + .t_title + .t_contents {
  max-height: 900px;
  transition: all 1.5s;
}
.toggle:checked + .t_title::after {
  transform: translateY(-50%) rotate(270deg) !important;
}
.t_title.focus-visible {
  outline: 1px solid var(--main);
  outline-offset: 1px;
  border-radius: 6px;
}
/*-------------------------------------------------------------------アコーディオンボタン*/



/*--------------------------------------------------------------------------------------- 
トップコミットメントページ
---------------------------------------------------------------------------------------*/
.message figure {
  border-radius: var(--round);
}
#top-message .pic-txt figure {
  height: 290px;
}
/* #top-message .prof::after {
  content: '';
  width: 88px;
  height: 20px;
  display: block;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/message/image//sign.png);
  background-size: contain;
  margin-top: 8px;
} */
/*-------------------------------------------------------------トップコミットメントページ*/



/*--------------------------------------------------------------------------------------- 
価値創造プロセスページ
---------------------------------------------------------------------------------------*/
article:not(.financial) dt {
  text-align: center;
}
.financial .blue-back-small {
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40px;
}
[class^="blue-back"] strong span {
  color: initial;
  font-size: 2.8rem;
}
.creation .circle {
  min-height: 686px;
}
@media screen and (min-width: 767px) {
  .creation .circle figure {
    position: absolute;
    mix-blend-mode: multiply;
  }
  .circle-2nd,
  .circle-3rd {
    bottom: 70px;
  }
  .circle-2nd {
    left: calc(50% - 152px);
    transform: translateX(-50%);
  }
  .circle-3rd {
    left: calc(50% + 152px);
    transform: translateX(-50%);
  }
}
/* @media screen and (max-width: 399px) {
  .creation .circle img {
    width: 290px;
    height: 290px;
  }
} */
.creation .circle figcaption strong {
  display: block;
  font-size: 2.6rem;
}
.creation .circle figcaption {
  font-size: 1.8rem;
  font-weight: 500;
  color: #000;
  width: 205px;
}
@media screen and (max-width: 768px) {
  .creation .circle img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .creation .circle {
    min-height: 80vw;
    gap: 0;
    margin-top: -40px;
    margin-bottom: 56px;
  }
  .circle figure {
    width: 50vw;
    height: 50vw;
    aspect-ratio: 1 / 1;
  }
  .circle-2nd {
    /* left: calc(50% - 64px); */
    /* transform: translateX(-50%); */
    left: 50%;
    transform: translateX(calc(-50% - 22vw));
  }
  .circle-3rd {
    /* left: calc(50% + 64px); */
    /* transform: translateX(-50%); */
    left: 50%;
    transform: translateX(calc(-50% + 22vw));
  }
  .creation .circle figure {
    position: absolute;
    mix-blend-mode: multiply;
  }
  .circle-2nd, .circle-3rd {
    bottom: -7vw;
  }
}
@media screen and (max-width: 578px) {
  .creation .circle figcaption {
    font-size: 1.4rem;
    line-height: 1.2;
  }
  .creation .circle figcaption strong {
    font-size: 1.6rem;
  }
  .creation .circle-3rd img {
    width: 120%;
    object-position: bottom 0px right 18px;
  }
}


/*----------------------------------------------------------------価値創造プロセスページ*/



/*--------------------------------------------------------------------------------------- 
方針・体制ページ
---------------------------------------------------------------------------------------*/
figure.org-chart {
  height: auto;
}
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  text-align: center;
  border-radius: unset;
}
.org-item {
  width: 345px;
  height: 60px;
  max-width: 100%;
  border: 1px solid #333;
  background: #fff;
  line-height: 60px;
  font-size: 1.8rem;
}
.org-item.sustainability {
  background: transparent linear-gradient(90deg, var(--accenttext) 0%, #00A99D 100%) 0% 0% no-repeat padding-box;
  border: none;
  color: #fff;
}
.org-line {
  width: 1px;
  height: 40px;
  background: #333;
}
.org-chart figcaption {
  text-align: right;
  width: 100%;
  margin-top: 16px;
  font-size: 1.6rem;
}
/*-------------------------------------------------------------------------方針・体制ページ*/



/*--------------------------------------------------------------------------------------- 
社会貢献活動ページ
---------------------------------------------------------------------------------------*/
.social-contribution .c-top-side {
  margin-top: 128px;
}
@media screen and (max-width: 487px) {
  .social-contribution .c-top-side {
    margin-top: 40px;
  }
}
@media (min-width: 769px) {
  .social-contribution nav.circle {
    margin-top: 40px;
    gap: 24px 104px;
  }
  .social-contribution .c-bottom-side {
    margin-top: -24px;
  }
}
@media screen and (max-width: 1229px) {
  .social-contribution nav.circle {
    width: 900px;
    max-width: 100%;
    margin: auto;
  }
}
@media screen and (max-width: 1099px) {
  .social-contribution nav.circle {
    width: 700px;
    gap: 0px 24px;
  }
  .social-contribution .c-top-center,
  .social-contribution .c-bottom-side {
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .social-contribution nav.circle {
    gap: 0px 24px;
    width: 500px;
  }
}
@media screen and (max-width: 487px) {
  .social-contribution .c-top-center {
    margin-top: 0;
  }
  .social-contribution .c-bottom-side {
    margin-top: 24px;
  }
  .social-contribution nav.circle {
    margin-top: 40px;
  }
}
.social-contribution nav.circle::before {
  content: "社会貢献活動の\A注力分野";
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;
  width: 910px;
  max-width: 100%;
  height: 378px;
  position: absolute;
  border: 14px solid #D3E6FB;
  border-radius: 50%;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.social-contribution nav.circle.en::before {
  content: "Our Focus Areas\Ain Social Contribution Activities";
}
@media screen and (max-width: 768px) {
  .social-contribution nav.circle::before {
    height: 200px;
    width: 300px;
    font-size: 1.6rem;
  }
}
.social-contribution .circle figcaption {
  background: #032b4975;
  width: 100%;
  color: #fff;
  height: 88px;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 0 20px #051d37;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .social-contribution .circle figcaption {
    height: 40px;
    line-height: 40px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 487px) {
  .social-contribution .circle figcaption {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 399px) {
  .social-contribution .c-top-side {
    margin-top: 0;
  }
  .social-contribution .c-bottom-side {
    margin-top: 0;
  }
  .social-contribution nav.circle {
    gap: 8px;
  }
  .social-contribution nav.circle::before {
    position: unset;
    transform: unset;
    border: unset;
    height: auto;
  }
}
.social-contribution .textbox h3:not(:last-child) {
  font-size: 2rem;
  font-weight: bold;
}
.social-contribution .textbox p:not(:last-child),
.social-contribution .textbox h3:not(:last-child) {
  margin-bottom: 16px;
}
.social-contribution .textbox.wide-3q {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.social-contribution .wide-3q > div:not(.mod-link) {
  min-height: 160px;
}
.social-contribution .mod-link {
  margin-bottom: 0;
}
main section[id^="social-contribution_"] {
  padding-bottom: 0;
}
/*-----------------------------------------------------------------------社会貢献活動ページ*/




/*--------------------------------------------------------------------------------------- 
サイトコアコンポーネント用追加CSS
---------------------------------------------------------------------------------------*/
.component-content .container {
  width: 100%;
}
/*-------------------------------------------------------サイトコアコンポーネント用追加CSS*/




/*--------------------------------------------------------------------------------------- 
マテリアリティページ
---------------------------------------------------------------------------------------*/
.material-issues table.tbl-style1 th{
  border: 1px solid #222;
}
.material-issues table.tbl-style1 td{
  border: 1px solid #222;
}

.material-issues th.tbl-bg1{
  color: #fff;
  background-color: #5284D6;
}
.material-issues td.tbl-bg1{
  background-color: #DCE6F7;
}
.material-issues th.tbl-bg2{
  color: #fff;
  background-color: #E36C09;
}
.material-issues td.tbl-bg2{
  background-color: #FDE1CA;
}
.material-issues th.tbl-bg3{
  color: #fff;
  background-color: #717171;
}
.material-issues td.tbl-bg3{
  background-color: #EAEAEA;
}
/*-----------------------------------------------------------------------マテリアリティページ*/