/* ------------------------------
基本設定
------------------------------ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.bread{
    display: none;
}
#pethotel p{
    line-height: 1.5;
}
/* ボタンスタイル */
.btn_box{
    display: flex;
    flex-wrap: nowrap;
    margin-top: 40px;
    justify-content: center;
}
.btn_box li{
    margin: 0 24px;
}
.btn_box li .gray{
    background-color: #ababab;
}
/* タイトルスタイル */
h2{
font-size: 32px;
color: #0E2B04;
font-weight: bold;
text-align: center;
margin-bottom: 24px;
font-family: 'Atma';
}
h2 .english{
font-size: 16px;
color: var(--main-color);
position: relative;
top: -16px;
font-weight: 300;
}

.section__lead {
margin-bottom: 24px;
font-size: 16px;
/* color: var(--text-sub); */
text-align: center;
}


/* ------------------------------
HERO
------------------------------ */
.hero {
background-color: var(--base-color);
padding: 64px 0 72px;
width: 100%;
}

.hero__inner {
max-width: 1040px;
margin: 0 auto;
display: flex;
gap: 40px;
align-items: center;
}

.hero__text {
flex: 1;
}

.hero__text .btn_box{
justify-content: left;
}

.hero__text .btn_box li{
margin: 0;
}

.hero__catch {
font-size: 24px;
font-weight: 700;
line-height: 1.7;
color: var(--tilte-color);
}

.hero__catch span {
background: linear-gradient(transparent 60%, #e5f1d9 60%);
padding: 0 2px;
}

.hero__lead {
margin-top: 16px;
font-size: 14px;
line-height: 2 !important;
/* color: var(--text-sub); */
}

.hero__btns {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.hero__image {
flex: 1;
}

.hero__image img {
border-radius: 24px;
box-shadow: var(--shadow-card);
}

/* ------------------------------
ABOUT
------------------------------ */
.about {
background-color: #fff;
}
.about_inner {
    width: 1400px;
    margin: 0 auto;
}

.about_concept{
    width: 956px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}
.about_photo{
    width: 40%;
}
.about_photo img {
border-radius: 24px;
box-shadow: var(--shadow-card);
}
.about_text{
    width: 60%;
    padding-left: 70px;
    box-sizing: border-box;
    position: relative;
}
.about_text-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}

.about_text p {
margin: 0 0 8px;
font-size: 16px;
/* color: var(--text-sub); */
}
.about_highlight{
    background-color: var(--main-color);
    color: #ffffff;
    font-weight: 600;
}
.about_text::after{
    content: "";
    width: 135px;
    height: 77px;
    background: url(../images/pethotel/about_img.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: -50px;
}

.service_list{
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    justify-content: space-between;
}
.service_list li {
    background-color: #F5F3F2;
    border-radius: 24px;
    padding: 10px 16px 16px 16px;
    text-align: center;
}
.service_icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background-color: #7aa23f; */
    margin: 0 auto;
}
.service_list li h4{
    font-size: 18px;
    font-weight: 700;
    margin: 8px 16px 16px;
}
#about .note{
    text-align: right;
}
/* ------------------------------
5つのこだわり
------------------------------ */
.points_list{
    width: 956px;
    margin: 0 auto;
}
.points_list li{
    margin-bottom: 24px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.points_text h3{
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: bold;
}
.points_text{
    width: 50%;
    padding-top: 8px;
}
.points_text h3 span{
    padding: 10px 16px;
    background-color: var(--main-color);
    border-radius: 24px;
    color: #ffffff;
    margin-right: 16px;
}
.points_list li img{
    width: 45%;
    height: auto;
    border-radius: 24px;
    margin-right: 32px;
}

/* ------------------------------
こんな方におすすめ
------------------------------ */

.recommend_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 40px;
    list-style: none;
}
.recommend_list li{
    background-color: #F5F3F2;
    width: 292px;
    padding: 60px 16px 24px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    border-radius: 24px;
    margin-bottom: 70px;
    box-shadow: 0 3px 16px rgb(0 0 0 / 16%);
}
.recommend_title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--tilte-color);
}
.recommend_list li img{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translate(-50%, 0);
    /* border: 1px solid #333333; */
    border-radius: 40px;
}
.recommend_text{
    font-size: 14px;;
}

/* ------------------------------
料金表
------------------------------ */
.price {
background-color: var(--bg-light);
}

.price-table-wrap {
background-color: #fff;
border-radius: 20px;
padding: 24px 20px;
box-shadow: var(--shadow-card);
overflow-x: auto;
}

.price-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
min-width: 640px;
}

.price-table th,
.price-table td {
border: 1px solid var(--line);
padding: 8px 10px;
text-align: center;
}

.price-table thead th {
background-color: var(--accent-light);
font-weight: 700;
}

.price-table tbody th {
background-color: #f7f5ef;
font-weight: 700;
text-align: left;
white-space: nowrap;
}

.price__note {
font-size: 11px;
margin-top: 12px;
color: #8c8677;
}

.price__cta-row {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.price_ex{
    margin-top: 16px;
}
.price_ex_title{
    font-weight: 600;
}
.price_ex ul{
    list-style: disc;
    padding-left: 16px;
    margin-top: 16px;
}
.price_ex ul li{
    color: var(--text-sub);
    font-size: 14px;
    box-sizing: border-box;
    list-style: disc;
    line-height: 1.5;
    
}
#price .note{
    text-align: right;
}
/* ------------------------------
ご利用の流れ
------------------------------ */
.guide_list{
    width: 956px;
    margin: 0 auto 32px;
}
.guide_list li{
  background-color: #ffffff;
  padding: 32px 32px 54px 32px;
  border-radius: 8px;
  margin-top: 32px;
  display: flex;
  flex-wrap: nowrap;
  box-shadow: 0 3px 16px rgb(0 0 0 / 16%);
}
.guide_detail{
  width: 648px;
  line-height: 2;
}
.step_icon{
  /* border-radius: 50%; */
  /* background-color: var(--main-color);
  color: #FFFFFF; */
  color: var(--main-color);
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  margin: 0;
  line-height: normal;
}
.step_icon span{
  font-size: 14px;
}
.guide_list li figure{
  width: 100px;
  height: auto;
  margin: 0 48px 0 24px;
}
.guide_list li figure img{
  width: 100%;
}
.guide_detail_title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 24px;
  color: var(--tilte-color);
}

/* ------------------------------
FAQ
------------------------------ */
.faq {
background-color: var(--bg-main);
padding-bottom: 80px;
}

.faq__list {
max-width: 880px;
margin: 0 auto;
}

.faq-item {
background-color: #fff;
border-radius: 16px;
margin-bottom: 8px;
overflow: hidden;
border: 1px solid var(--line);
}

.faq-item summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
font-size: 13px;
font-weight: 600;
position: relative;
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: "+";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
color: var(--accent);
}

.faq-item[open] summary::after {
content: "−";
}

.faq-item__q-label {
display: inline-block;
margin-right: 8px;
padding: 2px 8px;
border-radius: 999px;
background-color: var(--accent-light);
font-size: 11px;
color: var(--accent);
}

.faq-item__body {
padding: 8px 16px 14px;
border-top: 1px dashed var(--line);
font-size: 13px;
color: var(--text-sub);
}

.faq__cta-row {
margin-top: 24px;
text-align: center;
}

.faq__cta-row .btn + .btn {
margin-left: 10px;
}

/* ------------------------------
レスポンシブ
------------------------------ */
@media (max-width: 1024px) {
.about_inner {
    width: 100%;
}
.about_concept{
    width: 100%;
    flex-wrap: wrap;
}
.guide_list{
    width: 100%;
}
.flow-card {
    grid-template-columns: 96px 1fr;
}
}

@media (max-width: 768px) {
/* body {
    font-size: 13px;
}*/
h2{
    font-size: 24px;
}
h2 .english{
    font-size: 12px;
    top: 4px;
}
.contents_bg{
    padding: 40px 0;
}
.section {
    padding: 40px 0;
} 
.btn_box{
    flex-wrap: wrap;
}
.btn_box li{
    margin: 0;;
}
.hero {
    padding: 40px 0 48px;
}
.hero__inner {
    flex-direction: column;
    gap: 24px;
}
.hero__catch {
    font-size: 20px;
}
.hero__btns {
    flex-direction: column;
}
.hero__image{
    position: relative;
    right: -20px;
}
.about_inner {
    width: 100%;
    padding: 0 16px;
}
.about_concept{
    width: 100%;
    flex-wrap: wrap;
}
.about_photo, .about_text{
    width: 100%;
}
.about_text{
    padding-left: 0;
    padding-bottom: 80px;
    margin-top: 24px;
}
.points_list{
    width: 100%;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 24px;
}
.points_text h3{
    font-size: 18px;
    margin: 0 0 16px 0;
}
.points_text{
    width: 100%;
}
.points_list li img{
    width: 100%;
}

.points_list {
    --gap: 16px;
    --dot-size: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* 下の「◯数字」用スペース */
    /* padding-bottom: calc(var(--dot-size) + 18px); */

    /* 1,2,3…のカウンター */
    counter-reset: point;

    /* スクロールバー非表示（任意） */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .points_list::-webkit-scrollbar {
    display: none;
  }

  /* 1スライド＝画面幅いっぱい */
  .points_list > li {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 0;
  }


  /* スマホではPC画像を非表示、SP画像を表示（念のため） */
  .points_list img.pc { display: none; }
  .points_list img.sp { display: block; width: 100%; height: auto; }
:root {
    --pager-green: #1B8F3A; /* 好きな緑に変更OK */
    --pager-size: 44px;    /* 押しやすいサイズ */
    --pager-gap: 12px;     /* 押しやすい間隔 */
    --pager-h: 64px;       /* ナビ全体の高さ目安 */
  }

  /* 常に表示（画面下固定） */
  .points_pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--pager-gap);

    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    /* backdrop-filter: blur(6px); */
  }

  .points_pager a {
    width: var(--pager-size);
    height: var(--pager-size);
    border-radius: 999px;

    display: grid;
    place-items: center;

    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;

    background: #fff;
    border: 2px solid var(--main-color);
    color: var(--main-color);

    /* -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, transform .08s ease; */
  }

  /* 選択中 */
  .points_pager a.is-active {
    background: var(--main-color);
    color: #fff;
  }

  .points_pager a:active {
    transform: scale(0.96);
  }

  .points_pager a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pager-green) 30%, transparent);
    outline-offset: 3px;
  }

  /* ナビがコンテンツに被らないように（必要なら） */
  body {
    padding-bottom: calc(var(--pager-h) + env(safe-area-inset-bottom));
  }





.recommend_list{
    width: 100%;
    padding: 0 16px;
}
.recommend_list li{
    width: 100%;
    margin-top: 40px;
}



.guide_list{
    width: 100%;
    padding: 0 16px;
}
.guide_list li{
    flex-wrap: wrap;
}
.guide_detail_title{
    margin: 8px 0 16px;
}
.guide_detail p{
    line-height: 1.8;
}

.service_list{
    flex-wrap: wrap;
    padding: 0;
}
.service_list li{
    width: 100%;
    margin-bottom: 16px;
}

.section__title {
    font-size: 20px;
}
}

@media (max-width: 480px) {
.price-table-wrap {
    padding: 16px 12px;
}
.hero__catch {
    font-size: 18px;
}
}