/* footer下部固定ここから↓ */
.global-wrapper {
  display: grid;
  /* ヘッダー分だけ上部の行を確保し、残りをコンテンツに割り当てる */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.main-header {
  /* ヘッダーを一番上の行に固定 */
  grid-row: 1 / 2;
}
/* メインコンテンツは自動的に2行目に配置されるため、パディング不要 */
.main-wrapper {
  grid-row: 2 / 3;
}
/* Gridの中に入れたGridブロックの挙動を正しくする */
.global-wrapper > main {
  min-width: 0;
}
/* footer下部固定ここまで↑ */

/* ********************************
ヘッダーの下のmainの処理
********************************* */
:root {
  --header-height: 62px; /* 初期値 */
}
/* 基本スタイル：すべてのページのmainに余白を適用 */
main {
  padding-top: var(--header-height) !important;
}
/* Worksテンプレートの時は余白を0に上書き */

main.front-template,
main.is-works-template,
main.is-sketch-template {
  padding-top: 0 !important;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ボタンhover時の背景色 */
.wp-block-button__link:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s ease;
}

/* 前の投稿・次の投稿・ページネーションの矢印付きスタイル */
/* 共通設定 */
.post-navigation-link-previous a::before,
.post-navigation-link-next a::after,
.wp-block-query-pagination-next::after,
.wp-block-query-pagination-previous::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor; /* これだけで色指定完了 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain; /* coverよりもcontainの方がアイコン全体が欠けずに収まります */
  mask-size: contain;
  vertical-align: middle;
  margin-bottom: 2px;
}

/* 前の投稿：左矢印 */
.post-navigation-link-previous a::before,
.wp-block-query-pagination-previous::before {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.27 12'%3E%3Cpath d='m0,6l3.75-3.75.52.53-3.23,3.22,3.23,3.23-.52.52L0,6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.27 12'%3E%3Cpath d='m0,6l3.75-3.75.52.53-3.23,3.22,3.23,3.23-.52.52L0,6Z'/%3E%3C/svg%3E");
  margin-right: -4px;
}

/* 次の投稿：右矢印 */
.post-navigation-link-next a::after,
.wp-block-query-pagination-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.27 12'%3E%3Cpath d='m4.27,6l-3.75,3.75-.52-.52,3.23-3.23L0,2.77l.52-.52,3.75,3.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.27 12'%3E%3Cpath d='m4.27,6l-3.75,3.75-.52-.52,3.23-3.23L0,2.77l.52-.52,3.75,3.75Z'/%3E%3C/svg%3E");
  mask-position: right;
  margin-left: -4px;
}

/* svgアイコン */

.info-client,
.info-category,
.info-notes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.info-client::before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("../images/dd-client.svg");
  mask-image: url("../images/dd-client.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 1.4rem;
  width: 1.4rem;
  background-color: currentColor !important;
  vertical-align: middle;
}
.info-category::before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("../images/d-folder.svg");
  mask-image: url("../images/d-folder.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 1.4rem;
  width: 1.4rem;
  background-color: currentColor;
  vertical-align: middle;
}
.info-notes::before {
  content: "";
  display: inline-block;
  -webkit-mask-image: url("../images/d-note.svg");
  mask-image: url("../images/d-note.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 1.4rem;
  width: 1.4rem;
  background-color: currentColor;
  vertical-align: middle;
  margin-bottom: 1px;
}

/* ************************************************
  Only Post Works Gallery Gap
************************************************* */
.single-work .wp-block-gallery,
.post-type-work .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--wp--preset--spacing--fib-4) !important;
  gap: var(--wp--preset--spacing--fib-4) !important;
}

/* ************************************************
アーカイブの画像ホバー時の画像拡大
************************************************* */
.wp-block-post-featured-image img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center center;
}
.wp-block-group.works-group-img.zoom {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}
.wp-block-post-featured-image.zoom {
  overflow: hidden;
  border-radius: 8px;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.wp-block-post-featured-image.zoom img {
  transition: 0.5s;
  position: relative;
  filter: brightness(0.8);
}
.wp-block-post-featured-image.zoom img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  filter: unset;
  transition: 0.5;
}
.wp-block-post-featured-image.zoom:hover {
  /* box-shadow: 0px 5px 15px -5px #777777; */
  transition: 0.5s;
}

/* ************************************************
　引用デザイン
************************************************* */
.is-style-d-quote {
  position: relative;
  /* box-shadow: 2px 4px 10px -4px #777777; */
}
.is-style-d-quote::before {
  position: absolute;
  top: 18px;
  left: 16px;
  content: "";
  display: block;
  width: 5rem;
  height: 5rem;
  mask-image: url("../images/quotation.svg");
  mask-repeat: no-repeat;
  background-color: color-mix(in srgb, currentColor 20%, #ffffff 20%) !important;
}
.is-style-d-quote > * {
  z-index: 10;
}

/* ************************************************
アコーディオンブロックのデザイン変更
************************************************* */
/* アコーディオンブロックの見出しのホバー時の下線を消す */
.wp-block-accordion-item:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none !important;
}

.is-style-accordion-style .is-open .wp-block-accordion-heading,
.is-style-menu-style .is-open .wp-block-accordion-heading,
.is-style-right-position .is-open .wp-block-accordion-panel,
.is-style-center-position .is-open .wp-block-accordion-panel {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.is-style-accordion-style .is-layout-flow > *,
.is-style-menu-style .is-layout-flow > *,
.is-style-right-position .is-layout-flow > *,
.is-style-center-position .is-layout-flow > * {
  margin-block-start: 0 !important;
}
.is-style-accordion-style .is-open .wp-block-accordion-panel,
.is-style-menu-style .is-open .wp-block-accordion-panel,
.is-style-right-position .is-open .wp-block-accordion-panel,
.is-style-center-position .is-open .wp-block-accordion-panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.is-style-accordion-style .wp-block-accordion-heading__toggle::after,
.is-style-menu-style .wp-block-accordion-heading__toggle::after,
.is-style-right-position .wp-block-accordion-heading__toggle::after,
.is-style-center-position .wp-block-accordion-heading__toggle::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  -webkit-mask-image: url("../images/chevron-down.svg");
  mask-image: url("../images/chevron-down.svg");
  mask-size: contain;
  background-color: currentColor;
  transition: transform 0.2s ease;
  margin-right: -0.3rem;
}
.is-style-accordion-style .is-open .wp-block-accordion-heading__toggle::after,
.is-style-menu-style .is-open .wp-block-accordion-heading__toggle::after,
.is-style-right-position .is-open .wp-block-accordion-heading__toggle::after,
.is-style-center-position .is-open .wp-block-accordion-heading__toggle::after {
  transform: rotate(180deg);
}
.is-style-accordion-style .wp-block-accordion-item,
.is-style-menu-style .wp-block-accordion-item,
.is-style-right-position .wp-block-accordion-item,
.is-style-center-position .wp-block-accordion-item {
  overflow: hidden;
}
.is-style-accordion-style .wp-block-accordion-heading__toggle:hover {
  background-color: color-mix(in srgb, currentColor 5%, currentColor 0%) !important;
  transition: background-color 0.3s ease;
  border-radius: inherit !important;
}
.is-style-accordion-style .is-open .wp-block-accordion-heading__toggle {
  background-color: color-mix(in srgb, currentColor 5%, currentColor 0%) !important;
  transition: background-color 0.3s ease;
}

/* ************************************************
TOPページ用タイトルの飾り系（hrを使ったShort bar）
************************************************* */
.short-line {
  width: clamp(5rem, 3rem + 8vw, 7rem);
  border-top: solid clamp(0.5rem, 0.3rem + 0.8vw, 0.7rem);
}

/* ************************************************
 contact form 7
************************************************* */
.wpcf7 form > * + * {
  margin-top: 1rem;
}
.wpcf7 label,
.wpcf7-form,
.wpcf7-form.init,
.wpcf7-form-control {
  box-sizing: border-box;
  /* max-width: 420px; */
  margin: 0 auto;
}
.wpcf7 label {
  font-size: 0.9rem;
}
.wpcf7 input,
.wpcf7 textarea {
  font-size: 1rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.wpcf7 input[type="submit"] {
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  width: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  background-color: #eff1fb;
}
.wpcf7 input::placeholder {
  color: #bbb;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  box-shadow: 0px 0px 15px -5px #b2d1f8;
  border: 1px solid #b2d1f8;
  outline: none;
  outline-width: 0;
  transition: 0.3s;
}
.wpcf7 textarea {
  height: 150px;
}

/* ************************************************
段落内リンク・ホバー時のアニメーション
************************************************* */
main p > a {
  text-decoration: none;
  position: relative;
}
main p > a:hover {
  color: var(--wp--preset--color--brand-primary);
}
main p > a::after {
  background-color: var(--wp--preset--color--brand-primary); /* 下線の色 */
  bottom: -3px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 1px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: center top; /* 変形の原点を中央上に指定 */
  transition: transform 0.3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
main p > a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

/* ************************************************
詳細ブロックのマーカーをSVGに変換
************************************************* */
.is-style-svg-marker details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "";
}

.is-style-svg-marker details[open]:first-of-type summary::marker {
  content: "";
}
.is-style-svg-marker summary {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.is-style-svg-marker summary::before {
  content: "";
  display: inline-block;
  mask-image: url("../images/list-arrow-down-minimalistic-linear.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 2rem;
  width: 2rem;
  background-color: currentColor;
  padding-left: 2.4rem;
  margin-left: -3px;
}
details.is-style-svg-marker[open] summary::before {
  content: "";
  display: inline-block;
  mask-image: url("../images/list-arrow-up-minimalistic-bold.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  height: 2rem;
  width: 2rem;
  background-color: currentColor;
  padding-left: 2.4rem;
  margin-left: -3px;
}

/* ************************************************
h1タイトルをスクリーンリーダーとして扱う
************************************************* */
/* assets/css/styles.css（またはフロントで読み込むCSS） */
.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; /* URLなどが折り返さずに読み上げられるように */
}
/* 補足: キーボードのTabキーでフォーカスが当たった時だけ表示させる（アクセシビリティの基本） */
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  position: absolute;
  top: 5px;
  text-decoration: none;
  width: auto;
  z-index: 100000;
}