@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 商品と料金 ◇◆◇
  
  
========================================================================================================================*/

#hd { background-image:url(../image/pdHd_bg.jpg); }
#pgHd h2:before { content:url(../image/pdHd_icon.png); }


/*----------------------------------------------------------------------------------------------------

  商品
  
----------------------------------------------------------------------------------------------------*/

.item_hd {
  padding-top:80px;
  margin-bottom:40px;
  font-weight:400;
  font-size:200%;
}

#item-jp {
  background:url(../../image/bg3-purple.gif) repeat center top;
  padding-bottom:80px;
  position:relative;
}

#item-ch {
  background:url(../../image/bg-gray.gif) repeat center top;
  padding-bottom:80px;
  position:relative;
}

#item-ot {
  padding-bottom:80px;
}

#item-jp:before,
#item-ch:before {
  content:"";
  width:100%;
  height:80px;
  position:absolute;
  left:0;
  top:0;
  background-color:#f5f5f5;
}

.item_list {
  display:inline-block;
  max-width:1118px;
  margin-left:auto;
  margin-right:auto;
  vertical-align:bottom;
  position:relative;
  z-index:2;
}

.item_listBox {
  width:352px;
  margin:0 9px;
  float:left;
  background-color:#fff;
  font-size:87.5%;
}

#item-ot .item_list {
  max-width:1120px;
}

#item-ot .item_listBox {
  width:540px;
  margin:0 10px;
}


/*-----------------------------------------------------------------------------------
  商品名
-----------------------------------------------------------------------------------*/

.item_listBox .sname {
  text-align:center;
  margin-top:-20px;
}

.item_listBox .sname .rank {
  width:120px;
  height:66px;
  color:#fff;
  position:relative;
  display:inline-block;
  text-align:center;
  margin-bottom:0.5em;
}

.item_listBox .sname .rank:before,
.item_listBox .sname .rank:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  left:0;
}

.item_listBox .sname .rank:before {
  top:0;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-bottom:33px solid #464678;
}

.item_listBox .sname .rank:after {
  bottom:0;
  border-top:33px solid #464678;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
}

.item_listBox .sname .rank1:before { border-bottom-color:#beaa1e; }
.item_listBox .sname .rank1:after { border-top-color:#beaa1e; }

.item_listBox .sname .rank2:before { border-bottom-color:#a0a0a0; }
.item_listBox .sname .rank2:after { border-top-color:#a0a0a0; }

.item_listBox .sname .rank3:before { border-bottom-color:#ab493c; }
.item_listBox .sname .rank3:after { border-top-color:#ab493c; }

#item-ch .sname .rank:before { border-bottom-color:#78962d; }
#item-ch .sname .rank:after { border-top-color:#78962d; }

.item_listBox .sname .rank span {
  height:100%;
  display:inline-block;
  position:relative;
  z-index:2;
  text-align:center;
  font-size:112.5%;
  padding-top:1em;
}

.item_listBox .sname b {
  font-size:162.5%;
  font-weight:400;
}


/*-----------------------------------------------------------------------------------
  ランク
-----------------------------------------------------------------------------------*/

.item_listBox .srank {
  border-top:1px solid #dcdcdc;
  border-bottom:1px solid #dcdcdc;
  margin-left:20px;
  margin-right:20px;
  margin-top:1em;
  text-align:left;
  padding-top:0.5em;
  padding-bottom:0.75em;
}

.item_listBox .srank:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.item_listBox .srank dt {
  display:block;
  width:36%;
  clear:left;
  float:left;
  text-align:right;
  padding-right:0.5em;
  padding-top:0.25em;
  box-sizing:border-box;
}

.item_listBox .srank dd {
  display:block;
  width:64%;
  float:left;
  line-height:1;
  padding-top:0.25em;
}


/*-----------------------------------------------------------------------------------
  ポイント
-----------------------------------------------------------------------------------*/

.item_listBox .point {
  text-align:left;
  list-style:none;
  padding-left:20px;
  padding-right:25px;
  margin-top:0.75em;
}
.item_listBox .point li {
  padding-left:1em;
  padding-top:0.25em;
}

.item_listBox .point li:before {
  content:"・";
  display:inline-block;
  width:1em;
  margin-left:-1em;
}


/*-----------------------------------------------------------------------------------
  料金
-----------------------------------------------------------------------------------*/

.item_listBox .price {
  padding:20px 25px 25px 25px;
  position:relative;
}

.item_listBox .price:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.price_hd {
  width:75px;
  border:1px solid #95384f;
  color:#95384f;
  display:block;
  box-sizing:border-box;
  padding:2px;
  position:absolute;
  left:20px;
  top:20px;
  bottom:20px;
  text-align:center;
}

.price_hd span {
  display:block;
  height:100%;
  box-sizing:border-box;
  font-size:93.8%;
  padding-top:1em;
  letter-spacing:0;
  line-height:1.4;
  border:1px solid #dfc3ca;
}

#item-ot .price_hd { width:95px; }
#item-ot .price_hd span { font-size:100%; padding-top:1.3em; letter-spacing:0.075em; }

.item_listBox .price dl {
  display:inline-block;
  line-height:1.5;
  float:right;
}

.item_listBox .price dl:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.item_listBox .price dt {
  width:5em;
  float:left;
  text-align:right;
  padding-top:0.65em;
}

.item_listBox .price dd {
  margin-left:5.25em;
  text-align:right;
}

.item_listBox .price dd:after {
  content:"";
  display:block;
  height:0;
  clear:both;
}

.item_listBox .price dd b {
  font-weight:400;
  font-size:156.2%;
}

.item_listBox .price dd small {
  font-weight:200;
  font-size:81.3%;
  margin-left:0.25em;
  margin-bottom:0.25em;
  display:inline-block;
  vertical-align:middle;
}

.item_listBox .price_at {
  padding-top:0.5em;
  padding-left:20px;
  text-align:left;
  color:#95384f;
  clear:both;
}

#item-ot .price {
  padding-left:120px;
}

#item-ot .price dl {
  float:left;
  margin-left:20px;
  margin-top:0.75em;
}

#item-ot .price dt { width:8em; text-align:left; }
#item-ot .price dd { margin-left:8em; }

#item-ot .price dl.col { margin-top:0; }

#item-ot .price dl.col dt {
  width:inherit;
  float:none;
  padding-top:0.25em;
}

#item-ot .price dl.col dd {
  margin-left:0;
}


/*----------------------------------------------------------------------------------------------------

  裏返し・古畳処分代
  
----------------------------------------------------------------------------------------------------*/

#sagyo-warp {
  background-color:#282828;
  color:#fff;
}

.sagyoBlock {
  width:50%;
  float:left;
  box-sizing:border-box;
  padding-top:60px;
  padding-bottom:60px;
}

.sagyoBlock:first-child {
  padding-right:40px;
}

.sagyoBlock:last-child {
  padding-left:40px;
  background-color:#373737;
}

.sagyoBlock dl {
  width:510px;
}

.sagyoBlock:first-child dl {
  float:right;
}

.sagyoBlock dt span {
  display:inline-block;
  border-bottom:1px solid #fff;
  border-bottom:1px solid rgba(255,255,255,0.7);
  font-weight:400;
  font-size:175%;
  padding-bottom:0.25em;
}

.sagyoBlock dd {
  padding-top:1.5em;
}

.sagyoBlock dd p { text-align:left; }

.sagyoBlock dd .at {
  display:block;
  padding-left:1.05em;
  text-indent:-1.05em;
  margin-top:0.5em;
}

.sagyoBlock dd .price {
  text-align:center;
  display:inline-block;
  margin-bottom:1em;
}

.sagyoBlock:last-child dd .price { text-align:right; margin-top:2em; }

.sagyoBlock dd .price b {
  font-weight:400;
  font-size:175%;
  margin-left:0.25em;
}

.sagyoBlock dd .price small {
  font-size:81.3%;
  margin-left:0.25em;
  margin-bottom:0.35em;
  display:inline-block;
  vertical-align:middle;
}


#han-price {
  color:#95384f;
  width:1100px;
  margin-top:80px;
  margin-left:auto;
  margin-right:auto;
  border-top:1px solid #95384f;
  border-bottom:1px solid #95384f;
  box-sizing:border-box;
  padding-top:1em;
  padding-bottom:1em;
}


/*----------------------------------------------------------------------------------------------------

  畳の交換・表替えなどの種類
  
----------------------------------------------------------------------------------------------------*/

#syurui-hd {
  padding-top:80px;
  margin-bottom:40px;
  font-weight:400;
  font-size:175%;
}

#syurui {
  list-style:none;
  max-width:1106px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:100px;
}

#syurui li {
  width:362px;
  float:left;
  margin:0 3px;
}

.syurui_hd {
  background:url(../../image/bg-dgray.gif) repeat center top;
  padding-top:30px;
  margin-bottom:1em;
}

.syurui_hd b { font-weight:400; }
.syurui_kokanY { color:#6e8728; margin-left:0.5em; font-weight:400; }
#syurui li p { font-size:93.8%; padding-top:0.75em; }
#syurui li.shincyo p { padding-top:3.1em; }