@charset "UTF-8";

/* 使用フォント */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "Zen Kaku Gothic New", sans-serif; */
/* font-family: "GFS Didot", serif; */
/* font-family: "ten-mincho", serif; */

/* 初期化 */
#footer {
  padding-top: 0;
}
.sdgs-section-wrap {
  color: #373c8e;
}
.sdgs-section-wrap figure {
  margin: 0;
}
.sdgs-section-wrap img {
  width: 100%;
}
.sdgs-section-wrap p, .sdgs-section-wrap h3 {
  margin: 0;
}
.sdgs-section-wrap figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sdgs-section-wrap h2, .sdgs-section-wrap p {
  font-family: "ten-mincho", serif;
  font-style: normal;
}
.sdgs-section-wrap ul {
}
.sdgs-section-wrap li {
  list-style-type: none;
}

/* 全体的な設定 */
#sdgsEnvironmentSection, #sdgsReviewSection {
  background-color: #eee;
}
#sdgsTopSection {
  background-image: url("/wp/wp-content/themes/ichiri/img/pages/sdgs/sdgs-powa-ao1.png"),
                    url("/wp/wp-content/themes/ichiri/img/pages/sdgs/sdgs-powa-ao2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;

}
#sdgsSocietySection {
  background-image: url("/wp/wp-content/themes/ichiri/img/pages/sdgs/sdgs-powa-kiiro1.png"),
                    url("/wp/wp-content/themes/ichiri/img/pages/sdgs/sdgs-powa-kiiro2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right top;

}
.sdgs-section {
  padding-bottom: 6rem;
}
.sdgs-inner2 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* トップ */
.sdgs-inner-top {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.sdgs-main-visual-wrap {
  position: relative;
}
.sdgs-main-visual-h2 {
  font-size: 3.5rem;
  letter-spacing: 0.5rem;
  line-height: 1.8;
  text-align: center;
  padding: 2rem 0;
  margin: 0;
  font-weight: bold;
}
.sdgs-main-visual {
  text-align: right;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}
.sdgs-h2-second {
  display: inline-block;
  margin-left: 6rem;
}
.sdgs-top-hikari {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.sdgs-intro-text-wrap {
  max-width: 1280px;
  width: 96%;
  margin: 0 auto;
}
.sdgs-intro-text {
  font-size: 2rem;
  text-align: center;
  line-height: 2.3;
  padding-bottom: 3rem;
}
.sdgs-intro-text span {
  display: block;
}
.sdgs-intro-image {
  display: table;
  width: 90%;
  margin: 0 auto !important;
}

/* 環境・社会・実績 */
.sdgs-section-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  position: relative;
}
.sdgs-section-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.8;
  font-size: 2.5rem;
  margin: 0;
  letter-spacing: 0.7rem;
  position: absolute;
  top: -2.5rem;
  left: 2rem;
}
.sdgs-section-image {
  width: 80%;
  margin-left: auto;
}
.sdgs-text-wrap {
  width: 90%;
  margin: 0 auto;
}
.sdgs-text-h3 {
  font-family: "GFS Didot", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 3rem;
  padding: 2rem 0;
  letter-spacing: 0.2rem;
}
.sdgs-text-p {
  font-family: "ten-mincho", serif;
  font-style: normal;
  font-size: 2rem;
  padding-bottom: 2.5rem;
  line-height: 1.6;
}
.sdgs-text-p strong {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: bold;
  font-style: normal;
  font-size: 2rem;
  color: #373c8e;
}
.sdgs-text-p strong::before {
  content: "｜"
}
.sdgs-image {
  width: 90%;
  margin: 0 auto;
}
.sdgs-events {
  width: 90%;
  margin: 0 auto;
}

/* イベントの様子 */
.sdgs-event-title {
  margin: 0 auto;
  padding: 2.5rem 0 1rem;
}
.sdgs-event-title-en {
  font-family: "GFS Didot", serif;
  font-style: normal;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  display: inline-block;
}
.sdgs-event-title-jp {
  font-family: "ten-mincho", serif;
  font-weight: normal;
  font-size: 2rem;
}
.sdgs-event-title-jp::before {
  content: "｜"
}

/* リンクボタン */
.sdgs-links {
  width: 90%;
  margin: 0 auto;
  padding: 3rem 0 0;
  font-family: "ten-mincho", serif;
  font-style: normal;
}
.sdgs-button {
  margin: 0;
  text-align: center;
}
.sdgs-link {
  text-decoration: none !important;
  font-size: 2rem;
  display: table;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #373c8e;
  color: #373c8e !important;
  width: 70%;
  border-radius: 0.5rem;
  padding: 1rem 0.5rem;
  transition: 0.5s;
  box-sizing: border-box;
}
.sdgs-link:first-child {
  margin-bottom: 1.5rem;
}
.sdgs-link:hover {
  transition: 0.5s;
  background-color: #373c8e;
  color: #fff !important;
  border: 1px solid #373c8e;
}

/* お客様の声 */
.sdgs-reviews-wrap {
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.sdgs-review {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}
.sdgs-review-img {
  width: 80px;
  flex-shrink: 0;
}
.sdgs-review-text {
  flex: 1;
  font-family: "ten-mincho", serif;
  font-size: 1.7rem;
  line-height: 1.7;
}

/* フッター */
.sdgs-footer {
  background-image: url("/wp/wp-content/themes/ichiri/img/pages/sdgs/sdgs-footer.png");
  padding-top: 2rem;
  background-repeat: no-repeat;
  background-position: center bottom; /* 横は中央、縦は下 */
  padding-bottom: 10rem;
}
.sdgs-footer-inner {
  position: relative;
}
.sdgs-footer-text {
  font-family: "ten-mincho", serif;
  font-size: 2rem;
  text-align: center;
  line-height: 2.2;
  letter-spacing: 0.1rem;
  font-weight: bold;
}
.sdgs-footer-text span {
  display: block;
}
.sdgs-br {
  display: none;
}
.sdgs-footer-hikari {
  position: absolute;
  width: 50%;
  top: -7rem;
  left: 40%;
  transform: translateX(-50%);
}

/* ブラウザ幅768px以上 */
@media screen and (min-width: 768px) {
  /* トップ（メインビジュアル） */
  .sdgs-main-visual-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .sdgs-main-visual-h2 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    order: 1;
    flex: 2;
    text-align: start;
    font-size: clamp(16px, 4.2vw, 55px);
    line-height: 1.8;
    letter-spacing: 1.3rem;
    font-weight: normal;
  }
  .sdgs-h2-second {
    margin-top: 5rem;
    margin-left: 2rem;
  }
  .sdgs-main-visual {
    order: 2;
    flex: 8;
  }

  /* トップ（テキスト） */
  .sdgs-intro-text-wrap {
    display: flex;
    align-items: start;
    gap: 2rem;
  }
  .sdgs-intro-text {
    font-size: 2.8vw;
    text-align: left;
    padding-left: 2rem;
    flex: 4.5;
    line-height: 2.3;
    letter-spacing: 0.2rem;
  }
  .sdgs-intro-text span {
    display: block;
  }
  .sdgs-intro-image {
    flex: 5.5;
  }

  /* 環境・社会・実績（トップ画像とテキスト） */
  .sdgs-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .sdgs-section-top {
    flex: 4;
    position: relative;
  }
  .sdgs-info {
    flex: 5;
  }
  .sdgs-section-title {
    font-size: 3.8vw;
    position: absolute;
    top: -2.5rem;
    left: 0;
  }
  .sdgs-section-image {
    width: 92%;
    margin-left: 1rem;
    padding-top: 1.5rem;
  }
  .sdgs-text-h3 {
    font-size: 5.2vw;
    letter-spacing: 0.3rem;
  }
  .sdgs-text-p {
    font-size: 2.3vw;
    padding-bottom: 1.5rem;
  }
  .sdgs-text-p strong {
    font-size: 2.3vw;
  }

  /* イベント */
  .sdgs-events-wrap {
    position: relative;
  }
  .sdgs-events {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
  }
  .sdgs-event-title {
    margin: 0 auto;
    padding: 2.5rem 0 1rem;
  }
  .sdgs-event-title-en {
    font-size: 3.1vw;
    border-bottom: 1px solid #373c8e;
  }
  .sdgs-event-title-en::before {
    content: "";
    right: 100%;
    margin-right: 1rem;
  }
  .sdgs-event-title-en::after {
    content: "";
    left: 150%;
    margin-left: 6rem;
  }
  .sdgs-event-title-jp {
    font-size: 1.9vw;
    display: block;
    padding-left: 1rem;
    padding-top: 0.5rem;
    letter-spacing: 0.1rem;
  }
  .sdgs-event-title-jp::before {
    content: "";
  }
  .sdgs-event-image {
    padding-left: 1rem;
  }

  /* リンクボタン */
  .sdgs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .sdgs-button {
    flex: 5;
  }
  .sdgs-link {
    width: 100%;
    font-size: 2.8vw;
  }
  .sdgs-link:first-child {
    margin-bottom: 0;
  }

  /* お客様の声 */
  .sdgs-review {
    gap: 1rem;
  }
  .sdgs-review-img {
    width: auto;
    flex: 1;
  }
  .sdgs-review-text {
    flex: 6;
    font-size: 2.1vw;
  }

  /* フッター */
  .sdgs-footer-text {
    font-size: 3.75vw;
  }
  .sdgs-footer-text span {
    display: inline;
  }
  .sdgs-br {
    display: block;
  }
  .sdgs-footer-hikari {
    width: 40%;
    left: 20%;
  }
}

/* ブラウザ幅1024px以上 */
@media screen and (min-width: 1024px) {
  /* トップ（メインビジュアル） */
  .sdgs-main-visual-wrap {
    gap: 4rem;
  }
  .sdgs-main-visual-h2 {
    font-size: 58px;
    letter-spacing: 1.7rem;
    line-height: 1.8;
    flex: 3;
  }
  .sdgs-h2-second {
    margin-top: 8rem;
  }
  .sdgs-main-visual {
    flex: 9;
  }

  /* トップ（テキスト） */
  .sdgs-intro-text-wrap {
    width: 85%;
  }
  .sdgs-intro-text {
    font-size: 29px;
    flex: 1;
  }
  .sdgs-intro-image {
    flex: 1;
    padding-top: 3rem;
  }

  /* 環境・社会・実績（トップ画像とテキスト） */
  .sdgs-inner2 {
    width: 96%;
  }
  .sdgs-row {
    gap: 2rem;
  }
  .sdgs-section-title {
    font-size: 38px;
    top: -2.7rem;
    left: 0.8rem;
    font-weight: normal;
  }
  .sdgs-section-image {
    padding-top: 2.5rem;
  }
  .sdgs-text-h3 {
    font-size: 40px;
    padding-top: 5rem;
  }
  .sdgs-text-p {
    font-size: 20px;
  }
  .sdgs-text-p strong {
    font-size: 20px;
  }

  /* イベント */
  .sdgs-events {
    width: 40%;
  }
  .sdgs-event-title-en {
    font-size: 2rem;
  }
  .sdgs-event-title-jp {
    font-size: 1.3rem;
  }

  /* リンクボタン */
  .sdgs-link {
    font-size: 1.8rem;
  }

  /* お客様の声 */
  .sdgs-review-text {
    font-size: 1.1rem;
  }

  /* フッター */
  .sdgs-footer-text {
    font-weight: normal;
    font-size: 2rem;
  }
  .sdgs-footer-hikari {
    width: 388px;
    left: 25%;
  }
}

/* 細かなレスポンシブ調整 */
/* 環境のイベント */
@media screen and (min-width: 1090px) {
  .sdgs-row-env {
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1130px) {
  .sdgs-row-env {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 1200px) {
  .sdgs-row-env {
    padding-bottom: 7rem;
  }
}
@media screen and (min-width: 1270px) {
  .sdgs-row-env {
    padding-bottom: 9rem;
  }
}
@media screen and (min-width: 1350px) {
  .sdgs-row-env {
    padding-bottom: 10rem;
  }
  .sdgs-events-env {
    margin-left: 2rem;
  }
}

/* 社会のイベント */
@media screen and (min-width: 1000px) {
  .sdgs-row-soc {
    padding-bottom: 3rem;
  }
}
@media screen and (min-width: 1050px) {
  .sdgs-row-soc {
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 1120px) {
  .sdgs-row-soc {
    padding-bottom: 7rem;
  }
}
@media screen and (min-width: 1190px) {
  .sdgs-row-soc {
    padding-bottom: 9rem;
  }
}
@media screen and (min-width: 1260px) {
  .sdgs-row-soc {
    padding-bottom: 11rem;
  }
}
@media screen and (min-width: 1350px) {
  .sdgs-row-soc {
    padding-bottom: 12rem;
  }
  .sdgs-events-soc {
    margin-left: 2rem;
  }
}

/* トップ光 */
@media screen and (min-width: 1350px) {
  .sdgs-top-hikari {
    opacity: 1;
    visibility: visible;
    top: -20px;
    right: 130px;
  }
}