@charset "UTF-8";

/* ============================================================
   01. サイト共通設定：カラー・フォント
   色・書体・文字サイズのみ :root で管理する。太さ・寸法・余白は各クラスに記述。
   各セクションの行間・余白・画像寸法は、Figmaに合わせた配置用の指定。
   SVG・WebPなど画像に含まれる色は、素材自体で管理する。
   ============================================================ */
:root {
  /* 色：共通背景・アクセント・本文・白・旧ページの配色・補足文字・罫線（8種） */
  --base-color: #fdf8ee;
  --main-color: #e63717;
  --text-color: #3c3c3c;
  --white-color: #ffffff;
  --sub-color1: #c43c37;
  /* 制作実績・フォームのアクセント */
  --sub-color2: #fceeed;
  /* 制作実績・フォームの背景 */
  --text-sub: #7f7f80;
  --border-color: #dedddd;

  /* 文字サイズ：使用頻度の高い共通サイズ（5種）。例外は各クラスへ直接記述。 */
  --font-s: 13px;
  --font-m: 15px;
  --font-l: 20px;
  --font-xl: 28px;
  --font-xxl: 34px;

  /* 書体（2種）：functions.phpのGoogle Fonts読み込みに対応 */
  --main-font: 'Zen Kaku Gothic New', sans-serif;
  --sub-font: 'Roboto', sans-serif;
}

/* ============================================================
   02. 全ページ共通：リセット・基本要素
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure {
  margin: 0;
  padding: 0;
  font-family: var(--main-font);
  font-feature-settings: "palt";
  letter-spacing: 1px;
}

p {
  font-size: var(--font-m);
  line-height: 1.8;
  color: #222222;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.fade {
  transition: opacity 0.3s ease;
}

.fade:hover {
  opacity: 0.6;
}

/* 共通：isActiveの追加だけで表示する、元のフェード方式。 */
.js-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fade.isActive {
  opacity: 1;
  transform: translateY(0);
}

/* 下層ページ：制作実績一覧・詳細・お問い合わせの背景。 */
.base-page {
  background-color: var(--base-color);
}

/* 03. 共通ヘッダー：ロゴ・PC/SP共通ハンバーガーメニュー */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
  /* box-shadow: 0px 5px 10px -6px rgb(234 234 234 / 60%); */
  padding: 0 40px;
  height: 64px;
}

/* トップ：Hero表示中は固定ヘッダーを隠し、画面外へ出たらふわっと表示する。 */
.site-header--home {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s, background-color 0.2s ease;
}

.site-footer__works a {
  padding-left: 12px;
  font-weight: 300 !important;
}

.site-header--home.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

body:not(.home) .site-header,
.site-header.is-scrolled,
.site-header:has(.site-menu.is-open) {
  background-color: var(--base-color);
}

.admin-bar .site-header {
  top: 32px;
}

.site-header__logo {
  display: block;
  width: 30px;
  flex-shrink: 0;
}

.site-header__logo0 {
  display: block;
  width: 50px;
  flex-shrink: 0;
}

.site-header__logo img {
  width: 100%;
}

/* ハンバーガーのタップ領域と線の重なりには固定寸法を使用する。 */
.site-menu-toggle {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--main-color);
  cursor: pointer;
}

.site-menu-toggle span {
  position: absolute;
  left: 8px;
  top: 21px;
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-menu-toggle span:first-child {
  transform: translateY(-8px);
}

.site-menu-toggle span:last-child {
  transform: translateY(8px);
}

.site-menu-toggle.is-open span:first-child {
  transform: rotate(45deg);
}

.site-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.site-menu-toggle.is-open span:last-child {
  transform: rotate(-45deg);
}

.site-menu[hidden] {
  display: none;
}

/* メニューはヘッダー直下に重ね、背景を画面下端まで覆うため高さを指定する。 */
.site-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: min(420px, 100%);
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px 40px;
  background: var(--base-color);
  /* box-shadow: -8px 12px 24px rgb(73 48 40 / 6%); */
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.site-menu a,
.site-menu__label {
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 1.8;
  color: #333333;
}

.site-menu a {
  display: block;
  /* padding-block: 9px; */
  transition: color 0.2s ease;
}

.site-menu a:hover {
  color: var(--main-color);
}

.site-menu__label {
  padding-block: 9px;
}

.site-menu__sublist {
  padding-left: 18px;
}

.site-menu__sublist a {
  color: #777777;
}

.site-menu__contact {
  /* border-top: 1px solid color-mix(in srgb, var(--main-color) 20%, transparent); */
  /* padding-top: 16px; */
}

site-menu__contact a {
  display: block;
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 1.8;
  color: var(--main-color);
}

.site-menu-toggle:focus-visible,
.site-header__logo:focus-visible,
.site-menu a:focus-visible,
.home-contact:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 5px;
}

/* メニュー背景を画面下端まで覆うため画面高を使用。長い内容は内部でスクロールする。 */
.admin-bar .site-menu {
  height: calc(100dvh - 92px);
}

/* 04. トップ：Hero（メインビジュアル・対応エリア・キャッチコピー） */
.fv-item {
  opacity: 0;
  animation: fvFadeUp 0.8s ease forwards;
}

.fv-item01 {
  animation-delay: 0.2s;
}

.fv-item02 {
  animation-delay: 0.4s;
}

.fv-item03 {
  animation-delay: 0.6s;
}

.fv-item04 {
  animation-delay: 0.8s;
}

@keyframes fvFadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero {
  overflow: hidden;
  background: var(--base-color);
}

/* Hero左上：共有ロゴを通常の配置で置き、背景素材の上に表示する。 */
.home-hero__brand {
  position: relative;
  z-index: 2;
  padding: 20px 40px;
}

/* 写真と中央イラストを重ねるため、Heroのみキャンバス高とabsoluteで配置する。 */
.home-hero__canvas {
  position: relative;
  container-type: inline-size;
  max-width: 100%;
  height: clamp(928px, calc(668.8px + 18vw), 1072px);
  margin-inline: auto;
}

.home-hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hero__image {
  position: absolute;
  display: block;
  max-width: none;
}

.home-hero__image img {
  width: 100%;
  height: auto;
}

/* PC：Figmaの1440px〜2240pxの配置を補間。cqwは最大2240pxのキャンバス幅に追従する。 */
.home-hero__illustration {
  left: calc(31.6495cqw - 114.773px);
  top: calc(250.343px - 1.8294cqw);
  width: calc(279.28px + 29.2575cqw);
}

/* トップ：目の位置調整。top・left・widthを変更するとPC/SPともイラストに追従する。 */
.home-hero__eyes {
  position: absolute;
  top: 27.7%;
  left: 55%;
  width: 3.065%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.home-hero__eyes img {
  grid-area: 1 / 1;
}

.home-hero__eye--open {
  animation: heroEyeOpen 1.9s steps(1, end) infinite;
}

.home-hero__eyes .home-hero__eye--closed {
  width: 110.88%;
  max-width: none;
  opacity: 0;
  animation: heroEyeClosed 1.9s steps(1, end) infinite;
  position: absolute;
  top: 60%;
  left: -5%;
  /* width: 3.065%; */
}

/* 2秒開く → 0.2秒閉じる → 0.1秒開く → 0.2秒閉じる → 繰り返し。 */
@keyframes heroEyeOpen {

  0%,
  88%,
  100% {
    opacity: 1;
  }

  80%,
  92% {
    opacity: 0;
  }
}

@keyframes heroEyeClosed {

  0%,
  88%,
  100% {
    opacity: 0;
  }

  80%,
  92% {
    opacity: 1;
  }
}

.home-hero__print {
  left: calc(64.4px + 7.125cqw);
  top: 0;
  width: calc(646.362px - 4.5814cqw);
}

.home-hero__flyer {
  left: calc(69.75cqw - 107.4px);
  top: calc(5.6px + 2.25cqw);
  width: calc(317.403px + 17.5713cqw);
}

.home-hero__phone {
  left: calc(123px + 61.25cqw);
  top: calc(366px + 5.625cqw);
  width: calc(84px + 23.125cqw);
}

.home-hero__web {
  left: calc(19.625cqw - 322.6px);
  top: calc(207.8px + 8.625cqw);
  width: calc(270.492px + 6.0616cqw);
}

.home-hero__web-accent {
  left: calc(23.84375cqw - 117.35px);
  top: calc(366.184px + 4.8483cqw);
  width: calc(163.35px + 3.65625cqw);
}

.home-hero__copy {
  position: absolute;
  left: calc(5.4px + 2.75cqw);
  top: calc(569px + 14.375cqw);
}

.home-hero__tags {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.home-hero__tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  border-radius: 60px;
  background: color-mix(in srgb, var(--main-color) 10%, transparent);
  color: var(--main-color);
  font-size: var(--font-s);
  font-weight: 500;
  line-height: 13px;
  padding-block: 5.5px;
  letter-spacing: 0.26px;
}

.home-hero__tags li:last-child {
  width: 118px;
}

.home-hero__title {
  color: #333333;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: 0.6px;
  position: relative;
}

.home-hero__title span {
  color: var(--main-color);
  padding-bottom: 4px;
  letter-spacing: inherit;
  position: relative;
}

.home-hero__title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: 2px dashed var(--main-color);
  animation: lineDraw 1.2s ease-out 0.5s forwards;
}

@keyframes lineDraw {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* 共通：右下の「相談する」ボタン。円形のタップ領域を維持するため固定寸法を使用。 */
.home-contact {
  position: fixed;
  right: 33px;
  bottom: 40px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.5px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--main-color);
  color: var(--white-color);
  transition: opacity 0.2s ease, transform 0.2s ease;
  padding-top: 8px;
  border: 1px solid var(--base-color);
}

.home-contact img {
  width: 32px;
  height: 22px;
}

.home-contact span {
  font-size: 11.2px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.home-contact:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* 05. トップ：worry（6つのお悩み・人物イラスト） */
.home-worry {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  background: var(--base-color);
}

.home-worry__heading {
  position: relative;
  width: min(504px, 100%);
  margin: 0 auto;
  padding: 28.3px 0 74.1px;
  text-align: center;
}

/* 見出しの線画・吹き出しの丸は装飾として文字に重ねる。 */
.home-worry__heading::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 119px;
  width: 105px;
  height: 103.7px;
  background: url('../img/home/worry-heading-pc.webp') center / 100% 100% no-repeat;
}

.home-worry__heading h2 {
  width: 100%;
  color: var(--text-color);
  font-size: 30px;
  font-weight: 700;
  line-height: 43px;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-worry__heading h2 span,
.home-worry__bubble strong {
  color: var(--main-color);
}

.home-worry__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 335px) 174px minmax(0, 335px);
  grid-template-rows: repeat(3, minmax(93px, auto));
  padding-bottom: 80px;
  column-gap: clamp(20px, 3.7vw, 38px);
  row-gap: 29px;
  width: min(920px, calc(100% - 48px));
  margin: 0 auto;
}

.home-worry__bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(282px, calc(100% - 25px));
  min-height: 93px;
  padding: 8px;
  border-radius: 10px;
  background: var(--white-color);
  color: var(--text-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.54px;
  text-align: center;
}

.home-worry__bubble strong {
  font-weight: 700;
}

.home-worry__copy--sp {
  display: none;
}

.home-worry__bubble::after,
.home-worry__bubble::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--white-color);
}

.home-worry__bubble--left::after {
  top: 42px;
  right: -15px;
  width: 34px;
  height: 32px;
}

.home-worry__bubble--left::before {
  top: 67px;
  right: -49px;
  width: 20px;
  height: 19px;
}

.home-worry__bubble--right::after {
  top: 42px;
  left: -15px;
  width: 34px;
  height: 32px;
}

.home-worry__bubble--right::before {
  top: 67px;
  left: -49px;
  width: 20px;
  height: 19px;
}

.home-worry__bubble--right {
  justify-self: end;
}

.home-worry__bubble--three {
  margin-left: 33px;
}

.home-worry__bubble--four {
  margin-right: 33px;
}

.home-worry__bubble--one {
  grid-column: 1;
  grid-row: 1;
}

.home-worry__bubble--two {
  grid-column: 3;
  grid-row: 1;
}

.home-worry__bubble--three {
  grid-column: 1;
  grid-row: 2;
}

.home-worry__bubble--four {
  grid-column: 3;
  grid-row: 2;
}

.home-worry__bubble--five {
  grid-column: 1;
  grid-row: 3;
}

.home-worry__bubble--six {
  grid-column: 3;
  grid-row: 3;
}

/* PCの人物は左右の吹き出しに重なる位置で固定。SPではgridの4段目に配置。 */
.home-worry__person {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 174px;
  transform: translateX(-50%);
}

.home-worry__person picture,
.home-worry__person img {
  display: block;
  width: 100%;
  height: auto;
}

.home-worry__person img {
  object-fit: contain;
}

/* 06. トップ：consul_cover（提案メッセージ・相談できること） */
.home-consult {
  position: relative;
  overflow: hidden;
  padding-bottom: 38px;
  background: var(--main-color);
  color: var(--white-color);
}

.home-consult__lead {
  padding: 76px 0 71px;
}

.home-consult__arrow {
  display: block;
  width: min(786px, 100%);
  aspect-ratio: 786 / 65;
  margin: 0 auto;
  background: url('../img/home/consult-arrow.svg') center / contain no-repeat;
}

.home-consult__statement {
  width: min(786px, calc(100% - 24px));
  color: var(--white-color);
  font-size: 30px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  letter-spacing: 0;
  margin: 0 auto;
  padding-top: 44.56px;
}

.home-consult__statement span {
  padding: 0 9px;
  border-radius: 4px;
  background: var(--white-color);
  color: var(--main-color);
  white-space: nowrap;
  margin: 0 3px;
}

.home-consult__sp-break {
  display: none;
}

.home-consult__content {
  display: grid;
  grid-template-columns: 380px 660px;
  gap: 107px;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.home-consult__title {
  padding-top: 64px;
  color: var(--white-color);
  font-size: 30px;
  font-weight: 700;
  line-height: 52px;
}

.home-consult__points {
  display: grid;
}

.home-consult__point {
  display: grid;
  grid-template-columns: 222px 458px;
  min-width: 0;
  color: var(--white-color);
}

.home-consult__point:nth-child(2) {
  grid-template-columns: 458px 222px;
}

.home-consult__point img {
  width: 222px;
  object-fit: contain;
}

.home-consult__point-copy {
  padding-top: 70px;
}

.home-consult__point:nth-child(2) .home-consult__point-copy {
  grid-column: 1;
  grid-row: 1;
  padding-top: 43px;
}

.home-consult__point:nth-child(2) img {
  grid-column: 2;
  grid-row: 1;
}

.home-consult__point:nth-child(3) img {
  transform: translateY(-18px);
}

.home-consult__point:nth-child(3) .home-consult__point-copy {
  padding-top: 28px;
}

.home-consult__point h3 {
  color: var(--white-color);
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0;
}

.home-consult__point p {
  padding-top: 10px;
  color: var(--white-color);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
  text-align: justify;
}

/* 07. トップ：flow（進めかた・3つのステップ） */

.home-flow-cover {
  background-color: var(--white-color);
}

.home-flow {
  display: grid;
  grid-template-columns: 300px 900px;
  align-items: start;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;

}

.home-flow__heading {
  padding-top: 120px;
}

.home-flow__heading h2,
.page-heading h1 {
  color: var(--text-color);
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: 50px;
}

.home-flow__heading p,
.page-heading p {
  color: var(--main-color);
  font-family: var(--sub-font);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1.4px;
}

/* 共通：About・お問い合わせ・制作実績一覧の日本語／英語見出し。 */
.page-heading {
  text-align: center;
}


.home-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.home-flow__step {
  position: relative;
  min-width: 0;
  margin-top: 120px;
}

.home-flow__step:nth-child(2) {
  margin-top: 170px;
}

.home-flow__step:nth-child(3) {
  margin-top: 210px;
}

.home-flow__step>img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 番号の円を写真の角に重ねるため、ここだけabsoluteと固定寸法を使用する。 */
.home-flow__number {
  position: absolute;
  z-index: 1;
  top: -19px;
  left: -19px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--main-color);
  color: #fbf4e3;
  font-family: var(--sub-font);
  font-size: var(--font-l);
  font-weight: 700;
}

.home-flow__step h3 {
  padding-top: 11px;
  color: var(--text-color);
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0;
}

.home-flow__step p {
  padding-top: 8px;
  color: var(--text-color);
  font-size: var(--font-m);
  font-weight: normal;
  line-height: 26px;
  letter-spacing: 0;
  text-align: justify;
}

/* 08. トップ：works_cover・blog_cover（共通カード・横スクロール） */
.works_cover.home-card-section,
.blog_cover.home-card-section {
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.works_cover.home-card-section {
  padding: 90px 0;
  background-color: var(--white-color);
}

.blog_cover.home-card-section {
  padding: 0 0 80px;
  background-color: var(--white-color);
}

.home-card-section__heading {
  width: min(1200px, calc(100% - 50px));
  margin: 0 auto;
  position: relative;
}

.home-card-section__heading h2 {
  color: var(--text-color);
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: 1px;
  padding-bottom: 1px;
}

.home-card-section__heading p {
  color: var(--main-color);
  font-family: var(--sub-font);
  font-size: var(--font-m);
  font-weight: 500;
  letter-spacing: 1.5px;
}

.home-card-carousel {
  display: flex;
  gap: 24px;
  width: 100%;
  padding-top: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.home-card-carousel::-webkit-scrollbar {
  display: none;
}

.home-card-carousel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.home-card-carousel:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: -2px;
}

.home-card {
  display: block;
  flex: 0 0 406px;
  width: 406px;
  color: var(--text-color);
}

.home-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  border: 3px solid var(--main-color);
  border-radius: 10px;
  background: #f5f5f5;
  aspect-ratio: 406 / 271;
}

.home-card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 265;
  object-fit: cover;
}

.home-card__title {
  display: block;
  padding-top: 8px;
  overflow: hidden;
  color: var(--text-color);
  font-size: var(--font-m);
  font-weight: 700;
  /* line-height: 29px; */
  letter-spacing: 0.8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-card--blog .home-card__image span {
  color: var(--main-color);
  font-family: var(--sub-font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.88px;
}

.home-card[href]:hover .home-card__image {
  opacity: .8;
}

.home-card[href]:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 4px;
}

/* 外側の輪郭がスクロール領域で切れても、画像内側の輪郭でフォーカスを示す。 */
.home-card[href]:focus-visible .home-card__image {
  outline: 3px solid var(--main-color);
  outline-offset: -6px;
}

/* 09. 共通：contact_ban_cover（トップ・About・制作実績のお問い合わせバナー） */
.contact_ban_cover {
  width: 100%;
  padding: 140px 25px;
}

.contact_ban_cover--home {
  padding-bottom: 130px;
  background-color: var(--white-color);
}

.contact_ban {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  align-items: end;
  padding: 0 46px 0 41px;
  position: relative;
  width: min(750px, 100%);
  margin: 0 auto;
  border-radius: 20px;
  background: var(--main-color);
  color: var(--white-color);
}

/* 背景の円をバナーの角丸内で切り抜くため、装飾レイヤーだけabsoluteを使用。 */
.contact_ban__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.contact_ban__circle {
  position: absolute;
  top: 15px;
  left: 457px;
  width: 278px;
  height: 278px;
  border-radius: 50%;
  background: var(--white-color);
}

.contact_ban__illustration {
  z-index: 1;
  width: 216px;
  max-width: 100%;
  grid-column: 2;
  grid-row: 1;
  margin-top: -85px;
}

.contact_ban__copy {
  display: block;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  padding: 31px 0;
}

.contact_ban__title {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: 1px;
}

.contact_ban__description {
  display: block;
  padding-top: 4px;
  font-size: var(--font-m);
  font-weight: normal;
  line-height: 25px;
  letter-spacing: 0.45px;
}

.contact_ban:hover {
  opacity: .9;
}

.contact_ban:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 5px;
}

/* 10. 共通フッター：footer-1（ナビ・ロゴ）／footer-2（コピーライト） */
.site-footer {
  padding: 0;
}

.site-footer__main {
  padding: 50px 0;
  background: var(--base-color);
  text-align: center;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 78px 65px 93px;
  column-gap: 63px;
  align-items: start;
  width: 362px;
  margin: 0 auto;
  text-align: left;
  white-space: nowrap;
}

.site-footer__nav a,
.site-footer__works span {
  display: block;
  color: #000000;
  font-size: var(--font-m);
  font-weight: 500;
  /* line-height: 22px; */
  letter-spacing: 0.6px;
}

.site-footer__works {
  display: grid;
}

.site-footer__works a:first-of-type {
  padding-top: 8px;
  padding-bottom: 2px;
}

.site-footer__nav a:hover {
  color: var(--main-color);
}

.site-footer__nav a:focus-visible,
.site-footer__brand a:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 4px;
}

.site-footer__brand {
  padding-top: 60px;
}

.site-footer__brand p {
  color: #000000;
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.6px;
}

.site-footer__brand a {
  display: block;
  width: 40.37px;
  margin: 0 auto;
  padding-top: 15px;
}

.site-footer__brand img {
  width: 40.37px;
}

.site-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 31px;
  background: var(--main-color);
  color: var(--white-color);
}

.site-footer__copyright small {
  font-size: var(--font-s);
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.52px;
}

/* 11. About：ページ全体・本文幅・セクション間の余白 */
.about-page {
  background: var(--base-color);
  color: var(--text-color);
}

.about-page__body {
  display: flex;
  flex-direction: column;
  gap: 53px;
  width: min(1200px, calc(100% - 70px));
  margin: 0 auto;
  padding: 196.2px 0 110px;
}

/* About：コンセプト（糸について・中央揃えの本文） */
.about-concept {
  padding-bottom: 50px;
}

.about-concept__copy {
  width: min(643px, 100%);
  margin: 0 auto;
  padding-top: 65px;
  text-align: center;
}

.about-concept__copy p,
.about-concept__copy li {
  color: var(--text-color);
  font-size: var(--font-m);
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.48px;
}

.about-concept__copy>*+* {
  padding-top: 30px;
}

.about-concept__list {
  padding-left: 1em;
  list-style: none;
  text-align: left;
}

.about-concept__list li {
  position: relative;
}

.about-concept__list li::before {
  content: "";
  position: absolute;
  top: 0.5lh;
  left: -0.8em;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .about-concept__list {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

.about-concept__copy strong {
  color: var(--main-color);
  font-weight: 700;
}

.about-only-sp {
  display: none;
}

.about-page__section-title {
  display: table;
  border-bottom: 1px solid var(--main-color);
  color: var(--main-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 0;
}

/* About：プロフィール（PCは横並び、SPはイラスト→紹介文の縦並び） */

.about-profile__content {
  display: grid;
  grid-template-columns: 111px minmax(0, 816px);
  column-gap: 108px;
  align-items: start;
  padding-top: 44px;
}

.about-profile__portrait {
  width: 111px;
}

.about-profile__identity>p:first-child {
  color: var(--text-color);
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.48px;
}

.about-profile__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 5px;
  color: var(--main-color);
  font-weight: 700;
  letter-spacing: 0.48px;
}

.about-profile__name span:first-child {
  font-size: var(--font-l);
  line-height: 29px;
}

.about-profile__name span:last-child {
  font-size: var(--font-m);
  line-height: 23px;
}

.about-profile__bio {
  padding-top: 24px;
  color: var(--text-color);
  font-size: var(--font-m);
  font-weight: normal;
  line-height: 30px;
  letter-spacing: 0.16px;
}

/* About：事業概要（項目・内容の2列） */

.about-business__list {
  margin: 0;
  padding-top: 24px;
}

.about-business__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent);
  font-size: var(--font-m);
  line-height: 24px;
  letter-spacing: 0.48px;
  padding: 19.75px 0;
}

.about-business__row dt {
  font-weight: 700;
}

.about-business__row dd {
  min-width: 0;
  margin: 0;
  padding-left: 20px;
  font-weight: normal;
  overflow-wrap: anywhere;
}

.about-business__row a:hover {
  color: var(--main-color);
}

.about-business__row a:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* 12. 下層ページ：制作実績・Snow Monkey Forms（既存レイアウト） */
/* カルーセルの矢印・拡大画像・閉じるボタンは、重なりと比率維持のため寸法／absoluteを使用。 */
/* 既存の配色はsub-color1・sub-color2と直接指定で維持。フォーム機能はテンプレート側で保持。 */
h1.mh1 {
  color: var(--sub-color1);
  font-size: var(--font-xxl);
}

h2.mh2 {
  color: var(--sub-color1);
  font-size: var(--font-xxl);
}

.mh1 span {
  font-size: var(--font-l);
  padding-left: 20px;
}

.button {
  background-color: var(--main-color);
  width: 30%;
  margin: 60px auto 0px;
  color: var(--white-color);
  padding: 12px 0;
  text-align: center;
  font-size: var(--font-m);
  border-radius: 4px;
  font-weight: 500;
}

.works_carousel .box_owl:nth-child(3n) {
  grid-row: span 2;
}

p.wp-block-paragraph {
  padding-top: 24px;
}

h1.mh1_workspage {
  font-size: var(--font-xl);
  padding-top: 24px;
  line-height: 1.2;
}

/* owl */

.owl-carousel_nav .owl-next,
.owl-carousel_nav .owl-prev {
  top: 35%;
}

.other .owl-next,
.other .owl-prev {
  top: 54%;
}

.owl-controls {
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 !important;
}

.owl-next {
  z-index: 99999;
  position: absolute;
  top: 47%;
  right: 1%;
  clear: both;
  display: block !important;
  background-image: url(../img/owl_arrow_r.png) !important;
  background-size: contain !important;
  width: 24px;
  height: 24px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-color: transparent !important;
  font-size: 0 !important;
}

.owl-prev {
  z-index: 99999;
  position: absolute;
  top: 47%;
  left: 1%;
  clear: both;
  display: block !important;
  background-image: url(../img/owl_arrow_l.png) !important;
  background-size: contain !important;
  width: 24px;
  height: 24px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat !important;
  background-position: right !important;
  background-color: transparent !important;
  font-size: 0 !important;
}

.owl-dots {
  position: absolute;
  bottom: 16px;
  right: 0;
  left: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.owl-theme .owl-dots .owl-dot span {
  display: block;
  width: 9.6px;
  height: 9.6px;
  margin: 8px;
  background: var(--white-color);
  position: relative;
  opacity: 0.7;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--white-color) !important;
  opacity: 1;
}

.owl-item {
  height: 100%;
}

.owl-stage {
  height: 100%;
}

.owl-stage-outer {
  height: 100% !important;
}

.owl-carousel {
  height: 100% !important;
}

.owl-carousel.owl-loaded,
.owl-stage-outer,
.owl-stage,
.owl-item .cloned {
  height: 100%;
}

/* ----------制作実績 一覧---------- */

.tate {
  display: inline-block;
  height: 11px;
  border-left: 1px solid var(--text-sub);
  margin: 0 6px;
}

.works_arc_cover {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  padding-top: 150px;
  position: relative;
}

.works_arc_cover .mh2 {
  display: flex;
  align-items: center;
}

.mh2 span {
  font-size: var(--font-l);
  padding-left: 20px;
}

.works_list_cover {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 42px 42px;
  padding-top: 70px;
}

.works_list {
  width: 31%;
}

.works_list p {
  font-weight: 500;
  padding-top: 4px;
}

.category {
  color: var(--text-sub);
  font-size: var(--font-s);
  padding: 0 !important;
  line-height: 1.4;
}

.list_img {
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 8px;
  /* background-image: url("../img/tensen.png"); */
  background-repeat: repeat;
  background-size: 80%;
  border: 3px solid var(--main-color);
}

/* ----------制作実績 各ページ---------- */
.workspage_cover {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  padding-top: 150px;
  position: relative;
}

.works_page_sp {
  display: flex;
  gap: 14px;
  justify-content: start;
  padding-top: 50px;
  width: 100%;
}

.works_page_sp img {
  width: 0;
  height: 100%;
  flex: 1;
}

.works_page_mv_cover {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.works_page_mv {
  width: 62%;
  background-color: #f5f5f5;
  border-radius: 12px;
  /* background-image: url(../img/tensen_gray.png); */
  background-repeat: repeat;
  background-size: 82%;
  border: 3px solid var(--main-color);
}

.works_page_mv_zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.works_page_mv_zoom img {
  display: block;
  width: 100%;
  height: auto;
}

.works_page_mv_zoom:focus-visible {
  outline: 3px solid #333333;
  outline-offset: 4px;
}

.works_image_modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 30px 30px;
  background: rgb(0 0 0 / 88%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.works_image_modal.is-open {
  visibility: visible;
  opacity: 1;
}

.works_image_modal_inner {
  width: 70vw;
  max-height: 100vh;
  overflow: auto;
  max-width: none;
}

.works_image_modal_inner img {
  display: block;
  width: 150%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}

.works_image_modal_close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.works_image_modal_close::before,
.works_image_modal_close::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 5px;
  width: 30px;
  height: 2px;
  background: var(--white-color);
}

.works_image_modal_close::before {
  transform: rotate(45deg);
}

.works_image_modal_close::after {
  transform: rotate(-45deg);
}

body.is-works-modal-open {
  overflow: hidden;
}

.works_page_txt {
  width: 38%;
}

.works_page_img {
  padding-top: 100px;
}

.works_page_content {
  width: 90%;
  margin: 0 0 0 auto;
  text-align: justify;
}

p.client {
  color: var(--main-color);
  border-bottom: 1px solid;
  display: inline;
  font-weight: 500;
}

h3.mh3 {
  font-size: var(--font-xl);
  line-height: 1.2;
  padding-top: 20px;
}

p.page_txt {
  padding-top: 24px;
}

.txt_cover {
  padding-top: 20px;
}

.box_txt.page_detail {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  text-align: justify;
  padding-bottom: 0px;
}

.box_txt.page_detail p {
  color: var(--text-sub);
  font-size: var(--font-s);
  line-height: 1.6;
}

p.box_txt1 {
  width: 14%;
}

p.box_txt2 {
  width: 86%;
}

.button_workspage {
  width: 60%;
  margin: 60px 0 0 0;
}

/* ----------お問い合わせ---------- */
.contactpage_cover {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  padding-top: 150px;
  position: relative;
}

.huki_ill {
  width: 10%;
}

.contact_huki_cover {
  display: flex;
  justify-content: flex-start;
  padding-top: 50px;
  align-items: center;
  gap: 21px;
}

.huki_txt {
  width: 45%;
  background-color: var(--white-color);
  padding: 20px 30px;
  text-align: justify;
  border-radius: 8px;
  position: relative;
}

.huki_txt::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid var(--white-color);
  border-right: 0;
  left: -11px;
  transform: rotate(180deg);
  top: 32px;
  border-radius: 10px;
}

.contact_form_cover {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
  margin-top: 70px;
}

.contactpage_cover em {
  font-size: var(--font-s);
  color: var(--main-color);
  font-weight: 100;
  font-style: normal;
}

.smf-item .smf-item__col--label {
  font-weight: 500;
  font-size: var(--font-m);
  width: 22%;
}

.smf-item {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
  width: 100%;
}

.smf-button-control__control[data-action="back"] {
  background-color: var(--white-color) !important;
  border: 1px solid var(--main-color) !important;
  color: var(--main-color) !important;
  margin: 20px auto 0px !important;
}

.smf-complete-content {
  text-align: center;
  padding-top: 100px;
}

.smf-select-control {
  width: 100%;
}

textarea#content {
  padding-bottom: 140px;
}

.smf-item__col--controls {
  width: 78%;
}

select.smf-select-control__control {
  width: 100%;
}

input.smf-text-control__control {
  width: 100%;
}

.smf-action .smf-button-control__control {
  background-color: var(--main-color);
  width: 30%;
  margin: 20px auto 100px;
  color: var(--white-color);
  padding: 12px 0;
  text-align: center;
  font-size: var(--font-m);
  border-radius: 4px;
  font-weight: 500;
  border: none;
  font-family: var(--main-font);
  background-image: unset;
}

.smf-action {
  text-align: center;
  padding-top: 30px;
}

.box_txt {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
}

/* ============================================================
   13. レスポンシブ：画面幅ごとに集約（広い画面 → 狭い画面）
   同じ条件内では従来の記述順を維持する。セクション名は各グループ内に記載。
   ============================================================ */

/* 画面幅 768〜1439px */
@media (min-width: 768px) and (max-width: 1439px) {

  /* 04. トップ：Hero（メインビジュアル・対応エリア・キャッチコピー） */
  .home-hero__canvas {
    height: max(640px, 64.4444vw);
  }

  .home-hero__illustration {
    left: 23.679%;
    top: 15.556cqw;
    width: 48.652%;
  }

  .home-hero__print {
    left: 11.597%;
    width: 40.305%;
  }

  .home-hero__flyer {
    left: 62.292%;
    top: 2.639cqw;
    width: 39.613%;
  }

  .home-hero__phone {
    left: 69.792%;
    top: 31.042cqw;
    width: 28.958%;
  }

  .home-hero__web {
    left: -2.778%;
    top: 23.056cqw;
    width: 24.846%;
  }

  .home-hero__web-accent {
    left: 15.694%;
    top: 30.278cqw;
    width: 15%;
  }

  .home-hero__copy {
    left: 3.125%;
    top: auto;
    bottom: 32px;
  }
}

/* PC：進めかたの日本語・英語間の距離を制作実績に揃える。 */
@media (min-width: 768px) {
  .home-flow__heading h2 {
    line-height: normal;
    padding-bottom: 1px;
  }

  .home-flow__heading p {
    line-height: 1.8;
  }
}

/* 画面幅 768〜1239px */
@media (min-width: 768px) and (max-width: 1239px) {

  /* トップ：consul_cover・flow */
  .home-consult__content {
    grid-template-columns: minmax(230px, 32%) minmax(0, 1fr);
    gap: 4%;
  }

  .home-consult__point {
    grid-template-columns: 33% 67%;
  }

  .home-consult__point img {
    max-width: 100%;
  }

  .home-consult__point:nth-child(2) {
    grid-template-columns: 67% 33%;
  }

  .home-consult__point:nth-child(2) .home-consult__point-copy {
    padding-right: 8px;
  }

  .home-consult__point h3 {
    font-size: 18px;
  }

  .home-consult__point p {
    font-size: var(--font-m);
    line-height: 23px;
  }

  .home-flow {
    grid-template-columns: 24% 76%;
  }

  .home-flow__steps {
    gap: 24px;
  }

  .home-flow__step p {
    font-size: var(--font-m);
    line-height: 23px;
  }
}

/* 画面幅 1200px以下 */
@media screen and (max-width: 1200px) {

  /* 下層ページ：制作実績・お問い合わせ */
  html,
  body {
    overflow-x: hidden;
  }

  .button {
    width: 35%;
  }

  .works_list {
    width: 30%;
  }

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

/* 画面幅 768〜1199px */
@media (min-width: 768px) and (max-width: 1199px) {

  /* About：プロフィール・ページ全体 */
  .about-profile__content {
    grid-template-columns: 111px minmax(0, 1fr);
    column-gap: 50px;
  }
}

/* 画面幅 768〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {

  /* 05. トップ：worry（6つのお悩み・人物イラスト） */
  .home-worry__bubble {
    font-size: var(--font-m);
    line-height: 23px;
  }
}

/* 画面幅 1000px以下 */
@media screen and (max-width: 1000px) {

  /* 下層ページ：制作実績・お問い合わせ */
  h2.mh2 {
    display: inline;
    background-color: var(--white-color);
    padding: 0px 19px 0 0;
  }

  p.box_txt1 {
    width: 16%;
  }

  .works_page_mv_cover {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .button {
    width: 46%;
  }
}

/* 画面幅 900px以下 */
@media screen and (max-width: 900px) {

  /* 下層ページ：制作実績・お問い合わせ */
  .works_list {
    width: 29%;
  }
}

/* 画面幅 782px以下 */
@media (max-width: 782px) {

  /* 共通ヘッダー：WordPress管理バー */
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .site-menu {
    height: calc(100dvh - 106px);
  }
}

/* SP：767px以下（共通・Top・About・下層ページ） */
@media (max-width: 767px) {

  /* 共通：文字サイズ */
  :root {
    --font-s: 12px;
    --font-m: 14px;
    --font-l: 16px;
    --font-xl: 20px;
    --font-xxl: 26px;
  }

  /* 04. トップ：Hero（メインビジュアル・対応エリア・キャッチコピー） */
  /* トップ：SPの初期ロゴも、共通ヘッダーのロゴと同じ左位置に合わせる。 */
  .home-hero__brand {
    padding: 14px 20px;
  }

  .site-header__logo0 {
    display: block;
    width: 31px;
    flex-shrink: 0;
  }

  .site-header {
    padding: 7px 20px;
  }

  .site-header__logo {
    width: 21.4px;
  }

  .site-menu-toggle {
    margin-right: -12px;
  }

  .site-menu-toggle span {
    width: 20px;
    height: 1.8px;
    left: 12px;
  }

  .site-menu-toggle span:first-child {
    transform: translateY(-6px);
  }

  .site-menu-toggle span:last-child {
    transform: translateY(6px);
  }

  .site-menu-toggle.is-open span:first-child {
    transform: rotate(45deg);
  }

  .site-menu-toggle.is-open span:last-child {
    transform: rotate(-45deg);
  }

  .site-menu {
    width: min(360px, 75vw);
    padding: 20px 24px;
    height: calc(100dvh - 58px);
  }

  .admin-bar .site-menu {
    height: calc(100dvh - 104px);
  }

  .site-menu__list {
    gap: 18px;
  }

  .site-menu a,
  .site-menu__label {
    font-size: 15px;
  }

  .home-hero__canvas {
    height: max(680px, 188.2051vw);
  }

  .home-hero__print,
  .home-hero__web-accent {
    display: none;
  }

  .home-hero__illustration {
    left: 6.4759%;
    top: 31.7949cqw;
    width: 87.1817%;
  }

  /* SP：写真はFigmaのページ端で切り抜いた専用素材を使用する。 */
  .home-hero__flyer {
    left: 9.2308%;
    top: 0;
    width: 72.3006%;
  }

  /* SP：左右の写真も専用の切り抜き素材に切り替える。 */
  .home-hero__phone {
    left: 0;
    top: 93.8462cqw;
    width: 49.4872%;
  }

  .home-hero__web {
    left: 55.1282%;
    top: 94.8718cqw;
    width: 44.8718%;
  }

  .home-hero__copy {
    left: 5.3846%;
    right: 5.3846%;
    top: 134.8718cqw;
  }

  .home-hero__tags {
    gap: 4px;
    margin-bottom: 4.8px;
  }

  .home-hero__tags li {
    width: 48.8px;
    font-size: 10.4px;
    padding-block: 4.4px;
    line-height: 10.4px;
    letter-spacing: 0.208px;
  }

  .home-hero__tags li:last-child {
    width: 94.4px;
  }

  .home-hero__title {
    font-size: clamp(19px, 6.1538vw, 30px);
    line-height: 1.46;
  }

  .home-hero__title span {
    border-bottom-width: 2.4px;
    padding-bottom: 3px;
  }

  .home-contact {
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 62.4px;
    height: 62.4px;
    gap: 4px;
  }

  .home-contact img {
    width: 25.6px;
    height: 17.6px;
  }

  .home-contact span {
    font-size: 8.9px;
  }

  /* 05. トップ：worry（6つのお悩み・人物イラスト） */
  .home-worry {
    padding-top: 20px;
  }

  .home-worry__heading {
    width: 100%;
    padding: 22.7px 0 60px;
  }

  .home-worry__heading::before {
    top: -0.6px;
    left: calc(50% - 93.4px);
    width: 84px;
    height: 83px;
    background-image: url('../img/home/worry-heading-sp.webp');
  }

  .home-worry__heading h2 {
    font-size: 22px;
    line-height: 32px;
  }

  .home-worry__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(110px, auto)) auto;
    padding-bottom: 0;
    gap: 12px 20px;
    width: min(314px, calc(100% - 40px));
  }

  .home-worry__bubble {
    width: 100%;
    min-height: 90px;
    align-self: start;
    margin: 0;
    padding: 6px;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0;
    justify-self: stretch;
  }

  .home-worry__copy--pc {
    display: none;
  }

  .home-worry__copy--sp {
    display: block;
  }

  .home-worry__bubble::after {
    top: 75px;
    left: 19px;
    right: auto;
    width: 24px;
    height: 24px;
  }

  .home-worry__bubble::before {
    top: 101px;
    left: 42px;
    right: auto;
    width: 9px;
    height: 9px;
  }

  .home-worry__bubble--three::after,
  .home-worry__bubble--two::after,
  .home-worry__bubble--six::after {
    left: auto;
    right: 19px;
  }

  .home-worry__bubble--three::before,
  .home-worry__bubble--two::before,
  .home-worry__bubble--six::before {
    left: auto;
    right: 42px;
  }

  .home-worry__bubble--one {
    grid-column: 1;
    grid-row: 1;
  }

  .home-worry__bubble--three {
    grid-column: 2;
    grid-row: 1;
  }

  .home-worry__bubble--five {
    grid-column: 1;
    grid-row: 2;
  }

  .home-worry__bubble--two {
    grid-column: 2;
    grid-row: 2;
  }

  .home-worry__bubble--four {
    grid-column: 1;
    grid-row: 3;
  }

  .home-worry__bubble--six {
    grid-column: 2;
    grid-row: 3;
  }

  .home-worry__person {
    width: 139px;
    position: static;
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: center;
    margin-top: -39px;
    transform: none;
  }

  /* トップ：consul_cover・flow */
  .home-consult {
    padding-bottom: 46px;
  }

  .home-consult__lead {
    padding-top: 53px;
  }

  .home-consult__arrow {
    width: min(390px, 100%);
    aspect-ratio: 390 / 46;
    background-image: url('../img/home/consult-arrow-sp.svg');
  }

  .home-consult__statement {
    width: min(370px, calc(100% - 8px));
    font-size: 22px;
    line-height: 39px;
    padding-top: 30.9px;
    text-align: center;
    font-feature-settings: "palt";
  }

  .home-consult__sp-break {
    display: inline;
  }

  .home-consult__statement span {
    padding: 0 6px;
    border-radius: 3px;
  }

  .home-consult__content {
    display: block;
    width: 100%;
  }

  .home-consult__title {
    width: 100%;
    padding: 0 20px;
    font-size: 22px;
    line-height: 38px;
  }

  /* 各項目は画像と本文の高さに合わせて伸ばす。 */
  .home-consult__points {
    gap: 20px;
    padding: 10px 30px 0;
  }

  .home-consult__point,
  .home-consult__point:nth-child(2) {
    display: block;
    min-width: 0;
  }

  .home-consult__point img,
  .home-consult__point:nth-child(2) img,
  .home-consult__point:nth-child(3) img {
    display: block;
    width: 222px;
    max-width: 100%;
    margin: 0 auto;
    transform: none;
  }

  .home-consult__point-copy,
  .home-consult__point:nth-child(2) .home-consult__point-copy,
  .home-consult__point:nth-child(3) .home-consult__point-copy {
    padding: 0;
  }

  .home-consult__point h3 {
    font-size: 15px;
    line-height: 23px;
    text-align: center;
  }

  .home-consult__point:first-child h3 {
    padding-top: 8px;
  }

  .home-consult__point p {
    padding-top: 8px;
    font-size: 13px;
    line-height: 20.8px;
  }

  .home-flow {
    display: block;
    width: 100%;
    margin: 0;
    overflow: visible;
  }

  .home-flow__heading {
    padding: 70px 25px 0;
  }

  .home-flow__heading h2,
  .page-heading h1 {
    font-size: 22px;
    line-height: 25.6px;
    padding-bottom: 6px;
  }

  .home-flow__heading p,
  .page-heading p {
    font-size: 12.2px;
    line-height: 16px;
  }

  .home-flow__steps {
    display: flex;
    gap: 15px;
    width: 100%;
    padding: 40px 25px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: 25px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-flow__steps::-webkit-scrollbar {
    display: none;
  }

  .home-flow__step,
  .home-flow__step:nth-child(2),
  .home-flow__step:nth-child(3) {
    /* flex: 0 0 218.4px; */
    margin-top: 0;
    scroll-snap-align: start;
    min-width: 60%;
  }

  .home-flow__number {
    top: -12px;
    left: -12px;
    width: 24.3px;
    height: 24.3px;
    font-size: 13px;
    z-index: 80;
  }

  .home-flow__step h3 {
    padding-top: 8px;
    font-size: 15px;
    line-height: 23px;
  }

  .home-flow__step p {
    padding-top: 8px;
    font-size: 13px;
    line-height: 20.8px;
  }

  /* 08. トップ：works_cover・blog_cover（共通カード・横スクロール） */
  .works_cover.home-card-section {
    padding: 60px 0;
  }

  .blog_cover.home-card-section {
    padding: 0 0 80px;
  }

  .home-card-section__heading {
    width: calc(100% - 50px);
  }

  .home-card-section__heading h2 {
    font-size: 22px;
    line-height: 25.6px;
    padding-bottom: 6px;
  }

  .home-card-section__heading p {
    font-size: 11.2px;
    line-height: 16px;
  }

  .home-card-carousel {
    padding-inline: 25px;
    scroll-padding-left: 25px;
    scroll-snap-type: x mandatory;
    gap: 14px;
  }

  .home-card {
    flex-basis: 284.2px;
    width: 284.2px;
    scroll-snap-align: start;
  }

  .home-card__image {
    border-width: 2.1px;
    border-radius: 7px;
  }

  .home-card__title {
    padding-top: 7px;
    font-size: 15px;
    line-height: 20px;
  }

  .home-card--blog .home-card__image span {
    font-size: 18px;
  }

  /* 共通：問い合わせバナー・フッター */
  .contact_ban_cover,
  .contact_ban_cover--home {
    padding: 20px 25px 80px;
  }

  .contact_ban {
    border-radius: 10px;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 10px 0;
    text-align: center;
  }

  .contact_ban__circle {
    top: 164px;
    left: 50%;
    width: 298.6px;
    height: 298.6px;
    transform: translateX(-50%);
  }

  .contact_ban__illustration {
    width: 162px;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 13.2px;
  }

  .contact_ban__copy {
    padding: 0;
  }

  .contact_ban__title {
    font-size: 22px;
    line-height: 41.6px;
  }

  .contact_ban__description {
    padding-top: 3.2px;
    font-size: 12px;
    line-height: 20px;
  }

  .site-footer__main {
    padding: 40px 0;
  }

  .site-footer__nav {
    grid-template-columns: 62px 52px 75px;
    column-gap: clamp(20px, 12.923vw, 50.4px);
    width: max-content;
  }

  .site-footer__nav a,
  .site-footer__works span {
    font-size: 12px;
    line-height: 17px;
  }

  .site-footer__works {
    row-gap: 4px;
  }

  .site-footer__brand {
    padding-top: 30px;
  }

  .site-footer__brand p {
    font-size: 12px;
    line-height: 17px;
  }

  .site-footer__brand a {
    width: 32.3px;
    padding-top: 12px;
  }

  .site-footer__brand img {
    width: 32.3px;
  }

  .site-footer__copyright {
    padding: 5px 11px;
  }

  .site-footer__copyright small {
    font-size: 12px;
    line-height: 17px;
  }

  /* About：コンセプト・プロフィール・事業概要 */
  .about-page {
    overflow: visible;
  }

  .about-page__body {
    width: calc(100% - 70px);
    gap: 32px;
    padding: 70px 0;
  }

  .about-concept__copy {
    padding-top: 44px;
  }

  .about-concept__copy p,
  .about-concept__copy li {
    font-size: 13px;
    line-height: 24px;
  }

  .about-page__section-title {
    font-size: 18px;
  }

  .page-heading {
    text-align: center;
    padding-top: 20px;
  }

  .about-concept__copy>*+* {
    padding-top: 24px;
  }

  .about-only-sp {
    display: inline;
  }

  .about-only-pc {
    display: none;
  }

  .about-profile__content {
    display: block;
    padding-top: 34px;
  }

  .about-profile__portrait {
    width: 112px;
  }

  .about-profile__text {
    padding-top: 20px;
  }

  .about-profile__identity>p:first-child {
    font-size: 13px;
    line-height: 19px;
  }

  .about-profile__name {
    gap: 8px;
    padding-top: 4px;
  }

  .about-profile__name span:first-child {
    font-size: 18px;
    line-height: 23px;
  }

  .about-profile__name span:last-child {
    font-size: 13px;
    line-height: 19px;
  }

  .about-profile__bio {
    padding-top: 24.2px;
    font-size: 13px;
    line-height: 24px;
  }

  .about-business .about-page__section-title {
    font-size: 18px;
    line-height: 24px;
  }

  .about-business__list {
    padding-top: 19.2px;
  }

  .about-business__row {
    grid-template-columns: 79px minmax(0, 1fr);
    font-size: 13px;
    line-height: 19px;
    padding: 15.8px 0;
  }

  .about-business__row dd {
    padding-left: 16px;
  }

  .about-business__row--contact {
    padding: 10px 0;
  }

  .about-business__row--services {
    padding: 10px 0;
  }

  /* SP：文字間隔 */
  .home-hero__title {
    letter-spacing: 0.48px;
  }

  .home-flow__heading p,
  .page-heading p {
    letter-spacing: 1.12px;
  }

  .home-card__title {
    letter-spacing: 0.56px;
  }

  .home-card--blog .home-card__image span {
    letter-spacing: 0.72px;
  }

  .contact_ban__description {
    letter-spacing: 0.36px;
    text-align: center;
  }

  .site-footer__nav a,
  .site-footer__works span,
  .site-footer__brand p {
    letter-spacing: 0.48px;
  }

  .site-footer__copyright small {
    letter-spacing: 0.48px;
  }

  .about-concept__copy p,
  .about-concept__copy li,
  .about-profile__identity>p:first-child,
  .about-profile__name,
  .about-business__row {
    letter-spacing: 0.384px;
  }

  .about-profile__bio {
    letter-spacing: 0.128px;
  }

  /* 下層ページ：制作実績・お問い合わせ */
  /* 下層ページ：画面表示専用のSP調整 */
  @media screen {

    /* 全体 */
    main {
      overflow: hidden;
      position: relative;
    }

    h2.mh2 {
      width: 85%;
      margin: 0 auto;
      display: block;
      background: none;
      padding: 0;
    }

    .button {
      width: 70%;
      margin: 60px auto 0px;
      color: var(--white-color);
    }

    .works_image_modal_inner {
      width: 100vw;
      max-height: 100vh;
      max-width: none;
    }

    .works_image_modal_inner img {
      display: block;
      width: 150%;
      max-width: none;
      height: auto;
      margin: 0 auto;
      position: relative;
      left: 50%;
      transform: translatex(-50%);
    }

    /* 制作実績・お問い合わせ：ページ幅 */

    .workspage_cover,
    .contactpage_cover,
    .works_arc_cover {
      width: 100%;
      max-width: 100%;
      padding-top: 70px;
    }

    .txt_cover p {
      line-height: 1.5;
    }

    h1.mh1 {
      width: 85%;
      margin: 0 auto;
    }

    /* contact */

    .huki_ill {
      width: 24%;
    }

    .huki_txt {
      width: 69%;
      background-color: var(--white-color);
      padding: 20px;
      text-align: justify;
      border-radius: 8px;
      position: relative;
    }

    .contact_huki_cover {
      width: 90%;
      margin: 0 auto;
      position: relative;
      align-items: flex-start;
      gap: 25px;
    }

    .huki_txt p {
      letter-spacing: 0.2px;
    }

    .contact_form_cover {
      width: 85%;
      margin-top: 50px;
    }

    .smf-item {
      flex-direction: column;
    }

    .smf-item .smf-item__col--label {
      width: 100%;
      padding-bottom: 10px;
    }

    .smf-item__col--controls {
      width: 100%;
    }

    .smf-select-control {
      width: 100%;
    }

    .smf-action .smf-button-control__control {
      width: 70%;
    }

    /* works一覧 */

    .works_list {
      width: 100%;
    }

    .works_list_cover {
      width: 85%;
      margin: 0 auto;
      gap: 28px 0;
      padding-top: 50px;
    }

    .mh2 span {
      font-weight: 100;
    }

    .works_list p {
      font-weight: 100;
      padding-top: 8px;
    }

    /* 制作実績 各ページ */

    .works_page_mv_cover {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
    }

    .works_page_mv {
      width: 85%;
      border-radius: 8px;
      background-size: 120%;
    }

    .works_page_txt {
      width: 85%;
      padding-top: 30px;
    }

    .works_page_content {
      width: 100%;
    }

    .box_txt {
      padding-bottom: 2px;
    }

    .works_page_img {
      padding-top: 80px;
      width: 85%;
      margin: 0 auto;
    }

    .works_page_sp img {
      width: 48%;
    }

    .works_page_sp {
      display: flex;
      gap: 24px 12px;
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
      padding: 50px 0 0 0;
    }

    .workspage_cover .button {
      margin: 40px auto 0px !important;
    }

    .workspage_cover {
      padding-top: 100px;
    }
  }
}

/* 画面幅 359px以下 */
@media (max-width: 359px) {

  /* 05. トップ：worry（6つのお悩み・人物イラスト） */
  .home-worry__heading h2 {
    font-size: 19px;
  }

  .home-worry__bubble {
    font-size: 11.5px;
    line-height: 17px;
  }

  /* 共通バナー・About：320px幅での補正 */
  .contact_ban {
    padding-inline: 20px;
  }

  .contact_ban__title {
    font-size: 20px;
  }

  .contact_ban__description {
    font-size: 11.2px;
  }

  .about-page__body {
    width: calc(100% - 40px);
  }

  .about-concept__copy {
    width: 100%;
  }

  .about-concept__copy p,
  .about-concept__copy li {
    font-size: 12px;
  }
}

/* 共通：動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

  /* トップ：動きを減らす設定では開いた目を維持する。 */
  .home-hero__eye--open,
  .home-hero__eyes .home-hero__eye--closed {
    animation: none;
  }

  /* 共通：動きを減らす設定 */
  .site-header,
  .site-header--home,
  .site-menu-toggle span,
  .site-menu a,
  .home-contact {
    transition: none;
  }

  .js-fade,
  .fv-item {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}