@charset "UTF-8";
/* =============================================================
   tomoya web / maker-profile  —  サイト固有CSS（正本）
   -------------------------------------------------------------
   正本: wordpress/additional.css
   適用: SWELL CHILD の css/maker-profile.css へ「正本 → 子テーマ」でそのままコピー（SHA-256一致で確認）
   元  : static-site/assets/css/style.css の「3. ページ本文」を Gutenberg のブロック出力に合わせて移植
   -------------------------------------------------------------
   1. ヘッダーCTA（グローバルナビ末尾のメニュー項目 .maker-profile-header-cta）… 本文外の唯一の例外
   2. ページ本文（.maker-profile 配下）
   ============================================================= */


/* =============================================================
   1. ヘッダーCTA（SWELLのグローバルナビ内のメニュー項目）
   ============================================================= */
.maker-profile-header-cta {
  --maker-profile-accent: #8A6A35;
  --maker-profile-accent-hover: #73582B;
}

.c-gnav > .maker-profile-header-cta {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.c-gnav > .maker-profile-header-cta > a {
  align-self: center;
  height: auto;
  padding: 11px 24px;
  border-radius: 2px;
  background: var(--maker-profile-accent);
  color: #FFFFFF;
  letter-spacing: 0.12em;
  transition: background-color 0.2s ease;
}

.c-gnav > .maker-profile-header-cta > a::after {
  content: none;
}

.c-gnav > .maker-profile-header-cta > a:hover,
.c-gnav > .maker-profile-header-cta.current-menu-item > a {
  background: var(--maker-profile-accent-hover);
  color: #FFFFFF;
}

.c-gnav > .maker-profile-header-cta > a .ttl {
  color: #FFFFFF;
  font-weight: 600;
}


/* =============================================================
   2. ページ本文（.maker-profile 配下）
   ============================================================= */
.maker-profile {
  --maker-profile-primary: #2C4A6E;
  --maker-profile-primary-hover: #22395A;
  --maker-profile-deep: #1A2C44;
  --maker-profile-mist: #9BB3CC;
  --maker-profile-tint: #EDF1F5;
  --maker-profile-accent: #8A6A35;
  --maker-profile-accent-hover: #73582B;
  --maker-profile-white: #FFFFFF;
  --maker-profile-soft: #F6F7F9;
  --maker-profile-text: #23282F;
  --maker-profile-sub: #5E6670;
  --maker-profile-line: #D9DEE4;
  --maker-profile-gradient-text:
    radial-gradient(circle at 88% 12%, rgba(155, 179, 204, 0.18) 0%, rgba(155, 179, 204, 0) 55%),
    linear-gradient(135deg, #1A2C44 0%, #22395A 50%, #2C4A6E 100%);
  --maker-profile-gradient-mist: linear-gradient(120deg, #2C4A6E 0%, #3D5C82 55%, #5C7DA3 100%);

  --maker-profile-font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --maker-profile-font-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --maker-profile-gutter: 24px;
  --maker-profile-section-space: 112px;
  --maker-profile-measure: 44em;
  --maker-profile-table-label: 264px;

  color: var(--maker-profile-text);
  font-family: var(--maker-profile-font-ja);
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: 0.05em;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ブロックの既定値（WordPress・SWELL）のリセット ---------- */
/* クラシックテーマで group に付く内側コンテナは、静的サイトと同じ親子関係でレイアウトするため箱を作らない */
.maker-profile .wp-block-group__inner-container {
  display: contents;
}

/* :where() で詳細度を (0,2,0) に抑え、後に書く部品クラスの指定が勝つようにする */
.maker-profile.maker-profile :where(p, ul, ol, li, figure, h1, h2, h3, table,
  .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-buttons, .wp-block-image, .wp-block-table) {
  margin: 0;
}

.maker-profile.maker-profile :where(h1, h2, h3) {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--maker-profile-font-ja);
  font-weight: 600;
  line-height: 1.5;
}

.maker-profile.maker-profile :is(h1, h2, h3)::before,
.maker-profile.maker-profile :is(h1, h2, h3)::after {
  content: none;
}

.maker-profile.maker-profile :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.maker-profile.maker-profile li::before {
  content: none;
}

/* SWELL の blocks.css が .wp-block-columns に gap: var(--wp-column-gap) !important を指定するため、
   列の間隔はこの変数で指定する */
.maker-profile .wp-block-columns {
  --wp-column-gap: 0px;
  flex-wrap: nowrap;
}

.maker-profile .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.maker-profile a {
  color: var(--maker-profile-primary);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.maker-profile a:focus-visible {
  outline: 2px solid var(--maker-profile-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- セクション：全幅の背景 + 中央寄せの内側コンテナ ---------- */
.maker-profile .maker-profile-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--maker-profile-section-space);
  background: var(--maker-profile-white);
}

.maker-profile .maker-profile-section--soft {
  background: var(--maker-profile-soft);
}

.maker-profile .maker-profile-section--soft-to-tint {
  background: linear-gradient(180deg, var(--maker-profile-soft) 0%, var(--maker-profile-tint) 100%);
}

.maker-profile .maker-profile-section--tint-flat {
  background: var(--maker-profile-tint);
}

.maker-profile .maker-profile-section--blue {
  background: var(--maker-profile-gradient-text);
  color: #FFFFFF;
}

.maker-profile .maker-profile-container {
  max-width: calc(1080px + var(--maker-profile-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--maker-profile-gutter);
}

/* ---------- セクション見出し ---------- */
.maker-profile .maker-profile-heading {
  max-width: var(--maker-profile-measure);
  margin: 0 auto 64px;
  text-align: center;
}

.maker-profile .maker-profile-heading__en {
  color: var(--maker-profile-primary);
  font-family: var(--maker-profile-font-en);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
}

.maker-profile.maker-profile .maker-profile-title {
  margin-top: 12px;
  color: var(--maker-profile-deep);
  font-size: 1.875rem;
  letter-spacing: 0.12em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.maker-profile .maker-profile-heading__lead {
  margin-top: 28px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.maker-profile .maker-profile-section--blue .maker-profile-heading__en {
  color: #C9D5E3;
}

.maker-profile.maker-profile .maker-profile-section--blue .maker-profile-title {
  color: #FFFFFF;
}

.maker-profile .maker-profile-section--blue .maker-profile-heading__lead {
  color: #DCE4EE;
}

/* ---------- ボタン（core/button） ---------- */
.maker-profile .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.maker-profile .maker-profile-center {
  justify-content: center;
  margin-top: 64px;
}

.maker-profile .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 15px 32px;
  border: 1px solid var(--maker-profile-accent);
  border-radius: 2px;
  background: var(--maker-profile-accent);
  color: #FFFFFF;
  font-family: var(--maker-profile-font-ja);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.maker-profile .wp-block-button__link:hover {
  border-color: var(--maker-profile-accent-hover);
  background: var(--maker-profile-accent-hover);
  color: #FFFFFF;
  opacity: 1;
}

.maker-profile .maker-profile-button--primary .wp-block-button__link {
  border-color: var(--maker-profile-primary);
  background: var(--maker-profile-primary);
}

.maker-profile .maker-profile-button--primary .wp-block-button__link:hover {
  border-color: var(--maker-profile-primary-hover);
  background: var(--maker-profile-primary-hover);
}

.maker-profile :is(.maker-profile-section--blue, .maker-profile-pagehead, .maker-profile-hero, .maker-profile-plan, .maker-profile-cover) a:focus-visible {
  outline-color: #FFFFFF;
}

/* ---------- 区分ラベル ---------- */
.maker-profile .maker-profile-label {
  padding-left: 14px;
  border-left: 2px solid var(--maker-profile-accent);
  color: var(--maker-profile-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

/* ---------- ヒーロー（左：写真に紺の帯 / 右：作品の画面を重ねた面） ---------- */
.maker-profile .maker-profile-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 640px;
}

.maker-profile .maker-profile-hero__main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 96px;
  background: var(--maker-profile-deep);
}

.maker-profile .maker-profile-hero__photo {
  position: absolute;
  inset: 0;
}

.maker-profile .maker-profile-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.maker-profile .maker-profile-hero__photo::after {
  content: "";
  height: auto;
  visibility: visible;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 44, 68, 0.66) 0%, rgba(44, 74, 110, 0.48) 100%);
}

.maker-profile .maker-profile-hero__band {
  position: relative;
  padding: 64px 40px 64px max(var(--maker-profile-gutter), calc((100vw - 1080px) / 2));
  background: linear-gradient(90deg, #1A2C44 0%, #22395A 50%, #2C4A6E 100%);
  color: #FFFFFF;
}

.maker-profile .maker-profile-hero__name {
  color: #C9D5E3;
  font-family: var(--maker-profile-font-en);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.maker-profile.maker-profile .maker-profile-hero__title {
  margin-top: 20px;
  color: #FFFFFF;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.55;
  letter-spacing: 0.08em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.maker-profile .maker-profile-hero__lead {
  max-width: 30em;
  margin-top: 28px;
  color: #DCE4EE;
}

.maker-profile .maker-profile-hero__actions {
  margin-top: 40px;
}

.maker-profile .maker-profile-hero__showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
  background: var(--maker-profile-gradient-mist);
}

/* 3作品の画面を左上・右中・左下と斜めにずらして重ねる（16:10を保ったまま幅の割合で配置） */
.maker-profile .maker-profile-showcase {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 0.95;
}

.maker-profile .maker-profile-showcase__item {
  position: absolute;
  width: 72%;
  padding: 6px;
  border-radius: 2px;
  background: var(--maker-profile-white);
}

.maker-profile .maker-profile-showcase__item:nth-child(1) {
  top: 0;
  left: 0;
}

.maker-profile .maker-profile-showcase__item:nth-child(2) {
  top: 30%;
  right: 0;
}

.maker-profile .maker-profile-showcase__item:nth-child(3) {
  bottom: 0;
  left: 10%;
}

.maker-profile .maker-profile-showcase__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1px;
  object-fit: cover;
  object-position: top center;
}

/* 写真に重ねる紺の層は figure の ::after で描く。SWELL の .wp-block-image::after（回り込み解除用に
   height:0 / visibility:hidden）を height・visibility で上書きしている */

/* ---------- 下層ページの見出し（左：紺の面に見出し / 右：モノクロ写真） ---------- */
/* SWELL の .l-content の上余白（600px以上 4em / 未満 2em）を打ち消し、パンくずの直下に置く。
   SWELL の .post_content div > :first-child { margin-top: 0 !important } より強い指定が必要なため !important を使う */
.maker-profile.maker-profile .maker-profile-pagehead {
  margin-top: -4em !important;
}

.maker-profile .maker-profile-pagehead {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 380px;
  background: var(--maker-profile-deep);
  color: #FFFFFF;
}

.maker-profile .maker-profile-pagehead__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px 80px max(var(--maker-profile-gutter), calc((100vw - 1080px) / 2));
  background: linear-gradient(90deg, #1A2C44 0%, #22395A 55%, #2C4A6E 100%);
}

.maker-profile .maker-profile-pagehead__photo-col {
  position: relative;
  overflow: hidden;
}

.maker-profile .maker-profile-pagehead__photo {
  position: absolute;
  inset: 0;
}

.maker-profile .maker-profile-pagehead__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.maker-profile .maker-profile-pagehead__photo::after {
  content: "";
  height: auto;
  visibility: visible;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 74, 110, 0.7) 0%, rgba(44, 74, 110, 0.28) 45%, rgba(26, 44, 68, 0.18) 100%);
}

.maker-profile .maker-profile-pagehead__en {
  color: #C9D5E3;
  font-family: var(--maker-profile-font-en);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.maker-profile.maker-profile .maker-profile-pagehead__title {
  margin-top: 8px;
  color: #FFFFFF;
  font-size: 2.25rem;
  letter-spacing: 0.12em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 画像と文章を左右に置く行（制作実績） ---------- */
.maker-profile .maker-profile-features {
  display: grid;
  gap: 112px;
}

.maker-profile .maker-profile-feature {
  --wp-column-gap: 72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.maker-profile .maker-profile-feature--reverse .maker-profile-feature__image-col {
  order: 2;
}

.maker-profile .maker-profile-feature__image img {
  width: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.maker-profile .maker-profile-feature__image--screen img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--maker-profile-line);
  object-position: top center;
}

.maker-profile .maker-profile-feature__body,
.maker-profile .maker-profile-about__body {
  position: relative;
  padding-bottom: 88px; /* 背景の英字を本文の下に置く余白 */
}

.maker-profile .maker-profile-feature__body > *,
.maker-profile .maker-profile-about__body > * {
  position: relative;
  z-index: 1;
}

.maker-profile.maker-profile .maker-profile-feature__body > * + *,
.maker-profile.maker-profile .maker-profile-about__body > * + * {
  margin-top: 22px;
}

.maker-profile.maker-profile .maker-profile-feature__title,
.maker-profile.maker-profile .maker-profile-case__title {
  color: var(--maker-profile-deep);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.maker-profile.maker-profile .maker-profile-case__title {
  font-size: 1.75rem;
}

.maker-profile .maker-profile-feature__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--maker-profile-mist);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.maker-profile .maker-profile-feature__title a:hover {
  color: var(--maker-profile-primary);
  text-decoration-color: var(--maker-profile-accent);
}

.maker-profile .maker-profile-feature__lead {
  color: var(--maker-profile-deep);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.08em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 背景の大きな英字（装飾。本文には入れず、CSSの生成内容で表示する） */
.maker-profile .maker-profile-feature__body::after,
.maker-profile .maker-profile-about__body::after {
  position: absolute;
  right: 0;
  bottom: -0.12em;
  z-index: 0;
  color: rgba(155, 179, 204, 0.32);
  font-family: var(--maker-profile-font-en);
  font-size: 6.5rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.maker-profile .maker-profile-about__body::after { content: "Profile"; }
.maker-profile .maker-profile-feature--salon .maker-profile-feature__body::after { content: "Salon"; }
.maker-profile .maker-profile-feature--cafe .maker-profile-feature__body::after { content: "Cafe"; }
.maker-profile .maker-profile-feature--civil .maker-profile-feature__body::after { content: "Civil"; }

.maker-profile .maker-profile-feature--reverse .maker-profile-feature__body::after {
  right: auto;
  left: 0;
}

/* ---------- 自己紹介（写真を画面の左端まで広げた左右分割） ---------- */
.maker-profile .maker-profile-about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.maker-profile .maker-profile-about__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.maker-profile .maker-profile-about__body {
  padding: 24px max(var(--maker-profile-gutter), calc((100vw - 1080px) / 2)) 96px 80px;
}

.maker-profile .maker-profile-about__body::after {
  right: max(var(--maker-profile-gutter), calc((100vw - 1080px) / 2));
}

.maker-profile .maker-profile-about__body .maker-profile-heading {
  margin: 0 0 40px;
  text-align: left;
}

/* ---------- できること（紺の濃淡3段の色面カード） ---------- */
.maker-profile .maker-profile-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --wp-column-gap: 32px;
}

.maker-profile .maker-profile-plan {
  display: flex;
  flex-direction: column;
  padding: 48px 32px 32px;
  border-radius: 2px;
  background: linear-gradient(160deg, #22395A 0%, #1A2C44 100%);
  color: #FFFFFF;
  text-align: center;
}

.maker-profile .maker-profile-plan--light {
  background: linear-gradient(160deg, #2C4A6E 0%, #22395A 100%);
}

.maker-profile .maker-profile-plan--dark {
  background: linear-gradient(160deg, #1A2C44 0%, #121F31 100%);
}

.maker-profile .maker-profile-plan__en {
  color: #C9D5E3;
  font-family: var(--maker-profile-font-en);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.maker-profile.maker-profile .maker-profile-plan__title {
  margin-top: 6px;
  color: #FFFFFF;
  font-size: 1.3125rem;
  letter-spacing: 0.1em;
}

.maker-profile.maker-profile .maker-profile-plan__text {
  margin-top: 20px;
  color: #DCE4EE;
  font-size: 0.9375rem;
  text-align: left;
}

.maker-profile.maker-profile .maker-profile-plan__list {
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.maker-profile.maker-profile .maker-profile-plan__list li {
  padding: 13px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.maker-profile.maker-profile .maker-profile-plan__action {
  margin-top: auto;
  padding-top: 36px;
}

.maker-profile .maker-profile-plan__action .wp-block-button,
.maker-profile .maker-profile-plan__action .wp-block-button__link {
  width: 100%;
  min-width: 0;
}

/* ---------- スキル（淡い青の帯に4列。英字のスキル名を大きく置き、細線で区切る） ---------- */
.maker-profile .maker-profile-skills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #C5CFDA;
  border-bottom: 1px solid #C5CFDA;
}

.maker-profile .maker-profile-skill {
  padding: 40px 28px 44px;
}

.maker-profile .maker-profile-skill + .maker-profile-skill {
  border-left: 1px solid #C5CFDA;
}

/* 補足の有無にかかわらず、タグの高さを列どうしでそろえる */
.maker-profile .maker-profile-skill__head {
  min-height: 82px;
}

.maker-profile.maker-profile .maker-profile-skill__name {
  color: var(--maker-profile-deep);
  font-family: var(--maker-profile-font-en);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.maker-profile.maker-profile .maker-profile-skill__sub {
  margin-top: 8px;
  color: var(--maker-profile-sub);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.maker-profile.maker-profile .maker-profile-skill__tag {
  display: inline-block;
  margin-top: 20px;
  padding: 1px 12px;
  border: 1px solid var(--maker-profile-accent);
  border-radius: 2px;
  color: var(--maker-profile-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.maker-profile.maker-profile .maker-profile-skill__text {
  margin-top: 18px;
  font-size: 0.9375rem;
}

/* ---------- 制作の流れ（白い円にアイコン、円どうしを細線でつなぐ） ---------- */
/* 円は列の ::before、アイコンは ::after（CSSのマスク画像）、番号は本文の段落 */
.maker-profile .maker-profile-steps {
  --maker-profile-step-size: 160px;
  --maker-profile-step-gap: 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  --wp-column-gap: 48px var(--maker-profile-step-gap);
}

.maker-profile .maker-profile-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--maker-profile-step-size) / 2);
  left: calc((100% - var(--maker-profile-step-gap) * 3) / 8);
  right: calc((100% - var(--maker-profile-step-gap) * 3) / 8);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.maker-profile .maker-profile-step {
  position: relative;
  padding-top: calc(var(--maker-profile-step-size) + 28px);
  text-align: center;
}

.maker-profile .maker-profile-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--maker-profile-step-size) / 2);
  z-index: 1;
  width: var(--maker-profile-step-size);
  height: var(--maker-profile-step-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFFFFF 60%, #EEF2F7 100%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1); /* 外側の半透明の輪（影ではなく輪郭） */
}

.maker-profile .maker-profile-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - var(--maker-profile-step-size) / 2);
  z-index: 2;
  width: var(--maker-profile-step-size);
  height: var(--maker-profile-step-size);
  background-color: var(--maker-profile-primary);
  -webkit-mask: var(--maker-profile-step-icon) center / 38% no-repeat;
  mask: var(--maker-profile-step-icon) center / 38% no-repeat;
}

/* アイコン：ヒアリング＝吹き出し / 構成とデザイン＝画面構成図 / 制作と修正＝コード記号 / 公開＝地球 */
.maker-profile .maker-profile-step--hearing {
  --maker-profile-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h20a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H17l-7 6v-6H9a4 4 0 0 1-4-4V13a4 4 0 0 1 4-4z'/%3E%3Cpath d='M37 19h2a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4h-1v6l-7-6h-8a4 4 0 0 1-4-4v-2'/%3E%3Cpath d='M13 18h.01M19 18h.01M25 18h.01'/%3E%3C/svg%3E");
}

.maker-profile .maker-profile-step--design {
  --maker-profile-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='38' height='32' rx='3'/%3E%3Cpath d='M5 16h38'/%3E%3Crect x='10' y='21' width='13' height='14' rx='1'/%3E%3Cpath d='M28 23h10M28 28h10M28 33h6'/%3E%3C/svg%3E");
}

.maker-profile .maker-profile-step--build {
  --maker-profile-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 15l-9 9 9 9M33 15l9 9-9 9M28 10l-8 28'/%3E%3C/svg%3E");
}

.maker-profile .maker-profile-step--publish {
  --maker-profile-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='18'/%3E%3Cpath d='M6 24h36M24 6c5 5 7.5 11 7.5 18S29 37 24 42c-5-5-7.5-11-7.5-18S19 11 24 6z'/%3E%3C/svg%3E");
}

.maker-profile.maker-profile .maker-profile-step__num {
  position: absolute;
  top: 0;
  left: calc(50% - var(--maker-profile-step-size) / 2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(var(--maker-profile-step-size) * 0.3);
  aspect-ratio: 1;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--maker-profile-accent);
  color: #FFFFFF;
  font-family: var(--maker-profile-font-en);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.maker-profile.maker-profile .maker-profile-step__title {
  color: #FFFFFF;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.maker-profile.maker-profile .maker-profile-step__text {
  margin-top: 12px;
  color: #DCE4EE;
  font-size: 0.9375rem;
}

/* ---------- 相談の誘導（写真に紺を重ねたパネル） ---------- */
.maker-profile .maker-profile-cover {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--maker-profile-deep);
}

.maker-profile .maker-profile-cover__image {
  position: absolute;
  inset: 0;
}

.maker-profile .maker-profile-cover__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.maker-profile .maker-profile-cover__image::after {
  content: "";
  height: auto;
  visibility: visible;
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(26, 44, 68, 0.9) 0%, rgba(34, 57, 90, 0.82) 50%, rgba(44, 74, 110, 0.76) 100%);
}

.maker-profile .maker-profile-cover__body {
  position: relative;
  z-index: 1;
  padding: 96px 48px;
  color: #FFFFFF;
}

.maker-profile .maker-profile-cover .maker-profile-heading {
  margin-bottom: 48px;
}

.maker-profile .maker-profile-cover .maker-profile-heading__en {
  color: #C9D5E3;
}

.maker-profile.maker-profile .maker-profile-cover .maker-profile-title {
  color: #FFFFFF;
}

.maker-profile .maker-profile-cover .maker-profile-heading__lead {
  color: #DCE4EE;
}

.maker-profile .maker-profile-cover .maker-profile-center {
  margin-top: 0;
}

/* ---------- 表（作品の詳細：ラベル列に色を付けた2列。core/table） ---------- */
/* SWELL の blocks.css は1列目の幅を --swl-cell1-width で決めるため、この変数でラベル列の幅を指定する */
.maker-profile .maker-profile-table {
  --swl-cell1-width: var(--maker-profile-table-label);
}

.maker-profile.maker-profile .maker-profile-table table {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 1px;
  table-layout: fixed;
}

.maker-profile.maker-profile .maker-profile-table :is(th, td) {
  padding: 26px 32px;
  border: 0;
  text-align: left;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1.95;
}

.maker-profile.maker-profile .maker-profile-table th {
  width: var(--maker-profile-table-label);
  background: var(--maker-profile-tint);
  color: var(--maker-profile-deep);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.maker-profile.maker-profile .maker-profile-table td {
  background: var(--maker-profile-soft);
  color: var(--maker-profile-text);
}

.maker-profile.maker-profile .maker-profile-section--soft .maker-profile-table td {
  background: var(--maker-profile-white);
}

/* ---------- 制作実績ページの各作品 ---------- */
.maker-profile .maker-profile-case {
  scroll-margin-top: 104px;
}

.maker-profile .maker-profile-case__head {
  margin-bottom: 56px;
}

/* ---------- プライバシーポリシー ---------- */
.maker-profile .maker-profile-prose {
  max-width: var(--maker-profile-measure);
  margin-inline: auto;
}

.maker-profile.maker-profile .maker-profile-prose > * + * {
  margin-top: 24px;
}

.maker-profile.maker-profile .maker-profile-prose__title {
  margin-top: 64px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--maker-profile-line);
  color: var(--maker-profile-deep);
  font-size: 1.3125rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.maker-profile.maker-profile .maker-profile-prose__title + * {
  margin-top: 18px;
}

.maker-profile.maker-profile .maker-profile-prose ul {
  padding-left: 1.25em;
  list-style: disc;
}

.maker-profile.maker-profile .maker-profile-prose li + li {
  margin-top: 8px;
}

.maker-profile.maker-profile .maker-profile-prose__date {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--maker-profile-line);
  color: var(--maker-profile-sub);
  text-align: right;
}

/* ---------- タブレット ---------- */
@media (max-width: 1023px) {
  .maker-profile {
    --maker-profile-section-space: 96px;
    --maker-profile-table-label: 200px;
  }

  .maker-profile .maker-profile-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .maker-profile .maker-profile-hero__main {
    padding-block: 72px;
  }

  .maker-profile .maker-profile-hero__band {
    padding-inline: var(--maker-profile-gutter);
  }

  .maker-profile .maker-profile-hero__showcase {
    padding: 56px var(--maker-profile-gutter);
  }

  .maker-profile .maker-profile-showcase {
    max-width: 480px;
  }

  .maker-profile .maker-profile-pagehead {
    min-height: 320px;
  }

  .maker-profile .maker-profile-pagehead__body {
    padding: 64px 32px 64px var(--maker-profile-gutter);
  }

  .maker-profile.maker-profile .maker-profile-pagehead__title {
    font-size: 1.875rem;
  }

  .maker-profile .maker-profile-feature {
    --wp-column-gap: 40px;
  }

  .maker-profile .maker-profile-features {
    gap: 80px;
  }

  .maker-profile .maker-profile-feature__body::after,
  .maker-profile .maker-profile-about__body::after {
    font-size: 4.5rem;
  }

  .maker-profile .maker-profile-about {
    grid-template-columns: minmax(0, 1fr);
  }

  .maker-profile .maker-profile-about__image-col {
    width: 72%;
  }

  .maker-profile .maker-profile-about__body {
    max-width: calc(44em + var(--maker-profile-gutter) * 2);
    padding: 56px var(--maker-profile-gutter) 88px;
  }

  .maker-profile .maker-profile-about__body::after {
    right: var(--maker-profile-gutter);
  }

  .maker-profile .maker-profile-plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .maker-profile .maker-profile-skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maker-profile .maker-profile-skill:nth-child(3) {
    border-left: 0;
  }

  .maker-profile .maker-profile-skill:nth-child(n + 3) {
    border-top: 1px solid #C5CFDA;
  }

  .maker-profile .maker-profile-cover__body {
    padding: 80px 40px;
  }

  /* 手順：円を左に置いた縦の手順線。円どうしをつなぐ線は列の背景で描く */
  .maker-profile .maker-profile-steps {
    --maker-profile-step-size: 112px;
    grid-template-columns: minmax(0, 1fr);
    --wp-column-gap: 0px;
    max-width: 640px;
    margin-inline: auto;
  }

  .maker-profile .maker-profile-steps::before {
    content: none;
  }

  .maker-profile .maker-profile-step {
    min-height: var(--maker-profile-step-size);
    padding: 0 0 40px calc(var(--maker-profile-step-size) + 28px);
    text-align: left;
  }

  .maker-profile .maker-profile-step:not(:last-child) {
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)) no-repeat
      calc(var(--maker-profile-step-size) / 2) calc(var(--maker-profile-step-size) + 8px) / 1px calc(100% - var(--maker-profile-step-size) - 16px);
  }

  .maker-profile .maker-profile-step:last-child {
    padding-bottom: 0;
  }

  .maker-profile .maker-profile-step::before,
  .maker-profile .maker-profile-step::after,
  .maker-profile.maker-profile .maker-profile-step__num {
    left: 0;
  }

  .maker-profile .maker-profile-step::before {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  }

  .maker-profile.maker-profile .maker-profile-step__title {
    padding-top: calc(var(--maker-profile-step-size) / 2 - 1.2em);
  }

  .maker-profile.maker-profile .maker-profile-step__num {
    font-size: 1.0625rem;
  }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  .maker-profile {
    --maker-profile-gutter: 16px;
    --maker-profile-section-space: 72px;
  }

  .maker-profile .maker-profile-hero__main {
    padding-block: 40px;
  }

  .maker-profile .maker-profile-hero__band {
    padding-block: 44px;
  }

  .maker-profile .maker-profile-hero__name {
    font-size: 1.375rem;
  }

  .maker-profile .maker-profile-hero__showcase {
    padding: 40px var(--maker-profile-gutter);
  }

  .maker-profile .maker-profile-showcase {
    max-width: 340px;
  }

  .maker-profile :is(.maker-profile-hero__actions, .maker-profile-center, .maker-profile-case__link) .wp-block-button,
  .maker-profile :is(.maker-profile-hero__actions, .maker-profile-center, .maker-profile-case__link) .wp-block-button__link {
    width: 100%;
    min-width: 0;
  }

  /* 下層ページの見出し：写真を背景にし、上に半透明の紺の面を重ねる */
  .maker-profile .maker-profile-pagehead {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .maker-profile .maker-profile-pagehead__photo-col {
    position: absolute;
    inset: 0;
  }

  .maker-profile .maker-profile-pagehead__body {
    padding: 56px var(--maker-profile-gutter);
    background: linear-gradient(120deg, rgba(26, 44, 68, 0.94) 0%, rgba(34, 57, 90, 0.88) 60%, rgba(44, 74, 110, 0.8) 100%);
  }

  .maker-profile.maker-profile .maker-profile-pagehead__title {
    font-size: 1.75rem;
  }

  .maker-profile .maker-profile-heading {
    margin-bottom: 48px;
  }

  .maker-profile.maker-profile .maker-profile-title {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }

  .maker-profile .maker-profile-center {
    margin-top: 48px;
  }

  .maker-profile .maker-profile-features {
    gap: 72px;
  }

  .maker-profile .maker-profile-feature {
    grid-template-columns: minmax(0, 1fr);
    --wp-column-gap: 28px;
  }

  .maker-profile .maker-profile-feature--reverse .maker-profile-feature__image-col {
    order: 0;
  }

  .maker-profile .maker-profile-feature__body,
  .maker-profile .maker-profile-about__body {
    padding-bottom: 64px;
  }

  .maker-profile .maker-profile-feature__lead {
    font-size: 1.125rem;
  }

  .maker-profile .maker-profile-feature__body::after,
  .maker-profile .maker-profile-about__body::after {
    font-size: 4rem;
  }

  .maker-profile .maker-profile-about__image-col {
    width: auto;
    margin-right: var(--maker-profile-gutter);
  }

  .maker-profile .maker-profile-about__body {
    padding: 44px var(--maker-profile-gutter) 64px;
  }

  .maker-profile .maker-profile-plan {
    padding: 40px 20px 24px;
  }

  .maker-profile .maker-profile-skills {
    grid-template-columns: minmax(0, 1fr);
  }

  .maker-profile .maker-profile-skill {
    padding: 32px 4px 36px;
  }

  .maker-profile .maker-profile-skill + .maker-profile-skill {
    border-top: 1px solid #C5CFDA;
    border-left: 0;
  }

  .maker-profile .maker-profile-skill__head {
    min-height: 0;
  }

  .maker-profile.maker-profile .maker-profile-skill__name {
    font-size: 2.25rem;
  }

  .maker-profile .maker-profile-cover__body {
    padding: 64px 20px;
  }

  .maker-profile .maker-profile-steps {
    --maker-profile-step-size: 88px;
  }

  .maker-profile .maker-profile-step {
    padding-left: calc(var(--maker-profile-step-size) + 18px);
  }

  .maker-profile .maker-profile-step::before {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
  }

  .maker-profile.maker-profile .maker-profile-step__num {
    border-width: 1px;
    font-size: 0.9375rem;
  }

  .maker-profile.maker-profile .maker-profile-step__title {
    padding-top: 6px;
  }

  .maker-profile .maker-profile-case__head {
    margin-bottom: 36px;
  }

  .maker-profile.maker-profile .maker-profile-case__title {
    font-size: 1.5rem;
  }

  /* 表はラベルの下に内容を積む */
  .maker-profile .maker-profile-table {
    --swl-cell1-width: auto;
  }

  .maker-profile.maker-profile .maker-profile-table :is(table, tbody, tr, th, td) {
    display: block;
    width: auto;
  }

  .maker-profile.maker-profile .maker-profile-table table {
    border-spacing: 0;
  }

  .maker-profile.maker-profile .maker-profile-table tr + tr {
    margin-top: 8px;
  }

  .maker-profile.maker-profile .maker-profile-table :is(th, td) {
    padding: 16px 20px;
  }
}

@media (max-width: 599px) {
  .maker-profile.maker-profile .maker-profile-pagehead {
    margin-top: -2em !important;
  }
}

/* maker-profile: contact form start */
/* =============================================================
   お問い合わせフォーム（Contact Form 7、html_class="maker-profile-contact-form"）
   静的サイトの「ラベル列に色を付けた2列の表」と同じ見た目にする。
   CF7 の自動整形でラベルと入力欄が <p> に包まれるため、ラベル側の <p> は箱を作らない。
   ============================================================= */
.maker-profile .maker-profile-contact-form {
  --maker-profile-error: #B3261E;
  --maker-profile-error-bg: #FFF5F4;
  max-width: 880px;
  margin-inline: auto;
}

.maker-profile .maker-profile-contact-form__rows {
  display: grid;
  gap: 1px;
}

.maker-profile .maker-profile-contact-form__row {
  display: grid;
  grid-template-columns: var(--maker-profile-table-label) minmax(0, 1fr);
  gap: 1px;
}

.maker-profile .maker-profile-contact-form__row > p {
  display: contents;
}

.maker-profile .maker-profile-contact-form__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 26px 24px;
  background: var(--maker-profile-tint);
  color: var(--maker-profile-deep);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.maker-profile .maker-profile-contact-form__badge {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--maker-profile-deep);
  border-radius: 2px;
  background: var(--maker-profile-deep);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.maker-profile .maker-profile-contact-form__badge--optional {
  border-color: var(--maker-profile-sub);
  background: var(--maker-profile-white);
  color: var(--maker-profile-sub);
}

.maker-profile .maker-profile-contact-form__field {
  padding: 26px 32px;
  background: var(--maker-profile-soft);
}

.maker-profile .maker-profile-contact-form .wpcf7-form-control-wrap {
  display: block;
}

.maker-profile.maker-profile .maker-profile-contact-form__input {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #8C949E;
  border-radius: 2px;
  background: var(--maker-profile-white);
  box-shadow: none;
  color: var(--maker-profile-text);
  font-family: var(--maker-profile-font-ja);
  font-size: 1rem;
  line-height: 1.7;
}

.maker-profile.maker-profile .maker-profile-contact-form__input--textarea {
  min-height: 216px;
  resize: vertical;
}

.maker-profile.maker-profile .maker-profile-contact-form__input:focus-visible {
  outline: 2px solid var(--maker-profile-primary);
  outline-offset: 2px;
  border-color: var(--maker-profile-primary);
}

.maker-profile .maker-profile-contact-form__hint {
  display: block;
  margin-top: 8px;
  color: var(--maker-profile-sub);
  font-size: 0.875rem;
}

/* 同意欄（acceptance） */
.maker-profile .maker-profile-contact-form .wpcf7-list-item {
  margin: 0;
}

.maker-profile .maker-profile-contact-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.maker-profile .maker-profile-contact-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--maker-profile-primary);
}

.maker-profile .maker-profile-contact-form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--maker-profile-primary);
  outline-offset: 2px;
}

/* 送信ボタン */
.maker-profile .maker-profile-contact-form__submit {
  margin-top: 56px;
  text-align: center;
}

.maker-profile .maker-profile-contact-form__submit p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.maker-profile.maker-profile .maker-profile-contact-form__button {
  min-width: 260px;
  padding: 15px 32px;
  border: 1px solid var(--maker-profile-accent);
  border-radius: 2px;
  background: var(--maker-profile-accent);
  box-shadow: none;
  color: #FFFFFF;
  font-family: var(--maker-profile-font-ja);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.maker-profile.maker-profile .maker-profile-contact-form__button:hover {
  border-color: var(--maker-profile-accent-hover);
  background: var(--maker-profile-accent-hover);
  opacity: 1;
}

.maker-profile.maker-profile .maker-profile-contact-form__button:focus-visible {
  outline: 2px solid var(--maker-profile-primary);
  outline-offset: 4px;
}

.maker-profile .maker-profile-contact-form .wpcf7-spinner {
  margin: 0;
}

/* 必須エラー・形式エラー（該当欄の直下） */
.maker-profile.maker-profile .maker-profile-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: var(--maker-profile-error);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.maker-profile.maker-profile .maker-profile-contact-form .wpcf7-not-valid {
  border-color: var(--maker-profile-error);
  background: var(--maker-profile-error-bg);
}

/* 送信結果のメッセージ */
.maker-profile.maker-profile .maker-profile-contact-form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--maker-profile-line);
  border-radius: 2px;
  background: var(--maker-profile-white);
  color: var(--maker-profile-text);
  line-height: 1.7;
}

.maker-profile.maker-profile .maker-profile-contact-form.invalid .wpcf7-response-output,
.maker-profile.maker-profile .maker-profile-contact-form.unaccepted .wpcf7-response-output,
.maker-profile.maker-profile .maker-profile-contact-form.failed .wpcf7-response-output {
  border-color: var(--maker-profile-error);
  background: var(--maker-profile-error-bg);
  color: var(--maker-profile-error);
}

.maker-profile.maker-profile .maker-profile-contact-form.sent .wpcf7-response-output {
  border-color: var(--maker-profile-primary);
  background: var(--maker-profile-tint);
  color: var(--maker-profile-deep);
}

@media (max-width: 767px) {
  .maker-profile .maker-profile-contact-form__rows {
    gap: 8px;
  }

  .maker-profile .maker-profile-contact-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .maker-profile .maker-profile-contact-form__label {
    justify-content: flex-start;
    padding: 16px 20px;
  }

  .maker-profile .maker-profile-contact-form__field {
    padding: 16px 20px;
  }

  .maker-profile .maker-profile-contact-form__submit p,
  .maker-profile.maker-profile .maker-profile-contact-form__button {
    width: 100%;
    min-width: 0;
  }

  .maker-profile .maker-profile-contact-form__submit p {
    flex-direction: column;
  }
}
/* maker-profile: contact form end */

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .maker-profile *,
  .maker-profile-header-cta > a {
    transition: none !important;
  }
}