@charset "UTF-8";
.sp {
  display: none;
}

/* 外枠 */
div#wrap-container {
  width: 100%;
  padding: 0;
}

div#container {
  width: 100%;
  height: 100%;
  font-family: "Noto Sans JP", Meiryo, メイリオ, "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
  position: relative;
}

/* タイトル
------------------------------------*/
#container h1 {
  width: 980px;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 auto 20px;
  padding-bottom: 0;
  border-bottom: 1px solid #cccccc;
}

/* タイトルバナー */
div.title-banner {
  text-align: center;
  margin: 0 auto;
  position: relative;
  position: relative;
}

div.title-banner img {
  display: block;
  margin: 0 auto;
}

/*　コンテンツ幅　*/
.folding-wrapper {
  width: 100%;
  max-width: 980px;
  margin: auto;
}

/*  メニュー  */
#contents-menu {
  width: 980px;
  margin: 30px auto 100px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

#contents-menu a {
  width: 23%;
  color: #0f499d;
  border: 2px solid;
  padding: 18px 18px;
  font-size: 1.2em;
  line-height: 1.2;
  font-weight: bold;
  display: block;
  box-sizing: border-box;
  background-color: #edf5ff;
  border-radius: 0.35em;
  display: block;
  position: relative;
  opacity: 1;
  transition: 0.2s;
}

#contents-menu a:hover {
  opacity: 0.6;
  transition: 0.2s;
}

#contents-menu a:after {
  content: "";
  display: block;
  position: absolute;
  top: 21px;
  right: 23px;
  vertical-align: -1px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 13px solid #004da2;
  margin: 0 0 0 5px;
}

/* 共通スタイル */
.folding-head {
  font-size: 2.333em;
  font-weight: bold;
  line-height: 1.314;
  text-align: center;
}

.folding-read {
  font-size: 1.2em;
  line-height: 1.444;
  text-align: center;
  margin: .8% auto 0;
}

.main-img {
  width: 100%;
  margin: 2% auto 0;
}

.main-img img {
  width: 100%;
}

.main-img .atn {
  display: block;
  font-size: .93333em;
  text-align: right;
  margin: 1% auto 0;
}

.back-color-on {
  background-color: #e6f3e7;
}

.back-color-on.gray {
  background-color: #f5f5f5;
}

.hinban {
  background: url(/static/images/common/yaji_maru_bl_12.png) no-repeat 0 50%;
  font-weight: bold;
  padding-left: 15px;
}

/* テーブル */
.product-table {
  width: 100%;
  font-size: 1.0666em;
  border-top: 1px solid #b6b6b6;
  border-left: 1px solid #b6b6b6;
  border-collapse: collapse;
}

.product-table th {
  background-color: #e0e4e7;
  font-weight: normal;
  padding: 1.6% 1%;
  border-bottom: 1px solid #b6b6b6;
  border-right: 1px solid #b6b6b6;
}

.product-table td {
  background-color: #ffffff;
  padding: 1.6% 1%;
  border-bottom: 1px solid #b6b6b6;
  border-right: 1px solid #b6b6b6;
}

/*
会社でも学校でも多目的に活用
*/
#folding-where {
  margin: 50px 0 93px;
}

/*
組み合わせて様々なレイアウトを作れる
*/
#folding-layout {
  padding: 70px 0 100px;
}

.folding-layout-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2.4% auto 0;
}

.layout-list-item {
  display: block;
  width: 48.8%;
  background-color: #ffffff;
  margin-bottom: 1.3%;
  padding: 3.3% 2.4%;
  border: 1px solid #cccccc;
  border-radius: 15px;
  box-sizing: border-box;
}

.layout-name {
  font-size: 1.4666em;
  font-weight: bold;
  line-height: 1.18;
  text-align: center;
  color: #20a236;
}

.layout-img {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 2% auto 0;
}

.layout-img p {
  width: 50%;
}

.layout-img p img {
  width: 100%;
}

.layout-img .count span {
  display: block;
  width: fit-content;
  font-size: 1.333em;
  font-weight: bold;
  margin: 3% auto 0;
}

.product-table-area {
  margin: 3.2% auto 0;
}

.product-table-area table.product-table {
  margin: 1.9% auto 0;
}

.product-table-area table.product-table td:nth-of-type(1) {
  letter-spacing: .03em;
  padding-left: 2%;
}

.product-table-area table.product-table td:nth-of-type(2) {
  width: 23%;
  text-align: center;
}

.product-table-area table.product-table td:nth-of-type(3) {
  text-align: center;
}

/*
導入事例
 */
#folding-case {
  padding: 88px 0 100px;
}

.folding-case-box {
  background-color: #ffffff;
  margin: 3.2% auto 5.7%;
  padding: 3% 0;
  border: 1px solid #20a236;
  border-radius: 12px;
}

.folding-case-title {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.333;
  text-align: center;
  color: #20a236;
}

.folding-case-read {
  font-size: 1.2em;
  line-height: 1.444;
  text-align: center;
  margin: 1.3% auto 0;
}

.folding-case-box-inner {
  display: flex;
  justify-content: space-between;
  width: 94.4%;
  margin: 4.4% auto 0;
}

.folding-case-box-inner .img-block {
  width: 47.6%;
}

.folding-case-box-inner .img-block img {
  width: 100%;
}

.folding-case-box-inner .img-block span {
  display: block;
  font-size: 1.0666em;
  font-weight: bold;
  line-height: 1.43;
  text-align: left;
  margin: 1.8% auto 0;
}

.folding-case-box-inner .product-block {
  width: 47.6%;
  margin: 0 1% 0 0;
}

.folding-case-box-inner .product-block > p {
  display: block;
  width: 36%;
  background-color: #8c8c8c;
  font-size: 1.0666em;
  line-height: 1.43;
  text-align: center;
  padding: 1% 0;
  color: #ffffff;
  border-radius: 16px;
}

.folding-case-box-inner .product-block .product-item {
  display: flex;
  justify-content: space-between;
  padding: 6.8% 0;
  border-bottom: 1px solid #888888;
}

.folding-case-box-inner .product-block .product-item .left {
  width: 26.8%;
}

.folding-case-box-inner .product-block .product-item .left img {
  width: 100%;
}

.folding-case-box-inner .product-block .product-item .right {
  width: 69.3%;
}

.folding-case-box-inner .product-block .product-item .right .cap {
  font-size: 1.0666em;
  font-weight: bold;
  line-height: 1.43;
  letter-spacing: .02em;
}

.folding-case-box-inner .product-block .product-item .right .name {
  font-size: 1.0666em;
  line-height: 1.43;
  margin: 3% auto 0;
}

.folding-case-box-inner .product-block .product-item .right .hinban {
  display: inline-block;
  width: fit-content;
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: .05em;
  margin: .7% .5em 0 0;
}

.folding-case-box-inner .product-block .product-item .right .price {
  display: inline-block;
  width: fit-content;
  font-size: .9em;
  line-height: 1.8;
}

.pdf-download-btn {
  display: block;
  width: 29.6%;
  font-size: 1.133em;
  color: #1C64B3;
  text-align: center;
  margin: 0 3.4% 0 auto;
  padding: 1% 0;
  border: 1px solid #205ab1;
  border-radius: 8px;
  box-sizing: border-box;
  opacity: 1;
  transition: 0.2s;
}

.pdf-download-btn:hover {
  opacity: 0.6;
  transition: 0.2s;
  color: #1C64B3;
}

.pdf-download-btn.covering {
  margin: 4% 3.4% 0 auto;
}

.pdf-download-btn img {
  width: 25px;
  margin-right: 3%;
  vertical-align: middle;
}

.folding-case-btn {
  display: block;
  width: 51%;
  background-color: #e9effb;
  font-size: 1.2em;
  margin: 6.4% auto 0;
  padding: 1.4% 0 1.3% 2%;
  border: 1px solid #205ab1;
  border-radius: 8px;
  box-sizing: border-box;
  position: relative;
  opacity: 1;
  transition: 0.2s;
}

.folding-case-btn:hover {
  opacity: 0.6;
  transition: 0.2s;
  color: #1C64B3;
}

.folding-case-btn img {
  width: 72px;
  vertical-align: middle;
}

.folding-case-btn p {
  display: inline-block;
  line-height: 1.4;
  text-align: left;
  margin-left: 2%;
  vertical-align: middle;
}

.folding-case-btn span {
  font-size: 1.277em;
}

.folding-case-btn::after {
  content: "";
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: solid 4px #174eaf;
  border-right: solid 4px #174eaf;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3.8%;
  transform: rotate(45deg);
}

/*
レバー操作で簡単にデスクを折りたたみ・収納
*/
#folding-function01 {
  margin: 91px auto 0;
}

/*
スタッキングして省スペース収納、移動もしやすい
*/
#folding-function02 {
  margin: 91px auto 150px;
}

/*
製品ラインナップ
*/
#folding-pruduct-lineup {
  padding: 65px 0 23px;
}

.lineup-box {
  background-color: #ffffff;
  margin: 3% auto 6.8%;
  border-radius: 12px;
}

.lineuplist-head {
  width: 100%;
  background-color: #20a236;
  font-size: 1.6em;
  line-height: 1.58;
  text-align: center;
  padding: 1%;
  color: #ffffff;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
}

.lineuplist-inner {
  display: flex;
  justify-content: space-between;
  padding: 2.5%;
  box-sizing: border-box;
}

.list-left {
  width: 32%;
}

.list-left img {
  width: 100%;
}

.list-right {
  width: 64.5%;
  margin: 0 0 0 auto;
}

.list-right p {
  font-size: 1.0666em;
  line-height: 1.63;
  margin: 1% 0 4.1%;
}

.list-right table th {
  padding: 1.2%;
}

.list-right table td {
  padding: 1.2% 0;
}

.list-right table td:nth-of-type(1) {
  letter-spacing: .03em;
  padding-left: 2%;
  text-align: left;
}

.list-right table td:nth-of-type(2) {
  width: 18%;
  text-align: center;
}

.list-right table td:nth-of-type(3) {
  text-align: center;
}

.list-right table td:nth-of-type(4) {
  width: 23%;
  text-align: center;
}

.size-variation {
  width: 95%;
  margin: 0 auto;
  padding: 0 0 3.4%;
}

.size-variation .title {
  background-color: #e7e7e7;
  font-size: 1.2em;
  font-weight: bold;
  padding: 1.4% 1%;
  color: #333333;
}

.size-variation-inner {
  display: flex;
  justify-content: space-around;
  margin: 1.3% auto 0;
}

.size-variation-inner .same-size {
  display: flex;
}

.size-variation-inner .same-size:nth-of-type(1) a.hinban {
  display: inline-block;
  margin: 6% auto 0;
}

.size-variation-inner .same-size:nth-of-type(2) a.hinban {
  display: inline-block;
  margin: 5% auto 0;
}

.size-variation-inner .same-size:nth-of-type(3) a.hinban {
  display: inline-block;
  margin: 4% auto 0;
}

.size-variation-inner .size-item {
  text-align: center;
}

.size-variation-inner .size-item img {
  width: 100%;
}

.size-variation-inner .size-item .size {
  font-size: .9em;
  margin: 6px 0 0;
}

.option-area {
  padding-bottom: 4%;
}

.option-box {
  width: 85%;
  margin: 0 auto;
  padding: 0 0 1%;
  border: 1px solid #20a236;
  border-radius: 8px;
}

.option-box > p {
  font-size: 1.333em;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin: 3.8% auto 0;
  color: #20a236;
}

.option-box .option-inner {
  display: flex;
  justify-content: space-between;
  width: 78%;
  margin: 2.9% auto 0;
}

.option-box .option-left {
  width: 39.6%;
}

.option-box .option-left img {
  width: 100%;
}

.option-box .option-right {
  width: 54%;
}

.option-box .option-right .product-block {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4%;
}

.option-box .option-right .product-block .left {
  width: 33.3%;
}

.option-box .option-right .product-block .left img {
  width: 100%;
  border: 1px solid #cccccc;
}

.option-box .option-right .product-block .right {
  width: 61.3%;
  margin: 0 0 0 auto;
}

.option-box .option-right .product-block .right .name {
  font-size: .9333em;
  line-height: 1.43;
}

.option-box .option-right .product-block .right .name:nth-of-type(2) {
  margin-top: 5%;
}

.option-box .option-right .product-block .right .data {
  display: flex;
  align-items: baseline;
  width: 135%;
  margin-bottom: 8%;
}

.option-box .option-right .product-block .right .hinban {
  display: inline-block;
  width: fit-content;
  font-size: 1em;
  line-height: 1.2;
  letter-spacing: .05em;
  margin: 1.7% 3% 0 0;
}

.option-box .option-right .product-block .right .price {
  display: inline-block;
  font-size: .8em;
  line-height: 1.8;
}

/*
おすすめチェア
*/
#recommend-chair {
  padding: 100px 0;
}

#recommend-chair .folding-head {
  color: #004d9f;
}

#recommend-chair .folding-read {
  line-height: 1.8;
  margin: 2.1% 0 0;
}

#recommend-chair .product-area {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 8.6% auto 0;
}

#recommend-chair .product-item {
  width: 48%;
  text-align: center;
}

#recommend-chair .product-item .product-img img {
  width: 71%;
}

#recommend-chair table.product-table {
  margin: 5% auto 0;
}

#recommend-chair table.product-table td:nth-of-type(1) {
  letter-spacing: .03em;
  text-align: left;
  padding-left: 2%;
  white-space: nowrap;
}

#recommend-chair table.product-table td:nth-of-type(2) {
  text-align: center;
  white-space: nowrap;
}

#recommend-chair table.product-table td:nth-of-type(3) {
  white-space: nowrap;
}

.recommend-more {
  margin: 8.2% auto 0;
  padding: 5% 0;
  border: 1px solid #205ab1;
  border-radius: 8px;
}

.recommend-more .product-area {
  width: 90%;
  margin: 0 auto;
}

.recommend-more-icon {
  display: block;
  width: 17.6%;
  background-color: #004d9f;
  font-size: 1.2em;
  line-height: 1.44;
  text-align: center;
  margin: 0 auto;
  padding: .4% 0;
  color: #ffffff;
  border-radius: 4px;
}

.recommend-more-head {
  font-size: 1.666em;
  font-weight: bold;
  line-height: 1.05;
  text-align: center;
  margin: 2.2% auto 0;
  color: #004d9f;
}

#recommend-chair .recommend-more .product-area {
  margin: 2.4% auto 0;
}

.recommend-more .product-img {
  width: 84%;
  margin: 0 auto;
}

.bottom-link {
  margin-top: 77px;
}

.link-list {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}

/*　関連ページ　*/
#relation-outer {
  margin: 60px auto;
}

.relation h3 {
  background-color: #3b3b3b;
  font-size: 1.4em;
  padding: 13px 0 13px 17px;
  color: #ffffff;
}

.relation img {
  width: 230px;
  margin: 23px 14px 0 0;
}

.link-img li {
  display: inline;
  margin: 0;
  float: none;
}

.link-img li:nth-child(4n) img {
  margin-right: 0;
}