@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%;
  }
}
.大枠 {
  margin: auto;
  margin-bottom: 10rem;
  max-width: 400px;
}

.値上げ span {
  color: red;
  font-weight: bold;
}

#いつもの専用タイトル {
  margin-bottom: 1rem;
  padding-top: 1em;
}
#いつもの専用タイトル h1 {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 10px;
  max-width: 400px;
  border-radius: 15px;
  background-color: #814e0b;
  color: #fff;
}
#いつもの専用タイトル p.専用 {
  max-width: 400px;
  width: 90%;
  margin: 5px auto;
  padding: 5px;
  line-height: 1.2;
  border: 1px solid #ffc4c4;
}

#いつものコーヒー豆販売トップ {
  padding-top: 2em;
}
#いつものコーヒー豆販売トップ img.arabia {
  width: 150px;
}
#いつものコーヒー豆販売トップ section.専用 {
  padding: 1em 1em;
  border: 1px solid #814E0B;
  margin-bottom: 5em;
}
#いつものコーヒー豆販売トップ section.専用 h3 {
  display: inline-block;
  margin: 1.5em 0px;
  padding: 3px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  background-color: #814E0B;
}
#いつものコーヒー豆販売トップ section.専用 dl dt {
  margin-bottom: 0.2em;
  font-size: 1.8rem;
  font-weight: bold;
}
#いつものコーヒー豆販売トップ section.専用 dl dt::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  padding-right: 1.5em;
  mask-image: url(../../part_img/arrow_dainari.png);
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: #197beb;
}
#いつものコーヒー豆販売トップ section.専用 dl dd {
  margin-bottom: 1em;
  line-height: 1.4;
  padding-left: 2em;
}
#いつものコーヒー豆販売トップ .一般 {
  padding: 1em 1em;
  border: 1px solid #c9c9c9;
  margin-bottom: 3em;
}
#いつものコーヒー豆販売トップ .一般 h3 {
  margin: 1.5em 0px;
  text-align: center;
  color: #665d52;
}
#いつものコーヒー豆販売トップ .一般 dl dt {
  margin-bottom: 0.2em;
  font-size: 1.8rem;
  font-weight: bold;
}
#いつものコーヒー豆販売トップ .一般 dl dd {
  margin-bottom: 1em;
  line-height: 1.4;
  padding-left: 1em;
}

#いつものコーヒー豆注文 {
  color: #000;
  padding-top: 0em;
  min-width: 310px;
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
}
#いつものコーヒー豆注文 h2.ttl2 {
  margin: 2rem auto;
  font-size: 3.5rem;
  color: #800000;
}
#いつものコーヒー豆注文 img.beans {
  width: 100px;
  margin: 20px auto;
}
#いつものコーヒー豆注文 form {
  /* 注意書き　*/
}
#いつものコーヒー豆注文 form section.select-box {
  width: 100%;
  border: 1px solid #cccccc;
  padding: 10px;
  margin-bottom: 3rem;
  text-align: center;
  /* 豆を選択する*/
}
#いつものコーヒー豆注文 form section.select-box h3.ttl1 {
  max-width: 500px;
  width: 95%;
  margin: auto;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  line-height: 1.1;
  text-align: left;
  font-weight: bold;
  color: #b50000;
}
#いつものコーヒー豆注文 form section.select-box h3.ttl1 span {
  color: #b50000;
  font-weight: normal;
}
#いつものコーヒー豆注文 form section.select-box p {
  margin-bottom: 2rem;
  font-size: 1em;
  line-height: 1.1;
  text-align: center;
  font-weight: bold;
}
#いつものコーヒー豆注文 form section.select-box div.beans {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
}
#いつものコーヒー豆注文 form section.select-box div.beans fieldset {
  width: 48%;
  margin: 4px;
  padding: px 0px;
  border: 1px solid #a09e9e;
}
#いつものコーヒー豆注文 form section.select-box div.beans fieldset select {
  text-align: center;
  width: 95%;
  font-weight: bold;
  padding: 15px 0px;
  margin: 5px 0px;
  border: 1px solid #ccc;
  color: #800000;
  background-color: rgba(252, 215, 189, 0.67);
}
#いつものコーヒー豆注文 form section.select-box div.beans fieldset #beans_1 option {
  position: absolute;
  top: 50px;
  right: 0px;
}
#いつものコーヒー豆注文 form ol {
  max-width: 500px;
  width: 95%;
  text-align: left;
  margin: auto;
  margin-bottom: 0rem;
}
#いつものコーヒー豆注文 form ol li {
  line-height: 1.4;
  font-weight: normal;
  text-indent: -2em;
  padding-left: 2em;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
#いつものコーヒー豆注文 form ol li::before {
  content: "※";
  font-weight: bold;
  color: #f00;
}
#いつものコーヒー豆注文 form .input-data dl {
  max-width: 380px;
  margin: auto;
  min-width: 310px;
  width: 90%;
  text-align: left;
}
#いつものコーヒー豆注文 form .input-data dl dt {
  margin-bottom: 0.8rem;
  text-indent: -3em;
  padding-left: 3em;
  color: #800000;
  line-height: 1;
  font-weight: bold;
  font-size: 1.8rem;
}
#いつものコーヒー豆注文 form .input-data dl dt span {
  font-weight: normal;
  font-size: 0.8em;
}
#いつものコーヒー豆注文 form .input-data dl dd {
  margin-bottom: 3.7rem;
}
#いつものコーヒー豆注文 form .input-data dl dd input, #いつものコーヒー豆注文 form .input-data dl dd textarea {
  padding: 8px;
  width: 100%;
  background-color: rgb(245, 245, 245);
  border: 1px solid #ccc;
  color: #000;
  font-size: 1.2em;
}
#いつものコーヒー豆注文 form .input-data dl dd #mail {
  max-width: 25em;
  width: 100%;
}
#いつものコーヒー豆注文 form .input-data dl dd #tel {
  width: 15em;
}
#いつものコーヒー豆注文 form .input-data dl dd #comment {
  height: 5em;
}
#いつものコーヒー豆注文 form .input-data input {
  padding: 8px;
}
#いつものコーヒー豆注文 form #soushin {
  font-size: 2rem;
  padding: 1em;
  margin-top: 2rem;
  border: 2px solid #b66c6c;
  background-color: #923131;
  color: #fff;
  font-weight: bold;
}
#いつものコーヒー豆注文 .post {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
}
#いつものコーヒー豆注文 .post img {
  width: 40px;
}
#いつものコーヒー豆注文 .post p {
  margin-left: 0.4em;
  line-height: 1;
}

#豆・確認のページ h3 {
  text-align: center;
  margin: 1em auto;
}
#豆・確認のページ #input-table {
  max-width: 400px;
  width: 95%;
  margin: auto;
  text-align: center;
}
#豆・確認のページ #input-table .Box1 {
  padding: 8px;
  color: #800000;
  font-weight: bold;
  text-align: left;
}
#豆・確認のページ #input-table .Box2 {
  padding: 15px;
  font-size: 2rem;
  text-align: left;
  text-shadow: 0.3px 0.3px 0px #000;
}
#豆・確認のページ #input-table .Box2 span.onamae::after {
  content: " 　　　様";
  color: #808080;
  text-shadow: none;
}
#豆・確認のページ #soushin {
  margin: 5em auto;
}
#豆・確認のページ .keikoku {
  text-align: center;
  color: red;
}

.戻って訂正 {
  margin: 2em auto;
}

article.定期便申し込み {
  color: #000;
  min-width: 310px;
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
}
article.定期便申し込み .ttl2 {
  padding: 1em;
}
article.定期便申し込み .ttl2 h2 {
  font-size: 3rem;
  color: #800000;
}
article.定期便申し込み .ttl2 .letter-pack {
  width: 120px;
  margin-bottom: 2rem;
}
article.定期便申し込み .ttl2 p {
  text-align: left;
  line-height: 1.4;
  margin-bottom: 0.1rem;
}
article.定期便申し込み section.check-box {
  width: 100%;
  margin: 2em auto 2em;
  text-align: center;
  padding: 10px;
  border: 1px solid #cacaca;
}
article.定期便申し込み section.check-box .ttl1 {
  max-width: 500px;
  width: 95%;
  margin: auto;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  line-height: 1.1;
  text-align: left;
  font-weight: bold;
  color: #0d497e;
}
article.定期便申し込み section.check-box p {
  line-height: 3;
}
article.定期便申し込み section.check-box dl {
  width: 95%;
  margin-bottom: 4rem;
}
article.定期便申し込み section.check-box dl dt {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #0d497e;
}
article.定期便申し込み section.check-box dl dt label {
  margin-left: 1em;
}
article.定期便申し込み section.check-box dl dd {
  margin-left: 5rem;
  margin-bottom: 1.3rem;
}
article.定期便申し込み .input-data dl {
  max-width: 380px;
  margin: auto;
  min-width: 310px;
  width: 95%;
  text-align: left;
}
article.定期便申し込み .input-data dl dt {
  margin-bottom: 0.8rem;
  text-indent: 2em;
  padding-left: 0em;
  line-height: 1;
  font-weight: bold;
  font-size: 1.8rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #0d497e;
  text-shadow: 0.3px 0.3px 0px #0d497e;
}
article.定期便申し込み .input-data dl dt span {
  font-weight: normal;
  font-size: 0.8em;
}
article.定期便申し込み .input-data dl dd {
  margin-bottom: 3.7rem;
}
article.定期便申し込み .input-data dl dd input, article.定期便申し込み .input-data dl dd textarea {
  padding: 8px;
  width: 100%;
  background-color: rgb(245, 245, 245);
  border: 1px solid #ccc;
  color: #000;
  font-size: 1.2em;
}
article.定期便申し込み .input-data dl dd #mail {
  max-width: 25em;
  width: 100%;
}
article.定期便申し込み .input-data input {
  padding: 8px;
}
article.定期便申し込み .input-data #soushin {
  font-size: 1.5em;
  padding: 1em;
  border: solid #0d497e 2px;
  background-color: #e3f0fc;
  color: #0d497e;
}
article.定期便申し込み .post {
  margin-bottom: 2em;
  display: flex;
  align-items: center;
}
article.定期便申し込み .post img {
  width: 50px;
}
article.定期便申し込み .post p {
  color: #f00;
}

#定期便・確認のページ p.keikoku {
  text-align: center;
  color: #f00;
}
#定期便・確認のページ #大枠 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#定期便・確認のページ #大枠 .keikoku {
  text-align: center;
  color: red;
}
#定期便・確認のページ #大枠 #注文フォームタイトル h2 {
  font-weight: bold;
  margin-bottom: 1em;
  line-height: 1.4;
}
#定期便・確認のページ #大枠 dl {
  width: 95%;
  max-width: 300px;
  margin: auto;
}
#定期便・確認のページ #大枠 dl dt {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #b50000;
}
#定期便・確認のページ #大枠 dl dd {
  margin-bottom: 3rem;
  font-size: 1.2em;
  vertical-align: top;
}
#定期便・確認のページ #大枠 .sousin1 {
  padding: 10px;
}
#定期便・確認のページ #大枠 .back {
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: bold;
}
#定期便・確認のページ .hinmei {
  line-height: 1em;
  padding: 0.5em;
}
#定期便・確認のページ #chumon td {
  border: 1px solid #9de5fd;
}
#定期便・確認のページ #beans {
  width: 100%;
}
#定期便・確認のページ .keikoku {
  text-align: center;
  color: red;
}
#定期便・確認のページ form {
  width: 100%;
  margin: auto;
  text-align: center;
}

#定期便・メール .rogo {
  width: 100px;
}
#定期便・メール h2 {
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  color: #000;
}

.リンクボタン {
  margin-top: 2em;
  font-weight: bold;
  font-size: 2em;
}

#記載例 {
  max-width: 600px;
  margin: auto;
  margin-top: 4rem;
  counter-reset: sec;
}
#記載例 h3 {
  display: inline-block;
  margin-bottom: 3rem;
  padding: 15px;
  border: 1px solid #909090;
  font-size: 2rem;
  font-weight: normal;
}
#記載例 p:before {
  counter-increment: sec;
  content: counter(sec) ". ";
  color: #227fdd;
  font-weight: bold;
}
#記載例 p {
  width: 90%;
  margin: auto;
  margin-bottom: 1.5rem;
  margin-left: 3rem;
  text-indent: -2rem;
  line-height: 1.4;
}
#記載例 p span {
  color: #b50000;
}

#３ヶ月後払い {
  max-width: 600px;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border: 1px solid #e6d8d8;
  box-shadow: inset hoff voff blur #000;
}
#３ヶ月後払い p {
  width: 95%;
  margin: auto;
  line-height: 1.4;
}
#３ヶ月後払い #後払い説明 {
  margin-top: 1em;
}
#３ヶ月後払い #後払い説明 h2 {
  margin-bottom: 3rem;
  font-size: 2em;
  color: #c52929;
}
#３ヶ月後払い #後払い説明 .com4 p {
  text-indent: -2em;
  padding-left: 2em;
}
#３ヶ月後払い #後払い説明 .com4 p span {
  color: #f00;
  font-weight: bold;
}
#３ヶ月後払い #後払い説明 p {
  width: 80%;
}
#３ヶ月後払い #後払い説明 dl {
  width: 95%;
  margin: auto;
  margin-top: 1.6rem;
  margin-bottom: 8rem;
  counter-reset: aa;
}
#３ヶ月後払い #後払い説明 dl dt {
  margin-top: 1em;
  font-weight: bold;
  font-size: 1.1em;
  color: #b32626;
}
#３ヶ月後払い #後払い説明 dl dt:before {
  content: counter(aa) "）  ";
  counter-increment: aa;
  color: #003fb5;
}
#３ヶ月後払い #後払い説明 dl dd {
  font-size: 1em;
  margin-top: 1rem;
  margin-left: 2em;
  line-height: 1.4;
}
#３ヶ月後払い #後払い説明 .com3 {
  margin: auto;
  margin-bottom: 5rem;
  padding: 1.6rem;
  border: 1px solid #c4c3c3;
  width: 90%;
}
#３ヶ月後払い #後払い説明 .com3 h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: #b32626;
  font-size: 1em;
  word-spacing: 2em;
}
#３ヶ月後払い #後払い説明 .com3 p {
  margin-bottom: 1.6rem;
}
#３ヶ月後払い #後払い説明 figure > .letter-pack {
  max-width: 140px;
  margin-bottom: 2rem;
}