@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

/*
Theme Name: CReAS
Description: A theme by MACQA.
Author: MACQA Arakawa
Version: 1.010
*/

/* 初期設定リセット */
*{margin: 0;padding: 0;}

/* ボックスサイズ調整 */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

/* 基本設定 */
html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}

body {
overflow-x: hidden;
font-family: 'Lato', 'Noto Sans JP', sans-serif;
color: #362e2b;
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

/* リンク色 */
a {color: #362e2b;transition: all .5s;}
a:hover {background:none;opacity: .8;}

h1, h2, h3, h4, h5, div, p {font-family: 'Noto Sans JP', sans-serif;}

ul, ol {
padding: 0;
margin: 0;line-height: 1.5;
list-style-position: inside;
}
/* フェードイン */

@keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes 'fadeIn' {0% {opacity:0;} 100% {opacity:1;}}
.fadeIn, img.fadeIn {
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}

img {margin: 0 !important;}

p {
font-size: 0.9em;
margin: 0 0 1.5em;
line-height: 1.5;
text-align: justify;
text-justify: inter-ideograph;
}

header {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.logo {}
.logo a {
  display: block;
  max-width: 90%;
  margin: 0 auto 0;
  text-align :center;
  text-decoration: none;
}

.logo a img {   max-height: 55px;}

.lst {
display: flex;
justify-content: center;
align-items: center;
font-size: 14pt;
}

.lst span {margin-right: 10px}
.lst img {max-width: 150px;}

.lexp {
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}

.lexp span {font-size: 180%; color: #c30000}

/* グローバルナビゲーション */
.navi .menu {
max-width: 100%;
list-style: none;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}

.navi .menu-item a {
margin: 0 10px;
padding: 7px;
display: block;
line-height: auto;
text-align: center;
font-size: 9pt;
letter-spacing: 0.05em;
border-radius: 30px;
text-decoration: none;
}

.navi .menu-item a:hover {
text-decoration: none;
opacity: .5;
}


.category .container {padding: 6em 0 0;}
.page .container {padding: 5.25em 0 0;}

section div {
margin: 0 !important;
padding: 0 !important;
}
#hero {
  padding-top: 0px;
  margin-bottom: -5px;
  overflow: hidden;
}

#favarite {}

#favarite .panel .thum {
  margin: 0 !important;
  height: auto;
}

#favarite .panel{
padding: 1em !important;
  margin: 15px !important;
  box-shadow: 0 0 10px #ddd;
}

#favarite .panel h3 {
font-size: 2em;
font-family: 'Roboto', sans-serif;
font-weight: 700;
line-height: 1.25;
}


.btn {
  text-align:center;
  padding: .5em !important;
  margin: 1em auto 0.25em !important;
  border: 1px solid;
  border-radius: 3em;
}

#catlist {
  padding-top: 190px !important;
}

.catlist .panel:nth-child(odd) .bname,
.catlist .panel:nth-child(odd) .price {background: #212d37;}
.catlist .panel:nth-child(even) .bname,
.catlist .panel:nth-child(even) .price {background: #394148;}

.price {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14pt;
  margin: .5em auto 1em !important;
}

.price span {font-size: 175%;}

.st {
  padding: 1em 0.25em 0.5em !important;
  background: #686455;
}

.bname {
display: flex;
justify-content: center;
align-items: center;
height: 270px;
}
.thum {
  height: 255px;
  overflow: hidden;
}

.bname img {
  display: block;
  max-width: 50%;
}

#story .cleft {
  background: url(http://dunstancoffee.jp/wp-content/uploads/story_1.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
}
#story .cright {
  background: #c8c1b4;
  display: flex;
justify-content: center;
align-items: center;
}

.hentry .fx-row {margin: -5px 0 !important;}
.hentry .catlist {margin: 0px 0 !important;}
.hentry .content {padding: 5em 6em !important;}
.hentry .content h3 {margin-bottom: 0.25em}
.hentry .content h4 {margin-bottom: 2.5em}
.hentry .content h3, .hentry .content h4 {
font-family: 'Prata', serif;
font-size: 1.6em;
text-align: center;
letter-spacing: 0.05em;
}

.hentry .content p {
  font-size: 0.8em;
  font-weight: 300;
}

.page .container {
  background: #fff;
}
#article46 .content {padding: 5em 0 0 !important;}
#article46 .content p {text-align: center;margin: 0 !important;}
.logomark {text-align: center;}
.logomark img {max-width: 300px;margin: 0 auto 1em !important;}

#magazine .st {
  text-align: center;
  background: #191613;
}

#magazine .st h3 {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 3em;
letter-spacing: 0.5em;
line-height: 1;
padding: .15em 0 .35em;
text-align: center;
word-wrap: break-word;
text-indent: 0.5em;
color: #e4e2df;
}

#magazine .panel {
  text-align: center;
  background: #fff;
  padding: 1.5em !important;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
}

#magazine .panel a .magazine_t {
  font-family: 'Prata', serif;
  line-height: 0.75;
  font-size: 1.25em;
  font-weight: 300;
  letter-spacing: 0em;
  max-width: 90%;
  text-align: center;
  text-decoration: none;
  margin: 1em auto;
}

.category a .magazine_t {
  font-family: 'Prata', serif;
  line-height: 0.75;
  font-size: 2.5em;
  font-weight: 300;
  letter-spacing: 0.1em;
  max-width: 90%;
  min-height: 3.5em;
  text-align: center;
  color: #e4e2df;
  text-decoration: none;
  margin: 1em auto;
}

.panel a {text-decoration: none;}

.single h2 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 2.6em;
letter-spacing: 0.25em;
line-height: 1.25;
padding: 0 0 0.5em;
margin: 0.75em 0 .5em 0.5em;
word-wrap: break-word;
color: #222;
text-indent: 0;
}

.single h2 span {
  display: block;
  font-size: 70%;
  margin-left: 0.5em;
  letter-spacing: 0;
}
.single .magazine_t {
  font-family: 'Prata', serif;
  line-height: 0.75;
  font-size: 3.2em;
  letter-spacing: 0em;
  max-width: 100%;
}
.single .beans_t span:after {
  content:' (税込) / 内容量200g';
  font-size: 0.7em;
}
.single .beans_t:after {
  content:'5,000円以上のお買い上げで送料無料';
  display: inline-block;
  font-size: 12pt;
  letter-spacing: 0;
  line-height: 1.2;
  border: 1px solid #7a6a55;
  border-radius: 3em;
  padding: 3px 10px;
  font-weight: 300;
}
.cbtn {
  display: block;
  text-align: center;
  height: 60px;
  margin: 1em auto !important;
  font-weight: 100;
  display: flex;
justify-content: center;
align-items: center;
  background: #222;
  color: #fff;
  max-width: 80%;
}

.cbtn a {color: #fff;text-decoration:none;}

.cap {text-align: center;font-size: .7em;margin-bottom: 0.5em !important;}

.single div {margin: 0px;padding: 0;}
.single .bname {
  height: 600px;
  margin-top: 30px !important;
}
.single .bname img {
  display: block;
  width: 35%;
  margin: 0 auto;
}

.single .fx-col-50-s {
  background: #c3bcb0;
}

.ps {
  padding: 0.5em 1em !important;
}

.ps p {text-align: center;}

.postid-91 .bname  {background: #be030d}
.postid-125 .bname  {background: #f8b62c;}
.postid-127 .bname  {background: #55504f;}
.postid-129 .bname  {background: #da7373;}
.postid-132 .bname  {background: #6e9431;}
.postid-134 .bname  {background: #42bbbc;}
.postid-136 .bname  {background: #ec6519;}
.postid-599 .bname {background: #01463d;}

.single .bname img {
filter: invert();
}

h2 {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 3em;
letter-spacing: 0.5em;
line-height: 1;
padding: .5em 0;
text-align: center;
word-wrap: break-word;
text-indent: 0.5em;
color: #e4e2df;
}

#why {
  color: #e4e2df;
  padding: 5em 0 5em;
  background: #2e2a20;
}

#why h3 {
  font-family: 'Prata', serif;
  font-weight: 200;
  margin: 0 auto;
}

#why div:nth-child(1) {
  display: flex;
  align-items: center;
}

#why div:nth-child(2),
#why div:nth-child(3),
#why div:nth-child(4) {
    padding: 0 1.5em 2em !important;
}

#menu-footermenu {
  list-style: none;
  margin: 10px auto 30px;
}

#menu-footermenu li {
  display: inline-block;
  margin-right: 15px;
  font-size: 10pt;
}

#menu-footermenu li a {
  text-decoration: none;
}

#article46 p {margin: -5px 0;}

.single .hentry h3 {
  font-size: 1.2em;
  margin-bottom: 1em;
  font-weight: 200;
}

.single .content {background: #f4f1ed;}

/* フッター */
footer {
padding: 2.75em 2em 1.25em;
text-align: right;
min-height: 130px;
color: #a19779;
background: #2e2a20;
}
footer a {  color: #a19779;}
footer .logo {
  display: block;
  max-width: 90%;
  margin: 50px auto 30px;
  text-align: center;
  font-size: 30% !important;
}

.gotop {display: none;}


.copy {
  font-size: 9pt;
  text-align: center;
  padding: 0px 0 20px;
  font-weight: 300;
color: #a19779;
background: #2e2a20;
}

.copy a {
  margin-right: 20px;
  text-decoration: none;
color: #a19779;
}

.fn, .fn a {
  color: #fff;
  text-decoration: none;
  font-size: 10pt;
  padding: 1em !important;
  font-weight: 300;
	text-align: center;
}

.cart {max-width: 30px;float:right}

.point {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 1.1em;
letter-spacing: 0.2em;
margin-top: 1.75em !important;
}

.pointbg, .pointbg .content {
  background: #322d28 !important;color: #e4e2df;}

.point span {
  font-size: 150%;
  font-weight: 500;
}

.pcap {
  font-weight: 300;
  font-size: 0.7em;
  padding: 0 0 0 0.75em !important;
  margin: 0.5em 0 0.5em 0.5em !important;
  border-left: 5px solid #7a6a55;
}

.p_cap {
  max-width: 80%;
  margin: 1em auto 3em !important;
  font-size: 11pt;
  line-height: 1.5;
  text-align: justify;
	font-weight: 300;
}

.taste {
  max-width: 80%;
  margin: 1em auto 3em !important;
  font-size: 10pt;
  line-height: 2;
}

.taste span {width: 50%;display: block}

.matrix {background: #fff;padding: 2em 1em !important;}

.fn {background: #443c34}

.cform {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: .9em;
}
.cform div {padding: 10px !important;margin: 2px 0 !important;}
.cform div input {padding: 5px !important;max-width: 100% !important;}
.cform div select {
  border: 1px solid;
  padding: 5px 10px;
  background: none;
}
.cform div textarea {padding: 5px !important;max-width: 1000%!important;}
.cform .fx-col-30-s {
  display: flex;
  justify-content: right;
  align-items: center;
}
.wpcf7-submit {
  display: block;
  margin: 0 auto !important;
  border: 3px solid;
  width: 65%;
  height: 60px;
  background: none;
}

.tel {
  text-align: center;
}

.tel a {
  display: block;
  text-decoration: none;
  margin: 1em auto !important;
  border: 1px solid;
  max-width: 280px;
  padding: 0.5em;
  font-weight: 200;
  font-size: 1.1em;
  letter-spacing: 0.1em;
}

.sp {display: none}
.pc {display: block;}

@media screen and (max-width: 468px) {
.sp {display: block}
.pc {display: none;}

  #hero .cright::after {display: none}

#magazine .st h3 {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 1.75em;
letter-spacing: 0.5em;
line-height: 1;
padding: .15em 0 .35em;
text-align: center;
word-wrap: break-word;
text-indent: 0.5em;
color: #e4e2df;
}

.hentry {padding: 3em 0 0;}
section p {font-size: 1em;margin: 0 0.5em 1.5em}

.category .container {padding: 0;}
.page .container {padding: 50px 0 0;}


.hentry .content {padding: 3.5em 3em !important;}
.hentry .content h4 {margin-bottom: 1em}
.hentry .content h3, .hentry .content h4 {
font-family: 'Prata', serif;
font-size: 1.4em;
text-align: center;
letter-spacing: 0.05em;
}

.hentry .content p {
  font-size: 0.8em;
  font-weight: 300;
}

.hentry .content .fx-txt-right {
font-family: 'Prata', serif;
font-size: .75em;
letter-spacing: 0.05em;
  }
  

.category h2 {
font-size: 1.4em;
padding: 1em 0;
}
.category h3 {
  font-size: 1.4em;
  display: block;
  margin: 1em auto;
  }


.category a .magazine_t {
  font-family: 'Prata', serif;
  line-height: 0.75;
  font-size: 1.5em;
  font-weight: 300;
  letter-spacing: 0.1em;
  max-width: 90%;
  min-height: 3.5em;
  text-align: center;
  color: #e4e2df;
  text-decoration: none;
  margin: 1em auto;
}

.btn {
  display: block;
background: #000;
}
.list {
  display: flex;
  justify-content: center;
  align-items: center;
}
  .list img {max-width: 100% !important;}
.catlist div {display: block !important;}
  .list h3 {
    display: block !important;
    width: 100% !important;
  }
#pickup .cright {
  background-size: 250px;
}
.st img {max-width: 90% !important;}
#hero {padding-top: 60px !important;}
#hero .cleft {
height: 50vh;
background-size: cover;
}
#hero .cright {
background: #191613;
height: auto;
padding: 2em 1em !important;
}

#pickup .cleft {
height: auto;
padding: 1.5em 0 1em !important;
}
#pickup .cright {
  background-size: 65%;
}
#favarite .thum {max-height: 180px;}
#favarite .thum img {margin: em 0;max-width: 100%;}
#favarite .bname img {padding: 1em 0 0;max-width: 55%;}

.bname {
display: flex;
justify-content: center;
align-items: center;
height: 130px;
}

#story .cright {
height: auto;
padding: 1.5em 0 1em !important;
}
  
#story .cleft {height: 200px;margin: -2px 0 !important;}
#story .cright{padding: 2.5em !important;}
#about .cleft img {max-width: 50%}
#about .cleft {
padding: 1.75em !important;
}

.category .thum {max-height: 150px;}
.category .thum img {margin: 1em 0;max-width: 100%;}
.category .bname img {padding: 2em 0 1em;max-width: 50%;margin: 0 auto !important;}

.category-magazine .panel {height: 300px}
.category-magazine .panel .thum {
  display: block;
  max-height: 155px;
}

.single .bname {
margin-top: 5px !important;
height: 260px;
}
.single .bname img {
  display: block;
  width: 50%;
  margin: 0 auto;
}
.price, .list .btn {font-size: 0.9em;}

.image {
  margin: -10px auto 0;
  width: 100% !important;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image img {
 height: 300px;
  object-fit: cover;
}
.single h2 {
font-size: 2em;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.25;
padding: 0 0 0.5em;
margin: 0.5em 0 .5em;
color: #eee;
text-align: center;
word-wrap: break-word;
color: #191613;
}

.single h2 span {
  display: block;
  font-size: 90%;
  font-weight: 500;
  margin-left: 0.5em;
  letter-spacing: 0;
}
.single h2:after {font-size: 10pt;}
.single .ps p {color: #191613; font-size: 0.8em;}
.p_cap {max-width: 340px;}
.cbtn {font-size: 0.9em;font-weight: 200;margin-bottom:1em;}
.single .bname {margin:-15px 0 0;}
#article46 .content {padding: 2em 2em 3em !important;font-size: 9pt;}
#article46 .content p {text-align: left;margin: 0 !important;}
.logomark img {max-width: 150px;margin: 0 auto 1em !important;}
.sns span {max-width: 30px;margin: 0;float: left;}
.cart {position: absolute;top: 8px;right: 10px;max-width: 25px;opacity: .7;}
  #why {
    padding: 2.5em 0;
  }
#why div:nth-child(2),
#why div:nth-child(3),
#why div:nth-child(4) {
    padding: 0 1.5em 0 2.5em !important;
}
footer {min-height: 50px !important;padding: 1.5em 0 0em;}
#menu-footermenu {display: none;}
footer .logo {float: none;margin: 0 auto !important;max-width: 80px;}
.copy {text-align: center;font-size:8pt;border-top: 0;}
.copy a {margin: 0 5px;}
.copy span {display: block;font-size: 7pt;margin-top: 5px;}
.m_photo {height: 295px;background-size: 100% !important;}

.cform div {padding: 0px !important;margin: 2px 0 !important;}
.cform div input {padding: 5px !important;max-width: 330px !important;}
.cform div select {
  border: 1px solid;
  padding: 5px 10px;
  background: none;
  width: 100%;
}
.cform div textarea {padding: 5px !important;max-width: 330px !important;}
.cform .fx-col-30-s {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 10px !important;
}
.wpcf7-submit {
  display: block;
  margin: 1em auto 0 !important;
  border: 3px solid;
  width: 100%;
  height: 60px;
  background: none;
}
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border: none;
  background: #4d8801;
  color: #fff;
  padding: 0.75em 1em !important;
  border-radius: 0.5em;
  line-height: 1.25;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {background: #c40000;}

.fbtn {
  display: block;
  background: #222;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 1em 0;
  max-width: 340px;
  margin: 0 auto;
  font-weight: 300;
}

.storeimage {
  overflow: hidden;
  min-height: 530px;
}

.storeimage .n2-section-smartslider {
  margin-top: -15px !important;
}

@media screen and (max-width: 468px) {
.storeimage {
  overflow: hidden;
  min-height: 250px;
}
}




.bn_cap {
  font-size: 0.85em;
  max-width: 65%;
  margin: 0 auto 3em !important;
}
.item div {padding: 0 !important;}
.item .bname {
  height: 500px;
  background: #fff;
}

.item .bname img {width: 500px;}

.item .bname {margin: 0 !important;padding: 0 !important;}

.itemimg {margin-top: 2em 0 0 !important;height: 500px;overflow: hidden;}
.itemimg img {
  width: 100%;
}
.item {background: #c3bcb0;}
.item-info {
  height: 350px;
}
.item .fx-col-60-s {padding: 0 20px !important;}

.skuform {
  max-width: 100%;
  text-align: left;
  margin: 10px 0 !important;
}
.field_cprice {display: none;}
.item_option , .item_option th, .item_option td {
  background: none !important;;
  border: 0px !important;
  padding: 0;
  font-weight: 400;
}
.skuform div {padding: 10px;}

.cart-button input {
  width: 85%;
  border-radius:0;
  border: 0px !important;
  background: #222;
  color: #fff;
  height: 42px;
  line-height: 1 !important;
  font-weight: 400 !important;
  padding: 0;
  margin: 0;
}

caption {display: none;}

.skuquantity {
width: 13.97%;
  height: 40px;
  border: none;
  text-align: center;
  line-height: 1;
  font-size: 14pt;
  margin: 0 !important;
  padding: 0 !important;
}

.skuquantity input {width: 100%;}

.item .bname img {
filter: invert(0%) !important;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4)) !important;
}

.postid-496 .bname, .postid-579 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/1_0912image_Dunstan.jpg);
  background-size: cover;
}

.postid-559 .bname, .postid-584 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/2_0912image_Unable-control.jpg);
  background-size: cover;
}
.postid-562 .bname, .postid-586 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/3_0912image_No-more-rules.jpg);
  background-size: cover;
}

.postid-586 .bname { background-position: 50px -155px}

.postid-564 .bname, .postid-588 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/4_0912image_Stand-by-me.jpg);
  background-size: cover;
}
.postid-566 .bname, .postid-592 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/5_0912image_Take-it-easy.jpg);
  background-size: cover;
}
.postid-571 .bname, .postid-594 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/6_0912image_Ave-maria.jpg);
  background-size: cover;
}
.postid-573 .bname, .postid-596 .bname {
  background: url(https://dunstancoffee.jp/wp-content/uploads/7_0912image_Nothing-to-lose.jpg);
  background-size: cover;
}


select {
  border-radius: 0px;
  padding: 5px 20px;
  border: none;
  box-shadow: none;
  background: #fff;
}

@media screen and (max-width: 468px) {
.item .bname {height: 380px;}
.category-12 .bname {min-height: 160px;}
.bn_cap {max-width: 85%;}
.itemimg {height: 270px;}
.skuform {max-width: 95%;font-size: 10pt;}
}

.area, .ss_area {
  width: 96%;
margin: 0 2% !important;
  flex-wrap: wrap;
  position: relative;
}
.tab_class200g,
.tab_class400g,
.tab_class600g,
.ss_tab_class200g,
.ss_tab_class400g,
.ss_tab_class600g {
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: block5
  order: -1;
  position: absolute;
  top: 7px;
  transition: all .2s ease-in;
font-family: 'Roboto', sans-serif;
  font-size: 15pt;
  font-weight: 300;
}
.tab_class200g, .ss_tab_class200g {  left: 0;}
.tab_class400g, .ss_tab_class400g {  left: 80px;}
.tab_class600g, .ss_tab_class600g {  left: 160px;}

input[name="tab_name"], input[name="ss_tab_name"] {
  display: none;
}
input:checked + .tab_class200g,
input:checked + .tab_class400g,
input:checked + .tab_class600g,
input:checked + .ss_tab_class200g,
input:checked + .ss_tab_class400g,
input:checked + .ss_tab_class600g {
  color: #fff;
  background: #222;
}
.field_price {
  color: #222;
  position: absolute;
  top: -65px;
  right: 0px;
  font-size: 30pt;
  font-weight: 900;
  width: 42%;
  text-align: right;
  height: 60px !important;
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: .3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
font-family: 'Roboto', sans-serif;
}

 .ss_price {
  color: #222;
  position: absolute;
  top: -100px;
  right: 0px;
  font-size: 30pt;
  font-weight: 900;
  width: 42%;
  text-align: right;
  height: 60px !important;
-webkit-animation-name: 'fadeIn';
-webkit-animation-duration: .3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
font-family: 'Roboto', sans-serif;
}

.cprice {
  color: #222;
  position: absolute;
  top: -55px;
  right: 210px;
  font-size: 24pt;
}

.field_price .tax, .ss_price .tax {font-size: 10pt;}
.zaikostatus {display: none;}

.content_class {
  display: none;
  width: 100%;
  position: absolute;
  top: 80px;
  left: 0;
  -webkit-animation-name: 'fadeIn';
-webkit-animation-duration: .3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}

.content_class .fx-row {
  padding: 15px 0 !important;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

input:checked + .tab_class200g + .content_class,
input:checked + .ss_tab_class200g + .content_class {
  display: block;
}

input:checked + .tab_class400g + .content_class,
input:checked + .ss_tab_class400g + .content_class {
  display: block;
}

input:checked + .tab_class600g + .content_class,
input:checked + .ss_tab_class600g + .content_class {
  display: block;
}

.detail-box {margin: 20px 20px 30px !important;}

.pricetag {
  border-top: 1px solid;
  border-bottom: 1px solid;
  text-align: center;
  line-height: 1.5;
  margin: 1.5em auto 1.5em !important;
  letter-spacing: 0.1em;
  font-weight: 200;
  font-family: 'Roboto', sans-serif;
  font-size: 8.5pt;
  text-align: left;
}
.pricetag .fx-row {
  margin: 10px 0px!important;
}

.pricetag .fx-row span {
  display: inline-block;;
  margin-right: 5px;
  width: 50%;
  font-size: 8pt;
}

.pricetag span {font-size: 120%;font-weight: 500;}

.item-description p {
  font-size: 10pt;
  line-height: 1.25;
  font-weight: 300;
}

.quantity span {display: none;}

.item-option, .item_option {
  font-size: 11pt;
  height: 40px;
  line-height: 1;
  font-weight: 300;
}
.item-option span, .item_option span {  font-size: 10pt;margin-right:10px;}

.item-option select, .item_option select {height: 40px;}

.item-name {line-height: 1!important;padding: 0 !important;}





.flex {
display: flex;
justify-content: center;
align-items: center;
}

.hentry {min-height: 70vh}

.ucart li {
  height: 50px;
  line-height: 50px;
  font-weight: 300 !important;
}
.usccart_cart,
.usccart_customer,
.usccart_delivery,
.usccart_confirm {
  background-image: none !important;;
  background-color: #2b211c !important;
}
.upbutton
 {
  font-size: 10pt;
  line-height: 30px;
  font-weight: 300 !important;
   padding: 0 10px !important;
}

#cart_table, .currency_code {
  font-weight: 300 !important;
}
.send {
  padding: 30px 0 !important;
  border-color: #2b211c !important;
}
.send input {
  border-radius: 0;
  border: none;
  padding: 15px 25px;
}
.customer_form th,
.customer_form td {
  padding: 10px !important;
  font-size: 10pt !important;
  font-weight: 400 !important;
}

.customer_form th {text-align: right !important;}

h5 {
  background: #2b211c !important;
  font-weight: 400 !important;
  padding: 10px !important;
}
.why {
  padding: 5em !important;
}
.why h3 {
  font-family: 'Prata', serif;
  line-height: 1;
  font-size: 1.8em;
  letter-spacing: 0em;
  text-align: center;
  max-width: 98%;
  margin: 1.25em auto 1em;
}


/*タブ切り替え全体のスタイル*/
.tabs .tab_item:nth-child(2) {
  border-radius: 15px 0 0 15px;
  margin-left: 2%;
}
.tabs .tab_item:nth-child(4) {
  border-radius: 0 15px 15px 0;
}

/*タブのスタイル*/
.tab_item {
  width: 48%;
  height: 45px;
  line-height: 45px;
  font-size: 11pt;
  letter-spacing: 0.5em;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  font-weight: 300;
  transition: all 0.5s ease;
  margin: 23px 0 3px;
  background: #e2ded4;
}

.wcr_tlt {display: none;}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#regular:checked ~ #regular_content,
#subscription:checked ~ #subscription_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #222;
  color: #fff;
}

.quant {
  width: 15%;
  height: 40px;
  border: none;
  text-align: center;
  line-height: 1;
  font-weight: 300;
  margin: 0 !important;
}

.quant input, .button input {width: 100%;}
.button input {
  border-radius:0;
  border: 0px !important;
  background: #222;
  color: #fff;
  height: 40px;
  line-height: 1 !important;
  font-weight: 300;
  font-size: 12pt;
  padding: 0;
  margin: 0;
}

.button {
  width: 85%;
}

.ucart {font-size: 9pt;}
.num, .thumbnail, .stock, .currency_code {display: none;}
#cart_table {max-width: 100%;margin: 1em auto;font-size: 10pt;text-align: center;border: none !important;}
#cart_table th, #cart_table td {border: none !important;}
#cart_table td {height: 100px}
hr {border-color: #fff;}
.unitprice, .subtotal {width: 10% !important;}
.delButton {font-size: 8pt;border: none;background: #eee !important;}
.upbutton {
font-size: 9pt;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #eee !important;
}
.upbutton input {
  border: none;
  height: 20px;
  background: #eee !important;
  }
tfoot {
  border-top: 1px solid;
  border-bottom: 1px solid;
  }
tfoot th {
  background: #222 !important;
  }
tfoot .subtotal {font-size: 14pt !important;}
 .currency_code {font-size: 9pt;}
.continue_shopping_button,
.back_cart_button {background: #eee !important;font-size: 10pt}
.to_customerinfo_button,
.to_deliveryinfo_button,
.to_reganddeliveryinfo_button {
  background: #222 !important;
  color: #fff;
  font-size: 10pt;
  }
  .customer_form th {width: 25% !important;font-size: 8pt !important;}
  .lostpassword,
  .newmember, .send {font-size: 10pt !important;}
  p#nav {margin: 5px !important;}
  .send input:nth-child(2) {
  background: #222 !important;
    color: #fff;}
  .send input:nth-child(2).back_to_customer_button {background: #eee !important;color: #222;}
  .to_confirm_button, .checkout_button {
  background: #222 !important;
    color: #fff;}
  .checkout_button {width: 80%;}
  .ttl {background: #eee !important}
  #confirm_table h3 {font-weight: 400 !important;color: #222 !important;}
  #confirm_table th {font-weight: 400 !important;}
  #confirm_table td {font-weight: 300 !important;}
 .back_to_delivery_button {background: #eee !important}

@media screen and (max-width: 468px) {
.area, .ss_area {
    width: 100%;
    margin: 12px 2% 0 !important;
    flex-wrap: wrap;
    position: relative;
  }
.item-info {height: 295px;}
.field_price {
  top: -75px;
  padding: 0 !important;
}
.tab_class200g,
.tab_class400g,
.tab_class600g,
.ss_tab_class200g,
.ss_tab_class400g,
.ss_tab_class600g {
  width: 65px;
  height: 40px;
  line-height: 40px;
  font-size: 11pt;
}
.tab_class200g, .ss_tab_class200g {  left: 0;}
.tab_class400g, .ss_tab_class400g {  left: 65px;}
.tab_class600g, .ss_tab_class600g {  left: 130px;}
.button {margin: 15px 0 !important;}
.pricetag {font-size: 9pt;letter-spacing: 0;line-height: 1.5;}
.pricetag .fx-row {margin: 10px 0 !important}
.cprice {
  color: #222;
  position: absolute;
  top: -90px;
  right: 58px;
}

.why {padding: 2em 1.25em !important;}
.why h3 {font-size: 1.4em;}
.skuquantity {width: 13%;}
.ucart {font-size: 9pt;}
.num, .thumbnail, .stock {display: none;}
#cart_table {font-size: 10pt;}
#cart_table th, #cart_table td {border: none !important;}
#cart_table td {height: 100px}
.unitprice, .subtotal {width: 10% !important;}
.delButton {font-size: 8pt;border: none;background: #eee !important;}
.upbutton {
font-size: 9pt;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #eee !important;
}
.upbutton input {
  border: none;
  height: 20px;
  background: #eee !important;
  }
tfoot {
  border-top: 1px solid;
  border-bottom: 1px solid;
  }
tfoot th {
  background: #222 !important;
  }
tfoot .subtotal {font-size: 14pt !important;}
 .currency_code {font-size: 9pt;}
.continue_shopping_button,
.back_cart_button {background: #eee !important;font-size: 10pt}
.to_customerinfo_button,
.to_deliveryinfo_button,
.to_reganddeliveryinfo_button {
  background: #222 !important;
  color: #fff;
  font-size: 10pt;
  }
  .customer_form th {width: 25% !important;font-size: 8pt !important;}
  .lostpassword,
  .newmember, .send {font-size: 10pt !important;}
  p#nav {margin: 5px !important;}
  .send input:nth-child(2) {
  background: #222 !important;
    color: #fff;}
  .send input:nth-child(2).back_to_customer_button {background: #eee !important;color: #222;}
  .to_confirm_button, .checkout_button {
  background: #222 !important;
    color: #fff;}
  .checkout_button {width: 80%;}
  .ttl {background: #eee !important}
  #confirm_table h3 {font-weight: 400 !important;color: #222 !important;}
  #confirm_table th {font-weight: 400 !important;}
  #confirm_table td {font-weight: 300 !important;}
 .back_to_delivery_button {background: #eee !important}
}

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
  max-width: 90%;
  margin: 1em auto !important;
}
.tab-label {
  width: 48%;
    margin: 0 1% 1em;
    padding: 10px 0;
    order: -1;
  text-align: center;
  border-radius: 30px;
  font-weight: 300;
  font-size: 90%;
}
.tab-content {
    width: 100%;
    display: none;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: #222;
  color: #fff;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}


input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:#fff;}
.tab_panel{width:100%; padding:80px 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#fff; color:#000;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background:#fff; color:#000;}
#tab5:checked ~ .panel_area #panel5{display:block;}
#tab6:checked ~ .tab_area .tab6_label{background:#fff; color:#000;}
#tab6:checked ~ .panel_area #panel6{display:block;}

#tour {background: #e2ded4;}
#tour .ttrim {height: 600px;}

@media screen and (max-width: 468px) {
  header {margin-bottom: -60px;}
  #hero {margin: 0;padding: 0}
  #tour .cleft img {padding: 30px;}
  #tour .ttrim {height: 300px;}
}