@charset "UTF-8";
/* ========================================
   1. ボックスモデルの設定
   ======================================== */
/* すべての要素でボックスサイジングをborder-boxに設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========================================
   2. 基本的なリセット
   ======================================== */
/* ボディ、HTML、マージン、パディングをリセット */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif; /* 標準フォントファミリー */
  line-height: 1.5; /* 行間を標準に */
}

html {
  margin-top: 0 !important;
}

/* ========================================
   3. 主要な要素のスタイルリセット
   ======================================== */
/* 見出し要素のスタイルリセット */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* リスト要素のリセット */
ul, ol {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  margin: 0;
  padding: 0;
}

/* リンクのスタイルをリセット */
a {
  text-decoration: none; /* リンクの下線を削除 */
  color: inherit; /* リンクの色を親要素から継承 */
}

/* フォームのスタイルをリセット */
input, button, select, textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  border: none; /* フォームのデフォルトボーダーを削除 */
  background-color: transparent; /* リンクの背景色を透明に */
}

/* ========================================
   4. 表のスタイルリセット
   ======================================== */
/* 表のスタイルをリセット */
table {
  border-collapse: collapse; /* テーブルのセルの隙間を取り除く */
  width: 100%;
}

/* 表のセルにパディングを追加 */
th, td {
  padding: 0;
  text-align: left;
}

/* ========================================
   5. その他のスタイルリセット
   ======================================== */
/* ========================================
   6. その他の調整
   ======================================== */
/* 画像のリセット */
img {
  max-width: 100%; /* 画像が親要素の幅を超えないように */
  height: auto; /* 画像の高さを自動で調整 */
}

/* ========================================
   7. テキストのリセット
   ======================================== */
/* テキストのスタイルをリセット */
p, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

.fx-col {
  display: flex;
  flex-direction: column;
}

.fx-col-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.fx-row {
  display: flex;
  flex-direction: row;
}

.fx-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.fx-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fx-wrap {
  display: flex;
  flex-wrap: wrap;
}

.fx-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

.fx-between {
  display: flex;
  justify-content: space-between;
}

.fx-around {
  display: flex;
  justify-content: space-around;
}

.fx-evenly {
  display: flex;
  justify-content: space-evenly;
}

.w-100 {
  width: 100%;
}

.w-80 {
  width: 80%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.pt-section {
  padding-top: 10em;
}

.dis-none {
  display: none;
}

.about {
  padding: 15vw 0;
}
.about .container h2 {
  font-size: clamp(35px, 7vw, 60px);
  font-weight: bold;
  letter-spacing: 0.05em;
  position: relative;
  width: fit-content;
  font-weight: 600;
  font-style: normal;
  font-style: italic;
  transform: skew(-15deg);
  rotate: -3deg;
  line-height: 1;
  z-index: -1;
}
.about .container h2::before {
  content: "";
  position: absolute;
  width: calc(100% + 20px);
  height: 10px;
  background-color: #C1272D;
  bottom: 0;
  left: 0;
  z-index: -2;
  overflow: visible;
}
.about .container h2 span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(20px, 5vw, 50px);
}
.about .container .content {
  gap: 3vw;
  padding-top: 15vw;
}
.about .container .content .text-container {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  gap: 4vw;
  letter-spacing: 0.05em;
  width: 50%;
}
.about .container .content .text-container h3 {
  font-size: clamp(24px, 2.5vw, 32px);
}
.about .container .content .text-container p {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2.5;
}
.about .container .content .img-container {
  position: relative;
  width: 50%;
}
.about .container .content .img-container .about-1 {
  position: absolute;
  top: -100px;
  left: 0;
  transform: translateY(-50%);
  width: clamp(100px, 30vw, 350px);
  aspect-ratio: 3/2;
  object-fit: cover;
  box-shadow: 10px 10px white;
}
.about .container .content .img-container .about-2 {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: clamp(150px, 30vw, 350px);
  aspect-ratio: 2/3;
  object-fit: cover;
  box-shadow: 10px 10px white;
}
@media (max-width: 768px) {
  .about .container .content {
    flex-direction: column;
  }
  .about .container .content .text-container, .about .container .content .img-container {
    width: 100%;
    text-align: center;
    gap: 4vw;
  }
  .about .container .content .img-container {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
  .about .container .content .img-container .about-1, .about .container .content .img-container .about-2 {
    position: unset;
    transform: unset;
    aspect-ratio: 3/2;
    width: 48%;
    height: auto;
  }
}

section.young {
  width: 90%;
  position: relative;
}
section.young .text-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr) clamp(250px, 40vw, 500px) 0 repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 50px;
}
section.young .text-container p {
  grid-area: 2/5/7/6;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2.5;
  text-align: center;
}
section.young .text-container img {
  width: clamp(150px, 20vw, 250px);
  aspect-ratio: 3/2;
  object-fit: cover;
  filter: blur(3px);
}
section.young .text-container .about-3 {
  grid-area: 2/1/3/3;
}
section.young .text-container .about-4 {
  grid-area: 3/2/4/4;
}
section.young .text-container .about-5 {
  grid-area: 4/1/5/3;
}
section.young .text-container .about-7 {
  grid-area: 1/8/2/10;
}
section.young .text-container .about-8 {
  grid-area: 2/9/3/11;
}
section.young .text-container .about-9 {
  grid-area: 3/8/4/10;
}
section.young .text-container .about-10 {
  grid-area: 4/9/5/11;
}
section.young .sub-title {
  position: absolute;
  top: -20px;
  left: 50%;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #C1272D;
  transform: skewX(-20deg) translateX(-50%);
  padding: 0.5em 1em;
}
@media (max-width: 768px) {
  section.young {
    margin-bottom: 5em;
  }
}
@media (max-width: 500px) {
  section.young {
    margin-top: 5em;
  }
  section.young .text-container {
    grid-template-columns: unset;
    width: 90%;
  }
  section.young .text-container img {
    display: none;
  }
  section.young .sub-title {
    width: max-content;
  }
}

.background-w {
  background: white url("../../img/top/about-back.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10vw 0;
}

section.desire .sub-title {
  margin: auto;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #C1272D;
  transform: skewX(-20deg);
  padding: 0.5em 1em;
}
section.desire .container {
  margin-top: 5vw;
  gap: 10vw;
}
section.desire .container img {
  width: 30%;
  aspect-ratio: 1/1;
  box-shadow: 10px 10px #C1272D;
  object-fit: cover;
}
section.desire .container .text-container {
  width: 50%;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: bold;
  gap: 2vw;
}
section.desire .container .text-container p {
  color: #333;
  line-height: 2;
  text-align: justify;
}
section.desire .container .text-container span {
  color: #333;
  font-size: clamp(18px, 2vw, 25px);
  text-align: right;
}
@media (max-width: 500px) {
  section.desire .container {
    flex-direction: column;
  }
  section.desire .container img {
    width: 70%;
  }
  section.desire .container .text-container {
    width: 90%;
  }
  section.desire .container .text-container p {
    text-align: center;
  }
}

/*# sourceMappingURL=about.css.map */