@charset "UTF-8";
/*PAGE-title─────────────*/
#page-title {
  background: url("../images/page-title-back.png") no-repeat;
  background-position: center top;
}
#page-title .inner {
  position: relative;
  padding-bottom: 20%;
}
#page-title .inner img {
  display: block;
  width: 45%;
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 1328px) {
  #page-title .inner {
    padding-bottom: 25%;
  }
}

.page-title {
  padding-top: 2em;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1250px) {
  #page-title {
    background: url("../images/page-title-back_s.png") no-repeat;
  }
}
@media (max-width: 600px) {
  #page-title {
    background: url("../images/page-title-back_sm.png") no-repeat;
  }
}
/*contents─────────────*/
#contents {
  margin-top: max(40px, 8%);
}

/*TITLE────────────────*/
.ttl-style01 {
  text-align: center;
  padding: .7em;
  background-color: #D71969;
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

/*ご新規の方ご注文──────────*/
#page-head {
  align-items: center;
}
#page-head .page-head-img {
  width: 25%;
}
#page-head .page-head__txt {
  width: 73%;
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}

/*ページ内リンク*/
.page-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.page-link li {
  margin-left: .2em;
  margin-right: .2em;
  margin-bottom: 1em;
}
@media (max-width: 540px) {
  .page-link li {
    width: 100%;
    text-align: center;
  }
}
.page-link li a {
  display: block;
  padding: .7em 2em;
  background-color: #428CDB;
  border-radius: 9999px;
  color: #fff;
  font-size: clamp(1.5rem, 1.7vw, 1.8rem);
  font-weight: 500;
}

/*セルフフィルターの取り付け例*/
#order-case {
  padding-top: max(40px, 8%);
}

[class^="case-type__"] {
  margin-top: 5%;
  padding: 5.5% 4% 4%;
  border: solid 10px #e8e8e8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.type-txt {
  width: 28%;
}
.type-ttl {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 700;
}
.type-ttl::before {
  content: "●";
  margin-left: 5px;
  color: #D71969;
}
/*

.maker {
  margin-top: 2em;
}
.maker li {
  font-size: 1.4rem;
  padding-left: 1em;
  position: relative;
}
.maker li::before {
  content: "・";
  display: inline-block;
  position: absolute;
  left: 0;
}
*/
.cace-box {

}
.cace-item {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
}
[class^="case-img__"] {
 width: 40%;
 margin-bottom: 25px;
}

.case-img__after {
  position: relative;
}
.case-img__after .case {
  display: block;
  width: 8.4em;
  text-align: center;
  padding: .2em;
  border-radius: 9999px;
  background-color: #e8e8e8;
  position: absolute;
  top: -3em;
  left: 50%;
  transform: translate(-50%);
}

@media (max-width: 640px) {
  [class^="case-type__"] {
    border: solid 5px #e8e8e8;
    display: block;
  }
 .type-txt {
  width: 100%;
  margin-bottom: 20px;
 }
 .cace-arrow {
  width: 15%;
 }
/*
  .type-txt, [class^="case-img__"] {
    width: 45%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
  }
*/

/*
  .type-txt img {
    width: 100%;
  }
*/

/*
  .cace-arrow {
    text-align: center;
  }
  .cace-arrow img {
    width: 55px;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(90deg);
    margin-top: 1em;
    margin-bottom: 4em;
  }
*/
}
/*金網の測り方*/
#order-measure {
  padding-top: max(40px, 8%);
}
#order-measure .column3 li:first-child figure,
#order-measure .column3 li:nth-child(2) figure {
  margin-top: -2em;
}
@media (max-width: 840px) {
  #order-measure .column3 li:first-child figure,
  #order-measure .column3 li:nth-child(2) figure {
    margin-top: 1em;
  }
}
@media (max-width: 600px) {
  #order-measure .column3 li:first-child figure,
  #order-measure .column3 li:nth-child(2) figure {
    margin-top: -2em;
  }
}
#order-measure .column3 li:last-child figure {
  margin-top: 1em;
}

/*セルフィルター交換方法*/
#order-exchange {
  padding-top: max(40px, 8%);
}
#order-exchange .column3 {
  justify-content: center;
}
#order-exchange .column3 li:nth-child(4),
#order-exchange .column3 li:last-child {
  margin-top: 3em;
}
#order-exchange .column3 li {
  margin-left: 10px;
  margin-right: 10px;
}
@media (max-width: 600px) {
  #order-exchange .column3 li {
    margin-left: auto;
    margin-right: auto;
  }
}

/*機種名確認方法*/
#order-confirmation {
  padding-top: max(40px, 8%);
}
#order-confirmation .flex-center img {
  width: 45.25%;
  margin-left: 15px;
  margin-right: 15px;
}
@media (max-width: 600px) {
  #order-confirmation .flex-center img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  #order-confirmation .flex-center img:first-of-type {
    margin-bottom: 30px;
  }
}

/*フリーダイヤル*/
.order-dial {
  text-align: center;
}
.order-dial .order-dial__txt {
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 700;
}
.order-dial .order-dial__txt span {
  padding-bottom: .2em;
  border-bottom: solid 2px #222;
}
.order-dial .tel {
  font-size: clamp(2.4rem, 3.6vw, 4rem);
  font-weight: 700;
}
.order-dial .tel img {
  vertical-align: -5%;
  width: max(25px, 4%);
}

/*ご注文フォーム*/
.order-form {
  padding-top: max(40px, 8%);
}
.order-form .ttl-style01 {
  position: relative;
}
.order-form .ttl-style01::before {
  content: "";
  width: max(73px, 17%);
  aspect-ratio: 206 / 192;
  background: url("../images/max55.png") no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: -72%;
  left: 3em;
}
@media (max-width: 600px) {
  .order-form .ttl-style01::before {
    top: -31%;
    left: .7em;
  }
}
.order-form .ttl-style01 span {
  display: block;
  font-size: clamp(1.4rem, 1.8vw, 2rem);
}

.order-btn {
  margin-top: 30px;
}
.order-btn a {
  display: block;
  padding: 1em;
  width: min(421px, 100%);
  background-color: #428CDB;
  color: #fff;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  font-weight: 500;
  border-radius: 10px;
  text-align: center;
  margin-right: 0;
  margin-left: auto;
}
.order-btn a::after {
  content: "";
  display: inline-block;
  width: max(21px, 8%);
  aspect-ratio: 1;
  background: url("../images/arrow2.png") no-repeat;
  background-size: contain;
  margin-left: 10px;
  vertical-align: -.5em;
}

#order-repeat-form {
  padding-top: max(40px, 8%);
}

.form-wrap {
  overflow-x: scroll;
}

.order-table {
  width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .order-table {
    width: 800px;
  }
}
.order-table thead th {
  background-color: #428CDB;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.order-table thead th.bk-pk {
  background-color: #D71969;
}
.order-table thead th.cl-yel {
  color: #F5F50A;
}

th {
  background-color: #EFF7FF;
}

th, td {
  vertical-align: middle;
  text-align: center;
  font-weight: 500;
}
@media (max-width: 600px) {
  th, td {
    padding: 5px;
    font-size: 1.4rem;
  }
}

.discount {
  background-color: #FFF2F6;
  color: #D71969;
}

.special {
  color: #428CDB;
}

.size13 {
  font-size: 1.3rem;
  display: inline-block;
  margin-bottom: 1em;
}

.order-price {
  padding: 2% 5%;
  background-color: #F5F5F5;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}
.order-price .total-price {
  display: inline-block;
  margin-left: 1em;
  margin-right: 1em;
  color: #D71969;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.order-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.order-button input[type=button] {
  width: min(280px, 90%);
  background-color: #D71969;
  color: #fff;
  padding: 1em;
  text-align: center;
  font-weight: 700;
  border-radius: 10px;
  font-size: clamp(1.6rem, 1.7vw, 1.8rem);
  border: none;
}
.order-button input[type=button].bl-btn {
  background-color: #428CDB;
  margin-left: 10px;
}

#order-postage table {
  width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.postage-table th {
  background-color: #E2E2E2;
}
.postage-table th, .postage-table td {
  text-align: center;
}

.form-wrap-s .order-table {
  width: 100%;
}

@media (max-width: 800px) {
  .form-wrap-s .order-table th, .form-wrap-s .order-table td {
    width: 100%;
    display: block;
  }
}
@media (max-width: 600px) {
  .order-button input[type=button].bl-btn {
    margin-left: auto;
    margin-top: 10px;
  }
}
/*注文者情報*/
.order-customer-ttl {
  text-align: center;
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  font-weight: 700;
}

.customer-table th, .customer-table td {
  text-align: left;
}

.his {
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
  padding: 0 .2em;
  background-color: #D71969;
  color: #fff;
  margin-left: 5px;
}

select {
  width: min(360px, 100%);
}

.post-code-btn {
  width: 260px;
  display: inline-block;
  margin-left: 10px;
}
.post-code-btn a {
  display: block;
  width: 100%;
  padding: .5em;
  text-align: center;
  background-color: #428CDB;
  color: #fff;
  border-radius: 9999px;
}

@media (max-width: 877px) {
  .post-code-btn {
    width: 146px;
  }
}
@media (max-width: 734px) {
  .customer-table th, .customer-table td {
    width: 100%;
    display: block;
    padding: 10px;
  }
}
/*確認画面─────────────*/
#order-confirmation th {
  width: 20%;
  text-align: left;
}
#order-confirmation .btn a {
  -webkit-appearance: none;
  display: block;
  width: min(300px, 100%);
  padding: 15px;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  background-color: #D71969;
  color: #fff;
  border: none;
  border-radius: 10px;
  text-align: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#order-confirmation .btn a::after {
  display: none;
}

@media (max-width: 600px) {
  #order-confirmation th, #order-confirmation td {
    width: 100%;
    display: block;
  }
}
/*POST──────────*/
.news-list {
 display: flex;
 flex-wrap: wrap;
 margin-left: auto;
 margin-right: auto;
}
.news-list dt {
 width: 5em;
 padding-top: 1.5em;
 padding-bottom: 1.5em;
 border-bottom: dotted 1px #999;
}
.news-list dd {
 width: calc( 100% - 6em );
 padding-top: 1.5em;
 padding-bottom: 1.5em;
 border-bottom: dotted 1px #999;
}
.news-list dd span {
 font-size: 1.2rem;
 color: #fff;
 background-color: #E75582;
 display: inline-block;
 padding: .1em;
 margin-right: 1em;
}
.news-list dd a {
 display: inline-block;
 padding: .1em;
}
@media(max-width:600px) {
 .news-list {
  flex-flow: column;
 }
 .news-list dt {
  padding-bottom: 0;
  border-bottom: none;
 }
 .news-list dd {
  padding-top: 0;
  width: 100%;
 }
}

.post p, .post figure, .post table, .post ul, .post ul {
  margin-top: 25px;
}

.post strong {
  font-weight: 700;
}

.post table {
  border-spacing: 0;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.post th {
  border-top: 0 solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 15px;
}

.post td {
  border-top: 0 solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 15px;
}

.post h2, .post h3, .post h4, .post h5 {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 700px;
  margin-bottom: 10px;
}

.oldpage, .newpage a {
  font-size: 1.4rem;
}

.oldpage {
  width: 50%;
  border-right: solid 1px #ccc;
}

.post-btn a {
  display: block;
  color: #666;
  background-color: #EFEFEF;
  padding: 5px 20px;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  width: fit-content;
  font-size: 1.4rem;
}

@media (max-width: 600px) {
  .post-list {
    padding: 0;
  }

  .post-list dt {
    width: 100%;
    padding: 15px 0 0;
    border-bottom: none;
  }

  .post-list dd {
    width: 100%;
    padding: 0 0 15px;
    border-bottom: solid 1px #B5B5B4;
  }
}
/*ページャ───────────────*/
.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-numbers li {
  margin-left: 5px;
  margin-right: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #EBEBEB;
}

.page-numbers li .current {
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.page-numbers li a {
  display: block;
}
/*お問い合わせ───────────────*/
.contact-tel {
  margin-top: 10px;
  font-size: clamp(2rem, 2.8vw, 3rem);
  font-weight: 700;
  position: relative;
  line-height: 1;
}
.contact-tel::before {
  content: url("../images/free.png");
  margin-right: 3px;
}