@charset "UTF-8";
/* SCSSの読み込み */
@import url(all.css);
/*===============================================
  切り替え用
===============================================*/
html {
  scroll-padding-top: clamp(100px, 7.4324324324vw, 110px);
}

.pc-none {
  display: none !important;
}

a[href^="tel:"] {
  pointer-events: none;
}

/*===============================================
  ページネーション
===============================================*/
/*===============================================
  詳細ページ前後
===============================================*/
/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 1200px;
}

/*===============================================
  header
===============================================*/
#header {
  position: relative;
  z-index: 3;
}
#header:has(.header__logo--oth)::before {
  content: "";
  width: 100%;
  height: calc(100% + 1.2rem);
  background: url(../img/common/header-wave.png) repeat-x center bottom/auto 1.2rem, linear-gradient(to top, transparent 1.1rem, var(--color-white) 1.1rem);
  filter: drop-shadow(0 0 1rem rgba(104, 84, 84, 0.1));
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}
#header .header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: clamp(35px, 2.7322404372vw, 50px);
}
#header .header__inner:has(.header__mail) {
  padding-right: clamp(120px, 9.3333333333vw, 140px);
}
#header .header__inner--ent {
  flex-direction: column;
  row-gap: clamp(16px, 1.1875vw, 19px);
  padding: clamp(24px, 1.875vw, 30px) 0 clamp(44px, 3.4375vw, 55px);
}
#header .header__logo--oth img {
  height: clamp(45px, 3.5151515152vw, 58px);
}
#header .header__logo--ent {
  margin-inline: auto;
  position: relative;
  z-index: 0;
}
#header .header__logo--ent::before {
  content: "";
  width: clamp(684px, 53.4375vw, 855px);
  aspect-ratio: 855/87;
  background: url(../img/entrance/flag-l.png) no-repeat left top/contain, url(../img/entrance/flag-r.png) no-repeat right top/contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  z-index: -2;
}
#header .header__logo--ent img {
  height: clamp(40px, 3.125vw, 50px);
  aspect-ratio: 234/50;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
#header .header__other {
  padding-block: 1rem;
}
#header .header__mail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 0.75em;
  width: clamp(120px, 9.3333333333vw, 140px);
  aspect-ratio: 1;
  background: var(--color-text);
  border-bottom-left-radius: 1rem;
  font-size: clamp(1.4rem, 1.0666666667vw, 1.6rem);
  font-family: var(--font-family-noto);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.5;
  letter-spacing: 0;
  transition: all 0.3s ease-out;
  position: absolute;
  top: 0;
  right: 0;
}
#header .header__mail::before {
  content: "";
  display: block;
  height: 1.25em;
  aspect-ratio: 28/20;
  background: url(../img/common/icon_mail.png) no-repeat center/contain;
}
#header .header__mail > span {
  text-align: center;
  letter-spacing: 0.08em;
  margin-right: -0.08em;
  margin-block: calc((1em - 1lh) / 2);
}
#header .header__mail:hover {
  background: color-mix(in srgb, var(--color-white) 15%, var(--color-text));
}
#header .header__memo {
  font-size: clamp(1.3rem, 1vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-base);
  margin-block: calc((1em - 1lh) / 2);
  position: relative;
}
#header.header--oth {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
}

/*===============================================
  footer
===============================================*/
#footer {
  padding-top: 5rem;
}
#footer::before {
  width: 1080px;
  height: 12.3rem;
  bottom: 2.4rem;
}
#footer .footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  -moz-column-gap: 5rem;
       column-gap: 5rem;
  width: 1080px;
}
#footer .footer__inner > * {
  align-self: flex-start;
}
#footer .footer__other {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: 2rem;
  padding-bottom: 8rem;
}
#footer .footer__logo {
  width: 20.8rem;
  margin-bottom: 1rem;
}
#footer .footer__logo img {
  aspect-ratio: 208/44;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left bottom;
     object-position: left bottom;
}
#footer .footer__ig {
  width: 3.8rem;
}
#footer .footer__link {
  width: 12rem;
  font-size: 1.5rem;
  line-height: 1.86667;
  border-radius: 100vh;
  margin-bottom: 2rem;
}
#footer .copy {
  width: 1080px;
  margin-inline: auto;
  padding: 5rem 0 2.5rem;
}
#footer .copy p {
  text-align: right;
}

/*フッターナビ
-----------------------------*/
.footer-nav__list {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
  gap: 2.3rem 6.5rem;
}
.footer-nav__item {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
  padding-left: 2.5rem;
  position: relative;
  z-index: 0;
}
.footer-nav__item::before {
  content: "";
  width: 1.6rem;
  height: 0.2rem;
  background: var(--color-text);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: -2;
  opacity: 0;
}
.footer-nav__item:has(.current)::before {
  opacity: 1;
}
.footer-nav__link {
  letter-spacing: var(--letter-spacing-base);
  margin-right: calc(var(--letter-spacing-base) * -1);
}

/*コピーライト
-----------------------------*/
.copy {
  padding: 2.9rem 0 1.8rem;
}
.copy p {
  font-size: 1.3rem;
}

/*===============================================
  fixed固定
===============================================*/
/*ページトップ
-----------------------------*/
#pagetop {
  width: clamp(9rem, 25vw - 23rem, 11.6rem);
  bottom: 2rem;
  right: 0.9rem;
}
#pagetop::before {
  width: 86.207%;
  filter: drop-shadow(0 0 0.15rem #fff) drop-shadow(0 0 0.15rem #fff) drop-shadow(0 0 0.15rem #fff);
}

/*サイドボタン
-----------------------------*/
#side {
  bottom: 10px;
  right: 10px;
}

/*===============================================
  visual
===============================================*/
/*共通
-----------------------------*/
.visual {
  padding-top: 0.5rem;
}

/*メインビジュアル
-----------------------------*/
.visual__main {
  justify-content: flex-start;
  max-width: 1920px;
  margin-inline: auto;
  height: clamp(510px, 42.4479166667vw, 815px);
  background: url(../img/visual/mv_bg-pc.png) no-repeat center/contain;
  padding-top: 3px;
}
.visual__main::before {
  height: 88.0982%;
  aspect-ratio: 1010/718;
  background: url(../img/visual/mv_img-pc.png) no-repeat center/contain;
  top: 7.362%;
  right: 5.521%;
}
.visual__main::after {
  content: "";
  height: 21.5951%;
  aspect-ratio: 332/176;
  background: url(../img/visual/mv_deco.png) no-repeat right top/auto 96.591%, url(../img/visual/mv_patfoot.png) no-repeat left bottom/auto 37.059%;
  position: absolute;
  right: 55.9375%;
  bottom: 6.994%;
  z-index: -1;
}
.visual__catch--main {
  width: clamp(420px, 34.8958333333vw, 670px);
  margin-left: clamp(70px, 5.7291666667vw, 110px);
}

/*サブビジュアル
-----------------------------*/
.visual__sub {
  background: url(../img/visual/sv_bg.png) no-repeat center/auto 100%;
  padding: 4.3rem 0 4.7rem;
}
.visual__catch--sub {
  width: calc(100% - 8rem);
  max-width: 150rem;
  height: clamp(300px, 23.4375vw, 450px);
  border-radius: clamp(7px, 0.5208333333vw, 10px);
  outline-width: clamp(7px, 0.5208333333vw, 10px);
  outline-offset: clamp(-10px, -0.5208333333vw, -7px);
}
.visual__catch--sub::after {
  aspect-ratio: 1518/25;
  width: calc(100% + clamp(12px, 0.9375vw, 18px));
}
.visual__catch--sub img {
  width: 47.734%;
  min-width: 537px;
}

/*===============================================
  グローバルナビ
===============================================*/
.gnav:has(+ .header__mail) {
  padding-right: clamp(30px, 2.3391812865vw, 40px);
}
.gnav__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  -moz-column-gap: clamp(30px, 2.3391812865vw, 40px);
       column-gap: clamp(30px, 2.3391812865vw, 40px);
}
.gnav__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: calc(1rem + (1em - 1lh) / 2);
  height: 100%;
  font-size: clamp(1.3rem, 1.0135135135vw, 1.5rem);
  font-family: var(--font-family-noto);
  font-weight: var(--font-weight-bold);
  line-height: clamp(18px, 1.3513513514vw, 20px);
  margin-bottom: calc((1em - 1lh) / 2);
}
.gnav__link .icon {
  height: clamp(39px, 3.0405405405vw, 45px);
  aspect-ratio: 42/45;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  transition: all 0.3s ease-out;
}
.gnav__link .txt {
  display: block;
  text-align: center;
  letter-spacing: var(--letter-spacing-min);
  margin-right: calc(var(--letter-spacing-min) * -1);
  margin-block: auto;
}
.gnav__link:hover .icon {
  transform: translateY(-0.3rem);
}
.gnav__link.current {
  color: var(--color-pink);
}

/*===============================================
  main#container
===============================================*/
/*===============================================
  パンくずリスト
===============================================*/
.breadcrumb {
  font-size: var(--font-size-base);
  line-height: 1.5;
  padding-top: 1.6rem;
}
.breadcrumb__list {
  width: 1080px;
}
.breadcrumb__item::after {
  margin-inline: 1em;
}
.breadcrumb + .section {
  padding-top: 13rem;
}

/*===============================================
  main共通
===============================================*/
.section {
  padding-block: 10rem;
}
.section:has(+ .com-contact) {
  padding-bottom: 15.5rem;
}
.section:first-of-type:not(:has(+ .com-contact))::after, .section--bg::before, .section--bg::after {
  min-width: 1920px;
  height: 3.9rem;
}

.inbox {
  width: 1080px;
}

/*電話番号
-----------------------------*/
/*ボタン
-----------------------------*/
.com-btn {
  height: 6rem;
}
.com-btn--mail {
  -moz-column-gap: 2.2rem;
       column-gap: 2.2rem;
}
.com-btn--mail::before {
  width: 2.8rem;
}
.com-btn--ig {
  -moz-column-gap: 1.8rem;
       column-gap: 1.8rem;
}
.com-btn--ig::before {
  width: 3.2rem;
}

/*テーブル
-----------------------------*/
.com-table {
  font-size: 1.7rem;
  line-height: 1.76471;
}
.com-table tr th {
  width: 45rem;
  text-align: center;
  vertical-align: middle;
  padding: 1.5rem 4rem;
}
.com-table tr td {
  padding: 1.5rem 4rem;
}

/*テキストボックス
-----------------------------*/
.com-text p {
  margin-right: calc(var(--letter-spacing-base) * -1);
}

/*お知らせ
-----------------------------*/
/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-title01 {
  row-gap: 3rem;
  margin-bottom: 5rem;
}
.com-title01 .waa::before {
  width: calc(100% + 15rem);
  height: 5.5rem;
  bottom: calc(-0.6rem + (1lh - 1em) / 2);
}
.com-title01.deco {
  row-gap: 2rem;
}
.com-title01.deco::before {
  height: 5rem;
}
.com-title01--left {
  align-items: flex-start;
  text-align: left;
}
.com-title01--left.deco {
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 4rem;
}
.com-title01--left.deco::before {
  width: auto;
  height: 9.3rem;
  aspect-ratio: 103/93;
  background-image: url(../img/common/deco_ttl-pico2.png);
  position: absolute;
  top: -3rem;
  right: -7rem;
  z-index: -1;
}

/*中タイトル
-----------------------------*/
/*小タイトル
-----------------------------*/
.com-title03--ribbon {
  font-size: 3rem;
  padding-block: 1.3rem;
  margin-bottom: 4.3rem;
}
.com-title03--ribbon > span {
  line-height: 1.4;
}
.com-title03--ribbon::before {
  height: 6.9rem;
}

/*===============================================
  共通セクション
===============================================*/
/*お問い合わせ
-----------------------------*/
.com-contact::before {
  min-width: 1920px;
  height: 8.7rem;
  top: -5.7rem;
}
.com-contact::after {
  width: 88rem;
  height: 21.3rem;
  top: 5rem;
}
.com-contact__title {
  margin-bottom: 5.2rem;
}
.com-contact__title > span {
  line-height: 1.28572;
}
.com-contact__title .sub {
  padding: 1.3rem 2rem;
}
.com-contact__title .sub::before {
  aspect-ratio: 831/66;
  height: calc(100% + 1rem);
}
.com-contact__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 5.8rem;
       column-gap: 5.8rem;
}
.com-contact__text {
  width: 56.2rem;
  background: url(../img/common/contact_bg-box.svg) no-repeat center/100% 100%;
  padding: calc(6rem + (1em - 1lh) / 2) 5rem calc(5.5rem + (1em - 1lh) / 2) 6rem;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 0;
}
.com-contact__text::before {
  content: "";
  width: calc(100% - 1.2rem);
  height: calc(100% - 0.7rem);
  background: url(../img/common/contact_deco-lt.png) no-repeat left top, url(../img/common/contact_deco-rb.png) no-repeat right bottom;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -0.4rem;
  z-index: -2;
}
.com-contact__text p {
  margin-right: -0.02em;
}
.com-contact__btns {
  width: 46rem;
}
.com-contact__btn {
  justify-content: flex-start;
  text-align: left;
  height: auto;
  min-height: 8rem;
  padding: 1.6rem 3rem;
  margin-bottom: 3rem;
}
.com-contact__btn:last-of-type {
  margin-bottom: 0;
}
.com-contact__btn > span {
  width: 65%;
  word-break: keep-all;
}

/*ページ内リンク
-----------------------------*/
.com-links__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 5.4rem;
}
.com-links__inner > * {
  width: 100%;
}
.com-links__text {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.88236;
}
.com-links__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.com-links__item {
  width: 100%;
}

/*===============================================
  エントランスページ
===============================================*/
.entrance {
  display: grid;
  grid-template: repeat(2, 1fr)/repeat(2, 1fr);
  grid-auto-flow: column;
  gap: clamp(25px, 2.0833333333vw, 40px);
  width: calc(100% - 10rem);
  max-width: 1720px;
  min-height: calc(100vh - 6rem - clamp(137px, 10.625vw, 170px));
  margin-inline: auto;
}
.entrance__item {
  padding: calc(clamp(20px, 1.5625vw, 30px) - 1px) calc(clamp(20px, 1.5625vw, 30px) - 1px) calc(clamp(15px, 1.0416666667vw, 20px) - 1px);
}
.entrance__item::before {
  height: clamp(26px, 2.03125vw, 39px);
  top: clamp(-23px, -1.1979166667vw, -16px);
}
.entrance__item--hidden::after {
  font-size: clamp(3.2rem, 2.5vw, 4.8rem);
}
.entrance__item--home {
  grid-row: span 2;
}
.entrance__item--home .entrance__image {
  aspect-ratio: 78/47;
  min-height: 72%;
}
.entrance__item--home .entrance__title {
  min-height: 28%;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 5px;
}
.entrance__item--home .entrance__title .main {
  font-size: 3.25em;
}
.entrance__item--home .entrance__title .sub {
  font-size: 2.25em;
}
.entrance__image {
  aspect-ratio: 78/22;
  max-width: 100%;
  min-height: 78%;
}
.entrance__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.entrance__image::after {
  width: 115.385%;
  aspect-ratio: 30/7;
  bottom: 0;
  margin-bottom: -3.5898%;
}
.entrance__image--official::after {
  margin-bottom: -13.3334%;
}
.entrance__title {
  justify-content: flex-start;
  align-items: center;
  min-height: 22%;
  font-size: clamp(1rem, 0.8333333333vw, 1.6rem);
  gap: 1em;
  padding-top: clamp(15px, 1.0416666667vw, 20px);
}
.entrance__title .main {
  font-size: 2.5em;
}
.entrance__title .sub {
  font-size: 1.375em;
}

/*===============================================
  トップページ
===============================================*/
/*先住猫の性格からおすすめの猫種が分かる！
おすすめ猫種診断
-----------------------------*/
.top-bnr--line {
  padding: 13rem 0 clamp(100px, 7.8125vw, 130px);
}
.top-bnr--line::before {
  height: 3.3rem;
}
.top-bnr__box {
  padding: 5rem 5rem 4.8rem;
  border-radius: 1rem;
  box-shadow: 0 0 0 0.4rem var(--color-pink) inset;
}
.top-bnr__box--style01::before {
  width: 60.6rem;
  height: 9.1rem;
  left: calc(50% + 0.5rem);
  bottom: -0.5rem;
}
.top-bnr__box--style01::after {
  content: "";
  width: 93rem;
  height: 9.1rem;
  background: url(../img/index/deco_bnr-tora.png) no-repeat left bottom/contain, url(../img/index/deco_bnr-mike.png) no-repeat right bottom/contain;
  position: absolute;
  left: calc(50% + 0.5rem);
  bottom: -0.5rem;
  transform: translateX(-50%);
  z-index: -1;
}
.top-bnr__box--style02::before {
  width: 63.4rem;
  height: 9.8rem;
  top: -4.8rem;
}
.top-bnr__box--style02::after {
  width: calc(100% - 11rem);
  height: 21.8rem;
  bottom: -3rem;
}
.top-bnr__title {
  row-gap: 3.4rem;
  margin-bottom: 3.6rem;
}
.top-bnr__title .sub {
  padding: 1.6rem 4.8rem;
  border-radius: 100vh;
}
.top-bnr__title .sub img {
  height: 2.8rem;
}
.top-bnr__title .sub::after {
  width: 4.4rem;
  height: 1.6rem;
}
.top-bnr__title .main img {
  height: 6.2rem;
}
.top-bnr__title .main::after {
  width: 8.8rem;
  right: -10rem;
  bottom: -1rem;
}
.top-bnr__btn {
  width: 28rem;
  margin-inline: auto;
}

/*2匹目のお迎えをお考えの方へ
こんなお悩みありませんか？
-----------------------------*/
.top-worries {
  padding: 11rem 0 8rem;
}
.top-worries::before {
  content: "";
  width: 1228px;
  aspect-ratio: 1228/660;
  background: url(../img/index/bg_worries.png) no-repeat center/contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 0;
}
.top-worries::after {
  width: 96.6rem;
  height: 16.4rem;
  top: 11.8rem;
}
.top-worries__title {
  margin-bottom: 6.5rem;
}
.top-worries__title > span:last-of-type::after {
  width: calc(100% + 17rem);
  height: 10.7rem;
  bottom: calc(-1.7rem + (1lh - 1em) / 2);
}
.top-worries__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4rem;
}
.top-worries__list:has(.top-worries__item:nth-of-type(3)) {
  justify-content: space-between;
}
.top-worries__item:first-of-type:not(:last-of-type) {
  margin-top: 7rem;
}
.top-worries__item:last-of-type:nth-of-type(3) {
  margin-top: 5rem;
}
.top-worries__balloon {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.72728;
  letter-spacing: -0.04em;
}
.top-worries__balloon p {
  margin-right: 0.04em;
  word-break: keep-all;
}
.top-worries__balloon--style01 {
  width: 34rem;
  aspect-ratio: 340/136;
  padding: 0.9rem 0 0 1.7rem;
}
.top-worries__balloon--style01::before {
  -webkit-mask: url(../img/index/bg_worries01.svg) no-repeat center/contain;
          mask: url(../img/index/bg_worries01.svg) no-repeat center/contain;
}
.top-worries__balloon--style01::after {
  content: "";
  width: 4.7rem;
  aspect-ratio: 47/30;
  background: url(../img/index/balloon_worries01.svg) no-repeat left bottom/100%;
  position: absolute;
  left: 9.6rem;
  bottom: -3rem;
  z-index: -1;
}
.top-worries__balloon--style02 {
  width: 32.2rem;
  aspect-ratio: 322/146;
  padding-top: 2.1rem;
}
.top-worries__balloon--style02::before {
  -webkit-mask: url(../img/index/bg_worries02.svg) no-repeat center/contain;
          mask: url(../img/index/bg_worries02.svg) no-repeat center/contain;
}
.top-worries__balloon--style02::after {
  content: "";
  width: 3.1rem;
  aspect-ratio: 31/32;
  background: url(../img/index/balloon_worries02.svg) no-repeat left bottom/100%;
  position: absolute;
  left: 14rem;
  bottom: -3.2rem;
  z-index: -1;
}
.top-worries__balloon--style03 {
  width: 33.7rem;
  aspect-ratio: 337/156;
  padding: 1.7rem 0 0 1rem;
}
.top-worries__balloon--style03::before {
  -webkit-mask: url(../img/index/bg_worries03.svg) no-repeat center/contain;
          mask: url(../img/index/bg_worries03.svg) no-repeat center/contain;
}
.top-worries__balloon--style03::after {
  content: "";
  width: 4.2rem;
  aspect-ratio: 42/30;
  background: url(../img/index/balloon_worries03.svg) no-repeat right bottom/100%;
  position: absolute;
  right: 12rem;
  bottom: -2.9rem;
  z-index: -1;
}
.top-worries__image {
  text-align: center;
}
.top-worries__image--img01 {
  margin-top: 2rem;
}
.top-worries__image--img01 img {
  width: 28rem;
}
.top-worries__image--img02 {
  margin-top: 5rem;
}
.top-worries__image--img02 img {
  width: 22.2rem;
}
.top-worries__image--img03 {
  margin-top: 3rem;
}
.top-worries__image--img03 img {
  width: 19.5rem;
}
.top-worries__image img {
  height: 22.2rem;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right bottom;
     object-position: right bottom;
}

/*お客様評価全国1位※
KittysRiyがお手伝いします!
-----------------------------*/
.top-about {
  padding: 15rem 0 14rem;
}
.top-about::before {
  content: "";
  -webkit-mask: url(../img/index/frame_about-top.png) no-repeat center top/max(1920px, 100%) 6rem, linear-gradient(to bottom, transparent 6rem, #fff 6rem);
          mask: url(../img/index/frame_about-top.png) no-repeat center top/max(1920px, 100%) 6rem, linear-gradient(to bottom, transparent 6rem, #fff 6rem);
  background: url(../img/index/bg_about-top.png) no-repeat center top/cover;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.top-about__title {
  margin-bottom: 4rem;
}
.top-about__title::before {
  width: 44rem;
  height: 5.2rem;
  top: -6.3rem;
}
.top-about__memo {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.6;
}
.top-about__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4.5rem;
  position: relative;
  z-index: 0;
}
.top-about__inner::before {
  content: "";
  width: 1330px;
  height: calc(100% - 8rem);
  min-height: 20rem;
  background: url(../img/common/deco_bg01.png) no-repeat left bottom, url(../img/common/deco_bg02.png) no-repeat right top;
  position: absolute;
  left: calc(50% + 5.6rem);
  bottom: -1.7rem;
  transform: translateX(-50%);
  z-index: -2;
}
.top-about__image {
  width: 48.8rem;
  -webkit-mask: url(../img/common/frame_img01.svg) no-repeat center/100% 100%;
          mask: url(../img/common/frame_img01.svg) no-repeat center/100% 100%;
}
.top-about__image img {
  aspect-ratio: 1.2842105263;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-about__text {
  width: 50%;
  margin-top: calc(4.5rem + (1em - 1lh) / 2);
  position: relative;
  z-index: 0;
}
.top-about__text::after {
  content: "";
  aspect-ratio: 165/118;
  height: 11.8rem;
  background: url(../img/common/cat01.png) no-repeat right bottom/contain;
  position: absolute;
  top: calc(100% + 11px + (1em - 1lh) / 2);
  right: clamp(-5rem, -50vw + 55rem, -10rem);
  z-index: -2;
}
.top-about__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-top: 8rem;
}
.top-about__btn {
  width: 38rem;
}

/*現在販売中の子猫一覧
-----------------------------*/
.top-list {
  padding-top: 7rem;
}
.top-list::before {
  width: 76rem;
  height: 23.3rem;
  top: 4.5rem;
}
.top-list__title {
  margin-bottom: 6rem;
}
.top-list__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}
.top-list__image {
  padding: calc(1rem - 1px) calc(1rem - 1px) 0;
}
.top-list__image img {
  aspect-ratio: 1.3647058824;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.top-list__heading {
  font-size: 1.7rem;
  line-height: 1.47059;
  padding: 1.5rem 1rem;
}
.top-list__data {
  padding: 2rem calc(2rem - 1px) 2.4rem;
}
.top-list__btn {
  width: 38rem;
  margin: 6rem auto 0;
}

/*リンクセクション
-----------------------------*/
.top-links {
  padding-top: 13rem;
}
.top-links__items {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4rem 6rem;
}
.top-links__item {
  width: 43.9rem;
  min-height: 39.5rem;
  background: url(../img/index/bg_link-box.svg) no-repeat center/100% 100%;
  padding: 5rem 8rem;
}
.top-links__item::after {
  width: 7.2rem;
  right: 1.4rem;
  bottom: 2.5rem;
}
.top-links__image {
  margin-bottom: 1.6rem;
}
.top-links__heading {
  font-size: 3.6rem;
  line-height: 1.16667;
}

/*お知らせ
-----------------------------*/
.top-news {
  padding: 8rem 0 9rem;
}
.top-news:has(+ .com-contact) {
  padding-bottom: 14.5rem;
}
.top-news__box {
  display: grid;
  grid-template-columns: 28rem 1fr;
  align-items: flex-start;
  gap: 5rem 6rem;
}
.top-news__title {
  width: 24.1rem;
  aspect-ratio: 241/196;
  justify-content: center;
  background: url(../img/index/bg_news-ttl.png) no-repeat center/contain;
  margin-top: 6.2rem;
  padding-bottom: 1.4rem;
  margin-inline: auto;
  margin-bottom: 0;
}
.top-news__title::before {
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.2rem);
}
.top-news__list,
.top-news .com-empty {
  grid-row: span 2;
  margin-top: 5.6rem;
}
.top-news .com-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100% - 6.2rem);
  margin-top: auto;
}
.top-news__btn {
  align-self: flex-start;
}

/*===============================================
  KittysRiyについて
===============================================*/
/*信頼と実績
-----------------------------*/
.about-achievement:has(+ .about-voice) {
  padding-bottom: 2rem;
}
.about-achievement__inner {
  min-height: 38rem;
  padding-left: 54rem;
  padding-block: 7rem;
}
.about-achievement__inner::after {
  width: 100%;
  height: 19.9rem;
  bottom: -3.3rem;
}
.about-achievement__image {
  position: absolute;
  top: 0;
  left: 0;
}
.about-achievement__image img {
  aspect-ratio: 1.2842105263;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about-achievement__image img {
  -webkit-mask: url(../img/common/frame_img01.svg) no-repeat center/100% 100%;
          mask: url(../img/common/frame_img01.svg) no-repeat center/100% 100%;
}
.about-achievement__image::before {
  width: calc(100% + 21.2rem);
  height: 19rem;
  top: -5.2rem;
}
.about-achievement__box {
  padding-top: 7.2rem;
}
.about-achievement__box::before {
  width: 117.2rem;
  aspect-ratio: 1172/674;
  top: -9.5rem;
}
.about-achievement__heading {
  margin-bottom: 4rem;
}
.about-achievement__heading::before {
  width: 47.2rem;
  height: 5.2rem;
  top: -2.6rem;
}
.about-achievement__heading > span::before {
  width: calc(100% + 15.5rem);
  height: 7.5rem;
  bottom: calc(-0.8rem + (1lh - 1em) / 2);
}
.about-achievement__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem;
}

/*ご好評の声を多数いただいています！
-----------------------------*/
.about-voice {
  padding-bottom: 13rem;
}
.about-voice__title .b {
  font-size: 4.8rem;
  line-height: 1.25;
}
.about-voice__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 5rem 3rem;
}
.about-voice__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: 2.8rem;
  width: 34rem;
  padding: calc(4rem - 1px) calc(2rem - 1px) calc(4.5rem - 1px);
}
.about-voice__item::before {
  content: "";
  width: 5rem;
  aspect-ratio: 50/27;
  background: var(--color-text);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  z-index: -2;
}
.about-voice__item::after {
  content: "";
  width: 5rem;
  aspect-ratio: 50/27;
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 0.15rem);
  z-index: -2;
}
.about-voice__item p {
  text-align: center;
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  margin-block: calc((1em - 1lh) / 2);
}
.about-voice__btn {
  width: 38rem;
  margin: 8.2rem auto 0;
}

/*愛情を込めたブリーディング
-----------------------------*/
.about-breathing {
  padding-bottom: 11rem;
}
.about-breathing::before {
  min-width: 1920px;
  height: 3.9rem;
}
.about-breathing__inner {
  display: grid;
  grid-template: auto 1fr/52rem 45rem;
  justify-content: space-between;
  align-items: flex-start;
}
.about-breathing__thumb {
  grid-row: span 2;
}
.about-breathing__thumb img {
  -webkit-mask: url(../img/common/frame_img02.svg) no-repeat center/100% 100%;
          mask: url(../img/common/frame_img02.svg) no-repeat center/100% 100%;
}
.about-breathing__thumb::after {
  width: 11.5rem;
  aspect-ratio: 115/158;
  background-position: left bottom;
  left: -6.4rem;
  bottom: 0.7rem;
}
.about-breathing__box {
  grid-column: span 2;
  padding-top: 7rem;
  padding-inline: 14rem;
}
.about-breathing__box::after {
  width: 118rem;
  height: 18rem;
  bottom: -3rem;
}
.about-breathing__images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  margin-bottom: 4rem;
}
.about-breathing__body {
  text-align: center;
  font-size: var(--font-size-h6);
  line-height: 2.11112;
}

/*安心のサポート体制
-----------------------------*/
.about-support {
  min-height: 61.5rem;
  padding-top: 12.5rem;
}
.about-support__inner {
  min-height: 33.1rem;
  padding-left: 54rem;
}
.about-support__image {
  width: 45rem;
  position: absolute;
  top: 0;
  left: 4rem;
}
.about-support__image img {
  aspect-ratio: 1.3595166163;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.about-support__image img {
  -webkit-mask: url(../img/common/frame_img02.svg) no-repeat center/100% 100%;
          mask: url(../img/common/frame_img02.svg) no-repeat center/100% 100%;
}
.about-support__image::after {
  width: calc(100% + 12.4rem);
  height: 15.4rem;
  bottom: -1.8rem;
}

/*===============================================
  2匹目を迎える方へ
===============================================*/
/*2匹目を迎える際の注意点
-----------------------------*/
.guide-note::after {
  width: 1080px;
  height: 15.6rem;
  bottom: 10rem;
}
.guide-note:has(.guide-note__item:last-of-type:nth-of-type(3n)) {
  padding-bottom: 15rem;
}
.guide-note:has(.guide-note__item:last-of-type:nth-of-type(3n))::after {
  bottom: -2rem;
}
.guide-note__title {
  row-gap: 2.5rem;
}
.guide-note__title .mid {
  font-size: 5rem;
  line-height: 1.2;
}
.guide-note__title .b {
  font-size: 5.2rem;
  line-height: 1.15385;
}
.guide-note__text {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.88236;
}
.guide-note__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6rem 3rem;
  padding-top: 8rem;
}
.guide-note__item {
  width: 34rem;
  min-height: 40rem;
}
.guide-note__item::before {
  height: 5.6rem;
  font-size: 3.2rem;
  padding-top: 1.2rem;
  left: 50%;
  top: -3rem;
  transform: translateX(-50%);
}
.guide-note__heading {
  height: 14rem;
  padding: 1.6rem 3rem 0;
}
.guide-note__heading > span {
  word-break: keep-all;
}
.guide-note__body {
  line-height: 1.75;
  padding: calc(3rem + (1em - 1lh) / 2) 1.8rem;
}
.guide-note__body p {
  word-break: break-all;
  line-break: anywhere;
}

/*先住猫との顔合わせのポイント
-----------------------------*/
.guide-point__title {
  row-gap: 2.5rem;
}
.guide-point__title .mid {
  font-size: 5rem;
  line-height: 1.2;
}
.guide-point__title .b {
  font-size: 5.2rem;
  line-height: 1.15385;
}
.guide-point__text {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.88236;
}
.guide-point__list {
  padding-top: 6rem;
}
.guide-point__list::before {
  width: 1050px;
  height: 18.2rem;
  top: -14.7rem;
}
.guide-point__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  margin-bottom: 5rem;
}
.guide-point__item:nth-of-type(2n) {
  flex-direction: row-reverse;
}
.guide-point__image {
  width: 52rem;
  flex-shrink: 0;
}
.guide-point__image img {
  aspect-ratio: 1.4189944134;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.guide-point__num {
  margin-bottom: 1.5rem;
}
.guide-point__num img {
  width: 6.8rem;
}
.guide-point__num::after {
  height: 5.6rem;
  font-size: 3.2rem;
  padding-top: 1.2rem;
}
.guide-point__body {
  font-size: 1.7rem;
  line-height: 1.88236;
}
.guide-point__body .mb {
  margin-bottom: 1em;
}

/*多頭飼いおすすめグッズ3選
-----------------------------*/
.guide-goods__title {
  row-gap: 1.6rem;
}
.guide-goods__title .min {
  font-size: 3.8rem;
  line-height: 1.21053;
}
.guide-goods__title .min.waa::before {
  bottom: calc(1.1rem + (1lh - 1em) / 2);
}
.guide-goods__title .mid {
  font-size: 5rem;
  line-height: 1.2;
}
.guide-goods__text {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.88236;
}
.guide-goods__list {
  padding-top: 6rem;
}
.guide-goods__item {
  display: grid;
  grid-template-columns: 36rem 1fr;
}
.guide-goods__heading {
  min-height: 15.8rem;
}
.guide-goods__heading::before {
  width: 21.6rem;
  left: -1rem;
  bottom: -4.4rem;
}
.guide-goods__heading::after {
  font-size: 4.5rem;
  left: 0.5rem;
  bottom: 1.2rem;
}
.guide-goods__body {
  padding: calc(3rem - 1px + (1em - 1lh) / 2) calc(6rem - 1px) calc(3rem - 1px + (1em - 1lh) / 2) 4rem;
  line-height: 1.75;
}

/*===============================================
  子猫情報
===============================================*/
/*一覧
-----------------------------*/
.info-list__links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem 2.4rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.info-list__link {
  width: 25.2rem;
}
.info-list__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  padding-top: 6rem;
}
.info-list__image {
  padding: calc(1rem - 1px) calc(1rem - 1px) 0;
}
.info-list__image img {
  aspect-ratio: 1.3647058824;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.info-list__heading {
  font-size: 1.7rem;
  line-height: 1.47059;
  padding: 1.5rem 1rem;
}
.info-list__data {
  padding: 2rem calc(2rem - 1px) 2.4rem;
}

/*詳細
-----------------------------*/
.info-detail__inner {
  display: grid;
  grid-template-columns: 51rem 1fr;
  align-items: flex-start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.info-detail__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.info-detail__image--main {
  aspect-ratio: 51/37;
}

/*===============================================
  おすすめ猫種診断
===============================================*/
/*おすすめ猫種診断
-----------------------------*/
/*===============================================
  お迎えの流れ
===============================================*/
/*お迎えの流れ
-----------------------------*/
.flow-list__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  position: relative;
  z-index: 0;
}
.flow-list__item:last-of-type .flow-list__inner {
  padding-bottom: 13rem;
}
.flow-list__item:last-of-type::before {
  content: "";
  width: 11.9rem;
  aspect-ratio: 119/106;
  background: url(../img/flow/deco_flow.png) no-repeat center/contain;
  position: absolute;
  right: 2rem;
  bottom: 0.9rem;
  z-index: -2;
}
.flow-list__item:nth-of-type(2n) {
  flex-direction: row-reverse;
}
.flow-list__item:nth-of-type(2n)::before {
  right: calc(50% + 4rem);
}
.flow-list__item::after {
  height: 10.1rem;
  margin-block: 2rem;
}
.flow-list__image {
  width: 52rem;
}
.flow-list__image img {
  aspect-ratio: 1.4189944134;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.flow-list__inner {
  width: calc(100% - 56rem);
}
.flow-list__num {
  margin-bottom: 1.5rem;
}
.flow-list__num img {
  width: 6.8rem;
}
.flow-list__num::after {
  height: 5.6rem;
  font-size: 3.2rem;
  padding-top: 1.2rem;
}
.flow-list__body {
  font-size: 1.7rem;
  line-height: 1.88236;
}
.flow-list__body .mb {
  margin-bottom: 1em;
}
.flow-list__box {
  width: 100%;
  padding-top: 5rem;
}
.flow-list__box::before {
  width: 101rem;
  height: 11.8rem;
  top: 3.6rem;
}
.flow-list__subttl {
  font-size: 4rem;
}
.flow-list__subttl > span {
  line-height: 1.25;
}
.flow-list__subttl .waa::before {
  bottom: calc(0.2rem + (1lh - 1em) / 2);
}
.flow-list__subttl .b {
  font-size: 4.8rem;
  line-height: 1;
}
.flow-list__types {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5rem 14.5rem;
}
.flow-list__type {
  width: 37rem;
}
.flow-list__thumb {
  margin-bottom: -5rem;
}
.flow-list__label {
  margin-bottom: 2.5rem;
}
.flow-list__value {
  text-align: center;
  font-size: var(--font-size-h6);
  line-height: 1.77778;
  word-break: keep-all;
}
.flow-list__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  padding-top: 5rem;
}
.flow-list__btn {
  justify-content: flex-start;
  text-align: left;
  width: 46rem;
  height: auto;
  min-height: 8rem;
  padding: 1.6rem 3rem;
}
.flow-list__btn > span {
  width: 65%;
  word-break: keep-all;
}
.flow-list__method {
  padding-top: 2rem;
}
.flow-list__caption {
  font-size: 2.5rem;
  padding: 0.75rem 1rem;
}
.flow-list__caption > span {
  line-height: 1.2;
}
.flow-list__group dt {
  padding-top: 2rem;
  margin-bottom: 1.5rem;
}

/*お引渡し後のアフターサポート
-----------------------------*/
.flow-support {
  padding-top: 11.5rem;
}
.flow-support__inner::before {
  content: "";
  width: 113.8rem;
  height: calc(100% + 2rem);
  background: url(../img/common/deco_bg02.png) no-repeat left top, url(../img/common/deco_bg01.png) no-repeat right bottom;
  position: absolute;
  left: calc(50% + 7.2rem);
  top: -4rem;
  transform: translateX(-50%);
  z-index: -2;
}
.flow-support__inner::after {
  content: "";
  width: 105.5rem;
  height: 23.6rem;
  background: url(../img/common/cat04.png) no-repeat left bottom/13.7rem, url(../img/common/deco_paws.png) no-repeat right top/11.3rem;
  position: absolute;
  left: calc(50% - 0.7rem);
  bottom: -1.6rem;
  transform: translateX(-50%);
  z-index: -1;
}
.flow-support__title {
  row-gap: 1.9rem;
  font-size: 3.8rem;
}
.flow-support__title > span {
  line-height: 1.57895;
}
.flow-support__title .b {
  font-size: 5rem;
  line-height: 1.2;
}
.flow-support__text {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.88236;
}
.flow-support__text .mb {
  margin-bottom: 2.2rem;
}

/*===============================================
  ブリーダーご挨拶
===============================================*/
/*性格と愛らしさを大切にしたブリーディングを
-----------------------------*/
.breeder-greeting__title {
  font-size: 4.6rem;
}
.breeder-greeting__title > span {
  line-height: 1.08696;
}
.breeder-greeting__title .min {
  font-size: 4rem;
  line-height: 1;
}
.breeder-greeting__inner {
  padding: calc(5rem - 1px) calc(6rem - 1px) calc(4rem - 1px);
}
.breeder-greeting__inner::before {
  width: 23.9rem;
  aspect-ratio: 239/123;
  background-size: 12.3rem, 8.9rem;
  background-position: left bottom, right bottom 1.2rem;
  left: 5.6rem;
  bottom: 1rem;
}
.breeder-greeting__text {
  text-align: center;
}
.breeder-greeting__name {
  margin: 3.6rem 0 0 auto;
}
.breeder-greeting__name dt {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.breeder-greeting__name dd {
  font-size: 2.6rem;
}

/*基本情報
-----------------------------*/
/*===============================================
  お知らせ
===============================================*/
/* お知らせ 一覧
-----------------------------*/
/* お知らせ 詳細
-----------------------------*/
.news-detail__box {
  padding: 4rem 5rem;
}

/*タグリスト
-----------------------------*/
/*===============================================
  お問い合わせ
===============================================*/
.contact-form__table {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
.contact-form__table tr th {
  width: 36rem;
  text-align: left;
  line-height: 2.375;
  padding-inline: 3rem;
}
.contact-form__table tr th .optional-mark,
.contact-form__table tr th .required-mark {
  margin-top: 0.5rem;
}
.contact-form__table tr td {
  vertical-align: middle;
  line-height: 2.375;
  padding-inline: 3rem;
}
.contact-form .contact-submits-wrap > * {
  margin: 20px 15px 0;
}

/*===============================================
  お問い合わせ完了
===============================================*/
.contact-complete__text {
  text-align: center;
}

/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-policy__box {
  padding: 4rem 5rem;
}

/*===============================================
  サイトマップ
===============================================*/
.sitemap-list__items {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 20px 80px;
}
.sitemap-list__item:first-of-type {
  grid-column: span 2;
}
.sitemap-list__link {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  padding: 15px 20px;
}

/*===============================================
  404エラー
===============================================*/