/* ============================================================
   2. concept  (page y 900-2286)
   rect は 1440px 幅時の絶対座標から section y0=900 を引いた値
   ============================================================ */

#concept {
  height: 1386.23px;
  /* 右上の浮遊イラストが hero 側へはみ出すため clip しない */
  overflow: visible;
}

/* --- 描画背景カード [16,116,1408,1270.23] --------------------
   原本の描画画像の代替: 淡ピンクを基調にした多層 radial-gradient */
.concept__card {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 1408px;
  height: 1270.23px;
  border-radius: 16px;
  background-color: #F7EFEA;
  background-image:
    radial-gradient(120% 90% at 12% 6%,  rgba(240, 79, 158, 0.14), rgba(240, 79, 158, 0) 62%),
    radial-gradient(100% 80% at 90% 10%, rgba(93, 63, 232, 0.10),  rgba(93, 63, 232, 0) 60%),
    radial-gradient(110% 85% at 82% 94%, rgba(62, 201, 245, 0.12), rgba(62, 201, 245, 0) 62%),
    radial-gradient(90%  70% at 26% 72%, rgba(247, 166, 60, 0.10), rgba(247, 166, 60, 0) 60%),
    linear-gradient(180deg, #FBF4F0 0%, #F6EDE8 100%);
}

/* --- カードに重なる彩色の刷毛あと（カード外へはみ出す分をclip） -- */
.concept__art {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 1408px;
  height: 1270.23px;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(238, 79, 224, 0.34), rgba(238, 79, 224, 0) 100%),
    radial-gradient(closest-side, rgba(59, 232, 122, 0.30), rgba(59, 232, 122, 0) 100%),
    radial-gradient(closest-side, rgba(62, 201, 245, 0.28), rgba(62, 201, 245, 0) 100%),
    radial-gradient(closest-side, rgba(247, 166, 60, 0.26), rgba(247, 166, 60, 0) 100%),
    radial-gradient(closest-side, rgba(93, 63, 232, 0.22), rgba(93, 63, 232, 0) 100%),
    radial-gradient(closest-side, rgba(240, 78, 82, 0.20),  rgba(240, 78, 82, 0) 100%);
  background-repeat: no-repeat;
  background-size:
    460px 130px, 380px 112px, 320px 96px,
    540px 150px, 400px 124px, 300px 100px;
  background-position:
    60% 10%, 76% 20%, 22% 88%,
    6% 44%, 90% 64%, 44% 96%;
}

/* --- ノッチ角（逆丸角）は .notch ユーティリティ（chrome.css）--- */

/* --- 左上 白箱 縦組み見出し [16,116,448.188,612.141] --------- */
.concept__lead {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 448.188px;
  height: 612.141px;
  padding: 0 81.9936px 103.003px 80.0064px;
  background-color: #fff;
  border-radius: 0 0 16px 0;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 34px;
}

/* 縦組み見出し。以前は幅57pxの横書きカラムに1文字ずつ折り返す方式だったが、
   「ー」が横棒のまま・句読点が横書き位置のままになるため writing-mode に変更（2026-08-25） */
.concept__leadCol {
  width: 57.125px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-jp);
  font-size: 56.016px;
  font-weight: 900;
  line-height: 56.5705px;
  letter-spacing: 0.56016px;
  color: var(--navy);
  text-align: start;
}

/* 『まかせられる』は1文字ずつ白箱に載せた多色組み（原本と同方式） */
.concept__leadQuote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 103.953px;
}

.concept__leadChar {
  display: block;
  width: 103.953px;
  height: 62px;
  background-color: #fff;
  font-family: var(--font-jp);
  font-feature-settings: 'palt' 1;
  font-size: 50px;
  font-weight: 900;
  line-height: 62px;
  text-align: center;
}

.concept__leadChar.is-red     { color: var(--red); }
.concept__leadChar.is-orange  { color: var(--orange); }
.concept__leadChar.is-green   { color: var(--green); }
.concept__leadChar.is-cyan    { color: var(--cyan); }
.concept__leadChar.is-blue    { color: var(--blue); }
.concept__leadChar.is-magenta { color: var(--magenta); }

.concept__notch--leadRight  { left: 448.188px; top: 0; }
.concept__notch--leadBottom { left: 0;         top: 612.141px; }

/* --- 右側 本文 [624,276,741.828,926.25] ---------------------- */
.concept__body {
  position: absolute;
  top: 276px;
  left: 624px;
  width: 741.828px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.concept__text {
  font-family: var(--font-jp);
  font-feature-settings: 'palt' 1;
  font-size: 27.936px;
  font-weight: 900;
  line-height: 55.872px;
  color: var(--navy);
  text-align: left;
}

/* ハイライト: 白地の帯 */
.concept__text strong {
  font-weight: 900;
  background-color: #fff;
}

/* 強調語: 斜体にせず色だけ変える */
.concept__text em {
  font-style: normal;
  font-weight: 900;
}

.concept__text .is-red     { color: var(--red); }
.concept__text .is-orange  { color: var(--orange); }
.concept__text .is-green   { color: var(--green); }
.concept__text .is-cyan    { color: var(--cyan); }
.concept__text .is-blue    { color: var(--blue); }
.concept__text .is-magenta { color: var(--magenta); }

/* --- 浮遊イラスト ------------------------------------------- */
.concept__char {
  position: absolute;
  z-index: 3;
}

.concept__char--1 {
  top: 34px;
  left: 1159.09px;
  width: 260px;
  height: 228px;
  animation: top_message_float01 2s ease-in-out infinite alternate;
}

.concept__char--2 {
  top: 556.006px;
  left: 59px;
  width: 522px;
  height: 446px;
  animation: top_message_float01 3s ease-in-out infinite alternate;
}

/* 差し替えたイラストは縦横比が違うため contain で歪ませない */
.concept__char img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes top_message_float01 {
  0%   { transform: translateY(20px); }
  100% { transform: translateY(-20px); }
}