@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
@charset "UTF-8";

#pet-home.pet-home{
  --pet-green:#496050;
  --pet-green-dark:#36493c;
  --pet-green-soft:#eef4ef;
  --pet-beige:#f6f1e8;
  --pet-ivory:#fbf8f3;
  --pet-text:#2e2d2a;
  --pet-sub:#68655f;
  --pet-line:#e8e1d6;
  color:var(--pet-text);
  background:#fff;
  font-family:"Zen Kaku Gothic New",sans-serif;
  line-height:1.9;
}

#pet-home *{box-sizing:border-box;}
#pet-home img{display:block;max-width:100%;height:auto;}
#pet-home a{text-decoration:none;color:inherit;}
#pet-home .sp-only{display:none;}
#pet-home .pet-inner{width:min(1120px, calc(100% - 40px));margin:0 auto;}

#pet-home .pet-breadcrumb{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  padding:16px 0 18px;
  font-size:12px;
  color:var(--pet-sub);
}
#pet-home .pet-breadcrumb span{margin:0 8px;color:#b8b1a5;}
#pet-home .pet-breadcrumb a:hover{color:var(--pet-green);}

#pet-home .pet-section{padding:96px 0;}
#pet-home .pet-section--soft{background:var(--pet-ivory);}

#pet-home .pet-heading{
  text-align:center;
  margin:0 auto 52px;
  max-width:760px;
}
#pet-home .pet-heading--light{color:#fff;}
#pet-home .pet-eyebrow{
  display:inline-block;
  margin:0 0 16px;
  letter-spacing:.22em;
  font-size:16px;
  font-weight:700;
  color:var(--pet-green);
}
#pet-home .pet-heading--light .pet-eyebrow{color:#dceadd;}
#pet-home .pet-heading h2,
#pet-home .pet-hero h1,
#pet-home .pet-hero__title,
#pet-home .pet-compare__body h3,
#pet-home .pet-contact h2,
#pet-home .pet-performance h2{
  font-family:"Zen Kaku Gothic New",sans-serif;
}
#pet-home .pet-heading h2{
  margin:0 0 16px;
  font-size:38px;
  line-height:1.45;
  font-weight:600;
}
#pet-home .pet-heading p:last-child{margin:0;color:var(--pet-sub);font-size:15px;font-weight:500;}
#pet-home .pet-heading--light p:last-child{color:#eef3ee;}

#pet-home .pet-btns{display:flex;gap:14px;flex-wrap:wrap;}
#pet-home .pet-btns--center{justify-content:center;}
#pet-home .pet-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:16px 28px;
  border-radius:999px;
  border:1px solid var(--pet-green);
  font-size:14px;
  font-weight:700;
  transition:.25s ease;
}
#pet-home .pet-btn--primary{background:var(--pet-green);color:#fff;}
#pet-home .pet-btn--primary:hover{background:var(--pet-green-dark);}
#pet-home .pet-btn--ghost{background:#fff;color:var(--pet-green);}
#pet-home .pet-btn--ghost:hover{background:var(--pet-green-soft);}

#pet-home .pet-hero{
  padding:34px 0 72px;
  overflow:hidden;
}
#pet-home .pet-hero__inner{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, 520px);
  gap:54px;
  align-items:center;
}
#pet-home .pet-hero__copy{padding:26px 0;}
#pet-home .pet-hero h1,
#pet-home .pet-hero__title{
  margin:0 0 14px;
  font-size:52px;
  line-height:1.36;
  font-weight:600;
}
#pet-home .pet-hero__sub{margin:0 0 24px;color:var(--pet-sub);font-size:15px;font-weight:700;}
#pet-home .pet-hero__lead{margin:0 0 34px;font-size:16px;color:#4c4a45;}
#pet-home .pet-hero__visual{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.10);
}
#pet-home .pet-hero__visual::after{
  content:"";
  position:absolute;
  inset:auto -24px -24px auto;
  width:140px;
  height:140px;
  background:rgba(255,255,255,.18);
  border-radius:50%;
}
#pet-home .pet-hero__visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}

#pet-home .pet-concerns{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
#pet-home .pet-concern{
  background:#fff;
  border:1px solid var(--pet-line);
  border-radius:10px;
  padding:22px 22px 20px;
}
#pet-home .pet-concern__num{
  width:42px;height:42px;border-radius:50%;
  background:var(--pet-green-soft);
  color:var(--pet-green);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;margin-bottom:10px;margin-top:14px;
}
#pet-home .pet-concern h3{margin:0 0 8px;font-size:18px;line-height:1.55;font-weight:600;}
#pet-home .pet-concern p{margin:0;font-size:14px;color:var(--pet-sub);}

#pet-home .pet-worry-gallery{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
#pet-home .pet-worry-gallery figure{
  margin:0;
  border-radius:10px;
  overflow:hidden;
}
#pet-home .pet-worry-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}

#pet-home .pet-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 22px;
}
#pet-home .pet-point{
  border:1px solid var(--pet-line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
#pet-home .pet-point figure{margin:0;}
#pet-home .pet-point img{width:100%;aspect-ratio:4/3;object-fit:cover;}
#pet-home .pet-point__body{padding:20px 20px 22px;}
#pet-home .pet-point__label{margin:0 0 8px;color:var(--pet-green);font-size:11px;font-weight:700;letter-spacing:.14em;}
#pet-home .pet-point h3{margin:0 0 8px;font-size:20px;line-height:1.5;font-weight:600;color:var(--pet-green);}
#pet-home .pet-point p:last-child{margin:0;color:var(--pet-sub);font-size:14px;}

#pet-home .pet-compare{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
#pet-home .pet-compare__card{
  background:#fff;
  border:1px solid var(--pet-line);
  border-radius:10px;
  overflow:hidden;
}
#pet-home .pet-compare__card figure{margin:0;}
#pet-home .pet-compare__card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
#pet-home .pet-compare__body{padding:24px;}
#pet-home .pet-compare__label{margin:0 0 8px;color:var(--pet-green);font-size:11px;font-weight:700;letter-spacing:.16em;}
#pet-home .pet-compare__card--cat .pet-compare__label{color:#86654a;}
#pet-home .pet-compare__body h3{margin:0 0 14px;font-size:30px;line-height:1.35;font-weight:600;color:var(--pet-green);}
#pet-home .pet-compare__body ul{margin:0;padding-left:1.2em;color:var(--pet-sub);}
#pet-home .pet-compare__body li+li{margin-top:10px;}

#pet-home .pet-works{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
#pet-home .pet-work{
  border:1px solid var(--pet-line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
#pet-home .pet-work:hover{transform:translateY(-4px);box-shadow:0 16px 28px rgba(0,0,0,.08);}
#pet-home .pet-work figure{margin:0;}
#pet-home .pet-work img{width:100%;aspect-ratio:4/3;object-fit:cover;}
#pet-home .pet-work__body{padding:20px;}
#pet-home .pet-work__meta{margin:0 0 8px;color:var(--pet-green);font-size:11px;font-weight:700;letter-spacing:.14em;}
#pet-home .pet-work h3{margin:0 0 8px;font-size:20px;line-height:1.45;font-weight:600;color: var(--pet-green);}
#pet-home .pet-work p{margin:0 0 14px;color:var(--pet-sub);font-size:14px;}
#pet-home .pet-work span{display:inline-block;color:var(--pet-green);font-weight:700;font-size:13px;}

#pet-home .pet-performance{
  display:grid;
  grid-template-columns:minmax(320px, 480px) 1fr;
  gap:40px;
  align-items:center;
}
#pet-home .pet-performance__image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
}
#pet-home .pet-performance__copy h2{margin:0 0 16px;font-size:40px;line-height:1.45;font-weight:600;}
#pet-home .pet-performance__copy > p:last-of-type{margin:0 0 24px;color:var(--pet-sub);font-size:15px;}
#pet-home .pet-performance__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
#pet-home .pet-performance__list article{
  background:#fff;
  border:1px solid var(--pet-line);
  border-radius:16px;
  padding:18px!important;
}
#pet-home .pet-performance__list h3{margin:0 0 6px;font-size:18px;font-weight: 600;color: var(--pet-green);}
#pet-home .pet-performance__list p{margin:0;color:var(--pet-sub);font-size:14px;}

#pet-home .pet-local{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  color:#fff;
}
#pet-home .pet-local__bg,
#pet-home .pet-local__overlay{
  position:absolute;inset:0;
}
#pet-home .pet-local__bg img{width:100%;height:100%;object-fit:cover;}
#pet-home .pet-local__overlay{background:linear-gradient(120deg, rgba(39,57,47,.82), rgba(39,57,47,.58));}
#pet-home .pet-local__inner{position:relative;z-index:2;}
#pet-home .pet-local__cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
#pet-home .pet-local__cards article{
  background:rgba(255,255,255,.92);
  color:var(--pet-text);
  border-radius:18px;
  padding:15px 22px 20px !important;
}
#pet-home .pet-local__cards h3{margin:0 0 8px;font-size:22px;font-weight: 600;text-align: center;color: var(--pet-green-dark);}
#pet-home .pet-local__cards p{margin:0;color:var(--pet-sub);font-size:14px;}

#pet-home .pet-faq{max-width:860px;}
#pet-home .pet-faq details{
  border-bottom:1px solid var(--pet-line);
  padding:0;
}
#pet-home .pet-faq details:first-of-type{border-top:1px solid var(--pet-line);}
#pet-home .pet-faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 42px 22px 0;
  position:relative;
  font-size:18px;
  font-weight:700;
}
#pet-home .pet-faq summary::-webkit-details-marker{display:none;}
#pet-home .pet-faq summary::after{
  content:'＋';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--pet-green);
  font-size:24px;
  font-weight:400;
}
#pet-home .pet-faq details[open] summary::after{content:'−';}
#pet-home .pet-faq details p{margin:0 0 20px;color:var(--pet-sub);font-size:15px;}

#pet-home .pet-contact{
  padding:92px 0 104px;
  background:var(--pet-beige);
}
#pet-home .pet-contact__inner{
  text-align:center;
  max-width:860px;
}
#pet-home .pet-contact h2{
  margin:0 0 18px;
  font-size:42px;
  line-height:1.5;
  font-weight: 500;
}
#pet-home .pet-contact p:last-of-type{
  max-width:760px;
  margin:0 auto 28px;
  color:var(--pet-sub);
  font-size:15px;
}

@media print, screen and (max-width: 1000px){
  #pet-home .pet-hero__inner,
  #pet-home .pet-performance,
  #pet-home .pet-compare,
  #pet-home .pet-works,
  #pet-home .pet-local__cards,
  #pet-home .pet-points,
  #pet-home .pet-concerns,
  #pet-home .pet-performance__list{
    grid-template-columns:1fr 1fr;
  }

  #pet-home .pet-hero__inner{grid-template-columns:1fr;}
  #pet-home .pet-hero__copy{order:2;padding-top:0;}
  #pet-home .pet-hero__visual{order:1;max-width:720px;margin:0 auto;}
  #pet-home .pet-performance{grid-template-columns:1fr;}
}

@media print, screen and (max-width: 750px){
  #pet-home .sp-only{display:block;}
  #pet-home .pet-inner,
  #pet-home .pet-breadcrumb{width:calc(100% - 32px);}
  #pet-home .pet-breadcrumb{
    padding:12px 0 14px;
    font-size:11px;
    white-space:nowrap;
    overflow:auto;
  }
  #pet-home .pet-breadcrumb span{margin:0 6px;}
  #pet-home .pet-section{padding:64px 0;}
  #pet-home .pet-heading{margin-bottom:32px;}
  #pet-home .pet-heading h2,
  #pet-home .pet-hero h1,
  #pet-home .pet-hero__title,
  #pet-home .pet-performance__copy h2,
  #pet-home .pet-contact h2{font-size:22px;font-weight:600;}
  #pet-home .pet-heading p:last-child,
  #pet-home .pet-hero__lead,
  #pet-home .pet-contact p:last-of-type,
  #pet-home .pet-faq details p{font-size:14px;}

  #pet-home .pet-btns,
  #pet-home .pet-btns--center{flex-direction:column;align-items:stretch;}
  #pet-home .pet-btn{width:100%;min-width:0;}

  #pet-home .pet-hero{padding:18px 0 48px;}
  #pet-home .pet-hero__visual{border-radius:5px;}
  #pet-home .pet-hero__sub{font-size:13px;}

  #pet-home .pet-concerns,
  #pet-home .pet-worry-gallery,
  #pet-home .pet-points,
  #pet-home .pet-compare,
  #pet-home .pet-works,
  #pet-home .pet-performance__list,
  #pet-home .pet-local__cards{
    grid-template-columns:1fr;
  }

  #pet-home .pet-concern h3,
  #pet-home .pet-point h3,
  #pet-home .pet-local__cards h3,
  #pet-home .pet-performance__list h3{font-size:18px;font-weight:600;}
  #pet-home .pet-compare__body h3{font-size:26px;font-weight:500;}
  #pet-home .pet-work h3{font-size:20px;}
  #pet-home .pet-faq summary{font-size:16px;padding:18px 34px 18px 0;}
  #pet-home .pet-contact{padding:72px 0 80px;}
}

/* =========================================================
   /build_pet 専用：既存テンプレートの1000px幅を解除
   ========================================================= */

/* このCSSは /build_pet のみで読み込む前提 */
@media print, screen and (min-width: 751px) {
  .middle,
  .middle_main02,
  .main,
  .main > .build_pet {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    float: none !important;
    background: none !important;
  }

  .main_top,
  .main_bottom {
    display: none !important;
  }

  .middle_left02,
  .middle_right01 {
    display: none !important;
  }
}

/* 親要素側に1000px幅が残っても、本文背景だけは画面幅いっぱいに広げる保険 */
#pet-home {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* 中の本文幅はデザイン上の最大幅に戻す */
#pet-home .pet-inner {
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

/* =========================================================
   /build_pet 専用：パンくず・FAQ本文の中央揃え解除
   ========================================================= */

/* 既存テンプレート側の text-align:center を受けないように本文全体は左基準に戻す */
#pet-home {
  text-align: left;
}

/* パンくずを左揃え */
#pet-home .pet-breadcrumb {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: center;
}

/* パンくず内の各要素も左揃えを明示 */
#pet-home .pet-breadcrumb a,
#pet-home .pet-breadcrumb span {
  text-align: left !important;
}

/* FAQエリアの本文を左揃え */
#pet-home .pet-faq,
#pet-home .pet-faq details,
#pet-home .pet-faq summary,
#pet-home .pet-faq details p {
  text-align: left !important;
}

/* FAQの見出しだけは従来通り中央揃えを維持 */
#pet-home .pet-faq .pet-heading {
  text-align: center !important;
}

/* =========================================================
   犬と暮らす家／猫と暮らす家：SVG肉球アイコン
   ========================================================= */

#pet-home .pet-compare__body ul {
  list-style: none;
  padding-left: 0;
}

#pet-home .pet-compare__body li {
  position: relative;
  padding-left: 34px;
}

/* 犬側：グリーンの肉球 */
#pet-home .pet-compare__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  background-color: #3f5c4a;
  opacity: 0.9;
  -webkit-mask: url("/file/site_data/build_pet/images/icon-paw.svg") no-repeat center / contain;
  mask: url("/file/site_data/build_pet/images/icon-paw.svg") no-repeat center / contain;
}

/* 猫側：やわらかいブラウン */
#pet-home .pet-compare__card--cat .pet-compare__body li::before {
  background-color: #8a6a4a;
}