/* s-concept-001: コンセプトセクション */

.s-concept-001 {
  padding-top: var(--wp--preset--spacing--3-xl);
  padding-bottom: var(--wp--preset--spacing--3-xl);
  background-color: var(--wp--preset--color--gray-lightest);

  .s-concept-001__content {
    gap: var(--wp--preset--spacing--xl);
    align-items: center;
  }

  /* 英字ラベル */
  .s-concept-001__en {
    font-size: var(--wp--preset--font-size--tiny);
    text-transform: uppercase;
    letter-spacing: var(--wp--custom--letter-spacing--widest);
    color: var(--wp--preset--color--secondary);
    font-family: var(--wp--preset--font-family--noto-serif);
    font-style: italic;
    margin-bottom: var(--wp--preset--spacing--xs);
  }

  .s-concept-001__title {
    font-size: var(--wp--preset--font-size--xl);
    color: var(--wp--preset--color--gray-darkest);
    line-height: var(--wp--custom--line-height--normal);
    margin-bottom: var(--wp--preset--spacing--md);
  }

  .s-concept-001__body {
    color: var(--wp--preset--color--gray-darker);
    font-size: var(--wp--preset--font-size--sm);
    line-height: var(--wp--custom--line-height--relaxed);
    margin-bottom: var(--wp--preset--spacing--md);
  }

  /* CTAボタン */
  .s-concept-001__cta {
    margin-top: var(--wp--preset--spacing--lg);
  }

  .s-concept-001__cta .c-button-001 .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-darker);
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xl);
    border-radius: var(--wp--custom--border--radius--full);
    font-size: var(--wp--preset--font-size--sm);
    transition: opacity var(--wp--custom--transition--duration--base) var(--wp--custom--transition--timing--ease);
  }

  .s-concept-001__cta .c-button-001 .wp-block-button__link:hover {
    opacity: 0.85;
  }

  /* メイン画像 */
  .s-concept-001__image {
    border-radius: var(--wp--custom--border--radius--xl);
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--wp--custom--transition--duration--slow) var(--wp--custom--transition--timing--ease);
    }
  }

  .s-concept-001__image:hover img {
    transform: scale(1.03);
  }
}

/* レスポンシブ */
@media (max-width: 781px) {
  .s-concept-001 {
    padding-top: var(--wp--preset--spacing--2-xl);
    padding-bottom: var(--wp--preset--spacing--2-xl);

    .s-concept-001__content {
      flex-direction: column-reverse;
    }
  }
}

/* ══════════════════════════════════════════════════
   背景
   ══════════════════════════════════════════════════ */

/** @element root  @group 背景  @label 白  @order 1 */
.s-concept-001--bg-white {
  background-color: var(--wp--preset--color--white);
}

/* ══════════════════════════════════════════════════
   レイアウト
   ══════════════════════════════════════════════════ */

/** @element root  @group レイアウト  @label 逆順（左画像）  @order 1 */
.s-concept-001--reverse .s-concept-001__content {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════
   画像形状
   ══════════════════════════════════════════════════ */

/** @element root  @group 画像形状  @label フラット  @order 1 */
.s-concept-001--image-flat .s-concept-001__image {
  border-radius: 0;
}

/** @element root  @group 画像形状  @label 角丸小  @order 2 */
.s-concept-001--image-round-sm .s-concept-001__image {
  border-radius: var(--wp--custom--border--radius--md);
}

/* ══════════════════════════════════════════════════
   英字カラー
   ══════════════════════════════════════════════════ */

/** @element root  @group 英字カラー  @label プライマリ  @order 1 */
.s-concept-001--en-primary .s-concept-001__en {
  color: var(--wp--preset--color--primary);
}

/** @element root  @group 英字カラー  @label グレー  @order 2 */
.s-concept-001--en-gray .s-concept-001__en {
  color: var(--wp--preset--color--gray);
}