@charset "utf-8";

/* =========================================================
   dog salon coron
   ページ地色 = 明るいグレー / 文字と線 = 黒。写真だけが色を持つ。
   ========================================================= */

:root {
  --ink: #1a1a1a;          /* 見出し・線・ボタン地 */
  --ink-soft: #8a8a8a;     /* 本文 */
  --paper: #f2f2f2;        /* ページ地色 */
  --white: #ffffff;
  --line: #d8d8d8;         /* 罫線・メーターの下地 */
  --line-2: #c4c4c4;       /* 非アクティブのドット */
  --scrim: rgba(20, 20, 20, .38);
  --inner: 884px;
  --narrow: 690px;
  --r-lg: 30px;
  --r-sm: 10px;
  --r-mv: 24px;
  --en: "Sorts Mill Goudy", "Times New Roman", serif;
  --ja: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* ---------- base ---------- */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--ja);
  font-size: 14px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img { display: block; max-width: 100%; }
a { color: inherit; transition: opacity .5s ease; }
a:hover { opacity: .5; }
h1, h2, h3, p, dl, dt, dd, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font-family: inherit; }

.is-sp { display: none; }
@media screen and (max-width: 767px) {
  .is-pc { display: none; }
  .is-sp { display: block; }
}

/* ---------- 共通パーツ：矢印 ---------- */

.arw {
  display: block;
  position: relative;
  width: 57px;
  height: 40px;
  color: inherit;
}
.arw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.arw::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: rotate(-30deg);
}
.arw--back { transform: scaleX(-1); }
.arw--white { color: var(--white); }

/* ---------- 共通パーツ：丸アイコン ---------- */

.rnd {
  --s: 50px;
  display: block;
  width: var(--s);
  height: var(--s);
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.rnd::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--s) * .32);
  width: 1px;
  height: calc(var(--s) * .36);
  background: currentColor;
}
.rnd::after {
  content: "";
  position: absolute;
  width: calc(var(--s) * .18);
  height: 1px;
  left: calc(50% - var(--s) * .18);
  background: currentColor;
  transform-origin: 100% 50%;
}
.rnd--down::after { top: calc(var(--s) * .68); transform: rotate(45deg); }
.rnd--up::after { top: calc(var(--s) * .32); transform: rotate(-45deg); }

/* ---------- スクロール出現 ---------- */

html.js .rise {
  opacity: 0;
  transform: translate3d(0, 80px, 0);
  transition: opacity 1s ease, transform 1s cubic-bezier(.165, .84, .44, 1);
}
html.js .rise[data-delay="1"] { transition-delay: .05s; }
html.js .rise[data-delay="2"] { transition-delay: .1s; }
html.js .rise.is-on { opacity: 1; transform: translateZ(0); }

/* =========================================================
   ヘッダー
   ========================================================= */

.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 180px;
  padding: 0 60px 0 100px;
}

.hd__brand {
  font-weight: 400;
  text-align: center;
  color: var(--ink);
}
.hd__brand a { text-decoration: none; display: block; }
.hd__brand-sub {
  display: block;
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: .42em;
  text-indent: .42em;
  margin-bottom: 7px;
}
.hd__brand-main {
  display: block;
  font-family: var(--en);
  font-size: 26px;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1;
}

.hd__nav { display: flex; align-items: center; }
.hd__nav a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--en);
  letter-spacing: .15em;
  font-size: 14px;
  position: relative;
}
.hd__nav a + a { margin-left: 40px; }
.hd__nav small { display: none; }

.hd__burger {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.hd__burger span {
  display: block;
  width: 25px;
  height: 1px;
  background: var(--ink);
  transition: all .5s ease;
}
.hd__burger span + span { margin-top: 8px; }

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

/* =========================================================
   メインビジュアル
   ========================================================= */

.mv { position: relative; }

.mv__stage { position: relative; height: 590px; }

.mv__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.mv__shot.is-on { opacity: 1; }

.mv__frame {
  display: block;
  position: absolute;
  top: 0;
  left: 300px;
  right: 0;
  height: 590px;
  overflow: hidden;
  border-top-left-radius: var(--r-mv);
  border-bottom-left-radius: var(--r-mv);
}
.mv__frame img { width: 100%; height: 100%; object-fit: cover; }

.mv__title {
  position: absolute;
  top: 50%;
  left: 45px;
  z-index: 1;
  width: 240px;
  text-align: center;
  transform: translateY(-50%);
}
.mv__mark { color: var(--ink); }
.mv__mark-sub {
  display: block;
  font-family: var(--en);
  font-size: 11px;
  letter-spacing: .5em;
  text-indent: .5em;
  margin-bottom: 16px;
}
.mv__mark-main {
  display: block;
  font-family: var(--en);
  font-size: 46px;
  line-height: 1;
  letter-spacing: .12em;
  text-indent: .12em;
}
.mv__addr {
  font-family: var(--en);
  font-size: 10px;
  line-height: 2;
  letter-spacing: .2em;
  color: var(--ink);
  margin-top: 28px;
}

.mv__scroll {
  position: absolute;
  bottom: 0;
  left: 100px;
  z-index: 1;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 0;
  color: var(--ink);
  text-decoration: none;
}

.mv__meta {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px 0 300px;
  margin-top: 30px;
  font-family: var(--en);
}
.mv__caption {
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: .3em;
  font-size: 10px;
}
.mv__count {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--ink);
}
.mv__bar {
  display: block;
  width: 58px;
  height: 1px;
  background: var(--line);
  margin: 0 25px;
  position: relative;
}
.mv__bar > span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 33.33%;
  height: 1px;
  background: var(--ink);
  transition: width .5s ease;
}

/* =========================================================
   セクション見出し
   ========================================================= */

.sec__ttl {
  text-align: center;
  color: var(--ink);
  font-weight: 400;
}
.sec__main {
  display: block;
  font-family: var(--ja);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .2em;
  text-indent: .2em;
}
.sec__main::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  margin: 24px auto 0;
}
.sec__sub {
  display: block;
  margin-top: 20px;
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
}

/* =========================================================
   ABOUT
   ========================================================= */

.intro { padding: 180px 0 0; position: relative; }

.intro__label {
  position: absolute;
  top: 180px;
  left: 70px;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink);
}

.intro__lead { text-align: center; margin-top: 60px; }
.intro__lead p {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: .2em;
  line-height: 2.5;
}

.intro__note {
  max-width: var(--inner);
  margin: 46px auto 0;
  padding: 0 30px;
  text-align: center;
  font-size: 14px;
  line-height: 2.4;
  letter-spacing: .08em;
}

/* ---------- 2枚のカード ---------- */

.gate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 30px;
  margin-top: 170px;
}
.gate__item {
  position: relative;
  width: calc(50% - 17.5px);
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gate__item > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--white);
  position: relative;
}
.gate__item > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim);
}
.gate__item img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gate__ttl {
  position: relative;
  z-index: 2;
  text-align: center;
  font-weight: 400;
}
.gate__main {
  display: block;
  font-family: var(--ja);
  font-size: 27px;
  line-height: 1;
  letter-spacing: .2em;
  text-indent: .2em;
}
.gate__main::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--white);
  margin: 22px auto 20px;
}
.gate__sub {
  display: block;
  font-family: var(--en);
  font-size: 13px;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
}
.gate__tag {
  position: absolute;
  z-index: 2;
  top: 25px;
  right: 25px;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .2em;
}
.gate__item .arw {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  right: 30px;
}

/* =========================================================
   FLOW
   ========================================================= */

.flow { padding: 160px 0 0; }
.flow__body {
  max-width: var(--inner);
  margin: 0 auto;
  padding: 70px 30px 0;
}
.flow__item {
  display: flex;
  border-top: 1px solid var(--line);
  padding: 28px 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .1em;
}
.flow__item:last-of-type { border-bottom: 1px solid var(--line); }
.flow__item dt {
  min-width: 245px;
  display: flex;
  align-items: baseline;
  color: var(--ink);
}
.flow__no {
  font-family: var(--en);
  font-size: 20px;
  letter-spacing: .1em;
  margin-right: 18px;
}
.flow__name { font-size: 15px; letter-spacing: .16em; }
.flow__item dd { width: 100%; }
.flow__note {
  margin-top: 32px;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .06em;
}

/* =========================================================
   MENU
   ========================================================= */

.price { padding: 160px 0 0; }
.price__body {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 70px 30px 0;
}
.price__row {
  display: flex;
  border-top: 1px solid var(--line);
  padding: 24px 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .1em;
}
.price__row:last-of-type { border-bottom: 1px solid var(--line); }
.price__row dt {
  min-width: 185px;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: .16em;
}
.price__row dt span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.price__row dd { width: 100%; }
.price__breed { font-size: 13px; }
.price__fee { margin-top: 6px; color: var(--ink); }
.price__fee span { display: inline-block; margin-right: 28px; }
.price__fee span:last-child { margin-right: 0; }

.price__sub {
  margin-top: 70px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--ink);
  text-align: center;
}
.price__sub::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  margin: 18px auto 0;
}
.opt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  margin-top: 26px;
}
.opt li {
  display: flex;
  justify-content: space-between;
  width: calc(50% - 20px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink);
}
.price__note {
  margin-top: 34px;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .06em;
}

/* =========================================================
   PHOTO
   ========================================================= */

.gallery { padding: 160px 0 90px; overflow: hidden; }
.gallery__outer {
  max-width: 990px;
  margin: 75px auto 0;
  position: relative;
}
.gallery__view { overflow: visible; }
.gallery__track {
  display: flex;
  transition: transform .8s cubic-bezier(.165, .84, .44, 1);
}
.gallery__cell { flex: 0 0 100%; }
.gallery__frame {
  display: block;
  position: relative;
  margin: 0 35px;
  aspect-ratio: 920 / 560;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__dots {
  display: flex;
  position: absolute;
  bottom: -45px;
  left: 0;
  padding-left: 35px;
}
.gallery__dots li + li { margin-left: 14px; }
.gallery__dots button {
  display: block;
  border: 0;
  padding: 0;
  width: 58px;
  height: 1px;
  font-size: 0;
  background: var(--line-2);
  cursor: pointer;
  transition: background .4s ease;
}
.gallery__dots li.is-on button { background: var(--ink); }
.gallery__nav {
  position: absolute;
  bottom: -30px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}
.gallery__nav button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: opacity .5s ease;
}
.gallery__nav button:hover { opacity: .5; }
.gallery__nav .arw { width: 38px; height: 10px; }
.gallery__nav .arw::after { width: 9px; }

/* =========================================================
   SHOP
   ========================================================= */

.info { padding: 160px 0 0; }
.info__body {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 120px 30px 0;
}
.info__body dl {
  display: flex;
  line-height: 2;
  font-size: 14px;
  letter-spacing: .1em;
}
.info__body dl + dl { margin-top: 25px; }
.info__body dt { min-width: 185px; color: var(--ink); }
.info__body dd { width: 100%; }
.info__body dd a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* ---------- 店舗写真スライド（外観・内装） ---------- */

.shop {
  max-width: 990px;
  margin: 75px auto 0;
  position: relative;
}
.shop__view { overflow: hidden; }
.shop__track {
  display: flex;
  transition: transform .8s cubic-bezier(.165, .84, .44, 1);
}
.shop__cell { flex: 0 0 100%; }
.shop__frame {
  display: block;
  position: relative;
  margin: 0 35px;
  aspect-ratio: 920 / 560;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.shop__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop__cap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 20px 35px 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .1em;
}
.shop__tag {
  flex: none;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--en);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
}
.shop__dots {
  display: flex;
  position: absolute;
  bottom: -45px;
  left: 0;
  padding-left: 35px;
}
.shop__dots li + li { margin-left: 14px; }
.shop__dots button {
  display: block;
  border: 0;
  padding: 0;
  width: 58px;
  height: 1px;
  font-size: 0;
  background: var(--line-2);
  cursor: pointer;
  transition: background .4s ease;
}
.shop__dots li.is-on button { background: var(--ink); }
.shop__nav {
  position: absolute;
  bottom: -30px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}
.shop__nav button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: opacity .5s ease;
}
.shop__nav button:hover { opacity: .5; }
.shop__nav .arw { width: 38px; height: 10px; }
.shop__nav .arw::after { width: 9px; }

/* =========================================================
   CONTACT
   ========================================================= */

.contact { padding: 160px 0; }
.contact__body {
  max-width: var(--narrow);
  margin: 0 auto;
  padding: 70px 30px 0;
}
.contact__lead {
  text-align: center;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .1em;
  margin-bottom: 50px;
}

.form__row {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.form__row:last-of-type { border-bottom: 1px solid var(--line); }
.form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 205px;
  padding-top: 15px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink);
}
.form__req,
.form__any {
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 8px;
  border-radius: 2px;
  line-height: 1;
}
.form__req { color: var(--white); background: var(--ink); }
.form__any { color: var(--ink-soft); border: 1px solid var(--line); }

.form input,
.form select,
.form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.8;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 18px;
}
.form textarea { resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form ::placeholder { color: #bdbdbd; }
.form__row.is-error input,
.form__row.is-error select,
.form__row.is-error textarea { border-color: var(--ink); background: #fbfbfb; }

.form__agree {
  margin-top: 30px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.9;
}
.form__agree label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.form__agree input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  accent-color: #1a1a1a;
  padding: 0;
  border-radius: 0;
}
.form__agree.is-error span { color: var(--ink); text-decoration: underline; }

.form__demo {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .06em;
}
.form__submit { margin-top: 34px; text-align: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 88px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--white);
  font-size: 16px;
  letter-spacing: .2em;
  text-indent: .2em;
  cursor: pointer;
  transition: opacity .5s ease;
}
.btn:hover { opacity: .5; }
.btn .arw {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -20px;
}
.form__done {
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--ink);
}

/* =========================================================
   電話バンド
   ========================================================= */

.call {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 375px;
  overflow: hidden;
  text-align: center;
}
.call__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .48);
}
.call__inner { position: relative; z-index: 1; }
.call__lead {
  color: var(--white);
  font-size: 14px;
  letter-spacing: .2em;
}
.call__btn { margin-top: 30px; }
.call__btn a {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0 20px 24px;
  color: var(--white);
  text-decoration: none;
}
/* 枠で囲まず、1pxの下線＋右端のはねで受ける */
.call__btn a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.call__btn a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 1px;
  background: currentColor;
  transform-origin: 100% 50%;
  transform: rotate(-30deg);
}
.call__en {
  font-family: var(--en);
  font-size: 20px;
  letter-spacing: .1em;
  margin-bottom: -.5em;
}
.call__num {
  font-size: 30px;
  margin-left: 20px;
  letter-spacing: .1em;
}
.call__limit {
  color: var(--white);
  font-size: 14px;
  letter-spacing: .2em;
  margin-top: 25px;
}

/* =========================================================
   フッター
   ========================================================= */

.ft {
  display: flex;
  align-items: center;
  padding: 60px 80px 80px;
  background: var(--white);
  position: relative;
}
.ft__mark {
  width: 128px;
  flex: 0 0 auto;
  margin-left: 160px;
  text-align: center;
  color: var(--ink);
}
.ft__mark-sub {
  display: block;
  font-family: var(--en);
  font-size: 9px;
  letter-spacing: .42em;
  text-indent: .42em;
  margin-bottom: 10px;
}
.ft__mark-main {
  display: block;
  font-family: var(--en);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;
}
.ft__body { color: var(--ink); }
.ft__addr {
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: .2em;
  line-height: 2;
}
.ft__demo {
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.ft__copy {
  display: block;
  margin-top: 46px;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: .2em;
}
.ft__top { position: absolute; bottom: 80px; right: 85px; }
.ft__top a {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 0;
  color: var(--ink);
  text-decoration: none;
}

/* =========================================================
   スマホ固定ボタン / ローディング
   ========================================================= */

.dock { display: none; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  pointer-events: none;
  animation: bootOut .5s ease 1.05s forwards;
}
.boot__mark {
  text-align: center;
  color: var(--ink);
  transform-origin: center bottom;
  animation: wag 1s ease 0s infinite;
}
.boot__mark span:first-child {
  display: block;
  font-family: var(--en);
  font-size: 10px;
  letter-spacing: .42em;
  text-indent: .42em;
  margin-bottom: 10px;
}
.boot__mark span:last-child {
  display: block;
  font-family: var(--en);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;
}
.boot.is-off { opacity: 0; visibility: hidden; }

@keyframes wag {
  0% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}
@keyframes bootOut {
  to { opacity: 0; visibility: hidden; }
}

/* =========================================================
   タブレット（〜1100px）
   ========================================================= */

@media screen and (max-width: 1100px) {
  .hd { height: 130px; padding: 0 30px 0 40px; }
  .hd__nav a + a { margin-left: 26px; }
  .hd__brand-main { font-size: 22px; }

  .mv__stage { height: 480px; }
  .mv__frame { left: 250px; height: 480px; }
  .mv__title { left: 22px; width: 208px; }
  .mv__mark-main { font-size: 36px; }
  .mv__mark-sub { font-size: 9px; margin-bottom: 12px; }
  .mv__addr { font-size: 9px; letter-spacing: .14em; }
  .mv__scroll { left: 40px; }
  .mv__meta { padding: 0 60px 0 250px; }

  .intro { padding-top: 140px; }
  .intro__label { top: 140px; left: 24px; }
  .gate { margin-top: 130px; }
  .gate__item { height: 320px; }
  .flow, .price, .info { padding-top: 130px; }
  .shop { max-width: 700px; }
  .gallery { padding: 130px 0 90px; }
  .contact { padding: 130px 0; }
  .flow__item dt { min-width: 200px; }
  .ft { padding: 60px 40px 80px; }
  .ft__mark { margin-left: 80px; }
  .ft__top { right: 40px; }
}

/* =========================================================
   スマートフォン（〜767px）
   ========================================================= */

@media screen and (max-width: 767px) {
  body { padding-bottom: 68px; }

  /* ヘッダー */
  .hd { height: 88px; padding: 0 25px; }
  .hd__brand-main { font-size: 20px; }
  .hd__brand-sub { font-size: 8px; margin-bottom: 6px; }

  .hd__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 130px 50px 0;
    background: var(--ink);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .5s ease;
    overflow-y: auto;
  }
  .hd__nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .hd__nav a { color: var(--white); font-size: 20px; }
  .hd__nav a + a { margin-left: 0; margin-top: 27px; }
  .hd__nav small {
    display: block;
    color: var(--white);
    font-family: var(--en);
    font-size: 9px;
    letter-spacing: .2em;
    margin-top: 75px;
  }
  .hd__burger.is-open span { background: var(--white); }
  .hd__burger.is-open span:nth-child(1) { transform: rotate(45deg) translate3d(6.5px, 6.5px, 0); }
  .hd__burger.is-open span:nth-child(2) { opacity: 0; }
  .hd__burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate3d(6.5px, -6.5px, 0); }

  /* メインビジュアル */
  .mv__stage { height: 385px; }
  .mv__frame {
    left: 77px;
    height: 385px;
    border-top-left-radius: var(--r-sm);
    border-bottom-left-radius: var(--r-sm);
  }
  .mv__title {
    left: 9px;
    width: 68px;
    text-align: center;
  }
  .mv__mark-sub { font-size: 7px; letter-spacing: .22em; text-indent: .22em; margin-bottom: 8px; }
  .mv__mark-main { font-size: 20px; letter-spacing: .06em; text-indent: .06em; }
  /* 英字住所は77pxの帯に収まらないため非表示（SHOPとフッターに掲載） */
  .mv__addr { display: none; }
  .mv__scroll { left: 24px; width: 29px; height: 29px; }
  .mv__scroll .rnd { --s: 29px; }
  .mv__meta { justify-content: flex-end; margin-top: 17px; padding: 0 0 0 77px; }
  .mv__caption { display: none; }
  .mv__bar { width: 30px; margin: 0 15px; }

  /* 見出し */
  .sec__main { font-size: 20px; }
  .sec__main::after { width: 15px; margin-top: 12px; }
  .sec__sub { font-size: 9px; margin-top: 12px; }

  /* ABOUT */
  .intro { padding-top: 100px; }
  .intro__label { top: 100px; left: 20px; font-size: 8px; }
  .intro__lead { margin-top: 50px; }
  .intro__lead p { font-size: 13px; }
  .intro__note {
    margin-top: 34px;
    padding: 0 30px;
    text-align: left;
    font-size: 13px;
    line-height: 2.15;
  }

  .gate { margin-top: 100px; padding: 0 30px; }
  .gate__item { width: 100%; height: 188px; border-radius: var(--r-sm); }
  .gate__item + .gate__item { margin-top: 20px; }
  .gate__main { font-size: 18px; }
  .gate__main::after { margin-top: 12px; margin-bottom: 12px; }
  .gate__sub { font-size: 10px; }
  .gate__tag { font-size: 8px; top: 20px; right: 15px; }
  .gate__item .arw { bottom: 15px; right: 15px; }
  .arw { width: 29px; height: 20px; }
  .arw::after { width: 8px; }

  /* FLOW */
  .flow { padding-top: 100px; }
  .flow__body { padding: 30px 30px 0; }
  .flow__item {
    display: block;
    padding: 22px 0;
    font-size: 12px;
    line-height: 2.2;
  }
  .flow__item dt { min-width: 0; margin-bottom: 4px; }
  .flow__no { font-size: 17px; margin-right: 14px; }
  .flow__name { font-size: 14px; }
  .flow__note { font-size: 12px; line-height: 2.1; }

  /* MENU */
  .price { padding-top: 100px; }
  .price__body { padding: 30px 30px 0; }
  .price__row { display: block; padding: 20px 0; font-size: 12px; }
  .price__row dt { min-width: 0; font-size: 14px; margin-bottom: 6px; }
  .price__row dt span { display: inline; margin-left: 10px; font-size: 11px; }
  .price__breed { font-size: 12px; }
  .price__fee span { display: block; margin: 0; }
  .price__sub { margin-top: 50px; font-size: 13px; }
  .opt { gap: 0; margin-top: 20px; }
  .opt li { width: 100%; padding: 12px 0; font-size: 12px; }
  .price__note { font-size: 12px; line-height: 2.1; }

  /* PHOTO */
  .gallery { padding: 100px 0 80px; }
  .gallery__outer { max-width: 350px; margin-top: 56px; }
  .gallery__frame { margin: 0 10px; border-radius: var(--r-sm); }
  .gallery__dots { bottom: -35px; padding-left: 10px; }
  .gallery__dots li + li { margin-left: 5px; }
  .gallery__dots button { width: 30px; }
  .gallery__nav { bottom: -22px; gap: 15px; }
  .gallery__nav .arw { width: 19px; height: 8px; }
  .gallery__nav .arw::after { width: 6px; }

  /* SHOP */
  .info { padding-top: 90px; }
  .shop { max-width: 350px; margin-top: 56px; }
  .shop__frame { margin: 0 10px; border-radius: var(--r-sm); }
  .shop__cap { margin: 14px 10px 0; gap: 10px; font-size: 12px; line-height: 1.8; }
  .shop__tag { padding: 4px 10px; font-size: 10px; }
  .shop__dots { bottom: -35px; padding-left: 10px; }
  .shop__dots li + li { margin-left: 5px; }
  .shop__dots button { width: 30px; }
  .shop__nav { bottom: -22px; gap: 15px; }
  .shop__nav .arw { width: 19px; height: 8px; }
  .shop__nav .arw::after { width: 6px; }
  .info__body { padding: 76px 30px 0; }
  .info__body dl { display: block; font-size: 12px; line-height: 2.3; }
  .info__body dt { min-width: 0; }
  .info__body dl + dl { margin-top: 18px; }

  /* CONTACT */
  .contact { padding: 90px 0 100px; }
  .contact__body { padding: 30px 30px 0; }
  .contact__lead { font-size: 13px; margin-bottom: 34px; }
  .form__row { display: block; padding: 18px 0; }
  .form__label { min-width: 0; padding-top: 0; margin-bottom: 10px; font-size: 13px; }
  .form input, .form select, .form textarea { font-size: 16px; padding: 11px 14px; }
  .form__agree { font-size: 12px; text-align: left; }
  .form__agree label { align-items: flex-start; }
  .form__agree input { margin-top: 4px; }
  .btn { height: 64px; border-radius: var(--r-sm); font-size: 14px; }
  .btn .arw { right: 15px; margin-top: -10px; }
  .form__done { font-size: 13px; }

  /* 電話バンド */
  .call { height: 230px; }
  .call__lead { font-size: 12px; letter-spacing: .1em; }
  .call__btn { margin-top: 22px; }
  .call__btn a { padding: 0 14px 15px; }
  .call__btn a::after { width: 9px; }
  .call__en { font-size: 12px; }
  .call__num { font-size: 19px; margin-left: 12px; }
  .call__limit { font-size: 12px; letter-spacing: .1em; margin-top: 16px; }

  /* フッター */
  .ft { display: block; padding: 100px 25px 25px; }
  .ft__mark { margin: 60px auto 0; }
  .ft__body { margin: 0; }
  .ft__addr { font-size: 9px; }
  .ft__demo { font-size: 11px; }
  .ft__copy { margin-top: 34px; font-size: 9px; }
  .ft__top { bottom: 25px; right: 25px; }
  .ft__top a { width: 40px; height: 40px; }
  .ft__top .rnd { --s: 40px; }

  /* 固定ボタン */
  .dock {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    gap: 10px;
    padding: 10px 12px;
    background: var(--white);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .4s ease;
  }
  .dock.is-on { transform: none; }
  .dock__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--r-sm);
    font-size: 13px;
    letter-spacing: .1em;
    text-decoration: none;
  }
  .dock__btn--form { background: var(--ink); color: var(--white); }
  .dock__btn--tel { border: 1px solid var(--ink); color: var(--ink); }

  .boot__mark span:last-child { font-size: 28px; }
}

/* 375px 微調整 */
@media screen and (max-width: 380px) {
  .mv__title { left: 8px; width: 62px; }
  .mv__mark-main { font-size: 17px; }
  .gallery__outer { max-width: 330px; }
  .shop { max-width: 330px; }
}

/* =========================================================
   モーション抑制
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rise { opacity: 1; transform: none; transition: none; }
  .mv__shot { transition: none; }
  .gallery__track { transition: none; }
  .shop__track { transition: none; }
  .boot, .boot__mark { animation: none; }
  .boot { display: none; }
  .dock { transition: none; }
}