:root {
  --clamp128: clamp(96px, 9vw, 128px);
  --clamp96: clamp(72px, 6vw, 96px);
  --clamp72: clamp(64px, 5.3vw, 72px);
  --clamp64: clamp(48px, 4vw, 64px);
  --clamp48: clamp(32px, 2.6vw, 48px);
  --clamp32: clamp(24px, 2.3vw, 32px);
  --clamp24: clamp(16px, 1.9vw, 24px);
  --clamp16: clamp(15px, 1.4vw, 16px);
}


/* 画像や埋め込み要素のレスポンシブ対応 */
.wp-block-image img,
.wp-block-video video,
.wp-block-embed iframe,
.wp-block-cover video,
.wp-block-cover img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  vertical-align: bottom;
}

/* 中央寄せ */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  clear: both;
}

/* 左寄せ */
.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

/* 右寄せ */
.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

/* 幅広・全幅（コンテナからはみ出す設定がない場合のフォールバック） */
.alignwide {
  max-width: 100%;
}

.alignfull {
  max-width: 100%;
  width: 100%;
}

/* キャプション（画像下の説明文） */
.wp-caption-text,
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-gallery figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.wp-element-caption sup {
  font-size: 0.9rem;
}


/* --- カラム (wp-block-columns) --- */
.wp-block-columns {
  display: flex;
  box-sizing: border-box;

  /* カラム間の余白 */
}

.wp-block-column {
  flex: 1;
  word-break: break-word;
}

/* 垂直配置 */
.wp-block-columns.is-vertically-aligned-top {
  align-items: flex-start;
}

.wp-block-columns.is-vertically-aligned-center {
  align-items: center;
}

.wp-block-columns.is-vertically-aligned-bottom {
  align-items: flex-end;
}

/* スマホ対応（縦積みにする） */
@media (max-width: 767px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column;
    gap: 1.5em;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
  }
}

/* --- グループ (wp-block-group) --- */
.wp-block-group {
  box-sizing: border-box;
  margin-bottom: 1.5em;
}

/* 背景色がある場合は内側に余白を持たせる */
.wp-block-group.has-background {
  padding: 1.5em;
}

/* --- スペーサー (wp-block-spacer) --- */
.wp-block-spacer {
  display: block;
  clear: both;
}

/* --- 区切り線 (wp-block-separator) --- */
hr.wp-block-separator {
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 2em auto;
  max-width: 100px;
  /* デフォルトは短め */
}

hr.wp-block-separator.is-style-wide {
  max-width: 100%;
}

hr.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
  line-height: 1;
  height: auto;
}

hr.wp-block-separator.is-style-dots::before {
  content: "\00b7 \00b7 \00b7";
  /* ドット */
  font-size: 1.5em;
  letter-spacing: 2em;
  padding-left: 2em;
  color: #777;
}


/* --- 引用 (wp-block-quote) --- */
.wp-block-quote {
  margin: 0 0 1.5em;
  padding: 0 0 0 1em;
  border-left: 4px solid #333;
  /* 左側のアクセント線 */
  font-style: italic;
}

.wp-block-quote cite {
  display: block;
  font-size: 0.85em;
  margin-top: 0.5em;
  color: #666;
  font-style: normal;
}

/* 引用: 大サイズスタイル */
.wp-block-quote.is-style-large,
.wp-block-quote.is-style-plain {
  border: none;
  padding: 0;
}

.wp-block-quote.is-style-large p {
  font-size: 1.25em;
  line-height: 1.4;
  font-weight: bold;
}

/* --- プルクオート (wp-block-pullquote) --- */
.wp-block-pullquote {
  padding: 1em;
  text-align: center;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  margin-bottom: 1.5em;
  font-size: 1.2em;
}

/* --- テーブル (wp-block-table) --- */
.wp-block-table {
  margin-bottom: 1.5em;
  border-collapse: collapse;
  width: 100%;
  min-width: 240px;
  /* つぶれ防止 */
}

.wp-block-table td,
.wp-block-table th {
  padding: 0.5em;
  border: 1px solid #ccc;
  word-break: normal;
}

/* ストライプスタイル */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* --- 整形済みテキスト/コード (wp-block-preformatted, wp-block-code) --- */
.wp-block-preformatted,
.wp-block-code {
  font-family: monospace;
  background: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  /* 横スクロール */
  margin-bottom: 1.5em;
  white-space: pre-wrap;
}




/* --- ボタン (wp-block-buttons) --- */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1.5em;
}

.wp-block-button {
  margin: 0;
}

.wp-block-button__link {
  display: inline-block;
  padding: 0.6em 1.2em;
  border: 1px solid transparent;
  border-radius: 4px;
  /* 角丸 */
  text-decoration: none;
  background-color: #333;
  /* デフォルト黒 */
  color: #fff;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* ホバー時 */
.wp-block-button__link:hover {
  opacity: 0.8;
  color: #fff;
}

/* アウトラインスタイル */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid #333;
  color: #333;
}

/* --- ファイル (wp-block-file) --- */
.wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9f9f9;
  padding: 1em;
  border-radius: 4px;
  margin-bottom: 1.5em;
}

.wp-block-file__button {
  display: inline-block;
  padding: 0.5em 1em;
  background: #333;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
}

/* --- メディアとテキスト (wp-block-media-text) --- */
.wp-block-media-text {
  display: grid;
  grid-template-columns: 50% 1fr;
  /* デフォルト50:50 */
  grid-template-rows: auto;
  margin-bottom: 1.5em;
}

.wp-block-media-text__media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.wp-block-media-text__content {
  grid-column: 2;
  grid-row: 1;
  padding: 0 0 0 8%;
  /* デフォルトの余白 */
  align-self: center;
  /* 垂直中央 */
}

/* 画像が右側の場合 */
.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 50%;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  grid-column: 2;
  grid-row: 1;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  grid-column: 1;
  grid-row: 1;
  padding: 0 8% 0 0;
}

/* スマホ対応 (モバイルで縦積み設定時) */
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 0 !important;
  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    margin-top: 1em;
  }
}

/* --- ギャラリー (wp-block-gallery) --- */

.wp-block-gallery,
.blocks-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0 -0.5em 1.5em -0.5em;
}

.blocks-gallery-item,
.wp-block-gallery .wp-block-image {
  margin: 0 0.5em 1em 0.5em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: calc(33.33% - 1em);
  /* デフォルト3列想定 */
  min-width: 200px;
}

.blocks-gallery-item img,
.wp-block-gallery .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}


.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.devcafe-block-01 {
  display: block;
  width: 100%;
  position: relative;
}

.devcafe-block-01 figcaption {
  display: grid;
  place-content: center;
  background-color: black;
  color: white;
  padding: var(--clamp32) var(--clamp48);
  width: fit-content;
  position: absolute;
  top: 40px;
  left: -40px;
}

.devcafe-block-01 div {
  display: grid;
  place-content: center;
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-01 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.devcafe-block-02 {
  display: flex;
  gap: var(--clamp24);
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.devcafe-block-02 figcaption {
  flex-basis: 50%;
  display: grid;
  place-content: center;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-02 div {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-02 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.devcafe-block-03 {
  display: flex;
  gap: var(--clamp24);
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.devcafe-block-03 figcaption {
  flex-basis: 50%;
  display: grid;
  place-content: center;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-03 div {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-03 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}