@charset "UTF-8";

/* =========================================
   Concept (コンセプトエリア)
   ========================================= */
.concept {
  background-color: var(--color-bg-gray);
  padding: 0; /* PC表示：最上部と最下部の余白をゼロに */
}

/* PC：左右2カラム配置・中央寄せ・間隔調整 */
.concept__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  padding: 0 2rem;
}

.concept__content {
  width: auto;
}

.concept__flow {
  width: auto;
}

/* -----------------------------
   左側コンテンツ
----------------------------- */
.concept__logo {
  margin-bottom: 2rem;
}

.concept__logo img {
  height: 3.2rem;
  width: auto;
}

.concept__title {
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 3.2rem;
  color: var(--color-text-main);
  letter-spacing: 0.05em;
}

/* 特定キーワードのサイズアップとカラー指定 */
.concept__title-blue {
  color: #4e92ff;
  font-size: 1.15em;
}

.concept__title-purple {
  color: #b885fe;
  font-size: 1.15em;
}

/* グラデーションテキスト */
.concept__title-gradient {
  background: linear-gradient(to right, #4e92ff, #b885fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.15em;
}

.concept__lead {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-navy);
}

/* -----------------------------
   右側フローコンテンツ
----------------------------- */
.concept__list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.concept__item {
  display: flex;
  align-items: center;
  width: 36rem;
  height: 9.6rem;
  border-radius: 1.6rem;
  padding: 0 3.2rem;
}

.concept__icon {
  width: 8.8rem; 
  margin-right: 2.4rem;
  flex-shrink: 0;
}

.concept__text {
  font-size: 2.8rem; 
  font-weight: 700;
  color: var(--color-text-navy);
}

/* 各ステップの背景色 */
.concept__item--step1 { background-color: #e6effd; }
.concept__item--step2 { background-color: #e6ecfd; }
.concept__item--step3 { background-color: #e3e9fd; }
.concept__item--step4 { background-color: #ece7fd; }
.concept__item--step5 { background-color: #f6eafc; }

/* 矢印アイコンの設定 */
.concept__arrow {
  font-size: 2.8rem;
  margin: -0.2rem 0; 
}

/* Font Awesomeのアイコンの太さを調整 */
.concept__arrow i {
  -webkit-text-stroke: 1px currentColor;
}

/* 各矢印のカラー指定 */
.concept__arrow--step1 { color: #6bb4f9; }
.concept__arrow--step2 { color: #868cfe; }
.concept__arrow--step3 { color: #aa89fe; }
.concept__arrow--step4 { color: #b080ed; }

/* =========================================
   Responsive Settings
   ========================================= */
/* タブレット表示 (768px〜1024px) */
@media (max-width: 1024px) {
  .concept {
    /* タブレット表示：最上部を狭め、最下部の余白をゼロにする */
    padding: 4rem 0 0; 
  }
  .concept__inner {
    gap: 4vw;
  }
  .concept__logo {
    margin-bottom: 1.5vw; 
  }
  .concept__logo img {
    height: 4.5vw; 
  }
  .concept__title {
    font-size: 5.5vw; 
    margin-bottom: 2vw; 
  }
  .concept__lead {
    font-size: 3.5vw; 
  }
  .concept__item {
    width: 38vw;
    height: 10vw;
    padding: 0 3vw;
    border-radius: 1.5vw;
  }
  .concept__icon {
    width: 8.5vw;
    margin-right: 2.5vw;
  }
  .concept__text {
    font-size: 2.6vw;
  }
  .concept__arrow {
    font-size: 3vw;
    margin: -0.2vw 0;
  }
}

/* スマホ表示 (767px以下) */
@media (max-width: 767px) {
  .concept {
    padding: 4rem 0 0; /* 下余白を0に */
  }
  
  /* 1カラム縦積みに変更 */
  .concept__inner {
    flex-direction: column;
    gap: 2.4rem;
  }
  
  /* 左側コンテンツを中央揃えにするための設定 */
  .concept__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .concept__logo {
    margin-top: 1.5rem; 
    margin-bottom: 1rem; 
  }

  .concept__logo img {
    height: 6vw; 
  }
  
  .concept__flow {
    width: 100%;
  }

  /* テキストの最適化 */
  .concept__title {
    font-size: clamp(3.2rem, 8.5vw, 4.0rem);
    margin-bottom: 2.4rem;
  }
  
  .concept__lead {
    font-size: clamp(2.2rem, 5.5vw, 2.6rem);
  }

  /* フロー図の配置最適化 */
  .concept__item {
    width: 100%;
    max-width: 40rem; 
    height: 20vw;
    padding: 0 6vw;
    border-radius: 2.4vw;
  }
  .concept__icon {
    width: 18vw;
    margin-right: 5vw;
  }
  .concept__text {
    font-size: 6vw;
  }
  .concept__arrow {
    font-size: 6vw;
    margin: 0.5vw 0;
  }
}