@charset "UTF-8";

/* base */
a:link {
  text-decoration: none;
}
.bold,
strong {
  font-weight: bold;
}
.btn_cart {
  color: #fff;
  margin: 0;
  padding: 0;
  position: relative;
  top: 10px;
  right: 60px;
  z-index: 1;
}
.line_banner {
  display: block;
  max-width: 300px;
  margin: 10px auto 20px auto;
}
.line_banner img {
  width: 100%;
}
.banner-linecoupon img {
  width: 100%;
}
.flash_message {
  border: solid 1px #ff5c5c;
  color: #ff0505;
  background-color: #fff3f3;
  padding: 14px 20px;
  margin-top: 10px;
  position: relative;
  z-index: 10000;
}
.wrap_bt_go_item {
  display: block;
  position: fixed;
  bottom: 20px;
  width: 100%;
  z-index: 1000;
}
.bt_go_item a {
  display: block;
  float: left;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%;
  text-decoration: none;
  color: #fff;
}
.bt_go_item a:first-child {
  width: 80%;
  border-right: 1px dotted rgba(255, 255, 255, 0.6);
}
.bt_go_item a:last-child {
  width: 20%;
}
.bt_green {
  width: 246px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #00c792;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  box-shadow: 0 8px 15px rgba(123, 138, 147, 0.15);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
}
.block_news {
  padding-bottom: 20px;
}
.block_news ul {
  max-width: 600px;
  margin: 20px auto;
  background: #fff;
  line-height: 20px;
  border-radius: 15px;
  border: 3px solid #eee;
  padding: 2px 0;
}
.block_news ul li {
  border-bottom: 1px solid #eee;
  padding: 12px 15px;
}
.block_news ul li:last-child {
  border-bottom: none !important;
}
.block_news ul li a {
  text-decoration: underline;
  color: var(--main-color);
}
.block_news ul li a:after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 2px;
  font-size: 0.6em;
}
.block_news p {
  font-size: 0.9em;
  line-height: 1.4em;
  margin: 5px 0;
}
.date {
  font-weight: bold;
  color: #999;
  letter-spacing: 1px;
}
.block_common ul li {
  padding-top: 10px;
  padding-bottom: 10px;
}
.block_common ul li:nth-child(even) {
  background-color: #efefef;
  background-repeat: repeat;
}
.block_common ul li p {
  line-height: 24px;
  margin: 0 auto;
  padding: 0 15px;
  font-size: 14px;
}
.block_common ul li p.bold {
  font-weight: bold;
}
.tel_cau{
  font-size: 0.8em;
  color:#333;
}
.column_cat {
  text-align: center;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}
.content h3 {
  font-size: 16px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
  color: #d23f45;
  font-weight: bold;
}
.content {
  width: 300px;
  margin: 0 auto;
  padding-bottom: 40px;
  line-height: 28px;
  font-size: 14px;
}
.content img {
  display: block;
  width: 200px;
  margin: 10px auto;
}
.post a:link {
  text-decoration: underline;
}
.posts {
  width: 98%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  color: #333;
  font-size: 0.85em;
  line-height: 1.6em;
  border-radius: 4px;
}
.post {
  border-bottom: 1px solid #efefef;
  padding-top: 10px;
}
/*
.post:last-child {
  border: none;
} 
 */
.post-header h3 {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 6px;
  padding: 2px 0;
  word-break: break-all;
}
.post-header h3 a:after {
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 4px;
  font-size: 0.8em;
  opacity: 0.8;
}
.post-header a {
  color: var(--main-color);
}

.post-list {
  display: block;
  font-size: 0;
}
.post-image {
  width: 19%;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  padding: 4px 0 0 0;
}
#contents .post-image img {
  margin: 0;
}
.post-list-text {
  width: 78%;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
  min-height: 115px;
  word-break: break-all;
}
.post-meta {
  margin: -5px 0 0px 0;
  font-size: 12px;
  opacity: 0.6;
}
.post img {
  width: 100%;
  border: 4px solid #eee;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  margin-right: 15px !important;
}
.post-body {
  margin-bottom: 10px;
}
.post-body p {
  font-size: 12px;
  line-height: 1.4em;
}
.post-content img {
  marging: 20px 0;
}
.post-content p {
  margin: 0;
  line-height: 1.8em;
}
.post-content h3 {
  font-size: 18px;
  line-height: 1.4em;
  font-weight: bold;
  margin: 20px 0 18px 0 !important;
  padding-bottom: 8px;
  color: #333;
  position: relative;
}
.post-content h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #eee,
    #eee 2px,
    #fff 2px,
    #fff 4px
  );
}
.post a {
  color: var(--main-color);
}


.facebookbox {
  width: 300px;
  margin: 20px auto;
}
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.way3pay {
  width: 300px;
  margin: 10px auto 0;
  text-align: center;
  padding: 10px;
}
.way3pay div {
  width: 48%;
  margin: 2px 0.5%;
  float: left;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  opacity: 0.8;
  padding-bottom: 8px;
  padding-top: 8px;
  border-radius: 4px;
}
.way3pay .credit {
  background-color: #ff487c;
}
.way3pay .bank {
  background-color: #3399e3;
}
.way3pay .cashOn {
  background-color: #ff7f00;
}
.way3pay .NP {
  background-color: #1ede70;
}
@media screen and (max-width: 500px) {
  .post-image {
    width: 30%;
  }
  .post-list-text {
    width: 64%;
  }
  .block-top .posts {
    margin: -15px 0;
  }

}

/* logo */
.wrap_h1 {
  color: #fff;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 20px;
  padding: 0 6px 6px 6px;
}
/* title */
h2 {
  text-align: center;
  background-color: #222;
  background-repeat: repeat;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1.3px;
}
/* footer */
.footer {
  background-color: #222;
  background-repeat: repeat;
  padding-top: 20px;
}
.footer ul.menu {
  text-align: center;
  padding: 5px 5px 5px 15px;
  max-width: 600px;
  margin: 0 auto;
}
.footer ul.menu li {
  display: inline-block;
  text-align: center;
  font-size: 12px;
  padding: 0 10px;
  margin: 8px 0 8px -12px;
}
.footer ul.menu li::after {
  color: rgba(255, 255, 255, 0.3);
  content: "/";
  margin-left: 5px;
}
.footer ul.menu li a {
  color: #fff;
  text-decoration: none;
}
.footer ul.menu li a:hover {
  text-decoration: underline;
}
.footer .projects {
  width: 500px;
  max-width: 100%;
  padding: 0 15px;
  margin: 0 auto 15px;
}
.footer .projects ul {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer .projects ul li {
  text-align: center;
}
.footer .projects ul li a {
  display: block;
  color: #fff;
  padding: 10px 0px 5px 4px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-width: 3px;
}
.footer .projects ul li a,
.footer ul.projects li a:hover {
  transition: all 0.3s ease;
}
.footer .projects ul li a::before {
  content: "";
  background-image: url(/img/icon-project.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0px;
  bottom: 4px;
  margin: auto;
  display: block;
  opacity: 0.3;
  transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}
.footer .projects ul li a::after {
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: 900;
  right: 5px;
  top: 0;
  bottom: 0;
  display: block;
  margin: auto;
  height: 20px;
  font-size: 1em;
  opacity: 0.3;
}
.footer .projects ul li a small {
  display: block;
  margin: 0 0 5px;
}
.footer .projects ul li a img {
  display: block;
  width: 100px;
  max-width: 100%;
  margin: 0 auto;
}
/** 注意！ここはmain-colorにできない */
.footer .projects ul li.snapwine a {
  background-color: #b1373e;
  border-color: #d23f45;
}
.footer .projects ul li.snapwine a:hover {
  background-color: #d23f45;
  border-color: #b1373e;
}
.footer .projects ul li.snapbottle a {
  background-color: #314d7f;
  border-color: #3b5998;
}
.footer .projects ul li.snapbottle a:hover {
  background-color: #3b5998;
  border-color: #314d7f;
}
.footer .projects ul li.snapchampagne a {
  background-color: #8f8219;
  border-color: #aa9a00;
}
.footer .projects ul li.snapchampagne a:hover {
  background-color: #aa9a00;
  border-color: #8f8219;
}
.footer .projects ul li.snapwhisky a {
  background-color: #7f5000;
  border-color: #a07431;
}
.footer .projects ul li.snapwhisky a:hover {
  background-color: #a07431;
  border-color: #7f5000;
}
.footer .projects ul li.snapsake a {
  background-color: #358e5b;
  border-color: rgba(57, 168, 105, 1);
}
.footer .projects ul li.snapsake a:hover {
  background-color: rgba(57, 168, 105, 1);
  border-color: #358e5b;
}
.footer .projects ul li.snapume a {
  background-color: rgba(209, 120, 3, 1);
  border-color: #f19b28;
}
.footer .projects ul li.snapume a:hover {
  background-color: #f19b28;
  border-color: rgba(209, 120, 3, 1);
}
.footer .projects ul li.snapbeer a {
  background-color: rgba(208, 175, 1, 1);
  border-color: #fdd403;
}
.footer .projects ul li.snapbeer a:hover {
  background-color: #fdd403;
  border-color: rgba(208, 175, 1, 1);
}
.footer .projects ul li.snapnonalc a {
  background-color: rgba(218, 101, 138, 1);
  border-color: #de8daa;
}
.footer .projects ul li.snapnonalc a:hover {
  background-color: #dba2b6;
  border-color: rgba(218, 101, 138, 1);
}
.footer .projects ul li.snapcanbeer a {
  background-color: rgba(99, 170, 207, 1);
  border-color: #7bc3e7;
}
.footer .projects ul li.snapcanbeer a:hover {
  background-color: #7bc3e7;
  border-color: rgba(99, 170, 207, 1);
}
.footer .projects ul li.snapjuice a {
  background-color: rgba(134, 183, 80, 1);
  border-color: #ade474;
}
.footer .projects ul li.snapjuice a:hover {
  background-color: #ade474;
  border-color: rgba(134, 183, 80, 1);
}
.footer .projects ul li.snapbinbeer a {
  background-color: rgba(155, 170, 188, 1);
  border-color: #b9c6d9;
}
.footer .projects ul li.snapbinbeer a:hover {
  background-color: #b9c6d9;
  border-color: rgba(155, 170, 188, 1);
}
.footer .projects ul li.snapgin a {
  background-color: rgba(130, 185, 180, 1);
  border-color: #b7d8d5;
}
.footer .projects ul li.snapgin a:hover {
  background-color: #b7d8d5;
  border-color: rgba(130, 185, 180, 1);
}
.footer .projects ul li.snapchuhi a {
  background-color: rgba(192, 199, 7, 1);
  border-color: #dbe100;
}
.footer .projects ul li.snapchuhi a:hover {
  background-color: #dbe100;
  border-color: rgba(192, 199, 7, 1);
}
.footer .projects ul li.snapcanjuice a {
  background-color:  rgba(180, 0, 7, 1);
  border-color: #c24146;
}
.footer .projects ul li.snapcanjuice a:hover {
  background-color: #c24146;
  border-color:  rgba(180, 0, 7, 1);
}


.footer .projects ul li.snapvintage a {
  background-color: rgba(81, 10, 10, 1);
  border-color: #602e2e;
}
.footer .projects ul li.snapvintage a:hover {
  background-color:  #602e2e;
  border-color: rgba(81, 10, 10, 1);
}
.footer .projects ul li.snapcbd a {
  background-color: rgb(11, 117, 149);
  border-color: #368aa2;
}
.footer .projects ul li.snapcbd a:hover {
  background-color:  #368aa2;
  border-color: rgb(11, 117, 149);
}
.footer .projects ul li.snapocha a {
  background-color: rgb(65, 132, 26);
  border-color: #61a638;
}
.footer .projects ul li.snapocha a:hover {
  background-color:  #61a638;
  border-color: rgb(65, 132, 26);
}

.footer .projects .snapliquor-box {
  width: 100%;
  margin: 20px auto;
  color: #fff;
  text-align: center;
}

.footer .projects .snapliquor-box ul li a::before {
  content: "";
  background-image: none!important;
  background-repeat: no-repeat;
}

.footer .projects ul li.snapliquor a::after {
  content: " ";
}

.footer .projects .snapliquor-box ul {
  margin: 15px auto;
}

.footer .projects ul li.snapliquor a {
  padding: 0!important;
  color: #000;
  background-color:  rgba(255, 255, 255, 1);
  border-color: rgba(200, 200, 180, 1) !important;
  border-radius: 16px;
}
.footer .projects ul li.snapliquor a:hover {
  color: #000;
  border-color: #FFF!important;
  border-radius: 16px;
  transition: all 0.3s ease;
}
.footer .projects ul li.snapliquor a:hover img {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.footer .projects .snapliquor-box ul li a img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.bnr-snapvintage  {
  padding-top: 30px;
}

.bnr-snapvintage a img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
  border: 1px solid rgb(60, 60, 60);
}

.bnr-snapvintage a:hover img {
  opacity: 0.6;
}


.recommend-link{
  color: #ccc;
  text-align: center;
  display: block;
  margin: 10px auto;
}

.sakekomi-box {
  width: 500px;
  max-width: 100%;
  padding: 8px;
  margin: 0 auto 15px!important;
  text-align: center;
  background-color: #ccc;
  position: relative;
  border-radius: 5px;
  border: 1px solid #fff;
}

.sakekomi-box p{
  padding-bottom: 0px!important;
  color: #333;
}

.footer a .sakekomi-box {
  color: #333!important;
}

.footer a:hover .sakekomi-box {
  opacity: 0.8;
  transition: all 0.2s ease;
}

.footer ul.sns {
  text-align: center;
}
.footer ul.sns li {
  display: inline-block;
}
.footer ul.sns li a {
  color: #fff;
  text-decoration: none;
}
.footer p {
  padding-bottom: 90px;
}
.footer p a {
  color: #fff;
  text-decoration: none;
}
.footer-contact {
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 21px;
  padding: 5px 0 18px 0;
}
.footer-contactlist {
  display: block;
  margin-top: 15px;
  font-size: 0.8em;
  line-height: 1.3em;
}
.footer-contactlist div {
  display: inline-block;
  margin: 0 5px;
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
}
.footer-contactlist div a {
  display: block;
  border-radius: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 10px;
  border: 4px solid #eee;
  transition: all 0.3s ease;
}
.footer-contactlist div a:hover {
  border: 4px solid #f39800;
  transition: all 0.3s ease;
}
.footer-contactlist div img {
  width: 100%;
  height: 100%;
}
.copyright {
  color: #fff;
  font-size: 10px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px;
}
.footer ul.sns {
  margin: 15px auto 5px;
}
.footer ul.sns li {
  font-size: 2em;
  margin: 0 10px;
}
.footer ul.sns li a {
  opacity: 0.8;
  transition: all 0.2s ease;
}
.footer ul.sns li a:hover {
  opacity: 1;
  transition: all 0.2s ease;
}
.footer ul.sns li::after {
  display: none;
}

/* menu */
.hamburger {
  height: 45px !important;
  top: 4px !important;
  right: 10px !important;
  /*background-color: rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);*/
  border-radius: 4px;
  padding: 10px !important;
}
.hamburger .hamburger__icon,
.hamburger .hamburger__icon::before,
.hamburger .hamburger__icon::after {
  background-color: #fff;
  width: 30px;
}
.hamburger:after {
  content: "MENU";
  color: rgba(255, 255, 255, 1);
  font-size: 8px;
  font-weight: bold;
  padding-top: 5px;
  margin: 0 auto;
  display: block;
  text-align: center;
  font-family: arial;
}
.fat-nav {
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}
.fat-nav li {
  font-size: 14px !important;
  border-bottom: 1px solid #444;
  letter-spacing: 1px;
}
.fat-nav li:first-child {
  border-top: 1px solid #444;
}
.fat-nav li a {
  display: block;
  padding: 5px;
}
.fat-nav li a::after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  font-size: 1.4em;
  opacity: 0.3;
}
.fat-nav li i {
  opacity: 0.5;
  margin-right: 10px;
  position: absolute;
  left: 15px;
}

/* float btn */
.float-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px;
  z-index: 9998;
}
.float-footer-wrap {
  max-width: 600px;
  margin: 0 auto;
}
.float-create {
  width: 69%;
  float: left;
  text-align: center;
  margin-right: 1%;
}
.float-line {
  width: 30%;
  float: left;
  text-align: center;
}
.float-create a {
  display: block;
  color: #fff;
  padding: 5px 0;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.2em;
  height: 50px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #fff;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.15);
  background-color: color-mix(in srgb, var(--main-color) 90%, transparent);
}
.float-create a span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 0;
  margin: auto;
  height: 15px;
}
.float-create a span small {
  font-weight: normal;
  margin-left: 2px;
}
.float-create a span svg {
  opacity: 0.6;
  position: absolute;
  left: 8px;
  top: 2px;
}
.float-create a span::after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 10px;
  font-size: 1.4em;
  opacity: 0.3;
}
.float-line a {
  background-color: rgba(0, 185, 1, 0.9);
  display: block;
  color: #fff;
  padding: 5px 0;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.1em;
  height: 50px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #fff;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.15);
}
.float-line a span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70%;
  height: 28px;
}
.float-line a span small {
  font-weight: normal;
  font-size: 9px;
}

/* webfont */
.btn-base,
.btn-base-s,
.float-footer,
.fat-nav li,
.hamburger {
  letter-spacing: 1px;
}
.btn-base {
  font-weight: 400;
}
.btn-base-s {
  font-weight: 500;
}
.top_news_bg {
  background: linear-gradient(
    -45deg,
    #ddd 25%,
    white 25%,
    white 50%,
    #ddd 50%,
    #ddd 75%,
    white 75%,
    white
  );
  background-size: 2px 2px;
  padding: 20px;
}
.top_news_box {
  margin-bottom: 30px;
  padding: 0 20px;
  position: relative;
  width: 100%;
}
.top_shortestDay {
  text-align: center;
  color: #fff;
  width: 100%;
  padding: 5px 5px 5px 0px;
  line-height: 24px;
  letter-spacing: 0.1em;
  font-size: 1em;
  font-weight: bold;
  background-color: #000;
}
.cau_day {
  width: 95%;
  margin: 0px auto;
  padding-top: 10px;
  margin-bottom: 0px;
  font-size: 0.9em;
  font-weight: normal;
  color: #cb4653;
  display: block;
}
.cau_day_l {
  padding: 10px 20px 0px 20px;
  margin-bottom: 0px;
  font-size: 2.3em;
  font-weight: normal;
  color: #cb4653;
  display: block;
}
.top_news {
  width: 560px;
  height: auto;
  max-width: 100%;
  line-height: 20px;
  padding-bottom: 15px;
  position: relative;
  margin: 0px auto;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.12);
  color: #666;
}
.top_news_inner {
  margin: 0px auto 0px;
  padding: 12px 15px 12px;
  color: #666;
}
.top_news .date {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.8px;
  display: block;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.top_news small {
  color: #ccc;
  display: inline-block;
  margin: 0 10px;
}
.top_news .box-title {
  font-family: "DIN Condensed", sans-serif;
  margin: 0 0 10px 0;
  font-size: 23px;
  letter-spacing: 2px;
  color: #333;
  display: block;
  padding: 0 0 8px 0;
  border-bottom: solid 1px #dddddd;
}
.top_news .box-title svg {
  opacity: 0.6;
  margin-right: 7px;
  font-size: 12px;
}
.top_news a {
  text-decoration: underline;
}
.top_news a:hover {
  text-decoration: none;
}
/** TODO: 明るい色のバリエーションを、CSS変数にする */
.top-snapwine .top_news a {
  color: rgba(210, 63, 69, 1);
}
.top-snapchampagne .top_news a {
  color: rgba(170, 154, 1, 1);
}
.top-snapbottle .top_news a {
  color: rgba(58, 90, 152, 1);
}
.top-snapwhisky .top_news a {
  color: rgba(127, 79, 0, 1);
}
.top-snapsake .top_news a {
  color: rgba(57, 168, 105, 1);
}
.top-snapume .top_news a {
  color: rgba(209, 120, 3, 1);
}
.top-snapbeer .top_news a {
  color: rgba(218, 183, 0, 1);
}
.top-snapnonalc .top_news a {
  color: rgba(218, 101, 138, 1);
}
.top-snapcanbeer .top_news a {
  color: rgba(99, 170, 207, 1);
}
.top-snapjuice .top_news a {
  color: rgba(134, 183, 80, 1);
}
.top-snapbinbeer .top_news a {
  color: rgba(155, 170, 188, 1);
}
/* topic-path */
.topic-path {
  margin: 0 auto;
  padding: 10px 15px;
  font-size: 0.95em;
  line-height: 1.6em;
}
.topic-path li {
  display: inline-block;
}
.block_common ul.topic-path li:nth-child(even) {
  background-color: transparent;
}
.topic-path li:after {
  content: "\f105";
  font-family: FontAwesome;
  margin: 0 5px 0 10px;
  color: rgba(0, 0, 0, 0.3);
}
.topic-path li:last-child:after {
  display: none;
}
.topic-path li a {
  text-decoration: underline;
  color: var(--main-color);
}
.topic-path li a:hover {
  text-decoration: none;
}

/*ーーーーーーーーー
LIKEボタン
ーーーーーーーーー*/
/*-- シーン一覧 --*/
.favlavel-box {
  width: 200px;
  margin: 10px auto;
  background-color: white ;
  padding: 5px 0px;
  position: relative;
}

.favlavel-box:after {
  content: "";
  position: absolute;
  right: 0;
  top: -10px;  /* 三角形の位置を調整 */
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: transparent transparent white transparent;  /* 三角形の頂点が上を向くように変更 */
  border-width: 0 10px 10px 10px;  /* 吹き出しの向きと大きさを変更 */
}

.favlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--themecolor);
  position: relative;
  color: rgb(142, 138, 138);
}

.favlabel svg {
  height: 19px;
  width: 19px;
  fill: #FFFFFF;
  filter: drop-shadow(1px 1px 2px #b4b4b4);
  transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  margin: 0 4px;
}

@media screen and (max-width: 575px) {
  .favlabel svg {
      height: 19px;
      width: 19px;
  }
}

.favbox {
  display: none;
}

.fav-count {
  gap: 3px;
  display: flex;
  align-items: center;
}

.fav-count span {
  font-size: 18px;
}

.favbox:checked + .favlabel svg {
  fill: deeppink;
  filter: none;
  stroke: none;
  transform: scale(1.15);
}

.favbox:checked + .favlabel {
  color: red;
  font-weight: bold;
}

/*-- シーン毎 --*/
.fav-scene-box .favlabel {
  justify-content: start;
  width: 180px;
  margin: auto;
}

/*ーーーーーーーーー
LINEクーポン
ーーーーーーーーー*/
.block-line {
  width: 600px;
  max-width: 100%;
  margin: 20px auto 0px auto;
  color: #333333;
  font-size: 16px;
  line-height: 1.7em;
  padding: 0px 20px;
}
.block-line .copy {
  color: #333333;
  font-size: 1.1em;
  line-height: 1.5em;
  text-align: center;
  font-weight: bold;
  margin: 20px auto;
  font-family: "M PLUS Rounded 1c";
}
.block-line img {
  display: block;
  max-width: 100%;
  margin: 15px auto;
}
.block-line .box {
  background-color: rgba(245, 230, 206, 0.8);
  padding: 10px 15px 15px 15px;
}
.block-line h4 {
  background-color: #39c02f;
  border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  padding: 15px 15px 15px 15px;
  margin: 20px 0 0 0;
  position: relative;
}
.line-step01:before {
  content: "STEP\02776";
  padding-right: 15px;
  color: #ffff2c;
}
.line-step02:before {
  content: "STEP\02777";
  padding-right: 15px;
  color: #ffff2c;
}
.arrow {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 25px solid #f4d592;
  display: block;
  margin: 20px auto;
}
.l-btn {
  margin: 30px auto;
  text-align: center;
  display: block;
  padding: 10px 0px 10px 0px;
}
.txt_cau {
  color: red;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
  font-size: 85%;
}

/* scene-list */
.scene-list {
  margin: 15px 0 0 0;
}
.scene-list li {
  margin: 0 0 10px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2em;
  background-position: left 8px center;
  background-repeat: no-repeat;
  background-size: 25px auto;
  background-color: #bbb;
  border-radius: 5px;
}
.scene-list li a {
  color: #fff;
  display: block;
  padding: 10px 30px 10px 40px;
}
.scene-birthday {
  background-image: url(/img/scene/icon-birthday.png);
}
.scene-anniversary {
  background-image: url(/img/scene/icon-anniversary.png);
}
.scene-wedding {
  background-image: url(/img/scene/icon-wedding.png);
}
.scene-ferewell {
  background-image: url(/img/scene/icon-ferewell.png);
}
.scene-parents {
  background-image: url(/img/scene/icon-parents.png);
}
.scene-love {
  background-image: url(/img/scene/icon-love.png);
}
.scene-shop {
  background-image: url(/img/scene/icon-shop.png);
}
.scene-birthday {
  background-image: url(/img/scene/icon-birthday.png);
}
.scene-season {
  background-image: url(/img/scene/icon-event.png);
}
.scene-xmas {
  background-image: url(/img/scene/icon-xmas.png);
}
.scene-helloween {
  background-image: url(/img/scene/icon-helloween.png);
}
.scene-event {
  background-image: url(/img/scene/icon-event.png);
}
.scene-other {
  background-image: url(/img/scene/icon-other.png);
}
.scene-gift {
  background-image: url(/img/scene/icon-gift.png);
}
.banner-voice {
  margin: 25px 0 10px 0;
}
.banner-instagram {
  margin: 10px 0 25px 0;
}

.new-ham .menu-btn {
  position: fixed;
  top: 8px;
  right: 10px;
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  z-index: 20000;
  border-radius: 4px;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 2px;
  width: 30px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
  transition: 0.3s;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
  transition: 0.3s;
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
  transition: 0.3s;
}

#menu-btn-check {
  display: none;
}

.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
     "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  opacity: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.4s;
  transform: scale(1.5);
  pointer-events: none;
}
#menu-btn-check:checked ~ .menu-content {
  opacity: 100;
  transform: scale(1);
  pointer-events: auto !important;
}
.hamburger_span {
  padding-top: 10px;
}
.hamburger_span:after {
  content: "MENU";
  color: rgba(255, 255, 255, 1);
  font-size: 9px;
  font-weight: bold;
  margin-top: 15px;
  display: block;
  text-align: center;
  font-family: arial, bebasneue;
  letter-spacing: 1px;
}

.new-ham li i {
  opacity: 0.5;
  margin-right: 10px;
  position: absolute;
  left: 15px;
}

.new-ham li a::after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 15px;
  font-size: 1.4em;
  opacity: 0.3;
}
.new-ham li a {
  display: block;
  padding: 5px;
}

.new-ham li:first-child {
  border-top: 1px solid #444;
}
.new-ham li,
.new-ham li a {
  color: #fff;
}

.new-ham li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  font-size: 2em;
}
.new-ham li {
  font-family: "M PLUS Rounded 1c",sans-serif;
  letter-spacing: 1px;
}

.new-ham li {
  font-size: 14px !important;
  border-bottom: 1px solid #444;
  letter-spacing: 1px;
}

.new-ham ul {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.ham-nav__wrapper {
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;
}

.ham-nav-snapliquor span{
  font-size:11px;
  line-height:20px;
}

.new-ham li.ham-nav-snapliquor a::after {
    content: "\f08e";
    font-family: FontAwesome;
    position: absolute;
    right: 15px;
    top:15px;;
    font-size: 1.2em;
    opacity: 0.3;
}

.slider_fade {
  position: relative;
}

.slider_fade > li {
  position: absolute;
  list-style: none;
  visibility: hidden;
  animation: anime_slider_fade 12s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
  animation-delay: 4s;
}
.slider_fade > li:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes anime_slider_fade {
  0% {
    visibility: visible;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
  }
  48.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*
.slider_fade img {
  width: 144px;
  height: 180px;
  border-radius: 0px 0px 74px 74px / 0px 0px 8px 7px;
}
*/

.circle {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  animation: loading 1s infinite;
}

@keyframes loading {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 基本設定（背景やレイアウト） */

.cir-container {
  display: flex;
  height: 100vh;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  position: fixed;
  width: 100%;
  top: 0;
  pointer-events: none;
}
#hideMe {
  animation: fadein-keyframes 1s ease 1s 1 forwards;
}
@keyframes fadein-keyframes {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}

/*ーーーーーーーーー
ページネーション
ーーーーーーーーー*/
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 4px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
}

.pagination li.active {
  background-color: var(--themecolor);
  padding: 8px 14px;
  color: white;
}

.pagination li.page-item.disabled {
  padding: 8px 14px;
  color: #ccc;
}

.pagination a {
  color: var(--themecolor);
  text-decoration: none;
  display: block;
  transition: background-color 0.3s;
  padding: 8px 14px;
  border-radius: 6px;
}

.pagination a:hover {
  background-color: var(--themecolor); 
  color: white; 
}

.paginate_cont {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%;
  margin: 30px 0;
}
.counter{
    position: absolute;
    right: 1em;
    top: -0.5em;
}

.counter-icon{
    color: #ff0001;
    font-size: small;
}

.content img {
	width: 100px;
	margin: 10px auto;
}
@charset "UTF-8";
/*
 * 以下の色一覧はリファレンスとして残しています。
 * 基本的には var(--main-color) を使ってください。
 * CSS変数は「main-color」という名前に、
 * リニューアル後のTailwind変数は「primary」にすることで
 * リニューアル前後の設定を共存させています。
 */
:root {
  --snapwine-primary: rgba(210, 63, 69, 1);
  --snapchampagne-primary: rgba(170, 154, 1, 1);
  --snapbottle-primary: rgba(58, 90, 152, 1);
  --snapwhisky-primary: rgba(127, 79, 0, 1);
  --snapsake-primary: rgba(57, 168, 105, 1);
  --snapume-primary: rgba(209, 120, 3, 1);
  --snapbeer-primary: rgba(218, 183, 0, 1);
  --snapnonalc-primary: rgba(218, 101, 138, 1);
  --snapcanbeer-primary: rgba(99, 170, 207, 1);
  --snapjuice-primary: rgba(134, 183, 80, 1);
  --snapbinbeer-primary: rgba(155, 170, 188, 1);
  --snapgin-primary: rgba(130, 185, 180, 1);
  --snapchuhi-primary: rgba(173, 180, 0, 1);
  --snapcanjuice-primary: rgba(180, 0, 7, 1);
}

#contents {
  width: 600px;
  max-width: 100%;
  margin: 20px auto;
  color: #333;
  font-size: 1.1em;
  line-height: 1.7em;
}

#contents-wrap {
  padding: 0 20px;
}

.pay-list {
  color: var(--main-color);
}

.circle-step01:before, .circle-step02:before, .circle-step03:before {
  color: var(--main-color);
}

.copy-arrow:before {
  border-left: 1px solid var(--main-color);
}

.copy-arrow:after {
  border-right: 1px solid var(--main-color);
}

/* title */
.faq h3 {
  font-size: 1.1em;
  line-height: 1.3em;
  font-weight: bold;
  padding: 0 0 5px 24px;
  position: relative;
  margin: 0px 0 10px 0;
}

.faq h3:before {
  content: "\f004";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: normal;
  left: 0;
  opacity: 0.5;
}

.faq-snapwine h3 {
  color: var(--snapwine-primary);
  border-bottom: 1px dotted rgba(210, 63, 69, 0.6);
}

.faq-snapchampagne h3 {
  color: var(--snapchampagne-primary);
  border-bottom: 1px dotted rgba(170, 154, 1, 0.6);
}

.faq-snapbottle h3 {
  color: var(--snapbottle-primary);
  border-bottom: 1px dotted rgba(58, 90, 152, 0.6);
}

.faq-snapwhisky h3 {
  color: var(--snapwhisky-primary);
  border-bottom: 1px dotted rgba(127, 79, 0, 0.6);
}

.faq-snapsake h3 {
  color: var(--snapsake-primary);
  border-bottom: 1px solid rgba(57, 168, 105, 0.6);
}

.faq-snapume h3 {
  color: var(--snapume-primary);
  border-bottom: 1px solid rgba(209, 120, 3, 0.6);
}

.faq-snapbeer h3 {
  color: var(--snapbeer-primary);
  border-bottom: 1px solid rgba(250, 240, 20, 0.6);
}

.faq-snapnonalc h3 {
  color: var(--snapnonalc-primary);
  border-bottom: 1px solid rgba(218, 101, 138, 0.6);
}

.faq-snapcanbeer h3 {
  color: var(--snapcanbeer-primary);
  border-bottom: 1px solid var(--snapcanbeer-primary);
}

.faq-snapjuice h3 {
  color: var(--snapjuice-primary);
  border-bottom: 1px solid var(--snapjuice-primary);
}

.faq-snapbinbeer h3 {
  color: var(--snapbinbeer-primary);
  border-bottom: 1px solid var(--snapbinbeer-primary);
}

.faq-snapgin h3 {
  color: var(--snapgin-primary);
  border-bottom: 1px solid var(--snapgin-primary);
}

.faq-snapchuhi h3 {
  color: var(--snapchuhi-primary);
  border-bottom: 1px solid var(--snapchuhi-primary);
}

.faq-snapcanjuice h3 {
  color: var(--snapcanjuice-primary);
  border-bottom: 1px solid var(--snapcanjuice-primary);
}

.faq h4 {
  color: rgb(255, 255, 255);
  background-color: var(--main-color);
  background-image: url(/img/ribon.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  font-size: 1.4em;
  font-weight: bold;
  margin: 30px 0 15px 0;
  padding: 15px 15px 15px 30px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.btn-base-s {
  color: var(--main-color);
  border: 2px solid color-mix(in srgb, var(--main-color) 80%, transparent);
}

.scene-snapwine .messe_title {
  background-color: rgba(210, 63, 69, 0.9);
}

.scene-snapwine .massegebox .message {
  color: rgba(210, 63, 69, 0.9);
}

.scene-snapchampagne .messe_title {
  background-color: rgba(170, 154, 1, 0.8);
}

.scene-snapchampagne .massegebox .message {
  color: var(--snapchampagne-primary);
}

.scene-snapbottle .messe_title {
  background-color: rgba(58, 90, 152, 0.8);
}

.scene-snapbottle .massegebox .message {
  color: rgba(58, 90, 152, 0.8);
}

.scene-snapwhisky .messe_title {
  background-color: rgba(127, 79, 0, 0.8);
}

.scene-snapwhisky .massegebox .message {
  color: rgba(127, 79, 0, 0.8);
}

.scene-snapsake .messe_title {
  background-color: rgba(57, 168, 105, 0.8);
}

.scene-snapsake .massegebox .message {
  color: rgba(57, 168, 105, 0.8);
}

.scene-snapume .messe_title {
  background-color: rgba(209, 120, 3, 0.8);
}

.scene-snapume .massegebox .message {
  color: rgba(209, 120, 3, 0.8);
}

.scene-snapbeer .messe_title {
  background-color: rgb(218, 183, 0);
}

.scene-snapbeer .massegebox .message {
  color: rgb(218, 183, 0);
}

.scene-snapnonalc .messe_title {
  background-color: var(--snapnonalc-primary);
}

.scene-snapnonalc .massegebox .message {
  color: rgba(218, 101, 138, 0.8);
}

.scene-snapcanbeer .messe_title {
  background-color: var(--snapcanbeer-primary);
}

.scene-snapcanbeer .massegebox .message {
  color: var(--snapcanbeer-primary);
}

.scene-snapjuice .messe_title {
  background-color: var(--snapjuice-primary);
}

.scene-snapjuice .massegebox .message {
  color: rgba(134, 183, 80, 0.8);
}

.scene-snapbinbeer .messe_title {
  background-color: var(--snapbinbeer-primary);
}

.scene-snapbinbeer .massegebox .message {
  color: rgba(155, 170, 188, 0.8);
}

.scene-snapgin .messe_title {
  background-color: var(--snapgin-primary);
}

.scene-snapgin .massegebox .message {
  color: rgba(130, 185, 180, 0.8);
}

.scene-snapchuhi .messe_title {
  background-color: var(--snapchuhi-primary);
}

.scene-snapchuhi .massegebox .message {
  color: rgb(173, 180, 0);
}

.messe_title {
  background-color: var(--main-color);
}

.scene-snapcanjuice .massegebox .message {
  color: color-mix(in srgb, var(--main-color) 80%, transparent);
}

/* scene-box */
.scene-box {
  margin-top: 25px;
  margin-bottom: 30px;
}

.scene-box img {
  width: 190px;
  max-width: 100%;
  margin: 15px auto 10px auto;
  border: 1px solid #ddd;
}

.scene-box p {
  font-size: 0.9em;
  line-height: 1.6em;
  color: #888;
}

.scene-box .caption {
  font-size: 0.7em;
}

.info {
  color: var(--main-color);
}

.scene h3 {
  background-color: 1px dotted color-mix(in srgb, var(--main-color) 80%, transparent);
}

.scene h4 {
  color: var(--main-color);
  border-bottom: 1px dotted color-mix(in srgb, var(--main-color) 60%, transparent);
}

.staffblog {
  text-align: center;
  background-color: #222;
  /* background-image: url(/img/dark_wood.png); */
  background-repeat: repeat;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  margin-bottom: 20px;
}

.board {
  font-weight: bold;
}

.board i {
  font-size: 2em;
  opacity: 0.8;
}

.milliard {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 10px;
  line-height: 32px;
  background-color: #fff;
}

#searchform {
  text-align: center;
}

.prev {
  margin-bottom: 10px;
}

.next {
  text-align: right;
}

.navigation {
  margin-bottom: 20px;
}

.widget {
  line-height: 20px;
  margin-bottom: 20px;
}

.widget ul {
  margin: 0 auto;
  width: 90%;
}

.widget h3 {
  text-align: center;
  background-color: #222;
  /* background-image: url(/img/dark_wood.png); */
  background-repeat: repeat;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}

.widget ul li {
  border-bottom: 1px solid #ccc;
  padding: 8px;
}

.post {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 10px;
  line-height: 32px;
  background-color: #fff;
}

.post h1 {
  font-size: 22px;
  font-weight: bold;
}

.post img {
  border: 1px solid #eee;
  box-shadow: rgba(113, 135, 164, 0.298039) 0 0px 6px 1px;
  -webkit-box-shadow: rgba(113, 135, 164, 0.298039) 0px 0px 6px 1px;
  -moz-box-shadow: rgba(113, 135, 164, 0.298039) 0px 0px 6px 1px;
}

.post-content h2 {
  font-size: 20px;
  padding-left: 8px;
  border-left: 4px solid #605A4F;
  margin: 8px 0;
  color: #333;
}

.post-content h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.post-content-article img {
  margin: 10px 0;
  display: block;
  width: 250px;
}

.post-image {
  width: 100px;
  float: left;
  margin-right: 10px;
}

.post-header h2 {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 8px;
}

#posts {
  margin: 0 auto;
  width: 90%;
}

.go_blog_top .board .fa {
  font-size: 40px;
}

.go_blog_top:link {
  text-decoration: none;
}

.go_blog_top a:hover {
  opacity: 0.7;
}

.bg-line {
  background-color: rgba(0, 185, 1, 0.8) !important;
  background-size: auto 15px;
  background-position: left center;
  background-repeat: no-repeat;
}

/* btn */
.btn-r {
  display: block;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  width: 450px;
  max-width: 100%;
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 30px;
}

.btn-faq {
  color: var(--main-color);
  border: 2px solid var(--main-color);
  /* background-imageはHTMLに */
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: left 15px center;
  margin: 15px auto 30px;
  font-weight: bold;
  padding: 10px 10px 10px 30px;
}

/* title */
.brand h3 {
  font-size: 1.3em;
  line-height: 1.3em;
  font-weight: bold;
  padding: 0 0 10px 30px;
  position: relative;
  margin: 0px 0 20px 0;
}

.brand h3:before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: left bottom 14px;
  background-size: auto 40px;
  width: 20px;
  height: 55px;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.order-option-co {
  width: 100%;
  padding: 15px 15px 20px 15px;
  margin: 20px 0 30px 0;
  background-color: #fffed3;
}

.order-option-co dt {
  font-weight: bold;
  font-size: 1.2em;
  color: #fffed3;
  background-color: #333;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
}

.order-option-co dd {
  font-weight: bold;
  font-size: 1.3em;
  color: #de3636;
  text-align: center;
  padding-top: 20px;
  letter-spacing: 0.1px;
}

.order-option-co dd span {
  font-weight: normal;
  font-size: 0.6em;
  color: #000;
}

.title-option {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  margin-top: 2em;
  color: var(--main-color);
}

.btn-base-s {
  color: var(--main-color);
  border: 2px solid var(--main-color);
}

.btn-contact {
  background-color: var(--main-color);
  background-image: url(/img/icon-mail.png);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: left 15px center;
  margin: 0px auto 20px;
  font-weight: bold;
  padding: 15px 15px 15px 30px;
}

/* faq */
.accbox {
  padding: 0;
}

.accbox label {
  display: block;
  margin: 1.5px 0;
  padding: 10px 0 10px 45px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.accbox label:before {
  content: "Q";
  left: 10px;
  position: absolute;
  color: #555;
  background-color: #fff;
  border-radius: 100%;
  padding: 0 8px;
}

.accbox label:after {
  content: "\f0da";
  font-family: "FontAwesome";
  right: 15px;
  position: absolute;
  color: rgba(0, 0, 0, 0.3);
}

.accbox label:hover {
  background: rgba(0, 0, 0, 0.2);
}

.accbox input {
  display: none;
}

.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
}

.cssacc:checked + label + .accshow {
  height: auto;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 1;
  line-height: 1.6em;
  font-size: 0.9em;
}

.cssacc:checked + label:after {
  content: "\f0d7";
}

.accbox .pay-list li {
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.pay-list {
  text-align: center;
}

.pay-list li {
  background-color: #fff;
  text-align: center;
  width: 48%;
  margin: 4px 0;
  padding: 5px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  border-radius: 5px 5px 5px 5px/5px 5px 5px 5px;
}

.order-normal-co dt {
  font-size: 1.1em;
}

.order-option-co dt {
  font-size: 1em;
}

.block-delivery {
  width: 600px;
  max-width: 100%;
  color: #333333;
  background-color: var(--main-color);
  font-size: 16px;
  line-height: 1.7em;
}

.block-delivery h4 {
  border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
  color: #fff !important;
  font-size: 1.1em;
  font-weight: bold;
  padding: 15px !important;
  margin: 20px 0 0 0 !important;
  position: relative;
}

.block-delivery .box img {
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 1.5em !important;
}

.block-delivery .notes {
  font-size: 0.8em;
  line-height: 1.4em;
}

.block-delivery .notes-o {
  font-size: 0.8em;
  line-height: 1.4em;
}

.block-delivery .box {
  background-color: rgba(245, 230, 206, 0.8);
  padding: 20px 15px 15px 15px;
  margin-bottom: 40px;
}

.block-delivery .box img {
  width: 90%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  padding-bottom: 2em !important;
  text-align: center;
}

.block-delivery .box .mt-2 {
  margin-top: 2em !important;
}

.block-delivery .notes {
  width: 100%;
  font-size: 0.9em;
  position: relative;
  background-color: #dcd7d0;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.block-delivery .notes::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #dcd7d0;
}

.block-delivery .notes-o {
  width: 100%;
  font-size: 0.9em;
  position: relative;
  background-color: #dcd7d0;
  padding: 5px 0;
  margin: 5px 0 25px 0;
  text-align: center;
  font-weight: bold;
}

.order-normal-co {
  width: 100%;
  padding: 15px 15px 20px 15px;
  margin: 20px 0 60px 0;
  background-color: #eee;
}

.order-normal-co dt {
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  background-color: #333;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
}

.order-normal-co dd {
  font-weight: bold;
  font-size: 1.3em;
  color: #000;
  text-align: center;
  padding-top: 20px;
  letter-spacing: 0.1px;
}

.order-normal-co dd span {
  font-weight: normal;
  font-size: 0.6em;
}

.delivery h3 {
  color: rgb(255, 255, 255);
  background-color: var(--main-color);
  background-image: url(/img/ribon.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 15px 15px 15px 30px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
}

/* title */
.contact h3 {
  background-color: color-mix(in srgb, var(--main-color) 80%, transparent);
  border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px;
  margin: 10px 0 0 0;
  position: relative;
  text-align: center;
}

.brand h3 {
  color: var(--main-color);
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 80%, transparent);
}

.brand-snapwine h3:before {
  background-image: url(/img/snapwine/h3.png);
}

.brand-snapchampagne h3:before {
  background-image: url(/img/snapchampagne/h3.png);
}

.brand-snapbottle h3:before {
  background-image: url(/img/snapbottle/h3.png);
}

.brand-snapwhisky h3:before {
  background-image: url(/img/snapwhisky/h3.png);
}

.brand-snapsake h3:before {
  background-image: url(/img/snapsake/h3.png);
}

.brand-snapume h3:before {
  background-image: url(/img/snapume/h3.png);
}

.brand-snapbeer h3:before {
  background-image: url(/img/snapbeer/h3.png);
}

.brand-snapnonalc h3:before {
  background-image: url(/img/snapnonalc/h3.png);
}

.brand-snapcanbeer h3:before {
  background-image: url(/img/snapcanbeer/h3.png);
}

.brand-snapjuice h3:before {
  background-image: url(/img/snapjuice/h3.png);
}

.brand-snapbinbeer h3:before {
  background-image: url(/img/snapbinbeer/h3.png);
}

.brand-snapgin h3:before {
  background-image: url(/img/snapgin/h3.png);
}

.brand-snapchuhi h3:before {
  background-image: url(/img/snapchuhi/h3.png);
}

.brand-snapcanjuice h3:before {
  background-image: url(/img/snapcanjuice/h3.png);
}

.brand h4 {
  color: rgb(255, 255, 255);
  background-color: color-mix(in srgb, var(--main-color) 80%, transparent);
  background-image: url(/img/ribon.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  font-size: 1.4em;
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 15px 15px 15px 30px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.brand h5 {
  color: var(--main-color);
  background-color: color-mix(in srgb, var(--main-color) 10%, transparent);
  text-align: center;
  padding: 10px 15px;
  margin: 20px 0 0px 0;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.3em;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

@media screen and (max-width: 479px) {
  .brand h5 {
    text-align: left !important;
  }
}
.brand-snapcanbeer h6 {
  color: var(--snapcanbeer-primary);
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 40px;
  border-top: 1px solid var(--snapcanbeer-primary);
  border-bottom: 1px solid var(--snapcanbeer-primary);
}

.sample-canbeer {
  width: 100% !important;
}

/* menu */
.category {
  padding-top: 15px;
  margin-bottom: 30px;
}

.brand .menu {
  margin-bottom: 50px;
}

.brand .menu li {
  margin-bottom: 20px;
}

.brand .menu li a {
  background-color: color-mix(in srgb, var(--main-color) 80%, transparent);
  color: rgb(255, 255, 255);
  display: block;
  padding: 20px 30px 20px 60px;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.2em;
  position: relative;
}

.brand .menu li a:hover {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.brand .menu li a:before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  left: 12px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
}

.brand .menu li a:after {
  content: "";
  position: absolute;
  background-image: url(/img/arrow-light.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  right: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
}

.icon-red_wine a:before {
  background-image: url(/img/snapwine/icon-red_wine.png);
}

.icon-rose_wine a:before {
  background-image: url(/img/snapwine/icon-rose_wine.png);
}

.icon-white_wine a:before {
  background-image: url(/img/snapwine/icon-white_wine.png);
}

.icon-champagne a:before {
  background-image: url(/img/snapwine/icon-champagne.png);
}

.icon-sparklingwine a:before {
  background-image: url(/img/snapchampagne/icon-sparklingwine.png);
}

.icon-champagne a:before {
  background-image: url(/img/snapchampagne/icon-champagne.png);
}

.icon-imo a:before {
  background-image: url(/img/snapbottle/icon-imo.png);
}

.icon-mugi a:before {
  background-image: url(/img/snapbottle/icon-mugi.png);
}

.icon-canadian a:before {
  background-image: url(/img/snapwhisky/icon-canadian.png);
}

.icon-bourbon a:before {
  background-image: url(/img/snapwhisky/icon-bourbon.png);
}

.icon-japanese a:before {
  background-image: url(/img/snapwhisky/icon-japanese.png);
}

.icon-scotch a:before {
  background-image: url(/img/snapwhisky/icon-scotch.png);
}

.icon-purebrew a:before {
  background-image: url(/img/snapsake/icon-purebrew.png);
}

.icon-ginjo a:before {
  background-image: url(/img/snapsake/icon-ginjo.png);
}

.icon-daiginjo a:before {
  background-image: url(/img/snapsake/icon-daiginjo.png);
}

.icon-ume a:before {
  background-image: url(/img/snapume/icon-umeshu.png);
}

.icon-fruit a:before {
  background-image: url(/img/snapume/icon-anzushu.png);
}

.icon-doppo a:before {
  background-image: url(/img/snapbeer/icon-doppo.png);
}

.icon-red_nonalwine a:before {
  background-image: url(/img/snapnonalc/icon-red.png);
}

.icon-white_nonalwine a:before {
  background-image: url(/img/snapnonalc/icon-white.png);
}

.icon-nonalsparkling a:before {
  background-image: url(/img/snapnonalc/icon-nonalsparkling.png);
}

.icon-juice-small a:before {
  background-image: url(/img/snapjuice/icon-juice-small.png);
}

.icon-juice-big a:before {
  background-image: url(/img/snapjuice/icon-juice-big.png);
}

.icon-japanbeer a:before {
  background-image: url(/img/snapbinbeer/icon-japan.png);
}

.icon-foreignbeer a:before {
  background-image: url(/img/snapbinbeer/icon-foreign.png);
}

.icon-japangin a:before {
  background-image: url(/img/snapgin/icon-japan.png);
}

.icon-foreigngin a:before {
  background-image: url(/img/snapgin/icon-foreign.png);
}

.icon-japanchuhi a:before {
  background-image: url(/img/snapchuhi/icon-japan.png);
}

.icon-foreignchuhi a:before {
  background-image: url(/img/.faq-snapchuhi/icon-foreign.png);
}

/* dl */
.brand-box dl {
  width: 100%;
  max-width: 100%;
  margin: 0 0 50px 0;
}

.brand-box dl dt {
  background-color: #eee;
  display: block;
  padding: 4px 5px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

.brand-box dl dd {
  display: block;
  padding: 8px 0px 12px 0;
}

.brand-box img {
  width: 300px;
  max-width: 80%;
}

.btn-line-r {
  background-color: rgb(0, 185, 1);
  background-image: url(/img/icon-line.png);
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: left 15px center;
  margin: 15px auto 10px;
  padding: 15px 15px 15px 30px;
}

/* title */
.voice h3 {
  color: var(--main-color);
  border-bottom: 1px dotted color-mix(in srgb, var(--main-color) 60%, transparent);
  font-size: 1.1em;
  line-height: 1.3em;
  font-weight: bold;
  padding: 0 0 5px 24px;
  position: relative;
  margin: 0px 0 10px 0;
}

.voice h3:before {
  content: "\f004";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  font-weight: normal;
  left: 0;
  top: 0;
  opacity: 0.5;
}

.voice h4 {
  color: rgb(255, 255, 255);
  background-color: var(--main-color);
  background-image: url(/img/ribon.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  font-size: 1.4em;
  font-weight: bold;
  margin: 30px 0 15px 0;
  padding: 15px 15px 15px 30px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.voice .note img {
  max-width: 100%;
  width: 200px;
}

.voice .note .img-3 {
  max-width: 100%;
  width: 100% !important;
}