@charset "UTF-8";
/*033093;*/
@media screen and (max-width: 480px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (min-width: 481px) and (max-width: 766px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (min-width: 767px) {
  html {
    font-size: 62.5%;
  }
}
body {
  counter-reset: h2num;
}

header {
  margin-top: 2rem;
}
header img.rogo {
  max-width: 100px;
}

#フィルター販売タイトル {
  margin-bottom: 2rem;
  padding-top: 20px;
}
#フィルター販売タイトル #logo {
  max-width: 120px;
  width: 20%;
}
#フィルター販売タイトル h1 {
  line-height: 1;
  text-align: center;
  color: #ff6895;
  text-shadow: 1px 1px 0px #006895;
}
#フィルター販売タイトル h1 span {
  font-size: 0.6em;
  color: #006895;
  text-align: center;
  text-shadow: none;
}
#フィルター販売タイトル .ext {
  margin: auto;
  line-height: 1.8;
  max-width: 600px;
  width: 90%;
}
#フィルター販売タイトル .ext img {
  width: 100px;
  float: left;
  margin: 1em;
}

/*----■　　■-----*/
/*----■　　■-----*/
#目次 {
  display: inline-block;
  max-width: 500px;
  width: 90%;
  color: #19506e;
  margin-bottom: 30px;
}
#目次 #目次タイトル {
  text-align: left;
  margin-bottom: 1.5rem;
}
#目次 #目次タイトル:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 35px;
  padding-right: 5px;
  background-image: url("/img/small_mark/filter.svg");
  background-position: 0px 10px;
  background-size: contain;
  background-position: 0px 5px;
  background-repeat: no-repeat;
}
#目次 ol {
  max-width: 350px;
  width: 95%;
  margin: 0 auto;
}
#目次 ol li {
  text-indent: -1em;
  padding-left: 2em;
  letter-spacing: 1px;
}
#目次 ol a {
  text-decoration: none;
  color: #01345e;
  text-shadow: 0.1px 0.1px 0px #01345e;
}
#目次 ol li a:hover {
  color: red;
  background: #efefef;
  text-shadow: 0.3px 0.3px 0px red;
}

/*----■　　■-----*/
h2.フィルター小タイトル {
  width: 95%;
  padding: 0.5em;
  margin: 1.5em auto 1em auto;
  background-color: #13689d;
  text-align: left;
  color: #fff;
  text-shadow: 0.3px 0.3px 0px #fff;
}
h2.フィルター小タイトル span {
  font-size: 0.8em;
  font-weight: normal;
}
h2.フィルター小タイトル::before {
  content: counter(h2num) ". ";
  counter-increment: h2num;
  font-size: 2.5rem;
  font-weight: bold;
}

.aa {
  color: #f00;
}

.open, .close {
  display: inline-block;
  width: 220px;
  line-height: 2;
  font-size: 1.6rem;
  background-color: #f5ead7;
  text-align: center;
  color: #8d0606;
  box-shadow: inset -5px -5px 10px 0px #f87a5b, inset 5px 5px 10px 0px #f19797;
  border-radius: 10px;
}

#panel {
  width: 95%;
  background: #fff;
  margin: 0 auto 3rem;
}
#panel dt {
  margin: 0px auto;
  width: 100%;
  padding: 15px;
  background-color: #d6e9f5;
  line-height: 1.2;
  color: #004f99;
  font-size: 2rem;
  text-shadow: 0.2px 0.2px 0px #006899;
  box-shadow: none;
}
#panel dt img {
  width: 15%;
  max-width: 80px;
}
#panel dt p {
  width: 80%;
  display: inline-block;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.4;
}
#panel dt p span {
  white-space: nowrap;
}
#panel dd {
  width: 100%;
  margin: 0 auto;
  padding-top: 2rem;
  border: 4px solid #85adc3;
}
#panel dd h3 {
  max-width: 620px;
  width: 95%;
  margin: auto;
  margin-bottom: 2rem;
  text-align: left;
  color: #014aad;
}
#panel dd p {
  max-width: 600px;
  width: 90%;
  margin: auto;
  text-align: left;
}
#panel dd figure {
  max-width: 300px;
  width: 100%;
  margin: 3rem auto;
}
#panel dd figure img {
  width: 100%;
}

#アップ君について h2 {
  margin-bottom: 0;
}
#アップ君について section {
  margin-bottom: 5rem;
}
#アップ君について h3 {
  margin: 2rem 0;
  color: #006899;
  line-height: 1.2;
  text-shadow: 1px 1px 1px #006899;
}
#アップ君について h3 span {
  font-size: 80%;
  text-shadow: none;
}
#アップ君について .img-div {
  width: 30%;
  float: left;
  padding: 0;
}
#アップ君について #img1 {
  width: 15%;
  margin-right: 1rem;
}

.価格テーブル {
  display: flex;
  max-width: 450px;
  width: 95%;
  margin: auto;
  flex-wrap: wrap;
  align-items: stretch;
}
.価格テーブル .bold {
  font-weight: bold;
}
.価格テーブル .Lbox {
  width: 85%;
  padding: 20px 12px;
  margin: -1px;
  border: 1px solid rgb(194, 194, 194);
}
.価格テーブル .Rbox {
  width: 15%;
  margin: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid rgb(194, 194, 194);
}
.価格テーブル .Cbox {
  width: 100%;
  padding: 10px;
  margin: -1px;
  border: 1px solid rgb(194, 194, 194);
  line-height: 1.8;
  font-size: 2rem;
}

.order-div {
  display: inline-block;
  margin: 0 auto;
  color: #00618d;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.4;
  box-shadow: 3px 3px 5px 1px #a9cfe2 inset, -5px -5px 5px #177db1 inset;
  background: #42a4d6;
  padding: 10px 20px;
  border-radius: 20px;
}

.order-div a:link, .order-div a:visited {
  color: #fff;
}

#より詳しい h2 {
  margin: 0px auto;
}

#post {
  width: 95%;
  max-width: 500px;
  margin: auto;
  margin-bottom: 3rem;
}
#post img {
  width: 40px;
  height: 40px;
  float: left;
}

.説明書 .webpage {
  display: block;
  width: 80%;
  margin: auto;
  font-weight: bold;
}

#フィルター注文 #ページタイトル {
  margin-bottom: 3rem;
}
#フィルター注文 #ページタイトル h1 {
  line-height: 2.5;
}
#フィルター注文 #ページタイトル h2 {
  line-height: 1;
}
#フィルター注文 .flex {
  border: 1px solid #000;
  width: 300px;
  display: flex;
  justify-content: space-between;
}
#フィルター注文 form {
  width: 100%;
  margin: auto;
  text-align: center;
  color: #000;
}
#フィルター注文 form .maisuu {
  display: flex;
  flex-wrap: wrap;
  max-width: 43rem;
  width: 99%;
  margin: 0 auto 2em;
  font-size: 1.6rem;
}
#フィルター注文 form .maisuu .Box100 {
  width: 100%;
}
#フィルター注文 form .maisuu .Box1 {
  width: 6rem;
}
#フィルター注文 form .maisuu .Box2 {
  width: calc(100% - 6rem - 8rem);
}
#フィルター注文 form .maisuu .Box4 {
  display: flex;
  width: 8rem;
  line-height: 1;
}
#フィルター注文 form .maisuu .Box100, #フィルター注文 form .maisuu .Box1, #フィルター注文 form .maisuu .Box2,
#フィルター注文 form .maisuu .Box4 {
  padding: 5px 5px;
  border: 1px solid #b8b7b7;
  margin: -1px;
  line-height: 1.5;
  background-color: #fff;
  display: grid;
  place-items: center;
}
#フィルター注文 form .maisuu .Box100 select, #フィルター注文 form .maisuu .Box1 select, #フィルター注文 form .maisuu .Box2 select,
#フィルター注文 form .maisuu .Box4 select {
  background-color: #ffedd8;
}
#フィルター注文 form .maisuu .Box4 > div {
  width: 52px;
  height: 30px;
}
#フィルター注文 form .maisuu .Box1, #フィルター注文 form .maisuu span {
  font-weight: bold;
  color: #0d4e8b;
}
#フィルター注文 form #同梱 {
  font-size: 1em;
  max-width: 500px;
  width: 95%;
  margin: auto;
  margin-bottom: 5rem;
}
#フィルター注文 form #同梱 dt {
  color: red;
  margin-bottom: 0.5rem;
}
#フィルター注文 form #同梱 dd {
  margin-left: 2rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}
#フィルター注文 form #input-table {
  border: 1px solid #d3d3d3;
  max-width: 350px;
  margin: auto;
  padding-left: 0.5em;
  display: flex;
  flex-flow: column;
}
#フィルター注文 form #input-table .red {
  margin: 2em auto 0.5em 0.2em;
  font-size: 1.1em;
}
#フィルター注文 form #input-table .red span {
  font-weight: normal;
  font-size: 0.8em;
}
#フィルター注文 form #input-table input, #フィルター注文 form #input-table textarea {
  font-size: 1.2em;
  padding: 3px;
  margin-left: 1em;
  border: 1px solid #a3a1a1;
  background-color: #fafafa;
}
#フィルター注文 form #input-table #name {
  width: 90%;
}
#フィルター注文 form #input-table #zip11 {
  width: 7em;
}
#フィルター注文 form #input-table #addr11 {
  width: 90%;
  height: 5em;
}
#フィルター注文 form #input-table #mail {
  max-width: 15em;
}
#フィルター注文 form #input-table #tel {
  width: 15rem;
}
#フィルター注文 form #input-table #comment {
  width: 90%;
  height: 5em;
}
#フィルター注文 form #input-table .ex {
  display: block;
  width: 90%;
  margin: 0.5em;
  font-size: 0.8em;
  color: #eb0000;
}
#フィルター注文 form #soushin {
  font-size: 1.5em;
  padding: 1em;
  margin: 5rem auto 40rem;
}

#フィルター確認 {
  color: #000;
}
#フィルター確認 .input-table {
  max-width: 400px;
  width: 100%;
  margin: 2em auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
}
#フィルター確認 .input-table .Box1 {
  width: 80px;
  font-weight: bold;
  color: #992525;
  border-right: 1px solid #d47d7d;
}
#フィルター確認 .input-table .Box2 {
  width: calc(100% - 80px);
  padding: 50px;
  text-align: left;
}
#フィルター確認 .input-table .Box1, #フィルター確認 .input-table .Box2 {
  padding: 5px;
  margin: 0.5em 0;
}
#フィルター確認 .ttl {
  margin-bottom: 3rem;
}
#フィルター確認 #ninsho {
  float: left;
  margin-right: 0em;
  font-size: 2.5em;
  width: 5em;
}
#フィルター確認 #input-table {
  width: 65%;
  text-align: left;
  margin: 30px auto;
}
#フィルター確認 td {
  padding-left: 10px;
  padding-bottom: 0.7em;
}
#フィルター確認 .注文内容タイトル {
  width: 65%;
  margin: auto;
}

.ネルフィルターの使い方 {
  /* .filter{float:left; margin:10px 3.2rem 10px 3px;width:30%;} */
}
.ネルフィルターの使い方 #ページタイトル {
  padding-top: 20px;
}
.ネルフィルターの使い方 #ページタイトル .rogo {
  max-width: 80px;
  width: 15%;
  margin: auto;
}
.ネルフィルターの使い方 #ページタイトル .box h1 {
  line-height: 1.5em;
  text-align: center;
  color: #006895;
  text-shadow: 1px 1px 0px #006895;
}
.ネルフィルターの使い方 #ページタイトル .box h2 {
  font-size: 0.6em;
  color: #006895;
  text-align: center;
}
.ネルフィルターの使い方 #目次 ul {
  display: inline-block;
  width: 80%;
  margin: 0 auto;
  line-height: 1.4;
}
.ネルフィルターの使い方 #目次 ul li {
  line-height: 1.4;
  padding: 5px 0px;
}
.ネルフィルターの使い方 p {
  width: 90%;
  margin: auto;
}
.ネルフィルターの使い方 h3 {
  margin: 5rem auto 1rem;
  text-indent: -3.2rem;
  padding-left: 3.2rem;
  text-align: left;
  color: #006f9b;
  font-size: 2.5rem;
  line-height: 1.5;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-shadow: none;
}
.ネルフィルターの使い方 h3.x1 {
  margin-top: 0;
}
.ネルフィルターの使い方 li p {
  font-size: 2rem;
  line-height: 1.5;
  margin: 1rem 0;
}
.ネルフィルターの使い方 .arrow {
  float: left;
  margin: 0 0 0 30px;
  width: 20px;
  height: 30px;
}
.ネルフィルターの使い方 section {
  width: 100%;
}
.ネルフィルターの使い方 article {
  margin: 0 auto;
  max-width: 550px;
  width: 97%;
}
.ネルフィルターの使い方 #但し書き p {
  font-size: 1em;
  text-align: center;
  margin-bottom: 2rem;
}
.ネルフィルターの使い方 #但し書き ul {
  padding-top: 0;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
}
.ネルフィルターの使い方 #但し書き ul li {
  line-height: 1.8;
  margin: 0rem 0 2rem;
}
@media screen and (max-width: 480px) {
  .ネルフィルターの使い方 h3 {
    font-size: 2rem;
  }
}