/* ========================================
   サブヒーロー
======================================== */
.subpage-hero{
  position: relative;
  height: 130px;

  width:100%;

  background:#0d69b2;

  border-bottom-left-radius:70px;

  overflow:hidden;
}

/* inner */
.subpage-hero-inner{

  width:1400px;

  max-width:92%;

  margin:auto;

  padding:38px 0 34px;
}

/* title */
/* title */
.subpage-hero h1{

  font-size:40px;

  font-weight:500;

  line-height:1.4;

  color:#fff;

  position:absolute;

  top:20%;

  left:80px;

  transform:none;

  text-align:left;

  width:calc(100% - 160px);
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .subpage-hero{

    border-bottom-left-radius:40px;
  }

  .subpage-hero-inner{

    padding:48px 0 42px;
  }

  .subpage-hero h1{

    top:35%;

    left:28px;

    transform:none;

    font-size:23px;

    line-height:1.5;

    width:calc(100% - 56px);
  }


}

/* ========================================
   パンくず
======================================== */
.breadcrumb-wrap{

  width:1400px;

  max-width:92%;

  margin:40px auto 0;
}

.breadcrumb{

  display:flex;

  align-items:center;

  gap:12px;

  font-size:14px;

  color:#777;
}

.breadcrumb a{

  color:#777;

  text-decoration:none;
}

.breadcrumb .current{

  color:#1c75bc;

  font-weight:700;
}

/* ========================================
   ページ内リンク
======================================== */
.page-anchor{

  width:1400px;

  max-width:92%;

  margin:50px auto 80px;

  border-bottom:
  2px solid rgba(0,0,0,0.22);
}

.anchor-inner{

  display:flex;

  gap:60px;

  overflow-x:auto;

  padding-bottom:18px;
}

/* ========================================
   ページ内リンク
======================================== */

.anchor-inner a{

  display:inline-flex;

  align-items:center;

  gap:8px;

  white-space:nowrap;

  font-size:16px;

  color:#444;

  text-decoration:none;

  transition:.25s;
}

/* ▶ */

.anchor-inner a::before{

  content:"▶";

  color:#1c75bc;

  font-size:11px;

  transition:.25s;
}

.anchor-inner a:hover{

  color:#1c75bc;
}

.anchor-inner a:hover::before{

  transform:translateX(3px);
}

/* ========================================
   解決BOX
======================================== */
.solution-box{

  margin-top:60px;

  padding:50px;

  border-radius:40px;

  background:
  linear-gradient(
    135deg,
    rgba(223,243,251,0.55),
    rgba(223,243,251,0.3)
  );

  box-shadow:
  0 15px 35px rgba(0,0,0,0.04);
}

.solution-head{

  display:flex;

  align-items:center;

  gap:20px;

  margin-bottom:24px;
}

/* icon */
.solution-icon{

  width:90px;

  height:90px;

  border-radius:50%;

  background:#1c75bc;

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  font-weight:700;
}

.solution-head h3{

  font-size:36px;

  color:#1d2d3d;
}

.solution-box p{

  font-size:17px;

  line-height:2.2;

  color:#555;
}

/* ========================================
   TOP戻る
======================================== */
.section-top{

  margin-top:30px;

  margin-bottom:20px;

  text-align:right;

    position:relative;
  z-index:100;
}
.content::before,
.content::after,
.sub-content::before,
.sub-content::after{
  pointer-events:none;
}
.section-top a{

  font-size:14px;

  color:#1c75bc;

  text-decoration:none;
}
.sub-content{

  width:1400px;

  max-width:92%;

  margin:20px auto;

  scroll-margin-top:120px;
}
/* サブページ画像 */
.sub-content .image{

  display:flex;

  justify-content:center;
}

.sub-content .image img{

  width:100%;

  max-width:720px;

  height:auto;

  aspect-ratio:1 / 1;

  object-fit:cover;
}
/* ========================================
   サブページ画像
======================================== */
.sub-content .content-item .image{

  display:flex;

  justify-content:center;

  align-items:flex-start;
}

.sub-content .content-item .image img{

  width:100%;

  max-width:520px !important;

  height:auto;

  aspect-ratio:1 / 1;

  object-fit:cover;

  border-radius:40px;
}
.sub-content .content-item{

  grid-template-columns:
  1.2fr
  0.8fr;
}
/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .page-anchor{

    margin:30px auto 50px;
  }

  .anchor-inner{

    gap:30px;
  }

  .sub-content{

    margin:80px auto;
  }

  .sub-inner{

    grid-template-columns:1fr;

    gap:40px;
  }

  .sub-inner.reverse .sub-text,
  .sub-inner.reverse .sub-image{

    order:initial;
  }

  .sub-text h2{

    font-size:34px;

    line-height:1.5;
  }

  .sub-desc{

    font-size:18px;
  }

  .sub-body{

    font-size:15px;

    line-height:2;
  }

  .solution-box{

    padding:32px 24px;

    border-radius:30px;
  }

  .solution-head{

    flex-direction:column;

    align-items:flex-start;
  }

  .solution-icon{

    width:70px;

    height:70px;

    font-size:15px;
  }

  .solution-head h3{

    font-size:28px;

    line-height:1.5;
  }

}
/* ========================================
   解決矢印
======================================== */
.solution-arrow{

  width:90px;

  height:90px;

  margin:50px auto 40px;

  border-radius:50%;

  background:#fff;

  border:
  2px solid rgba(28,117,188,0.15);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:42px;

  color:#1c75bc;

  box-shadow:
  0 15px 30px rgba(0,0,0,0.05);
}
/* ========================================
   solution content
======================================== */
.solution-content{

  display:grid;

  grid-template-columns:
  1fr
  320px;

  gap:40px;

  align-items:center;

  margin-top:30px;
}

/* text */
.solution-text p{

  font-size:17px;

  line-height:2.2;

  color:#555;
}

/* ========================================
   solution image
======================================== */
.solution-image{

  display:flex;

  justify-content:center;

  align-items:center;
}

.solution-image img{

  width:100%;

  max-width:350px !important;

  height:auto;

  aspect-ratio:1 / 1;

  object-fit:cover;

  border-radius:24px;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.08);
}
/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .solution-content{

    grid-template-columns:1fr;

    gap:24px;
  }

  .solution-image img{

    max-width:220px;
  }

}
/* ボタン余白 */
.sub-content .content-btn{

  margin-top:40px;
}
/* ========================================
   技術セクション
======================================== */
.tech-section{

  width:1400px;

  max-width:92%;

  margin:140px auto;
}

/* wrap */
.tech-box-wrap{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  margin-top:60px;
}

/* card */
.tech-card{

  padding:50px;

  border-radius:36px;

  background:
  rgba(255,255,255,0.88);

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);
}

.tech-card h3{

  font-size:32px;

  margin-bottom:28px;

  color:#1c75bc;
}

.tech-card p{

  font-size:16px;

  line-height:2.2;

  color:#555;

  margin-bottom:18px;
}

/* ========================================
   認定
======================================== */
.cert-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

  margin-top:60px;
}

/* card */
.cert-card{

  padding:40px;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(223,243,251,0.55),
    rgba(223,243,251,0.3)
  );

  box-shadow:
  0 10px 25px rgba(0,0,0,0.04);
}

.cert-card h3{

  font-size:24px;

  margin-bottom:18px;

  color:#1c75bc;
}

.cert-card p{

  font-size:15px;

  line-height:2;

  color:#555;
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .tech-section{

    margin:90px auto;
  }

  .tech-box-wrap{

    grid-template-columns:1fr;

    gap:24px;
  }

  .tech-card{

    padding:32px 24px;
  }

  .tech-card h3{

    font-size:26px;

    line-height:1.5;
  }

  .tech-card p{

    font-size:15px;
  }

  .cert-grid{

    grid-template-columns:1fr;

    gap:20px;
  }

  .cert-card{

    padding:28px 24px;
  }

  .cert-card h3{

    font-size:22px;
  }

}
/* ========================================
   case layout
======================================== */
.case-layout{

  display:grid;
margin-top:-40px;
  grid-template-columns:
  1fr
  420px;

  gap:60px;

  align-items:start;
}

/* reverse */
.case-layout.reverse .case-text{

  order:2;
}

.case-layout.reverse .case-photos{

  order:1;
}

/* ========================================
   text
======================================== */
.case-text{

  width:100%;
}

/* ========================================
   図
======================================== */
.case-diagram{

  margin-top:40px;
}

.case-diagram img{

  width:100%;

  border-radius:24px;

  box-shadow:
  0 12px 30px rgba(0,0,0,0.05);
}

/* ========================================
   photos
======================================== */
.case-photos{

  display:flex;

  flex-direction:column;
margin-top:-60px;
  gap:30px;
}

/* photo */
.case-photo img{

  width:100%;

  border-radius:28px;

  display:block;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.08);
}

/* ========================================
   photos
======================================== */
.case-photos{

  display:flex;

  flex-direction:column;

  gap:30px;

  align-items:center;

  justify-content:flex-start;

  padding-top:120px;
}

/* photo */
.case-photo{

  width:100%;

  display:flex;

  justify-content:center;
}

.case-photo img{

  width:100%;

  max-width:420px !important;

  aspect-ratio:1 / 1;

  object-fit:cover;

  border-radius:28px;

  display:block;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.08);
}

/* ========================================
   図
======================================== */
.case-diagram{

  margin-top:40px;

  display:flex;

  justify-content:center;
}

.case-diagram img{

  width:100%;

  max-width:400px !important;

  border-radius:24px;

  display:block;

  box-shadow:
  0 12px 30px rgba(0,0,0,0.05);
}
.case-diagram2{

  margin-top:40px;

  display:flex;

  justify-content:center;
}

.case-diagram2 img{

  width:100%;

  max-width:600px !important;

  border-radius:24px;

  display:block;

  box-shadow:
  0 12px 30px rgba(0,0,0,0.05);
}
/* ========================================
   施工例ラベル
======================================== */
.case-label{

  display:flex;

  align-items:center;

  justify-content:center;

  width:260px;

  height:56px;

  margin:40px auto 28px;

  border-radius:999px;

  border:
  2px solid #1c75bc;

  background:#fff;

  color:#1c75bc;

  font-size:28px;

  font-weight:700;

  letter-spacing:0.08em;

  box-shadow:
  0 8px 20px rgba(0,0,0,0.04);
}
/* ========================================
   case layout
======================================== */
.case-layout{

  display:grid;

  grid-template-columns:
  minmax(0,1fr)
  420px;

  gap:10px;

  align-items:start;
}

/* ========================================
   reverse
======================================== */
.case-layout.reverse{

  grid-template-columns:
  420px
  minmax(0,1fr);
}

/* reverse */
.case-layout.reverse .case-text{

  order:2;
}

.case-layout.reverse .case-photos{

  order:1;
}
/* ========================================
   reverse
======================================== */
.content-item.reverse{

  direction:rtl;
}

/* 中身は戻す */
.content-item.reverse .text,
.content-item.reverse .image{

  direction:ltr;
}
/* ========================================
   スマホ
======================================== */
/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .case-layout,
  .case-layout.reverse{

    grid-template-columns:minmax(0, 1fr);

    width:95%;

    max-width:95%;

    margin-top:0;

    gap:40px;
  }

  .case-layout.reverse .case-text,
  .case-layout.reverse .case-photos{

    order:initial;
  }

  /* グリッドの子要素が横に広がるのを防止 */
  .case-text,
  .case-photos{

    width:100%;

    max-width:100%;

    min-width:0;
  }

  .case-photos{

    gap:20px;

    margin-top:0;

    padding-top:0;
  }

  .case-photo{

    width:100%;

    max-width:100%;
  }

  .case-photo img{

    width:100%;

    max-width:100% !important;

    height:auto;

    aspect-ratio:auto;
  }

  .case-diagram,
  .case-diagram2{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

    max-width:100%;

    gap:20px;
  }

  .case-diagram img,
  .case-diagram2 img{

    width:100%;

    max-width:100% !important;

    height:auto;
  }

  .case-catalog,
  .catalog-links{

    width:100%;

    max-width:100%;

    min-width:0;

    box-sizing:border-box;
  }

  .catalog-download-btn,
  .catalog-case-download{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

    white-space:normal;

    overflow-wrap:anywhere;
  }
}

/* ========================================
   product diagram
======================================== */
.product-diagram{

  margin-top:40px;

  display:flex;

  justify-content:center;
}

.product-diagram img{

  width:100%;

  max-width:520px;

  border-radius:24px;

  box-shadow:
  0 12px 30px rgba(0,0,0,0.05);
}

/* ========================================
   規格表
======================================== */
.product-spec{

  width:100%;

  max-width:900px;

  margin:70px auto 0;

  background:
  rgba(255,255,255,0.9);

  border-radius:30px;

  overflow:hidden;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);
}

/* head */
.product-spec .spec-head{

  background:#efe6c8;

  text-align:center;

  font-size:28px;

  font-weight:700;

  padding:24px;
}

/* table */
.product-spec table{

  width:100%;

  border-collapse:collapse;
}

/* th */
.product-spec th{

  background:#f7f7f7;

  font-size:22px;

  padding:18px;

  border:
  2px solid #222;
}

/* td */
.product-spec td{

  text-align:center;

  font-size:22px;

  padding:18px;

  border:
  2px solid #222;
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .product-spec{

    overflow-x:auto;
  }

  .product-spec .spec-head{

    font-size:20px;

    line-height:1.6;
  }

  .product-spec th,
  .product-spec td{

    font-size:16px;

    padding:12px;
  }

}
/* ========================================
   product layout
======================================== */
.product-layout{

  display:grid;

  grid-template-columns:
  minmax(0,1fr)
  460px;

  gap:60px;

  align-items:start;
}

/* ========================================
   left
======================================== */
.product-info{

  width:100%;
}

/* ========================================
   図
======================================== */
.product-diagram{

  margin-top:40px;

  display:flex;

  justify-content:center;
}

.product-diagram img{

  width:100%;

  max-width:520px;

  border-radius:24px;

  box-shadow:
  0 12px 30px rgba(0,0,0,0.05);
}

/* ========================================
   グラフ
======================================== */
.product-graph-wrap{

  margin-top:60px;

  display:flex;

  flex-direction:column;

  gap:50px;
}

/* graph */
.product-graph{

  background:
  rgba(255,255,255,0.9);

  border-radius:28px;

  padding:24px;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);
}

.product-graph h3{

  font-size:30px;

  margin-bottom:30px;

  text-align:center;

  color:#1c75bc;
}

/* image */
.product-graph img{

  width:100%;

  display:block;

  border-radius:12px;
  max-width:520px;
}

/* ========================================
   right
======================================== */
.product-side{

  display:flex;

  flex-direction:column;

  gap:40px;
}

/* ========================================
   商品写真
======================================== */
.product-photo img{

  width:100%;

  border-radius:30px;

  display:block;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.08);
}

/* ========================================
   規格表
======================================== */
.product-spec{

  width:100%;

  background:
  rgba(255,255,255,0.92);

  border-radius:30px;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);

  padding:0 0 20px;
}

/* head */
.product-spec .spec-head{

  background:#efe6c8;

  text-align:center;

  font-size:24px;

  font-weight:700;

  padding:22px;
}

/* table */
.product-spec table{
  width:100%;

  border-collapse:collapse;

  background:#fff;
}

/* th */
.product-spec th{

  background:#f7f7f7;

  font-size:18px;

  padding:16px;

  border:
  2px solid #222;
}

/* td */
.product-spec td{

  text-align:center;

  font-size:18px;

  padding:16px;

  border:
  2px solid #222;
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .product-layout{

    grid-template-columns:1fr;

    gap:40px;
  }

.product-graph{

  padding:24px;
}

  .product-graph h3{

    font-size:24px;
  }

  .product-spec{

    overflow-x:auto;
  }

  .product-spec .spec-head{

    font-size:18px;

    line-height:1.6;
  }

  .product-spec th,
  .product-spec td{

    font-size:14px;

    padding:10px;
  }

}
/* wrap */
.spec-table-wrap{

  margin-bottom:50px;
}

/* title */
.spec-title{

  text-align:center;

  font-size:34px;

  font-weight:700;

  margin-bottom:30px;

  color:#1d2d3d;
}
/* ========================================
   graph image
======================================== */
.product-graph img{

  width:100%;

  max-width:420px;

  margin:auto;

  display:block;

  border-radius:12px;
}
/* ========================================
   product reverse
======================================== */
.product-layout.reverse{

  grid-template-columns:
  460px
  minmax(0,1fr);
}

/* 左 */
.product-layout.reverse .product-side{

  order:1;
}

/* 右 */
.product-layout.reverse .product-info{

  order:2;
}
/* ========================================
   table title
======================================== */
.spec-main-title{

  margin-top:90px;

  margin-bottom:30px;

  text-align:center;

  font-size:42px;

  font-weight:700;

  color:#1d2d3d;

  letter-spacing:0.05em;
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .spec-main-title{

    margin-top:60px;

    margin-bottom:24px;

    font-size:22px;

    line-height:1.5;
  }

}
/* ========================================
   spec note
======================================== */
.spec-note{

  margin-top:18px;

  text-align:right;

  font-size:14px;

  color:#888;

  font-weight:500;
}
/* ========================================
   strength
======================================== */
.strength-section{

  padding:120px 0;
}

/* layout */
.strength-layout{

  display:grid;

  grid-template-columns:50% 50%;

  gap:20px;

  align-items:start;

  margin-top:70px;
}

/* left */
.strength-image{

  display:flex;

  justify-content:center;
}

.strength-image img{

  width:100%;

  max-width:650px;

  border-radius:28px;

  display:block;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);
}

/* right */
.strength-content{

  max-width:650px;

  background:
  rgba(255,255,255,0.92);

  border-radius:36px;

  padding:10px;

  box-shadow:
  0 15px 35px rgba(0,0,0,0.05);
}

/* title */
.strength-content h3{

  font-size:36px;

  margin:26px 0 34px;

  color:#1d2d3d;
}

/* text */
.strength-content p{

  font-size:16px;

  line-height:2.2;

  color:#555;

  margin-bottom:24px;
}

/* diagram */
.strength-diagram{

  margin-top:50px;

  display:flex;

  justify-content:center;
}

.strength-diagram img{

  width:100%;

  max-width:360px;

  display:block;
}

/* ========================================
   スマホ
======================================== */
@media(max-width:768px){

  .strength-section{

    padding:80px 0;
  }

  .strength-layout{

    grid-template-columns:1fr;

    gap:40px;
  }

  .strength-content{

    padding:30px 24px;

    border-radius:24px;
  }

  .strength-content h3{

    font-size:28px;

    margin:20px 0 24px;
  }

  .strength-content p{

    font-size:15px;

    line-height:2;
  }

}
.case-catalog{

    margin-top:30px;
}

.case-catalog h4{

    font-size:18px;
    color:#1b75bc;

    margin-bottom:15px;
}

.catalog-links{

    display:flex;

    justify-content:flex-start;

    gap:15px;

    flex-wrap:wrap;
}
.catalog-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:220px;
    width:auto;

    padding:2px 25px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(
        90deg,
        #56a9e8,
        #1f79c5
    );

    font-size:14px;
    font-weight:700;

    transition:.3s;

    border-radius:999px;

}

.catalog-btn:hover{

    transform:translateY(-2px);

    opacity:.9;
}
@media (max-width:768px){

    .catalog-links{

        flex-direction:column;
    }

    .catalog-btn{

        width:100%;
        min-width:auto;
    }

}
/* =========================
   商品ヘッダー
========================= */

.product-header{

    display:grid;
    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:start;

    margin-bottom:80px;
}

.product-header-right{

    position:sticky;
    top:100px;

    display:flex;
    flex-direction:column;

    gap:25px;

}
.product-header-left{

    position:sticky;

    display:flex;
    flex-direction:column;

}
.product-photo{

    background:#fff;

    border-radius:20px;

    padding:15px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);
}

.product-photo img{

    width:100%;

    display:block;

    border-radius:10px;
}

.photo-title{

    font-size:24px;

    font-weight:700;

    color:#1f2d44;

    margin:0;
}
.product-block-title{

    background:#efefef;

    padding:14px 24px;

    font-size:18px;

    font-weight:700;

    color:#444;

    border-radius:6px;

    margin-bottom:20px;
}
/* =========================
   DLボタン
========================= */

/* =========================================
   製品ページボタン
========================================= */

.product-buttons{

    display:flex;

    gap:20px;

    margin-top:30px;

    flex-wrap:wrap;
}

/* 共通 */

.btn-product{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:230px;          /* ←固定幅 */

    padding:14px 30px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-size:20px;

    font-weight:700;

    transition:.3s;
}

.btn-product:hover{

    transform:translateY(-2px);

    opacity:.9;
}


/* ダウンロード */

.btn-download{

    background:#1d7ed6;
}

.btn-case-download{

    background:#1d7ed6;
}

/* 施工事例 */

.btn-case{

    background:#ff8000;
}

.product-download{

    display:inline-block;

    margin-top:30px;

    padding:14px 30px;

    border-radius:50px;

    background:#1d7ed6;

    color:#fff;

    text-decoration:none;

    font-weight:700;
}

.product-download:hover{

    opacity:.85;
}

/* =========================
   見出し
========================= */

.section-head-mini{

    text-align:center;

    margin:80px 0 40px;
}

.section-head-mini h3{

    font-size:32px;

    color:#1f2d44;
}

/* =========================
   規格
========================= */

.spec-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-bottom:10px;
}
.spec-grid-single{

    width:100%;

    margin-bottom:10px;
}
.spec-table-wrap{

    background:#fff;

    padding:20px;

    border-radius:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.05);
}
.spec-table-wrap table{

    width:100%;

    border-collapse:collapse;
}
.spec-table-wrap th{

    background:#f5f5f5;

    border:1px solid #ddd;

    padding:12px;

    text-align:center;
}
.spec-table-wrap td{

    border:1px solid #ddd;

    padding:12px;

    text-align:center;
}
.spec-head{

    background:#e9e1c3;

    padding:15px;

    font-weight:700;

    text-align:center;
}
/* =========================
   性能
========================= */

.performance-box{

    text-align:center;

    margin-bottom:80px;
}

.performance-box img{

    max-width:800px;

    width:100%;
}

/* =========================
   施工事例
========================= */

.case-gallery{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    margin-bottom:100px;
}

.case-gallery img{

    width:100%;

    border-radius:12px;

    transition:.3s;
}

.case-gallery img:hover{

    transform:scale(1.03);
}

/* =========================
   SP
========================= */

@media(max-width:768px){

.product-header{

    grid-template-columns:1fr;

}

.spec-grid{

    grid-template-columns:1fr;
}

.case-gallery{

    grid-template-columns:
    repeat(2,1fr);
}

.section-head-mini h3{

    font-size:24px;
}

}
.catalog-download-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    height:44px;

    padding:0 22px;

    border-radius:999px;

    background:#1d7ed6;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    line-height:1;

    transition:.3s;
}

.catalog-download-btn:hover{

    opacity:.85;

    transform:translateY(-2px);
}
.catalog-case-download{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    height:44px;

    padding:0 22px;

    border-radius:999px;

    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    line-height:1;

    transition:.3s;

    background:#ff8000;
}
.catalog-case-download:hover{

    opacity:.85;

    transform:translateY(-2px);
}