@charset "UTF-8";
/*
Theme Name: for furniture2025
Author: Offinet.com r-saito
Description: オフィネット家具サイト用のテーマです。このテーマに汎用性はありません。
Version:1.0
*/
/* CSS Document */
/*リンク、余白など一律のモジュール***************************************************/
img {
  max-width: 100%;
}

a {
  color: #2a4491;
}

a:hover {
  opacity: 0.6;
  cursor: pointer;
}

button:hover {
  opacity: 0.6;
  cursor: pointer;
}

.t-right {
  text-align: right;
}

.t-left {
  text-align: left;
}

.t-center {
  text-align: center;
}

.m_0 {
  margin: 0;
}

.m_1em {
  margin: 1em;
}

.m_01em {
  margin: 0 1em;
}

.m_10em {
  margin: 1em 0;
}

.m_1rem {
  margin: 1rem;
}

.m_01rem {
  margin: 0 1rem;
}

.m_10rem {
  margin: 1rem 0;
}

.mb_0 {
  margin-bottom: 0;
}

.mb_1em {
  margin-bottom: 1em;
}

.mb_2em {
  margin-bottom: 2em;
}

.mb_1rem {
  margin-bottom: 1rem;
}

.mb_2rem {
  margin-bottom: 2rem;
}

.mb_3rem {
  margin-bottom: 3rem;
}

.ml_1em {
  margin-left: 1em;
}

.ml_2em {
  margin-left: 2em;
}

.ml_1rem {
  margin-left: 1rem;
}

.ml_2rem {
  margin-left: 2rem;
}

.p_01 {
  padding: 0 1em;
}

.p_01em {
  padding: 0 1em;
}

.p_01rem {
  padding: 0 1rem;
}

.p_10rem {
  padding: 1rem 0;
}

.p_0 {
  padding: 0;
}

.p_1em {
  padding: 1em;
}

.p_1rem {
  padding: 1rem;
}

.bg-e {
  background-color: #eef0f2;
}

.bg-w {
  background-color: #ffffff;
}

.txt-xl {
  font-size: 24px;
}

.txt-ll {
  font-size: 20px;
}

.txt-l {
  font-size: 16px;
}

.txt-ml {
  font-size: 15px;
}

.txt-m {
  font-size: 14px;
}

.txt-ms {
  font-size: 13.5px;
}

.txt-s {
  font-size: 12.75px;
}

.txt-ss {
  font-size: 12px;
}

.txt-sss {
  font-size: 11.25px;
}

.txt-xs {
  font-size: 10px;
}

.txt-120 {
  font-size: 120%;
}

.txt-90 {
  font-size: 90%;
}

.txt-75 {
  font-size: 75%;
}

.txt-red {
  color: #9F1010;
}

.txt-red2 {
  color: #e01939;
}

.txt-gray {
  color: #9c9fa5;
}

.txt-gray2 {
  color: #666970;
}

.txt-gray3 {
  color: #cbced7;
}

.txt-white {
  color: #ffffff;
}

.a_nocolor {
  text-decoration: none;
  color: inherit;
}

.flex-under {
  display: flex;
  align-items: baseline;
}

.mh-auto {
  max-height: auto !important;
}

.material-icons {
  display: inline-flex;
  vertical-align: middle;
}

/*レスポンシブなクラス*/
.forpc {
  display: none;
}

.fortab {
  display: none;
}

.forsp {
  display: block;
}

.fortabpc {
  display: none;
}

.forsptab {
  display: block;
}

.p_00_01 {
  padding: 0;
}

.w-flex {
  display: block;
}

/*　------------------------------------------------------------
　　　ここから実際のコンテンツ
------------------------------------------------------------　*/
.wrapper {
  width: 100%;
  max-width: 100%;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #202227;
  font-size: 14px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 5px solid #cbced7;
  padding-left: 3px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 3px solid #cbced7;
  padding-left: 5px;
}

.underh2 {
  padding: 0 0 20px 10px;
}

/*　------------------------------------------------------------
　　　ヘッダー
------------------------------------------------------------　*/
header {
  margin-top: 1em;
}
header .head-logo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
  border-bottom: 3px solid #202227;
  padding-bottom: 5px;
}
header .head-left {
  margin-right: auto;
}
header .head-left .head-part01 {
  padding-left: 5px;
}
header .head-part11 {
  padding-right: 10px;
}
header .head-part12 {
  padding-right: 10px;
}
header .head-part13 {
  padding-right: 10px;
}
header .head-part14 {
  padding-right: 10px;
}
header .head-part15 {
  margin-right: 1rem;
}
header #menubtn {
  border: 0;
  padding: 0;
  background-color: transparent;
}
header .headicon-info {
  height: 40px;
  width: 40px;
}
header .headicon-tel {
  height: 40px;
}
header .headicon-cart {
  height: 40px;
}
header .headicon-menu {
  height: 40px;
  width: 40px;
}
header .head-underlogo {
  font-size: font-ss;
  background-color: #eef0f2;
  padding: 0.5em 1em;
  border-top: 3px solid #666970;
}
header .head-searchandinfobaar {
  background: #eef0f2;
  padding: 3px 16px;
  display: flex;
  align-items: center;
  height: 40px;
}
header .head-searchandinfobaar .head-part51 {
  padding: auto 1rem;
  flex: 1 1 100%;
  max-width: 100%;
}
header {
  /*---------------- 検索バー -----------------*/
}
header .search-form-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 任意の幅に調整してください */
  overflow: hidden;
  border: 1px solid #666970;
  border-radius: 3px;
  background-color: #ffffff;
}
header .search-form-5 select.search-form-5-select {
  flex: 1 1 35%;
  border: 0;
  background-color: #eef0f2;
  margin-left: 2px;
  color: #666970;
  font-size: 12px;
  padding: 7px 6px;
  height: 30px;
  border-radius: 2px 0 0 2px;
  max-width: 35%;
}
header .search-form-5 label {
  flex: 1 1 50%;
}
header .search-form-5 input {
  height: 35px;
  padding: 5px 15px;
  border: none;
  box-sizing: border-box;
  font-size: 12px;
  outline: none;
}
header .search-form-5 input::-moz-placeholder {
  color: #666970;
}
header .search-form-5 input::placeholder {
  color: #666970;
}
header .search-form-5 button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 35px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
header .search-form-5 button::after {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23666970%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  content: "";
}
header {
  /*----------------　グローバルナビ　----------------*/
}
header .g-categories {
  display: none;
}
header .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 13px;
  padding: 0;
}
header .breadcrumb li:not(:last-of-type)::after {
  content: "›";
  margin: 0 0.6em;
  color: #777;
}

/*　---------------- スマホ用スライドメニュー ----------------　*/
.slidemenu {
  display: none;
  width: 300px;
  position: absolute;
  top: 0;
  right: 0;
  min-height: 100%;
  height: 2000px;
  /*border-left: 1px solid $darkgray;*/
  background-color: #202227;
  color: #ffffff;
  z-index: 101;
  /*-------- 検索バー ---------*/
}
.slidemenu .search-form-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background-color: #ffffff;
}
.slidemenu .search-form-5 .search-form-5 input {
  height: 35px;
  padding: 5px 5px 5px 15px;
  border: none;
  box-sizing: border-box;
  background-color: #ffffff;
  font-size: 13.5px;
  outline: none;
}
.slidemenu .search-form-5 .search-form-5 input::-moz-placeholder {
  color: #666970;
}
.slidemenu .search-form-5 .search-form-5 input::placeholder {
  color: #666970;
}
.slidemenu .search-form-5 .search-form-5 button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 35px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.slidemenu .search-form-5 .search-form-5 button::after {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23666970%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  content: "";
}
.slidemenu select.search-form-5-select {
  display: none;
}

.slidemenu.open {
  display: block;
}

#overlay { /*メニュー外クリックで閉じる用*/
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 100;
}

#overlay.open {
  display: block;
}

button#closebtn {
  border: 0;
  padding: 0;
  background-color: transparent;
  width: 40px;
  height: 40px;
}

.slidemenu.slideopen {
  display: block;
}

.slidebox {
  width: 100%;
  padding: 1em;
}

.slide_block {
  margin-bottom: 1rem;
}

.slide_icons_ul {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 50% 50%;
  gap: 1px;
  margin: 2rem 0;
  padding: 0;
}
.slide_icons_ul li {
  background-color: #202227;
  list-style-type: none;
  font-size: 10px;
  text-align: center;
  padding: 5px;
}
.slide_icons_ul li a {
  text-decoration: none;
  color: #ffffff;
}
.slide_icons_ul li img {
  width: 40px;
}

.slide_cattitle {
  font-size: 14px;
  padding-top: 10px;
  font-weight: bold;
}

.slide_lcatlist {
  list-style-type: none;
  padding: 0 0.5em;
  font-size: 12.75px;
}
.slide_lcatlist a {
  text-decoration: none;
  color: #ffffff;
}

.slide_lname {
  border-bottom: 1px solid #cbced7;
}

.accordion_head {
  background: url(img/layout/ico_slidedown-w.png) no-repeat 95% 55%;
} /*jsアコーディオン*/
.accordion_head.open {
  background: url(img/layout/ico_slideup-w.png) no-repeat 95% 55%;
} /*jsアコーディオン*/
.slide_lname > p {
  margin: 0;
  font-weight: normal;
  padding: 0.5em 2em 0.4em 0.5em;
}

.slide_mcatlist {
  list-style-type: none;
  margin: 0.5em 0;
  padding: 0 0 0 2em;
}

.accordion_inner {
  display: none;
}

.slide_mname {
  border-bottom: 1px solid #666970;
}

.slide_mname > p {
  margin: 0;
  padding: 0.5em 0.5em 0.4em;
}

/*　------------------------------------------------------------
　　　mainエリアここから
------------------------------------------------------------　*/
main {
  padding: 0 0.5%;
}

aside {
  display: none;
}

article {
  /*　----------------------カテゴリ一覧----------------------　*/
}
article .child-cat-list {
  display: flex;
  width: 100%;
  list-style-type: none;
  padding: 0 6px 10px;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
article .child-cat-list li {
  margin: 3px 0.4%;
  border: 5px solid #eef0f2;
  padding: 2px;
  min-width: 150px;
}
article .child-cat-list li.cat-size2 {
  flex: 49.2%;
  max-width: 49.2%;
}
article .child-cat-list li.cat-size3 {
  flex: 32.533%;
  max-width: 32.533%;
}
article .child-cat-list li.cat-size4 {
  flex: 30%;
  max-width: 30%;
}
article .child-cat-list li.cat-size5 {
  flex: 30%;
  max-width: 30%;
}
article .child-cat-list li.cat-size6 {
  flex: 30%;
  max-width: 30%;
}
article .child-cat-list h3, article .child-cat-list h4 {
  font-size: 14px;
  border: 0 !important;
  margin: 8px 3px 4px !important;
  padding-left: 23px;
  position: relative;
}
article .child-cat-list h3::before, article .child-cat-list h4::before {
  content: "arrow_right"; /* Material Iconの名前 */
  font-family: "Material Icons"; /* フォントファミリーを指定 */
  font-size: 20px;
  color: #9F1010;
  position: absolute;
  left: 0;
  top: 12px;
  transform: translateY(-50%);
}
article .child-cat-list .cat-txt {
  padding: 0 10px;
  font-size: 12.75px;
}
article .child-cat-list .cat-stf-txt {
  margin: 3px 5px;
  padding: 3px 7px;
  font-size: 12px;
  background-color: #e1f8ee;
  text-decoration-color: #0d935c;
  text-decoration-line: underline; /*border-left: 3px solid $green;*/
}
article {
  /*　----------------------関連カテゴリ一覧----------------------　*/
}
article section.kanren_links h2 {
  font-size: 16px;
}
article section.kanren_links ul.kanren_cat_list {
  display: flex;
  width: 100%;
  list-style-type: none;
  padding: 0 6px 10px;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
article section.kanren_links ul.kanren_cat_list li {
  margin: 3px 0.4%;
  border: 5px solid #eef0f2;
  padding: 2px;
  flex: 30%;
  max-width: 30%;
  min-width: 30%;
}
article section.kanren_links ul.kanren_cat_list h3 {
  font-size: 14px;
  border: 0 !important;
  margin: 8px 3px 0 !important;
  padding-left: 23px;
  position: relative;
}
article section.kanren_links ul.kanren_cat_list h3::before {
  content: "arrow_right"; /* Material Iconの名前 */
  font-family: "Material Icons"; /* フォントファミリーを指定 */
  font-size: 20px;
  color: #9F1010;
  position: absolute;
  left: 0;
  top: 11px;
  transform: translateY(-50%);
}
article section.kanren_links ul.kanren_cat_list p {
  padding: 0 10px;
  font-size: 12.75px;
}
article {
  /*　----------------------商品一覧--------------------------　*/
}
article .navi-itemlist {
  background-color: #eef0f2;
  text-align: center;
  padding: 0.5em 1em 0.4em;
}
article .itemlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 10px 0;
  padding: 0;
  flex-direction: column;
}
article .itembox {
  flex-basis: 100%;
  border-bottom: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 5px;
  display: grid;
  gap: 0 8px;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 140px 1fr;
  grid-template-areas: "ib_gbox1 ib_gbox2" "ib_gbox1 ib_gbox3" "ib_gbox4 ib_gbox4" "ib_gbox5 ib_gbox5";
}
article {
  /*ib_gbox1(img)*/
}
article .itembox-img {
  grid-area: ib_gbox1;
  display: flex;
  justify-content: center;
  max-width: 140px;
  min-width: 140px;
  position: relative;
}
article .itembox-img .itemimg {
  width: 126px;
}
article .itembox-img .itembox-icons {
  top: 0;
  left: 0;
  width: 40px;
  max-height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}
article .itembox-img .itembox-icons img {
  width: 30px;
  padding-bottom: 3px;
  /*仮にセット*/
  height: 43px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
article .itembox-img .itembox-star {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  font-size: 11.25px;
  background-color: #eef0f2;
  border-radius: 3px;
  color: #666970;
  padding: 1px;
}
article .itembox-img .itembox-star span {
  line-height: 1rem;
}
article .itembox-img .itembox-star img.one_star {
  display: inline-block;
  width: 11.25px;
}
article {
  /*ib_gbox2(name)*/
}
article .itembox-name {
  grid-area: ib_gbox2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
article .itembox-name .itembox-name-p {
  font-size: 14px;
  font-weight: bold;
  margin: 5px 0 0;
}
article .itembox-name .itembox-name-icon {
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0;
}
article .itembox-name .itembox-name-icon span {
  display: inline-block;
  color: #ffffff;
  background-color: #adb9e3;
  padding: 2px 1rem 1px;
  margin-left: 5px;
  border-radius: 12px;
}
article .itembox-name .itembox-name-icon span.free {
  background-color: #0d935c;
}
article .itembox-name .itembox-name-icon span.zaiko {
  background-color: #778bd1;
}
article {
  /*ib_gbox3(txt)*/
}
article .itembox-txt {
  grid-area: ib_gbox3;
}
article .itembox-txt .itembox-details {
  font-size: 12px;
  margin: 6px 0 6px;
  padding: 5px 10px 3px;
  list-style-type: none;
  border-bottom: 1px dashed #cbced7;
  border-top: 1px dashed #cbced7;
}
article .itembox-txt .itembox-desc {
  font-size: 12px;
  margin: 6px 0 6px;
}
article {
  /*ib_gbox4(action)*/
}
article .itembox-action {
  grid-area: ib_gbox4;
}
article .itembox-action .itembox-cart {
  text-align: right;
  font-size: 12px;
  flex: initial;
}
article .itembox-action .itembox-cart .mprice {
  color: #666970;
  margin-bottom: 5px;
  padding-right: 2px;
}
article .itembox-action .itembox-cart .price {
  padding-right: 2px;
}
article .itembox-action .itembox-cart .oneprice {
  padding-right: 1rem;
  padding-right: 2px;
}
article .itembox-action .itembox-cart .taxinprice {
  font-size: 18px;
  font-weight: bold;
  color: #e01939;
  padding-right: 3px;
}
article .itembox-action .itembox-cart form {
  margin-bottom: 0;
  padding: 5px 10px 2px;
  background-color: #eef0f2;
}
article .itembox-action .itembox-cart .amount {
  text-align: center;
  width: 85px;
  padding-left: 15px;
  height: 27px;
}
article .itembox-action .itembox-cart .itembox-cart-button {
  margin-left: 10px;
  padding: 4px 2rem 5px;
  color: #fff;
  border: 0;
  border-radius: 5px;
  background-color: #9F1010;
}
article .itembox-action .itembox-cart .buy2over {
  font-size: 10px;
  margin-bottom: 0;
  margin-top: 2px;
  text-align: right;
}
article .itembox-action .itembox-nocart {
  text-align: center;
}
article .itembox-action .itembox-nocart .itembox-nocart-btn {
  padding: 3px 2rem 3px;
  border-radius: 5px;
  border: 1px solid #666970;
  background-color: inherit;
}
article .itembox-action .itembox-link {
  background-color: #eef0f2;
  padding: 9px 5px 4px;
  text-align: center;
}
article .itembox-action .itembox-link a {
  border: 1px solid #666;
  padding: 0.3rem 2rem;
  border-radius: 5px;
}
article .itembox-action .itembox-nouki {
  font-size: 12px;
  background-color: #eef0f2;
  margin-top: 0;
  padding: 3px;
  text-align: center;
}
article {
  /*ib_gbox5(path)*/
}
article .itembox-path {
  grid-area: ib_gbox5;
}
article .itembox-path .itembox-path-ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 0;
  list-style-type: none;
}
article .itembox-path .itembox-path-ul li:not(:last-of-type)::after {
  content: "›";
  margin: 0 0.6em;
  color: #777;
}
article .pagination {
  display: grid;
  grid-template-columns: 125px 1fr;
  padding: 0.3em 0 0.3em;
  background-color: #eef0f2;
  text-align: center;
}
article .pagination .pagination-counts {
  padding-left: 1.5rem;
  text-align: left;
}
article .pagination .pagination-counts .total_items {
  font-weight: bold;
  padding: 0 3px;
}
article .pagination .pagination-btns {
  padding-right: 50px;
}
article .pagination span {
  padding: 0.2em 0.5em;
}
article .pagination a {
  padding: 0.2em 0.5em;
}
article .pagination a.page-numbers {
  background-color: #ffffff;
  border-radius: 12px;
}

/*　人気商品ランキング(一部products.phpとhome.phpと共有)　*/
.ranking-area {
  border: 1px solid #ccc;
  margin: 20px 5px;
  padding: 10px;
}
.ranking-area .rank-h2 {
  display: flex;
  align-items: baseline;
  border-bottom: 3px double #ccc;
  width: 100%;
  margin: 0.5rem 0;
  justify-content: space-between;
}
.ranking-area .rank-h2 .h2-primary {
  margin: 0;
  padding-right: 0.5rem;
  font-size: 13.5px;
  font-weight: normal;
  border: 0;
}
.ranking-area .rank-h2 .h2-secondary {
  font-size: 12px;
  font-weight: normal;
}
.ranking-area ul.popular-posts {
  display: flex;
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
  overflow: auto;
}
.ranking-area ul.popular-posts li {
  flex: 0 0 120px; /*117pxで8件にすると972でスクロールなくなる*/
  text-align: center;
  padding: 0 5px 1rem;
  font-size: 11.5px;
  position: relative;
}
.ranking-area ul.popular-posts li p {
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 55px;
  margin: 0;
}
.ranking-area ul.popular-posts li p.cat-rank-price {
  margin-top: 3px;
  color: #9F1010;
  font-weight: 700;
  text-align: right;
}
.ranking-area ul.popular-posts li p.cat-rank-size {
  margin-top: 0;
  padding: 0 0.3rem;
  text-align: right;
  color: #666970;
  background-color: #eef0f2;
  font-size: 11.25px;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}
.ranking-area ul.popular-posts .rank1::before {
  content: "1";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background: linear-gradient(150deg, #f0db9f 10%, #e6b422 70%);
  /*background-color: $gold;*/
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank2::before {
  content: "2";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background: linear-gradient(150deg, #eef0f2 10%, #cbced7 70%);
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank3::before {
  content: "3";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background: linear-gradient(150deg, #da936f 10%, #b16e4c 70%);
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank4::before {
  content: "4";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank5::before {
  content: "5";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank6::before {
  content: "6";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank7::before {
  content: "7";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank8::before {
  content: "8";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank9::before {
  content: "9";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}
.ranking-area ul.popular-posts .rank10::before {
  content: "10";
  color: #ffffff;
  text-align: center;
  width: 25px;
  height: 25px;
  padding-top: 4px;
  position: absolute;
  top: 0;
  left: 5px;
  background-color: #666970;
  border: 0;
  border-radius: 13px;
}

/* 新着商品(一部products.phpとhome.phpと共有) */
.newitem-area {
  border: 1px solid #ccc;
  margin: 20px 5px;
  padding: 10px;
}
.newitem-area .newitem-h2 {
  border-bottom: 3px double #ccc;
  width: 100%;
  margin: 0.5rem 0;
  padding-right: 0.5rem;
  font-size: 13.5px;
  font-weight: normal;
}
.newitem-area ul.popular-posts {
  display: flex;
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0;
  overflow: auto;
}
.newitem-area ul.popular-posts li {
  flex: 0 0 120px; /*117pxで8件にすると972でスクロールなくなる*/
  text-align: center;
  padding: 0 5px 1rem;
  font-size: 11.5px;
}
.newitem-area ul.popular-posts li p {
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-height: 55px;
  margin: 0;
}
.newitem-area ul.popular-posts li p.cat-rank-price {
  margin-top: 3px;
  color: #9F1010;
  font-weight: 700;
  text-align: right;
}
.newitem-area ul.popular-posts li p.cat-rank-size {
  margin-top: 0;
  padding: 0 0.3rem;
  text-align: right;
  color: #666970;
  background-color: #eef0f2;
  font-size: 11.25px;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

/* コラム一覧 */
.column-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1%;
  list-style-type: none;
}
.column-list li {
  flex: 0 0 50%;
  padding: 0.3rem 1%;
  text-align: center;
  font-size: 12.75px;
}
.column-list img {
  -o-object-fit: contain;
     object-fit: contain;
}
.column-list p {
  margin: 3px 0;
}
.column-list span.clm_date {
  color: #cbced7;
  font-size: 12px;
}

.sc-column-box {
  margin-bottom: 2rem;
}
.sc-column-box h2 {
  font-size: 16px;
  border-bottom: 3px double #cbced7;
}

.column-more {
  text-align: right;
  margin-right: 1em;
  margin-bottom: 2em;
}

/*レビューのカテゴリ・TOPなどでの表示*/
.cat-review-area {
  margin: 2rem 0;
  padding-top: 1rem;
  background-color: #eef0f2;
}
.cat-review-area h2 {
  margin: 0 1rem;
  padding: 0 3px;
  font-size: 15px;
  border-bottom: 3px double #cbced7;
}

.review-ul {
  margin-top: 0;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #eef0f2;
  max-height: 50vh;
  overflow-y: auto;
  border: 5px solid #eef0f2;
}
.review-ul li.review-post {
  display: grid;
  gap: 5px;
  grid-template-columns: 120px 1fr;
  grid-template-rows: 100px 1fr;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 0.5rem 1rem;
  font-size: 12px;
}
.review-ul li.review-post .target-img {
  grid-row: 1/2;
  grid-column: 1/2;
  align-self: center;
}
.review-ul li.review-post .target-img img {
  width: 100px;
}
.review-ul li.review-post .target-item {
  grid-row: 1/2;
  grid-column: 2/3;
  align-self: center;
}
.review-ul li.review-post .target-item .review_rating {
  display: flex;
  align-items: center;
}
.review-ul li.review-post .target-item p {
  margin: 10px 10px 10px 0;
}
.review-ul li.review-post .review-text {
  grid-row: 2/3;
  grid-column: 1/3;
}

/*主に作りこみで使うクラス全部（ここで良いか？）*/
.custom-slider-outerbox {
  width: 100%;
  overflow: hidden;
}

.custom-slider-container {
  position: relative;
  width: 100%;
  overflow: visible; /* ← 見切れ画像とシェブロンのために */
  margin: auto;
  box-sizing: border-box;
}

/* 横並びのトラック */
.custom-slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  gap: 20px;
  will-change: transform;
}

/* 各スライド */
.custom-slide {
  flex: 0 0 auto;
  max-width: 100%;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  /*transform: scale(0.95);*/
}

.custom-slide.active {
  opacity: 1;
  /*transform: scale(1);*/
  z-index: 2;
}

/* スライダー内の画像 */
.custom-slider-container img {
  width: 100%;
  height: auto;
  display: block;
}

/*
slider-thumbnail-img{}
slider-media-img{}
*/
/* シェブロン：中央からはみ出すように */
.custom-slider-prev,
.custom-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(155, 155, 155, 0.5);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 0px 12px 4px;
  cursor: pointer;
  font-size: 24px;
  z-index: 5;
}

/* 中央寄せと重ならないよう外に出す（必要に応じて調整） */
.custom-slider-prev {
  left: 10px;
}

.custom-slider-next {
  right: 10px;
}

/* PC表示で中央以外も見せる */
@media (min-width: 740px) {
  .custom-slider-container {
    max-width: 100%;
  }
  .custom-slider-track {
    gap: 20px;
  }
  .custom-slide {
    flex: 0 0 auto;
    max-width: 80%;
    /*transform: scale(0.95);*/
  }
  .custom-slide.active {
    /*transform: scale(1);*/
    opacity: 1;
  }
}
/*--------------------------------------------------
    主にカテゴリつくりこみ（ショートコード用含む）
--------------------------------------------------*/
/*テーブル*/
.basictable {
  font-size: 12.75px;
}

.basictable .basictable th, .basictable td {
  border: 1px solid #cbced7;
  border-collapse: collapse;
}

.basictable th, .basictable td {
  border: 1px solid #cbced7;
  padding: 5px 0.5rem;
}

.basictable th {
  text-align: center;
  font-weight: bold;
  background-color: #eef0f2;
}

/*テーブル(tdセンター揃え)*/
.td-center td {
  text-align: center;
}

/*スクロールコンテナ*/
.scroll-box {
  width: 100%;
  padding: 0 0 0.5rem;
  overflow-x: scroll;
}

.scroll-box-y {
  padding: 0;
  overflow-y: scroll;
}

.sp-scroll-box {
  width: 100%;
  padding: 0 0 0.5rem;
  overflow-x: scroll;
}
@media (min-width: 740px) {
  .sp-scroll-box {
    overflow: hidden;
  }
}

.tab-scroll-box {
  width: 100%;
  padding: 0 0 0.5rem;
  overflow-x: scroll;
}
@media (min-width: 1024px) {
  .tab-scroll-box {
    overflow: hidden;
  }
}

/*共通仕様*/
.siyou-list dl {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  font-size: 12.75px;
  align-items: end;
}
.siyou-list dt {
  flex-basis: 27%;
  max-width: 27%;
  border-bottom: 1px dotted #cbced7;
  padding-top: 0.5em;
}
.siyou-list dd {
  flex-basis: 70%;
  max-width: 70%;
  border-bottom: 1px dotted #cbced7;
  margin-left: 2%;
  padding-top: 0.5em;
}

/*カラーサンプル*/
ul.colors-ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  list-style-type: none;
  margin-top: 0;
}
ul.colors-ul li {
  padding: 0 5px 1rem 0;
  min-width: 33.3%;
}
ul.colors-ul li p {
  margin: 0;
}
@media (min-width: 740px) {
  ul.colors-ul {
    padding-left: 20px;
  }
  ul.colors-ul li {
    min-width: auto;
  }
}

span.cl-icon-koukin {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #4fada9;
  color: #fff;
}

span.cl-icon-markless, span.cl-icon-blue {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #778bd1;
  color: #fff;
}

span.cl-icon-bouen, span.cl-icon-red {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #c57070;
  color: #fff;
}

span.cl-icon-green {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #6ebe9d;
  color: #fff;
}

span.cl-icon-purple {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #9c88b8;
  color: #fff;
}

span.cl-icon-gray {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  background-color: #666970;
  color: #fff;
}

span.cl-icon-free {
  font-size: 80%;
  padding: 0.1rem 0.6rem;
  border-radius: 3px;
  color: #fff;
}

/*スマホ時だけ左右に振りたい説明要素（画像‐テキスト）の外枠*/
.gaiyou-box {
  margin-bottom: 2rem;
}
@media (min-width: 740px) {
  .gaiyou-box {
    display: flex;
    gap: 1rem;
  }
  .gaiyou-box .gaiyou-txt {
    flex: 0 0 60%;
    padding: 0 1rem;
  }
  .gaiyou-box .gaiyou-img {
    flex: 0 0 35%;
  }
}

/*一覧リンクボタン（幅別一覧など）*/
.nav_link_buttons {
  background: #ffffff;
  margin-bottom: 2rem;
  margin-top: 1rem;
  padding: 0 5px;
  border: 0;
}
.nav_link_buttons > p {
  margin: 0 0.2rem 1rem;
  border-bottom: 1px dashed #9c9fa5;
}
.nav_link_buttons { /*移植したが、これは小見出し用か？*/ }
.nav_link_buttons ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0.8%;
}
.nav_link_buttons ul li {
  margin-bottom: 1%;
  padding: 0;
  list-style-type: none;
  flex-basis: 32.3%;
}
.nav_link_buttons ul li a {
  text-align: center;
  border: 1px solid #cbced7;
  display: block;
  background: #ffffff;
  padding: 5px;
  font-size: 90%;
  text-decoration: none;
}
.nav_link_buttons ul li a:hover {
  text-align: center;
  background: darkorange !important;
  color: #ffffff;
  border-color: darkorange;
  opacity: 1;
}
@media (min-width: 740px) {
  .nav_link_buttons ul {
    padding: 0 1rem;
  }
  .nav_link_buttons ul li {
    flex-basis: 15.5%;
  }
}

/*横並びのリスト作成（左寄せ・li内中央揃え・幅指定なし）抽出リンク等に*/
.list-img-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 0;
}
.list-img-flex li {
  text-align: center;
  font-size: 12.75px;
  font-weight: bold;
  list-style-type: none;
}

/*同上space-evenly（均等・li内中央揃え・幅指定なし）*/
.list-img-flex-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 0;
}
.list-img-flex-center li {
  text-align: center;
  font-size: 12.75px;
  font-weight: bold;
  list-style-type: none;
}

/*ジャンプリンク*/
.jump_btn {
  text-align: center;
  margin-bottom: 2rem;
}
.jump_btn a {
  text-decoration: none;
  color: #202227;
}
.jump_btn span {
  font-size: 12.75px;
  padding: 0.5rem 2rem;
  border: 1px solid #1d3db3;
  border-radius: 100px;
}
.jump_btn span:hover {
  background-color: #1d3db3;
  color: white;
  cursor: pointer;
}

/*開閉スタンダード（details-summary）*/
section.select_type {
  margin-bottom: 2rem;
}
section.select_type summary {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 2rem;
  background-color: darkorange;
  color: white; /*border-radius: 20px 0 0 0;*/
}
section.select_type summary p {
  margin: 0;
  font-weight: bold;
}
section.select_type summary p span {
  font-weight: normal;
  font-size: 12.75px;
  padding-left: 0.5em;
}
section.select_type .select_type_inner {
  margin: 0;
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border: 1px solid darkorange;
}
section.select_type .select_type_inner .type_inbox1 {
  flex: 0 0 100%;
  display: flex;
  padding: 0.3rem 0.5rem;
  align-items: stretch;
}
@media (min-width: 740px) {
  section.select_type .select_type_inner .type_inbox1 {
    flex: 0 0 49.5%;
  }
}
section.select_type .select_type_inner .type_inbox1 {
  border: 1px solid #cbced7;
}
section.select_type .select_type_inner .type_inbox1 div.type_inbox1_title {
  flex-basis: 33%;
  margin: 0;
  display: flex;
  align-items: center;
}
section.select_type .select_type_inner .type_inbox1 div.type_inbox1_title p {
  margin: 0;
  font-weight: bold;
  padding-left: 0.5rem;
}
section.select_type .select_type_inner .type_inbox1 ul {
  flex-basis: 67%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 0 0.5rem;
}
section.select_type .select_type_inner .type_inbox1 ul .type_inbox2 {
  flex: 0 0 19%;
  margin: 0.5%;
  padding: 3px;
  font-size: 12px;
  list-style-type: none; /*border: 1px solid $gray; */
  background-color: #eef0f2;
  text-align: center;
}
section.select_type .select_type_inner .type_inbox1 ul .type_inbox2:hover {
  background-color: darkorange;
  font-weight: bold;
  border: 0;
}
section.select_type .select_type_inner .type_inbox1 ul .type_inbox2:hover a {
  color: white;
  opacity: 1;
}
section.select_type .select_type_inner .type_inbox1.key_type_cylinder-normal > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_cylinder-normal.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_cylinder-inner > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_cylinder-inner.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_dial > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_dial.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_coin > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_coin.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_ic > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_ic.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_button > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_button.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_tenkey > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_tenkey.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_padlock > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_padlock.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}
section.select_type .select_type_inner .type_inbox1.key_type_cylinder > div {
  background: url(https://furniture.offinet.co.jp/wp-content/themes/furniture2025/img/icon/key_list/s_cylinder.jpg) 3px 50% no-repeat;
  padding-left: 50px;
  min-height: 58px;
}

/*headimg*/
.head_image {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}
.head_image img {
  max-width: 100%;
}

/*detail_list*/
section.detail_list {
  margin-bottom: 2rem;
}
section.detail_list .detail_parent {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0.5rem;
}
section.detail_list .detail_child {
  padding: 0.5rem;
}
section.detail_list .detail_child img {
  padding: 0;
}
section.detail_list .detail_child h5 {
  margin: 0.5rem 0 0.3rem;
  font-size: 14px;
}
section.detail_list .detail_child p {
  margin: 0.3rem 0;
  font-size: 12.75px;
}
@media (min-width: 740px) {
  section.detail_list .one-column {
    display: grid;
    grid-template-columns: minmax(200px, 40%) 1fr;
    grid-template-rows: auto 1fr;
    border-bottom: 1px dashed #cbced7;
  }
  section.detail_list .one-column img {
    grid-column: 1/2;
    grid-row: 1/3;
    padding: 0 1rem;
  }
  section.detail_list .one-column h5 {
    grid-column: 2/3;
    grid-row: 1/2;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  section.detail_list .one-column p {
    grid-column: 2/3;
    grid-row: 2/3;
    margin-bottom: 0.5rem;
  }
  section.detail_list .one-column:last-child {
    border-bottom: 0;
  }
}

/*detail_list_side*/
section.detail_list_side {
  margin-bottom: 1rem;
}
section.detail_list_side .detail_parent {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0.5rem;
}
section.detail_list_side .detail_child {
  margin-bottom: 1rem;
  padding: 0 1rem;
  display: flex;
}
section.detail_list_side .detail_child .side_img {
  flex: 0 0 35%;
  padding: 0 1rem 0 0;
}
section.detail_list_side .detail_child .side_txt {
  flex: 0 0 65%;
}
section.detail_list_side .detail_child .side_txt h5 {
  margin: 0.5rem 0;
  font-size: 14px;
  border-bottom: 1px dashed #cbced7;
}
section.detail_list_side .detail_child .side_txt p {
  margin: 0.3rem 0;
  font-size: 12.75px;
}
@media (min-width: 740px) {
  section.detail_list_side .one-column .side_txt h5 {
    font-size: 18px;
  }
}

/*旧式の別バナーを使いたい時*/
.other-bnr-box {
  margin-bottom: 1rem;
}
.other-bnr-box.other-bnr-scroll {
  overflow-x: scroll;
}
.other-bnr-box.other-bnr-scroll ul.flex-std {
  flex-wrap: nowrap;
}
.other-bnr-box.other-bnr-scroll ul.flex-std li {
  min-width: 150px;
}
.other-bnr-box .other-bnr-list {
  list-style: none;
  padding-left: 0;
}
.other-bnr-box .other-bnr-list li {
  padding: 0 5px;
}
.other-bnr-box .other-bnr-list img {
  border: 1px solid #cbced7;
}
.other-bnr-box .other-bnr-list .cat-title {
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  margin: 0.5rem 0;
  border-bottom: none;
}
.other-bnr-box .other-bnr-list .cat-txt {
  font-size: 12.75px;
  margin-top: 0;
}
@media (min-width: 740px) {
  .other-bnr-box {
    width: 100%;
  }
  .other-bnr-box.other-bnr-scroll {
    overflow-x: hidden;
  }
  .other-bnr-box.other-bnr-scroll ul.flex-std {
    flex-wrap: wrap;
  }
}

/*************以下、フレックスボックス回りの要素**************/
/*flexbox親要素*/
.flex-std {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-even {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.align-center {
  align-items: center;
}

.align-base {
  align-items: baseline;
}

/*ここから子要素サイズ*/
.flex-2 {
  flex: 0 0 50%;
}

.flex-3 {
  flex: 0 0 33.33%;
}

.flex-4 {
  flex: 0 0 25%;
}

.flex-5 {
  flex: 0 0 20%;
}

.flex-21 {
  flex: 0 0 100%;
}
@media screen and (min-width: 740px) {
  .flex-21 {
    flex: 0 0 50%;
  }
}

.flex-31 {
  flex: 0 0 100%;
}
@media screen and (min-width: 740px) {
  .flex-31 {
    flex: 0 0 33.33%;
  }
}

.flex-41 {
  flex: 0 0 100%;
}
@media screen and (min-width: 740px) {
  .flex-41 {
    flex: 0 0 25%;
  }
}

.flex-32 {
  flex: 0 0 50%;
}
@media screen and (min-width: 740px) {
  .flex-32 {
    flex: 0 0 33.33%;
  }
}

.flex-42 {
  flex: 0 0 50%;
}
@media screen and (min-width: 740px) {
  .flex-42 {
    flex: 0 0 25%;
  }
}

.flex-52 {
  flex: 0 0 50%;
}
@media screen and (min-width: 740px) {
  .flex-52 {
    flex: 0 0 20%;
  }
}

.flex-53 {
  flex: 0 0 33.33%;
}
@media screen and (min-width: 740px) {
  .flex-53 {
    flex: 0 0 20%;
  }
}

.flex-63 {
  flex: 0 0 33.33%;
}
@media screen and (min-width: 740px) {
  .flex-63 {
    flex: 0 0 16.66%;
  }
}

.flex-73 {
  flex: 0 0 33.33%;
}
@media screen and (min-width: 740px) {
  .flex-73 {
    flex: 0 0 14.28%;
  }
}

.flex-83 {
  flex: 0 0 33.33%;
}
@media screen and (min-width: 740px) {
  .flex-83 {
    flex: 0 0 12.5%;
  }
}

.flex-03 {
  flex: 0 0 33.33%;
}
@media screen and (min-width: 740px) {
  .flex-03 {
    flex: 0 0 auto;
  }
}

.flex-84 {
  flex: 0 0 25%;
}
@media screen and (min-width: 740px) {
  .flex-84 {
    flex: 0 0 12.5%;
  }
}

.flex-04 {
  flex: 0 0 25%;
}
@media screen and (min-width: 740px) {
  .flex-04 {
    flex: 0 0 auto;
  }
}

/*************以下、特定の記述をするときの要素**************/
/*infoボタン*/
.cat_info_block > p {
  padding-left: 3px;
  font-weight: bold;
  border-bottom: 3px double #cbced7;
}
.cat_info_block .cat-info-btns {
  display: flex;
  margin: 1rem 0 2rem;
  padding: 0 1rem;
  gap: 1%;
  flex-wrap: wrap;
}
.cat_info_block .cat-info-btns .cat-info-tel {
  flex: 0 0 100%;
  border: 2px solid #cbced7;
  text-align: center;
  margin-bottom: 1em;
  padding: 7px;
}
.cat_info_block .cat-info-btns .cat-info-btn {
  flex: 0 0 49.5%;
}
.cat_info_block .cat-info-btns .cat-info-btn button {
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  color: #202227;
  border: 2px solid #666970;
  background-color: white;
}
@media screen and (min-width: 740px) {
  .cat_info_block .cat-info-btns {
    flex-wrap: nowrap;
  }
  .cat_info_block .cat-info-btns .cat-info-tel {
    flex: 0 0 33%;
  }
  .cat_info_block .cat-info-btns .cat-info-btn {
    flex: 0 0 32%;
  }
}

/*上部コンテンツに引き取り可能表示*/
.bnr-cat-features {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  width: 100%;
  justify-content: right;
  font-size: 12.75px;
  font-weight: bold;
}
.bnr-cat-features span {
  padding: 0.5em 1em 0.35em;
  border: 1px solid #ee7910;
  margin-right: 5px;
  margin-bottom: 3px;
}
.bnr-cat-features span:last-child {
  margin-right: 0;
}
@media (min-width: 1024px) {
  .bnr-cat-features {
    margin-bottom: 0;
  }
}

/*okamura作りこみ上部のアイコンや文言*/
section.okmr-bnr .okmr-bnr-txt {
  font-size: 12px;
  margin: 0 0 4px;
  background-color: #eef0f2;
  padding: 3px 1.2rem;
}

section.okmr-mtm {
  border: 1px solid #cbced7;
  margin-bottom: 0.5rem;
  padding: 5px 1rem;
  font-size: 12px;
}
section.okmr-mtm > div {
  gap: 0.5rem;
  align-items: baseline;
}
section.okmr-mtm .mitumori {
  margin: 3px;
}
section.okmr-mtm input#mtmr {
  border: 1px solid #666970;
  border-radius: 3px;
  font-size: 12px;
  background-color: #eef0f2;
  color: #202227;
  padding: 0.1rem 0.5rem;
}
section.okmr-mtm input#mtmr:hover {
  cursor: pointer;
  opacity: 0.7;
}

/*okamuraマップ*/
.okmr_map_sec {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
  margin: 1rem 1rem 2rem;
  padding: 1rem;
  border: 4px double #9F1010;
}
@media screen and (min-width: 740px) {
  .okmr_map_sec {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
}
@media screen and (min-width: 740px) {
  .okmr_map_sec .okamura_txt {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}
.okmr_map_sec .okamura_map {
  text-align: center;
}
@media screen and (min-width: 740px) {
  .okmr_map_sec .okamura_map {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
.okmr_map_sec .okamura_comment {
  font-size: 12px;
}
@media screen and (min-width: 740px) {
  .okmr_map_sec .okamura_comment {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
.okmr_map_sec .okamura_txt_info {
  display: flex;
  justify-content: space-evenly;
}
.okmr_map_sec .okamura_txt_info .item-info-tel, .okmr_map_sec .okamura_txt_info .item-info-btm button {
  border: 1px solid #666970;
  border-radius: 3px;
  padding: 0.5rem 2rem;
  color: #202227;
  background-color: #eef0f2;
}

/*good_design*/
.gd_icon_box {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.gd_icon_box .gd_icon_txt {
  font-size: 90%;
}
@media screen and (min-width: 450px) {
  .gd_icon_box {
    grid-template-columns: 200px 1fr;
  }
}
@media screen and (min-width: 740px) {
  .gd_icon_box .gd_icon_txt {
    margin-right: 1rem;
  }
}

/*youtube*/
.youtube-if {
  width: 100%;
  aspect-ratio: 16/9;
}
@media screen and (min-width: 740px) {
  .youtube-if {
    width: 680px;
    margin: auto;
  }
}
.youtube-if iframe {
  width: 100%;
  height: 100%;
}

/*　------------------------------------------------------------
　　　フッター
------------------------------------------------------------　*/
footer {
  margin-top: 1em;
  background-color: #eef0f2;
  padding: 1em 1em 3em;
}

.footbox {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 2em;
  margin-top: 1em;
}
.footbox .footinbox1 {
  flex-basis: 100%;
  padding: 0 1em;
}
.footbox .footinbox2 {
  flex-basis: 100%;
  padding: 0 1em;
}
.footbox .footinbox3 {
  flex-basis: 100%;
  padding: 0 1em;
}
.footbox address {
  font-style: normal;
}
.footbox table.foot_table {
  border: 1px solid #cbced7;
}
.footbox table.foot_table th {
  border: 1px solid #cbced7;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 9px 3px;
}
.footbox table.foot_table td {
  background-color: #ffffff;
  padding: 5px 9px 4px;
  font-size: 12px;
  border: 1px solid #cbced7;
}
.footbox p {
  padding: 0 5px;
}
.footbox p.foot_parag_r {
  text-align: right;
}

.foot-hx {
  font-weight: bold;
  border-bottom: 2px solid #cbced7;
  font-size: 12.75px;
}

.footlinks {
  font-size: 10px;
  margin: 1em 0;
}
.footlinks ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  width: 100%;
  justify-content: center;
}
.footlinks li {
  padding: 0 1em;
  border-right: 1px solid #ccc;
}
.footlinks li:last-child {
  border-right: none;
}

.footsign {
  font-size: 10px;
  text-align: center;
}

.backtotop {
  display: inline;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 500;
}
.backtotop .foot_fixbox {
  display: flex;
  flex-direction: row-reverse;
  font-size: 0px;
}
.backtotop .foot_fixbox img {
  width: 50px;
}
.backtotop .foot_fixbox a {
  text-decoration: none;
}
.backtotop .foot_fixbox .foot_fixbox1 {
  margin: 0;
  text-decoration: none;
}
.backtotop .foot_fixbox .foot_fixbox2 {
  margin-right: 10px;
  text-decoration: none;
}
.backtotop .foot_fixbox .foot_fixbox3 {
  margin-right: 10px;
  text-decoration: none;
}
.backtotop .foot_fixbox button.foot_info {
  border: 0;
  background-color: transparent;
  padding: 0;
}

/*　------------------------------------------------------------
　　　ここからbodyクラスごとの指定（記事タイプ・テンプレート固有）
------------------------------------------------------------　*/
/*ニュース記事ページ*/
body.single-news .news-txt-head {
  margin-right: 1rem;
}
body.single-news .news-txt-head p.news-txt-head-right {
  text-align: right;
}
body.single-news .news-txt-main {
  margin-right: 1rem;
  margin-bottom: 2rem;
}
body.single-news .news-txt-foot {
  margin-right: 1rem;
  margin-bottom: 3rem;
}

/*search.php専用クラス*/
body.search-results ul.pagelist {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  background-color: #eef0f2;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
  list-style-type: none;
}
body.search-results .pagelist_li {
  flex: 1 1 24%;
  min-width: 300px;
  margin: 0.5rem 0.5%;
  padding: 5px;
  background-color: #ffffff;
}
body.search-results .pagelist_li_img {
  width: 200px;
  min-width: 25%;
}
body.search-results .pagelist_li_txt h3 {
  margin: 0;
  font-size: 14px;
}
body.search-results .pagelist_li_txt .pagelist_li_p {
  font-size: 12px;
  padding: 0 6px;
  margin-bottom: 0;
}

/* こっちは横長カードにしたい時
body.search-results{
	ul.pagelist{ background-color: $lightgray; margin: 0; padding: .5rem 0; list-style-type: none; height: 400px; max-height: 50vh; overflow-y: scroll;}
	.pagelist_li{ margin: .5rem 1rem; padding: 5px; background-color: $white; display: flex; gap: 1%;}
	.pagelist_li_img { flex: 1 1 20%; min-width: 150px;}
	.pagelist_li_txt { flex: 1 1 72%; 
		h3 { margin: 0; font-size: 14px; }
		.pagelist_li_p { font-size: 12px; padding: 0 6px; margin-bottom: 0; }
	}
}*/
/*----------この下はinfo系コンテンツ----------*/
.must {
  color: #e01939;
}

.form-about {
  background-color: #cbced7;
  padding: 1rem;
}

.form-about-item {
  flex: 0 0 45%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.form-about-item .form-about-txt {
  font-size: 12.75px;
}
.form-about-item .linkbtn {
  border: 2px solid #666970;
  background-color: #eef0f2;
  padding: 0.5rem;
  text-align: center;
}

.form-about-item:nth-child(n+3) {
  padding-top: 8px;
}

form.mainform {
  width: 100%;
}
form.mainform table {
  width: 100%;
  margin: auto;
  max-width: 100vw;
  text-align: left;
}
form.mainform input[type=text], form.mainform select, form.mainform textarea {
  width: 70%;
  padding: 0.5rem;
  margin-right: 0.5rem;
  border: 1px solid #aaa;
  border-radius: 4px;
}
form.mainform textarea {
  width: 90%;
}

.submit {
  text-align: center;
  margin: 3rem 0;
}
.submit button {
  padding: 0.5rem 2rem;
  border: 2px solid #1d3db3;
  font-size: 16px;
  background-color: #1d3db3;
  color: #fff;
  border-radius: 25px;
}

.main-notice {
  border: 5px solid #c57070;
  padding: 1rem;
}
.main-notice .caution {
  border-bottom: 3px double #666970;
  font-size: 16px;
  font-weight: bold;
}
.main-notice .notice-ol {
  background-color: #fdeaeb;
  margin: 1rem;
  padding: 1rem 1rem 1rem 3rem;
  font-weight: bold;
  /* color: $red; */
  border-radius: 5px;
}
.main-notice .notice-ul {
  padding-left: 4rem;
}

.q-links {
  padding: 1rem;
  flex-basis: 50%;
}
.q-links p {
  font-size: 15px;
  border-bottom: 3px double #c0c4cb;
  padding-left: 3px;
}
.q-links span {
  font-size: 16px;
  font-weight: bold;
}

.q-anchor {
  margin-bottom: 2rem;
}

.faq-list {
  margin: 0 1rem 2rem;
}
.faq-list p {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  padding-left: 0.5em;
}

dl.faq {
  margin: 2rem 2%;
}
dl.faq dt {
  margin: 1rem 0;
  font-weight: bold;
}
dl.faq dt::before {
  content: "Q.";
  padding-right: 5px;
  display: inline-block;
}
dl.faq dd {
  border: 3px double #c0c4cb;
  background: #fff;
  padding: 1rem;
  margin-left: 1rem;
}
dl.faq dd li {
  margin-top: 0.5em;
}
dl.faq dd::before {
  content: "A.";
  padding-right: 5px;
  display: inline-block;
}

.guide-flow {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2rem;
}
.guide-flow .guide-flow-p {
  margin-bottom: 0.3rem;
}
.guide-flow .guide-flow-content {
  font-size: 14px;
  font-weight: normal;
  padding-right: 1rem;
}
.guide-flow .guide-imgbox {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.guide-flow .guide-imgbox img {
  border: 5px solid #eef0f2;
}

.guide-icon-list {
  display: grid;
  grid-template-columns: auto;
  row-gap: 1rem;
  align-items: center;
  margin: 0 0 2rem;
  padding: 0 1rem;
}
.guide-icon-list dt {
  padding: 3px;
  text-align: left;
  font-size: 12px;
}
.guide-icon-list dt span {
  font-size: 12px;
  border: 1px solid #666970;
  padding: 3px 14px;
  border-radius: 13px;
  text-decoration: none;
}
.guide-icon-list dt span.free {
  background-color: #0d935c;
  border-color: #0d935c;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.need {
  background-color: #9F1010;
  border-color: #9F1010;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.zaiko {
  background-color: #778bd1;
  border-color: #778bd1;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.ordermade {
  background-color: #9c9fa5;
  border-color: #9c9fa5;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.kumitate-3 {
  background-color: #9c88b8;
  border-color: #9c88b8;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.kumitate-1 {
  background-color: #1d3db3;
  border-color: #1d3db3;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dt span.kumitate-5 {
  background-color: #74599c;
  border-color: #74599c;
  color: #ffffff;
  font-weight: bold;
}
.guide-icon-list dd {
  padding: 3px;
  text-align: left;
  font-size: 12.75px;
}

.guide-pay-list {
  padding: 1rem;
  margin: 1rem 1rem 2rem;
  background-color: #e1f8ee;
}
.guide-pay-list dt {
  font-weight: bold;
  padding-left: 25px;
  position: relative;
}
.guide-pay-list dt::before {
  content: "check_small";
  font-family: "Material Icons";
  font-size: 18px;
  color: #9c9fa5;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.guide-pay-list dd {
  padding: 0.5rem 0;
}

.guide-question-list {
  padding: 1rem 1rem 1rem 3rem;
  margin: 1rem;
  background-color: #e1f8ee;
}
.guide-question-list li {
  padding: 0.2rem 0;
}/*# sourceMappingURL=style.css.map */