/*
Theme Name: Sagami Cargo Child
Theme URI: https://sagami-cargo.com/
Description: 「Sagami Cargo」専用のSEO強化子テーマ。相模原×軽貨物×冷凍・冷蔵・常温の検索対策、FAQ、構造化データ、下層ページ、問い合わせフォーム改善を実装。
Author: Mamadakara Inc.
Author URI: https://mamadakara.com/
Template: sagami-cargo-theme
Version: 1.2.1
Text Domain: sagami-cargo-child
*/

/* =========================================================
   Sagami Cargo Child v1.2.1
========================================================= */

.hero-title-small{
  display:block;
  margin-bottom:8px;
  color:var(--ink);
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.4;
  letter-spacing:.03em;
  font-weight:800;
}
.hero-title-main{display:block}

.hero-copy strong{color:var(--green-dark)}

.service-card{display:flex;flex-direction:column}
.service-body{display:flex;flex:1;flex-direction:column}
.service-body p{flex:1}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  color:var(--green-dark);
  font-weight:800;
  font-size:14px;
}
.text-link:hover{text-decoration:underline}

.problem-section{background:#fff}
.problem-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:46px;
  align-items:start;
}
.problem-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.problem-list li{
  position:relative;
  padding:15px 18px 15px 48px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(30,78,54,.04);
}
.problem-list li::before{
  content:"✓";
  position:absolute;
  left:17px;
  top:14px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green-dark);
  font-weight:900;
}
.problem-note{
  margin-top:20px;
  padding:20px 22px;
  border-left:4px solid var(--green);
  background:var(--green-soft);
  border-radius:0 14px 14px 0;
}
.problem-note p{margin:0;color:var(--muted)}

.seo-copy{background:#f8fcf9}
.seo-copy-inner{max-width:900px;margin:0 auto}
.seo-copy p{color:var(--muted);margin:0 0 18px}
.seo-copy p:last-child{margin-bottom:0}

.area-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  padding:34px 38px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow);
}
.area-box p{margin:0;color:var(--muted)}

.faq-list{display:grid;gap:14px;max-width:900px;margin:32px auto 0}
.faq-item{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.faq-item summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:20px 54px 20px 24px;
  color:var(--green-dark);
  font-weight:900;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"＋";
  position:absolute;
  right:22px;
  top:18px;
  font-size:22px;
  color:var(--green);
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 24px 22px;color:var(--muted)}
.faq-answer p{margin:0}

.form-help{
  margin:-4px 0 18px;
  font-size:13px;
  line-height:1.7;
  color:#666;
}
.hp-field{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* 下層ページ */
.subpage-hero{
  padding:70px 0 58px;
  background:linear-gradient(135deg,#f7fcf9 0%,#eaf7ef 100%);
  border-bottom:1px solid var(--line);
}
.breadcrumb{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
}
.breadcrumb a{color:var(--green-dark);font-weight:700}
.subpage-title{
  margin:0;
  font-size:clamp(34px,5vw,56px);
  line-height:1.25;
  color:var(--green-dark);
}
.subpage-lead{max-width:820px;margin:18px 0 0;color:var(--muted);font-size:17px}
.page-content{max-width:900px;margin:0 auto}
.page-content h2{
  margin:54px 0 18px;
  font-size:clamp(26px,3vw,36px);
  line-height:1.4;
  color:var(--ink);
}
.page-content h3{margin:34px 0 12px;font-size:22px;color:var(--green-dark)}
.page-content p{margin:0 0 18px;color:var(--muted)}
.page-content ul{margin:0 0 24px;padding-left:1.4em;color:var(--muted)}
.page-content li{margin-bottom:8px}
.page-cta{
  margin-top:58px;
  padding:34px;
  text-align:center;
  border-radius:24px;
  background:linear-gradient(135deg,#effaf3 0%,#dff2e7 100%);
}
.page-cta h2{margin:0 0 10px;font-size:30px}
.page-cta p{margin:0 0 22px}

@media (max-width:980px){
  .problem-grid{grid-template-columns:1fr}
  .area-box{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero-title-small{font-size:20px}
  .problem-grid{gap:28px}
  .area-box{padding:26px 22px}
  .faq-item summary{padding-left:18px}
  .faq-answer{padding-left:18px;padding-right:18px}
  .subpage-hero{padding:48px 0 40px}
  .page-cta{padding:28px 20px}
}


/* =========================================================
   Logo display fix v1.2.1
   - Use child-theme logo without temperature subtitle
   - Prevent header/footer clipping on desktop and mobile
========================================================= */
.site-header{overflow:visible}
.header-inner{min-height:112px!important;overflow:visible}
.brand{min-width:0;overflow:visible}
.brand img{
  display:block;
  width:210px!important;
  height:auto!important;
  max-width:100%;
  max-height:96px!important;
  object-fit:contain;
}
.footer-logo img{
  display:block;
  width:190px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain;
}
@media (max-width:980px){
  .header-inner{min-height:92px!important}
  .brand img{width:170px!important;max-height:78px!important}
}
@media (max-width:620px){
  .header-inner{min-height:86px!important}
  .brand img{width:158px!important;max-height:72px!important}
  .footer-logo img{width:165px!important}
}