/* BBせどりカレンダー紹介ページ専用。共通部品には適用しない。 */
#main.calendar-intro{width:100%;max-width:1040px;min-width:0;padding:28px 20px 64px;color:#333;font-size:16px;line-height:1.85}
.calendar-intro *{box-sizing:border-box}
.calendar-intro h1,.calendar-intro h2,.calendar-intro h3{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;line-height:1.5}
.calendar-intro h1{font-size:clamp(28px,3.6vw,42px);margin:12px 0 20px;letter-spacing:.025em}
.calendar-intro h2{font-size:clamp(24px,3vw,30px);margin:6px 0 24px}
.calendar-intro h3{font-size:20px;margin:0 0 12px}
.calendar-intro p+p{margin-top:16px}
.calendar-intro strong{font-weight:700}
.calendar-intro a:not(.ci-button){color:#245f8b;text-decoration:underline;text-underline-offset:3px}
.calendar-intro a:focus-visible{outline:3px solid #245f8b;outline-offset:5px}
/* BBtoolsの小見出しラベルと同じ指定。紹介ページ内のラベル8件に限定。 */
.calendar-intro .ci-kicker{
  position:relative;
  display:block;
  width:fit-content;
  max-width:calc(100% - 40px);
  margin:0 0 20px;
  padding:8px 14px;
  border:1px solid #d2e6f2;
  border-radius:10px;
  background:#eaf4fb;
  color:#194e75;
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:clamp(16px,1.75vw,22px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.025em;
  overflow-wrap:break-word;
}
.calendar-intro .ci-kicker::after{
  content:"";
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  width:28px;
  height:2px;
  border-radius:2px;
  background:#9cc4df;
}
.calendar-intro .ci-name{font-size:20px;font-weight:700;color:#245f8b;margin-top:12px}
.ci-hero,.ci-section,.ci-final-cta{background:#fff;border:1px solid #c8d8e2;border-radius:12px;padding:36px;margin-bottom:28px;box-shadow:0 6px 18px rgb(36 95 139 / 7%)}
.ci-hero{text-align:center;border-top:5px solid #479cd7;padding:48px 30px}
.ci-lead{font-size:clamp(17px,1.8vw,20px)}
.ci-button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;margin-top:26px;padding:14px 28px;border-radius:7px;background:#bd1e21;color:#fff;font-weight:700;text-decoration:none;line-height:1.6;text-align:center}
.ci-button:hover{background:#941719}
.calendar-intro .ci-text-link{display:block;width:fit-content;margin:16px auto 0;padding:8px 0}
.calendar-intro .ci-note{font-size:14px;line-height:1.8;color:#566675;margin-top:18px}
.calendar-intro .ci-hero > .ci-note{margin-top:10px;text-align:center}
.ci-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px;padding-top:28px;border-top:1px solid #d8e4ec}
.ci-benefits strong{display:block;color:#245f8b;margin-bottom:10px;font-size:18px}
.ci-features>div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding:24px 0;border-bottom:1px solid #d8e4ec}
.ci-features>div:first-child{padding-top:0}
.ci-features>div:last-child{border-bottom:0;padding-bottom:0}
.ci-features dt{color:#245f8b;font-size:18px;font-weight:700}
.ci-screen{margin:28px 0 0;min-width:0}
.ci-screen>a{display:block;border:1px solid #c8d8e2;border-radius:8px;overflow:hidden}
.ci-screen img{display:block;width:100%;height:auto}
.ci-use-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 36px}
.ci-use-grid h3{color:#245f8b;padding-left:14px;border-left:4px solid #479cd7}
.ci-steps{counter-reset:step}
.ci-steps li{counter-increment:step;position:relative;padding:0 0 28px 56px}
.ci-steps li:last-child{padding-bottom:0}
.ci-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:#479cd7;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
#how-to{scroll-margin-top:100px}
.ci-faq>div{padding:24px 0;border-bottom:1px solid #d8e4ec}
.ci-faq>div:first-child{padding-top:0}
.ci-faq>div:last-child{padding-bottom:0;border-bottom:0}
.ci-faq dt{font-size:18px;font-weight:700;color:#245f8b;margin-bottom:12px}
.ci-final-cta{text-align:center;background:#eaf4fa;padding:42px 30px}
.ci-final-cta h2{margin-bottom:16px}
@media(max-width:700px){
  #main.calendar-intro{padding:18px 16px 40px}
  .ci-hero,.ci-section,.ci-final-cta{padding:28px 20px;margin-bottom:22px}
  .ci-hero{padding:34px 18px}
  .calendar-intro h1{font-size:28px;letter-spacing:0}
  .calendar-intro h2{font-size:24px;margin-bottom:20px}
  .calendar-intro h3{font-size:19px}
  .ci-benefits,.ci-features>div,.ci-use-grid{grid-template-columns:1fr}
  .ci-benefits{gap:24px}
  .ci-features>div{gap:10px;padding:22px 0}
  .ci-use-grid{gap:28px}
  .ci-button{width:100%;padding:14px 16px}
  .ci-steps li{padding-left:46px}
  .ci-steps li::before{width:32px;height:32px}
}
@media(max-width:600px){
  .calendar-intro .ci-kicker{
    max-width:calc(100% - 30px);
    margin-bottom:16px;
    padding:7px 10px;
    font-size:17px;
    letter-spacing:0;
  }
  .calendar-intro .ci-kicker::after{
    left:calc(100% + 8px);
    width:20px;
  }
}