/* OCW オーダーコンソールワゴン EZ-Page */
.ocw-lp{--ink:#2d3333;--sub:#697171;--line:#dfe4e2;--soft:#f5f7f6;--mint:#a9d1cf;--mint-dark:#2d6f70;--beige:#f4efe7;max-width:1120px;margin:0 auto;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.8;box-sizing:border-box}
.ocw-lp *{box-sizing:border-box}
.ocw-lp img{max-width:100%;height:auto;vertical-align:middle}
.ocw-lp a{text-decoration:none}
.ocw-lp .ocw-hero{display:grid;grid-template-columns:42% 58%;align-items:stretch;background:var(--soft);overflow:hidden;margin:0 0 46px}
.ocw-lp .ocw-hero-copy{padding:52px 42px;display:flex;flex-direction:column;justify-content:center}
.ocw-lp .ocw-kicker{font-size:14px;letter-spacing:.11em;font-weight:700;color:var(--mint-dark);margin:0 0 8px}
.ocw-lp .ocw-hero h1{font-size:35px;line-height:1.35;letter-spacing:.02em;margin:0 0 18px;font-weight:700}
.ocw-lp .ocw-hero-lead{font-size:17px;margin:0 0 22px;color:#444}
.ocw-lp .ocw-badges{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.ocw-lp .ocw-badges li{font-size:13px;background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:99px}
.ocw-lp .ocw-hero-img{width:100%;height:100%;min-height:430px;object-fit:cover}
.ocw-lp .ocw-section{margin:64px 0}
.ocw-lp .ocw-section-head{text-align:center;margin:0 auto 30px;max-width:760px}
.ocw-lp .ocw-section-head h2{font-size:30px;line-height:1.45;margin:0 0 10px;font-weight:700}
.ocw-lp .ocw-section-head p{margin:0;color:var(--sub)}
.ocw-lp .ocw-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ocw-lp .ocw-type{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;overflow:hidden}
.ocw-lp .ocw-type-imgbox{background:#fafafa;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:20px}
.ocw-lp .ocw-type-imgbox img{max-height:100%;object-fit:contain}
.ocw-lp .ocw-type-body{padding:22px;display:flex;flex-direction:column;flex:1}
.ocw-lp .ocw-type-no{font-size:12px;color:var(--mint-dark);font-weight:700;letter-spacing:.12em}
.ocw-lp .ocw-type h3{font-size:23px;margin:3px 0 5px;line-height:1.4}
.ocw-lp .ocw-price{font-size:22px;font-weight:700;margin:8px 0}
.ocw-lp .ocw-price small{font-size:12px;font-weight:400}
.ocw-lp .ocw-type p{font-size:14px;color:var(--sub);margin:0 0 16px}
.ocw-lp .ocw-btn{display:block;margin-top:auto;background:var(--mint-dark);color:#fff!important;text-align:center;padding:13px 16px;border-radius:3px;font-weight:700;transition:.18s}
.ocw-lp .ocw-btn:hover{opacity:.86}
.ocw-lp .ocw-btn-sub{background:#fff;color:var(--mint-dark)!important;border:1px solid var(--mint-dark)}
.ocw-lp .ocw-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ocw-lp .ocw-scene{position:relative;overflow:hidden;background:#eee}
.ocw-lp .ocw-scene img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s}
.ocw-lp .ocw-scene:hover img{transform:scale(1.02)}
.ocw-lp .ocw-scene span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);padding:6px 12px;font-weight:700;font-size:14px}
.ocw-lp .ocw-fit{background:var(--beige);padding:38px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.ocw-lp .ocw-fit h2{font-size:28px;line-height:1.45;margin:0 0 12px}
.ocw-lp .ocw-fit ul{padding-left:1.3em;margin:13px 0 0}
.ocw-lp .ocw-fit-note{background:#fff;padding:22px;border-left:4px solid var(--mint-dark);font-size:14px}
.ocw-lp .ocw-features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ocw-lp .ocw-feature{background:var(--soft);padding:22px;min-height:160px}
.ocw-lp .ocw-feature strong{display:block;font-size:18px;margin-bottom:7px}
.ocw-lp .ocw-feature p{font-size:14px;color:var(--sub);margin:0}
.ocw-lp .ocw-detail{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.ocw-lp .ocw-detail:nth-child(even) .ocw-detail-img{order:2}
.ocw-lp .ocw-detail-img{background:#fff}
.ocw-lp .ocw-detail-img img{width:100%}
.ocw-lp .ocw-label{display:inline-block;background:var(--mint);padding:3px 10px;font-size:12px;font-weight:700;margin-bottom:8px}
.ocw-lp .ocw-detail h3{font-size:27px;line-height:1.45;margin:0 0 10px}
.ocw-lp .ocw-detail ul{padding-left:1.25em;margin:12px 0 18px}
.ocw-lp .ocw-detail li{margin:3px 0}
.ocw-lp .ocw-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ocw-lp .ocw-color{border:1px solid var(--line);background:#fff;overflow:hidden}
.ocw-lp .ocw-color-chip{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f7f7f7;
}

.ocw-lp .ocw-color-chip img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ocw-lp .ocw-two-chip{
  display:grid;
  grid-template-columns:1fr 1fr;
  aspect-ratio:1/1;
  height:auto;
}

.ocw-lp .ocw-two-chip img{
  width:100%;
  height:100%;
  min-width:0;
  object-fit:cover;
}

.ocw-lp .ocw-two-chip img:first-child{
  border-right:1px solid rgba(255,255,255,.8);
  box-sizing:border-box;
}
.ocw-lp .ocw-color-name{
  padding:10px 8px;
  text-align:center;
  font-size:12px;
  line-height:1.45;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.ocw-lp .ocw-color-name b{
  display:block;
  width:100%;
  text-align:center;
  font-size:13px;
}

.ocw-lp .ocw-table-wrap{overflow-x:auto;border:1px solid var(--line)}
.ocw-lp table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}
.ocw-lp th,.ocw-lp td{padding:15px 13px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:14px}
.ocw-lp th{background:var(--soft);font-weight:700}
.ocw-lp th:first-child,.ocw-lp td:first-child{text-align:left;font-weight:700}
.ocw-lp .ocw-order{background:#eef6f5;padding:42px 34px;text-align:center;margin-top:58px}
.ocw-lp .ocw-order h2{font-size:29px;margin:0 0 8px}
.ocw-lp .ocw-order p{margin:0 0 24px;color:var(--sub)}
.ocw-lp .ocw-order-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:0 auto}
.ocw-lp .ocw-related{margin-top:18px;text-align:center}
.ocw-lp .ocw-related a{color:var(--mint-dark);font-weight:700;text-decoration:underline}
.ocw-lp .ocw-note{font-size:12px;color:#777;margin-top:14px}
@media(max-width:760px){
.ocw-lp{line-height:1.7}
.ocw-lp .ocw-hero{grid-template-columns:1fr;margin-bottom:34px}
.ocw-lp .ocw-hero-copy{padding:30px 20px}
.ocw-lp .ocw-hero h1{font-size:27px}
.ocw-lp .ocw-hero-lead{font-size:15px}
.ocw-lp .ocw-hero-img{min-height:0;aspect-ratio:4/3}
.ocw-lp .ocw-section{margin:44px 0}
.ocw-lp .ocw-section-head{padding:0 14px;margin-bottom:22px}
.ocw-lp .ocw-section-head h2{font-size:24px}
.ocw-lp .ocw-type-grid,.ocw-lp .ocw-features,.ocw-lp .ocw-order-grid{grid-template-columns:1fr}
.ocw-lp .ocw-scene-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.ocw-lp .ocw-scene span{left:7px;bottom:7px;padding:4px 8px;font-size:12px}
.ocw-lp .ocw-fit{grid-template-columns:1fr;padding:25px 18px}
.ocw-lp .ocw-fit h2{font-size:23px}
.ocw-lp .ocw-detail{grid-template-columns:1fr;gap:16px;padding:27px 0}
.ocw-lp .ocw-detail:nth-child(even) .ocw-detail-img{order:0}
.ocw-lp .ocw-detail h3{font-size:23px}
.ocw-lp .ocw-color-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.ocw-lp .ocw-color-name{font-size:10px;padding:8px 3px}
.ocw-lp .ocw-color-name b{font-size:11px}
.ocw-lp .ocw-order{padding:30px 17px}
.ocw-lp .ocw-order h2{font-size:24px}
}

.ocw-common-features {
  margin: 70px auto;
  max-width: 1180px;
  padding: 0 20px;
}

.ocw-section-title {
  margin-bottom: 34px;
  text-align: center;
}

.ocw-section-title h2 {
  margin: 0 0 12px;
  font-size: 38px;
  line-height: 1.4;
  font-weight: 700;
  color: #222;
}

.ocw-section-title p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #666;
}

.ocw-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.ocw-feature-card {
  background: #f4f6f4;
  border-radius: 6px;
  overflow: hidden;
}

.ocw-feature-card__image {
  aspect-ratio: 4 / 3;
  background: #dfe6e5;
}

.ocw-feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ocw-feature-card__body {
  padding: 20px 20px 22px;
}

.ocw-feature-card__body h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5;
  color: #222;
}

.ocw-feature-card__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.ocw-feature-card__body small {
  font-size: 13px;
  color: #777;
}

@media screen and (max-width: 900px) {
  .ocw-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .ocw-section-title h2 {
    font-size: 30px;
  }
}

@media screen and (max-width: 640px) {
  .ocw-common-features {
    margin: 50px auto;
    padding: 0 14px;
  }

  .ocw-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ocw-section-title {
    margin-bottom: 24px;
  }

  .ocw-section-title h2 {
    font-size: 26px;
  }

  .ocw-section-title p {
    font-size: 14px;
    line-height: 1.8;
  }

  .ocw-feature-card__body {
    padding: 16px 16px 18px;
  }

  .ocw-feature-card__body h3 {
    font-size: 17px;
  }

  .ocw-feature-card__body p {
    font-size: 14px;
  }
}
/* =========================================
   寸法図 クリック拡大
========================================= */

.ocw-detail-img {
  position: relative;
}

.ocw-zoom-img {
  cursor: zoom-in;
  transition: opacity .2s ease;
}

.ocw-zoom-img:hover {
  opacity: .88;
}

.ocw-zoom-guide {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

.ocw-zoom-guide::before {
  content: "＋ ";
  font-weight: bold;
}

/* モーダル */
.ocw-zoom-modal {
  display: none;
  position: fixed;
  z-index: 100000;
  inset: 0;
}

.ocw-zoom-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocw-zoom-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  cursor: zoom-out;
}

.ocw-zoom-modal-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 60px);
  max-width: 1200px;
  max-height: calc(100% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocw-zoom-modal-inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  background: #fff;
  object-fit: contain;
}

.ocw-zoom-close {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -18px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 30px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

@media screen and (max-width: 767px) {

  .ocw-zoom-guide {
    font-size: 12px;
  }

  .ocw-zoom-modal-inner {
    width: calc(100% - 20px);
    max-height: calc(100% - 20px);
  }

  .ocw-zoom-modal-inner img {
    max-height: calc(100vh - 30px);
  }

  .ocw-zoom-close {
    top: -8px;
    right: -4px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 40px;
  }
}
/* OCWカラー表示：既存 [class*="col"] の影響を解除 */
.ocw-lp .ocw-color,
.ocw-lp .ocw-color-chip,
.ocw-lp .ocw-color-name {
  float: none !important;
  margin-left: 0 !important;
}

.ocw-lp .ocw-color-name {
  width: 100%;
  padding: 10px 8px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  text-align: center !important;
  font-size: 12px;
  line-height: 1.45;
}

.ocw-lp .ocw-color-name b {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center !important;
  font-size: 13px;
}

/* =========================================
   セクション見出し帯を100%幅にする
========================================= */
.ocw-lp .ocw-section-head{
  width:100%;
  max-width:none;
  margin:0 0 30px;
}

.ocw-lp .ocw-section-head h2{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin-left:0;
  margin-right:0;
}