@charset "utf-8";

/*--------------------- */
/* philosophyページ用 */
/* --------------------- */

.is-light-sp img {
  filter: brightness(0);
}

/* -------
↓ここからFV
------- */

.philosophy-fv {
  position: relative;

  display: flex;
  align-items: center;
  background-image: url(../img/philosophy-fv.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
  height: clamp(420px, 29vw, 1920px);
  /* height: 100vw; */
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-fv {
    background-image: url(../img/philosophy-fv-sp.webp);
    height: auto;
  }
}

/*1000px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-fv {
    background-position: 82% center;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-fv {
    background-image: none;
  }
}

.philosophy-fv-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.philosophy-fv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 22px;
  background-image: url(../img/top-fv-line.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.5;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-fv::after {
    display: none;
  }

  .philosophy-fv-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    height: 22px;
    background-image: url(../img/top-fv-line.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: 0.5;
  }
}

/*1000px以下のとき以下を採用*/
@media (max-width: 1100px) {
  .philosophy-fv-wrapper {
    padding: 0rem 0rem 10rem;
  }
}

/*550px以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-fv-wrapper {
    width: 100%;
    padding: 0rem 0rem 10rem;
  }
}

.philosophy-title-container {
  display: inline-block;
  margin: 0 auto;
}
.philosophy-fv-bg-sp {
  display: none;
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-title-container {
    display: flex;
    flex-direction: column;
  }
  .philosophy-fv-bg-sp {
    display: block;
  }
}

.philosophy-title-main {
  font-family: var(--oubun-font);
  color: var(--ili-t-color);

  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 2.4px;
  margin-top: -0.6rem;
  margin-bottom: -0.5rem;
}
.philosophy-title-main-br-sp {
  display: none;
}

/*1500px以下のとき以下を採用*/
@media (max-width: 1500px) {
  .philosophy-title-main-br-sp {
    display: block;
  }
}

.philosophy-title-sub {
  font-family: var(--japan-font);

  color: var(--text-color);
  font-size: 1.6rem;
  letter-spacing: 1.28px;
  margin-left: 2.6rem;
}
.philosophy-title {
  display: flex;
  align-items: center;
  margin-bottom: 0rem;
  padding: 3rem 6rem 3rem 21rem;
}

/*1500px以下のとき以下を採用*/
@media (max-width: 1500px) {
  .philosophy-title {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .philosophy-title-sub {
    margin-left: 0rem;
  }
}

/*1100px以下のとき以下を採用*/
@media (max-width: 1100px) {
  .philosophy-title {
    margin-bottom: -10rem;
  }
}

/*1000px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
  }
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-title {
    margin-bottom: 5rem;
  }
  .philosophy-title-main {
    font-size: 3rem;
  }

  .philosophy-title-sub {
    font-size: 1.6rem;
  }
}

/* -------
↑ここまでFV
------- */

/* =========================
   ↓What are we aiming at?
========================= */

.philosophy-mission-bottom-catch-wrapper {
  margin-top: clamp(10rem, 14vw, 20rem);
}
@media (max-width: 900px) {
  .philosophy-mission-bottom-catch-wrapper {
    margin-top: 12rem;
  }
}
.philosophy-mission-bottom-catch {
  padding-bottom: clamp(8rem, 20vw, 30rem);
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-mission-bottom-catch-wrapper {
    margin-top: 10rem;
  }
  .philosophy-mission-bottom-catch {
    padding-bottom: 10rem;
  }
}

.philosophy-mission-bottom-catch-p {
  display: inline-block;
  padding-top: 1rem;
  border-top: 1px solid var(--ili-t-color);
  color: var(--ili-t-color);
}

.philosophy-mission-bottom-catch-p p {
  margin-left: 4rem;
  letter-spacing: 2.32px;
  font-family: var(--japan-font);
  color: var(--ili-t-color);
  font-size: clamp(2rem, 1.5vw, 33.5rem);
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-mission-bottom-catch-p p {
    margin-left: 2rem;
  }
}

/* philosophy-missionのキャッチコピー */

.philosophy-mission-catch-container {
  position: relative;
  font-size: 6.9vw;
  font-family: var(--oubun-font);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2.66px;
  line-height: 1.06;
  margin-left: 4rem;
  margin-bottom: 1.8rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-mission-catch-container {
    font-size: clamp(25px, 8vw, 47px);
    margin-left: 2rem;
  }
}

/*480px以下のとき以下を採用*/
@media (max-width: 480px) {
  .philosophy-mission-catch-container {
    font-size: 5rem;
  }
}

.philosophy-mission-bottom-big-title {
  color: #727171;
}

.philosophy-mission-br-sp {
  display: none;
}

/*480px以下のとき以下を採用*/
@media (max-width: 480px) {
  .philosophy-mission-br-sp {
    display: block;
  }
}

/* =========================
   ↓私たちの使命
========================= */

.philosophy-mission-declaration {
  position: relative;
  z-index: 0;
}

.philosophy-mission-declaration::before {
  content: "";
  position: absolute;

  left: 0;
  top: 14rem;

  width: 100%;

  /* 縦幅をここでコントロール */
  height: 23.2rem;

  background-image: url(../img/philosophy-mission-declaration-bg.svg);

  background-repeat: repeat-x;

  background-position: left center;

  background-size: auto 100%;

  pointer-events: none;
  opacity: 0.5;
  z-index: -1;
}

.philosophy-mission-declaration::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 50rem;

  width: 100%;

  /* 縦幅をここでコントロール */
  height: 23.2rem;

  background-image: url(../img/philosophy-mission-declaration-bg.svg);

  background-repeat: repeat-x;

  background-position: left center;

  background-size: auto 100%;

  pointer-events: none;
  opacity: 0.5;
  z-index: -1;
}

.philosophy-mission-declaration-container {
  width: 55%;
  padding: 0 0 30rem;
  margin: 0 auto;
}

/*1000px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-mission-declaration-container {
    width: 70%;
    padding: 0 0 15rem;
    margin: 0 auto;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-mission-declaration-container {
    width: 80%;
    padding: 0 0 10rem;
    margin: 0 auto;
  }
}

/*550pxpx以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-mission-declaration-container {
    width: 100%;
    padding: 0 1rem 15rem;
  }
}

/* ---------------------
フレーム
--------------------- */
/* ↓枠↓ */
.philosophy-mission-ili-frame {
  position: relative;
  padding: 5rem;
  background: #fff;

  /* 角：16px四方 */
  background-image: url("../img/on-left-top-pt.png"),
    url("../img/on-right-top-pt.png"), url("../img/on-left-bottom-pt.png"),
    url("../img/on-right-bottom-pt.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 21px 21px, 21px 21px, 21px 21px, 21px 21px;
}

/*768px以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-mission-ili-frame {
    position: relative;
    padding: 4rem;
    background: #fff;

    /* 角：16px四方 */
    background-image: url("../img/on-left-top-pt.png"),
      url("../img/on-right-top-pt.png"), url("../img/on-left-bottom-pt.png"),
      url("../img/on-right-bottom-pt.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left top, right top, left bottom, right bottom;
    background-size: 21px 21px, 21px 21px, 21px 21px, 21px 21px;
  }
}

.philosophy-mission-ili-frame::before {
  content: "";
  position: absolute;

  /* 角の幅ぶんだけ内側に → 16px */
  left: 21px;
  right: 21px;
  top: 0;
  bottom: 0;

  pointer-events: none;

  background-image: url("../img/on-top.png"),
    /* 上 */ url("../img/on-bottom.png"); /* 下 */
  background-repeat: repeat-x, repeat-x;
  background-position: left top, left bottom;
  background-size: auto 21px, auto 21px;
}

.philosophy-mission-ili-frame::after {
  content: "";
  position: absolute;

  /* 角の高さぶんだけ内側に → 16px */
  top: 21px;
  bottom: 21px;
  left: 0;
  right: 0;

  pointer-events: none;

  background-image: url("../img/on-left-pt.png"),
    /* 左 */ url("../img/on-right-pt.png"); /* 右 */
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 21px auto, 21px auto;
}

/* ↑枠↑ */

.philosophy-mission-ili-frame-img {
  margin-bottom: 10rem;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-mission-ili-frame-img {
    margin-bottom: 5rem;
  }
}

.philosophy-mission-ili-frame-title {
  color: var(--text-color);
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 10rem;
}

.philosophy-mission-ili-frame-text-contents > :nth-child(-n + 3) {
  margin-bottom: 10rem;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-mission-ili-frame-title {
    font-size: 2.2rem;

    margin-bottom: 5rem;
  }

  .philosophy-mission-ili-frame-text-contents > :nth-child(-n + 3) {
    margin-bottom: 5rem;
  }
}
.philosophy-mission-ili-frame-text-name {
}

.philosophy-mission-ili-frame-text-name {
  text-align: right;
  font-size: 1.4rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-mission-ili-frame-title {
    font-size: 2rem;

    margin-bottom: 4rem;
  }

  .philosophy-mission-ili-frame-text {
    font-size: 1.3rem;
  }
  .philosophy-mission-ili-frame-text-name {
    font-size: 1.2rem;
  }

  .philosophy-mission-ili-frame-text-contents > :nth-child(-n + 3) {
    margin-bottom: 3rem;
  }
}

/* =========================
   ↓私たちのスローガン
========================= */

.philosophy-slogan {
  padding: 0 0 30rem;
  background: #fff;
}

@media (max-width: 900px) {
  .philosophy-slogan {
    padding: 0 0rem 0;
  }
}

.philosophy-slogan__container {
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* 左側に余白（キモ） */
.philosophy-slogan__left {
  padding-left: clamp(18px, 3vw, 56px);
}

/* ---------------------
大文字用
--------------------- */
/* 英語コピー（h2） */
.philosophy-slogan__title {
  position: relative;
  margin-bottom: 12rem;
  margin-top: 13rem;

  font-family: var(--oubun-font);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 11rem;
  line-height: normal;
}

/*1720px以下のとき以下を採用*/
@media (max-width: 1720px) {
  .philosophy-slogan__title {
    font-size: 10.2rem;
  }
}
@media (max-width: 1580px) {
  .philosophy-slogan__title {
    font-size: 9.2rem;
  }
}
@media (max-width: 1480px) {
  .philosophy-slogan__title {
    font-size: 8.2rem;
  }
}
@media (max-width: 1300px) {
  .philosophy-slogan__title {
    margin-top: 13rem;

    font-size: 7.2rem;
  }
}
@media (max-width: 1180px) {
  .philosophy-slogan__title {
    margin-top: 7rem;

    font-size: 6.2rem;
  }
}
@media (max-width: 1000px) {
  .philosophy-slogan__title {
    margin-top: 1rem;

    font-size: 5.7rem;
  }
}
@media (max-width: 900px) {
  .philosophy-slogan__title {
    margin-top: 0rem;

    font-size: 8.5rem;
  }
}
@media (max-width: 800px) {
  .philosophy-slogan__title {
    margin-top: 0rem;

    font-size: 7.5rem;
  }
}
@media (max-width: 630px) {
  .philosophy-slogan__title {
    margin-top: 0rem;

    font-size: 6.5rem;
  }
}
@media (max-width: 550px) {
  .philosophy-slogan__title {
    margin-top: 0rem;

    font-size: 4.5rem;
  }
}
@media (max-width: 430px) {
  .philosophy-slogan__title {
    margin-top: 0rem;

    font-size: 3.4rem;
  }
}

.philosophy-slogan__title-do {
  color: var(--ili-t-color);
}

.philosophy-slogan__title-rest {
  color: #6b6b6b;
}

/* タイトル下：オーナメント横リピートライン（疑似要素） */
.philosophy-slogan__title::after {
  content: "";
  display: block;
  margin-top: 24px;
  width: 98%;
  height: 36px;

  background-image: url(../img/on-bottom.png);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;

  opacity: 0.05;
}

@media (max-width: 768px) {
  .philosophy-slogan__title::after {
    margin-top: 24px;

    width: 98%;
    height: 30px;
  }
}

/* 日本語ラベル（p） */
.philosophy-slogan__label {
  position: relative;
  color: var(--ili-t-color);
  margin-bottom: 6rem;
}

.philosophy-slogan__label::before {
  position: absolute;
  content: "";
  background-image: url(../img/ona-01-Purple-gray.svg);
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  left: 0rem;
  top: -5rem;
}

/* 説明文 */
.philosophy-slogan__text {
  width: 80%;
  color: var(--text-color);
}
/*1300px以下のとき以下を採用*/
@media (max-width: 1300px) {
  .philosophy-slogan__text {
    width: 90%;
  }
}
@media (max-width: 1300px) {
  .philosophy-slogan__text {
    width: 100%;
    margin-bottom: 3rem;
  }
}

/* 右：画像 */
.philosophy-slogan__visual {
  position: relative;
}

/* 画像の「薄い分身」＝影っぽい表現（疑似要素） */
.philosophy-slogan__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/philosophy-slogan-img-shadow.webp);
  background-size: cover;
  background-position: center;
  transform: translate(-28px, 28px);
  opacity: 1;
  z-index: 1;
}

@media (max-width: 768px) {
  .philosophy-slogan__visual::before {
    display: none;
  }
}
.philosophy-slogan__img {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 900px以下で縦並び */
@media (max-width: 900px) {
  .philosophy-slogan__container {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 0 4rem 20rem;
  }

  .philosophy-slogan__left {
    padding-left: 0;
  }

  .philosophy-slogan__visual {
    width: 100%;
  }

  .philosophy-slogan__visual::before {
    transform: translate(-20px, 20px);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .philosophy-slogan__container {
    padding: 0 2rem 23rem;
  }
}

/* =========================
   ↓PHILOSOPHY
========================= */
.philosophy-phi {
}

.philosophy-phi__container {
  padding: 0 4rem 30rem;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-phi__container {
    padding: 0 2rem 15rem;
  }
}

.philosophy-phi__container__title,
.philosophy-concept__container__title {
  position: relative;
  font-family: var(--oubun-font);
  color: var(--ili-t-color);
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 30rem;
  text-align: center;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-phi__container__title {
    margin-bottom: 10rem;
  }
}

.philosophy-phi__container__title::before {
  position: absolute;
  content: "";
  background-image: url(../img/philosophy-phi__container__title-ona.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ━DIFFERENCE━━━━━━━━━━━━━ */
.philosophy-difference {
}
.philosophy-difference__container {
}

.philosophy-difference__container__title {
  margin-bottom: 20rem;
}

.philosophy-difference__container__title__main {
  display: inline-block;
  color: var(--text-color);
  font-family: var(--oubun-font);
  font-weight: 400;
  font-size: 5rem;
  margin-bottom: 10rem;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-difference__container__title__main {
    margin-bottom: 5rem;
  }
  .philosophy-difference__container__title {
    margin-bottom: 10rem;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-difference__container__title {
    margin-bottom: 5rem;
  }
}

/*500px以下のとき以下を採用*/
@media (max-width: 500px) {
  .philosophy-difference__container__title__main {
    font-size: 4rem;
  }
}

.philosophy-difference__container__title__sub {
  display: block;
  color: var(--ili-t-color);
  letter-spacing: 1.52px;
}

/* -カード-------------------- */

.philosophy-difference-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rem;
}

/*1100px以下のとき以下を採用*/
@media (max-width: 1100px) {
  .philosophy-difference-container {
    gap: clamp(2rem, 4vw, 8rem);
  }
  .philosophy-difference-step-card {
    display: flex;
    flex-direction: column;
    width: 32%;
  }
  .philosophy-difference-step-card h3 {
    margin-bottom: 4.2rem;
  }
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-difference-container {
    flex-direction: column;
    gap: 10rem;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-difference-container {
    margin-bottom: 10rem;
  }
}

.philosophy-difference-step-card {
  display: flex;
  flex-direction: column;
  width: 31%;
}
.philosophy-difference-step-card img {
  display: block;
  margin-bottom: 5rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-difference-step-card img {
    margin-bottom: 3rem;
  }
}

.philosophy-difference-step-card h3 {
  color: var(--ili-t-color);
  font-size: 1.6rem;
  margin-bottom: 5.2rem;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-difference-step-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
  }
}

.philosophy-difference-step-card-bottom-text {
  text-align: left;
  margin-top: -2rem;
}

.philosophy-difference-step-card-bottom-text-title {
  font-family: var(--oubun-font);

  font-size: 1.3rem;
  color: #333;
  margin-bottom: 2rem;
}

.philosophy-difference-step-card-bottom-text-title-2 {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 4rem;
}

.philosophy-difference-step-card-bottom-text-title-3 {
  color: var(--ili-t-color);
  font-size: 1.9rem;
  min-height: 9rem;
}

/*1480px以下のとき以下を採用*/
@media (max-width: 1480px) {
  .philosophy-difference-step-card-bottom-text-title-3 {
    min-height: 11rem;
  }
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-difference-step-card-bottom-text-title-3 {
    min-height: 8rem;
  }
}
/*500px以下のとき以下を採用*/
@media (max-width: 500px) {
  .philosophy-difference-step-card-bottom-text-title-3 {
    min-height: 11rem;
  }
}

/* ━DNA━━━━━━━━━━━━━ */

.philosophy-dna {
}
.philosophy-dna__container {
  padding: 0 4rem 0rem;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-dna__container {
    padding: 0 0rem 0rem;
  }
}
.philosophy-dna__container__img {
  position: relative;
  z-index: 0;
  margin-bottom: 13rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-dna__container__img {
    margin-bottom: 5rem;
  }
}
.philosophy-dna__container__img::after {
  position: absolute;
  content: "";
  inset: 0;
  background-image: url(../img/approach-backcasting-bg-1.svg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;

  transform: translateX(60px);

  pointer-events: none;
  z-index: -1;
}
.philosophy-dna__container__img img {
  width: 80%;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-dna__container__img img {
    width: 100%;
  }

  .philosophy-dna__container__img::after {
    content: none;
  }
}

.philosophy-dna__container__img__under__text {
  width: 80%;
  margin-bottom: 20rem;
}
/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-dna__container__img__under__text {
    width: 100%;
    margin-bottom: 5rem;
  }
}

/* -ロゴ説明-------------------- */

.philosophy-dna__container__logo__contents {
  display: flex;
  width: 80%;
  justify-content: space-between;
  gap: 16rem;
  align-items: center;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-dna__container__logo__contents {
    gap: 5rem;
  }
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-dna__container__logo__contents {
    flex-direction: column;

    width: 100%;
  }
}

/*500px以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-dna__container__logo__contents {
    gap: 0;
  }
}

.philosophy-dna__container__logo__contents__text {
  width: 55%;
}

.philosophy-dna__container__logo__contents__logo {
  width: 40%;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-dna__container__logo__contents__text {
    width: 80%;
  }

  .philosophy-dna__container__logo__contents__logo {
    width: 45%;
  }
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-dna__container__logo__contents__text {
    width: 100%;
    margin-bottom: 10rem;
  }

  .philosophy-dna__container__logo__contents__logo {
    width: 50%;
  }
}

.philosophy-dna__container__logo__contents__text__item {
  font-size: 1.4rem;
}
.philosophy-dna__container__logo__contents__text__item__end {
  margin-top: 2rem;
}
/*550px以下のとき以下を採用*/
@media (max-width: 550px) {
  .philosophy-dna__container__logo__contents__logo {
    width: 65%;
  }
}

/* =========================
   ↓concept
========================= */

.philosophy-concept {
  position: relative;
  background-color: #f9f9f9;
  overflow: hidden;
}
.philosophy-concept > * {
  position: relative;
  z-index: 2;
}

.philosophy-concept::after {
  position: absolute;
  content: "";

  /* オーナメント画像 */
  background-image: url(../img/philosophy-concept-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;

  /* 大きさ（ここで「大きく」を調整） */
  width: min(700px, 60vw);
  height: min(700px, 60vw);

  /* 左から/下から（ここで距離調整） */
  left: 60px;
  bottom: 22px;

  /* 角度（ここで回転調整） */
  transform: rotate(-12deg);

  /* 重なり順：コンテンツより後ろ、背景より前 */
  z-index: 1;

  /* クリック邪魔しない */
  pointer-events: none;

  /* うるさければ薄く */
  opacity: 1;
}

.philosophy-concept__container {
  padding: 30rem 4rem 30rem;
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept__container {
    padding: 20rem 2rem 15rem;
  }
}

.philosophy-concept__container__title {
  margin-bottom: 20rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept__container__title {
    margin-bottom: 10rem;
  }
}
.philosophy-concept__container__title::before {
  position: absolute;
  content: "";
  background-image: url(../img/philosophy-phi__container__title-ona.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
}

/* grid--------------------- */

.philosophy-concept-container {
  display: grid;
  /* 上にコメント：左カラムを固定幅、右を可変にする */
  grid-template-columns: 26rem 1fr;
  /* 上にコメント：行間をそろえる */
  row-gap: 8rem;
  /* 上にコメント：全体の最大幅 */
  width: 86%;
  max-width: 100%;
  /* 上にコメント：本文の基本スタイル */
  color: var(--text-color);
  font-family: var(--japan-font);
  font-size: 1.6rem;
  column-gap: 11%;
  padding-right: 2rem;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-concept-container {
    width: 100%;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-concept-container {
    grid-template-columns: 1fr;
    row-gap: 4.5rem;
    column-gap: 23%;
    padding-right: 0rem;
  }
}
.philosophy-concept-label {
}
.philosophy-concept-container {
}
.philosophy-concept-label-main {
}

.philosophy-concept-framework-item-text {
  font-size: 1.6rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept-framework-item-text {
    font-size: 1.3rem;
  }
}

/* 図解 */

.philosophy-concept-label-main-dam {
  opacity: 0;
}
.philosophy-concept-Illustrated {
}
.philosophy-concept-Illustrated-top-text {
  text-align: center;
  margin-bottom: 6rem;
}

.philosophy-concept-Illustrated-inner {
  display: flex;
  justify-content: center;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept-Illustrated-inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }
}

/* 左図解 */

.philosophy-concept-Illustrated-box-left {
  width: 30%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  justify-content: flex-start;
}
/*1500px以下のとき以下を採用*/
@media (max-width: 1500px) {
  .philosophy-concept-Illustrated-box-left {
    width: 40%;
  }
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept-Illustrated-box-left {
    width: 100%;
  }
}

.philosophy-concept-Illustrated-box-top-text {
  text-align: center;
}

.philosophy-concept-Illustrated-box-top-text-sub {
  display: block;
  font-size: 1.4rem;
}

.philosophy-concept-Illustrated-box-top-text-sub {
}

.philosophy-concept-Illustrated-box-left img {
  width: 177px;
}
.philosophy-concept-Illustrated-box-bottom-text {
  margin-top: 23px;
}
.philosophy-concept-Illustrated-box-bottom-text-item {
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.4;
}

/* 中央図解 */

.philosophy-concept-Illustrated-box-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  transform: translateY(-2rem);
}

/*1000px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-concept-Illustrated-box-center {
    transform: translateY(-4rem);
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept-Illustrated-box-center {
    transform: rotate(90deg) translateX(0rem);
  }
}

/* 右図解 */

.philosophy-concept-Illustrated-box-right {
  width: 30%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  justify-content: flex-start;
}

/*1500px以下のとき以下を採用*/
@media (max-width: 1500px) {
  .philosophy-concept-Illustrated-box-right {
    width: 40%;
  }
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-concept-Illustrated-box-right {
    width: 100%;
  }
}

.philosophy-concept-Illustrated-box-bottom-text-right {
}

.philosophy-concept-Illustrated-box-bottom-text-right-p {
  text-align: center;
  font-size: 1.3rem;
  padding: 0 3rem;
}

.philosophy-concept-Illustrated-box-right img {
  width: 161px;
}

/* ↑grid--------------------- */

/* =========================
   ↓GLOBAL
========================= */

.philosophy-global {
  position: relative;
  background-color: #352e47;
  overflow: hidden;
}
.philosophy-global > * {
  position: relative;
  z-index: 0;
}
.philosophy-global::before {
  position: absolute;
  content: "";
  background-image: url(../img/philosophy-global-bg-logo.svg);
  top: 170px;
  left: -180px;
  background-repeat: no-repeat;
  width: 880px;
  height: 880px;
  opacity: 0.02;
}

.philosophy-global__container {
  padding: 30rem 4rem 40rem;
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-global__container {
    padding: 20rem 2rem 35rem;
  }
}

/* タイトル */

.philosophy-global__container__title {
  margin-bottom: 20rem;
  color: #fff;
}

.philosophy-global__container__title__main {
  display: inline-block;
  font-family: var(--oubun-font);
  font-weight: 400;
  font-size: 5rem;
  margin-bottom: 10rem;
}

/*900px以下のとき以下を採用*/
@media (max-width: 900px) {
  .philosophy-global__container__title__main {
    margin-bottom: 5rem;
  }
  .philosophy-global__container__title {
    margin-bottom: 10rem;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-global__container__title {
    margin-bottom: 5rem;
  }
}

/*500px以下のとき以下を採用*/
@media (max-width: 500px) {
  .philosophy-global__container__title__main {
    font-size: 4rem;
  }
}

.philosophy-global__container__title__sub {
  display: block;
  color: #fff;
  letter-spacing: 1.52px;
}

/* grid */

.philosophy-global-container {
  position: relative;
  display: grid;
  /* 上にコメント：左カラムを固定幅、右を可変にする */
  grid-template-columns: 26rem 1fr;
  /* 上にコメント：行間をそろえる */
  row-gap: 8rem;
  /* 上にコメント：全体の最大幅 */
  width: 86%;
  max-width: 100%;
  /* 上にコメント：本文の基本スタイル */
  color: var(--text-color);
  font-family: var(--japan-font);
  font-size: 1.6rem;
  column-gap: 11%;
  padding-right: 2rem;
  align-items: start;
}

/*1280px以下のとき以下を採用*/
@media (max-width: 1280px) {
  .philosophy-global-container {
    width: 100%;
  }
}

/*768px以下のとき以下を採用*/
@media (max-width: 1000px) {
  .philosophy-global-container {
    grid-template-columns: 1fr;
    row-gap: 4.5rem;
    column-gap: 23%;
    padding-right: 0rem;
  }
}
.philosophy-global-label {
}
.philosophy-global-container {
}
.philosophy-global-label-main {
  color: #fff;
}

.philosophy-global-framework-item-text {
  color: #fff;

  font-size: 1.6rem;
  margin-bottom: 3rem;
}
/*768px以下のとき以下を採用*/
@media (max-width: 768px) {
  .philosophy-global-framework-item-text {
    color: #fff;

    font-size: 1.3rem;
  }
}

.philosophy-global-framework-item-list {
}

.philosophy-global-framework-item-list-item {
  line-height: 36px; /* 225% */
  letter-spacing: 1.28px;
  font-size: 1.4rem;
}

.philosophy-global-framework-item {
  color: #fff;
}

.philosophy-global-framework-item-text-bottom {
  margin-top: 2rem;
  color: #fff;

  font-size: 1.6rem;
}

.philosophy-global-framework-item-text-bottom-box {
  position: relative;
}
.philosophy-global-framework-item-text-bottom-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -90px;
  height: 26px;
  background-image: url(../img/philosophy-global-bottom-ona.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.5;
}

.philosophy-global-label-main-bottom {
  color: #352e47;
}

.philosophy-global-framework-item-text-bottom-logo {
}

.philosophy-global-framework-item-text-bottom-logo img {
  display: inline-block;
  width: 150px;
  height: auto;
}

.philosophy-global-framework-item-text-bottom-name {
  position: relative;
}
.philosophy-global-framework-item-text-bottom-name::after {
  /* 疑似要素を表示 */
  content: "";

  /* 親要素を基準に絶対配置 */
  position: absolute;

  /* 右下に配置 */
  right: 0;
  bottom: -170px;

  /* 表示サイズを確定させる（必須） */
  width: 160px;
  height: 76px;

  /* 画像設定 */
  background-image: url(../img/philosophy-global-bottom-logo.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right bottom;

  /* 透過 */
  opacity: 1;
}