@charset "utf-8";

/* ==========================================================
   J-BOX 大型倉庫LP
   ========================================================== */

.souko-lp.sub { width: 100%; max-width: none; margin: 0; padding: 0; }
.souko-lp { overflow: hidden; color: #1a2c41; background: #fff; }
.souko-lp *, .souko-lp *::before, .souko-lp *::after { box-sizing: border-box; }
.souko-lp img { max-width: 100%; height: auto; }
.souko-lp a { text-decoration: none; }
.souko-lp .souko-container { width: calc(100% - 40px); max-width: 1160px; margin: 0 auto; }
.souko-lp .souko-section { padding: 68px 0; }
.souko-lp .souko-swipe-guide { display: none; }
.pc-only { display: inline; }

/* SECTION HEAD */
.souko-lp .souko-section-head { max-width: 850px; margin: 0 auto 34px; text-align: center; }
.souko-lp .souko-en { margin: 0 0 7px; color: #99c800; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.souko-lp .souko-section-head h2 { margin: 0 0 14px; color: #17344f; font-size: 32px; font-weight: 700; line-height: 1.45; }
.souko-lp .souko-section-head > p:last-child { margin: 0; color: #58646f; font-size: 15px; line-height: 1.85; }

/* BUTTON */
.souko-lp .souko-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 27px; border-radius: 30px; font-size: 16px; font-weight: 700; transition: .18s ease; }
.souko-lp .souko-btn-primary, .souko-lp .souko-btn-cta { border: 2px solid #f28c00; background: #f28c00; color: #fff; box-shadow: 0 6px 14px rgba(242,140,0,.18); }
.souko-lp .souko-btn-outline { border: 2px solid #17344f; background: #fff; color: #17344f; }
.souko-lp .souko-btn-primary:hover, .souko-lp .souko-btn-cta:hover { background: #dc7d00; border-color: #dc7d00; transform: translateY(-2px); }

/* FV */
.souko-lp .souko-fv {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
}
.souko-lp .souko-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.souko-lp .souko-fv-image-wrap {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
.souko-lp .souko-fv-image-wrap picture {
  display: block;
  width: 100% !important;
}
.souko-lp .souko-fv-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: top center !important;
}
.souko-lp .souko-fv-hotspot {
  position: absolute;
  z-index: 20;
  display: block;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.souko-lp .souko-fv-hotspot-estimate { left: 2.9%; top: 79.4%; width: 17.9%; height: 10.0%; border-radius: 40px; }
.souko-lp .souko-fv-hotspot-catalog { left: 21.3%; top: 79.4%; width: 12.3%; height: 10.0%; border-radius: 40px; }
.souko-lp .souko-fv-hotspot-feature { left: 4.5%; top: 88.5%; width: 14%; height: 7%; }
.souko-lp .souko-fv-hotspot:focus-visible { outline: 3px solid #f28c00; outline-offset: 2px; }

/* CONCERN */
.souko-lp .souko-concern-section { background:#f6f8f2; }
.souko-lp .souko-check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:1020px; margin:0 auto; padding:0; list-style:none; }
.souko-lp .souko-check-grid li { position:relative; min-height:64px; padding:18px 16px 16px 46px; border:1px solid #dce2d6; border-radius:8px; background:#fff; color:#30455a; font-size:14px; font-weight:600; line-height:1.6; }
.souko-lp .souko-check-grid li::before { content:"✓"; position:absolute; top:15px; left:17px; color:#8ebc00; font-size:20px; font-weight:700; }
.souko-lp .souko-lead-box { max-width:1020px; margin:22px auto 0; padding:18px 22px; border-radius:8px; background:#edf6d8; color:#17344f; font-size:14px; font-weight:600; line-height:1.75; text-align:center; }

/* USE */
.souko-lp .souko-use-section { background:#fff; }
.souko-lp .souko-use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.souko-lp .souko-use-grid article { padding:24px 20px; border:1px solid #dfe5dc; border-top:4px solid #a5cf28; border-radius:9px; background:#fff; }
.souko-lp .souko-use-grid span { display:block; margin-bottom:12px; color:#99c800; font-size:25px; font-weight:700; }
.souko-lp .souko-use-grid h3 { margin:0 0 9px; color:#17344f; font-size:18px; }
.souko-lp .souko-use-grid p { margin:0; color:#59636c; font-size:13px; line-height:1.8; }

/* FEATURE */
.souko-lp .souko-feature-section { background:#f6f8f2; }
.souko-lp .souko-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.souko-lp .souko-feature-grid article { position:relative; min-height:215px; padding:28px 24px 24px; border-radius:10px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.045); }
.souko-lp .souko-feature-no { margin:0 0 12px; color:#99c800; font-size:29px; font-weight:700; line-height:1; }
.souko-lp .souko-feature-grid h3 { margin:0 0 10px; color:#17344f; font-size:18px; line-height:1.5; }
.souko-lp .souko-feature-grid article > p:last-child { margin:0; color:#59636c; font-size:13px; line-height:1.85; }

/* PHOTO CASE */
.souko-lp .souko-case-section { background:#fff; }
.souko-lp .souko-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; max-width:1040px; margin:0 auto; }
.souko-lp .souko-case-card { overflow:hidden; border:1px solid #e2e6df; border-radius:12px; background:#fff; box-shadow:0 5px 18px rgba(0,0,0,.07); }
.souko-lp .souko-case-image { overflow:hidden; background:#eef1ec; }
.souko-lp .souko-case-image img { display:block; width:100%; height:auto; }
.souko-lp .souko-case-body { padding:20px 18px 22px; }
.souko-lp .souko-case-label { display:inline-block; margin:0 0 9px; padding:4px 8px; background:#a5cf28; color:#17344f; font-size:10px; font-weight:700; }
.souko-lp .souko-case-body h3 { margin:0 0 10px; color:#17344f; font-size:18px; line-height:1.5; }
.souko-lp .souko-case-body > p:last-child { margin:0; color:#59636c; font-size:13px; line-height:1.85; }

/* PLANNING */
.souko-lp .souko-plan-section { background:#f6f8f2; }
.souko-lp .souko-plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.souko-lp .souko-plan-grid article { padding:25px 21px; border-radius:10px; background:#edf6d8; }
.souko-lp .souko-plan-grid span { display:block; margin-bottom:10px; color:#99c800; font-size:27px; font-weight:700; }
.souko-lp .souko-plan-grid h3 { margin:0 0 9px; color:#17344f; font-size:17px; }
.souko-lp .souko-plan-grid p { margin:0; color:#59636c; font-size:13px; line-height:1.8; }

/* SPEC */
.souko-lp .souko-spec-section { background:#fff; }
.souko-lp .souko-spec-wrap { max-width:900px; margin:0 auto; }
.souko-lp .souko-spec-list { margin:0; border-top:1px solid #dce2d6; }
.souko-lp .souko-spec-list > div { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid #dce2d6; }
.souko-lp .souko-spec-list dt, .souko-lp .souko-spec-list dd { margin:0; padding:15px 18px; }
.souko-lp .souko-spec-list dt { background:#f0f6df; color:#17344f; font-size:13px; font-weight:700; }
.souko-lp .souko-spec-list dd { color:#4f5c67; font-size:13px; }
.souko-lp .souko-spec-note { margin:13px 0 0; color:#77818a; font-size:11px; line-height:1.7; }

/* COST */
.souko-lp .souko-cost-section { background:#f6f8f2; }
.souko-lp .souko-cost-list { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:1000px; margin:0 auto; padding:0; list-style:none; }
.souko-lp .souko-cost-list li { position:relative; padding:14px 14px 14px 39px; border:1px solid #dce2d6; background:#fff; color:#30455a; font-size:13px; font-weight:600; }
.souko-lp .souko-cost-list li::before { content:"✓"; position:absolute; top:11px; left:14px; color:#99c800; font-size:17px; font-weight:700; }
.souko-lp .souko-cost-note { max-width:1000px; margin:20px auto 0; color:#59636c; font-size:12px; line-height:1.8; text-align:center; }

/* FLOW */
.souko-lp .souko-flow-section { background:#fff; }
.souko-lp .souko-flow-list { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0; padding:0; list-style:none; }
.souko-lp .souko-flow-list li { position:relative; padding:22px 16px; border:1px solid #e1e6de; border-radius:8px; background:#fff; text-align:center; }
.souko-lp .souko-flow-list span { display:inline-block; margin-bottom:10px; padding:4px 8px; border-radius:15px; background:#e8f4c9; color:#789800; font-size:10px; font-weight:700; }
.souko-lp .souko-flow-list h3 { margin:0 0 8px; color:#17344f; font-size:16px; }
.souko-lp .souko-flow-list p { margin:0; color:#59636c; font-size:12px; line-height:1.7; }

/* FAQ */
.souko-lp .souko-faq-section { background:#f6f8f2; }
.souko-lp .souko-faq { max-width:900px; margin:0 auto; }
.souko-lp .souko-faq details { margin-bottom:10px; border:1px solid #dce2d6; background:#fff; }
.souko-lp .souko-faq summary { position:relative; cursor:pointer; list-style:none; padding:18px 55px 18px 52px; color:#17344f; font-size:15px; font-weight:600; line-height:1.65; }
.souko-lp .souko-faq summary::-webkit-details-marker { display:none; }
.souko-lp .souko-faq summary::before { content:"Q"; position:absolute; top:13px; left:18px; color:#99c800; font-size:23px; font-weight:700; }
.souko-lp .souko-faq summary::after { content:"＋"; position:absolute; top:14px; right:18px; color:#17344f; font-size:21px; }
.souko-lp .souko-faq details[open] summary::after { content:"−"; }
.souko-lp .souko-faq details p { margin:0; padding:0 52px 18px; color:#59636c; font-size:13px; line-height:1.9; }

/* FINAL CTA */
.souko-lp .souko-final-cta { padding:70px 0 78px; background:#17344f; color:#fff; text-align:center; }
.souko-lp .souko-final-label { display:inline-block; margin:0 0 15px; padding:6px 14px; border-radius:3px; background:#a5cf28; color:#17344f; font-size:13px; font-weight:700; }
.souko-lp .souko-final-cta h2 { margin:0 0 15px; color:#fff; font-size:31px; line-height:1.55; }
.souko-lp .souko-final-cta > .souko-container > p:not(.souko-final-label) { margin:0; color:#fff; font-size:15px; line-height:1.8; }
.souko-lp .souko-final-buttons { display:flex; justify-content:center; gap:12px; margin-top:26px; }
.souko-lp .souko-btn-white { border:2px solid #fff; background:transparent; color:#fff; }

/* SP FIXED CTA */
.souko-lp .souko-sp-fixed-cta { display:none; }
body:has(.souko-lp) .fixed-panf-bt { display:none !important; }

@media screen and (max-width: 767px) {
  .souko-lp.sub { margin-top: 50px !important; }
  .souko-lp .souko-fv { width:100%; margin:0 !important; padding:0 !important; }
  .souko-lp .souko-fv-image-wrap { width:100% !important; margin:0 !important; padding:0 !important; }
  .souko-lp .souko-fv-image { width:100% !important; height:auto !important; }
  .souko-lp .souko-fv-hotspot-estimate { left:6.7%; top:85.9%; width:86.5%; height:6.6%; border-radius:40px; }
  .souko-lp .souko-fv-hotspot-catalog { left:6.6%; top:93.3%; width:86.7%; height:5.8%; border-radius:40px; }
  .souko-lp .souko-fv-hotspot-feature { display:none; }

  .souko-lp.sub { margin-top:50px !important; }
  .souko-lp .souko-container { width:calc(100% - 30px); }
  .souko-lp .souko-section { padding:45px 0; }
  .souko-lp .souko-section-head { margin-bottom:26px; text-align:left; }
  .souko-lp .souko-en { font-size:11px; }
  .souko-lp .souko-section-head h2 { font-size:23px; line-height:1.5; }
  .souko-lp .souko-section-head > p:last-child { font-size:13px; line-height:1.8; }
  .pc-only { display:none; }

  .souko-lp .souko-area-label { margin-bottom:12px; padding:5px 10px; font-size:11px; }
  .souko-lp .souko-btn { width:100%; min-height:50px; padding:10px 12px; font-size:13px; }

  .souko-lp .souko-check-grid { grid-template-columns:1fr; gap:8px; }
  .souko-lp .souko-check-grid li { min-height:0; padding:14px 13px 13px 41px; font-size:13px; }
  .souko-lp .souko-check-grid li::before { top:11px; left:14px; }
  .souko-lp .souko-lead-box { margin-top:16px; padding:15px; font-size:12px; text-align:left; }

  .souko-lp .souko-use-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .souko-lp .souko-use-grid article { padding:18px 14px; }
  .souko-lp .souko-use-grid span { font-size:21px; }
  .souko-lp .souko-use-grid h3 { font-size:15px; }
  .souko-lp .souko-use-grid p { font-size:11px; }

  .souko-lp .souko-feature-grid { grid-template-columns:1fr; gap:9px; }
  .souko-lp .souko-feature-grid article { min-height:0; padding:19px 16px; }
  .souko-lp .souko-feature-no { display:inline-block; margin:0 10px 0 0; font-size:22px; vertical-align:middle; }
  .souko-lp .souko-feature-grid h3 { display:inline; font-size:16px; vertical-align:middle; }
  .souko-lp .souko-feature-grid article > p:last-child { margin-top:10px; font-size:12px; }

  .souko-lp .souko-swipe-guide { display:block; margin:-8px 0 12px; color:#64717d; font-size:11px; text-align:right; }
  .souko-lp .souko-case-grid { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 22px 13px 0; scrollbar-width:none; }
  .souko-lp .souko-case-grid::-webkit-scrollbar { display:none; }
  .souko-lp .souko-case-card { flex:0 0 88%; width:88%; scroll-snap-align:start; scroll-snap-stop:always; }
  .souko-lp .souko-case-body { padding:17px 15px 19px; }
  .souko-lp .souko-case-body h3 { font-size:17px; }
  .souko-lp .souko-case-body > p:last-child { font-size:12px; }

  .souko-lp .souko-plan-grid { grid-template-columns:1fr; gap:9px; }
  .souko-lp .souko-plan-grid article { padding:19px 16px; }
  .souko-lp .souko-plan-grid span { display:inline-block; margin:0 10px 0 0; font-size:21px; vertical-align:middle; }
  .souko-lp .souko-plan-grid h3 { display:inline; font-size:16px; vertical-align:middle; }
  .souko-lp .souko-plan-grid p { margin-top:9px; font-size:12px; }

  .souko-lp .souko-spec-list > div { grid-template-columns:105px 1fr; }
  .souko-lp .souko-spec-list dt, .souko-lp .souko-spec-list dd { padding:11px 10px; font-size:11px; line-height:1.6; }

  .souko-lp .souko-cost-list { grid-template-columns:1fr 1fr; gap:7px; }
  .souko-lp .souko-cost-list li { padding:12px 9px 12px 31px; font-size:11px; }
  .souko-lp .souko-cost-list li::before { top:9px; left:10px; }
  .souko-lp .souko-cost-note { margin-top:15px; font-size:11px; text-align:left; }

  .souko-lp .souko-flow-list { grid-template-columns:1fr; gap:8px; }
  .souko-lp .souko-flow-list li { text-align:left; padding:16px; }
  .souko-lp .souko-flow-list span { margin:0 8px 0 0; vertical-align:middle; }
  .souko-lp .souko-flow-list h3 { display:inline; font-size:15px; vertical-align:middle; }
  .souko-lp .souko-flow-list p { margin-top:8px; }

  .souko-lp .souko-faq summary { padding:14px 38px 14px 39px; font-size:13px; }
  .souko-lp .souko-faq summary::before { top:10px; left:12px; font-size:19px; }
  .souko-lp .souko-faq summary::after { top:11px; right:11px; }
  .souko-lp .souko-faq details p { padding:0 39px 15px; font-size:12px; }

  .souko-lp .souko-final-cta { padding:50px 15px 88px; }
  .souko-lp .souko-final-label { font-size:11px; }
  .souko-lp .souko-final-cta h2 { font-size:22px; }
  .souko-lp .souko-final-cta > .souko-container > p:not(.souko-final-label) { font-size:13px; }
  .souko-lp .souko-final-buttons { display:block; margin-top:20px; }
  .souko-lp .souko-final-buttons .souko-btn { margin-bottom:8px; }

  .souko-lp .souko-sp-fixed-cta { display:block; position:fixed; right:10px; bottom:10px; left:10px; z-index:9999; }
  .souko-lp .souko-sp-fixed-cta a { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:28px; background:#f28c00; color:#fff; font-size:15px; font-weight:700; box-shadow:0 5px 15px rgba(0,0,0,.25); }
}

@media screen and (max-width: 390px) {
  .souko-lp .souko-use-grid { grid-template-columns:1fr; }
  .souko-lp .souko-cost-list { grid-template-columns:1fr; }
  .souko-lp .souko-case-card { flex-basis:90%; width:90%; }
}