@charset "UTF-8";
/* 定数
******s******************************/
/* フォントファミリー */
/* フォント */
/* フォントカラー */
/* カラー */
/* コンテンツ幅 */
/* 幅：FV */
/* 幅：about */
/* サイズ */
/* メディアクエリ
************************************/
/* 共通設定
************************************/
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a3636;
  background-color: #e9f6f8;
  min-width: 375px;
  position: relative; /* PageTopボタン用 */
}
body.is-fixed {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  font-weight: 400;
}

.inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .inner {
    max-width: 1584px;
    padding-left: 36px;
    padding-right: 36px;
  }
}

.button {
  color: #4a3636;
  border: 2px solid currentColor;
  border-radius: 40px;
  background: #ffffff;
  font-weight: 700;
  display: inline-block;
  -webkit-box-shadow: 0 4px 0 0 #4a3636;
          box-shadow: 0 4px 0 0 #4a3636;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  padding: 4px 22px 6px;
  font-size: 16px;
}
@media screen and (min-width: 1000px) {
  .button {
    font-size: 20px;
    border-width: 3px;
    padding: 7px 37px 9px;
  }
}
.button:hover {
  background-color: #ffee56;
}

.sns__icon {
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
.sns__icon:hover {
  -webkit-filter: brightness(0.8);
          filter: brightness(0.8);
}

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

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

.text-inline {
  display: inline-block;
}

.link-underline {
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}
@media screen and (min-width: 1000px) {
  .link-underline {
    text-underline-offset: 0.1em;
  }
}
.link-underline:hover {
  color: #67b0c7;
}

/* header
************************************/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
}

.header__inner {
  padding: 16px 20px;
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1000px) {
  .header__inner {
    padding: 14px 24px;
  }
}

.header__logo img {
  width: 210px;
}
@media screen and (min-width: 1000px) {
  .header__logo img {
    width: 183px;
  }
}

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

.header__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.header__nav-link {
  font-size: 12px;
  -webkit-transition: color 0.3s, text-decoration-line 0.3s;
  transition: color 0.3s, text-decoration-line 0.3s;
}
.header__nav-link:hover {
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
  color: #67b0c7;
}

@media screen and (min-width: 1000px) {
  .header__nav-button {
    margin-left: 4px;
    font-size: 14px;
    border-width: 2px;
    padding: 4px 22px 6px;
  }
}

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

.drawer-icon {
  width: 32px;
  height: 27px;
  position: relative;
  /* ドロワーアイコンがクリックされたら✕印にする */
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(1) {
  width: 32px;
  top: 12px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(2) {
  display: none;
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(3) {
  display: none;
}
.drawer-icon.is-checked .drawer-icon__bar:nth-of-type(4) {
  top: 12px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.drawer-icon__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  border-radius: 1.5px;
  background: #4a3636;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.drawer-icon__bar:nth-of-type(1) {
  width: 25.6px;
}
.drawer-icon__bar:nth-of-type(2) {
  width: 4.8px;
  left: 27.2px;
}
.drawer-icon__bar:nth-of-type(3) {
  top: 12px;
}
.drawer-icon__bar:nth-of-type(4) {
  top: 24px;
}

/* ドロワー
************************************/
.drawer-content {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* アドレスバーを除いた実際の表示領域の高さ */
  padding-top: 146px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); /* 上に隠す */
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  background-color: #ffffff;
}
.drawer-content.is-checked {
  -webkit-transform: translateY(0);
          transform: translateY(0); /* ドロワー表示 */
}

.drawer-content__menu {
  text-align: center;
  /* 文字をフワっと表示させる */
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%); /* 上にずらしておく */
  opacity: 0; /* 非表示にしておく */
  -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
  transition: opacity 0.2s, -webkit-transform 0.4s;
  transition: opacity 0.2s, transform 0.4s;
  transition: opacity 0.2s, transform 0.4s, -webkit-transform 0.4s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.drawer-content__menu.is-checked {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0); /* ドロワー表示 */
}

.drawer-content__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 36px;
}

.drawer-content__link {
  font-size: 14px;
  -webkit-transition: color 0.3s, text-decoration-line 0.3s;
  transition: color 0.3s, text-decoration-line 0.3s;
}
.drawer-content__link:hover {
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
  color: #67b0c7;
}

.drawer-content__button {
  margin-top: 2px;
}

.main {
  padding-top: 64px;
}

/* FV
************************************/
.fv {
  position: relative;
  z-index: 0; /* 疑似要素の基準を規定 */
}
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* 背景となるようにfvより小さい値 */
  background: url(../img/fv_bg_sp.png) no-repeat center center/cover;
  border-radius: 0 0 24px 24px;
  max-height: 78.0281690141%; /* calc100%（親要素の高さ）に対して、375px幅のときの背景高さの割合を掛ける */
}
@media screen and (min-width: 1000px) {
  .fv::before {
    background: url(../img/fv_bg_pc.png) no-repeat center center/cover;
    border-radius: 0 0 40px 40px;
    max-height: 88.4109916368%;
  }
}

.fv__inner {
  padding-top: 17px;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 1000px) {
  .fv__inner {
    padding-top: 34px;
  }
}

.fv__sub-title-text {
  text-align: center;
  text-shadow: 0 0 30px #fff;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 14px;
  line-height: 1.25; /* 17.5px */
}
@media screen and (min-width: 1000px) {
  .fv__sub-title-text {
    font-size: 24px;
    font-weight: 500;
  }
}

.fv__main-title {
  margin-top: 20px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .fv__main-title {
    margin-top: 24px;
  }
}

.fv__main-title-img1 {
  width: 100%;
  max-width: 335px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .fv__main-title-img1 {
    max-width: 520px;
  }
}

.fv__main-title-img2 {
  margin-top: 12px;
  width: 100%;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .fv__main-title-img2 {
    margin-top: 16px;
    max-width: 356px;
  }
}

.fv__images {
  margin-top: 11px;
  position: relative;
  width: 100%;
  max-width: 335px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .fv__images {
    margin-top: 0;
    max-width: 848px;
  }
}

.fv__smartphone {
  width: 59.7014925373%;
  max-width: 200px;
  padding-top: 30.7462686567%;
  padding-bottom: 3.2835820896%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .fv__smartphone {
    width: 29.4811320755%;
    max-width: 250px;
    padding-top: 3.891509434%;
    padding-bottom: 2.0047169811%;
  }
}

.fv__fukidashi {
  width: 42.3880597015%;
  max-width: 142px;
  position: absolute;
  top: 1.3409961686%;
  left: 0;
}
.fv__fukidashi img {
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .fv__fukidashi {
    width: 28.7735849057%;
    max-width: 244px;
    top: 0;
    left: 4.3632075472%;
  }
}

.fv__present {
  width: 32.8358208955%;
  max-width: 110px;
  position: absolute;
  top: 0;
  right: 7.4626865672%;
  z-index: -1;
}
@media screen and (min-width: 1000px) {
  .fv__present {
    width: 21.2264150943%;
    max-width: 180px;
    top: 3.0357142857%;
    right: 14.9764150943%;
  }
}

.fv__food {
  width: 26.8656716418%;
  max-width: 90px;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (min-width: 1000px) {
  .fv__food {
    width: 25%;
    max-width: 212px;
  }
}

.fv__cat-black {
  width: 18.5074626866%;
  max-width: 62px;
  position: absolute;
  right: 0;
  bottom: 11.1111111111%;
}
@media screen and (min-width: 1000px) {
  .fv__cat-black {
    width: 20.0471698113%;
    max-width: 170px;
    right: 7.429245283%;
    bottom: 10.8928571429%;
  }
}

.fv__cat-brown {
  width: 29.2537313433%;
  max-width: 98px;
  position: absolute;
  bottom: 0;
  right: 2.6865671642%;
}
@media screen and (min-width: 1000px) {
  .fv__cat-brown {
    width: 27.4764150943%;
    max-width: 233px;
    right: 0;
    bottom: -7.8571428571%;
  }
}

.fv__cta {
  width: 47.7611940299%;
  max-width: 160px;
  position: absolute;
  top: 43.2183908046%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 12.8px;
  background: #ffffff;
}
@media screen and (min-width: 1000px) {
  .fv__cta {
    width: 200px;
    max-width: 200px;
    top: 33.125%;
    border-radius: 16px;
  }
}

.fv__cta-title {
  display: block;
  color: #ffffff;
  text-align: center;
  -webkit-font-feature-settings: "pref" on;
          font-feature-settings: "pref" on;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11px, 11px + 1.8 * (100vw - 320px) / 55, 12.8px);
  font-weight: 700;
  padding: 6.4px 9.6px;
  background: linear-gradient(265deg, #ac3790 -3.52%, #d65a5c 44.94%, #f4c06d 92.38%);
  border-radius: 12.8px 12.8px 0 0;
}
@media screen and (min-width: 1000px) {
  .fv__cta-title {
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 16px 16px 0 0;
  }
}

.fv__cta-content {
  padding: 12.8px 14px 19.2px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .fv__cta-content {
    padding: 16px 12px 24px;
  }
}

.fv__cta-application-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-size: clamp(9px, 9px + 3 * (100vw - 320px) / 55, 12px);
}

.fv__cta-application-title {
  border-bottom: 2.4px solid #ce2073;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .fv__cta-application-title {
    font-size: 14px;
  }
}

.fv__cta-application-period {
  margin-top: 6.4px;
  font-weight: 700;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt"; /* 改行されてしまうため微調整 */
}
@media screen and (min-width: 1000px) {
  .fv__cta-application-period {
    margin-top: 8px;
    font-size: 16px;
  }
}

.fv__cta-application-button {
  margin-top: 8.8px;
}
@media screen and (min-width: 1000px) {
  .fv__cta-application-button {
    margin-top: 15px;
  }
}

.fv__button--cta {
  padding: 4px 22px;
  font-size: clamp(9px, 9px + 5 * (100vw - 320px) / 55, 14px);
}
@media screen and (min-width: 1000px) {
  .fv__button--cta {
    font-size: 16px;
  }
}

/* about
************************************/
.about {
  padding-top: 32px;
  position: relative;
  overflow: hidden; /* はみ出した子要素は非表示にする */
  scroll-margin-top: 64px;
}
@media screen and (min-width: 1000px) {
  .about {
    padding-top: 80px;
    scroll-margin-top: 0px;
  }
}

/* 背景装飾（全体） */
.about__bg-decorations {
  position: absolute; /* about基準 */
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about__bg-slope--sp {
  position: absolute;
  bottom: 61.2px;
  left: 0;
  width: 36.8%;
  max-width: 138px;
}
@media screen and (min-width: 1000px) {
  .about__bg-slope--sp {
    width: 28.2407407407%;
    max-width: 427px;
    bottom: 251px;
    left: 6px;
    display: none;
  }
}

.about__inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media screen and (min-width: 1000px) {
  .about__inner {
    max-width: 888px;
  }
}

/* 背景装飾（カード周辺） */
.about__bg-slope--pc {
  position: absolute;
  display: none;
}
@media screen and (min-width: 1000px) {
  .about__bg-slope--pc {
    display: block;
    width: 100%;
    max-width: 427px;
    bottom: -309px;
    left: -415px;
  }
}

.about__bg-diagonal--pc {
  position: absolute;
  display: none;
}
@media screen and (min-width: 1000px) {
  .about__bg-diagonal--pc {
    display: block;
    width: 250px;
    left: -333px;
    top: -20px;
  }
}

.about__bg-wavyline1--pc {
  position: absolute;
  display: none;
}
@media screen and (min-width: 1000px) {
  .about__bg-wavyline1--pc {
    display: block;
    width: 807px;
    right: -878.15px;
    bottom: 202.67px;
  }
}

.about__bg-wavyline2--pc {
  position: absolute;
  display: none;
}
@media screen and (min-width: 1000px) {
  .about__bg-wavyline2--pc {
    display: block;
    width: 807px;
    right: -811.08px;
    bottom: 169.65px;
  }
}

.about__inner-bg-decorations {
  position: absolute; /* about__inner基準 */
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.about__bg-pawpads {
  width: 14.4%;
  max-width: 54px;
  position: absolute;
  top: -1.4124293785%;
  right: 0;
}
@media screen and (min-width: 1000px) {
  .about__bg-pawpads {
    width: 11.2612612613%;
    max-width: 100px;
    top: -80px;
    right: -146.12px;
  }
}

.about__bg-photo-left {
  width: 200px;
  position: absolute;
  top: 55.790960452%;
  left: -140px;
  border-radius: 24px;
}
@media screen and (min-width: 1000px) {
  .about__bg-photo-left {
    width: 480px;
    top: 74px;
    left: -650px;
  }
}

.about__bg-photo-right {
  width: 200px;
  position: absolute;
  top: 38.5593220339%;
  right: -140px;
  border-radius: 24px;
}
@media screen and (min-width: 1000px) {
  .about__bg-photo-right {
    width: 480px;
    top: 73.07px;
    right: -596.2px;
  }
  .about__bg-photo-right img {
    width: 100%;
  }
}

.about__bg-goods-cloth {
  width: 35.4666666667%;
  max-width: 133px;
  position: absolute;
  right: 15.2%;
  bottom: -16.5%; /* calc(-100%  * (53.67px + 65.003px)  / $height-about-card-sp)を微調整 */
  bottom: -118.673px;
}
@media screen and (min-width: 1000px) {
  .about__bg-goods-cloth {
    width: 308px;
    max-width: 308px;
    right: -238px;
    bottom: -79px;
  }
}

.about__bg-goods-button {
  width: 14.328358209%;
  max-width: 48px;
  position: absolute;
  right: 20px;
  bottom: -59.67px;
}
@media screen and (min-width: 1000px) {
  .about__bg-goods-button {
    width: 101px;
    max-width: 101px;
    right: -162px;
    bottom: 127.63px;
  }
}

.about__card {
  background-color: #ffffff;
  padding: 40px 40px;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 1000px) {
  .about__card {
    padding: 40px 114px;
    border-radius: 40px;
  }
}

.about__card-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about__card-decos-pic--left {
  width: 23.8805970149%;
  max-width: 80px;
  border: 3.9px solid #f5f5f5;
  background-color: lightgray;
  -webkit-transform: rotate(-8deg);
          transform: rotate(-8deg);
  position: absolute;
  top: 5%; /* calc(100% * 31.87px / $height-about-card-sp)を微調整 */
  left: 11.25%; /* calc(100% * 33px / $width-about-card-sp)を微調整 */
}
@media screen and (min-width: 1000px) {
  .about__card-decos-pic--left {
    border: 6px solid #f5f5f5;
    width: 15.8018867925%;
    max-width: 134px;
    left: 10.4%;
    top: 5.7%;
  }
}

.about__card-decos-pic--right {
  width: 23.8805970149%;
  max-width: 80px;
  border: 3.9px solid #f5f5f5;
  background-color: lightgray;
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
  position: absolute;
  top: 4.8%; /* calc(100% * 30px / $height-about-card-sp) を微調整 */
  right: 6.6%; /* calc(100% * 19.78px / $width-about-card-sp)を微調整 */
}
@media screen and (min-width: 1000px) {
  .about__card-decos-pic--right {
    border: 6px solid #f5f5f5;
    width: 15.8018867925%;
    max-width: 134px;
    top: 6.5%;
    right: 10.7%;
  }
}

.section-title {
  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;
  gap: 6px;
}
@media screen and (min-width: 1000px) {
  .section-title {
    gap: 8px;
  }
}

.section-title__img {
  width: 37.333px;
  height: 37.333px;
  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;
}
@media screen and (min-width: 1000px) {
  .section-title__img {
    width: 48px;
    height: 48px;
  }
}
.section-title__img img {
  width: 31.111px;
}
@media screen and (min-width: 1000px) {
  .section-title__img img {
    width: 40px;
  }
}
.section-title__img--step img {
  width: 36px;
}
@media screen and (min-width: 1000px) {
  .section-title__img--step img {
    width: 48px;
  }
}

.section-title__text {
  text-align: center;
}

.section-title__en {
  display: block;
  font-family: "Courgette", sans-serif;
  line-height: 1.25; /* 20px */
}
@media screen and (min-width: 1000px) {
  .section-title__en {
    font-size: 20px;
  }
}

.section-title__jp {
  display: block;
  margin-top: 6px;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25; /* 25px */
  -webkit-text-decoration: underline solid #ffee56 6px;
          text-decoration: underline solid #ffee56 6px;
  text-underline-offset: 10px; /* 下線を テキストからどれだけ離すかの指定 */
}
@media screen and (min-width: 1000px) {
  .section-title__jp {
    font-size: 32px;
    -webkit-text-decoration: underline solid #ffee56 8px;
            text-decoration: underline solid #ffee56 8px;
    text-underline-offset: 16px; /* 下線を テキストからどれだけ離すかの指定 */
  }
}

.about__content {
  margin-top: 37px;
}
@media screen and (min-width: 1000px) {
  .about__content {
    margin-top: 52px;
  }
}

.about__content-title--sp {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .about__content-title--sp {
    display: none;
  }
}
.about__content-title--pc {
  display: none;
}
@media screen and (min-width: 1000px) {
  .about__content-title--pc {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
  }
}

.about__content-sentences {
  margin-top: 24px;
}
@media screen and (min-width: 1000px) {
  .about__content-sentences {
    margin-top: 32px;
  }
}

.about__content-sentence {
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .about__content-sentence {
    font-size: 16px;
  }
}
.about__content-sentence--bold {
  font-weight: 700;
}
.about__content-sentence--underline {
  text-decoration-line: underline;
}
.about__content-sentence + .about__content-sentence {
  margin-top: 1.5em;
}
@media screen and (min-width: 1000px) {
  .about__content-sentence + .about__content-sentence {
    margin-top: 1.7em;
  }
}

.about__content-message {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  padding-top: 8px;
  padding-bottom: 6px;
  text-align: center;
  border-bottom: 2px dashed #9ed0e0;
}
@media screen and (min-width: 1000px) {
  .about__content-message {
    margin-top: 32px;
    padding-top: 13px;
    padding-bottom: 9px;
    font-size: 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

.about__content-button {
  margin-top: 24px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .about__content-button {
    margin-top: 32px;
  }
}

.about__arrow {
  text-align: center;
}
.about__arrow img {
  width: 100px;
}
@media screen and (min-width: 1000px) {
  .about__arrow img {
    width: 140px;
  }
}

.about__onomichi {
  margin-top: 101.47px;
  position: relative; /* 重なり順制御でz-indexを定義するため指定 */
  z-index: 2;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .about__onomichi {
    margin-top: 117px;
  }
}
.about__onomichi img {
  width: calc(100% - 20px);
  max-width: 355px;
}
@media screen and (min-width: 1000px) {
  .about__onomichi img {
    max-width: 891px;
  }
}

/* GALLERY(Swiper)
************************************/
.about__gallery {
  margin-top: -2px;
}
@media screen and (min-width: 1000px) {
  .about__gallery {
    margin-top: -6px;
  }
}

.about__gallery-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear; /* autoplayの動きを制御する場合はswiper-wrapperクラス（=gallery__wrapper）に指定 */
}

.about__gallery-slide {
  width: 100px;
}
@media screen and (min-width: 1000px) {
  .about__gallery-slide {
    width: 200px;
  }
}

/* Step(How to Enter)
************************************/
.step {
  padding-top: 64.8px;
  padding-bottom: 37.67px;
  overflow: hidden;
  scroll-margin-top: 64px;
}
@media screen and (min-width: 1000px) {
  .step {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.step__inner {
  position: relative;
}

.step__inner-bg-decorations {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* 背景画像 */
.inner-bg-deco__brown-cat {
  position: absolute;
  width: 28dvw;
  max-width: 105px;
  right: 24px;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__brown-cat {
    width: 15.7407407407dvw;
    max-width: 238px;
    right: 231px;
    top: -30px;
  }
}

.inner-bg-deco__black-cat {
  position: absolute;
  width: 25.3333333333dvw;
  max-width: 95px;
  right: -31px;
  top: 5px;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__black-cat {
    width: 14.1534391534dvw;
    max-width: 214px;
    right: 105px;
    top: -16.03px;
  }
}

.inner-bg-deco__map {
  position: absolute;
  width: 36.5333333333dvw;
  max-width: 137px;
  left: 0;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__map {
    width: 27.7777777778dvw;
    max-width: 420px;
    top: -60px;
    left: 36px;
  }
}

.inner-bg-deco__pawpads1 {
  position: absolute;
  width: 14.6666666667dvw;
  max-width: 55px;
  right: 20px;
  top: 74px;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__pawpads1 {
    width: 6.6137566138dvw;
    max-width: 100px;
    top: 148px;
    right: 36px;
  }
}

.inner-bg-deco__pawpads2 {
  position: absolute;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  width: 14.6666666667dvw;
  max-width: 55px;
  left: 20px;
  top: 549.55px;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__pawpads2 {
    width: 6.6137566138dvw;
    max-width: 100px;
    bottom: 34px;
    left: 36px;
  }
}

.inner-bg-deco__pawpads3 {
  position: absolute;
  -webkit-transform: rotate(180deg) scaleX(-1);
          transform: rotate(180deg) scaleX(-1);
  width: 14.6666666667dvw;
  max-width: 55px;
  right: 20px;
  bottom: 362.33px;
}
@media screen and (min-width: 1000px) {
  .inner-bg-deco__pawpads3 {
    display: none;
  }
}

.step__content {
  margin-top: 43px;
}
@media screen and (min-width: 1000px) {
  .step__content {
    margin-top: 56px;
  }
}

@media screen and (min-width: 1000px) {
  .step__all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 32px;
  }
}

.step__each-step {
  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;
}
@media screen and (min-width: 1000px) {
  .step__each-step {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 320px;
            flex: 0 1 320px;
  }
  .step__each-step:nth-of-type(1) {
    /* STEP01 */
    position: relative;
  }
  .step__each-step:nth-of-type(1)::after {
    content: "";
    position: absolute;
    width: 35.3125%;
    height: 23.596px;
    background: url(../img/step_wave-line_pc.png) no-repeat center center/113px auto;
    right: -48px;
    top: 204px;
  }
  .step__each-step:nth-of-type(3) {
    /* STEP02 */
    /* nth-of-typeはタグ（div)を数えるので3番目 */
    margin-top: 69px;
    position: relative;
  }
  .step__each-step:nth-of-type(3)::after {
    content: "";
    position: absolute;
    width: 35.3125%;
    height: 23.596px;
    background: url(../img/step_wave-line_pc.png) no-repeat center center/113px auto;
    right: -57px;
    top: 136px;
  }
}

.each-step__image {
  max-width: 196px;
}
@media screen and (min-width: 1000px) {
  .each-step__image {
    max-width: 280px;
  }
}

.each-step__text {
  margin-top: 15.5px;
  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;
  gap: 15.8px;
}
@media screen and (min-width: 1000px) {
  .each-step__text {
    margin-top: 24px;
    gap: 18.2px;
  }
}

.each-step__text-title {
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .each-step__text-title {
    font-size: 20px;
  }
}

.each-step__text-detail {
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .each-step__text-detail {
    font-size: 16px;
  }
}
.each-step__text-detail .underline {
  text-decoration-line: underline;
}
.each-step__text-detail .bold {
  font-weight: 700;
}

.each-step__follow {
  margin-top: 15.5px;
  padding: 7px 11px;
  border: 1px solid transparent;
  background-color: #ffffff;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.each-step__follow:hover {
  border-color: #9ed0e0;
  cursor: pointer;
}
.each-step__follow a {
  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;
  gap: 8px;
}

.follow__link-icon {
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 1000px) {
  .follow__link-icon {
    width: 24px;
    height: 24px;
  }
}

.follow__link-text {
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .follow__link-text {
    font-size: 16px;
  }
}

.step__wave-line {
  text-align: center;
  margin-top: 16px;
}
.step__wave-line img {
  width: 7.47px;
}
@media screen and (min-width: 1000px) {
  .step__wave-line {
    display: none;
  }
}

.step__button {
  margin-top: 15px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .step__button {
    margin-top: 47px;
  }
}

/* Prizes
************************************/
.prizes {
  padding-top: 83px;
  scroll-margin-top: 64px;
}
@media screen and (min-width: 1000px) {
  .prizes {
    padding-top: 157.667px;
  }
}

@media screen and (min-width: 1000px) {
  .prizes__inner {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1084px;
    margin-left: auto;
    margin-right: auto;
  }
}

.prizes__title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -63px;
  /* 白いドーム装飾 */
}
.prizes__title::before {
  content: "";
  width: 63.36dvw;
  max-width: 237.6px;
  aspect-ratio: 237.6/83; /* アスペクト比に合わせて高さを指定 */
  background: url(../img/prizes_deco-card_sp.png) no-repeat center center/contain;
  position: absolute;
  top: 63px;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%); /* 要素のサイズ分ずらす */
  z-index: -1;
}
@media screen and (min-width: 1000px) {
  .prizes__title::before {
    background: url(../img/prizes_deco-card_pc.png) no-repeat center center/contain;
    max-width: 365.624px;
    aspect-ratio: 365.624/148.967;
    top: 120.97px;
  }
}
@media screen and (min-width: 1000px) {
  .prizes__title {
    top: -120.97px;
  }
}

.prizes__card {
  background-color: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 59.33px 20px 34.67px;
  position: relative;
}
@media screen and (min-width: 1000px) {
  .prizes__card {
    max-width: 1024px;
    padding: 64.03px 56px 53px;
    /* PC版のトライアングル装飾（左） */
    /* PC版のトライアングル装飾（右） */
  }
}
@media screen and (min-width: 1000px) and (min-width: 1000px) {
  .prizes__card::before {
    content: "";
    width: 30.76171875%;
    max-width: 315px;
    aspect-ratio: 315/86; /* アスペクト比に合わせて高さを指定 */
    background: url(../img/prizes_deco-triangle_pc.png) no-repeat center center/contain;
    position: absolute;
    top: -120.97px;
    left: 0;
  }
}
@media screen and (min-width: 1000px) and (min-width: 1000px) {
  .prizes__card::after {
    content: "";
    width: 30.76171875%;
    max-width: 315px;
    aspect-ratio: 315/86; /* アスペクト比に合わせて高さを指定 */
    background: url(../img/prizes_deco-triangle_pc.png) no-repeat center center/contain;
    position: absolute;
    top: -120.97px;
    right: 0;
    -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
  }
}

.prizes__text {
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .prizes__text {
    font-size: 16px;
  }
}

.prizes__products {
  margin-top: 48px;
}
@media screen and (min-width: 1000px) {
  .prizes__products {
    margin-top: 82px;
    -webkit-column-gap: 32px;
       -moz-column-gap: 32px;
            column-gap: 32px;
    row-gap: 80px;
  }
}

.products__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 15px;
     -moz-column-gap: 15px;
          column-gap: 15px;
  row-gap: 46px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 上２枚のカード定義 */
  /* 下3枚のカード定義 */
}
@media screen and (min-width: 1000px) {
  .products__row--top {
    gap: 32px;
    /* カード幅 */
    /* カード角丸 */
    /* 特典アイコン */
    /* 商品画像 */
    /* テキストエリア */
    /* フォントサイズ */
    /* ズームアイコンエリア */
    /* ズームアイコン */
  }
  .products__row--top .prizes__product {
    width: calc((100% - 32px) / 2);
  }
  .products__row--top .prizes__product-card {
    border-radius: 24px;
  }
  .products__row--top .prizes__product-number {
    width: 100px;
  }
  .products__row--top .prizes__product-image img {
    aspect-ratio: 440/340;
  }
  .products__row--top .prizes__product-textarea {
    aspect-ratio: 440/120;
  }
  .products__row--top .prizes__product-text {
    font-size: 20px;
  }
  .products__row--top .prizes__product-textarea::after {
    width: 100px;
    height: 100px;
  }
  .products__row--top .product__zoom-icon {
    width: 32px;
    right: 12.5px;
    bottom: 14px;
  }
}
.products__row--bottom {
  margin-top: 46px;
}
@media screen and (min-width: 1000px) {
  .products__row--bottom {
    margin-top: 86px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    /* カード幅 */
    /* カード角丸 */
    /* 特典アイコン */
    /* 商品画像 */
    /* テキストエリア */
    /* フォントサイズ */
    /* ズームアイコンエリア */
    /* ズームアイコン */
  }
  .products__row--bottom .prizes__product {
    width: calc((100% - 72px) / 3);
  }
  .products__row--bottom .prizes__product-card {
    border-radius: 16px;
  }
  .products__row--bottom .prizes__product-number {
    width: 80px;
  }
  .products__row--bottom .prizes__product-image img {
    aspect-ratio: 280/240;
  }
  .products__row--bottom .prizes__product-textarea {
    aspect-ratio: 280/80;
  }
  .products__row--bottom .prizes__product-text {
    font-size: 16px;
  }
  .products__row--bottom .prizes__product-textarea::after {
    width: 64px;
    height: 64px;
  }
  .products__row--bottom .product__zoom-icon {
    width: 20.48px;
    right: 8px;
    bottom: 8.96px;
  }
}

.prizes__product {
  width: calc((100% - 15px) / 2);
  margin-bottom: -7px; /* 謎の下部余白調整分 */
  position: relative;
}
@media screen and (min-width: 1000px) {
  .prizes__product {
    /* prizes__productクラスの１番目、２番目のみに適用 */
  }
}

.prizes__product-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  /* ホバー時の枠を内側に付与 */
}
@media screen and (min-width: 1000px) {
  .prizes__product-card {
    border-radius: 16px;
  }
}
.prizes__product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 0 0 2px transparent;
          box-shadow: inset 0 0 0 2px transparent;
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}

.prizes__product-button:hover {
  /* 枠の色 */
  /* 画像 */
  /* 拡大アイコンエリア */
}
.prizes__product-button:hover .prizes__product-card::after {
  -webkit-box-shadow: inset 0 0 0 2px #9ed0e0;
          box-shadow: inset 0 0 0 2px #9ed0e0;
}
.prizes__product-button:hover .prizes__product-image img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.prizes__product-button:hover .prizes__product-textarea::after {
  background-color: #9ed0e0;
}

.prizes__product-number {
  width: 48px;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (min-width: 1000px) {
  .prizes__product-number {
    width: 80px;
  }
}

.prizes__product-image {
  overflow: hidden;
}
.prizes__product-image img {
  aspect-ratio: 160/140;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.prizes__product-textarea {
  background-color: #f5f5f5;
  aspect-ratio: 160/56;
  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;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.prizes__product-textarea::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  background-color: #67b0c7;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
@media screen and (min-width: 1000px) {
  .prizes__product-textarea::after {
    width: 64px;
    height: 64px;
  }
}

.prizes__product-text {
  font-size: 12px;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .prizes__product-text {
    font-size: 16px;
  }
}

.product__zoom-icon {
  position: absolute;
  width: 11.52px;
  right: 5.22px;
  bottom: 6.12px;
  z-index: 1;
}
.product__zoom-icon img {
  display: block;
}

.prizes__button {
  margin-top: 25px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .prizes__button {
    margin-top: 49px;
  }
}

.button--new-post {
  font-size: clamp(12px, 12px + 4 * (100vw - 320px) / 55, 16px);
  padding-left: 24px;
  padding-right: 24px;
}
@media screen and (min-width: 1000px) {
  .button--new-post {
    font-size: 20px;
    padding-left: 37px;
    padding-right: 37px;
  }
}

/* モーダル
************************************/
.prizes-modal {
  z-index: 1000;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 20px;
  left: 20px;
  margin: auto; /* 画面中央に配置 */
  max-width: 336px;
  padding: 0;
  border: none;
  border-radius: 24px;
  overflow: hidden;
}
@media screen and (min-width: 1000px) {
  .prizes-modal {
    max-width: 480px;
  }
}
.prizes-modal::-ms-backdrop {
  /* モーダルの背景を定義 */
  opacity: 0.6;
  background: #000;
}
.prizes-modal::backdrop {
  /* モーダルの背景を定義 */
  opacity: 0.6;
  background: #000;
}

.prizes-modal__image {
  overflow: hidden;
}
.prizes-modal__image img {
  aspect-ratio: 336/210;
  -o-object-fit: cover;
     object-fit: cover;
}

.prizes-modal__textarea {
  text-align: center;
  padding: 39px 20px 0;
  aspect-ratio: 336/270;
}
@media screen and (min-width: 1000px) {
  .prizes-modal__textarea {
    padding: 32px 40px 0;
    aspect-ratio: 480/350;
  }
}

.prizes-modal__title {
  color: #4a3636;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .prizes-modal__title {
    font-size: 20px;
  }
}

.prizes-modal__text {
  margin-top: 12px;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .prizes-modal__text {
    font-size: 16px;
  }
}

.prizes-modal__close-button {
  margin-top: 16px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .prizes-modal__close-button {
    margin-top: 24px;
  }
}

.button--modal-close:focus {
  outline: none;
}
@media screen and (min-width: 1000px) {
  .button--modal-close {
    font-size: 16px;
    border-width: 2px;
    padding: 4px 22px 6px;
  }
}

.no-scroll {
  overflow: hidden;
}

/*PrizesとSpotsの間の装飾
************************************/
.bridge_prizes-spots {
  width: 100%;
  aspect-ratio: 375/260;
  margin-top: -44px;
  background: url(../img/bridge_prizes-spots_pic.png) no-repeat center center/cover;
  position: relative;
  z-index: -1;
}
@media screen and (min-width: 1000px) {
  .bridge_prizes-spots {
    margin-top: 0;
    aspect-ratio: 1512/640;
  }
}

/* SPOTS
************************************/
.spots {
  background-color: #67b0c7;
  position: relative;
  padding-bottom: 19.84px;
  scroll-margin-top: 110px;
}
@media screen and (min-width: 1000px) {
  .spots {
    scroll-margin-top: 184px;
  }
}
.spots::before {
  content: "";
  width: 100%;
  height: 46px; /* 45.714pxだが、境界線を消すため整数 */
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-100%) rotate(180deg);
          transform: translateY(-100%) rotate(180deg);
  background: url(../img/spots_wave_single_sp.png) repeat-x -6px center/96px 46px; /* 背景位置を合わせるため-6px */
}
@media screen and (min-width: 1000px) {
  .spots::before {
    height: 120px;
    background: url(../img/spots_wave_single_sp.png) repeat left center/252px 120px;
    top: 1px;
  }
}
.spots::after {
  content: "";
  width: 100%;
  height: 46px;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  background: url(../img/spots_wave_single_sp.png) repeat-x -4px center/96px 46px; /* 背景位置を合わせるため-4px */
}
@media screen and (min-width: 1000px) {
  .spots::after {
    height: 120px;
    background: url(../img/spots_wave_single_sp.png) repeat left center/252px 120px;
    bottom: 15px;
  }
}

@media screen and (min-width: 1000px) {
  .spots__upper-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
  }
}

.spots__title {
  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;
  gap: 8px;
}
@media screen and (min-width: 1000px) {
  .spots__title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; /* 空きスペースがあったら拡大 */
    -ms-flex-negative: 1;
        flex-shrink: 1; /* スペースが足りなければ縮む */
    -ms-flex-preferred-size: 300px;
        flex-basis: 300px; /* 基本サイズ */
    padding-left: 32px;
    gap: 16px;
  }
}

.spots__title-icon {
  width: 28px;
  height: 28px;
  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;
}
@media screen and (min-width: 1000px) {
  .spots__title-icon {
    width: 56px;
    height: 56px;
  }
}
.spots__title-icon img {
  width: 19.966px;
  height: 19.082px;
}
@media screen and (min-width: 1000px) {
  .spots__title-icon img {
    width: 39.932px;
    height: 38.164px;
  }
}

.spots__title-text {
  color: #ffffff;
  -webkit-font-feature-settings: "pwid" on;
          font-feature-settings: "pwid" on;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 125%; /* 35px */
}
@media screen and (min-width: 1000px) {
  .spots__title-text {
    text-align: center;
    font-size: 40px;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    letter-spacing: 0.26em;
  }
}

.spots__gallery {
  margin-top: 24px;
}
@media screen and (min-width: 1000px) {
  .spots__gallery {
    min-width: 0; /* 親の要素に合わせて縮んでOK */
    margin-top: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; /* 空きスペースがあったら拡大 */
    -ms-flex-negative: 1;
        flex-shrink: 1; /* スペースが足りなかったら縮む */
    -ms-flex-preferred-size: 1188px;
        flex-basis: 1188px; /* 基本サイズ */
    position: relative;
  }
}

.spots__card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  max-height: 600px;
}
@media screen and (min-width: 1000px) {
  .spots__card {
    max-height: 542px;
    border-radius: 24px;
  }
}

.spots__card-image img {
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .spots__card-image img {
    aspect-ratio: 344/240;
  }
}

.spots__card-textarea {
  margin-top: 17px;
  padding-left: 24px;
  padding-right: 24px;
  aspect-ratio: 240/204;
}
@media screen and (min-width: 1000px) {
  .spots__card-textarea {
    margin-top: 24px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

.spots__card-title {
  text-align: center;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .spots__card-title {
    font-size: 20px;
  }
}

.spots__card-text {
  margin-top: 16px;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .spots__card-text {
    margin-top: 24px;
    font-size: 16px;
  }
}

.swiper-pagination {
  display: none;
  font-size: 15px;
  display: none;
  gap: 16px;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spots__gallery-prev,
.spots__gallery-next {
  /* swiperのデフォルト矢印を消去 */
}
.spots__gallery-prev .swiper-navigation-icon,
.spots__gallery-next .swiper-navigation-icon {
  display: none;
}
@media screen and (min-width: 1000px) {
  .spots__gallery-prev,
  .spots__gallery-next {
    width: 80px;
    height: 80px;
    top: auto !important; /* デフォルトで効いているtop指定無効化 */
    bottom: -24px;
    left: -48px !important;
  }
}

@media screen and (min-width: 1000px) {
  .spots__gallery-prev {
    background: url(../img/spots_gallery-prev.png) no-repeat center center/contain;
  }
}

@media screen and (min-width: 1000px) {
  .spots__gallery-next {
    background: url(../img/spots_gallery-next.png) no-repeat center center/contain;
    left: 816px !important;
  }
}
@media (min-width: 1000px) and (max-width: 1200px) {
  .spots__gallery-next {
    background: url(../img/spots_gallery-next.png) no-repeat center center/contain;
    left: 600px !important;
  }
}

.swiper-scrollbar {
  display: none;
}

.spots__bottom-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}
@media screen and (min-width: 1000px) {
  .spots__bottom-block {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 64px;
    gap: 81px;
  }
}

.spots__logo {
  text-align: center;
  position: relative;
}
.spots__logo img {
  width: 255px;
}
@media screen and (min-width: 1000px) {
  .spots__logo img {
    width: 495px;
  }
}

.spots__bg--pawpads {
  position: absolute;
  bottom: 0;
  left: -208px;
}
.spots__bg--pawpads img {
  width: 100px;
}

.spots__new-posts {
  text-align: center;
}

.spots__sub-text {
  color: #ffffff;
  font-size: 11.444px;
}
@media screen and (min-width: 1000px) {
  .spots__sub-text {
    font-size: 16px;
  }
}

.spots__button {
  margin-top: 24px;
}
@media screen and (min-width: 1000px) {
  .spots__button {
    margin-top: 26px;
  }
}

@media screen and (min-width: 1000px) {
  .button--spots {
    margin-left: 10px;
  }
}

/* qa
************************************/
.qa {
  padding-top: 87.9px;
  padding-bottom: 30.67px;
}
@media screen and (min-width: 1000px) {
  .qa {
    padding-top: 225px;
    padding-bottom: 123px;
  }
}

.qa__inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .qa__inner {
    max-width: 1064px;
  }
}

.qa__boxes {
  margin-top: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
@media screen and (min-width: 1000px) {
  .qa__boxes {
    margin-top: 56px;
    gap: 24px;
  }
}

.qa-box {
  border: 2px solid #4a3636;
  border-radius: 12px;
  overflow: hidden;
}
@media screen and (min-width: 1000px) {
  .qa-box {
    border-radius: 16px;
  }
}
.qa-box.is-open .qa-box__head {
  padding-bottom: 10px; /* 回答が開いているときのpadding調整 */
}
@media screen and (min-width: 1000px) {
  .qa-box.is-open .qa-box__head {
    padding-bottom: 22px; /* 回答が開いているときのpadding調整 */
  }
}
.qa-box.is-open .qa-box__head .qa-box__head-icon {
  background: url(../img/qa_close-icon.png) no-repeat center center/contain;
}
.qa-box.is-open .qa-box__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 160px; /* 想定最大行数に合わせた値（QA文量固定のため） */
}

.qa-box__head {
  width: 100%;
  padding: 10px 14px 9px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  background-color: #ffffff;
}
@media screen and (min-width: 1000px) {
  .qa-box__head {
    gap: 16px;
    padding: 20px 22px;
  }
}

.qa-box__head-q {
  display: block;
  color: #9ed0e0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 24px;
  line-height: 125%; /* 30px */
}
@media screen and (min-width: 1000px) {
  .qa-box__head-q {
    font-size: 32px;
  }
}

.qa-box__head-text {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #4a3636;
  text-align: left;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media screen and (min-width: 1000px) {
  .qa-box__head-text {
    font-size: 20px;
  }
}

.qa-box__head-icon {
  display: block;
  width: 26.182px;
  height: 26.182px;
  padding: 3.273px;
  background: url(../img/qa_open-icon.png) no-repeat center center/contain;
}
@media screen and (min-width: 1000px) {
  .qa-box__head-icon {
    width: 48px;
    height: 48px;
  }
}

.qa-box__body {
  /* 初期状態：非表示のため、max-height:0に設定 */
  max-height: 0;
  -webkit-transition: max-height 0.6s ease;
  transition: max-height 0.6s ease;
  overflow: hidden;
}

.qa-box__body-inner {
  /* bodyにpaddingを設定すると高さが残るため、innerに定義 */
  padding: 16px 14px 14px;
  background: #f5f5f5;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .qa-box__body-inner {
    padding: 24px 22px 22px;
  }
}
.qa-box__body-inner .underline {
  text-decoration-line: underline;
}

.qa-box__body-a {
  color: #9ed0e0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 24px;
  line-height: 125%; /* 30px */
}
@media screen and (min-width: 1000px) {
  .qa-box__body-a {
    font-size: 32px;
  }
}

.qa-box__body-text {
  font-size: 14px;
  color: #4a3636;
  text-align: left;
}
@media screen and (min-width: 1000px) {
  .qa-box__body-text {
    font-size: 16px;
  }
}

/* Entryセクション
************************************/
.entry {
  scroll-margin-top: 64px;
}

.entry__inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1000px) {
  .entry__inner {
    max-width: 1064px;
  }
}

.entry__box {
  border: 8px solid #ffffff;
  background: rgba(255, 255, 255, 0.5);
  padding: 16px 15.6px;
}
@media screen and (min-width: 1000px) {
  .entry__box {
    padding: 32px 48px;
  }
}

.section-title__img--entry img {
  width: 100%;
}

.entry__contents {
  margin-top: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
@media screen and (min-width: 1000px) {
  .entry__contents {
    margin-top: 56px;
  }
}

.entry__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #cccccc;
  /* 最後の要素だけ区切り線を透明にする */
}
.entry__content:last-of-type {
  border-bottom: 1px solid transparent;
}
@media screen and (min-width: 1000px) {
  .entry__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-bottom: 12px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
}

.requirement__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media screen and (min-width: 1000px) {
  .requirement__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 240px;
            flex: 0 0 240px;
  }
}

.requirement__title-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #9ed0e0;
}
@media screen and (min-width: 1000px) {
  .requirement__title-dot {
    margin-left: 24px;
  }
}

.requirement__title-text {
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .requirement__title-text {
    font-size: 16px;
  }
}

@media screen and (min-width: 1000px) {
  .requirement__content {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 672px;
            flex: 1 0 672px;
  }
}
.requirement__content p {
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .requirement__content p {
    font-size: 16px;
  }
}
.requirement__content ul {
  font-size: 12px;
  line-height: 1.565;
  list-style: disc;
  padding-left: 1.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
}
@media screen and (min-width: 1000px) {
  .requirement__content ul {
    font-size: 16px;
    line-height: 1.595;
  }
}

/* EntryとContactの間の装飾画像
************************************/
.bridge__entry-contact {
  width: 100%;
  aspect-ratio: 375/99;
  margin-top: 32px;
  background: url(../img/bridge_entry-contant.jpg) no-repeat center center/cover;
}
@media screen and (min-width: 1000px) {
  .bridge__entry-contact {
    margin-top: 120px;
    aspect-ratio: 1512/400;
  }
}

/* Contact
************************************/
.contact {
  background-color: #ffffff;
  padding-top: 40px;
  padding-bottom: 44px;
  scroll-margin-top: 64px;
}
@media screen and (min-width: 1000px) {
  .contact {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.contact__inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 888px;
  margin-left: auto;
  margin-right: auto;
}

.contact__content {
  margin-top: 36px;
}
@media screen and (min-width: 1000px) {
  .contact__content {
    margin-top: 51px;
  }
}

.contact__text {
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 1000px) {
  .contact__text {
    font-size: 16px;
  }
}

.contact__form {
  margin-top: 24px;
}
@media screen and (min-width: 1000px) {
  .contact__form {
    margin-top: 40px;
  }
}

.contact__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}

.form-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 1000px) {
  .form-field {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0;
  }
}

.form-field__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
@media screen and (min-width: 1000px) {
  .form-field__head {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 220px;
            flex: 1 1 220px;
  }
}
@media screen and (min-width: 1000px) {
  .form-field__head--top {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.form-field__label {
  font-size: 14px;
  font-weight: 700;
}
@media screen and (min-width: 1000px) {
  .form-field__label {
    font-size: 16px;
  }
}

.form-field__tag {
  background-color: #ce2073;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

@media screen and (min-width: 1000px) {
  .form-field__item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 628px;
            flex: 1 1 628px;
  }
}

.form-text {
  width: 100%;
  height: 56px;
  padding: 16px;
  font-size: 14px;
  background-color: #f5f5f5;
  border-radius: 8px;
  border: 1px solid transparent;
  -webkit-transition: border-color 0.3s, background-color 0.3s;
  transition: border-color 0.3s, background-color 0.3s;
  /* プレースホルダーの定義 */
  /* フォーカス時の挙動 */
  /* プレースホルダーが非表示 かつ invalidの場合 */
}
@media screen and (min-width: 1000px) {
  .form-text {
    font-size: 16px;
  }
}
.form-text::-webkit-input-placeholder {
  color: #cccccc;
}
.form-text::-moz-placeholder {
  color: #cccccc;
}
.form-text:-ms-input-placeholder {
  color: #cccccc;
}
.form-text::-ms-input-placeholder {
  color: #cccccc;
}
.form-text::placeholder {
  color: #cccccc;
}
.form-text:focus {
  outline: none; /* デフォルトのフォーカスカラー解除 */
  border-color: #9ed0e0;
  background-color: #e9f6f8;
}
.form-text:not(:-moz-placeholder):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.form-text:not(:-ms-input-placeholder):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.form-text:not(:placeholder-shown):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}

.form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* ブラウザ標準のアイコンを非表示にする */
  width: 100%;
  height: 56px;
  padding: 16px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  -webkit-transition: border-color 0.3s, background-color 0.3s;
  transition: border-color 0.3s, background-color 0.3s;
  background: url(../img/contact_option-arrow.png) no-repeat center right 0/52px 56px;
  background-color: #f5f5f5;
  /* フォーカス時の挙動 */
  /* 異常時の挙動 */
}
@media screen and (min-width: 1000px) {
  .form-select {
    font-size: 16px;
  }
}
.form-select:focus {
  outline: none; /* デフォルトのフォーカスカラー解除 */
  border-color: #9ed0e0;
}
.form-select.is-error {
  border-color: #ce2073;
  background-color: #fff0f7;
  background: url(../img/contact_option-arrow-error.png) no-repeat center right 0/52px 56px;
}

.form-field__radios {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}
@media screen and (min-width: 1000px) {
  .form-field__radios {
    height: 56px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.form-radio__input {
  width: 1px; /* 画面上ではほぼ見えないサイズにする */
  height: 1px;
  position: absolute; /* 他の要素と重ならないようにする */
  clip: rect(0, 0, 0, 0); /* 視覚的に完全に非表示にする */
  overflow: hidden; /* 見切れる部分を表示させないようにする */
}
.form-radio__input:checked {
  /* ラジオボタンが選択されているとき */
}
.form-radio__input:checked + .form-radio__text::after {
  /* チェックされたラジオボタンの直後にあるラジオテキストの疑似要素after（＝選択された丸）を表示させる */
  opacity: 1;
}
.form-radio__input:focus {
  /* ラジオボタンがフォーカスされているとき */
}
.form-radio__input:focus + .form-radio__text {
  font-weight: 700;
}
.form-radio__input:focus + .form-radio__text::before {
  /* フォーカスされたラジオボタンの直後にあるラジオテキスト(=.form-radio__text)の疑似要素before（＝外の円）の色を変える */
  border-color: #9ed0e0;
}

.form-radio__text {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
}
@media screen and (min-width: 1000px) {
  .form-radio__text {
    font-size: 16px;
  }
}
.form-radio__text::before, .form-radio__text::after {
  /* 外側の円と中の丸の共通定義 */
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
}
.form-radio__text::before {
  /* 外側の円（ラジオボタンの枠） */
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background-color: #f5f5f5;
  left: 0;
}
.form-radio__text::after {
  /* チェックされたときに出る中の丸 */
  background: #9ed0e0;
  width: 12px;
  height: 12px;
  left: 6px;
  opacity: 0;
}

.form-textarea {
  width: 100%;
  height: 160px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  background-color: #f5f5f5;
  border-radius: 8px;
  border: 1px solid transparent;
  -webkit-transition: border-color 0.3s, background-color 0.3s;
  transition: border-color 0.3s, background-color 0.3s;
  /* プレースホルダーの定義 */
  /* フォーカス時の挙動 */
  /* プレースホルダーが非表示 かつ invalidの場合 */
}
@media screen and (min-width: 1000px) {
  .form-textarea {
    font-size: 16px;
  }
}
.form-textarea::-webkit-input-placeholder {
  color: #cccccc;
}
.form-textarea::-moz-placeholder {
  color: #cccccc;
}
.form-textarea:-ms-input-placeholder {
  color: #cccccc;
}
.form-textarea::-ms-input-placeholder {
  color: #cccccc;
}
.form-textarea::placeholder {
  color: #cccccc;
}
.form-textarea:focus {
  outline: none; /* デフォルトのフォーカスカラー解除 */
  border-color: #9ed0e0;
  background-color: #e9f6f8;
}
.form-textarea:not(:-moz-placeholder):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.form-textarea:not(:-ms-input-placeholder):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.form-textarea:not(:placeholder-shown):invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}

.contact__privacy {
  margin-top: 21px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .contact__privacy {
    margin-top: 40px;
  }
}

.form-checkbox__input {
  width: 1px; /* 画面上ではほぼ見えないサイズにする */
  height: 1px;
  position: absolute; /* 他の要素と重ならないようにする */
  clip: rect(0, 0, 0, 0); /* 視覚的に完全に非表示にする */
  overflow: hidden; /* 見切れる部分を表示させないようにする */
}
.form-checkbox__input:checked {
  /* チェックボックスが選択されているとき */
}
.form-checkbox__input:checked + .form-checkbox__text::after {
  /* チェックされたチェックボックスの直後にあるテキストの疑似要素after（＝チェック）を表示させる */
  opacity: 1;
}
.form-checkbox__input:focus {
  /* チェックボックスがフォーカスされているとき */
}
.form-checkbox__input:focus + .form-checkbox__text::before {
  /* チェックされたチェックボックスの直後にあるテキストの疑似要素before（＝枠）の色を変える */
  border-color: #9ed0e0;
}

.form-checkbox__text {
  position: relative;
  padding-left: 36px;
  font-size: 14px;
}
@media screen and (min-width: 1000px) {
  .form-checkbox__text {
    font-size: 16px;
  }
}
.form-checkbox__text::before, .form-checkbox__text::after {
  /* チェックボックスの枠とチェック共通定義 */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.form-checkbox__text::before {
  /* チェックボックスの枠 */
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: #f5f5f5;
}
.form-checkbox__text::after {
  /* チェックボックスのチェック */
  width: 14px;
  height: 9px;
  left: 5px;
  background: url(../img/contact_check.png) no-repeat center center/contain;
  opacity: 0; /* 初期状態は非表示 */
}
.form-checkbox__text a {
  text-decoration-line: underline;
  font-weight: inherit; /* 親要素を継承 */
}

/* 送信ボタン押下時の異常処理 */
/* 送信ボタン押下され、formにsubmittedクラスが付与されたら */
.submitted {
  /* form内のform-textクラスがinvalidなら異常表示 */
}
.submitted .form-text:invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.submitted .form-select:invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.submitted .form-textarea:invalid {
  border-color: #ce2073;
  background-color: #fff0f7;
}
.submitted .form-checkbox__input:invalid + .form-checkbox__text::before {
  /* チェックボックステキストの疑似要素before（＝枠） */
  border-color: #ce2073;
  background-color: #fff0f7;
}

.link-underline--privacy {
  text-underline-offset: 0.1em;
}

.contact__button {
  margin-top: 24px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .contact__button {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1000px) {
  .button--contact {
    padding: 4px 38px 6px;
    font-size: 16px;
    border-width: 2px;
  }
}

/* Footer
************************************/
.footer {
  padding-top: 40px;
}
@media screen and (min-width: 1000px) {
  .footer {
    padding-top: 120px;
    overflow: hidden;
  }
}

.footer__inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media screen and (min-width: 1000px) {
  .footer__inner {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1084px;
  }
}

.footer__inner-bg-decorations {
  position: absolute; /* inner基準 */
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.footer__bg-pawpads {
  position: absolute;
  display: none;
}
@media screen and (min-width: 1000px) {
  .footer__bg-pawpads {
    display: block;
    width: 100px;
    max-width: 100px;
    top: -40px;
    right: -134px;
  }
}

.footer__sns {
  text-align: center;
}

.footer__sns-text {
  font-family: "Josefin Sans", sans-serif;
  font-size: 20px;
  line-height: 125%; /* 25px */
}
@media screen and (min-width: 1000px) {
  .footer__sns-text {
    font-size: 24px;
  }
}

.footer__sns-icons {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
}

.sns-icon__youtube,
.sns-icon__instagram,
.sns-icon__twitter {
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 1000px) {
  .sns-icon__youtube,
  .sns-icon__instagram,
  .sns-icon__twitter {
    width: 40px;
    height: 40px;
  }
}

.sns-icon__youtube img {
  width: 26.667px;
  display: block;
}
@media screen and (min-width: 1000px) {
  .sns-icon__youtube img {
    width: 33.333px;
  }
}

.sns-icon__instagram img {
  width: 100%;
}

.sns-icon__twitter img {
  width: 100%;
}

.footer__logo {
  margin-top: 14px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .footer__logo {
    margin-top: 41px;
  }
}
.footer__logo img {
  width: 328px;
}
@media screen and (min-width: 1000px) {
  .footer__logo img {
    width: 755px;
    aspect-ratio: 755/82.2;
  }
}

.footer__company-info-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  margin-top: -3px;
}
@media screen and (min-width: 1000px) {
  .footer__company-info-card {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    max-width: 1024px;
  }
}

@media screen and (min-width: 1000px) {
  .company-info__map {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 512px;
            flex: 0 1 512px;
  }
}
.company-info__map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 335/271;
  display: block;
}
@media screen and (min-width: 1000px) {
  .company-info__map iframe {
    aspect-ratio: auto;
    height: 100%;
  }
}

.company-info__details {
  background-color: #ffffff;
  padding: 20px 24px;
}
@media screen and (min-width: 1000px) {
  .company-info__details {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 512px;
            flex: 0 1 512px;
    padding: 106px 61.5px;
  }
}

.company-info__details-title {
  width: 153px;
  margin: 0 auto;
}
@media screen and (min-width: 1000px) {
  .company-info__details-title {
    width: 183px;
    margin: 0;
  }
}

.company-info__details-items {
  margin-top: 24px;
  padding-top: 6px;
  padding-bottom: 6px;
}
@media screen and (min-width: 1000px) {
  .company-info__details-items {
    margin-top: 22px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.details-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.details-item + .details-item {
  margin-top: 8px;
}
@media screen and (min-width: 1000px) {
  .details-item + .details-item {
    margin-top: 12px;
  }
}

.details-item__title {
  font-size: 12px;
  font-weight: 700;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 84px;
          flex: 0 1 84px;
  position: relative;
  padding-left: 20px;
}
@media screen and (min-width: 1000px) {
  .details-item__title {
    font-size: 16px;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 120px;
            flex: 0 1 120px;
    padding-left: 16px;
  }
}
.details-item__title::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 49%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #9ed0e0;
}
@media screen and (min-width: 1000px) {
  .details-item__title::before {
    left: 0;
  }
}

.tetails-item__text {
  font-size: 12px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media screen and (min-width: 1000px) {
  .tetails-item__text {
    font-size: 16px;
  }
}

.footer__copyright {
  margin-top: 174.61px;
  padding-bottom: 24px;
  background-color: #67b0c7;
  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;
  position: relative;
}
@media screen and (min-width: 1000px) {
  .footer__copyright {
    margin-top: 240px;
  }
}
.footer__copyright::before {
  content: "";
  width: 100%;
  height: 46px; /* 45.714pxだが、境界線を消すため整数 */
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  background: url(../img/footer_wave_single.png) repeat-x -3px 1px/96px 46px; /* 背景位置を合わせるため-6px */
}
@media screen and (min-width: 1000px) {
  .footer__copyright::before {
    height: 120px;
    background: url(../img/footer_wave_single.png) repeat-x 6px 0px/252px 120px;
    top: 2px;
  }
}

.copyright__text {
  font-size: 10px;
  color: #ffffff;
}
@media screen and (min-width: 1000px) {
  .copyright__text {
    font-size: 14px;
  }
}

/* PageTop
************************************/
.page__top {
  display: block;
  width: 76px;
  height: 78px;
  position: absolute; /* bodyに対して */
  bottom: 110.71px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 100;
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition: filter 0.3s, -webkit-filter 0.3s;
}
.page__top:hover {
  -webkit-filter: brightness(0.9);
          filter: brightness(0.9);
}
@media screen and (min-width: 1000px) {
  .page__top {
    width: 100px;
    height: 104px;
    position: fixed;
    bottom: 40px;
    left: auto;
    -webkit-transform: none;
            transform: none;
    right: 40px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .page__top.is-show {
    opacity: 1;
    visibility: visible;
  }
}