@charset "EUC-JP";

/* =====================================
   工事施工例ページ 共通CSS
   kozire122.css
   PC用：施工例＋費用強化版
===================================== */

/* ---------- 基本 ---------- */

.pageID{
  padding:5px;
  text-align:center;
}

h2.entry_title{
  display:none;
}

.bigdai{
  padding:5px 5px 5px 10px;
  margin:10px 0;
  font-size:110%;
  text-align:left;
  font-weight:bold;
  background-image:url("https://www.gripgrip.jp/pic-labo/tyekku.gif");
}

.bigdai div{
  float:right;
  font-size:11px;
}

/* ---------- 前後リンク ---------- */

#idou{
  overflow:hidden;
  margin:0;
  padding:0;
}

#idou li{
  display:block;
  width:33%;
  float:left;
  text-align:center;
}

#idou a{
  text-align:center;
  color:#00f;
}

/* ---------- 写真 ---------- */

.syasin01{
  font-size:10px;
}

.syasin01 img{
  margin:10px 10px 20px;
  padding:0;
  display:inline;
  height:266px;
  width:auto;
  position:relative;
  box-shadow:5px 5px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.4);
  -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.4);
}

#yoko2 img + img{
  margin-left:8px;
}

/* ---------- 詳細表 ---------- */

.syosai{
  width:100%;
}

.syosai .yubi{
  width:20px;
  padding:0 0 3px;
}

.syosai .pcPointImg{
  width:50px;
  padding:0 0 3px;
}

.syosai th,
.syosai td{
  border:1px solid #999;
  padding:10px;
  vertical-align:middle;
}

.syosai th{
  text-align:center;
  background-color:#ececec;
  font-weight:normal;
}

.syosai a{
  color:blue;
  text-decoration:none;
}

.syosai a:hover{
  text-decoration:underline;
}

/* ---------- 使用商品表 ---------- */

#center3 .syohin{
  margin:0;
}

#center3 .syohin td,
#center3 .syohin th{
  border:none;
  padding:0;
  background-color:#fff;
  text-align:left;
}

#center3 .syohin th{
  font-weight:normal;
  padding-left:20px;
}

/* ---------- 費用表 ---------- */

#center3 .hiyo{
  margin:0;
}

#center3 .hiyo td{
  padding:5px;
  border:none;
}

#center3 .hiyo .en{
  text-align:right;
}

#center3 .hiyo .goke td{
  border-top:1px solid #333;
}

#center3 .hiyo .goke .hoken{
  border:none;
}

/* ---------- 戻る ---------- */

.modoru{
  display:inline-block;
  font-size:15px;
  margin:20px auto;
  color:blue;
}

/* ---------- 旧・費用目安表用 ---------- */

.kukuri{
  margin:50px 0 0;
  padding:0;
  text-align:center;
}

#yose{
  display:table;
  margin:0 auto;
  padding:0;
}

.daime{
  display:block;
  margin:0 0 10px;
  padding:0;
  width:100%;
  background-image:url("https://www.gripgrip.jp/pic-labo/underline_blue.gif");
  text-align:center;
}

#betto{
  text-align:right;
  font-size:12px;
  margin:0;
  padding:0;
  line-height:1em;
}

#center3 .hiyo + .hiyo{
  margin:40px 0 0;
}

#center3 .koujinoirai{
  margin:40px 0;
}

.sabdai{
  display:block;
  margin:0 0 10px;
  padding:0;
  width:100%;
}

.hiyo h3{
  font-size:18px;
  line-height:1.5em;
}

#center3 #ranku,
.setume{
  margin:0;
  padding:0;
  text-align:left;
}

#center3 #ranku th,
#center3 #ranku td{
  padding:10px;
  border:1px solid #333;
  vertical-align:middle;
}

#ranku th{
  text-align:center;
  font-weight:bold;
}

#ranku .arfbt{
  text-align:center;
}

#ranku .kakaku{
  text-align:right;
}

.kakaku{
  color:red;
}

.kakaku02{
  color:blue;
}

.kakaku03{
  font-size:13px;
}

.smhyo{
  display:none;
}

span.sr{
  padding:0 1em;
}

#modoru2{
  margin-bottom:50px;
}

/* ---------- 不要表示の非表示 ---------- */

.mainCont .pageTop,
.mainCont .state{
  display:none !important;
}

/* ---------- 通販・見積リンク ---------- */

.kochira01{
  font-size:17px;
  line-height:1.5em;
  text-align:center;
  color:blue;
  margin:30px auto 50px;
}

.kochira02{
  font-size:17px;
  line-height:1.5em;
  text-align:center;
  color:blue;
  margin:15px auto 50px;
}

/* =====================================
   費用SEO強化パーツ
===================================== */

/* 見出し：この手すり工事の費用 */
.gg-cost-h2{
  margin:30px 0 12px;
  padding-left:10px;
  border-left:5px solid #8b6b3f;
  font-size:22px;
  line-height:1.4;
  color:#2f2a24;
}

/* 費用目安ミニ説明 */
.gg-cost-mini{
  max-width:620px;
  margin:30px auto 20px;
  padding:18px;
  background:#f7f1e7;
  border:1px solid #e3d5bf;
  box-sizing:border-box;
  text-align:left;
}

.gg-cost-mini h3{
  margin:0 0 12px;
  padding-left:10px;
  border-left:4px solid #8b6b3f;
  font-size:18px;
  line-height:1.4;
  color:#2f2a24;
}

.gg-cost-mini p{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.75;
  color:#333;
}

.gg-cost-mini p:last-child{
  margin-bottom:0;
}

.gg-cost-mini strong{
  color:#c40000;
  font-size:1.08em;
}

/* 費用相場ページへのリンク */
.gg-cost-linkbox{
  max-width:620px;
  margin:24px auto 20px;
  padding:18px 16px;
  background:#eef7ff;
  border:1px solid #c9e2fb;
  text-align:center;
  box-sizing:border-box;
}

.gg-cost-linkbox__text{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.6;
  color:#333;
}

.gg-cost-linkbox__btn{
  display:inline-block;
  padding:10px 18px;
  background:#1b75d0;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:bold;
  border-radius:4px;
}

.gg-cost-linkbox__btn:hover{
  background:#145da7;
  color:#fff !important;
  text-decoration:none !important;
}

/* 無料見積CTA */
.cta-mitsumori{
  max-width:620px;
  margin:30px auto;
  padding:22px 20px 20px;
  background:#f7f0df;
  border:2px solid #e3a12b;
  border-radius:12px;
  text-align:center;
  box-sizing:border-box;
}

.cta-lead{
  margin:0 0 18px;
  color:#333;
  line-height:1.6;
  font-size:16px;
}

.cta-lead__top,
.cta-lead__main,
.cta-lead__sub{
  display:block;
}

.cta-lead__main{
  font-size:1.5em;
  font-weight:bold;
  line-height:1.5;
}

.cta-lead__sub{
  font-weight:bold;
}

.cta-btn{
  display:inline-block;
  min-width:240px;
  max-width:360px;
  padding:12px 28px;
  box-sizing:border-box;
  background:#f5002a;
  color:#fff !important;
  text-decoration:none !important;
  font-size:16px;
  font-weight:bold;
  line-height:1.4;
  border-radius:8px;
  text-align:center;
}

.cta-btn:hover{
  background:#d90024;
  color:#fff !important;
  text-decoration:none !important;
}

/* =====================================
   スマホ変換された場合の保険
   ※PC専用ページでも、画面幅が狭い時の崩れ防止
===================================== */

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

  .gg-cost-h2{
    font-size:18px;
    margin:20px 0 10px;
  }

  .gg-cost-mini,
  .gg-cost-linkbox,
  .cta-mitsumori{
    max-width:none !important;
    width:auto !important;
    margin-left:18px !important;
    margin-right:18px !important;
    box-sizing:border-box !important;
  }

  .gg-cost-mini{
    margin-top:20px !important;
    padding:14px 12px !important;
  }

  .gg-cost-mini h3{
    font-size:16px !important;
  }

  .gg-cost-mini p{
    font-size:14px !important;
  }

  .gg-cost-linkbox{
    margin-top:18px !important;
    padding:14px 12px !important;
  }

  .gg-cost-linkbox__btn{
    display:block !important;
    width:100% !important;
    padding:12px 10px !important;
    box-sizing:border-box !important;
  }

  .cta-mitsumori{
    margin-top:18px !important;
    padding:16px 14px 18px !important;
    border-radius:10px !important;
  }

  .cta-lead{
    margin:0 0 14px !important;
    font-size:14px !important;
    line-height:1.6 !important;
  }

  .cta-lead__main{
    font-size:1.28em !important;
  }

  .cta-btn{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:14px 10px !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }

  .syosai .hiyo{
    width:100% !important;
    max-width:none !important;
    table-layout:fixed !important;
    margin:8px 0 !important;
  }

  .syosai .hiyo td,
  .syosai .hiyo th{
    padding:6px 4px !important;
    font-size:14px !important;
    word-break:keep-all;
    white-space:nowrap;
  }

  .syosai .hiyo td:first-child{
    width:34% !important;
  }

  .syosai .hiyo td:nth-child(2){
    width:6% !important;
    text-align:center !important;
  }

  .syosai .hiyo td.en{
    width:60% !important;
    font-size:14px !important;
    text-align:right !important;
  }
}