@charset "utf-8";
/* オフィス家具 案内頁ディバイス共通用 */
/* plogressオフィス家具 案内頁 HTML5+CSS試作                                             */
/* ファイル名 apg_00cm.css  (Annai:分類 Progless下駄箱 _00:予備 CoMmon)              */
/* 作成       19/12/25     山川                                                      */
/* 案内頁PC・タブレット・スマホ共通                                                  */

/*------ 全体 ------*/
img {
  border: none;
  max-width: 100%;
}

body {
  margin: auto;
  padding: 0;
  width: 100%;
}

header {
  margin: auto;
  width: 100%;
}

main {
  float: right;
  margin: 0 2em;
  width: 73%;
}

aside {
  float: left;
  margin: 2em 0 0 2em ;
  width: 15%;
}

footer {
  float: left;
  margin: auto;
  margin-top: 2%;
  padding-top: 5%;
  padding-bottom: 5%;
  width: 100%;
}

h1 {
  color: #630;
  font-size : 120%;
  font-weight: bold;
  width: 100%;
}

/* ナビバー(最背面部分)のデザイン*/
.category-navi {
  background-color: #ffc;
  box-sizing: border-box;
  color: #fff;
  font-size: 95%;  
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

/* ナビバー全体の設定(リンクの下線なし) */
.category-navi a {
  text-decoration: none;
}

.category-navi-bar {
  margin: 0;
}

/* ナビバーメニュー<ul>のデザイン */
.category-navi-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  height: 40px;
  width: 90%;
}

/* ナビバーメニュー<li>のデザイン */
.category-navi-list > li {
  background:linear-gradient(#630, #fff 90%, #fff);
  background-size:100% 200%;
  border-right: solid 1px #eee;
  box-sizing: border-box;
  float: left;
  line-height: 40px;
  height: 40px;
  width: 12.5%;
  white-space: nowrap;
}

/* メニュー<li>(HOME)のデザイン(HOME) */
.category-navi-list >li:first-child {
  border-left: solid 1px #eee;
}

/* ナビバーメニュー<li>のリンクのデザイン */
.category-navi-list > li a {
  color: #fff;
  display: block;
}

/* 各所属ドロップダウンメニューの起点となる位置の指定 */
.category-navi-list > .category-navi-first {
  position: relative;
}

/* マウスオン時ナビバーメニュー<li>のデザイン */
.category-navi-first:hover {
  background:linear-gradient(#fff, #630 90%, #630);
  transition: .2s ease;
}

/* ドロップダウンメニューの表示位置と初期非表示の設定 */
.category-navi-first .category-navi-second {
  position: absolute;
  top: 40px;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  width: 100%;
  transition: .2s ease;
}

/* マウスオンでドロップダウンメニューを表示と表示位置設定 */
.category-navi-first:hover > .category-navi-second {
  top: 40px;
  opacity: 1;
  visibility: visible;
}

/* ドロップダウンメニュー<ul>のデザイン */
.category-navi-second {
  border: 1px solid #eee;
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ドロップダウンメニュー<li>のデザイン */
.category-navi-second li {
  background-color: #ffe;
  border-bottom: 1px solid #eee;
}

.category-navi-second li:last-of-type {
  border-bottom: none;
}

/* ドロップダウンメニュー<li>リンクのデザイン */
.category-navi-second li a{
  color: #000;
  font-size: 85%;  
  padding: 0 0 0 5%;
  text-align: left;
}

/* マウスオン時のドロップダウンメニュー<li>のデザイン */
.category-navi-second li a:hover {
  background-color: #630;
  color: #fff;
}

/* ナビメニューに表示する下矢印のデザイン */
.category-navi-button:after {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  content: '';
  display: inline-block;
  height: 6px;
  margin: 0 0 0 15px;
  transform: rotate(45deg);
  width: 6px;
}

/* メディアサイズ480px以下で表示するメニューボタンの非表示設定 */
#nav-drawer input[type=checkbox]  {
  display:none;
}
#nav-open  {
  display:none;
}

/* ドロップダウンメニューマウスオーバー時の起点となる位置の指定 */
.category-navi-second {
  position: relative;
}

/* メディアサイズ480px以下で表示するメニューボタンの非表示設定 */
#nav-drawer input[type=checkbox]  {
  display:none;
}
#nav-open  {
  display:none;
}

/*------ 案内説明部 注文方法 ------*/

h2 {
  background-color: #009453;        /* h2の背景色 */
  border-left:10px solid #060;
  color: #ffffff;                   /*  テキストのカラー */
  display: flex;
  font-size : 18px;                  /* テキストサイズ */
  padding: 3px;                     /* h2タグ内の余白 */
  width: 100%;                       /* h2の幅 */

}
#annai-setu {
  flex-wrap: wrap;
  font-size : 94%;
  margin-left: 1%;
}

.annai-fax {
  font-weight: bold;
}

/*------ 案内説明部  支払方法 ------*/

#info-payment-group {
  font-size : 94%;
  margin: 0 auto;
}

.info-payment-explanation{
  width: 82%;
}

.info-payment-name{
  border: solid 1px #ccc;
  font-weight: bold;
  padding: 0 1em;
  text-align: center;
  width: 15%;
}

.info-payment-part{
   border: solid 1px #ccc;
}

/*---- 案内説明部  送料・その他費用-----*/

#souryo-group {
  font-size : 94%;
  margin: 0;
}

.souryo-title {
  color: #f00;
}

.souryo-service-subject {
  text-align: left;
  padding: 0
}

.souryo-service-excluded {
  list-style-type: none;
  padding-left: 1.2em;
}

.ohters-cost {
  text-align: left;
  padding: 0
}

.ohters-cost-part {
  list-style-type: none;
  padding-left: 1.2em;
}

/*----- 案内説明部  返品・交換------*/

#return-guide {
  font-size : 94%;
  margin: 0;
}

.return-guide-notice {
  color: #f00;
}

.return-guide-other-list{
  padding: 0 1em;
}

.return-guide-other-part {
  list-style-type: none;
}

/*----- 案内説明部  配送と納期------*/

#delivery-guide{
  font-size : 94%;
  margin: 0;
}

.delivery-guide-notice {
  color: #f00;
}

.delivery-guide-list{
  padding: 0;
}
.delivery-guide-part{
  margin: 0 2em;
}

.red{
  color: #f00;
}

/*------ 概要 会社概要 ------*/
iframe {
  border: none;
  width: 55%;
  height: 550px;
}

#summary-company-group {
  flex-wrap: wrap;
  font-size : 94%;
  margin-left: 1%;
}

.summary-company-content {
  display: flex;
}

.summary-company-name {
  width: 25%;
  margin: 1%;
  margin-left: 2%;
  font-weight: bold;
}

.summary-company-detail {
  width: 70%;
  flex-wrap: wrap;
}

.summary-company-part {
  margin: 1%;
}

.summary-company-map {
  font-size : 87%;
  margin: 1%;
}

.summary-company-point {
  color : #00f;
}

#summary-around {
  flex-wrap: wrap;
  font-size : 94%;
  margin-left: 1%;
}

#summary-access {
  flex-wrap: wrap;
  font-size : 94%;
  margin-left: 1%;
}

#summary-map {
  flex-wrap: wrap;
  font-size : 94%;
  margin-left: 1%;
}

/*------ 概要 個人情報保護方針 ------*/

.summary-privacy-group {
  width: 90%;
  font-size : 94%;
  margin: 0;
  list-style-type: none;
}

.summary-privacy-content {
  margin-top: 1%;
  margin-left: 1%;
  flex-wrap: wrap;
  list-style-type: none;
}

.summary-privacy-list {
  margin-top: 1%;
  margin-left: 2%;
  flex-wrap: wrap;
  list-style-type: none;
}

.summary-privacy-part {
  margin-top: 1%;
  margin-left: 4%;
  flex-wrap: wrap;
  list-style-type: none;
}

#summary-privacy-note {
  width: 90%;
  font-size : 94%;
  margin-top: 3%;
  list-style-type: none;
}

/*------ 概要 利用規約 ------*/

#summary-terms-group {

  font-size: 87%;
  flex-wrap: wrap;
  width: 100%;
}

.summary-terms-introduction {
  font-family: "MS PMincho","serif";
  margin: 1%;
  margin-left: 1%;
  width: 90%;
}

.summary-terms-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  line-height: 115%;
  margin: 1% 0;
}

.summary-terms-item {
  font-weight: bold;
  margin-bottom: 0.2em;
  width: 37%;
}

.summary-terms-content {
  font-family: "MS PMincho","serif";
  margin-left: 1%;
  width: 60%;
}

/*－ サイドメニュー部 －－－－－－－－ */

.group-menu-list {
  border: 1px solid #cccc60;			
  font-size: 87%;				
  margin: 0;
  padding: 0;					
}

.group-menu-title {
  background-color: #cccc60;
  font-size: 91%;				
  color: #fff;
  font-weight: bold;
  padding: 3% 0;
}

.group-menu-part {
  border-bottom: 1px dotted #cccc60;		
  list-style-type: none;			
  padding: 3% 0 1% 1%;			
}
/*------ フッター 会社情報部 ------*/
address {
  font-style: normal;
  font-size: 87%;
  text-align: center;
  margin-top: 3%;
  margin-bottom: 1%;
  padding-left: 1%;
  width: 100%;
}

.corporation-name {
  width: 100%;
}

.corporation-add {
  width: 100%;
}

.corporation-mail {
  width: 100%;
}

.corporation-tel {
  width: 100%;
}

.foot-line-name {
  font-size: 82%;
  text-align: center;
  padding: 0.3em;
}

/*－ オーダーー部 －－－－－－－－－－ */

#order-form {
  background-color: #ffd;
  margin: 0 auto;
}

#main-orderform {
  margin: 1% 2% 0 1%;
  width: 78%;
}
/* ordTL0cm.css */
/* 注文フォーム大見出し */

.order-title {
  display: flex;
  flex-wrap: wrap;
  background-color: #ee0;
  margin-left: .1%;
  margin: 0%;
  padding-top: .6%;
  width: 100%;
}

.order-headline {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  margin: 0%;
  width: 100%;
}

.order-headline-comment-left {
  font-size: 85%;
  text-align: left;
  padding-left: 0.5em;
  width: 45%;
}

.order-headline-comment-right {
  font-size: 85%;
  text-align: right;
  width: 53%;
}

.order-headline-navi {
  font-size: 75%;
  margin: 0 0.2em;
  padding: 0 0.2em;
  text-align: right;
  width: 100%;
}
/* ordf22cm.css */
/* 見積フォーム全体の設定 */

#order-form {
  background-color: #ffd;
}
/* 見積フォーム見積商品選択部分 */

/* 商品選択見出し */
.order-select-legend {
  background-color: #e8e8cc;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  font-size: 90%;
  font-weight: bold;
  padding: 1% 0;
  width: 100%;
}

.order-select-field {
  background-color: #fff;
  border: none;
  margin: 0%;
  padding: 0;
}

.order-select-field ul{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap:wrap;
  width: 100%;
}

.order-select-field li{
 list-style: none;
}

.order-select-form {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;  
  border-bottom: 1px solid #ccc; 
  width: 100%;
}

.order-select-form ul{
  display: flex;
  flex-wrap:wrap;
  width: 100%;
}

.order-select-form ul li{
  -webkit-flex-grow:1;
  flex-grow: 1;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 10px;
  width: 100%;
}

.order-select-form ul .order-select-content-type {
/*  align-items: center; */
  display: flex;
  padding: 0;
}

.order-select-detail {
  display: flex;
  flex-wrap:wrap;
  width: 50%;
}

.order-select-detail .order-select-type-list{
  padding-bottom: .5%;
  width: 30%;
}
.order-select-detail .order-select-size-list{
  padding-bottom: .5%;
  width: 35%;
}

.order-select-caption {
  background-color: #ffffdf;
  font-size: 85%;
  font-weight: bold;
  height: 30px;
}
.order-select-content {
  background-color: #fff;
  display: flex;
  height: 40px;
  font-size: 90%;
}

.order-select-form ul .order-select-caption-type {
  padding: 3px 1px;
  height: 30px;
}
.order-select-form ul .order-select-caption-size {
  padding: 3px 1px;
  height: 30px;
}

.order-select-form ul .order-select-content-type {
  padding: 3px 1px;
  height: 30px;
  display: block;
}
.order-select-form ul .order-select-content-size {
  padding: 3px 1px;
  height: 30px;
}

.order-select-form ul .order-select-content-size select{
  height: 20px;
}
.order-select-form ul .order-select-content-size input{
  height: 20px;
}


.order-select-form ul .order-select-content-type {
  position: relative;
}

/* 数量 */

.quantity-input {
  margin-left: 3%;
}

/* 中分類代表画像 */
.order-select-img-type {
  height: 55px;
  margin: 0;
  width: 55px;
}

/* 商品選択プルダウン */
.order-select-detail select {
  background-color: #dbffed;
  display: block;
  width: 100%;
}

/* 数量入力見出し */
.select-input-quantity {
  border-radius: 2px; 
  color: #333;
  display: inline-block;
  font-size: 95%;
  font-weight: normal;
  float: right;
  padding: 1px 1px;
}

.select-input-quantity:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

/* 見積もりプルダウンメニュー下のコメントを入れたい場合に使用 */
.order-select-comment {
  background-color: #fff;
  border-bottom: solid 1px #ccc;
  font-size: 85%;
  margin: 1% 0;
}

/* 中分類名 */

.select-type-name {
  border-radius: 2px; 
  display: inline-block;
  font-size: 90%;
  font-weight: bold;
  line-height:1.2;
  margin: 0 .5% 0 0;
  padding: 1% 2%; 
}

.select-type-name a{
  color: #333;
  text-decoration: none;
}

.name-box {
  width: 100%;
}

/* poppu */
/* 中分類のポップアップ */
/* ポップアップ表示中分類名タイトル */
.type-digest-title-popup {
  background-color: #ddd;
  color: #333;
  font-size: 110%;
  padding: 1% 0 1% 0;
  width: 100%;
}

/* ポップアップカテゴリ代表商品画像 */
.type-digest-img-popup{
  width: 120px;
}

/* ポップアップ〇～〇人用 */
.type-digest-detaile-model-poppu {
  background-color: #33cc00;
  border-radius: 3px; 
  color: #fff;
  font-size: 100%;
  margin: 1%;
  padding: 2%;
  padding: .5%;
  width: 24%;
}

/* ポップアップ全サイズ数 */
.type-digest-detaile-size-poppu {
  background-color: #33cc00;
  border-radius: 3px; 
  color: #fff;
  font-size: 100%;
  margin: 1%;
  padding: 2%;
  padding: .5%;
  width: 22%;
}

/* ポップアップ仕様 */
.type-digest-detaile-style-poppu {
  background-color: #33cc00;
  border-radius: 3px; 
  color: #fff;
  font-size: 100%;
  margin: 1%;
  padding: 2%;
  padding: .5%;
  width: 36%;
}

/* ポップアップデザインと表示位置設定 */
/* 内寸図1枚の中分類（長靴・ステンレス以外） */
.type-digest-popup {
  background-color: #fff;
  border: solid 2px #555;
  border-radius: 3px; 
  color: #000;
  display: none;
  font-weight: bold;
  line-height: 110%;
  text-align: center;
  position: absolute;
  top: -265px;
  left: 50px;
  padding: 0 0;
  height: 265px;
  width: 520px;
  z-index: 10; 
}

.type-digest-box-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.order-select-form ul .order-select-content-type:hover .type-digest-popup {
  display: block;
}

.type-naisun-img-popup {
  width: 400px;
}

/* ポップアップした内寸図オンマウスで拡大 */
.type-naisun-img-popup:hover {
  transform: scale(1.6) translateX(-50px);
}

/* ポップアップデザインと表示位置設定 */
/* ステンレス製用（内寸図3枚） */
.type-digest-popup-wide {
  background-color: #fff;
  border: solid 2px #555;
  border-radius: 3px; 
  color: #000;
  display: none;
  font-weight: bold;
  line-height: 110%;
  text-align: center;
  position: absolute;
  top: -245px;
  left: 50px;
  padding: 0 0;
  height: 245px;
  width: 1050px;
  z-index: 10; 
}

.type-digest-box-popup-wide {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.order-select-form ul .order-select-content-type:hover .type-digest-popup-wide {
  display: block;
}

.type-naisun-img-popup-wide {
  width: 300px;
}

/* ポップアップした内寸図オンマウスで拡大 */
.type-naisun-img-popup-wide:hover {
  transform: scale(1.6) translateX(-50px);
}

/* ポップアップデザインと表示位置設定 */
/* 長靴用（内寸図3枚縦長画像あり） */
.type-digest-popup-long {
  background-color: #fff;
  border: solid 2px #555;
  border-radius: 3px; 
  color: #000;
  display: none;
  font-weight: bold;
  line-height: 110%;
  text-align: center;
  position: absolute;
  top: -320px;
  left: 50px;
  padding: 0 0;
  height: 320px;
  width: 1050px;
  z-index: 10; 
}

.type-digest-box-popup-long {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.order-select-form ul .order-select-content-type:hover .type-digest-popup-long {
  display: block;
}

.type-naisun-img-popup-long {
  width: 300px;
}

/* ポップアップした内寸図オンマウスで拡大 */
.type-naisun-img-popup-long:hover {
  transform: scale(1.6) translateX(-50px);
}

/* ポップアップデザインと表示位置設定 */
/* 内寸図がない可変棚付き・木目調扉・木製用 */
.type-digest-popup-compact {
  background-color: #fff;
  border: solid 2px #555;
  border-radius: 3px; 
  color: #000;
  display: none;
  font-weight: bold;
  line-height: 110%;
  text-align: center;
  position: absolute;
  top: -200px;
  left: 50px;
  padding: 0 0;
  height: 200px;
  width: 350px;
  z-index: 10; 
}

.type-digest-box-popup-compact {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.order-select-content-type:hover .type-digest-popup-compact {
  display: block;
}
/* ordET0cm.css */
/* 複数注文フォームお客様情報・納品オプション等 */
/* 共通 */
legend {
  font-weight: bold;
}
fieldset {
  border: 0;
}

/* お客様情報 */
.customer-form {
  padding: .5em .2em;
  border: 0;
}

.customer-form-list {
  list-style: none;
  margin: 0;
  padding: .5em;
}

.customer-form-label {
  float: left;
  font-size: 14px;
  width: 130px;
}

.customer-form-part {
  height: 30px;
}

.customer-form-input {
  float: right;
  width: 80%;
}

.another-add {
  color: #f00;
  font-weight: bold;
}

/* 配送先情報 */
.delivery-address_box .delivery-address_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

.delivery-address_box input:checked ~ .delivery-address_show {
  margin-top: 1.0em;
  height: auto;
  opacity: 1;
}

.delivery-form {
  padding: .5em .2em;
}

.delivery-form-list {
  list-style: none;
  margin: 0;
  padding: .5em;
}

.delivery-form-title {
  font-weight: bold;
}

.delivery-form-part {
  height: 30px;
}

.delivery-form-label {
  float: left;
  font-size: 14px;
  width: 130px;
}

.delivery-form-input {
  float: right;
  width: 80%;
}
/* 納品オプション */
.delivery-request {
  border: 1px solid #666;
  box-sizing: border-box;
  margin: 0.5em auto 0 auto;
  padding-bottom: 0.5em;
  width: 94%;
}

.delivery-request-select {
  font-size: 90%;
  font-weight: bold;
  margin: 0.5em 0;
  text-indent: 1.0em;
}

.delivery-request-comment {
  margin: 0.2em 0 0.6em 0;
}

.delivery-request-info {
  font-size: 14px;
  text-align: center;
  margin: 0.7em 0;
}

.customer-form-part input {
  padding: 3px 0;
}

.delivery-request-select textarea {
  display: block;
  height: 120px;
  width: 99%;
}

.order_button button {
  padding: 1.0%;
  width: 180px;
}

/* ▼書類作成/支払・納品方法など各種対応（3ttaiou_.htm）ご対応頁 */
/* ▼画像 */
.cmsg-head-img {
  display: flex;
}
.cmsg-head-img img {
  width: 100%;
}
/* ▲画像 */
/* ▼ヘッダータイトル帯 */
.taiou-title {
  background-color: #dddd77;
  border-left:10px solid #dddd77;
  color: #222200;
  font-size: 140%;
  padding: 1.5% 0;
  width: 100%;
}
/* ▲ここまで帯の部分 */
.cmsg-guide {
  margin: 0;
  padding: 0 0 0 5%;
}
.cmsg-guide-summry {
  background-color: #fff;
  margin: 1% 0;
  padding: 1% 0 0 0;
}
.cmsg-guide-summry-title {
  margin: .5% 0 1% 0;
}
.cmsg-guide-summry-highlight {
  color: #ff0033;
  font-weight: bold;
}
.cmsg-guide-summry-detail {
  font-size: 110%;
  font-weight: bold;
  line-height: 1.8;
}

.cmsg-guide-comment-detail {
  line-height: 1.5;
}
/* ▼見積ボタン */
.cmsg-btn {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.cmsg-btn1 {
  background-color: #f5d47c;
  background-color: #ffff99;
  border-radius: 10px;
  padding: 2%;
  margin: 2%;
}
.cmsg-btn2 {
  background-color: #00ffff;
  background-color: #ccff99;
  border-radius: 10px;
  padding: 2%;
  margin: 2%;
}

.cmsg-btn1 a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

.cmsg-btn2 a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

/* ▲見積ボタン */

/* ▲書類作成/支払・納品方法など各種対応（3ttaiou_.htm）ご対応頁 */