/*
Theme Name: Pet AI Memorial
Theme URI: https://pet-ai-memorial.com/
Author: Pet AI Memorial
Description: ペット愛メモリアルのランディングページ用WordPressテーマ。
Version: 1.0.0
Text Domain: pet-ai-memorial
*/

html{scroll-behavior:smooth;scroll-padding-top:80px;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:#fdfcf4;-webkit-font-smoothing:antialiased;}
a{color:#4d7429;text-decoration:none;}
a:hover{color:#6f9b3e;}
summary::-webkit-details-marker{display:none;}
#priceHead{display:flex;}
@media (max-width:760px){#headerTel{display:none;}#logoEn{display:none;}#headerLine{display:none;}#logoMark{width:42px;}#logoName{font-size:16px;}html{scroll-padding-top:70px;}}
#priceTable [data-cl]{display:none;}
@media (max-width:700px){#priceHead{display:none;}#priceTable [data-cl]{display:block;}}

/* WordPress theme integration */
body.pam-menu-open { overflow: hidden; }
.pam-menu-overlay { opacity: 0; visibility: hidden; }
.pam-menu-panel { transform: translateX(105%) !important; }
body.pam-menu-open .pam-menu-overlay { opacity: 1; visibility: visible; }
body.pam-menu-open .pam-menu-panel { transform: translateX(0) !important; }
.admin-bar .pam-menu-panel { top: 32px !important; height: calc(100% - 32px) !important; }
@media (max-width:782px) {
  .admin-bar .pam-menu-panel { top: 46px !important; height: calc(100% - 46px) !important; }
}

/* ---- FV（ファーストビュー）背景画像 ---- */
.pam-fv{
  background-color:#fbf8e8;
  background-image:url(assets/images/bac01.jpg);
  background-size:cover;
  background-position:left bottom;
  background-repeat:no-repeat;
}
@media (max-width:760px){
  .pam-fv{
    background-image:url(assets/images/bac02.jpg);
    background-position:left bottom;
  }
}

/* ---- セクション背景画像 ---- */
.pam-bg{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center bottom;
}
.pam-bg-worry { background-color:#f7faee; background-image:url(assets/images/bg-worry.jpg); }
.pam-bg-after { background-color:#f8f3e4; background-image:url(assets/images/bg-after.jpg); }
.pam-bg-voice { background-color:#fdfcf4; background-image:url(assets/images/bg-voice.jpg); background-position:center; }
.pam-bg-footer{ background-color:#f2f0e2; background-image:url(assets/images/bg-footer.jpg); }
@media (max-width:760px){
  .pam-bg-worry { background-image:url(assets/images/bg-worry-sp.jpg); }
  .pam-bg-after { background-image:url(assets/images/bg-after-sp.jpg); }
  .pam-bg-voice { background-image:url(assets/images/bg-voice-sp.jpg); }
  .pam-bg-footer{ background-image:url(assets/images/bg-footer-sp.jpg); }
}

/* ---- 実写真（プラン・アフター・火葬車・スタッフ） ---- */
.pam-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* 写真の色味をサイト全体のやわらかいトーンへ寄せる */
  filter:saturate(.88) contrast(.95) brightness(1.05) sepia(.08);
}
.pam-photo--focus-b{ object-position:center 62%; }
.pam-photo--focus-c{ object-position:center; }

/* カード上部の写真枠（プラン3件・アフター3件） */
.pam-photo-frame{
  aspect-ratio:16/10;
  background:#f2f7e6;
  overflow:hidden;
}
/* 横並びカードの写真枠（火葬車・スタッフ） */
.pam-photo-side{
  min-height:280px;
  background:#f2f7e6;
  overflow:hidden;
}

@media (max-width:760px){
  /* スマホでは横長すぎると被写体が小さくなるため、やや正方形寄りに */
  .pam-photo-frame{ aspect-ratio:4/3; }
  .pam-photo-side{ min-height:0; aspect-ratio:4/3; }
  /* 画面が明るい屋外写真は白飛びしやすいので、わずかに締める */
  .pam-photo{ filter:saturate(.9) contrast(.97) brightness(1.02) sepia(.07); }
}

/* ---- 「もしもの時は」STEPカード ---- */
.pam-care-media{
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
  align-items:flex-start;
}
.pam-care-img{
  flex:0 0 auto;
  width:150px;
  height:150px;
  object-fit:contain;
  display:block;
  margin:0 auto;
  background:#f7faee;
  border-radius:14px;
}
.pam-care-text{
  flex:1 1 320px;
  margin:0;
  font-size:16.5px;
  color:#5f564c;
}

@media (max-width:760px){
  /* イラストを見出しの下に大きく置き、本文はその下へ回す */
  .pam-care-media{ gap:12px; }
  .pam-care-img{
    width:100%;
    max-width:200px;
    height:auto;
    aspect-ratio:1/1;
    padding:6px;
  }
  .pam-care-text{ flex:1 1 100%; font-size:16px; line-height:1.9; }
  /* STEP番号帯を細くし、本文の左右余白を詰めて可読幅を確保 */
  #care .pam-step-card{ grid-template-columns:52px 1fr !important; }
  #care .pam-step-num b{ font-size:23px; }
  #care .pam-step-num small{ font-size:11px; letter-spacing:.08em; }
  #care .pam-step-body{ padding:16px 14px !important; }
  #care .pam-step-body h3{ font-size:17.5px; }
}