@charset "UTF-8";
/*==================================================
** Project Story
==================================================*/
/* カラー定義（画像からの抽出） */
#projectSec {
  /* --------------------------------------
  * 1. MVエリア（横並び・重ならないレイアウト）
  -------------------------------------- */
  /* --------------------------------------
  * 2. 各セクション共通見出し
  -------------------------------------- */
  /* --------------------------------------
  * 3. Project Member
  -------------------------------------- */
  /* --------------------------------------
  * 2. 各セクション共通見出し
  -------------------------------------- */
  /* --------------------------------------
  * 3. Project Member（アーチ型写真とカラー調整）
  -------------------------------------- */
  /* --------------------------------------
  * 4. Project Mission
  -------------------------------------- */
  /* --------------------------------------
  * 5. Q&A セクション
  -------------------------------------- */
  /* --------------------------------------
  * ★ 個別カラーの適用（名前と役職のみ）
  -------------------------------------- */
  /* --------------------------------------
  * 6. SP時の順番入れ替え (order)
  -------------------------------------- */
}
#projectSec .h1-ptn1 {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  #projectSec .h1-ptn1 {
    margin-bottom: 25px;
  }
}
#projectSec .project-mv {
  display: flex;
  border: 2px solid #ea0a2a; /* 全体を囲う赤い枠線 */
  border-radius: 10px;
  overflow: hidden; /* 角丸を画像にも適用させるため */
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mv {
    flex-direction: column;
    margin-top: 20px;
  }
}
#projectSec .project-mv .phtbox {
  width: 58%; /* 写真エリアの幅 */
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mv .phtbox {
    width: 100%;
  }
}
#projectSec .project-mv .phtbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#projectSec .project-mv .txtbox {
  background: #ea0a2a; /* 赤色背景 */
  color: #fff;
  padding: 50px 40px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mv .txtbox {
    padding: 30px 20px;
  }
}
#projectSec .project-mv .txtbox .catch {
  font-size: min(2.6923076923vw, 2.4rem);
  font-family: "Gantari", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mv .txtbox .catch {
    font-size: 2rem;
  }
}
#projectSec .project-mv .txtbox .sub {
  margin-top: 30px;
  background: #fad7cf; /* デザインに合わせた薄いピンク系の背景 */
  color: #ea0a2a; /* 赤文字 */
  border-radius: 5px;
  padding: 15px 20px;
  font-size: min(1.4423076923vw, 1.5rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mv .txtbox .sub {
    margin-top: 20px;
    padding: 12px 15px;
    font-size: 1.3rem;
  }
}
#projectSec .section-ttl-wrap {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  #projectSec .section-ttl-wrap {
    margin-top: 60px;
  }
}
#projectSec .section-ttl {
  background: #fa8678;
  color: #fff;
  border-radius: 50px;
  display: inline-block;
  padding: 10px 45px;
  font-size: 2.2rem;
  font-family: "Gantari", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #projectSec .section-ttl {
    font-size: 1.8rem;
    padding: 8px 30px;
  }
}
#projectSec .project-member .member-list {
  display: flex;
  justify-content: space-between;
  gap: 4%;
}
@media screen and (max-width: 767px) {
  #projectSec .project-member .member-list {
    flex-direction: column;
    gap: 40px;
  }
}
#projectSec .project-member .member-list .color-yi {
  color: #11328c;
}
#projectSec .project-member .member-list .color-kh {
  color: #c9027c;
}
#projectSec .project-member .member-list .color-yf {
  color: #008c0d;
}
#projectSec .project-member .member-list li {
  display: flex;
  gap: 20px;
  width: 32%;
}
@media screen and (max-width: 767px) {
  #projectSec .project-member .member-list li {
    width: 100%;
  }
}
#projectSec .project-member .member-list li .icon {
  width: 100px; /* ★書き出した名前付き画像が入るようサイズを調整 */
  flex-shrink: 0;
  text-align: center;
}
#projectSec .project-member .member-list li .icon img {
  width: 100%;
  display: block;
}
#projectSec .project-member .member-list li .desc .title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}
#projectSec .project-member .member-list li .desc .text {
  font-size: 1.3rem;
  line-height: 1.7;
  text-align: justify;
}
#projectSec .section-ttl-wrap {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 80px; /* MVのはみ出し分を考慮して余白追加 */
}
@media screen and (max-width: 767px) {
  #projectSec .section-ttl-wrap {
    margin-top: 60px;
  }
}
#projectSec .section-ttl {
  background: #fa8678;
  color: #fff;
  border-radius: 50px;
  display: inline-block;
  padding: 10px 45px;
  font-size: 2.2rem;
  font-family: "Gantari", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #projectSec .section-ttl {
    font-size: 1.8rem;
    padding: 8px 30px;
  }
}
#projectSec .project-member .member-list {
  display: flex;
  justify-content: space-between;
  gap: 3%;
}
@media screen and (max-width: 767px) {
  #projectSec .project-member .member-list {
    flex-direction: column;
    gap: 40px;
  }
}
#projectSec .project-member .member-list li {
  display: flex;
  gap: 20px;
  width: 32%;
}
@media screen and (max-width: 767px) {
  #projectSec .project-member .member-list li {
    width: 100%;
  }
}
#projectSec .project-member .member-list li .icon {
  width: 90px; /* 写真のサイズを少し大きめに */
  flex-shrink: 0;
  text-align: center;
}
#projectSec .project-member .member-list li .icon img {
  width: 100%;
  display: block;
  /* border-radius: 50%; を削除し、画像の形をそのまま活かす */
}
#projectSec .project-member .member-list li .icon .name {
  font-family: "Gantari", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  display: block;
  margin-top: 10px;
}
#projectSec .project-member .member-list li .desc .title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}
#projectSec .project-member .member-list li .desc .text {
  font-size: 1.3rem;
  line-height: 1.7;
  text-align: justify;
}
#projectSec .project-mission {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mission {
    margin-top: 60px;
  }
}
#projectSec .project-mission .mission-text {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #projectSec .project-mission .mission-text {
    text-align: left;
  }
}
#projectSec .project-mission .mission-text p {
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 500;
}
#projectSec .project-qa-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 5%;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  #projectSec .project-qa-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
  }
}
#projectSec .project-qa-wrapper .column-left,
#projectSec .project-qa-wrapper .column-right {
  width: 47.5%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media screen and (max-width: 767px) {
  #projectSec .project-qa-wrapper .column-left,
  #projectSec .project-qa-wrapper .column-right {
    width: 100%;
    display: contents;
  }
}
#projectSec .q-txt {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 30px;
}
#projectSec .q-txt::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #999;
  flex-shrink: 0;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  #projectSec .q-txt {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
}
#projectSec .a-item {
  display: flex;
  gap: 18px;
  margin-bottom: 25px;
}
#projectSec .a-item:last-child {
  margin-bottom: 0;
}
#projectSec .a-item .person {
  width: 50px;
  flex-shrink: 0;
  text-align: center;
}
#projectSec .a-item .person img {
  width: 100%;
  /* こちらのアイコンは丸くする */
  border-radius: 50%;
  display: block;
}
#projectSec .a-item .person .name {
  font-family: "Gantari", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  display: block;
  margin-top: 5px;
}
#projectSec .a-item .text {
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 500;
  text-align: justify;
  color: #333; /* 本文は黒色に固定 */
}
#projectSec .a-item .text p + p {
  margin-top: 1em;
}
#projectSec .img-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
#projectSec .color-yi .name, #projectSec .color-yi .title, #projectSec .color-yi .text {
  color: #11328c;
}
#projectSec .color-kh .name, #projectSec .color-kh .title, #projectSec .color-kh .text {
  color: #c9027c;
}
#projectSec .color-yf .name, #projectSec .color-yf .title, #projectSec .color-yf .text {
  color: #008c0d;
}
@media screen and (max-width: 767px) {
  #projectSec .sp-order-2 {
    order: 2;
  }
  #projectSec .sp-order-4 {
    order: 4;
  }
  #projectSec .sp-order-5 {
    order: 5;
  }
  #projectSec .sp-order-8 {
    order: 8;
  }
  #projectSec .sp-order-10 {
    order: 10;
  }
  #projectSec .sp-order-12 {
    order: 12;
  }
  #projectSec .sp-order-14 {
    order: 14;
  }
  #projectSec .sp-order-16 {
    order: 16;
  }
  #projectSec .sp-order-1 {
    order: 1;
  }
  #projectSec .sp-order-3 {
    order: 3;
  }
  #projectSec .sp-order-6 {
    order: 6;
  }
  #projectSec .sp-order-7 {
    order: 7;
  }
  #projectSec .sp-order-9 {
    order: 9;
  }
  #projectSec .sp-order-11 {
    order: 11;
  }
  #projectSec .sp-order-13 {
    order: 13;
  }
  #projectSec .sp-order-15 {
    order: 15;
  }
}