@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
nav ul, ol, ul li, ol li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
html {
  font-size: 62.5%;
}
#wine_contents {
  color: #333;
  font-size: 1.2rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, sans-serif;
}
#wine_contents .breadcrumbs_list {
  font-size: 1.4rem;
  line-height: 22px;
  color: #333;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
  color: #333;
  text-decoration: none;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.hidden {
  display: none;
}
img {
  width: 100%;
  vertical-align: bottom;
}
.sp_item_img {
  display: none;
}
#tab {
  font-size: 0;
  display: flex;
  justify-content: space-between;
}
#tab a {
  border-left: none;
}
#tab a {
  width: 24%;
  height: 50px;
  background-color: #fff9ee;
  text-align: center;
  line-height: 50px;
  list-style: none;
  font-size: 1.4rem;
  border: 1px solid #cac9c9;
}
#tab a:hover {
  cursor: pointer;
  opacity: .6;
  transition: opacity .3s;
  -webkit-transition: opacity .3s;
}
#tab .selected.title {
  position: relative;
  background: #fff9ee;
  color: #333;
}
/* 下三角 */
#tab .selected.title:after {
  border: 15px solid transparent;
  border-top-color: #3d0000;
  border-bottom-width: 0;
  bottom: -15px;
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 0;
  transform: translateX(-50%);
}
#tab .selected.title {
  color: #fff;
  background-color: #3d0000;
}

#top {
  max-width: 1000px;
}
#top img {
  width: 100%;
}
/*------------------------------
定期便とは
--------------------------------*/
#about_wrapper {
  margin-top: 15px;
  background-color: #000;
}
.about_wrapper_inner {
  margin: 0 auto;
  padding-bottom: 40px;
  width: 90%;
  text-align: center;
}
h1.title img {
  width: 100%;
}
.problem {
  margin-top: 30px;
  padding: 0;
  background-color: #fff;
}
.problem_box {
  margin: 0 auto;
}
.problem_item {
  display: inline-block;
  margin-bottom: 70px;
  width: 38.8%;
}
.problem_box ul li:nth-child(2n) {
  margin-left: 6.4%;
}
.problem_item .item_btn {
  margin: 0 auto;
  width: 90%;
  height: 45px;
  border-radius: 5px;
  text-align: center;
  font-size: 2.4rem;
  line-height: 45px;
  color: #fff;
  background-color: #000;
}
.problem_item .item_btn:hover {
  cursor: pointer;
  opacity: .8;
  transition: all .3s;
}

#wine_contents .recommend {
    border: none;
    padding: 0;
}
.recommend_item {
  margin-top: 30px;
  background-color: #fff;
}
.recommend_text {
  margin: 10px auto;
  width: 85%;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  text-align: left;
}

.recommend_item_btn a {
  display: inline-block;
  color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  background-color: #cc0000;
    margin-bottom: 30px;
padding: 0 10px 0;
  height: 60px;
  border-radius: 5px;
}
.recommend_item_btn:hover {
  cursor: pointer;
  opacity: .8;
  transition: all .3s;
}
.benefits {
  background-color: #ffedca;
}
.benefits_text {
  display: inline-block;
  margin: 0 auto;
  padding: 10px 0 20px;
  width: 85%;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  text-align: left;
}
.text_bold {
  font-weight: bold;
}
.voice {
  margin-top: 30px;
}

.course {
    margin-top: 30px;
}
.course_item {
  background-color: #fff;
  text-align: center;
  margin-top: 20px;
}
.course_item:first-child {
  margin-top: 0;
}
.course_item_inner {
  display: inline-block;
  width: 90%;
  padding: 40px 0 10px;
  font-size: 0;
}
.course_item_img {
  position: relative;
  display: inline-block;
  width: 55%;
  vertical-align: middle;
}
.course_type {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 35%;
}
.course_item_spec {
  display: inline-block;
  width: 45%;
  vertical-align: middle;
  text-align: left;
  padding-left: 15px;
}
.course_item_spec img {
  width: 90%;
}

.product_name {
  padding: 10px 0 5px 0;
text-align: left;
}
.product_name a {
  font-size: 24px;
  line-height: 30px;
  text-decoration: none;
  color: #333;
}
.product_name a:hover {
  color: #E20136;
}
.regular_price {
    padding: 10px 0;
  font-size: 20px;
 color: #333;
    text-align: left;
}
.excluding_tax {
  font-size: 45px;
  color: #d30100;
}
.course_item_btn a {
  display: inline-block;
  color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  background-color: #cc0000;
  max-width: 315px;
  width: 100%;
  height: 60px;
  border-radius: 5px;
}
.course_item_btn a:hover {
  cursor: pointer;
  opacity: .8;
  transition: all .3s;
}

#wine_contents .course_item_btn_b a {
  position: relative;
  display: inline-block;
  color: #cc0000;
  text-align: center;
  font-size: 18px;
  background-color: #fff;
  max-width: 315px;
  width: 100%;
  height: 60px;
  margin-top: 10px;
  padding: 12px 0 0 20px;
  border: 1px solid #cc0000;
  border-radius: 5px;
}

.course_item_btn_b a::before {
  content: "＞";
    position: absolute;
top: 21px;
left: 15px;
}

.course_item_btn_b:hover a  {
  cursor: pointer;
  color: #fff;
  background-color: #cc0000;
  transition: all .3s;
}



hr {
  margin: 10px auto 10px;
  width: 90%;
  height: 1px;
  background-color: #3d0000;
}
.course_text {
  display: inline-block;
  width: 90%;
  padding: 0 0 20px;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: left;
}
.text_color_red {
  color: #be3008;
}
.course_review {
  margin-top: 30px;
  background-color: #fff;
}
.course_banner {
  display: inline-block;
  margin: 20px 0 10px;
  max-width: 758px;
  width: 90%;
}
.course_banner:hover {
  opacity: .8;
}
.course_review p {
  display: inline-block;
  margin: 10px 0 10px;
  font-size: 1.8rem;
}
@media screen and (max-width : 640px) {
  body {
    width: 100%;
    overflow-x: hidden;
  }
    
 #tab li {
  font-size: 1.2rem;
}
  .pc_item_img {
    display: none;
  }
  .sp_item_img {
    display: block;
  }
.recommend_item_btn a {
  display: inline-block;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  background-color: #cc0000;
    margin-bottom: 20px;
padding: 0 10px 0;
  height: 40px;
  border-radius: 5px;
}
  .problem_item {
    display: inline-block;
    margin-bottom: 40px;
    width: 72%;
  }
  .problem_box ul li:nth-child(2n) {
    margin-left: 0;
  }
  .problem_item .item_btn {
    height: 40px;
    font-size: 2rem;
    line-height: 40px;
  }
  .recommend_text, .benefits_text {
    font-size: 1.2rem;
  }
  .course_item_inner {
    display: inline-block;
    width: 83%;
    padding: 50px 0 10px;
  }
  .course_item_img {
    width: 100%;
    vertical-align: bottom;
  }
  .course_type {
    position: absolute;
    top: -7%;
    left: -7%;
    width: 35%;
  }
  .course_item_spec {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    text-align: center;
  }
  .course_item_spec img {
    width: 100%;
  }
    
  .product_name {
  padding: 5px 0 5px 0;
text-align: center;
}
.product_name a {
  font-size: 20px;
  line-height: 24px;
  text-decoration: none;
  color: #333;
}
.regular_price {
    text-align: center;
}

 .course_item_btn a {
  display: inline-block;
  color: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 40px;
  background-color: #cc0000;
  max-width: 315px;
  width: 100%;
  height: 40px;
  border-radius: 5px;
}   
.course_item_btn a:hover {
  cursor: pointer;
  opacity: .8;
  transition: all .3s;
}

#wine_contents .course_item_btn_b a {
  position: relative;
  display: inline-block;
  color: #cc0000;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  max-width: 315px;
  width: 100%;
  height: 60px;
    line-height: 18px;
  margin-top: 10px;
  padding: 12px 0 0 20px;
  border: 1px solid #cc0000;
  border-radius: 5px;
}

.course_item_btn_b a::before {
  content: "＞";
    position: absolute;
top: 21px;
left: 15px;
}

.course_item_btn_b:hover a  {
  cursor: pointer;
  color: #fff;
  background-color: #cc0000;
  transition: all .3s;
}
    
    
    
    
    
  .course_text {
    display: inline-block;
    width: 90%;
    padding: 0 0 20px;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: left;
  }
  .course_review p {
    margin: 10px 0 10px;
    font-size: 1.4rem;
  }
}



/*------------------------------
おすすめ定期便一覧
--------------------------------*/
#content_wrapper {
  margin-top: 15px;
}

#wine_Contents {
width:100%;
max-width:1000px;
margin:auto auto;
font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"メイリオ",Osaka,"MS PGothic",arial,helvetica,sans-serif;
}.search-box_label

/* spec */
#wine_Contents_spec{
width:100%;
}

.wine_Contents_spec{
/*min-width:1000px;*/
margin:0 auto;
}

div#wine_Contents .wine_Contents_copy{
font-size:16px;
line-height:24px;
padding:20px;
}

div#wine_Contents .wine_Contents_text{
font-size:14px;
line-height:20px;
padding:20px;
}

div#wine_Contents .wine_Contents_text-center{
text-align:center;
}

div#wine_Contents .Important_Point_text{
font-size:16px;
line-height:24px;
padding:90px 20px 0 100px;
}

	
div#wine_Contents .Important_Point_mail{
position:relative;
	top:525px;
	left:40px;
}

div#wine_Contents .wine_Contents:after{
clear:both;
display:block;
}

div#wine_Contents a img:hover{
opacity: 0.90;
filter: alpha(opacity=90);
-ms-filter: "alpha(opacity=90)";
}

#wine_Contents .Breadcrumbs_list{
width:1200px;
margin:auto;
font-size:14px;
line-height:22px;
color:#333;
}

#wine_Contents .Breadcrumbs_list a{
font-size:14px;
line-height:22px;
color:#333;
}

#wine_Contents .Breadcrumbs_list a:hover{
color:#E20136;
}

#wine_Contents .wine_Contents a{
text-decoration:none;
}

#wine_Contents.wine_Contents a:hover{
color:#999;
transition: background-color 0.5s ease-in;
-webkit-transition: background-color 0.5s ease-in;
text-decoration:none;
}

#wine_Contents .text_red{color:#d30100;}
#wine_Contents .tgreen{color:#005f51;}
#wine_Contents .text_bold{font-weight:bold;}

div#wine_Contents .wine_Contents_back{
background-color:#fff;
}

div#wine_Contents .wine_Contents_h1 {
max-width: 1200px;
margin: 0 auto;
}

div#wine_Contents h2 {
text-align: center;
}
div#wine_Contents .wine_Contents_h2 {
font-size: 2.4rem;
width: 900px;
display: inline-block;
margin:40px 0 30px;
padding:15px 0 15px 0;
letter-spacing: 2px;
color:#666;
font-weight: normal;
letter-spacing: 0.05em;
}

div#wine_Contents .wine_Contents_h2_1 {
margin:0px;
font-size: 2.4rem;
display: inline-block;
position: relative;
padding:15px 0 15px 0;
letter-spacing: 2px;
color:#666;
font-weight: normal;
letter-spacing: 0.05em;
}

div#wine_Contents .wine_Contents_h3 {
font-size:36px;
text-align: center;
margin:0;
padding:10px 0;
margin:20px 0;
letter-spacing: 2px;
color:#fff;
background-color:#ff6600;
}

div#wine_Contents .teiki_ichiran_banner {
width: 900px;
margin: 10px 0;
}
div#wine_Contents .teiki_ichiran_box {
text-align: center;
}
div#wine_Contents .teiki_ichiran_box a .item_btn {
display: inline-block;
border: 1px solid #000;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
}
div#wine_Contents .teiki_ichiran_box a .item_btn:hover {
display: inline-block;
border: 1px solid #000;
margin-bottom: 10px;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
color: #fff;
background-color: #000;
 transition: all .3s;
}

div#wine_Contents .ranking_item {
position: relative;
}
div#wine_Contents .ranking_item::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #C18F2E; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
div#wine_Contents .ranking_item.num2::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #9EA7AA; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
div#wine_Contents .ranking_item.num3::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #8F5D3A; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
div#wine_Contents .ranking_item::after {
    content: "1";
    display: block;
    top: 5px;
    color: #fff; /* 文字色はここで変更 */
    left: 10px;
    position: absolute;
    z-index: 101;
    font-size: 2.0rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#wine_Contents .ranking_item.num2::after {
    content: "2";
    display: block;
    top: 5px;
    color: #fff; /* 文字色はここで変更 */
    left: 10px;
    position: absolute;
    z-index: 101;
    font-size: 2.0rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#wine_Contents .ranking_item.num3::after {
    content: "3";
    display: block;
    top: 5px;
    color: #fff; /* 文字色はここで変更 */
    left: 10px;
    position: absolute;
    z-index: 101;
    font-size: 2.0rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}








.search{background-color:#efefef;padding: 12px 0 10px 0;margin-bottom:40px;}
.search:after{content:"";clear:both; display:block;}
.search input{font-size:1.2em;}
.search-box_label {
display: inline-block;
width: 110px;
height: 50px;
font-weight: 500;
vertical-align: middle;
line-height: 50px;
font-size: 1.3em;
padding-left: 20px;
margin: auto;
border-right: #fff solid 1px;
margin-right:15px;
color:#555;
}

.is-hide {
display: none;
}

/* css checkbox01 */
.checkbox01-input{
display: none;
}
.checkbox01-parts{
font-size:13px;
line-height:18px;
padding-left: 20px;
position:relative;
margin-right: 20px;
}
.checkbox01-parts::before{
content: "";
display: block;
position: absolute;
top: 2px;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 50%;
background-color:#fff;
}
.checkbox01-input:checked + .checkbox01-parts{
color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
content: "";
display: block;
position: absolute;
top: -3px;
left: 5px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #009a9a;
border-right: 3px solid #009a9a;
}
.border{border-right:1px solid #fff;height:40px;}
.noborder{padding-top:0;}

#ranking{
width:100%;
}

.ranking {
display: flex;
max-width: 1000px;
min-width: 700px;
}

#ranking .photoBox {
width: 220px;
}

#ranking .textBox p {
width: 100%;
color:#333;
text-align:center;
}

#ranking .textBox p.item_text:hover{
color:#999;
}

.photobox {
display: block;
}

#ranking .indexItem {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px;
}

#ranking .indexItem:hover{
color:#999;
}

#ranking .item_text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
margin-top: 5px;
text-decoration: none;
width: 185px;
font-size: 13px;
line-height: 19px;
}

#ranking .textBox {
padding: 5px 5px;
width: 220px;
}

#ranking .price {
font-size: 12px;
line-height:20px;
color: #333;
padding-top: 15px;
}

#ranking .color-price {
font-size:22px;
color:#e20136;
}

#ranking .color-free {
font-size:12px;
color:#1da003;
}

#ranking .Per_one{
color:#e20136;
}

#ranking .line-through{
text-decoration:line-through;
}

#ranking ul.margin-left{
margin-left:136px;
}

.responsive5by6 {
padding-top:0;

}
.responsive {
display: block;
overflow: hidden;
position: relative;
height: 100%;
}
.photoimg.columnCount3 .photobox .photoBadge {
left: 8px;
top: 7px;
}

.photobox .photoBadge {
position: absolute;
}

.badge {
border-radius: 30px;
width: 30px;
font-size: 18px;
line-height: 30px;
}

.badge {
background-color: #e20136;
color: #ffffff;
}
.badge {
display: inline-block;
position: relative;
z-index: 1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
vertical-align: middle;
word-wrap: normal;
white-space: nowrap;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.badge_Recommended {
width: 30px;
line-height: 30px;
background-color: #e20136;
color: #ffffff;
font-size: 10px;
}

.photobox .photoimg {
width: 220px;
height: 220px;
}

/* btn */
div#wine_Contents .kwsk_btn a{
display:block;
width:500px;
height:50px;
font-size:20px;
line-height:47px;
color:#fff;
background-color:#cc0000;
border: 1px solid #cc0000;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align:center;
text-decoration:none;
transition: background-color 0.5s ease-in;
-webkit-transition: background-color 0.5s ease-in;
margin:2px auto;
}
div#wine_Contents .kwsk_btn a:hover{
color:#fff;
text-decoration:none;
opacity: .8;
transition: all .3s;
}

div#wine_Contents .kwsk_btn_margin{
margin:10px auto;
}

div#wine_Contents .Important_Point{
background-image: url(/excludes/wine/pg/hanpu_lp/common/hanpu_lp_06.jpg);
background-size:auto; width:1000px; height:752px;background-repeat:no-repeat;}

div#wine_Contents .wine_Contents_bottom{
padding-bottom:30px;
}

div#wine_Contents .background-color01{
background-image: url(/excludes/wine/pg/hanpu_lp/common/h_back.jpg);
background-size:auto;
}

div#wine_Contents .background-color02{
background-color:#fbf0e3;
}

div#wine_Contents .background-color03{
background-color:#f3d2ad;
}

/*------------------------------------------
PCの時に非表示
------------------------------------------*/
div#SP_item_Img,.SP_item_Img {
display:none;
}

/* clearfix */
.clearfix:after {
display: block;
content: ".";
clear: both;
height: 0;
visibility: hidden;
}
.clear{clear:both;}

@media all and (min-width: 0) and (max-width: 640px) {
/*------------------------------------------
SPの時に非表示
------------------------------------------*/
div#PC_item_Img,div#pop-box,#off,.PC_item_Img {
display:none;
}

div#SP_item_Img,.SP_item_Img{
display:block;
width:100%;
}

#wine_Contents {
width:100%;
overflow : hidden ;
font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"メイリオ",Osaka,"MS PGothic",arial,helvetica,sans-serif;
}
#wine_Contents .Breadcrumbs_list{
width:100%;
margin:auto;
font-size:12px;
line-height:20px;
color:#333;
}

#wine_Contents .Breadcrumbs_list a{
font-size:12px;
line-height:20px;
color:#333;
}

#wine_Contents .Breadcrumbs_list a:hover{
color:#E20136;
}

div#wine_Contents .wine_Contents_h1 {
top: -10px;
width: 100%;
margin: 0 auto;
}

div#wine_Contents .wine_Contents_h2 {
width: 100%;
font-size: 24px;
margin:30px 0 20px;
padding:10px 0 15px 0;
}
div#wine_Contents .wine_Contents_h2 img{
 width: 100%;       
}
div#wine_Contents .wine_Contents_h2_1 {
font-size: 24px;
padding:10px 0 10px 0;
}
    
div#wine_Contents .wine_Contents_h3 {
font-size:20px;
text-align: center;
margin:0;
padding:10px 0;
margin:10px 0;
letter-spacing: 2px;
color:#fff;
background-color:#ff6600;
font-weight:bold;
}
    
div#wine_Contents .teiki_ichiran_banner {
width: 100%;
margin: 10px 0;
}

div#wine_Contents .fl{
float:left;
}
div#wine_Contents .fr{
float:right;
}

#ranking{
width:100%;
}

.ranking {
display: flex;
max-width: 100%;
min-width: 700px;
}

#ranking .photoBox {
width: 100%;
}

#ranking .textBox p {
width: 90%;
color:#333;
text-align:center;
}

#ranking .textBox p.item_text:hover{
color:#999;
}

.photobox {
display: block;
}

#ranking .indexItem {
display: inline-block;
width: 49%;
vertical-align: top;
margin: 0;
}

#ranking .indexItem:hover{
color:#999;
}

#ranking .item_text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
margin-top: 5px;
text-decoration: none;
width: 185px;
font-size: 14px;
line-height: 15px
}

#ranking .textBox {
padding: 5px 5px;
width:100%;
}

#ranking .price {
font-size: 12px;
line-height:20px;
color: #333;
padding-top: 15px;
}

#ranking .color-price {
font-size:22px;
color:#e20136;
}

#ranking .color-free {
font-size:12px;
color:#1da003;
}

#ranking .Per_one{
color:#e20136;
}

div#wine_Contents .wine_Contents_copy{
font-size:16px;
line-height:24px;
padding:20px;
}

div#wine_Contents .wine_Contents_copy{
font-size:14px;
line-height:22px;
padding:20px;
}

div#wine_Contents .Important_Point_copy{
font-size:20px;
line-height:30px;
text-align:center;
font-weight:bold;
padding-top:30px;
}

div#wine_Contents .Important_Point_text{
font-size:14px;
line-height:22px;
padding:30px;
}

div#wine_Contents .tgreen{color:#005f51;}

/* spec */
#wine_Contents_spec{
width:100%;
}

.wine_Contents_spec{
max-width:640px;
min-width:320px;
margin:0 auto;
}

div#wine_Contents .wine_Contents_bottom{
padding-bottom:30px;
}

div#wine_Contents .background-color01{
background-image:none;
background-color:#ffffcc;
}

div#wine_Contents .background-color02{
background-color:#fbf0e3;
}

div#wine_Contents .background-color03{
background-color:#f3d2ad;
}


/* btn */
div#wine_Contents .kwsk_btn a{
display:block;
width:310px;
margin:5px auto;
padding:0 4px 0 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
font-size:16px;
line-height:47px;
color:#fff;
font-weight:bold;
background-color:#cc0000;
text-align:center;

}

div#wine_Contents .kwsk_btn a:hover{
color:#fff;
text-decoration:none;
background-color:#cc0000;
}

.search-Navi li{list-style:none;}


.search-Navi li a {
position: relative;
border-bottom: 1px solid #999;
background-color:#f2f2f2;
text-decoration:none;
color:#333333;
}

.search-Navi li a:after {
margin-top: -4px;
width: 8px;
height: 11px;
background-size: 8px 11px;
position: absolute;
top: 50%;
right: 15px;
z-index: 1000;
content: "";
}

.search-Navi li.search-list > a {
position: relative;
text-decoration:none;
}

.search-Navi li.search-list > a:after {
margin-top: -3px;
width: 12px;
height: 8px;
background: url(/excludes/wine/pg/hanpu_lp/common/arrowb.png) no-repeat left top;
background-size: 12px 8px;
position: absolute;
top: 50%;
right: 14px;
z-index: 1000;
content: "";
}

.search-Navi li.search-list > a.on:after {
background: url(/excludes/wine/pg/hanpu_lp/common/arrowb_on.png) no-repeat left top;
background-size: 12px 8px;

}

.search-Navi ul li a {
background-color: #ffffff;
text-decoration:none;
}


.search-Navi ul li:last-child {
border-bottom: none;
}

.search-Navi ul li a {
padding: 14px 0 13px 35px;
}

.search-Navi a {
padding: 14px 0 12px 20px;
color: #222222;
font-size: 18px;
display: block;
}

.search-Navi .close a{
background-color: #f2f2f2;
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0;
padding-left: 12px;
}

.search-Navi .close a span{
font-size:20px;
font-weight: 600;
}


ul.search-list01{display:none; border-bottom:1px solid #999; font-size:14px;}


.search{width:100%;display:block;margin:0px;padding:0; overflow:hidden;}
.search ul{display:block;}
.search ul li{list-style:none;margin:0; text-align:left;}

.search-box li {border-bottom:1px solid #CCC;padding:10px 0;}

.search:after{content:"";clear:both; display:block;}
.search input{font-size:0.8em;}
.search-box_label {
display: inline-block;
width:100%;
height: 40px;
font-weight: 500;
vertical-align: middle;
line-height: 40px;
font-size: 1.1em;
padding-left: 20px;
border-right: 0;
margin-right:15px;
color:#fff;
background-color:#999;
font-size:14px;
}

.is-hide {
display: none;
}

/* css checkbox01 */
.checkbox01-input{
display: none;
}
.checkbox01-parts{
position:relative;
padding-left: 20px;
margin-right: 20px;
margin-left:10px;
}
.checkbox01-parts::before{
content: "";
display: block;
position: absolute;
top: 2px;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #999;
border-radius: 50%;
background-color:#fff;
}
.checkbox01-input:checked + .checkbox01-parts{
color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
content: "";
display: block;
position: absolute;
top: -3px;
left: 5px;
width: 7px;
height: 14px;
transform: rotate(40deg);
border-bottom: 3px solid #009a9a;
border-right: 3px solid #009a9a;
}
#ranking ul.margin-left{
margin-left:0;
}
}




















/*------------------------------
ご利用ガイド
--------------------------------*/

#guide_wrapper {
margin-top: 15px;
text-align: left;
}

.guide_wrapper_inner {
 margin: 0 auto;
  width: 90%;
}

.contents_box {
max-width: 800px;
width: 100%;
margin-left: 20px;
margin-bottom: 40px;
}
.guide_wrapper_inner p,.guide_wrapper_innerr a,.guide_wrapper_inner span {
font-size:16px;
}
.guide_wrapper_inner h1 {
font-size: 2.4rem;
font-weight: bold;
background-color:#f7f7f7;
margin-bottom:10px;
padding:15px 0 15px 15px;
margin-bottom: 2%;
}

.guide_wrapper_inner .text_red{color:#d30100;}
.guide_wrapper_inner .text_blue{
    color:#014c9a;
    text-decoration: underline;
}
/*-----
目次
-------*/
.pagelist {
margin-bottom:3%;
margin-left:2%;
}
.pagelist li {
margin-bottom:15px;
}
.pagelist li:last-child {
margin-bottom:0;
}
.pagelist li a {
font-size: 16px;
position: relative;
padding-left: 15px;
color:#333;
}
.pagelist li a:before {
content: "";
display: block;
width: 5px;
height: 5px;
border-top: 1px solid #999;
border-right: 1px solid #999;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 15px;
margin-top: -5px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
background: none;
}
.pagelist li a:hover {
color:#E20136;
text-decoration:underline;
}
/*-----
本文
-------*/

.guide_wrapper_inner h2 {
font-size: 2rem;
color: #333;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.contents_box p {
line-height:1.5em;
margin-bottom:20px;
}

.guide_benefits{
    width: 520px;
    margin-bottom: 10px;
}
.guide_benefits_text {
    padding: 10px;
    border: 1px solid #ccc;
}

#faq dl {
width: 100%;
max-width: 800px;
border: 1px solid #ccc;
margin-bottom: 20px;
box-sizing: content-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 3%;
font-size: 16px;
line-height: 1.3em;

}
#faq dl dt {
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
}
#faq dl dd {
line-height: 1.5em;
}
#faq dl dd span.text_red {
color: #cc0000;
}
#faq dl dt span{
font-weight:bold;
color:#0F78E1;
font-size:25px;
margin-right:5px;
}

#faq dl dt strong{
font-size: 18px;
font-weight:bold;
color:#333;
}

#faq dl dd span.a_txt{
font-weight:bold;
color:#cc0000;
font-size:25px;
margin-right:5px;
}

.free_tel {
    margin: 10px 0 0;
    text-align: center;
}
.free_tel img {
    width: 50%;
}



@media screen and (max-width:640px) {
/* 
★スマホ用CSS 
*/
#guide_wrapper {
width : 100%;
}
.guide_wrapper_inner h1 {
font-size:20px;
margin-bottom: 10px;
padding:10px;
margin-bottom: 5%;
}    
/*-----
目次
-------*/    
.pageList li a {
font-size: 14px;
}
   
.pagelist {
margin-bottom:10%;
    }

.guide_wrapper_inner h2 {
font-size: 16px;
margin-bottom: 5px;
padding-bottom: 5px;
}
/*-----
本文
-------*/
.contents_box {
width: 100%;
margin-left: 0;
margin-bottom: 10%;
}
.contents_box  p, .contents_box a, .contents_box span {
font-size: 14px;
}
    
.guide_benefits{
    width: 100%;
}

#faq dl {
margin-bottom:3%;

}

#faq dl dd {
line-height: 1.5em;
}
#faq dl dd span.text_red {
color: #cc0000;
}
#faq dl dt span{
font-weight:bold;
color:#0F78E1;
font-size:25px;
margin-right:5px;
}
#faq dl dt span.domain {
display: inline-block;
padding: 5px 5px;
border: 2px solid #333;
margin: 10px 0;
}

#faq dl dt strong{
font-size: 18px;
font-weight:bold;
color:#333;
line-height:1.3em;
}

#faq dl dd span.a_txt{
font-weight:bold;
color:#cc0000;
font-size:25px;
margin-right:5px;
}
    
.free_tel img {
    width: 70%;
}

}
