@charset "utf-8";

article .product h3 {background:#246D60;color:#FFFFFF;height:41px;line-height:41px;font-size:1em;text-align:center;margin-bottom: 20px;}

/*
article .option h3 {color: #B09548;font-weight: 700;text-align: center;border-bottom: 2px solid #B09548;padding-bottom: 6px;margin-bottom: 20px;font-size: 1.1em;}
*/

article .option h3 {background: #B4A89C;color: #FFFFFF;font-weight: 700;text-align: center;padding-bottom: 6px;padding-top: 6px;margin-bottom: 20px;font-size: 1.1em;}

article.order img {max-width: 100%;}

article.order h1:before {
  width: 176px;
  height: 54px;
  background-image: url('images/h1_order.png');
  background-position: center;
  background-size: contain;
  top: -26px;
  left: 6px;
}

article.order ul.contents {display: flex;text-align: center;}
article.order ul.contents li {
  width:20%;
  font-family: "haboro-contrast-normal", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: #B4A89C;
  border-bottom: 5px solid #FFFFFF;
  padding-top: 3.3em;
  padding-bottom: 5px;
  position: relative;
}

article.order ul.contents li.select {color: #FFFFFF;background: #B4A89C;border-bottom:5px solid #B4A89C;}

article.order ul.contents li:before {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
}
article.order ul.contents li:before {border: 1px solid #B4A89C;}
article.order ul.contents li.select:before {border: 1px solid #FFFFFF;}
article.order ul.contents li:nth-of-type(1):before {content: "1";}
article.order ul.contents li:nth-of-type(2):before {content: "2";}
article.order ul.contents li:nth-of-type(3):before {content: "3";}
article.order ul.contents li:nth-of-type(4):before {content: "4";}
article.order ul.contents li:nth-of-type(5):before {content: "5";}

article.order ul.text-area {
  padding: 20px;
  font-size: 0.875em;
  line-height: 1.5;
}

article.order ul.text-area li {margin-bottom: 6px;text-indent: -1em;margin-left: 1em;}
article.order ul.text-area li:nth-last-child(1) {margin-bottom: 0;}
article.order ul.text-area li span.important {color: #DB7B62;}
article.order .product {background: #F1ECEA;padding-bottom: 1px;}

article.order .product .product-image {padding: 20px;}
article.order .product .product-image img {width: 273px;display: block;margin: 0 auto 8px auto;}

article.order .product .product-image dl.price {
  font-size: 0.75em;
  display: flex;
  justify-content: space-between;
  max-width: 273px;
  margin: 0 auto;
}
article.order .product .product-image dl.price dt span {border: 1px solid #707070;padding: 4px 6px 4px 7px;display: inline-block;line-height: 1;}
article.order .product .product-image dl.price dd {line-height: 1.4;font-weight:700;text-align: right;font-feature-settings: "palt";}
article.order .product .product-image dl.price dd span.price {font-size: 1.333em;}
article.order .product .product-image dl.price dd span.stock {font-size: 0.833em;font-weight: 500;color: #66A264;}

article.order .product ul.product-text {background: #e9e2de;padding:9px 20px;}
article.order .product ul.product-text ul.product-text-inner {display: flex
;justify-content: space-between;align-items:center;margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px solid #FFFFFF;}
article.order .product ul.product-text li:nth-last-child(1) ul.product-text-inner {margin-bottom: 0;padding-bottom: 0;border-bottom: none;}
article.order .product ul.product-text ul.product-text-inner li.thumb {width: 125px;font-size: 0;}
article.order .product ul.product-text ul.product-text-inner li.code {font-size: 0.625em;font-weight: 700;line-height: 1.4;}
article.order .product ul.product-text ul.product-text-inner li.quantity {font-size: 0.75em;}
article.order .product ul.product-text ul.product-text-inner li.quantity input.quantity {font-size: 16px;width: 65px;line-height: 25px;padding: 0 5px;box-sizing: border-box;margin-right: 3px;border:1px solid #000000;}

article.order .product dl.subtotal {display: flex;justify-content: space-between;padding: 8px 20px 20px 20px;font-weight: 700;align-items: end;}
article.order .product dl.subtotal dt {font-size: 0.75em;line-height: 1.5;}

article.order .product .btn-next .abtn {
  background: url(images/btn_arrow.svg) right 20px center no-repeat #5F4C3F;
  display: block;
  padding: 9px 50px;
  border: 2px solid #5F4C3F;
}
article.order .product .btn-next .abtn:hover {
  background: url(images/btn_arrow_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
article.order .product .btn-next .abtn:clicked {
  background: url(images/btn_arrow_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
article.order .product .btn-next .abtn span {text-align: left;display: inline-block;}

article.order .product .btn-extention {margin-bottom:10px;}
article.order .product .btn-extention .abtn {
  color: #B59948;
  background: url(images/btn_arrow_extention.svg) right 20px center no-repeat #FFFFFF;
  display: block;
  padding: 9px 50px;
  border: 2px solid #B59948;
}
article.order .product .btn-extention .abtn:hover {
  background: url(images/btn_arrow_extention_on.svg) right 20px center no-repeat #B59948;
  color: #FFFFFF;
}
article.order .product .btn-extention .abtn:clicked {
  background: url(images/btn_arrow_extention_on.svg) right 20px center no-repeat #B59948;
  color: #FFFFFF;
}

article.order .product p.text {font-size: 0.812em;font-weight: 700;border: 1px solid #B09548;padding: 10px 20px;margin: 10px 20px 29px 20px;line-height: 1.5;}

article.order .product.product-light {background: #F9F7F3;}
article.order .product.product-light ul.product-text {background: #f3efe8;}

article.order .option {padding-top: 80px;}
article.order .option p {margin: 0 20px;color: #DB7B62;font-size: 0.875em;font-weight: 700;}
article.order .option ul.text-area {font-size: 0.875em;}
article.order .option ul.text-area img.icon {margin: 3px 2px -3px 0;}
article.order .option ul.order-area {margin: 0 20px;font-size: 0.875em;border-top: 1px solid #000000;font-weight: 700;}
article.order .option ul.order-area li {border-bottom: 1px solid #000000;padding: 10px 7px;line-height: 1.4;}
article.order .option ul.order-area li dt {text-indent: -1em;margin-left: 1em;}
article.order .option ul.order-area li input {margin-right: 5px;}
article.order .option ul.order-area li span.charge {font-size: 0.857em;}
article.order .option ul.order-area li span.charge.free {color: #66A264;}
article.order .option ul.order-area li span.charge.fee {color: #DB7B62;}
article.order .option ul.order-area li img {margin-top: 6px;}

article.order .option dl.subtotal {display: flex;justify-content: space-between;padding: 8px 20px 20px 20px;font-weight: 700;align-items: end;}
article.order .option dl.subtotal dt {font-size: 0.75em;line-height: 1.5;}

article.order .option .btn-go .abtn {
  background: url(images/btn_arrow_go.svg) right 20px center no-repeat #5F4C3F;
  display: block;
  font-size: 1.25em;
  padding: 23px 50px;
  border: 2px solid #5F4C3F;
}
article.order .option .btn-go .abtn:hover {
  background: url(images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
article.order .option .btn-go .abtn:clicked {
  background: url(images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}

#chapter01_ {display:none;}
#chapter02_ {display:none;}
#chapter03_ {display:none;}
#chapter04_ {display:none;}

article.order dl.confirm {border-bottom: 2px solid #B09548;}
article.order dl.confirm ul {display: flex;justify-content: space-between;}
article.order dl.confirm ul li {font-size: 0.875em;padding:5px;text-align:right;box-sizing: border-box;}
article.order dl.confirm dt ul li {color: #5F4C3F;font-size: 0.75em;font-weight: 700;text-align: center;}
article.order dl.confirm dd ul {border-top: 1px solid #B09548;}
article.order dl.confirm ul li.products {width: calc((100% - 133px) * 0.59);}
article.order dl.confirm dd ul.addicon li {padding-top: 30px;}
article.order dl.confirm dd ul li.products {font-size: 0.75em;font-weight: 700;padding-right: 5px; padding-bottom: 5px; padding-left: 20px;text-align:left;position: relative;}
article.order dl.confirm dd ul li.products img.icon {position: absolute;top:9px;}
article.order dl.confirm ul li.price {width: 70px;}
article.order dl.confirm ul li.amount {width: 63px;}
article.order dl.confirm ul li.total {width: calc((100% - 133px) * 0.41);padding-right:20px;}
article.order dl.confirm ul li.total span.small {font-size: 0.714em;display:block;}
article.order dl.confirm ul li.products ,article.order dl.confirm ul li.amount {background: #F1ECEA;}
article.order p.sub {text-align: center;color: #B09548;font-weight: 700;font-size: 0.875em;padding: 5px 20px;}

article.order dl.total {font-size: 0.875em;margin-top: 30px;font-weight: 700;}
article.order dl.total > dt {background: #B4A89C;color: #FFFFFF;text-align: center;margin: 0;padding: 4px 20px;border-radius: 5px;}
article.order dl.total > dd {padding: 7px 20px;}
article.order dl.total > dd:nth-of-type(2n) {background: #F1ECEA;}
article.order dl.total > dd dl {display: flex;justify-content: space-between;}
article.order dl.total > dd dl span.small {font-size: 0.857em;}
article.order dl.total > dd dl span.small.tax {font-weight: 500;}
article.order dl.total > dd.all {border-top: 2px solid #5F4C3F;}
article.order dl.total > dd.all dl dd {font-size: 1.286em;}
article.order p.shipping {font-size: 0.875em;font-weight: 700;padding: 7px 20px;margin: 0 20px 30px 20px;border: 1px solid #CCBFB6;text-align: center;}
article.order .btn-personal .abtn {
  background: url(images/btn_arrow_go.svg) right 20px center no-repeat #5F4C3F;
  display: block;
  padding: 9px 50px;
  border: 2px solid #5F4C3F;
}
article.order .btn-personal .abtn:hover {
  background: url(images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
article.order .btn-personal .abtn:clicked {
  background: url(images/btn_arrow_go_on.svg) right 20px center no-repeat #FFFFFF;
  color: #5F4C3F;
}
article.order .btn-personal .abtn span {text-align: left;display: inline-block;}

article.order .btn .abtn {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 49px;
  text-align: center;
  margin: 0 30px;
  cursor: pointer;
}

article.order .btn-back .abtn {
  color: #B59948;
  box-sizing: border-box;
  background: url(images/btn_arrow_back.svg) left 20px center no-repeat #FFF;
  border: 2px solid #B59948;
  display: block;
  padding: 15px 50px;
}
article.order .btn-back .abtn:hover {
  background: url(images/btn_arrow_back_on.svg) left 20px center no-repeat #B59948;
  color: #FFFFFF;
}
article.order .btn-back .abtn:clicked {
  background: url(images/btn_arrow_back_on.svg) left 20px center no-repeat #B59948;
  color: #FFFFFF;
}

/* お客様情報 */
article.order ul.personal dl {border-bottom: 1px solid #B09548;}
article.order ul.personal dl dt {color: #5F4C3F;background: #f7f4f2;font-weight: 700;font-size: 0.875em;padding: 5px 20px;}
article.order ul.personal dl dd {font-size: 0.875em;padding: 5px 20px;}
article.order ul.personal dl dd a {color:#000000;}
article.order ul.personal dl dd input[type=text],article.order ul.personal dl dd input[type=tel],article.order ul.personal dl dd input[type=email] {font-size: 16px;padding: 5px 20px;line-height: 25px;padding: 0 5px;box-sizing: border-box;border:1px solid #000000;}
article.order ul.personal dl dd input[type=text] {width:100%;}
article.order ul.personal dl dd select {padding: 5px 9px;width: 200px;}
article.order ul.personal {margin-bottom:20px;}
article.order ul.personal span.must {color: #DB7B62;margin-left: 5px;font-size: 0.857em;font-weight: 500;}
article.order ul.personal span.must.capt {margin-left: 0;display: block;font-feature-settings: "palt";}

article.order .noshi-print ul.personal {margin-top: 40px;margin-bottom: 10px;}
article.order .noshi-print ul.personal p.sub {margin:0;background: #B4A89C;color: #FFFFFF;}
article.order .noshi-print p.about {font-weight: 500;color: #000000;margin-bottom: 60px;}
article.order .noshi-print p.about a {color: #000000;}

@media (max-width: 767px) {
article.order .btn-2pc .btn {margin-bottom:20px;}
article.order .btn-2pc .btn:nth-last-child(1) {margin-bottom:0;}
article.order .btn-2pc.orderbtn  .btn-back .abtn {padding-top: 9px;padding-bottom: 9px;}
article.order .product dl.subtotal {padding: 12px 20px 25px 20px;}
article.order .product dl.subtotal dd {font-size: 1.125em;}
}

@media (min-width: 768px) {
article.order {font-size:18.28px;}
article.order .product ul.product-text {padding: 15px 20px;}
article.order .product ul.product-text ul.product-text-inner {margin-bottom: 15px;padding-bottom: 15px;}
article.order .product ul.product-text ul.product-text-inner li.thumb {width:375px;}
article.order .product ul.product-text ul.product-text-inner li.code {font-size: 0.75em;width: calc(100% - 375px - 100px - 50px);padding-left: 50px;}
article.order .product ul.product-text ul.product-text-inner li.quantity {width: 100px;text-align: right;}
article.order .product p.text {margin-bottom: 59px;}
article.order .option ul.order-area li {padding: 10px 20px;}
article.order .option ul.order-area li dl {display: flex;justify-content: space-between;}
article.order .option ul.order-area li dl dd {max-width: 670px;width: 70%;}
article.order .product dl.subtotal,article.order .option dl.subtotal {font-size: 23.76px;}

article.order .btn .abtn {
margin: 0 auto;max-width: 700px;width: 80%;box-sizing: border-box;font-size:18px;}
article.order .btn-2pc {display: flex;flex-direction: row-reverse;justify-content: space-between;max-width: 850px;margin: 0 auto;}
article.order .btn-2pc .btn {width:calc(50% - 10px);}
article.order .btn-2pc .btn .abtn {width:100%;line-height: 50px;padding-top: 0;padding-bottom: 0;}

span.palt {font-feature-settings: "palt";letter-spacing: -0.03em;}
span.palt.pcsmall {font-size:16px;}
article.order .product .btn-next .abtn {background-size:25px;background-position: right 15px center;}
article.order .product .btn-next .abtn:hover {background-size:25px;background-position: right 15px center;}

article.order .product .btn-extention .abtn {background-size:20px;background-position: right 15px center;max-width: 375px;}
article.order .product .btn-extention .abtn:hover {background-size:20px;background-position: right 15px center;}

article.order .option .btn-go .abtn {background-size:20px;background-position: right 25px center;}
article.order .option .btn-go .abtn:hover {background-size:20px;background-position: right 25px center;}

article.order .btn-personal .abtn {padding: 9px 37px;background-size:20px;background-position: right 15px center;}
article.order .btn-personal .abtn:hover {background-size:20px;background-position: right 15px center;}

article.order .btn-back .abtn {background-size:20px;background-position: left 15px center;}
article.order .btn-back .abtn:hover {background-size:20px;background-position: left 15px center;}

/* お客様情報 */
article.order ul.personal {margin: 20px;border-left: 1px solid #B09548;border-right: 1px solid #B09548;border-top: 1px solid #B09548;}
article.order ul.personal dl {display: flex;}
article.order ul.personal dl dt {width: 40%;box-sizing: border-box;padding-top: 8px;padding-bottom: 8px;}
article.order ul.personal dl dd {width: 60%;box-sizing: border-box;padding-top: 8px;padding-bottom: 8px;}
}

article.order ul.personal dl dd iframe {border: 1px solid #000000;}
article.order ul.personal dl dd textarea {border: 1px solid #000000;width: 100%;height: 6em;padding: 3px 5px;box-sizing: border-box;}

@media (max-width: 389px) {
article.order h1 {letter-spacing:-0.36px;}
}


article.order ul.personal dl dd input[name=email] {margin-bottom: 10px;}
article.order ul.personal p.sub {border-bottom: 1px solid #B09548;}

@media (max-width: 767px) {
article.order ul.personal dl dd input.short {width: 50%;}
article.order ul.personal dl dd input.middle {width: 75%;}
article.order ul.personal dl dd input.mid-long {width: 90%;}
}

@media (min-width: 768px) {
article.order ul.personal dl dd input.short {width: 50%;}
article.order ul.personal dl dd input.middle {width: 75%;}
article.order ul.personal dl dd input.mid-long {width: 75%;}
}

/* 完了 */
article.order p.complete {background: #f2eddf;}
article.order p.complete span.large {font-size:1.125em;}
article.order p.complete a {color: #000000;}

@media (max-width: 767px) {
article.order p.complete {padding: 20px 25px;margin: 40px 20px 50px 20px;}
}

@media (min-width: 768px) {
article.order p.complete {padding: 37px 30px;margin: 80px 40px 100px 40px;}
}

body.order-page .flortBtn .goOrder {display:none;}

#chapter02 p.about,#chapter04 p.about {margin: 10px 0 0px 0;font-size: 0.875em;}
#chapter02 p.about a,#chapter04 p.about a {color:#000000;}