/* ジブラボ(jibulabo.jp)と同じ配色・フォントに合わせたデザイン */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:#14395C;
  background:#ffffff;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#BFDDF2}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.2rem}

/* ヘッダー(jibulabo.jpトップと同じデザイン) */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #EAF1F7}
.hwrap{max-width:1200px;margin:0 auto;padding:14px clamp(20px,5vw,52px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand-name{font-family:'Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:.01em;background:linear-gradient(100deg,#1E7CBD 0%,#2E9BD6 55%,#2E9BD6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{font-size:12px;color:#5A6B7E;letter-spacing:.06em;font-weight:500}
.site-nav{display:flex;align-items:center;gap:6px}
.navlink{font-weight:500;font-size:14px;color:#14395C;text-decoration:none;padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.navlink:hover{color:#1B6FB0;background:#EAF3FA}
.header-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(100deg,#1B6FB0,#2E9BD6);color:#fff;font-weight:700;font-size:15px;padding:13px 26px;border-radius:999px;text-decoration:none;margin-left:8px;transition:transform .25s,box-shadow .25s}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(27,111,176,.32)}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0}
.mobile-menu{display:none}
@media (max-width:860px){
  .site-nav{display:none}
  .burger{display:flex}
  .mobile-menu.open{display:flex;flex-direction:column;padding:8px clamp(20px,5vw,52px) 18px;gap:2px;border-top:1px solid #EAF1F7;background:rgba(255,255,255,.96)}
  .mobile-menu a{font-weight:500;font-size:15px;color:#14395C;text-decoration:none;padding:13px 6px;border-bottom:1px solid #F0F5FA}
  .mobile-menu a:last-child{border-bottom:none}
}

/* ブログ名の帯 */
.blog-band{background:#EAF3FA;border-bottom:3px solid #1E7CBD;padding:1.6rem 0 1.2rem}
.blog-band-title{font-size:1.7rem;font-weight:900;color:#14395C;text-decoration:none;letter-spacing:.02em}
.blog-band-sub{margin:.3rem 0 0;font-size:.85rem;color:#1E7CBD;font-weight:700}
br.sp{display:none}
@media (max-width:480px){
  .blog-band-title{font-size:1.4rem}
  br.sp{display:inline}
}

/* 記事一覧（トップページと同じカードデザイン・3列） */
.wrap.wide{max-width:1120px}
.intro{margin:2rem 0;font-size:1.02rem;text-align:center}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:0 0 3rem}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.post-grid{grid-template-columns:1fr}}
.post-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #E6EEF5;border-radius:18px;overflow:hidden;text-decoration:none;color:#14395C;box-shadow:0 6px 18px rgba(20,57,92,.06);transition:transform .25s,box-shadow .25s}
.post-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1B6FB0,#2E9BD6);z-index:1}
.post-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,111,176,.18)}
.post-card-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#EAF3FA}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.post-card:hover .post-card-thumb img{transform:scale(1.05)}
.post-card-body{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.25rem;flex:1}
.post-card-date{font-family:'Inter','Zen Kaku Gothic New',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.14em;color:#8AA1B8}
.post-card-title{font-size:1.02rem;font-weight:900;line-height:1.55}
.post-card:hover .post-card-title{color:#1B6FB0}
.post-card-desc{font-size:.88rem;color:#3d5a78;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-more{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:700;color:#1B6FB0}

/* 記事ページ */
.post{margin-top:2.2rem}
.post-date{font-size:.85rem;color:#5c7a99}
.post-title{font-size:1.55rem;font-weight:900;line-height:1.5;margin:.4rem 0 1.6rem}
.post-eyecatch{width:100%;height:auto;border-radius:14px;border:1px solid #EAF3FA;margin:0 0 1.8rem;display:block}
.post-body h2{font-size:1.2rem;font-weight:900;margin:2.2rem 0 .8rem;padding-left:.7rem;border-left:5px solid #1E7CBD}
.post-body h3{font-size:1.05rem;font-weight:700;margin:1.8rem 0 .6rem}
.post-body p{margin:1rem 0}
.post-body strong{background:linear-gradient(transparent 65%,#BFDDF2 65%)}
.post-body ul,.post-body ol{padding-left:1.4rem}
.post-body blockquote{margin:1.2rem 0;padding:.8rem 1rem;background:#EAF3FA;border-radius:8px}
.back-link{margin:2.5rem 0 4rem}
.back-link a{color:#1E7CBD;font-weight:700;text-decoration:none}

/* 解説動画 */
.post-video{margin:2.5rem 0}
.post-video-title{font-weight:900;font-size:1.05rem;margin:0 0 .8rem;color:#14395C}
.post-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#EAF3FA}
.post-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-video-link{margin:.7rem 0 0;font-size:.9rem}
.post-video-link a{color:#1E7CBD;font-weight:700;text-decoration:none}
.post-video-link a:hover{text-decoration:underline}

/* CTA(記事下の案内) */
.cta{background:#EAF3FA;border-radius:14px;padding:1.6rem 1.4rem;margin:3rem 0 2rem}
.cta-title{font-size:1.15rem;font-weight:900;margin:0 0 .6rem;color:#14395C}
.cta p{margin:.5rem 0;font-size:.95rem}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.btn{display:inline-block;padding:.75rem 1.3rem;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;text-align:center}
.btn-main{background:#1E7CBD;color:#fff}
.btn-main:hover{background:#14395C}
.btn-sub{background:#fff;color:#1E7CBD;border:2px solid #1E7CBD}
.btn-sub:hover{background:#BFDDF2}
.btn-line{background:#06C755;color:#fff;display:inline-flex;align-items:center;gap:.45rem}
.btn-line:hover{background:#05a949}
.btn-line svg{flex-shrink:0}

/* トップページへもどるボタン */
.home-link{text-align:center;margin:0 0 3.5rem}
.btn-home{background:#fff;color:#14395C;border:2px solid #BFDDF2}
.btn-home:hover{background:#EAF3FA;border-color:#1E7CBD}

/* フッター(jibulabo.jpトップと同じデザイン) */
.site-footer{background:linear-gradient(120deg,#1B6FB0 0%,#1E7CBD 40%,#2E9BD6 70%,#2E9BD6 100%);color:rgba(255,255,255,.85);margin-top:3rem}
.fwrap{max-width:1200px;margin:0 auto;padding:50px clamp(20px,5vw,52px);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.fbrand{display:flex;align-items:baseline;gap:12px}
.fbrand-name{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;color:#fff}
.fbrand-sub{font-size:12px;color:rgba(255,255,255,.62)}
.fcopy{font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.55);margin:0}


/* AI活用ブログ(/ai/)用のティファニー配色テーマ(jibulabo.jp/ai/ とおそろい) */
.theme-ai{color:#123F3C}
.theme-ai ::selection{background:#C2E9E6}
.theme-ai .site-header{border-bottom-color:#E3F1EF}
.theme-ai .brand-name{background:linear-gradient(100deg,#0AA6A1 0%,#3ECFC7 55%,#3ECFC7 100%);-webkit-background-clip:text;background-clip:text}
.theme-ai .navlink{color:#123F3C}
.theme-ai .navlink:hover{color:#0A8F8A;background:#E6F7F5}
.theme-ai .header-cta{background:linear-gradient(100deg,#0ABAB5,#3ECFC7)}
.theme-ai .header-cta:hover{box-shadow:0 10px 22px rgba(10,186,181,.32)}
.theme-ai .site-footer{background:linear-gradient(120deg,#0ABAB5 0%,#0AA6A1 40%,#3ECFC7 70%,#3ECFC7 100%)}
.theme-ai .btn-home{color:#123F3C;border-color:#C2E9E6}
.theme-ai .btn-home:hover{background:#E6F7F5;border-color:#0ABAB5}
.theme-ai .cta-title{color:#123F3C}
.theme-ai .post-card{color:#123F3C}
.theme-ai .post-card-desc{color:#3D5B58}
.theme-ai .blog-band{background:#E6F7F5;border-bottom-color:#0ABAB5}
.theme-ai .blog-band-title{color:#123F3C}
.theme-ai .blog-band-sub{color:#0A8F8A}
.theme-ai .intro a{color:#0A8F8A;font-weight:700}
.theme-ai .post-card{border-color:#DFF0EE;box-shadow:0 6px 18px rgba(10,186,181,.08)}
.theme-ai .post-card::before{background:linear-gradient(90deg,#0ABAB5,#3ECFC7)}
.theme-ai .post-card:hover{box-shadow:0 14px 30px rgba(10,186,181,.2)}
.theme-ai .post-card:hover .post-card-title{color:#0A8F8A}
.theme-ai .post-card-more{color:#0A8F8A}
.theme-ai .post-card-date{color:#6D8B88}
.theme-ai .cta{background:#E6F7F5}
.theme-ai .btn-main{background:#0ABAB5}
.theme-ai .btn-main:hover{background:#0A8F8A}
.theme-ai .btn-sub{color:#0A8F8A;border-color:#0ABAB5}