/* ==========================================================
   custom.css  ─ 2026年10月 改修分(app.css は変更していません)
   ・トップ/事業案内のサービスカードを4枚に対応
   ・一般貨物運送事業ページ(page-freight.php)専用スタイル
   ========================================================== */

/* ----- サービスカード 4枚対応(色の割り当て) ----- */
.c-service-card__item:nth-of-type(1){background-color:#00a364}
.c-service-card__item:nth-of-type(2){background-color:#008a55}
.c-service-card__item:nth-of-type(3){background-color:#007347}
.c-service-card__item:nth-of-type(4){background-color:#004f31}

/* ----- 一般貨物運送事業:お悩みセクション ----- */
.p-freight-worry{background-color:#fff}
.p-freight-worry__ttl{text-align:center;color:#1a1a1a}
.p-freight-worry__ttl span{color:#00a364}
.p-freight-worry__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:48px;max-width:960px;margin-inline:auto}
.p-freight-worry__img img{display:block;width:100%;height:auto}
.p-freight-worry__list{display:flex;flex-direction:column;gap:16px;color:#1a1a1a}
.p-freight-worry__list li{position:relative;padding-left:1.4em}
.p-freight-worry__list li::before{content:"";position:absolute;left:0;top:.95em;width:.6em;height:.6em;border-radius:50%;background-color:#00a364;transform:translateY(-50%)}

/* ----- 一般貨物運送事業:解決セクション ----- */
.p-freight-solution{position:relative;background-color:#004f31}
.p-freight-solution::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);border-style:solid;border-width:24px 40px 0 40px;border-color:#fff transparent transparent transparent}
.p-freight-solution__ttl{text-align:center;color:#fff}
.p-freight-solution__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1080px;margin-inline:auto}
.p-freight-solution__item{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;background-color:#fff}
.p-freight-solution__item-icon img{display:block;width:48px;height:48px}
.p-freight-solution__item-ttl{margin:0;font-weight:700;color:#1a1a1a}
.p-freight-solution__item-txt{margin:0;font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:13px;line-height:1.7;letter-spacing:.02em;color:#4d4d4d}

/* ----- 一般貨物運送事業:流れ(背景) ----- */
.p-freight-flow{background-color:#f2f2f2}

/* ----- スマホ ----- */
@media screen and (max-width: 767px){
  .p-freight-worry__body{grid-template-columns:minmax(0,1fr);gap:24px}
  .p-freight-worry__img{max-width:280px;margin-inline:auto}
  .p-freight-solution::before{border-width:16px 28px 0 28px}
  .p-freight-solution__list{grid-template-columns:minmax(0,1fr);gap:16px}
  .p-freight-solution__item{padding:20px}
}


/* Contactのボタンが押し縮められて2行になるのを防ぐ（見出しに「一般貨物運送事業」を追加したため） */
.c-cta-contact > a {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ----- 一般貨物運送事業:流れ PCは5つを1列のジグザグに(Figma)。スマホ・タブレットは横スライドのまま ----- */
@media screen and (min-width: 1024px){
  .p-freight-flow .js-x-scroll-body{overflow:visible}
  .p-freight-flow .p-business-flow__list{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0;width:auto!important;overflow:visible!important;transform:none!important}
  .p-freight-flow .p-business-flow__item{width:auto!important;min-width:0;margin:0!important;display:flex;flex-direction:column;align-items:center}
  .p-freight-flow .p-business-flow__item:nth-child(even){padding-top:150px}
  .p-freight-flow .p-business-flow__item-content{position:relative;z-index:1;width:115%;text-align:center}
  .p-freight-flow .p-business-flow__item-content::after{content:"";display:block;width:1px;height:48px;margin:12px auto 0;background-color:#1a1a1a}
  .p-freight-flow .p-business-flow__item-img{width:120%;margin-top:-8px}
  .p-freight-flow .p-business-flow__item-img img{display:block;width:100%;height:auto}
  .p-freight-flow .p-business-flow__btn{display:none}
}