@charset "UTF-8";
/*--------------------------
文字に対して、一括でfont-size、line-height、letter-spacing、font-weightを指定する
line-heightがpxの場合
---------------------------*/
/*--------------------------
文字に対して、一括でfont-size、line-height、letter-spacing、font-weightを指定する
line-heightが％の場合
---------------------------*/
/*--------------------------------
    remの換算
--------------------------------*/
/*--------------------------------
    vwにする
--------------------------------*/
/*--------------------------------
    親要素に対する割合
--------------------------------*/
/*--------------------------------
背景のグラデーション
--------------------------------*/
/*--------------------------------
一次関数
画面幅 1440pxの時は、120pxで、そこからどんどん小さくなり、1000pxの時に20pxになるという実装の際に使える関数。
--------------------------------*/
/*--------------------------------
擬似要素の背景
--------------------------------*/
/*--------------------------------
三角形
--------------------------------*/
/*--------------------------------
  リキッドの設定
  --------------------------------*/
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
html {
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.25vw;
  }
}
@media (min-width: 1280px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #2e3436;
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

a {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.7;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul,
ol {
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

ul,
ol {
  list-style: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

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

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

img:not([alt]) {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

input,
button,
select,
textarea {
  font: inherit;
  border: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  resize: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* ========== Header ========== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 80px;
  z-index: 9999;
  background: #e7e5dc;
}

.site-header__bar {
  margin: 0 auto;
  padding: 1.6875rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 91vw;
}
@media screen and (min-width: 768px) {
  .site-header__bar {
    width: min(1300px, 91vw);
  }
}

/* 通常はMenuだけ見せる。メニュー展開時にnavを表示 */
.site-header__nav {
  display: none;
  gap: 1.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nav__btn {
  color: #2e3436;
  font-size: 1rem;
  font-weight: 300;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.nav__btn.is-active,
.nav__btn:is(:hover, :focus-visible) {
  border-bottom: 1px solid #1987b3;
}

.site-header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  gap: 0.75rem;
}

.site-header__menu:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-header__menu-label {
  color: #2e3436;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 300;
}

.site-header__menu-dot {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background: #1987b3;
  border-radius: 50%;
}

/* ヘッダー内パネル */
.site-header__panel {
  top: 80px;
  right: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  background: #e7e5dc;
  opacity: 0;
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px); /* ほんの少しだけ上から */
  pointer-events: none;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.38s ease, -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.38s ease, -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.38s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 0.38s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-header__panel.is-open {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__panel {
    -webkit-transition: opacity 0.2s linear !important;
    transition: opacity 0.2s linear !important;
    -webkit-transform: none !important;
            transform: none !important;
  }
}
.panel__title {
  font-size: clamp(18px, 2.4vw, 28px);
  margin: 0 0 8px;
}

.panel__lead {
  margin: 0 0 10px;
  color: var(--muted);
}

.panel__list {
  margin: 0;
  padding-left: 1.2em;
}

.panel__view {
  display: none;
}

.panel__view.is-active {
  display: block;
}

/* Menu展開中のヘッダーステート */
.site-header.is-open .site-header__nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

html.is-loading .works__outer {
  overflow: hidden;
  pointer-events: none;
  -ms-touch-action: none;
      touch-action: none;
}

.loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.loading__inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.loading__top {
  text-align: center;
}

.loading__name {
  padding-top: 2.5rem;
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  line-height: 1.5333333333;
  letter-spacing: 0em;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  -webkit-filter: blur(0.375rem);
          filter: blur(0.375rem);
  clip-path: inset(0 100% 0 0);
}
@media screen and (min-width: 768px) {
  .loading__name {
    font-size: 5rem;
    line-height: normal;
  }
}

.loading__middle {
  position: relative;
  width: 5rem;
  height: 3.25rem;
  margin-top: 0.875rem;
}
@media screen and (min-width: 768px) {
  .loading__middle {
    width: 7.5rem;
    height: 4.75rem;
    margin-top: 1.125rem;
  }
}

.loading__dog {
  position: absolute;
  top: 0.375rem;
  left: 50%;
  width: 3rem;
  opacity: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .loading__dog {
    width: 4.375rem;
  }
}

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

.loading__hole {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.5rem;
  height: 0.5625rem;
  clip-path: polygon(8% 50%, 14% 20%, 30% 2%, 50% 0%, 70% 2%, 86% 20%, 92% 50%, 86% 80%, 70% 98%, 50% 100%, 30% 98%, 14% 80%);
  background: #2c2c2c;
  opacity: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.loading__bottom {
  text-align: center;
}

.loading__label {
  padding-top: 0.625rem;
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  line-height: 1.5333333333;
  letter-spacing: 0em;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  -webkit-filter: blur(0.375rem);
          filter: blur(0.375rem);
  clip-path: inset(0 100% 0 0);
}
@media screen and (min-width: 768px) {
  .loading__label {
    font-size: 5rem;
    line-height: normal;
  }
}

.loading__role {
  margin-top: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.4666666667;
  letter-spacing: 0em;
  font-weight: 300;
  font-family: "Inter", sans-serif;
  text-align: center;
  opacity: 0;
  -webkit-filter: blur(0.375rem);
          filter: blur(0.375rem);
}
@media screen and (min-width: 768px) {
  .loading__role {
    margin-top: 1.375rem;
    font-size: 1rem;
  }
}

html.is-loading {
  overflow: hidden;
}

html.is-loading .site-header,
html.is-loading .works__title,
html.is-loading .works__dog-icon,
html.is-loading .catbar,
html.is-loading .works-grid,
html.is-loading #js-works-other {
  opacity: 0;
  visibility: hidden;
}

html.is-loading .catbar,
html.is-loading #js-works-other {
  -webkit-transform: translateY(1rem);
          transform: translateY(1rem);
}

html.is-loaded .site-header,
html.is-loaded .works__title,
html.is-loaded .works__dog-icon,
html.is-loaded .catbar,
html.is-loaded .works-grid,
html.is-loaded #js-works-other {
  visibility: visible;
}

/* ========== Main ========== */
html,
body {
  background: #e7e5dc;
  height: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.l-wrapper {
  position: relative;
}

.works__placeholder {
  height: 100vh;
}

.works__outer {
  position: fixed;
  inset: 80px 0 0;
  width: 91vw;
  margin: 0 auto;
  background: #e7e5dc;
  border-radius: 10px 10px 0 0;
  z-index: 0;
  padding-bottom: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge レガシー */
  overflow-anchor: none;
}
@media screen and (min-width: 768px) {
  .works__outer {
    width: min(1300px, 91vw);
    padding-bottom: 3.125rem;
  }
}

.is-menu-open .works__outer {
  overflow: hidden;
}

.works__outer::-webkit-scrollbar {
  display: none;
}

.works__panel {
  border-radius: 10px 10px 40px 40px;
  margin: 0 auto;
  background: #fff;
  overflow: clip;
  padding-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .works__panel {
    border-radius: 10px;
    max-width: 1340px;
  }
}

.works__panel-inner {
  padding: 0 1rem;
}
@media screen and (min-width: 768px) {
  .works__panel-inner {
    padding: 0 1.25rem;
  }
}

.works__title {
  font-size: 1.875rem;
  line-height: 1.5333333333;
  letter-spacing: 0em;
  font-weight: 400;
  text-align: center;
  padding-top: 2.5rem;
  font-family: "Borel", cursive;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .works__title {
    font-size: 5rem;
    line-height: normal;
  }
}

.works__title-prefix {
  display: inline-block;
  font-family: "Borel", cursive;
}

.works__title-suffix {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.works__title-works {
  display: inline-block;
}

.works__title-cursor {
  display: inline-block;
  width: 0.08em;
  height: 1.875rem;
  margin-left: 0.3125rem;
  background: currentColor;
  opacity: 0;
  -webkit-transform: translateY(-0.9375rem);
          transform: translateY(-0.9375rem);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .works__title-cursor {
    width: 2px;
    height: 6.25rem;
    -webkit-transform: translateY(-2.1875rem);
            transform: translateY(-2.1875rem);
  }
}

.works__title,
.works__title * {
  font-family: "Borel", cursive !important;
}

.works__title-cursor.is-blinking {
  -webkit-animation: works-title-cursor-blink 0.9s steps(1, end) infinite;
          animation: works-title-cursor-blink 0.9s steps(1, end) infinite;
}

@-webkit-keyframes works-title-cursor-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes works-title-cursor-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@media screen and (min-width: 768px) {
  .works__title {
    white-space: nowrap;
  }
  .works__title .sp {
    display: none;
  }
  .works__title-suffix {
    margin-left: 0.18em;
  }
}
.works__dog-icon {
  width: 3rem;
  height: 1.875rem;
  margin: 0 auto;
}

.works-grid:not([hidden]) {
  display: grid;
}

.works-grid {
  gap: 0.625rem;
  padding-top: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media screen and (min-width: 768px) {
  .works-grid {
    gap: 1rem;
    padding-top: 0.625rem;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
}

.works-grid__item.is-hidden {
  display: none;
}

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  padding: 0.625rem;
  border-radius: 0.375rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  -webkit-filter: saturate(0.9) contrast(0.97);
          filter: saturate(0.9) contrast(0.97);
  -webkit-transition: -webkit-transform 0.5s ease, -webkit-filter 0.3s ease;
  transition: -webkit-transform 0.5s ease, -webkit-filter 0.3s ease;
  transition: transform 0.5s ease, filter 0.3s ease;
  transition: transform 0.5s ease, filter 0.3s ease, -webkit-transform 0.5s ease, -webkit-filter 0.3s ease;
  border-radius: 0.375rem;
}

.thumb:hover {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.thumb:hover img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-filter: saturate(1) contrast(1);
          filter: saturate(1) contrast(1);
}

/* スクロールロック（固定法で位置を保持） */
body.menu-lock {
  position: fixed;
  width: 100%;
}

/* リスト（横スクロール可） */
.catbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  padding: 1.875rem 0.625rem 1.25rem;
}

.catbar__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 500px;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .catbar__list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 3.875rem;
  }
}

.catbar__list::-webkit-scrollbar {
  display: none;
}

.catbar__btn {
  color: #2e3436;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .catbar__btn {
    font-size: 1rem;
  }
}

.catbar__btn:is(:hover, :focus-visible) {
  outline: none;
}

.catbar__btn.is-active,
.catbar__btn:is(:hover, :focus-visible) {
  border-bottom: 1px solid #1987b3;
}

.catbar-sentinel {
  height: 0;
}

.contact-form {
  margin: 1.75rem 0;
}
@media screen and (min-width: 768px) {
  .contact-form {
    margin: 1.25rem 0 0;
  }
}

.contact-btn {
  position: relative;
  width: 100%;
  height: 3.125rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  /* ← これがズレ防止の決め手 */
}
@media screen and (min-width: 768px) {
  .contact-btn {
    padding: 1.25rem 0;
    height: 5.625rem;
  }
}

.contact-img {
  display: block;
  -webkit-transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1080px;
  max-width: none;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .contact-img {
    width: 100%;
    height: 3.125rem;
  }
}

.contact-hover {
  opacity: 0;
}

/* hover 可能デバイス */
@media (hover: hover) {
  .contact-btn:hover .contact-hover {
    opacity: 1;
  }
  .contact-btn:hover .contact-normal {
    opacity: 0;
  }
}
/* フォーカスでも切替 */
.contact-btn:focus-visible .contact-hover {
  opacity: 1;
}

.contact-btn:focus-visible .contact-normal {
  opacity: 0;
}

:root {
  --frame-w: min(1300px, 91vw);
  --gutter: 16px;
}

.copyright {
  font-size: 0.75rem;
  font-weight: 300;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .copyright {
    position: fixed;
    top: 50%;
    /* 50vw - (枠幅/2) で「白枠の左端」を出し、さらに少し外へ逃がす */
    left: calc(50vw - var(--frame-w) / 2 - 4.1875rem);
    -webkit-transform: translateY(-50%) rotate(90deg);
            transform: translateY(-50%) rotate(90deg);
    z-index: 50;
    pointer-events: none;
  }
}
@media screen and (min-width: 1440px) {
  .copyright {
    top: 31.25rem;
  }
}

/* ========== Works Other ========== */
.works-other__text {
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 300;
}

/* ---- 左：Project overview + 年代 ---- */
.works-other__overview {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .works-other__overview {
    position: absolute;
    top: 43%;
    left: 5%;
  }
}
@media screen and (min-width: 1440px) {
  .works-other__overview {
    left: 7%;
  }
}

@media screen and (min-width: 768px) {
  .works-other__overview-heading {
    justify-self: center;
    width: 1.25rem;
    height: 9.375rem;
    position: relative;
    margin-right: 0.9375rem;
  }
}

.works-other__overview-text {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  font-family: "Borel", cursive;
}
@media screen and (min-width: 768px) {
  .works-other__overview-text {
    white-space: nowrap;
    -webkit-transform: rotate(90deg) translateY(-100%);
            transform: rotate(90deg) translateY(-100%);
    -webkit-transform-origin: left top;
            transform-origin: left top;
  }
}

.works-other__overview-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .works-other__overview-list {
    display: grid;
  }
}

.works-other__overview-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.works-other__year {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3.8125rem;
  height: 1.6875rem;
  border-radius: 999px;
  border: 1px solid #1987b3;
  background: #fff;
  color: #1987b3;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 400;
  cursor: pointer;
}

.works-other__year.is-active {
  background: #1987b3;
  color: #fff;
}

/* ---- 右：テーブル（見出し濃紺＋行は罫線） ---- */
.works-other__table-wrap {
  margin-top: 1.75rem;
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .works-other__table-wrap {
    margin-top: 1.25rem;
    position: relative;
    width: min(65vw, 860px);
    margin-inline: auto;
  }
}

.works-other__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.works-other__table {
  width: 100%;
  border-collapse: collapse;
}

.works-other__tr--head {
  border-bottom: 0.8px solid #2e3436;
  background: url("../images/top/other-header-bg.jpg") center/cover no-repeat;
}

.works-other__tr {
  display: grid;
  grid-template-columns: 12.5rem 5.375rem 6.5625rem -webkit-max-content;
  grid-template-columns: 12.5rem 5.375rem 6.5625rem max-content;
  border-bottom: 0.8px solid #2e3436;
  gap: 3.125rem;
  padding: 1rem 0.9375rem;
}

.works-other__th {
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  letter-spacing: 0em;
  font-weight: 300;
  text-align: left;
}

.works-other__td {
  font-size: 0.875rem;
  line-height: 1.7142857143;
  letter-spacing: 0em;
  font-weight: 300;
  vertical-align: middle;
}

/* 列幅（見やすく固定） */
@media (min-width: 768px) {
  :root {
    --pad: 24px;
    --gap: 28px;
  }
}
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.work__inner {
  max-width: 600px;
  margin: 0 auto;
  overflow-x: clip;
}
@media screen and (min-width: 768px) {
  .work__inner {
    max-width: 1340px;
  }
}

.work__outer {
  max-width: 600px;
}
@media screen and (min-width: 768px) {
  .work__outer {
    max-width: 1340px;
    width: min(1340px, 93vw);
  }
}

/* page */
.work-detail {
  margin-inline: auto;
  background: #fff;
  padding: 1.875rem 0.9375rem;
  border-radius: 0 0 10px 10px;
}
@media screen and (min-width: 768px) {
  .work-detail {
    padding: 2.5rem 1.25rem;
  }
}

.work-detail__title {
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  line-height: 1.3333333333;
  letter-spacing: 0em;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .work-detail__title {
    font-size: 5rem;
    line-height: normal;
  }
}

.work-detail__frame {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .work-detail__frame {
    grid-template-columns: min(26vw, 328px) 1fr;
    gap: 0.625rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

@media screen and (min-width: 768px) {
  .work-detail__meta {
    position: sticky;
    top: clamp(12px, 2.4vw, 20px);
  }
}

.work-detail__meta-card {
  padding: 0.75rem;
  border-radius: 4px 4px 4px 10px;
  border: 1px solid #2e3436;
}
@media screen and (min-width: 768px) {
  .work-detail__meta-card {
    padding: 1rem;
  }
}

.meta {
  display: grid;
  gap: 0.75rem;
}
@media screen and (min-width: 768px) {
  .meta {
    gap: 1.875rem;
  }
}

.meta__group {
  display: grid;
  gap: 0.125rem;
}

.meta__term {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: 0em;
  font-weight: 700;
}

.meta__desc {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .meta__desc {
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}

.meta__link {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #1987b3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 0.25rem;
}
.meta__link:after {
  content: "";
  background: url(../images/common/link-icon.svg) no-repeat center/contain;
  width: 0.875rem;
  height: 1.125rem;
}

/* gallery */
.work-detail__gallery {
  display: grid;
  gap: 0.3125rem;
  grid-row: 1;
}
@media screen and (min-width: 768px) {
  .work-detail__gallery {
    grid-column: 2;
    gap: 0.625rem;
  }
}

.work-media {
  overflow: clip;
  border-radius: 0.25rem;
  background: lightgray;
  border: 1px solid #2e3436;
}

.work-media img {
  height: auto;
  aspect-ratio: 311/191.63;
}
@media screen and (min-width: 768px) {
  .work-media img {
    aspect-ratio: 962/592.75;
  }
}

.works-detail__dog-image {
  width: 3rem;
  height: 3.9375rem;
  margin-top: 0.25rem;
}

.works__next {
  margin-top: 0.625rem;
  background: #fff;
  border-radius: 10px 10px 40px 40px;
  padding: 1.875rem 0 1.25rem;
}
@media screen and (min-width: 768px) {
  .works__next {
    margin-top: 1.25rem;
    border-radius: 10px;
    padding: 2.5rem 0 1.25rem;
  }
}

.works__next-title {
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  font-weight: 400;
  padding: 0 1rem;
}
@media screen and (min-width: 768px) {
  .works__next-title {
    font-size: 5rem;
    padding: 0 1.25rem;
  }
}

.works__next-inner {
  padding: 0 1rem;
}
@media screen and (min-width: 768px) {
  .works__next-inner {
    padding: 0rem 1.25rem;
    max-width: 698px;
    margin: 0 auto;
  }
}

.works__next-item {
  border-radius: 10px;
  border: 1px solid #2e3436;
  padding: 0.75rem;
}
.works__next-item img {
  aspect-ratio: 632/390;
  height: auto;
}

.works__next-desc {
  border-radius: 10px;
  border: 1px solid #2e3436;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4285714286;
  letter-spacing: 0em;
  font-weight: 300;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .works__next-desc {
    margin-top: 0.625rem;
  }
}

.about {
  position: fixed;
  overflow-y: auto;
  inset: 0;
}

.about__inner {
  padding: 1.625rem;
  max-width: 450px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .about__inner {
    padding: 1.25rem;
    max-width: 1380px;
  }
}

@media screen and (min-width: 768px) {
  .about__content {
    display: grid;
    /* 左：me が縦に2段分、右：notice -> work の順に積む */
    grid-template-areas: "me notice" "me work";
    grid-template-columns: min(30vw, 332px) 1fr;
    grid-template-rows: 3.125rem 1fr;
    gap: 2rem 2.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    place-items: end;
  }
}

.about__notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 0.5625rem;
}
@media screen and (min-width: 768px) {
  .about__notice {
    grid-area: notice;
    gap: 1.25rem;
  }
}

.about__notice-icon {
  width: 3rem;
  height: 1.875rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .about__notice-icon,
  .about__card--work {
    grid-column: 2;
  }
}

.about__notice-label {
  font-family: "Borel", cursive;
  font-size: 0.875rem;
  line-height: 1.8571428571;
  letter-spacing: 0em;
  font-weight: 400;
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .about__notice-label {
    padding-left: 0.75rem;
  }
}

.about__notice-desc {
  font-size: 0.875rem;
  line-height: 1.2857142857;
  letter-spacing: 0em;
  font-weight: 300;
  border-radius: 999px;
  background: #fff;
  padding: 0.625rem 1.25rem;
}
@media screen and (min-width: 768px) {
  .about__notice-desc {
    font-size: 0.875rem;
    line-height: 1.8571428571;
    padding: 0 0.75rem;
  }
}

.about__me {
  margin-top: 2.875rem;
}
@media screen and (min-width: 768px) {
  .about__me {
    grid-area: me;
    margin-top: 1.5625rem;
  }
}
.about__me img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  -o-object-position: center 56%;
     object-position: center 56%;
}

.about__title {
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  line-height: 1.3333333333;
  letter-spacing: 0em;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .about__title {
    font-size: 2rem;
    line-height: 1.3125;
  }
}

.about__card {
  background: #fff;
  padding: 0.25rem 0.25rem 1.25rem;
  border-radius: 4px 4px 10px 10px;
  margin-top: 1.875rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .about__card {
    margin-top: 2.5rem;
  }
}

.about__me-profession {
  position: absolute;
  color: #1987b3;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  right: clamp(-90px, 15 * (100vw - 375px) / -55 - 90px, -75px);
  top: 80px;
}
@media screen and (min-width: 768px) {
  .about__me-profession {
    right: clamp(-71px, 18 * (100vw - 1024px) / -256 - 71px, -53px);
  }
}
@media screen and (min-width: 1024px) {
  .about__me-profession {
    right: clamp(-90px, 14 * (100vw - 1200px) / -176 - 85px, -71px);
  }
}

.about__me-img {
  border-radius: 4px 4px 0 0;
  aspect-ratio: 323/198.92;
}

.about__card-content {
  padding: 0 1.25rem;
  font-weight: 300;
}

.about__name {
  margin-top: 0.75rem;
  font-size: 1.125rem;
}

.about__name-en {
  margin-top: 0.125rem;
  font-size: 0.75rem;
}

.about__career {
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  margin-top: 0.75rem;
}

.about__tools {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
}
@media screen and (min-width: 768px) {
  .about__tools {
    margin-top: 2rem;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
}

.about__tools-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
}
.about__tools-label:before {
  content: "";
  background: #e2ddc6;
  width: 0.625rem;
  height: 0.625rem;
}

.about__card--work {
  border-radius: 4px 4px 40px 40px;
}
@media screen and (min-width: 768px) {
  .about__card--work {
    grid-area: work;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
    max-width: 890px;
    border-radius: 10px 4px 4px 10px;
    padding: 0.25rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.about__work-img {
  aspect-ratio: 323/330;
  border-radius: 4px 4px 0 0;
}
.about__work-img img {
  max-height: 100%;
}
@media screen and (min-width: 768px) {
  .about__work-img img {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .about__work-img {
    grid-column: 2;
    aspect-ratio: auto;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
}

.about__work-content {
  padding: 0 1.25rem;
}
@media screen and (min-width: 768px) {
  .about__work-content {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.25rem;
    padding-bottom: 1.25rem;
  }
}

.about__work-label {
  margin-top: 1.25rem;
  color: #1987b3;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .about__work-label {
    margin-top: 0.875rem;
  }
}

.about__work-text {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
  margin-top: 0.125rem;
}
@media screen and (min-width: 768px) {
  .about__work-text {
    font-size: 0.875rem;
    line-height: 1.6428571429;
  }
}

.about__work-list {
  margin-top: 0.375rem;
}

.about__work-list li + li {
  margin-top: 0.4375rem;
}

.about__work-list__item {
  font-size: 0.8125rem;
  line-height: 1.3076923077;
  letter-spacing: 0em;
  font-weight: 300;
}

.about-copyright {
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .about-copyright {
    display: none;
  }
}

/* ---- セクション ---- */
.scroll__outer {
  margin: 0 auto;
  width: min(600px, 91vw);
  background: #e7e5dc;
  border-radius: 10px 10px 0 0;
  /* ← 上の角丸は常に効く */
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow-y: auto;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge レガシー */
  overflow-anchor: none;
}
@media screen and (min-width: 768px) {
  .scroll__outer {
    width: min(1340px, 93vw);
  }
}

.scroll__outer::-webkit-scrollbar {
  display: none;
}

.service__inner {
  margin-inline: auto;
  padding: 2.5rem 1.25rem 1.25rem;
  background: #fff;
  border-radius: 0 0 40px 40px;
}
@media screen and (min-width: 768px) {
  .service__inner {
    border-radius: 0 0 10px 10px;
  }
}

/* ---- カード（SP 縦並び） ---- */
.service-cards {
  display: grid;
  gap: 0.9375rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .service-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9375rem;
  }
}

.service-card {
  list-style: none;
}

.service-card__circle {
  background: url(../images/service/circle-sp.jpg) no-repeat center/contain;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(250px, 49 * (100vw - 320px) / 55 + 270px, 360px);
  padding: 0 2.0625rem;
  aspect-ratio: 319/314.17;
  position: relative;
}
@media screen and (min-width: 768px) {
  .service-card__circle {
    width: min(30vw, 423px);
  }
}

.service-card__spark {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .service-card__spark {
    top: 2rem;
    right: 2rem;
    width: 1.75rem;
  }
}
.service-card__spark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}

.service-card__circle:hover .service-card__spark img {
  -webkit-animation: blink-simple 1s step-start 3;
          animation: blink-simple 1s step-start 3;
}

/* SP: スクロールで上部に来たときにJSが付与するクラスで発火 */
.service-card__spark img.is-sparking {
  -webkit-animation: blink-simple 1s step-start 3;
          animation: blink-simple 1s step-start 3;
}

@-webkit-keyframes blink-simple {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes blink-simple {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.service-card__heading {
  padding-bottom: 0.25rem;
  border-bottom: 3px solid #e2ddc6;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.service-card__title {
  font-family: "Borel", cursive;
  font-size: 2.1875rem;
  font-weight: 400;
}

.service-card__sub {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0em;
  font-weight: 300;
}

.service-card__lead {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 400;
  margin: 1.25rem auto 0;
  max-width: 310px;
}
@media screen and (min-width: 768px) {
  .service-card__lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    letter-spacing: 0em;
    font-weight: 300;
    margin-top: 2rem;
  }
}

/* ---- Flow（SP 縦） ---- */
.flow {
  margin-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .flow {
    margin-top: 0.75rem;
  }
}

.flow__heading {
  font-size: 1.125rem;
  line-height: 1.8888888889;
  letter-spacing: 0em;
  font-weight: 300;
  padding-left: 1.25rem;
}
@media screen and (min-width: 768px) {
  .flow__heading {
    padding-left: 1.875rem;
  }
}

.flow__list {
  display: grid;
  gap: 0.75rem;
  border-radius: 1.875rem;
  background: rgba(231, 229, 220, 0.4);
  position: relative;
  padding: 1.25rem;
}
@media screen and (min-width: 768px) and (min-width: 768px) {
  .flow__list {
    grid-template-columns: repeat(5, 1fr);
    gap: 3.125rem;
    padding: 1.25rem 1.875rem;
  }
}
.flow__list:after {
  position: absolute;
  content: "";
  background: url(../images/common/dog.svg) no-repeat center/contain;
  width: 3rem;
  height: 1.875rem;
  right: 41px;
  top: -46px;
}
@media screen and (min-width: 768px) {
  .flow__list:after {
    right: 27%;
    top: -1.875rem;
  }
}

.flow__item {
  position: relative;
}

.flow__item + .flow__item:before {
  display: block;
  content: "";
  background: url(../images/service/flow-arrow.svg) no-repeat center/contain;
  width: 1.4375rem;
  height: 1.5rem;
  margin: 0.75rem auto;
}
@media screen and (min-width: 768px) {
  .flow__item + .flow__item:before {
    position: absolute;
    left: -2.1875rem;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-90deg);
            transform: translateY(-50%) rotate(-90deg);
    margin: 0;
  }
}

.flow__step {
  display: block;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.4117647059;
  letter-spacing: 0em;
  font-weight: 300;
  border-bottom: 3px solid #e2ddc6;
  padding-bottom: 0.1875rem;
}

.flow__text {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
  margin-top: 0.75rem;
}
@media screen and (min-width: 768px) {
  .flow__text {
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}

.copyright-service {
  margin-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .copyright-service {
    display: none;
  }
}

.contact {
  padding-bottom: 1rem;
  border-radius: 10px 10px 0 0;
}

.contact__inner {
  background: #fff;
  border-radius: 0 0 40px 40px;
  padding: 2.5rem 0.75rem 1.25rem;
}
@media screen and (min-width: 768px) {
  .contact__inner {
    padding: 1.25rem 1.875rem;
    border-radius: 0 0 10px 10px;
  }
}

.contact__lead {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .contact__lead {
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}

/* ===== Form layout (SP first) ===== */
.contact__form {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contact__form {
    max-width: 1115px;
    grid-template-columns: 50% 40%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 3.125rem auto;
  }
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .contact__grid {
    margin-top: 0.75rem;
  }
}

.contact__grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .contact__grid-2 {
    grid-template-columns: 1fr 1fr;
    margin-top: 1.125rem;
  }
}

.contact__field {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}

.contact__label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 300;
  margin-bottom: 0.25rem;
  pointer-events: none;
}

.contact__req {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  line-height: 0.75;
  letter-spacing: 0em;
  font-weight: 300;
  color: #fff;
  background: #c21c6c;
  border-radius: 0.25rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2rem;
  height: 1.1875rem;
}

.contact__input {
  height: 2.5rem;
}

/* 入力要素 */
.contact__input,
.contact__textarea {
  width: 100%;
  background: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 300;
  outline: none;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

/* タッチ環境（スマホ/タブレット）では16pxにしてズーム回避 */
@media (hover: none) and (pointer: coarse) {
  .contact__input,
  .contact__textarea {
    font-size: 1rem;
  }
}
/* iOS をより確実に拾いたい場合の上書き（どちらか片方でOK） */
@supports (-webkit-touch-callout: none) {
  .contact__input,
  .contact__textarea {
    font-size: 1rem;
  }
}
.contact__input::-webkit-input-placeholder, .contact__textarea::-webkit-input-placeholder {
  color: rgba(46, 52, 54, 0.5);
}
.contact__input::-moz-placeholder, .contact__textarea::-moz-placeholder {
  color: rgba(46, 52, 54, 0.5);
}
.contact__input:-ms-input-placeholder, .contact__textarea:-ms-input-placeholder {
  color: rgba(46, 52, 54, 0.5);
}
.contact__input::-ms-input-placeholder, .contact__textarea::-ms-input-placeholder {
  color: rgba(46, 52, 54, 0.5);
}
.contact__input::placeholder,
.contact__textarea::placeholder {
  color: rgba(46, 52, 54, 0.5);
}

.contact__input:focus-visible,
.contact__textarea:focus-visible {
  border-color: #1987b3;
}

/* ラジオ */
/* ラジオ行（既存の .contact__choices はそのままでOK） */
.contact__choices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.125rem;
}
@media screen and (min-width: 768px) {
  .contact__choices {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

/* 1アイテム */
.contact-radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* 実ラジオをカスタム表示にする */
.contact-radio__input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 0;
  border: 1px solid #2e3436; /* 外枠（未選択） */
  border-radius: 50%;
  position: relative;
  display: inline-grid;
  place-content: center;
  -webkit-transition: border-color 0.15s ease;
  transition: border-color 0.15s ease;
  cursor: pointer;
}

/* 内側の“塗り” */
.contact-radio__input::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #1987b3;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

/* チェック時：内側が現れ、外枠色も合わせる */
.contact-radio__input:checked {
  border-color: #1987b3;
}

.contact-radio__input:checked::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ラベル文字 */
.contact-radio__label {
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 300;
}

.contact__textarea {
  height: 8.125rem;
}

/* 注意書き＋送信 */
.contact__notes {
  margin-top: 1.25rem;
}

.contact__bullets {
  position: relative;
  border-top: 3px solid #e2ddc6;
  border-bottom: 3px solid #e2ddc6;
  padding-block: 1.375rem;
  padding-left: 1.25rem;
  padding-right: 0.625rem;
  color: #2e3436;
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .contact__bullets {
    font-size: 0.875rem;
    line-height: 1.7142857143;
  }
}
.contact__bullets::after {
  position: absolute;
  content: "";
  background: url(../images/common/dog.svg) no-repeat center/contain;
  width: 3rem;
  height: 1.875rem;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .contact__bullets::after {
    right: 0.625rem;
  }
}

.contact__bullets li {
  list-style: disc;
}

.contact__bullets li::marker {
  font-size: 0.625rem;
}

/* 送信ボタン（不透明度は :has(:invalid) で切替） */
.contact__submit {
  margin: 1.25rem auto 0;
  display: block;
  width: min(85vw, 500px);
  height: 3.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: #1987b3;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease, -webkit-filter 0.2s ease;
  transition: opacity 0.2s ease, -webkit-filter 0.2s ease;
  transition: opacity 0.2s ease, filter 0.2s ease;
  transition: opacity 0.2s ease, filter 0.2s ease, -webkit-filter 0.2s ease;
}
@media screen and (min-width: 768px) {
  .contact__submit {
    width: 100%;
    margin-top: 1.5rem;
  }
}

/* フォームに無効要素が1つでもある間は50% */
.contact__form:has(:invalid) .contact__submit {
  opacity: 0.5;
}

.contact__form:not(:has(:invalid)) .contact__submit {
  opacity: 1;
}

.copyright-contact {
  margin-top: 1.125rem;
}
@media screen and (min-width: 768px) {
  .copyright-contact {
    display: none;
  }
}

.contact-thanks {
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.contact-thanks__wrapper {
  background: #fff;
  border-radius: 0 0 40px 40px;
  padding: 2.5rem 0.75rem 1.25rem;
}
@media screen and (min-width: 768px) {
  .contact-thanks__wrapper {
    border-radius: 0 0 10px 10px;
    padding: 5.625rem 1.25rem;
  }
}

.contact-thanks__inner {
  max-width: 14rem;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contact-thanks__inner {
    max-width: 27.5625rem;
  }
}

.contact-thanks__title {
  font-family: "Borel", cursive;
  font-size: 1.875rem;
  line-height: 0.7;
  letter-spacing: 0em;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .contact-thanks__title {
    font-size: 2.8125rem;
    line-height: 0.6444444444;
  }
}

.contact-thanks__text {
  font-size: 0.875rem;
  line-height: 1.5714285714;
  letter-spacing: 0em;
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .contact-thanks__text {
    font-size: 1rem;
  }
}

.contact-thanks__heading {
  padding-bottom: 0.5625rem;
  border-bottom: 3px solid #e2ddc6;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contact-thanks__heading {
    padding-bottom: 1.3125rem;
  }
}

.contact-thanks__icon {
  width: 3rem;
  height: 3.1875rem;
  margin: 1.75rem auto 0;
}
@media screen and (min-width: 768px) {
  .contact-thanks__icon {
    margin-top: 3.125rem;
  }
}

.contact-thanks__content {
  margin-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .contact-thanks__content {
    margin-top: 3.125rem;
  }
}

.contact-thanks__content p + p {
  margin-top: 1.25rem;
}

.contact-thanks__btn {
  margin-top: 1.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .contact-thanks__btn {
    margin-top: 3.125rem;
  }
}
.contact-thanks__btn a {
  width: 100%;
  height: 3.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1987b3;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .contact-thanks__btn a {
    height: 2.75rem;
  }
}

.copyright-contact-thanks {
  margin-top: 1.75rem;
}
@media screen and (min-width: 768px) {
  .copyright-contact-thanks {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none;
  }
}