@charset "UTF-8";
.original-drip-coffee {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/back.png) repeat left top;
}
@media screen and (max-width: 667px) {
.original-drip-coffee {
  width: 100%;
  margin-bottom: 3em;
}
}

.original-drip-coffee .inner {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 667px) {
.original-drip-coffee .column-list {
  float: none;
}
.original-drip-coffee .l-column.line--02 .column-list,
.original-drip-coffee .l-column.line--03 .column-list {
  width: 100%;
}
}

.original-drip-coffee .link { color: #2f84ed; }

.original-drip-coffee .header {
  width: 100%;
  padding: 0;
}

.key-img {
  position: relative;
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/coffee_main.png) no-repeat left top;
  background-size: cover;
  width: 100%;
  height: 500px;
}
@media screen and (max-width: 667px) {
.key-img {
  background-size: 160%;
  height: auto;
  padding-bottom: 2em;
}
}

.key-img .body {
  position: absolute;
  right: 3em;
  bottom: 2em;
  width: 55%;
  font-size: 1em;
  line-height: 1.4;
  color: #fff;
}
@media screen and (max-width: 667px) {
.key-img .body {
  position: relative;
  right: 0;
  bottom: 0;
  width: 95%;
  margin: 2em auto 0;
  padding: 21em 0 0;
  font-size: 1em;
  font-weight: bold;
  color: #000;
}
}

.original-drip-coffee .clear-fix:after {
  content: "\0020";
  clear: both;
  display: block;
}

.original-drip-coffee .header .nav {
  background: #edd3b9;
  display: block;
  width: 100%;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav {
  border-top: 2px solid #630;
}
}

.original-drip-coffee .header .nav li {
  float: left;
  width: 25%;
  text-align: center;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav li {
  border-bottom: 2px solid #630;
  width: 50%;
  font-size: 1.2em;
}
.original-drip-coffee .header .nav li:nth-child(even) {
  border-left: 2px solid #630;
}
}

.original-drip-coffee .header .nav li a {
  position: relative;
  display: block;
  width: 100%;
  padding: 1.5em 0;
  font-weight: bold;
  color: #630;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav li a {
  padding: 1em 0;
}
}

.original-drip-coffee .header .nav li a span {
  position: relative;
  display: block;
  width: 10em;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2em;
  line-height: 1;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav li a span {
  width: 9em;
  font-size: 1em;
}
}

.original-drip-coffee .header .nav li a span:before,
.original-drip-coffee .header .nav li a span:after {
  content: "";
  position: absolute;
  top: -0.5em;
  display: block;
  width: 20px;
  height: 30px;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav li a span:before,
.original-drip-coffee .header .nav li a span:after {
  top: -0.5em;
}
}

.original-drip-coffee .header .nav li a span:before {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/beans1_brown.png) no-repeat center center;
  background-size: 18px 30px;
  left: 0.5em;
  transform: rotate(-20deg);
}
@media screen and (max-width: 667px) {
.original-drip-coffee .header .nav li a span:before {
  left: 0;
}
}

.original-drip-coffee .header .nav li a span:after {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/beans1_brown.png) no-repeat center center;
  background-size: 18px 30px;
  right: 0;
  transform: rotate(20deg);
}

.original-drip-coffee .section {
  margin-top: 4em;
  padding: 0 2em 2em;
}

.original-drip-coffee .section .section-title {
  background: #edd3b9;
  border: 2px solid #630;
  width: 15em;
  height: 3em;
  margin: 0 auto;
  text-align: center;
  font-size: 1.8em;
  line-height: 3;
  color: #630;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .section .section-title {
  width: 100%;
  font-size: 1.6em;
}
}

.original-drip-coffee .section .section-title span {
  position: relative;
  display: block;
  width: 8.5em;
  margin: 0 auto;
  text-align: center;
}

.original-drip-coffee .section .section-title span:before,
.original-drip-coffee .section .section-title span:after {
  content: "";
  position: absolute;
  top: 0.8em;
  display: block;
  width: 20px;
  height: 30px;
}

.original-drip-coffee .section .section-title span:before {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/beans1_brown.png) no-repeat center center;
  background-size: 18px 30px;
  left: 0;
  transform: rotate(-20deg);
}

.original-drip-coffee .section .section-title span:after {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/beans1_brown.png) no-repeat center center;
  background-size: 18px 30px;
  right: 0;
  transform: rotate(20deg);
}

.original-drip-coffee .figure-box { margin-top: 5em; }
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box { margin-top: 3em; }
}

.original-drip-coffee .figure-box.left .figure,
.original-drip-coffee .figure-box.right .comment { float: left; }

.original-drip-coffee .figure-box.right .figure,
.original-drip-coffee .figure-box.left .comment { float: right; }

@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box .comment,
.original-drip-coffee .figure-box .figure { float: none; }
.original-drip-coffee .figure-box .figure { margin-top: 0.5em; }
}

.original-drip-coffee .figure-box .comment {
  width: 35%;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box .comment {
  width: 100%;
}
}

.original-drip-coffee .figure-box.right .comment { padding-right: 1em; }
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box.right .comment { padding-right: 0; }
}

.original-drip-coffee .figure-box.left .comment { padding-left: 1em; }
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box.left .comment { padding-left: 0; }
}

.original-drip-coffee .section-sub-title {
  background: url(/html/plugin/Exp/assets/images/cp/original_drip-coffee/bg_section-sub-title.png) repeat left top;
  width: 21em;
  padding: 1em 1.5em;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .section-sub-title {
  width: 100%;
}
}

.original-drip-coffee .figure-box .paragraph {
  margin-top: 1em;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
}

.original-drip-coffee .figure-box .figure { width: 65%; }
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box .figure { width: 100%; }
}

.original-drip-coffee .figure-box .figure .photo { width: 100%; }

.original-drip-coffee .l-column .column-list .photo { width: 100%; }

.original-drip-coffee .spec .column-list .paragraph {
  height: 4.7em;
  margin-top: 0;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .spec .column-list .paragraph {
  height: auto;
}
.original-drip-coffee .spec .column-list .photo {
  margin-top: 0.5em;
}
}

.original-drip-coffee .figure-box .comment .alert {
  background: #fff;
  border: 2px solid #f00;
  padding: 2em 1.5em;
  color: #f00;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .figure-box .comment .alert {
  margin-top: 1em;
}
}

.original-drip-coffee .figure-box .comment .alert .title {
  text-align: center;
}


.original-drip-coffee .figure-box .comment .alert .list-disc li {
  position: relative;
  display: block;
  padding-left: 1em;
}

.original-drip-coffee .figure-box .comment .alert .list-disc li:before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1em;
}

.original-drip-coffee .spec,
.original-drip-coffee .example,
.original-drip-coffee .flow,
.original-drip-coffee .design {
  margin-top: 4em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .flow,
.original-drip-coffee .design {
  margin-top: 2em;
}
}

.original-drip-coffee .spec .l-column {
  margin-top: 2em;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .spec .l-column {
  margin-top: 1em;
}
.original-drip-coffee .spec .l-column .column-list:nth-child(even) {
  margin-left: 0 !important;
}
}

.original-drip-coffee .example .l-column .column-list {
  text-align: center;
}

.original-drip-coffee .example .l-column .column-list .paragraph {
  margin-top: 1em;
}

.original-drip-coffee .l-column .column-list .paragraph .asterrisk {
  display: block;
  color: #f00;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .l-column .column-list .paragraph .asterrisk {
  font-size: 0.7em;
}
}

.original-drip-coffee .button {
  width: 20em;
  margin: 2em auto 0;
  font-size: 1.4em;
  line-height: 1;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .button {
  width: 90%;
  margin: 2em auto 0;
}
}

.original-drip-coffee .button-block {
  height: 4em;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .button-block {
  height: 3em;
}
}

.original-drip-coffee .flow .l-column.line--03 .column-list:nth-child(n+4) {
  margin-top: 2em;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .flow .l-column.line--03 .column-list:nth-child(n+2) {
  margin-top: 2em;
}
}

.original-drip-coffee .flow .column-list .title {
  font-size: 13px;
  border-bottom: 1px solid #000;
  padding-bottom: 0.5em;
  text-align: center;
}

.original-drip-coffee .flow .column-list .photo,
.original-drip-coffee .design .column-list .photo {
  margin-top: 1em;
}

.original-drip-coffee .flow .column-list .paragraph {
  margin-top: 0.5em;
}

.original-drip-coffee .design .column-list .paragraph {
  margin-top: 0;
  font-size: 0.9em;
}

.original-drip-coffee .option {
  margin-top: 2em;
}

.original-drip-coffee .option .figure-box {
  margin-top: 2em;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .option .figure-box {
  margin-top: 1em;
}
}

.original-drip-coffee .set-price {
  padding-top: 10em;
  font-weight: bold;
}
@media screen and (max-width: 667px) {
.original-drip-coffee .set-price {
  padding-top: 0;
}
}

.original-drip-coffee .set-price .paragraph {
  font-size: 1em;
}

.original-drip-coffee .set-price .paragraph span {
  display: block;
  line-height: 1;
}

.original-drip-coffee .set-price .paragraph span:nth-child(1) {
  margin-top: 0.5em;
  font-size: 1em;
}

.original-drip-coffee .set-price .paragraph span:nth-child(2) {
  margin-top: 1em;
  line-height: 1.2;
}

.original-drip-coffee .back-img { position: absolute; z-index: 10; }
@media screen and (max-width: 667px) {
.original-drip-coffee .back-img { display: none; }
}

.original-drip-coffee .back-img.item01 { top: 30px; left: 40px; width: 30px; }
.original-drip-coffee .back-img.item02 { top: -20px; left: 80px; width: 40px; }
.original-drip-coffee .back-img.item03 { top: -25px; right: 20px; width: 140px; transform: rotate(15deg); }
.original-drip-coffee .back-img.item04 { top: 350px; left: 40px; width: 140px; transform: rotate(-15deg); }
.original-drip-coffee .back-img.item05 { top: 770px; right: 10px; width: 140px; transform: rotate(10deg); }
.original-drip-coffee .back-img.item06 { top: 890px; right: 240px; width: 30px; transform: rotate(-15deg); }
.original-drip-coffee .back-img.item07 { top: 920px; right: 190px; width: 35px; transform: rotate(5deg); }
.original-drip-coffee .back-img.item08 { top: 2240px; right: 200px; width: 35px; transform: rotate(-125deg); }
.original-drip-coffee .back-img.item09 { top: 2220px; right: 120px; width: 35px; transform: rotate(5deg); }
.original-drip-coffee .back-img.item10 { top: 2790px; left: 60px; width: 140px; transform: rotate(-15deg); }
.original-drip-coffee .back-img.item11 { top: 3510px; left: 90px; width: 30px; }
.original-drip-coffee .back-img.item12 { top: 3460px; left: 130px; width: 35px; transform: rotate(-5deg); }
.original-drip-coffee .back-img.item13 { top: 3510px; right: 130px; width: 35px; transform: rotate(-65deg); }
.original-drip-coffee .back-img.item14 { top: 3480px; right: 80px; width: 40px; transform: rotate(5deg); }
.original-drip-coffee .back-img.item15 { top: 3540px; right: 60px; width: 40px; transform: rotate(130deg); }
.original-drip-coffee .back-img.item16 { top: 3640px; right: 30px; width: 140px; transform: rotate(10deg); }
.original-drip-coffee .back-img.item17 { top: 4520px; left: 70px; width: 140px; transform: rotate(-10deg); }
.original-drip-coffee .back-img.item18 { top: 4940px; right: 170px; width: 40px; transform: rotate(-20deg); }
.original-drip-coffee .back-img.item19 { top: 4890px; right: 120px; width: 45px; transform: rotate(5deg); }
.original-drip-coffee .back-img.item20 { top: 4980px; right: 40px; width: 45px; transform: rotate(55deg); }