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

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


/*--------------------------------------------------------------------------------------- 
元のCSS打ち消しや流用
---------------------------------------------------------------------------------------*/
/* div.site-header.of-group-global-nav ~ .site-nav-wide .mod-global-nav-wide .mod-global-nav-wide__container {
  display: none;
} */
.component-content .container {
  width: 90%;
}
/*------------------------------------------------------------------元のCSS打ち消しや流用*/

/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
h2.sustn-top::before {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/deco-h2.svg);
  width: 146px;
  height: 52px;
  margin-right: 16px;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  h2.sustn-top::before {
    width: 100px;
    height: 36px;
    display: block;
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 767px) {
  h2[class^="sustn"] {
    text-align: center;
  }
}
.plain-html h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 24px;
}
/*ボタン*/
main .btn {
  width: 310px;
  height: 50px;
  display: block;
  margin: 24px auto;
  line-height: 50px;
  border-radius: 100px;
  position: relative;
  transition: 0.3s ease;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background: #fff;
  -webkit-box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.1);
}
main .btn::after {
  content: '';
  width: 17px;
  height: 26.4px;
  background: url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB2aWV3Qm94PSIwIDAgMTcgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZD0ibTAgMGgxN3YxN2gtMTd6Ii8+PGcgc3Ryb2tlPSIjYzAwIj48cGF0aCBkPSJtMTMuNSA4LjVoLTExIi8+PHBhdGggZD0ibTE0LjUgOC40OTktNS42OTUtNS42NSIvPjxwYXRoIGQ9Im0xNC41IDguNS01LjY5NSA1LjY1Ii8+PC9nPjwvZz48L3N2Zz4=) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 31px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/*たわらがたのやつ
main .btn {
  width: 310px;
  height: 50px;
  display: block;
  margin: 24px auto;
  line-height: 50px;
  border: 1px solid #333;
  border-radius: 100px;
  position: relative;
  transition: 0.3s ease;
}
} たわらがたのやつ*/

/* main .btn:hover::after {
  transform: translate(3px, -50%);
} */
.imgbox_with-btn > *:has(.btn):hover img {
  transform: scale(1.08);
}
.imgbox_with-btn > *:has(.btn) img {
  transition: transform 0.3s ease;
}
.imgbox_with-btn > *:hover .btn {
  /* background: #eee; */
  background: #f4f4f4;
}
main dt {
  margin-bottom: 16px;
}
main figure {
  border-radius: var(--round);
}
/*--------------------------------------------------------------------------------汎用*/



/*--------------------------------------------------------------------------------------- 
構造
---------------------------------------------------------------------------------------*/
main section,
main aside {
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  main section,
  main aside {
    padding: 40px 0;
  }
}
/*--------------------------------------------------------------------------------構造*/



/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
/*水玉*/
.back_dot1 {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot1.png) no-repeat;
  background-position: top center;
  background-size: contain;
}
.back_dot2 {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot2.png) no-repeat;
  background-position: top center;
  background-size: cover;
  /* animation: bgScroll 15s ease-in-out infinite; */
}
.back_dot3 {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot3.png) no-repeat;
  background-position: top center;
  background-size: contain;
  /* animation: bgScroll 15s ease-in-out infinite; */
}
.back_dot4 {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot4.png) no-repeat;
  background-position: top center;
  background-size: contain;
  /* animation: bgScroll 15s ease-in-out infinite; */
}
@media screen and (max-width: 768px) {
  .back_dot1 {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot1-sp.png) no-repeat;
  }
  .back_dot2 {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot2-sp.png) no-repeat;
  }
  .back_dot3 {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot3-sp.png) no-repeat;
    background-position: top center;
    background-size: contain;
  }
  .back_dot4 {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-dot4-sp.png) no-repeat;
    background-size: contain;
  }
}
@keyframes bgScroll {
  0%   { background-position: 0 0; }
  50%  { background-position: 50px 200px; }  /* 斜めに移動 */
  100% { background-position: 0 0; }          /* 元に戻る */
}
/*グラデーション*/
.back_gradation {
  /* background: transparent linear-gradient(111deg, #88C7E9 0%, #C0ECC7 100%) 0% 0% no-repeat padding-box; */
  background: transparent linear-gradient(
    111deg,
    rgba(136, 199, 233, 0.3) 0%,
    rgba(192, 236, 199, 0.3) 100%
  ) 0% 0% no-repeat padding-box;
}
/*空*/
.back_action {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-action.png) repeat-y;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .back_action {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-action-sp.png) repeat-y;
    background-size: cover;
  }
}
/*学校と子供*/
.back_contribution {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-contribution.png) no-repeat;
}
@media screen and (max-width: 768px) {
  .back_contribution {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/back-contribution-sp.png) no-repeat;
    background-size: contain;
  }
}
/*--------------------------------------------------------------------------------背景*/



/*--------------------------------------------------------------------------------------- 
メインビジュアル
---------------------------------------------------------------------------------------*/
.mod-lang-switch {
  padding-right: 24px;
}
@media screen and (max-width: 768px) {
  .mod-lang-switch {
    padding-right: 20px;
  }
}
header.component-content {
  position: relative;
}
.lang-toggle {
  position: absolute;
  top: 24px;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .mod-lang-switch {
    padding-right: 16px;
    margin-right: 0;
  }
}
 .main-visual {
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-back.jpg) no-repeat;
  background-size: contain;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .main-visual {
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-back-sp.jpg) no-repeat;
    background-size: contain;
  }
}
.plain-html .title {
  font-size: 2rem;
  text-align: center;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
@media screen and (max-width: 1099px) {
  .plain-html .title {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .plain-html .title {
    top: 75%;
  }
}
.plain-html .title h1 {
  font-weight: bold;
  font-size: 3.8rem;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
}
@media screen and (max-width: 768px) {
  .plain-html .title h1 {
    font-size: 3rem;
    width: 94vw;
  }
}
.plain-html .title .body-copy {
  font-family: "Shippori Antique", serif;
  margin-top: 40px;
}
@media screen and (max-width: 1099px) {
  .plain-html .title .body-copy {
    margin-top: 16px;
  }
}
.main-visual img {
  width: 100%;
}
.img-box img {
  z-index: 2;
  position: relative;
}
.img-box::before {
  content: '';
  width: 100%;
  height: 530px;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-wind1.png) no-repeat;
  background-size: contain;
  background-position: bottom;
  position: absolute;
  bottom: 0;
  z-index: 1;
  animation: waveMove 6s linear infinite reverse;
}
@media screen and (max-width: 768px) {
  .img-box::before {
    height: 158px;
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-wind1-sp.png) no-repeat;
    background-size: cover;
  }
}
.img-box::after {
  content: '';
  width: 100%;
  height: 236px;
  background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-wind2.png) no-repeat;
  background-size: contain;
  background-position: bottom;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  animation: waveMove 12s linear infinite;
}
@media (min-width: 1920px) {
  .img-box::after,
  .img-box::before {
    background-position: center top;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  .img-box::after {
    height: 126px;
    background: url(/-/media/Project/Canon/CanonJP/Corporate/sustainability/top/image/mv-wind2-sp.png) no-repeat;
    background-size: cover;
  }
}
/*アニメーション*/
@keyframes waveMove {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(20px); } /* 下にふわっと */
  100% { transform: translateY(0); }   /* 元の位置に戻る */
}
/*----------------------------------------------------------------------メインビジュアル*/



/*--------------------------------------------------------------------------------------- 
ピックアップ　#pickup
---------------------------------------------------------------------------------------*/
#pickup .container {
  width: 898px;
  max-width:90%;
}
.pickup-title {
  font-size: 2rem;
  margin-bottom: 24px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .pickup-title {
    text-align: left;
  }
}
#pickup figure {
  border-radius: var(--round_s);
}
#pickup img {
  object-fit: cover;
  object-position: bottom;
}
@media screen and (max-width: 1100px) {
  #pickup img {
    height: 175px;
  }
}
@media screen and (max-width: 767px) {
  #pickup img {
    width: 305px;
    height: 120px;
  }
}
#pickup .flexblock p {
  width: 680px;
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (min-width: 768px) and (max-width: 1100px) {
  #pickup .flexblock p {
    width: 60%;
  }
}
#pickup .arrow::before {
  top: 3%;
}
@media screen and (max-width: 768px) {
  #pickup .arrow {
    margin-top: 16px;
  }
}
/*---------------------------------------------------------------------------ピックアップ*/



/*--------------------------------------------------------------------------------------- 
トップメッセージ　#message
---------------------------------------------------------------------------------------*/
#message h3 {
  min-height: 76px;
  margin-bottom: 0;
}
.msg {
  font-size: 1.8rem;
  min-height: 112px;
  font-weight: 500;
}
.en .msg {
  min-height: unset;
  margin: 24px 0;
}
@media screen and (max-width: 768px) {
  #message h3 {
    min-height: unset;
  }
  .msg {
    min-height: unset;
    margin: 24px 0;
  }
  #message li:first-child {
    border-bottom: #b5bfbf 1px solid;
    padding-bottom: 48px;
    margin-bottom: 24px;
  }
}
.prof {
  font-size: 1.4rem;
  margin-bottom: 56px;
}
.en .prof {
  min-height: 6.5rem;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .prof {
    margin-bottom: 24px;
  }
}
#message figure {
  box-shadow: 0px 0px 62px #0000000A;
  max-width: 446px;
  margin: 0 auto 16px;
}
/*-----------------------------------------------------------------------トップメッセージ*/



/*--------------------------------------------------------------------------------------- 
マテリアリティ　#materiality
---------------------------------------------------------------------------------------*/
#materiality .block {
  width: 958px;
}
#materiality h3 {
  text-align: left;
  margin-bottom: 40px;
}
#materiality .flexblock {
  justify-content: left;
}
#materiality .flexblock dl {
  min-width: 182px;
}
@media screen and (max-width: 767px) {
  #materiality h3 {
    text-align: center;
  }
}
@media (min-width: 768px) {
  #materiality ul {
    padding: 0 24px;
  }
  #materiality dl.center {
    width: 128px;
  }
}
#materiality li {
  margin-top: 56px;
}
#materiality dt {
  min-height: 56px;
  display: flex;
  align-items: end;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #materiality dl {
    width: 144px;
    margin: auto;
  }
}
#materiality .materiality-footer.flexblock {
  justify-content: flex-end;
}
@media screen and (max-width: 579px) {
#materiality .materiality-footer.flexblock {
    justify-content: center;
  }
}
.materiality-footer a {
  margin: 0;
  text-align: center;
}
.materiality-footer a:hover {
  background: #f4f4f4
} 
/* 
.materiality-footer a:hover {
  background: #d3eaf6;
} 
*/
/*-------------------------------------------------------------------------マテリアリティ*/



/*--------------------------------------------------------------------------------------- 
環境・社会・ガバナンスの取り組み　#action
---------------------------------------------------------------------------------------*/
#action .block {
  width: 977px;
}
#action:not(.en) .toggle-btn p::after {
  font-family: "Poppins", "Noto Sans JP";
}
#action:not(.en) .environment .toggle-btn p::after {
  content: 'Environment';
}
@media screen and (max-width: 767px) {
  .environment .toggle-btn img {
    object-position: left;
  }
}
#action:not(.en) .social .toggle-btn p::after {
  content: 'Social';
}
@media screen and (max-width: 767px) {
  .social .toggle-btn img {
    object-position: right;
  }
}
#action:not(.en) .governance .toggle-btn p::after {
  content: 'Governance';
}
#action dl {
  margin-top: 40px;
}
#action .arrows dd a {
  display: block;
  margin: 8px 0;
}
#action dd {
  margin: 0 24px;
}
#action .arrows dd a {
  padding-left: 48px;
}
#action .arrows dd .index-page {
  padding-left: 24px;
  font-weight: bold;
}
#action .arrows > *:not(dt):not(li) a:not(.index-page)::before {
  left: 24px;
}
#action .arrows dd .index-page::before {
  left: 8px;
}
/*---------------------------------------------------------環境・社会・ガバナンスの取り組み*/



/*--------------------------------------------------------------------------------------- 
社会貢献活動　#contribution
---------------------------------------------------------------------------------------*/
#contribution {
  padding: 40px 0;
}
@media screen and (max-width: 767px) {
  #contribution {
    padding-top: 16px;
  }
}
#contribution h2 {
  width: 698px;
  max-width: 100%;
  color: #fff;
  text-shadow: 00px 0px 21px rgb(41 40 38 / 41%), 00px 0px 21px rgb(41 40 38 / 41%), 00px 0px 21px rgb(41 40 38 / 41%);
}
@media screen and (max-width: 767px) {
  #contribution h2 {
    margin-bottom: 0;
  }
}
#contribution .flexblock {
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  #contribution > .flexblock {
    display: block;
  }
  #contribution .flexblock {
    gap: 16px;
  }
}
#contribution .flexblock a {
  width: 400px;
  max-width: 100%;
  background: #ffffffd1;
  border-radius: var(--round);
  padding: 24px;
  box-shadow: 0px 0px 20px #a8b9c382;
}
@media screen and (max-width: 767px) {
  #contribution .flexblock a {
    padding: 0px 8px 16px 8px;
    display: block;
    margin-top: 31px;
  }
}
#contribution .flexblock dl {
  justify-content: flex-end;
}
#contribution dt {
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #contribution dt {
    padding-top: 24px;
    margin-bottom: 0;
  }
  #contribution dd:not(.arrow){
    padding: 0 16px;
  }
  #contribution .flexblock .arrow {
    margin-right: 16px;
  }
}
/*---------------------------------------------------------------------------社会貢献活動*/



/*--------------------------------------------------------------------------------------- 
ESGデータ・報告書　#esgdata
---------------------------------------------------------------------------------------*/
.esg-back {
  width: 350px;
  background: transparent linear-gradient(111deg, rgba(136, 199, 233, 0.3) 0%, rgba(192, 236, 199, 0.3) 100%) 0% 0% no-repeat padding-box;
  border-radius: var(--round);
  height: 220px;
}
#esgdata a {
  display: block;
  width: 223px;
  margin: auto;
}
#esgdata figure {
  border-radius: var(--round_s);
  border: 1px solid var(--border-color);
}
.esgdata {
  align-items: center;
  text-align: left;
}
#esgdata .esgdata a {
  position: relative;
  margin: 16px 0;
}
@media screen and (max-width: 768px) {
  #esgdata section {
    padding: 0;
  }
}
/*----------------------------------------------------------------------ESGデータ・報告書*/



/*--------------------------------------------------------------------------------------- 
サステナビリティ トピックス　#topicks
---------------------------------------------------------------------------------------*/
time {
  margin-bottom: 8px;
}
#topicks li {
  border-bottom: 1px solid var(--border-btm-color);
  margin-bottom: 16px;
  padding-bottom: 16px;
}
/*-------------------------------------------------------------サステナビリティ トピックス*/



/*--------------------------------------------------------------------------------------- 
社外からの評価　#recognition
---------------------------------------------------------------------------------------*/
#recognition ul {
  width: 870px;
  margin: auto;
  max-width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  #recognition .flexblock li {
    flex: 1 1 auto;
  }
  #recognition .flexblock li img {
    padding: 0 4px;
  }
  #recognition .flexblock li a {
    text-align: center;
    display: block;
  }
}
 #recognition li:not(.footnote) {
  width: calc(100% / 4);
  text-align: center;
}
@media screen and (max-width: 767px) {
  #recognition li:not(.footnote) {
    width: calc(100% / 2);
  }
}
#recognition .flexblock.logos {
  gap: 8px 0;
  justify-content: flex-start;
}
.footnote {
  position: absolute;
  bottom: -48px;
  left: 0;
}
/*-------------------------------------------------------------------------社外からの評価*/