@charset "euc-jp";
/* CSS Document */
/*ver.8*/
/*-------------------------------------------
追加不可エリア　start
-------------------------------------------*/
/*<リセット>*/
body {
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: #333333;
}
a {
  color: #39f;
  text-decoration: none;
}
a:hover {
  color: deeppink;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  border: 0;
}

#title {
    font-weight: normal;
    text-align: right;
    color: #ccc;
    font-size: 11px;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
}

/*</リセット>*/
/*<ハンバーガーメニュー>*/
#sm_navi {
  background: #000;
  height: 40px;
}
#nav-drawer {
  position: relative;
  /* display: inline-block;*/
}
.nav-unshown { /*チェックボックス等は非表示に*/
  display: none;
}
/*アイコンのスペース*/
#nav-open {
  display: block;
  width: 30px;
  height: 22px;
  float: left;
  margin: 10px;
}
#nav-open span, #nav-open span:before, #nav-open span:after { /*ハンバーガーアイコン*/
  position: absolute;
  height: 3px; /*線の太さ*/
  width: 25px; /*長さ*/
  border-radius: 3px;
  background: #FFF;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}
#nav-close { /*閉じる用の薄黒カバー*/
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /*最前面に*/
  width: 90%; /*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 280px; /*最大幅（調整してください）*/
  height: 100%;
  background: #fff; /*背景色*/
  transition: .3s ease-in-out; /*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%); /*左に隠しておく*/
}
#nav-input:checked ~ #nav-close { /*チェックが入ったらもろもろ表示*/
  display: block; /*カバーを表示*/
  opacity: .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%); /*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}
/*</ハンバーガーメニュー>*/
/*< iOSでのデフォルトスタイルをリセット >*/
input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}
/*</ iOSでのデフォルトスタイルをリセット >*/
/*<Chrome on android>*/
/*Android(Chrome) 一部の文字が大きく表示（バグ対策）*/
div {
  max-height: 999999px;
}
/*</Chrome on android>*/
/*------------------------------*/
/*<レイアウト>*/
#main iframe {
  width: 100vw;
}
#wrap {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  min-height: 100vh;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
#head iframe {
  vertical-align: bottom;
}
#head_pc {
  display: none;
}
/*<スマホの全ページにメッセージを表示させる時に使う>*/
#head_sm {
  /* width: 100%;
  height: 100px;*/
  display: none;
}
/*</スマホの全ページにメッセージを表示させる時に使う>*/
#sm_logo {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
#sm_logo h2 {
  padding: 0;
  margin-bottom: 0;
}
#sm_logo img {
  width: 100%;
}
#container {
  display: flex;
  flex-direction: column-reverse;
}
#wrap_main {
  display: flex;
  flex-direction: column-reverse;
  margin-left: 1em;
  margin-right: 1em;
}
#main {
  margin-bottom: 2em;
}
#side iframe {
  vertical-align: bottom;
}
#side_pc {
  display: none;
}
#side_sm { /*スマホのサイドナビ幅高さ*/
  width: 100%;
  height: 1500px;
}
#wrap_foot {
  margin-top: auto;
  box-sizing: border-box;
}
#foot iframe {
  vertical-align: bottom;
}
#foot_pc {
  display: none;
}
#foot_sm { /*スマホのフッター幅高さ*/
  width: 100%;
  height: 250px;
}
ol { /*パンくず*/
  margin-bottom: 2em;
}
ol li {
  display: inline;
}
ol li:not(:last-child):after {
  content: "＞";
  margin-top: 0;
  margin-left: 0.3em;
  margin-bottom: 0;
  font-family: "sans-serif";
}
ol a {
  text-decoration: underline;
}
ol a:visited {
  color: #39f;
}
/*<ナビの検索>*/
.search-form {
  display: block;
  position: relative;
}
.search-form:before, .search-field {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 40px;
  margin: 0;
  box-sizing: border-box;
}
.search-form:before {
  z-index: 100;
  content: '';
  display: inline-block;
  background-image: url(https://www.rakuten.ne.jp/gold/interiorkataoka/img/m_glass.png);
  background-size: auto;
  vertical-align: middle;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
}
.search-field {
  -webkit-appearance: none;
  border-radius: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  z-index: 200;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.search-field:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  width: 100%;
  cursor: text;
  box-sizing: border-box;
}
.search-form input[type="submit"] {
  display: none;
}
/*</ナビの検索>*/
/*<上へ>*/
#page-top {
  font-size: 0;
  position: fixed;
  bottom: 10px;
  right: 10px;
  opacity: 0;
}
#page-top.fade-in {
  /* font-family: sans-serif;
  font-size: 16px;*/
  opacity: 1;
  transition: opacity 1s;
  width: 55px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  /*line-height: 55px;*/
  background: #363636;
  padding: 0;
  padding-top: 15px;
  display: block;
  /*  color: #fff;*/
  /*font-weight: bold;*/
} /*</上へ>*/
/*<sns>*/
#sns {
	position: fixed;
	right: 80px;
	bottom: 10px;
	color: #333;
	font-weight: bold;
}
#sns li {
	display: inline;
	margin-left: 10px;
}
#sns img {
	vertical-align: middle;
}
/*</sns>*/
@media only screen and (min-width: 640px) { /* 640px以上の幅の場合に適応される */
  ol { /*パンくず*/
    margin-top: 2em;
    margin-bottom: 3em;
  }
  #wrap_main {
    display: block;
  }
} /*</@media only screen and (min-width: 640px)> */
@media screen and (min-width:800px) { /*800px以上*/
  #wrap, #head, #container, #foot {
    width: 1120px; /*pcサイトの幅*/
    margin-left: auto;
    margin-right: auto;
    max-width: none;
  }
  #head_pc { /*pcサイトのヘッダー幅高さ*/
    display: block;
    width: 100%;
    height: 1250px;
  }
  #head_sm {
    display: none;
  }
  #container {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #wrap_main {
    margin-left: 0;
    margin-right: 0;
  }
  #topic_path {
    width: 100%;
    margin-top: 0;
    margin-bottom: 2em;
  }
  #main, #top {
    width: 800px; /*pcのコンテンツ幅*/
    margin-left: 0;
    margin-right: 0;
  }
  #side_pc { /*pcサイトのサイド幅高さ*/
    display: block;
    width: 280px;
    height: 14800px;
  }
  #side_sm {
    display: none;
  }
  #sm_navi, #wrap_search, #sm_logo {
    display: none;
  }
  #foot_pc { /*pcサイトのフッター幅高さ*/
    display: block;
    width: 100%;
    height: 2500px; /*スマホのpc表示のため+300px*/
  }
  #foot_sm {
    display: none;
  }
} /*@media screen and (min-width:1024px) */
/*</レイアウト>*/
/*-------------------------------------------
追加不可エリア　end
-------------------------------------------*/
/*######################*/
/*ここから下に追加する*/
/*######################*/
.li_bo { /*リンクの装飾（ボタン風）*/
  margin-top: 1em;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 3em;
  padding: 0;
}
.li_bo li a {
  border: 1px solid #CCC;
  margin-top: 1em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-bottom: 1em;
  border-radius: 5px;
  display: block;
  color: #39f;
  text-decoration: none;
  font-size: 14px;
  background: #eeeeee;
  font-weight: bold;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.li_bo li a:hover {
  background: #cccccc;
}

strong {color: red;}
em {font-style: normal;background-color: #FF6;}
h1 {font-size: 200%;}
h2 {font-size: 160%;}
h3 {font-size: 120%;}
.h1_d1 {border-left: 10px solid #406398;padding-left:10px;}
.h2_d1 {border-left: 5px solid #406398;border-bottom:1px dotted #406398;padding-left:10px;}
.h2_d2 {border: 1px solid #e1e1e1;padding: 10px;}
#js h3 {font-size: 120%;color: #ce020b;border-left: 5px solid #ce020b;padding-left: 10px;}
.price {font-size: 160%;color: #ce020b;font-weight: 700;}

.clearfix, .div_c {
  zoom: 1; /*zoomプロパティは、Internet Explorerの独自拡張で、指定要素を拡大表示する際に使用します。*/
}
.clearfix {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.clearfix li {
  width: 43%;
}
.clearfix li img {
  width: 100%;
}

/*　table_b　(点線)*/
.table_b {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-spacing: 0;
}
.table_b td {
  vertical-align: top;
  border: 1px dotted #ccc;
  padding: 5px;
}
.table_c { /*　table_c　(実線)*/
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table_c th {
  text-align: left;
}
.table_c th, .table_c td {
  padding: 5px;
  vertical-align: top;
  border: 1px solid #ccc;
}
.table_e { /*　table_e　(実線)*/
  font-size: 10px;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: #686868;
}
.table_e th, .table_e td {
  vertical-align: middle;
  border: 1px solid #ccc;
  padding: 1px;
}
.table_e a {
  font-size: 13px;
  font-weight: bolder;
  color: #39f;
  text-decoration: none;
}
.table_e a:hover {
  text-decoration: underline;
  color: #CE020B;
}
.table_e tr:nth-child(odd) {
  background-color: #ffffd2;
}
.table_g { /*　table_g　(実線)20160216 レール価格表で専務追加*/
  font-size: 12px;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: #686868;
}
.table_g th, .table_g td {
  vertical-align: middle;
  border: 1px solid #ccc;
  padding: 1px;
}
.table_g a {
  font-size: 13px;
  font-weight: bolder;
  color: #39f;
  text-decoration: none;
}
.table_g a:hover {
  text-decoration: underline;
  color: #CE020B;
}
.table_h { /*　table_h　(実線)20170626 上代なし用価格表で専務追加*/
  font-size: 10px;
  text-align: center;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: #686868;
}
.table_h th, .table_h td {
  vertical-align: middle;
  border: 1px solid #ccc;
  padding: 3px 1px 3px 1px;
}
.table_h a {
  font-size: 13px;
  font-weight: bolder;
  color: #39f;
  text-decoration: none;
}
.table_h a:hover {
  text-decoration: underline;
  color: #CE020B;
}
.table_h tr:nth-child(odd) {
  background-color: #ffffd2;
}
.rugp {
  color: #CE020B;
  text-decoration: underline;
  font-size: 24px;
  font-weight: bolder;
}
.table_k { /*　table_k　(実線)20180419 規格サイズ専用　専務　.table_rugは使わない*/
  font-size: 12px;
  text-align: center;
  width: 100%;
  color: #686868;
}
.table_k th, .table_k td {
  border: 1px solid #ccc;
}
.table_k a {
  font-size: 18px;
  color: #CE020B;
  text-decoration: none;
}
.table_k a:hover {
  text-decoration: underline;
}
.table_k tr:nth-child(odd) {
  background-color: #ffffd2;
}
.table_tempA { /*テンプレA/PC用商品説明文(2015.10.31追記)　寺元*/
  text-align: left;
  vertical-align: middle;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.table_tempA th {
  width: 100px;
  text-align: center;
  padding: 6px;
  color: #666;
  background-color: #eee;
  border-bottom: 1px dotted #999;
  border-left: 1px solid #ccc;
}
.table_tempA td {
  padding: 6px;
  border-bottom: 1px dotted #999;
  border-left: 1px solid #ccc;
}
.tempA_div {
  width: 450px;
  color: #ccc;
  font-size: 12px;
}
.table_a, .h2_d2 {
  width: 100%;
  box-sizing: border-box;
}
img {
  /*  width: 100%;
  height: auto;*/
}
.w700 {
  width: 100%;
  height: auto;
}
#main iframe {
  width: 100%;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.cat_350_m { /*カテゴリ装飾 list.cssに変更終了後削除*/
border: #aaaaaa solid 1px;border-radius: 3px;overflow: hidden;text-align: center;padding: 0;margin-top: 0;margin-right: 0;margin-left: 0;margin-bottom: 4em;width: 100%;box-sizing: border-box;}.cat_350_m p {width: 85%;padding: 0;margin-top: 0;margin-left: auto;margin-right: auto;margin-bottom: 0;color: #888888;font-weight: bold;}.cat_350_m p:nth-of-type(2) {font-weight: normal;border-top: #CDCDCD 2px dotted;padding-top: 1em;padding-bottom: 1em;}

/*list*/
ul.itemlist{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;}
ul.itemlist li{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
list-style-type: none;
}
ul.itemlist img{width:100%}
ul.itemlist span{color: red; font-weight: bold;}
ul.no_l li{width:48%;}
ul.no_m li{width:100px;}
ul.no_s li{width:68px;}
ul.width li{width:100%;}


@media only screen and (min-width: 640px) { /* 640px以上の幅の場合に適応される */
  .flexbox {
    justify-content: space-between;
  }
  .flexbox a {
    width: 48%;
  }
} /*</@media only screen and (min-width: 640px)> */
@media only screen and (min-width: 800px) { /* 800px以上の幅の場合に適応される */
  h1 {font-size: 200%;}
  h2 {font-size: 160%;}
  .flexbox a {
    width: 31%;
  }
  .w700 {
    width: auto;
    max-width: 800px;
    height: auto;
  }
  .clearfix li {
    width: 17%;
  }
  .clearfix li img {
    width: 100%;
  }
  
ul.itemlist li{font-size: 12px;}
ul.no_l li{width:250px;}
ul.no_m li{width:115px;}
ul.no_s li{width:68px;}
ul.width li{width:100%;}  
} /*</@media only screen and (min-width: 800px)> */
@media screen and (min-width:1380px) { /*1380px以上*/
  body { /*縦バナーの表示*/
/*background-image: url( 左側に設置する画像URL ), url( 右側に設置する画像URL );*/
	/*background-image: url(https://www.interiorkataoka.com/img/tate-reviewcp.gif ), url(https://www.interiorkataoka.com/img/r-pointsaidai4-tr.gif );*/
	background-image: url(https://www.interiorkataoka.com/img/sns110.gif ), url(https://www.interiorkataoka.com/img/point110.gif );
    background-repeat: repeat-y;
    background-position: left, right;
  }
  /*<上へ>*/
  #page-top {
    right: 160px;
    bottom: 50px;
    /*</上へ>*/
  }
  #sns{
    right: 250px;
  }

} /*@media screen and (min-width:1380px) */