/* ブログ専用スタイル（トップページの新デザインに合わせた白基調・紺のトーン） */
:root{--navy:#1D3557;--navy-deep:#20304A;--ink:#1F2A3A;--slate:#3E4C60;--line:#DCE2EA;--pale:#F5F8FA}
.en{font-family:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans CJK JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.9;color:var(--ink);background:#fff}
a{color:var(--navy)}
a:hover{text-decoration:underline}
header{border-bottom:1px solid var(--line);background:#fff}
.header-in{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.logo{flex:none}.logo img{height:38px;width:auto;display:block}
.header-right{display:flex;align-items:center;gap:16px;flex:none}
.nav-desktop{display:flex;gap:16px;flex-wrap:nowrap}
.nav-desktop a{font-size:13px;letter-spacing:.16em;color:var(--navy-deep);text-decoration:none;white-space:nowrap;flex:none}
.nav-desktop a:hover{text-decoration:underline;text-underline-offset:6px}
.header-tel{display:flex;align-items:baseline;gap:8px;color:var(--navy-deep);text-decoration:none;white-space:nowrap;flex:none}
.header-tel .tel-label{font-size:14px;letter-spacing:.2em}
.header-tel .num{font-size:18px;font-weight:700;letter-spacing:.06em}
.menu-mobile{display:none;position:relative}.sp-menu{display:none;position:relative}
.menu-mobile summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.26em;color:var(--navy-deep)}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile .menu-panel{position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid var(--line);padding:16px 20px;display:flex;flex-direction:column;gap:12px;z-index:50;white-space:nowrap}
.menu-mobile .menu-panel a{font-size:13px;letter-spacing:.24em;color:var(--navy-deep);text-decoration:none}
footer{border-top:1px solid var(--line);padding:34px 0 40px;background:#fff}
.footer-in{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footer-logo img{height:25px;width:auto;display:block}
.footer-addr{margin-top:16px;font-size:14px;color:var(--slate);letter-spacing:.08em}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px}
.footer-nav a{font-size:13px;letter-spacing:.24em;color:var(--navy-deep);text-decoration:none}.footer-nav .foot-group{display:flex;flex-direction:column}.footer-nav .foot-group br{display:none}.footer-nav .foot-group a{display:block;min-height:44px;padding:12px 0;box-sizing:border-box}
.footer-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-copy{margin-top:28px;font-size:13px;letter-spacing:.18em;color:var(--slate)}
.pagehead--blog{background-image:none;background-color:#fff;min-height:0;display:block;padding:36px 0 0}
.pagehead--blog .pagehead-band{width:100%;background:transparent}
.pagehead--blog .pagehead-in{padding:0 24px 8px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.pagehead--blog .crumb{font-size:15px;color:var(--slate)}
.pagehead--blog .crumb a{color:var(--navy-deep);text-decoration:underline}
.pagehead--blog h1{color:var(--navy);font-weight:600}
.pagehead--blog p{color:var(--ink)}
.pagehead--blog::after{content:"";display:block;max-width:1560px;height:320px;margin:24px auto 0;background:url(../img/hero-line.png) center top/contain no-repeat}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tab{display:inline-block;padding:10px 20px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:16px;color:var(--ink)}
.tab:hover{text-decoration:none;border-color:var(--navy)}
.tab--active{background:var(--navy);border-color:var(--navy);color:#fff}
.tab--active:hover{color:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}
.blog-card{display:block;background:#fff;border:1px solid var(--line);overflow:hidden;color:var(--ink)}
.blog-card:hover{text-decoration:none;border-color:var(--navy)}
.blog-card-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--pale)}
.blog-card-body{padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.blog-card-title{font-size:18px;font-weight:600;color:var(--navy-deep);line-height:1.6}
.blog-card-date{font-size:14px;color:var(--slate);letter-spacing:.06em}
.tag{background:var(--navy);color:#fff;font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px}
.tag--life{background:#8C6D3F}
.post-meta{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.post-title{margin:0 0 24px;font-size:28px;font-weight:600;color:var(--navy-deep);line-height:1.5}
.post-img{aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--pale);margin-bottom:22px}
.post-body{font-size:16px;line-height:1.9;color:var(--ink)}
.post-body h2{font-size:21px;font-weight:600;color:var(--navy-deep);margin:28px 0 10px}
.post-body h3{font-size:18px;font-weight:600;color:var(--navy-deep);margin:20px 0 8px}
.post-body p{margin:0 0 12px}
.post-body ul,.post-body ol{margin:0 0 12px;padding-left:1.4em}
.post-body li{margin-bottom:6px}
.post-body strong{color:var(--navy-deep)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.post-nav{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:36px 0}
.post-nav a{font-size:16px;font-weight:700;max-width:48%}
.post-cta{background:var(--pale);padding:20px;display:flex;flex-direction:column;gap:12px}
.post-cta p{margin:0;font-size:15px;line-height:1.8}
.btn{border-color:var(--navy);color:var(--navy)}
.btn:hover{background:var(--pale)}
.btn--fill{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--fill:hover{background:var(--navy-deep);color:#fff}
@media (max-width:1150px){
  .nav-desktop{display:none}
  .menu-mobile{display:block}
  .header-in{padding:10px 22px}
  .logo img{height:30px}
  .footer-in{padding:0 22px}.header-right .gnav{display:none}.sp-menu{display:block}.sp-menu summary{list-style:none;cursor:pointer}.sp-menu summary::-webkit-details-marker{display:none}.sp-menu summary span{display:block;width:26px;height:2px;background:var(--navy-deep);margin:6px 0}.sp-nav{position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid var(--line);padding:16px 20px;display:flex;flex-direction:column;gap:12px;min-width:220px}.sp-nav a{font-size:13px;letter-spacing:.24em;color:var(--navy-deep);text-decoration:none}
}
@media (max-width:760px){
  .post-title{font-size:22px}
  .post-nav a{max-width:100%}
  .pagehead--blog{padding-top:24px}
  .pagehead--blog::after{height:180px;background-image:url(../img/hero-line-mobile.png)}
  .blog-card-body{padding:20px 18px}
}
/* スマホ幅でヘッダー（ロゴ・電話・メニュー）が画面からはみ出さないようにする */
@media (max-width:640px){
  .header-in{padding:10px 16px;gap:10px}
  .logo{flex:0 1 auto;min-width:0}
  .logo img{width:auto;height:auto;max-height:26px;max-width:100%}
  .header-right{gap:12px}
  .header-tel .num{font-size:16px;letter-spacing:.02em}
}
