@charset "utf-8";

/* フロント用ブロックエディタースタイル
  （管理画面のみのスタイルはeditor-style.cssに記述して下さい）
---------------------------------------------- */

:is(.entry-content, .is-root-container) {
  overflow-wrap: break-word;
}

/* ==============================================
   本文エリア リンク色・アイコン
   :not([class]) でボタンブロック等への影響を除外
---------------------------------------------- */
:is(.entry-content, .is-root-container) a:not([class]) {
  --icon-size: 1em;
  --icon-margin: 0 0.2em 0 0.25em;

  /* 既存のWordPress変数を優先しつつ、未定義時はフォールバック */
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  transition:
    color 0.2s ease-in-out,
    text-decoration 0.2s ease-in-out;
}

@media (hover: hover) {
  :is(.entry-content, .is-root-container) a:not([class]):hover,
  :is(.entry-content, .is-root-container) a:not([class]):focus {
    text-decoration: none;
  }
}

/* 外部リンク・各種ファイルの疑似要素（ベーススタイル共通） */
:is(.entry-content, .is-root-container)
  a:not([class]):is(
    [target*="_blank"],
    [href*=".pdf"],
    [href*=".doc"],
    [href*=".docx"],
    [href*=".xls"],
    [href*=".xlsx"],
    [href*="maps.app.goo.gl"],
    [href*="goo.gl/maps"]
  )::after {
  --mask: var(--link-icon, var(--svg-icon-file));
  content: "";
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: var(--icon-margin);
  -webkit-mask: var(--mask) no-repeat center / contain;
  mask: var(--mask) no-repeat center / contain;

  /* var(--c-main)等の個別色ではなく currentColor を使うことで、Hover時の親リンクの色変化にアイコンも自動追従します */
  background-color: currentColor;
  vertical-align: var(--vertical-align, middle);
}

/* 種類ごとのアイコン（変数）切り替え */
:is(.entry-content, .is-root-container) a:not([class])[target*="_blank"] {
  --link-icon: var(--wp--custom--svg-icon--external);
}
:is(.entry-content, .is-root-container) a:not([class])[href*=".pdf"] {
  --link-icon: var(--wp--custom--svg-icon--pdf);
}
:is(.entry-content, .is-root-container)
  a:not([class]):is([href*="maps.app.goo.gl"], [href*="goo.gl/maps"]) {
  --link-icon: var(--svg-icon-map);
}

/* ==============================================
   共通レイアウト・余白・ブロック装飾
---------------------------------------------- */

/* 各ラッパー内ブロック間のデフォルト余白（30px） ※見出し関連は除外 */
:is(
    .entry-content,
    .is-root-container,
    .wp-block-group,
    .wp-block-column,
    .is-layout-constrained
  )
  > *
  + *:not(.wp-block-heading, .wp-block-heading + *) {
  margin-top: clamp(24px, 5vw, 30px);
}

/* 各ラッパーの最初の要素や、横並びコンテナ、見出し直後などはマージンをリセット */
:is(
    .entry-content,
    .is-root-container,
    .wp-block-group,
    .wp-block-column,
    .is-layout-constrained
  )
  > *:first-child {
  margin-top: 0;
}

:is(.entry-content, .is-root-container) .is-layout-flex > * + * {
  margin: 0;
}

/* 背景・枠線設定の場合 */
:is(.entry-content, .is-root-container) .has-background,
:is(.entry-content, .is-root-container) .has-border-color {
  border-radius: 6px;
  padding: clamp(20px, 4vw, 30px) clamp(16px, 3.5vw, 20px);
}

/* 全画面（フロントのみ） */
.entry-content .alignfull {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

/* ==============================================
   段落ブロック
---------------------------------------------- */
/* 段落バリエーション：テキストリンク風（丸矢印付き） */
:is(.entry-content, .is-root-container) p {
}

:is(.entry-content, .is-root-container) p.is-style-arrow-link a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wp--preset--color--foreground);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

:is(.entry-content, .is-root-container) p.is-style-arrow-link a:hover,
:is(.entry-content, .is-root-container) p.is-style-arrow-link a:focus {
  color: var(--wp--preset--color--primary);
}

:is(.entry-content, .is-root-container) p.is-style-arrow-link a::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: var(--wp--custom--svg-icon--circle-arrow);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
:is(.entry-content, .is-root-container)
  p.is-style-arrow-link
  a[target="_blank"]::after {
  translate: 0 0.1em;
  background-color: var(--wp--preset--color--primary);
  background-image: var(--wp--custom--svg-icon--external);
}

/* グループブロック直下の arrow-link を全体リンク化（カードリンク化） */
:is(.entry-content, .is-root-container)
  .wp-block-group:has(> p.is-style-arrow-link) {
  position: relative;
}

:is(.entry-content, .is-root-container)
  .wp-block-group
  > p.is-style-arrow-link
  a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* カード全体ホバー時のテキスト色変化 */
:is(.entry-content, .is-root-container)
  .wp-block-group:has(> p.is-style-arrow-link):hover
  .wp-block-image {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* 下線矢印リンク（is-style-border-arrow-link） */
:is(.entry-content, .is-root-container) p.is-style-border-arrow-link a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wp--preset--color--gray-3);
  color: var(--wp--preset--color--foreground);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

:is(.entry-content, .is-root-container) p.is-style-border-arrow-link a:hover,
:is(.entry-content, .is-root-container) p.is-style-border-arrow-link a:focus {
  opacity: 0.7;
}

:is(.entry-content, .is-root-container) p.is-style-border-arrow-link a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 11px;
  background-color: var(--wp--preset--color--primary);
  mask: var(--wp--custom--svg-icon--arrow-right) no-repeat center / contain;
  -webkit-mask: var(--wp--custom--svg-icon--arrow-right) no-repeat center /
    contain;
}

/* タグのようなレイアウト */
:is(.entry-content, .is-root-container) p.is-style-tag {
  width: fit-content;
  padding: 0 1em;
  border: 1px solid currentColor;
  font-weight: 500;
}

/* ==============================================
   本文エリア 見出し共通スタイル
   対象: ブロックエディターで出力される h2 / h3
---------------------------------------------- */

.wp-block-heading + .wp-block-heading {
  margin-top: 1em;
}

.wp-block-heading + * {
  margin-top: 0;
}

.wp-block-heading:first-child {
  margin-top: 0;
}

/* h2: バースタイル（グレー背景 + 左ボーダー） */
h2.wp-block-heading {
  margin: clamp(48px, 10vw, 64px) 0 clamp(24px, 5vw, 32px);
  padding: 4px 20px;
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--wp--preset--color--foreground);
  background-color: var(--wp--preset--color--surface);
  border-inline-start: 4px solid var(--wp--preset--color--foreground);
}

/* h3: 下線スタイル */
h3.wp-block-heading {
  margin: clamp(40px, 8vw, 52px) 0 clamp(18px, 4vw, 24px);
  padding-bottom: var(--wp--preset--spacing--10);
  border-bottom: 1px solid var(--wp--preset--color--foreground);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* h4 */
h4.wp-block-heading {
  margin: clamp(40px, 8vw, 52px) 0 0.5em;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* h5 */
h5.wp-block-heading {
  margin: 1em 0 0.5em;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* h6 */
h6.wp-block-heading {
  margin: 1em 0 0.5em;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ==============================================
   ボタンブロック
---------------------------------------------- */
.wp-block-button {
  --btn-height-default: 56px;
  --btn-radius: 6px;
  --btn-icon-size: 1.125em;
}

.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height, var(--btn-height-default));
  padding: 0.25em clamp(20px, 4vw, 40px);
  border: 1px solid currentColor;
  border-radius: var(--btn-radius);
  background-color: #fff;
  color: var(--wp--preset--color--primary);
  font-weight: 500;
  line-height: 1.4;
}

.wp-element-button::after {
  flex-shrink: 0;
  width: var(--btn-icon-size);
  aspect-ratio: 1;
  background-color: currentColor;
  mask: var(--btn-icon) no-repeat center / contain;
}

/* ページ内リンク */
.wp-element-button[href^="#"] {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-inline: clamp(10px, 2vw, 24px);
  border-color: var(--wp--preset--color--gray-3);
  color: var(--wp--preset--color--foreground);
}
.wp-element-button[href^="#"]::before {
  content: "";
}
.wp-element-button[href^="#"]::after {
  content: "";
  --btn-icon-size: 0.75em;
  --btn-icon: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5.29289 5.29289C5.68342 5.68342 6.31658 5.68342 6.70711 5.29289L11 1" stroke="%23E60020" stroke-width="2" stroke-linecap="round"/></svg>');
  translate: 0 0.05em;
  background-color: var(--wp--preset--color--primary);
}

/* 外部リンク */
.wp-element-button[target="_blank"]::after {
  content: "";
  --btn-icon: var(--wp--custom--svg-icon--external);
}

/* PDFリンク */
.wp-element-button[href*=".pdf"]::after {
  content: "";
  --btn-icon: var(--wp--custom--svg-icon--pdf);
}

/* 角丸ボタン */
.wp-block-button.is-style-rounded {
  --btn-height: 38px;
  --btn-radius: 9999px;

  min-width: 144px;
}

.wp-block-button.is-style-rounded .wp-element-button {
  padding: 0.25em 1em;
  font-size: 13px;
}

/* ==============================================
   グループブロック
---------------------------------------------- */
.wp-block-group-is-layout-grid {
  row-gap: clamp(30px, 7vw, 40px);
}

.wp-block-group-is-layout-grid > * {
  margin-top: 0 !important;
}

/* ==============================================
   スペーサーブロック
---------------------------------------------- */
.wp-block-spacer {
  margin: 0 !important;
}

.wp-block-spacer + * {
  margin-top: 0 !important;
}

/* ==============================================
   区切り線ブロック
---------------------------------------------- */
.wp-block-separator {
  margin: var(--wp--preset--spacing--40) 0 !important;
  border-top: 2px solid #eaeaea;
}

.wp-block-separator:last-child {
  margin-bottom: 0 !important;
}

/* ==============================================
   テーブルブロック（Flexible Table）
---------------------------------------------- */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
  > table
  tr
  th {
  background-color: var(--wp--preset--color--surface);
  font-weight: 500;
}

.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
  > table
  tr
  th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table
  > table
  tr
  td {
  padding: clamp(10px, 2vw, 16px) clamp(12px, 2vw, 20px);
  border: 1px solid var(--wp--preset--color--gray-3);
  vertical-align: baseline;
}

@media (max-width: 768px) {
  .wp-block-flexible-table-block-table table.is-stacked-on-mobile th,
  .wp-block-flexible-table-block-table table.is-stacked-on-mobile td {
    border-bottom-width: 0px !important;
  }

  .wp-block-flexible-table-block-table table.is-stacked-on-mobile th:empty,
  .wp-block-flexible-table-block-table table.is-stacked-on-mobile td:empty {
    display: none;
  }

  .wp-block-flexible-table-block-table
    table.is-stacked-on-mobile
    tr:last-child
    th:last-child,
  .wp-block-flexible-table-block-table
    table.is-stacked-on-mobile
    tr:last-child
    td:last-child {
    border-bottom-width: 1px !important;
  }
}

/* 製品情報テーブル */
.wp-block-flexible-table-block-table {
  font-size: var(--wp--preset--font-size--sm);
}

.wp-block-flexible-table-block-table.is-style-product-info > table {
  border-collapse: separate;
  border-spacing: 0px;
}

.wp-block-flexible-table-block-table.is-style-product-info > table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.wp-block-flexible-table-block-table.is-style-product-info > table tr th,
.wp-block-flexible-table-block-table.is-style-product-info > table tr td {
  padding: 10px 1em;
  vertical-align: middle;
}

.wp-block-flexible-table-block-table.is-style-product-info > table tr td {
  text-align: center;
}

/* ホバーした行のハイライト（:hasを使用） */
.wp-block-flexible-table-block-table.is-style-product-info
  > table
  tbody
  tr:has(:is(th, td):hover)
  td {
  background-color: #fef6f6;
}

@media screen and (min-width: 769px) {
  .wp-block-flexible-table-block-table.is-scroll-on-pc {
    max-height: 70vh;
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  .wp-block-flexible-table-block-table.is-style-product-info.is-scroll-on-mobile {
    max-height: 70vh;
    white-space: nowrap;
  }
}

/* ==============================================
   SDGs Goals Block
---------------------------------------------- */
.wp-block-acf-sdgs-goals {
}

.wp-block-acf-sdgs-goals .sdgs-goals-inner {
  position: relative;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 32px clamp(20px, 4vw, 28px) 28px;
}

.wp-block-acf-sdgs-goals .sdgs-goals-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 5px 32px;
  background-color: #fff;
  border-radius: 9999px;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  white-space: nowrap;
  border: none;
}

.wp-block-acf-sdgs-goals .sdgs-goals-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-acf-sdgs-goals .sdgs-goal-item {
  width: clamp(60px, 12vw, 80px);
  flex-shrink: 0;
  margin: 0;
}

.wp-block-acf-sdgs-goals .sdgs-goal-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================================
   SDGs Initiatives Block (カードグリッド)
---------------------------------------------- */
.wp-block-acf-sdgs-initiatives {
}

.wp-block-acf-sdgs-initiatives .sdgs-init-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--wp--preset--color--gray-3);
  border-radius: 6px;
  padding: 30px 20px;
  margin: 0;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-icon-wrapper {
  margin-bottom: 20px;
  text-align: center;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-icon {
  width: 120px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-badge {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 8px;
  padding: 0 11px;
  border-radius: 4px;
  background-color: #929292;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.wp-block-acf-sdgs-initiatives .sdgs-init-desc {
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.6;
}