@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
.clearfix:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.clearfix{ display: inline-block; }
/* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }
/* ---------- 初期 ---------- */
.no0 { display: none !important;}
body { letter-spacing: 0.01em; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%;}
img { max-width: 100%;}
a { text-decoration: none;}
strong { font-weight: bold;}
/* ---------- /共通部分 ---------- */
#jougetyuou { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto;}
#kadomaru { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
#resbtn { -webkit-appearance: none;}
#gurade { background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);
background: linear-gradient(to 方向, 開始色, 終了色); }
.ancr { position: relative; transition: 0.5s;}
.anca { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; cursor: pointer;}
.ancr:hover { opacity: 0.75; transition: 0.5s; cursor: pointer;}
/* ---------- /参考タグ部分 ---------- */
::placeholder {
color: #1c3567;
}
/* PC */
@media screen and (min-width: 769px) {
.wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
html { width: 100%; overflow-x: hidden;}
body { width: 750px; margin: 0 auto; display: block;}
img { width: 100%;}
header { position: absolute; left: 0; top: 24px; width: 100%;}
header .header_logo { width: 138px;}
header .header_logo img {}
header .header_inner { width: 674px; margin: 0 auto; position: relative;}
.toppage { background: url("images/nav_bg.png") no-repeat center; background-size: cover;}
#topnew { position: relative; z-index: 1;}
#topnew img { display: block;}
.topnew_lang { position: absolute; right: 160px; top: 20px;}
.topnew_lang .langs { margin: 0 auto 45px;
font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal; font-size: 0; text-align: center; width: 364px; display: block;}
.topnew_lang li { text-align: center; font-size: 34px; width: 19.2%; background: url("images/icon_lang_off.png") no-repeat center; background-size: contain; padding: 25px 0; display: inline-block; vertical-align: top;}
.topnew_lang li a { color: #666666; display: block;}
.topnew_lang li.on { background-image: url("images/icon_lang_on.png"); cursor: pointer;}
.topnew_lang li:hover { background-image: url("images/icon_lang_on.png");}
.topnew_lang li.on a { color: #fff;}
.topnew_lang li:hover a { color: #fff;}
.topnew_lang .langs li:nth-child(1) { margin-top: 45px;}
.topnew_lang .langs li:nth-child(3) { margin-top: 45px;}
.topnew_lang .langs li:nth-child(5) { margin-top: 45px;}
.top_logo_new { width: 121px; position: absolute; left: 44px; top: 33px;}
.top_logo_new img { width: 100%; height: auto;}
#sec01 { background: url("images/sec01_bg.png") no-repeat center top; background-size: cover; padding-bottom: 90px; padding-top: 208px;}
#sec01 .langs { margin: 0 auto 45px;
font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal; display: block !important; font-size: 0; text-align: center;}
#sec01 .langs li { text-align: center; font-size: 34px; width: 90px; background: url("images/icon_lang_off.png") no-repeat center; background-size: contain; padding: 25px 0; display: inline-block; margin: 0 19px;}
#sec01 .langs li a { color: #666666;}
#sec01 .langs li.on { background-image: url("images/icon_lang_on.png"); cursor: pointer;}
#sec01 .langs li:hover { background-image: url("images/icon_lang_on.png");}
#sec01 .langs li.on a { color: #fff;}
#sec01 .langs li:hover a { color: #fff;}
#sec01 .sec01_slider { width: 646px; margin: 0 auto; padding-top: 32px;}
#sec01 .sec01_slider .sec01_slider_img { height: 646px; background-position: center; background-size: contain; background-repeat: no-repeat;}
#sec01 .slide-dots { text-align: center; font-size: 0; margin-top: 15px;}
#sec01 .slide-dots li { display: inline-block; font-size: 0; margin: 0 7px;}
#sec01 .slide-dots li button { -webkit-appearance: none; width: 13px; height: 13px; background: url("images/icon_circle_02.png") no-repeat center; background-size: contain; border: none; font-size: 0;}
#sec01 .slide-dots li.slick-active button { background-image: url("images/icon_circle_01.png");}
#sec02 { background: url("images/bg_01.png") no-repeat center top; background-size: cover; color: #fff; padding: 58px 0 215px; position: relative;}
#sec02 .sec02_inner { width: 86.6%; margin: 0 auto;}
#sec02 .sec02_ttl { font-size: 40px; line-height: 1.5em; font-weight: 500; margin-bottom: 20px;}
#sec02 .sec02_txt { width: 100%; margin-bottom: 50px;}
#sec02 .sec02_txt .sec02_txtin { line-height: 1.8em; font-size: 26px; width: 65%;}
#sec02 .sec02_txt .sec02_price { font-size: 51px; font-weight: 700; width: 35%; text-align: right;}
#sec02 .sec02_detail {}
#sec02 .sec02_detail dl { width: 49%; float: left; margin-right: 2%; margin-bottom: 30px;}
#sec02 .sec02_detail dl:nth-child(2n) { margin-right: 0;}
#sec02 .sec02_detail dt { font-size: 20px; margin-left: 40px;}
#sec02 .sec02_detail dd { text-align: center; background: url("images/cat_ttl_bg.png") no-repeat center; background-size: contain; font-size: 23px; padding: 22px 0;}
#sec02 .sec02_detail dd span { position: relative; right: -17px;}
#sec02 .sec02_detail dd span a { color: #fff;}
#sec02 .sec02_graph { padding-top: 50px; position: relative; padding-bottom: 70px;}
.sec02_graph_img { position: relative;}
.sec02_graph_img img { display: block; width: 100%; height: auto;}
.sec02_graph_img span { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; width: 40px;}
#sec02 .sec02_graph .sec02_graph_icon_01 { width: 112px; position: absolute; left: -20px; top: -10px;}
#sec02 .sec02_graph .sec02_graph_icon_02 { width: 202px; position: absolute; right: -10px; bottom: 0;}
#sec02 .sec02_info {}
#sec02 .sec02_info table { text-align: left; font-size: 26px; font-weight: 500; width: 100%; color: #fff;}
#sec02 .sec02_info table th { border-bottom: dotted 2px #9c9100; padding: 18px 9px; line-height: 1.5em; width: 35%;}
#sec02 .sec02_info table td { border-bottom: dotted 2px #9c9100; padding: 18px 9px; line-height: 1.5em; width: 65%;}
#sec02 .sec02_info table .w100 { width: 100%;}
#sec02 .sec02_info table a { color: #fff; text-decoration: underline;}
#sec02::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; background: url("images/bg_02.png") no-repeat center; background-size: 100%;}
#sec03 { padding: 40px 0; position: relative; text-align: center;}
#sec03 .sec03_ttl { text-align: center; font-size: 32px; font-weight: 500; color: #1c3567; background: url("images/strong_ttl_bg.png") no-repeat center; background-size: 270px; padding: 20px 0 22px; margin-bottom: 35px;}
#sec03 .sec03_txt { text-align: center; font-size: 28px; color: #1c3567; font-weight: 500; margin: 30px 0;}
#sec03 ul { text-align: left; display: inline-block; width: 592px; font-size: 0; position: relative; z-index: 2;}
#sec03 ul li { display: inline-block; font-size: 28px; margin-right: 15px; margin-bottom: 15px;}
#sec03 ul li a { color: #1c3567; display: inline-block; border: solid 2px #1c3567; box-sizing: border-box; padding: 7px 15px 10px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; line-height: 1.2em;}
#sec03 .sec03_img_01 { position: absolute; width: 199px; left: 5px; top: 5px; z-index: 1;}
#sec03 .sec03_img_02 { position: absolute; width: 196px; right: 0; bottom: 0; z-index: 1;}
.top_head { text-align: right; width: 662px; margin: 0 auto 220px; padding-top: 50px;}
.top_headin { width: 398px; display: inline-block;}
.lang_top { background: #495d85; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; font-size: 0;}
.lang_top li { width: 20%; text-align: center; font-size: 30px; display: inline-block; padding: 3px 0;}
.lang_top li a { color: #cccccc;}
.lang_top li.active { background: #fff; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; font-weight: bold; color: #1c3567;}
.top_logo { width: 289px; margin: 0 auto 200px;}
.top_foot { margin-top: 180px;}
.toggle_btn {
display: block;
position: absolute;
width: 126px; height: 125px;
background: url("images/icon_nav_off.png") no-repeat top center; background-size: contain;
right: -15px; top: -25px;
transition: all .5s;
z-index: 9999;
}
.toggle_btn.toggle_btntop { position: relative; background: none; width: 367px; margin: 0 auto; height: 160px; right: 0; top: 0; transition: all 0s !important;}
.open.toggle_btn.toggle_btntop {
display: block;
position: absolute;
width: 126px; height: 125px;
background: url("images/icon_nav_on.png") no-repeat top center; background-size: contain;
right: 15px; top: 0;
transition: all 0s !important;
z-index: 9999;
}
.open.toggle_btn.toggle_btntop img { display: none;}
.open .toggle_btn { background-image: url("images/icon_nav_on.png");}
/*============
#mask
=============*/
#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block; transition: all .5s;
position: absolute; top: 0; right: 0; width: 100%; height: 100vh; z-index: 20;
}
nav {
display: block;
position: absolute;
top: -35px;
right: -800px;
bottom: 0;
width: 750px; background: url("images/nav_bg.png") no-repeat center; background-size: cover;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
opacity: 0; text-align: center; height: 100vh; box-sizing: border-box; padding-bottom: 50px;
}
.open nav {
opacity: 1; z-index: 22; right: -37px;
}
.navArea_inner { padding-top: 85px; width: 645px; margin: 0 auto; color: #fff;}
.acd-check{
display: none;
}
.acd-label{
display: block;
}
.acd-content{
height: 0;
opacity: 0;
padding: 0;
transition: .5s;
visibility: hidden; background: #FFF;
}
.acd-check:checked + .acd-label + .acd-content{
opacity: 1; height: auto;
visibility: visible;
}
nav .acd-label { font-size: 24px; text-align: center; border-top: solid 1px #fff; padding: 30px 0; position: relative;}
nav .acd-label.acd-label-first { border-bottom: solid 1px #fff;}
nav .acd-label::before { position: absolute; right: 20px; top: 30px; content: '＋'; font-size: 28px; font-weight: bold;}
nav .acd-check:checked + .acd-label::before { content: 'ー';}
.navArea_inner .navArea_ttl { text-align: left; font-size: 50px; font-weight: 700; background: url("images/icon_sake.png") no-repeat left top; padding: 1px 0 3px 60px; background-size: contain; margin-left: 35px;}
.navArea_inner .navArea_search { width: 562px; margin: 0 auto; text-align: left;}
.navArea_inner h3 { font-size: 32px; background: url("images/nav_ttl_bg.png") no-repeat center; padding: 17px 0; background-size: 380px; margin: 80px 0 35px; text-align: center;}
.navArea_inner .navArea_search .navArea_search_txt { font-size: 28px; font-weight: 500; margin-bottom: 22px; margin-left: 10px;}
.navArea_inner .navArea_search .navArea_search_input { position: relative;}
.navArea_inner .navArea_search .navArea_search_input input[type="text"] { border: solid 1px #fff; background: #fff; padding: 10px 65px 10px 30px; box-sizing: border-box; font-size: 28px; width: 100%; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; height: 59px;}
.navArea_inner .navArea_search .navArea_search_input input[type="submit"] { position: absolute; width: 105px; height: 50px; background: url("images/icon_search.png") no-repeat center #122652; background-size: 30px; font-size: 0; -webkit-appearance: none; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; right: 3px; top: 5px; border: none;}
.navArea_inner .navArea_cat_txt { font-size: 28px; font-weight: 500; margin-bottom: 33px;}
.navArea_inner ul { font-size: 0; display: inline-block; text-align: left; padding: 30px 0; width: 603px;}
.navArea_inner ul li { position: relative; display: inline-block; font-size: 28px; width: 49%; margin: 4px 0;}
.navArea_inner ul li:nth-child(2n) { right: -2%;}
.navArea_inner ul li a { color: #fff;}
.navArea_inner ul li input[type="radio"] { display: none;}
.navArea_inner ul li label { display: inline-block; vertical-align: top; width: 100%; font-size: 18px; color: #4A4A4A; background: #E5E5E5; text-align: left; box-sizing: border-box; padding: 16px 16px 16px 55px; position: relative;}
.navArea_inner ul li label::before { display: block; width: 26px; height: 26px; background: url("images/icon_circle_05.png") no-repeat center; background-size: contain; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); content: '';}
.navArea_inner ul li input:checked + label { background-color: #1C3567; color: #fff;}
.navArea_inner ul li input:checked + label::before { background-image: url("images/icon_circle_04_on.png");}
#list { background: url("images/list_bg.png") repeat-y center top; background-size: 100%; text-align: center;}
#list .list_ttl { width: 630px; margin: 0 auto 80px;}
#list .list_ttl .list_ttl_txt { text-align: left; color: #1c3567; margin-bottom: 20px; font-size: 26px; font-weight: 500;}
#list .list_ttl .list_ttl_ttl { font-size: 28px; text-align: center; color: #1c3567; padding: 1px 0; border-bottom: solid 2px #1c3567; border-top: solid 2px #1c3567; font-weight: bold;}
#list .list_ttl .list_ttl_ttl span { display: block; padding: 15px 0; border-bottom: solid 1px #1c3567; border-top: solid 1px #1c3567;}
#list .product_lists { font-size: 0; width: 640px; margin: 0 auto;}
#list .product_lists .product_box { width: 293px; margin: 0 0 75px; float: left; margin-right: 42px;}
#list .product_lists .product_box:nth-child(2n) { margin-right: 0; position: relative; right: -10px;}
#list .product_lists .product_box .product_box_img { height: 293px; background-position: center; background-size: contain; background-repeat: no-repeat;}
#list .product_lists .product_box .product_box_txt { text-align: left; padding-top: 10px;}
#list .product_lists .product_box .product_box_txt h3 { font-size: 28px; line-height: 1.6em; margin-bottom: 10px;}
#list .product_lists .product_box .product_box_txt .price { font-size: 26px;}
footer img { width: 100%; height: auto; display: block;}
.search_result { border-bottom: solid 3px #1c3567; border-top: solid 3px #1c3567; padding: 2px 0;}
.search_result .search_result_inner { border-bottom: solid 1px #1c3567; border-top: solid 1px #1c3567; padding: 26px 0;}
.search_result ul { text-align: left; width: 90%; margin: 0 auto;}
.search_result ul li { position: relative; background: #fff; border: solid 1px #1c3567; color: #1c3567; padding: 8px 53px 8px 15px; font-size: 28px; display: inline-block; vertical-align: top; margin: 10px 27px 10px 0;}
.search_result ul li span { font-size: 13px; position: absolute; right: 10px; top: 15px;}
.navi-area { font-size: 0; font-weight: bold;}
.navi-area span { display: inline-block; vertical-align: middle; margin: 0 0 5px; color: #1c3567; font-size: 17px; padding: 8px 15px 6px;}
.navi-area a { display: inline-block; vertical-align: middle; margin: 0 0 5px; color: #1c3567; font-size: 17px; padding: 8px 15px 6px;}
.navi-area .current { color: #fff; background: url("images/icon_pager.png") no-repeat center; background-size: contain;}
.top_ttlarea { background: url("images/bg_new_01.png") no-repeat center top; background-size: cover; padding: 63px 0 5px;}
.top_ttlarea .top_ttlarea_ttl { margin: 0 auto; text-align: center; font-size: 34px; font-weight: bold; padding: 22px 0 25px; background: url("images/rank_ttl_bg2.png") no-repeat center top; background-size: contain; margin-bottom: 43px; color: #1C3567; width: 670px;}
.top_ttlarea span { display: inline-block; padding: 10px 0 10px 80px; background: url("images/icon_search_02.png") no-repeat; background-size: 44px; background-position: 0 0;}
.top_rank { background: url("images/toprank_bg.png") no-repeat left top; background-size: cover; padding: 40px 0; color: #fff;}
.top_rank .top_rank_ttl { text-align: center; font-size: 34px; font-weight: bold; padding: 30px 0 25px; background: url("images/rank_ttl_bg.png") no-repeat center; background-size: contain; margin-bottom: 43px;}
.top_rank .top_rank_boxes { display:block;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow: auto;
white-space: nowrap; width: 710px; margin-left: 40px; padding-bottom: 45px; padding-left: 10px; box-sizing: border-box;}
.top_rank .top_rank_box { display: inline-block; width: 200px; margin-right: 36px; overflow-wrap: break-word; word-wrap: break-word; white-space: normal; vertical-align: top;}
.top_rank .top_rank_box:nth-child(1) .top_rank_boximg::before { position: absolute; content: ''; width: 50px; height: 100px; background: url("images/icon_rank_1.png") no-repeat center; background-size: contain; left: -10px; top: -35px;}
.top_rank .top_rank_box:nth-child(2) .top_rank_boximg::before { position: absolute; content: ''; width: 50px; height: 100px; background: url("images/icon_rank_2.png") no-repeat center; background-size: contain; left: -10px; top: -35px;}
.top_rank .top_rank_box:nth-child(3) .top_rank_boximg::before { position: absolute; content: ''; width: 50px; height: 100px; background: url("images/icon_rank_3.png") no-repeat center; background-size: contain; left: -10px; top: -35px;}
.top_rank .top_rank_box:last-child { margin-right: 40px;}
.top_rank .top_rank_box .top_rank_boximg { height: 200px; background-repeat: no-repeat; background-size: contain; background-position: center; position: relative;}
.top_rank .top_rank_box .top_rank_boxprice { text-align: right; line-height: 1.5em; font-size: 24px; font-weight: 500;}
.top_rank .top_rank_box .top_rank_boxname { font-size: 22px; line-height: 1.6em; overflow-wrap: break-word; word-wrap: break-word; white-space: normal;}
.top_rank ::-webkit-scrollbar-track { background: #BEBEBE;}
.top_rank ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.top_rank ::-webkit-scrollbar-thumb {
background: #1C3567;
border-radius: 100px;
border: solid 1px #BEBEBE;
}
/*タブ切り替え全体のスタイル*/
.top_search .tabs {
margin-top: 105px;
margin: 0 auto;
background: url("images/bg_new_01.png") repeat-y center top; background-size: 100%;
padding-bottom: 50px;
}
/*タブのスタイル*/
.top_search .tab_item {
width: calc(100%/3);
height: 105px;
background-color: #B1B1B1;
line-height: 105px;
font-size: 34px;
font-kerning: 500;
text-align: center;
color: #fff;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-sizing: border-box;
border-right: solid 1px #fff;
}
.top_search .tab_item:nth-child(6) { border: none;}
.top_search .tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
.top_search input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.top_search .tab_content {
display: none;
padding: 60px 20px 0;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#type:checked ~ #type_content,
#kodawari:checked ~ #kodawari_content,
#area:checked ~ #area_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.top_search .tabs input:checked + .tab_item {
background-color: #1C3567;
color: #fff;
}
.top_search .tab_content_description { background: url("images/bg_new_02_2.png") repeat-y center top #fff; background-size: 100%; padding: 54px 20px 60px;}
.top_search #type_content .tab_content_description { background-image: url("images/bg_new_02.png");}
/* モーダル全体(背景＋本体) */
.modal{
display: none;
position: fixed;
top: 0; left: 0;
height: 100vh;
width: 100%;
z-index: 10;
}
/* モーダル背景 */
.modal-bg {
position: absolute;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 10;
}
/* モーダル本体 */
.modal-content{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: scroll; /* はみ出た部分はスクロールさせる */
height: 60%;/* これが無いと「overflow:scroll」が利かない */
width: 750px;/* これが無いと「overflow:scroll」が利かない */
background: #fff;
padding: 0;
box-sizing: border-box;
z-index: 11;
}
.modal-content { text-align: center;}
.modal-content .modalbtnsno_ttl { background: #e0e2f2; padding: 18px 0; text-align: center; font-weight: bold;}
.modal-content .modalbtnsno_ttl span { display: inline-block; padding: 5px 0 5px 33px; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain; color: #1C3567; font-size: 27px;}
.modal-content .modal-contentin { font-size: 0; text-align: left; position: relative; right: -2%; padding: 40px;}
.iconclose { background: url("images/icon_close.png") no-repeat center !important; background-size: contain !important; width: 30px !important; height: 30px !important; position: absolute; right: 18px !important; top: 5px; padding: 0 !important; border: none !important;}
.modal-content .modal-contentin input[type="radio"] { display: none;}
.modal-content .modal-contentin label { display: inline-block; vertical-align: top; width: 48%; font-size: 18px; color: #4A4A4A; background: #E5E5E5; margin-bottom: 8px; text-align: left; box-sizing: border-box; padding: 16px 16px 16px 85px; position: relative; margin-right: 1%;}
.modal-content .modal-contentin label::before { display: block; width: 26px; height: 26px; background: url("images/icon_circle_05.png") no-repeat center; background-size: contain; position: absolute; left: 40px; top: 14px; content: '';}
.modal-content .modal-contentin input:checked + label { background-color: #1C3567; color: #fff;}
.modal-content .modal-contentin input:checked + label::before { background-image: url("images/icon_circle_04_on.png");}
.modal-content .js-modal-close { display: inline-block; color: #fff; text-decoration: none; font-size: 16px; margin-top: 20px; width: 200px; padding: 20px 0; background: #1C3567; border: solid 1px #1C3567; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;}
.top_search .tab_ttl { text-align: center; font-size: 36px; font-weight: 700; color: #1C3567; margin-bottom: 65px;}
.top_search .tab_ttl span { display: inline-block; padding: 5px 0 5px 70px; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain;}
.top_search .tab_subttl { text-align: center; font-size: 28px; border-bottom: solid 1px #1C3567; border-top: solid 1px #1C3567; color: #1C3567; padding: 15px 0; font-weight: 500; margin-bottom: 65px;}
.top_search .tab_subttl_new {
border-bottom: solid 2px #1C3567;
border-top: solid 2px #1C3567;
text-align: center;
font-weight: 500;
font-size: 30px;
padding: 35px 0 20px;
margin-bottom: 45px;
color: #1C3567;
position: relative;
}
.tab_subttl_new2 {
margin-top: 100px;
}
.top_search .tab_subttl_new .tab_subttl_new_step {
color: #fff;
font-size: 23px;
font-weight: 500;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #1C3567;
padding: 5px 40px 8px;
display: inline-block;
top: -20px;
left: 50%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
position: absolute;
}
.top_search .modalbtns { margin: 0 auto; margin-bottom: 20px; width: 98%; padding-bottom: 30px;}
.modalbtns_ttl { display: inline-block; padding: 5px 0 5px 33px; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain; color: #1C3567; font-size: 27px; margin-left: 38px; margin-bottom: 5px; margin-top: 40px;}
.top_search .modalbtns .modalbtns_ttl:first-child { margin-top: 0;}
.top_search .modalbtns a { width: 100%; display: block; border: solid 2px #9F9F9F; color: #727272; text-align: left; font-size: 30px; padding: 14px 40px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background: #E3E3E3; position: relative; box-sizing: border-box;}
.top_search .modalbtns.modalbtn a { width: 100%; text-align: left; padding: 14px 40px 14px 85px;}
.top_search .modalbtns a:hover { cursor: pointer;}
.top_search .modalbtns a::before { content: ''; width: 29px; height: 16px; background: url("images/icon_select_arr.png") no-repeat; background-size: contain; position: absolute; right: 30px; top: 24px;}
.top_search .modalbtns a.on { background-color: #fff; text-align: center; color: #1C3567;}
.top_search .type_txt { box-sizing: border-box; border: solid 2px #1C3567; padding: 2px; text-align: center; background: #fff; margin-bottom: 40px;}
.top_search .type_txtin { box-sizing: border-box; border: solid 1px #1C3567; font-size: 28px; line-height: 1.6em; color: #1C3567; padding: 34px 0; text-align: center;}
.top_search .type_map { height: 468px; background: url("images/top_search_bg_01.png") no-repeat center top; background-size: contain; position: relative;}
.top_search .type_map#mapen { background-image: url("images/top_search_bg_01_en.png");}
.top_search .type_map#mapkr { background-image: url("images/top_search_bg_01_kr.png");}
.top_search .type_map#mapch { background-image: url("images/top_search_bg_01_ch.png");}
.top_search .type_map#maptw { background-image: url("images/top_search_bg_01_tw.png");}
.top_search .type_map .type_map_inner { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; height: 334px; width: 521px; background: url("images/top_search_bg_02.png") no-repeat center; background-size: contain;}
.top_search .type_map .type_map_box input { display: none;}
.top_search .type_map .box01 { height: 50%; width: 50%; position: absolute; left: 0; top: 0;}
.top_search .type_map .box01 input:checked + label { background: rgba(128,184,136,0.29);}
.top_search .type_map .box02 { height: 50%; width: 50%; position: absolute; right: 0; top: 0;}
.top_search .type_map .box02 input:checked + label { background: rgba(198,157,148,0.29);}
.top_search .type_map .box03 { height: 50%; width: 50%; position: absolute; left: 0; bottom: 0;}
.top_search .type_map .box03 input:checked + label { background: rgba(201,146,187,0.29);}
.top_search .type_map .box04 { height: 50%; width: 50%; position: absolute; right: 0; bottom: 0;}
.top_search .type_map .box04 input:checked + label { background: rgba(198,182,145,0.29);}
.top_search .type_map label { display: block; width: 100%; height: 100%;}
.top_search .type_submit { text-align: center; padding-bottom: 30px; width: 505px; margin: 90px auto 0; position: relative;}
.top_search .type_submit input[type="submit"] { font-size: 34px; font-weight: 500; background: #1C3567; display: inline-block; padding: 20px 0; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; color: #fff; border: solid 1px #1C3567; width: 100%;}
.top_search .type_submit::before { content: ''; width: 40px; height: 45px; background: url("images/icon_search.png") no-repeat center; background-size: contain; position: absolute; right: 66px; top: 22px; display: block;}
.head_submit { text-align: center; padding-bottom: 30px; width: 505px; margin: 90px auto 0; position: relative;}
.head_submit input[type="submit"] { font-size: 34px; font-weight: 500; background: #fff; display: inline-block; padding: 20px 0; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; color: #1C3567; border: solid 1px #fff; width: 100%;}
.head_submit::before { content: ''; width: 40px; height: 45px; background: url("images/icon_search_02.png") no-repeat center; background-size: contain; position: absolute; right: 66px; top: 22px; display: block;}
.toggle_btn_undernew { background: url("images/footer_bg.png") no-repeat #1C3567; background-size: contain; background-position: 10% 96%; padding: 61px 0 157px; text-align: center;}
.toggle_btn_undernew .foot_logo { margin-bottom: 40px; text-align: center; width: 100%;}
.toggle_btn_undernew .foot_logo img { width: 155px; height: auto; display: inline-block;}
.toggle_btn_undernew .foot_link { margin-bottom: 46px;}
.toggle_btn_undernew .foot_link a { display: inline-block; font-size: 26px; color: #fff; padding-right: 36px; background: url("images/icon_hplink.png") no-repeat right center; background-size: 24px;}
.toggle_btn_undernew #copyright { font-size: 22px; color: #fff;}
.kodawari_lists { width: 600px; margin: 0 auto; font-size: 0; text-align: left;}
.kodawari_lists .kodawari_list { font-size: 25px; vertical-align: top; display: inline-block; margin-right: 9px; margin-bottom: 12px; margin-left: 9px;}
.kodawari_lists .kodawari_list input { display: none;}
.kodawari_lists .kodawari_list label { border: solid 1px #1C3567; color: #1C3567; padding: 17px 29px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; display: block; background: #fff;}
.kodawari_lists .kodawari_list input:checked + label { color: #fff; background: #1C3567;}
.kodawari_lists .kodawari_list {}
#area_content {}
#area_content h4 { font-size: 26px; padding-bottom: 7px; margin-bottom: 20px; border-bottom: solid 1px #1C3567; color: #1C3567; font-weight: 500; position: relative; margin-top: 50px;}
#area_content h4 span.lo { position: absolute; display: inline-block; right: 5px; top: -1px;
font-size: 23px;
color: #1C3567;
font-weight: 500;
}
#area_content h4 span input { display: none;}
#area_content h4 span label { display: block; padding: 1px 0 1px 25px; background: url("images/icon_shop_check.png") no-repeat;
background-size: 20px;
padding-left: 25px;
background-position: 0 95%;}
#area_content h4 span input:checked +label { background-image: url("images/icon_shop_check2.png");}
#area_content h4 span.lo { white-space: nowrap;}
#area_content .area_box { font-size: 0;}
#area_content .area_box_label { display: inline-block; vertical-align: top; width: 49%; font-size: 28px; margin-bottom: 4px;}
#area_content .area_box_label:nth-child(2n) { position: relative; right: -4px;}
#area_content .area_box_label input { display: none;}
#area_content .area_box_label label { display: block; box-sizing: border-box; border: solid 3px #1C3567; color: #1C3567; position: relative; padding: 18px 0; text-align: center; background-color: #fff;}
#area_content .area_box_label input:checked + label { background: #1C3567; color: #fff;}
#area_content .area_box_label input:checked + label::before { background-image: url("images/icon_arrow_02.png");}
#area_content .area_box_label input:disabled + label { background-color: #B1B1B1 !important; border-color: #B1B1B1; color: #fff !important;}
#area_content .area_box_label input:disabled + label::before { background-image: url("images/icon_arrow_02.png") !important;}
/* ターミナル追加 */
.tab_new_accesstag {
margin-top: 80px;
text-align: left;
}
.tab_new_accesstag .acd-label {
color: #fff;
font-weight: 500;
background: #9B7A51;
box-sizing: border-box;
padding: 30px 30px 30px 40px;
font-size: 28px;
position: relative;
text-align: left;
display: block;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.tab_new_accesstag .acd-label::before {
content: '';
width: 3px;
height: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 24px;
right: 48px;
}
.tab_new_accesstag .acd-check:checked + .acd-label::before {
display: none;
}
.tab_new_accesstag .acd-label::after {
content: '';
height: 3px;
width: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.tab_new_accesstag .acd-content {
padding: 0;
font-size: 0;
background: none;
}
.tab_new_accesstag .acd-check:checked + .acd-label + .acd-content {
padding: 30px 0 0;
}
.tab_new_accesstag .acd-content label {
font-size: 24px;
color: #9B7A51;
background: #fff;
box-sizing: border-box;
border: solid 1px #9B7A51;
background: #fff;
padding: 15px 30px 15px 45px;
display: inline-block;
margin-bottom: 15px;
margin-left: 15px;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
position: relative;
}
.tab_new_accesstag input:checked + .shoplabel {
color: #fff;
background: #9B7A51;
}
.tab_new_accesstag .acd-content label::before {
content: '#';
position: absolute;
left: 22px;
top: 15px;
}
.tab_new_accesstag .acd-content input[type="checkbox"] {
display: none;
}
.tab_new_access {
margin-bottom: 20px;
}
.tab_new_access .acd-label {
color: #fff;
font-weight: 500;
background: #1C3567;
box-sizing: border-box;
padding: 3px;
position: relative;
}
.tab_new_access .acd-label::before {
content: '';
width: 3px;
height: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 28px;
right: 48px;
}
.tab_new_access .acd-check:checked + .acd-label::before {
display: none;
}
.tab_new_access .acd-label::after {
content: '';
height: 3px;
width: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.tab_new_access .acd-label .txt {
border: solid 1px #fff;
box-sizing: border-box;
padding: 30px 30px 30px 170px;
font-size: 28px;
background-repeat: no-repeat;
background-size: 100px;
background-position: 30px 50%;
}
.tab_new_access .acd-label .txt.t1 {
background-image: url("images/icon_terminal_01.png");
}
.tab_new_access .acd-label .txt.t2 {
background-image: url("images/icon_terminal_02.png");
}
.tab_new_access .acd-label .txt.t3 {
background-image: url("images/icon_terminal_03.png");
}
.tab_new_access .acd-content {
padding: 0;
}
.tab_new_access .acd-check:checked + .acd-label + .acd-content {
padding: 30px 0 0;
border-bottom: dashed 3px #1C3567;
}
.tab_new_access .acd-content label.shoplabel {
background: #fff;
border: solid 1px #D9D9D9;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
font-size: 24px;
line-height: 1.6em;
color: #1C3567;
padding: 30px 20px 30px 26px;
display: block;
margin-bottom: 14px;
box-shadow: 1px 3px 6px 0 rgba(119, 108, 89, .22);
}
.tab_new_access .acd-content input[type="checkbox"] {
display: none;
}
.tab_new_access .acd-content input[type="checkbox"]:checked + label.shoplabel {
background: #1C3567;
color: #fff;
}
.tab_new_access .allcheck_txt {
text-align: right;
margin-bottom: 20px;
font-size: 23px;
color: #1C3567;
font-weight: 500;
}
.tab_new_access .allcheck_txt label {
display: inline-block;
background: url("images/icon_shop_check.png") no-repeat;
background-size: 20px;
padding-left: 25px;
background-position: 0 95%;
}
.tab_new_access .allcheck_txt input:checked + label {
background-image: url("images/icon_shop_check2.png");
}
.navArea_shop {}
.navArea_shop .acd-label {
text-align: left !important;
padding: 20px 0 !important;
}
.navArea_shop .acd-label .txt {
background-repeat: no-repeat;
background-size: contain;
background-position: 30px 50%;
padding: 10px 0 10px 170px;
}
.navArea_shop .acd-label .txt.t1 {
background-image: url("images/icon_terminal_01_sp.png");
}
.navArea_shop .acd-label .txt.t2 {
background-image: url("images/icon_terminal_02_sp.png");
}
.navArea_shop .acd-label .txt.t3 {
background-image: url("images/icon_terminal_03_sp.png");
}
.navArea_shop .acd-content {
background: none;
}
.navArea_shop .acd-content {
padding: 0;
}
.navArea_shop .acd-check:checked + .acd-label + .acd-content {
padding: 30px 0 0;
border-bottom: dashed 3px #1C3567;
}
.navArea_shop .acd-content label.shoplabel {
background: #fff;
border: solid 1px #D9D9D9;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
font-size: 24px;
line-height: 1.6em;
color: #1C3567;
padding: 30px 20px 30px 26px;
display: block;
margin-bottom: 14px;
box-shadow: 1px 3px 6px 0 rgba(119, 108, 89, .22);
text-align: left;
}
.navArea_shop .acd-content input[type="checkbox"] {
display: none;
}
.navArea_shop .acd-content input[type="checkbox"]:checked + label.shoplabel {
background: #1C3567;
color: #fff;
}
.navArea_shop .allcheck_txt {
text-align: right;
margin-bottom: 20px;
font-size: 23px;
color: #fff;
font-weight: 500;
}
.navArea_shop .allcheck_txt label {
display: inline-block;
background: url("images/icon_shop_check.png") no-repeat;
background-size: 20px;
padding-left: 25px;
background-position: 0 95%;
}
.navArea_shop .allcheck_txt input:checked + label {
background-image: url("images/icon_shop_check2.png");
}
.shopcat {
width: 646px;
margin: 0 auto;
font-size: 0;
}
.shopcat li {
width: 100px;
display: inline-block;
margin-right: 7px;
}
.single_shops {
margin-top: 23px;
}
.single_shops .single_shop {
margin-bottom: 60px;
}
.single_shops .single_shop:last-child {
margin-bottom: 0;
}
.single_shops .single_shop_ttl {
width: 110px;
margin-bottom: 10px;
}
.single_shops .single_shoplist {
font-size: 0;
margin-right: 10px;
}
.single_shops .single_shoplist li {
font-weight: 400;
display: inline-block;
border: solid 1px #fff;
padding: 8px 23px;
margin-bottom: 10px;
font-size: 24px;
}
.single_shops .single_shoplist li a {
text-decoration: none !important;
}
.archive_shop {
margin-bottom: 18px;
}
.archive_shop li {
width: 32%;
}
.archive_shop li .onimg { display: none !important;}
.archive_shop li .offimg { display: block !important;}
.archive_shop.t1 li:nth-child(1) .offimg { display: none !important;}
.archive_shop.t1 li:nth-child(1) .onimg { display: block !important;}
.archive_shop.t2 li:nth-child(2) .offimg { display: none !important;}
.archive_shop.t2 li:nth-child(2) .onimg { display: block !important;}
.archive_shop.t3 li:nth-child(3) .offimg { display: none !important;}
.archive_shop.t3 li:nth-child(3) .onimg { display: block !important;}
.single_shoptag {
background: rgba(155,122,81,0.16);
padding: 100px 50px 70px;
}
.single_shoptag .acd-label {
color: #fff;
font-weight: 500;
background: #9B7A51;
box-sizing: border-box;
padding: 30px 30px 30px 40px;
font-size: 28px;
position: relative;
text-align: left;
display: block;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.single_shoptag .acd-label::before {
content: '';
width: 3px;
height: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 24px;
right: 48px;
}
.single_shoptag .acd-check:checked + .acd-label::before {
display: none;
}
.single_shoptag .acd-label::after {
content: '';
height: 3px;
width: 40px;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.single_shoptag .acd-check:checked + .acd-label + .acd-content {
padding-top: 28px;
}
.single_shoptag .acd-content {
background: none !important;
}
.single_shoptag .acd-content ul {
font-size: 0;
}
.single_shoptag .acd-content ul li {
display: inline-block;
margin-bottom: 17px;
margin-right: 17px;
}
.single_shoptag .acd-content ul li a {
font-size: 24px;
color: #9B7A51;
background: #fff;
box-sizing: border-box;
border: solid 1px #9B7A51;
background: #fff;
padding: 15px 30px 15px 45px;
display: inline-block;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
position: relative;
}
.single_shoptag .acd-content ul li a::before {
content: '#';
position: absolute;
left: 22px;
top: 15px;
}
.single_shoptag .acd-content ul li a:hover {
background: #9B7A51;
color: #fff;
}
.single_shoptag {}
/* ターミナル追加 */
}
/* SP */
@media screen and (max-width: 768px) {
.wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
body {display: block;}
img { width: 100%;}
header { position: absolute; left: 0; top: 3.2vw; width: 100%;}
header .header_logo { width: 18.4vw;}
header .header_logo img {}
header .header_inner { width: 89.8vw; margin: 0 auto; position: relative;}
#sec01 { background: url("images/sec01_bg.png") no-repeat center top; background-size: cover; padding-bottom: 12vw; padding-top: 27.7vw;}
#sec01 .langs { margin: 0 auto 6vw;
font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal; display: block !important; font-size: 0; text-align: center;}
#sec01 .langs li { text-align: center; font-size: 4.5vw; width: 12vw; background: url("images/icon_lang_off.png") no-repeat center; background-size: contain; padding: 3.3vw 0; display: inline-block; margin: 0 2.5vw;}
#sec01 .langs li a { color: #666666;}
#sec01 .langs li.on { background-image: url("images/icon_lang_on.png"); cursor: pointer;}
#sec01 .langs li:hover { background-image: url("images/icon_lang_on.png");}
#sec01 .langs li.on a { color: #fff;}
#sec01 .langs li:hover a { color: #fff;}
#sec01 .sec01_slider { width: 86.1vw; margin: 0 auto; padding-top: 4.2vw;}
#sec01 .sec01_slider .sec01_slider_img { height: 86.1vw; background-position: center; background-size: contain; background-repeat: no-repeat;}
#sec01 .slide-dots { text-align: center; font-size: 0; margin-top: 2vw;}
#sec01 .slide-dots li { display: inline-block; font-size: 0; margin: 0 0.9vw;}
#sec01 .slide-dots li button { -webkit-appearance: none; width: 2vw; height: 2vw; background: url("images/icon_circle_02.png") no-repeat center; background-size: contain; border: none; font-size: 0;}
#sec01 .slide-dots li.slick-active button { background-image: url("images/icon_circle_01.png");}
#sec02 { background: url("images/bg_01.png") no-repeat center top; background-size: cover; color: #fff; padding: 7.73vw 0 28.6vw; position: relative;}
#sec02 .sec02_inner { width: 86.6%; margin: 0 auto;}
#sec02 .sec02_ttl { font-size: 5.33vw; line-height: 1.5em; font-weight: 500; margin-bottom: 2.6vw;}
#sec02 .sec02_txt { width: 100%; margin-bottom: 6.6vw;}
#sec02 .sec02_txt .sec02_txtin { line-height: 1.8em; font-size: 3.46vw; width: 65%;}
#sec02 .sec02_txt .sec02_price { font-size: 6.8vw; font-weight: 700; width: 35%; text-align: right;}
#sec02 .sec02_detail {}
#sec02 .sec02_detail dl { width: 49%; float: left; margin-right: 2%; margin-bottom: 4vw;}
#sec02 .sec02_detail dl:nth-child(2n) { margin-right: 0;}
#sec02 .sec02_detail dt { font-size: 3.2vw; margin-left: 5.3vw;}
#sec02 .sec02_detail dd { text-align: center; background: url("images/cat_ttl_bg.png") no-repeat center; background-size: contain; font-size: 3.72vw; padding: 2.9vw 0;}
#sec02 .sec02_detail dd span { position: relative; right: -2.3vw;}
#sec02 .sec02_detail dd span a { color: #fff;}
#sec02 .sec02_graph { padding-top: 6.6vw; position: relative; padding-bottom: 9.3vw;}
.sec02_graph_img { position: relative;}
.sec02_graph_img img { display: block; width: 100%; height: auto;}
.sec02_graph_img span { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; width: 5.33vw;}
#sec02 .sec02_graph .sec02_graph_icon_01 { width: 14.9vw; position: absolute; left: -2.6vw; top: -1.3vw;}
#sec02 .sec02_graph .sec02_graph_icon_02 { width: 26.9vw; position: absolute; right: -1.3vw; bottom: 0;}
#sec02 .sec02_info {}
#sec02 .sec02_info table { text-align: left; font-size: 3.46vw; font-weight: 500; width: 100%; color: #fff;}
#sec02 .sec02_info table th { border-bottom: dotted 2px #9c9100; padding: 2.4vw 1.2vw; line-height: 1.5em; width: 35%;}
#sec02 .sec02_info table td { border-bottom: dotted 2px #9c9100; padding: 2.4vw 1.2vw; line-height: 1.5em; width: 65%;}
#sec02 .sec02_info table .w100 { width: 100%;}
#sec02 .sec02_info table a { color: #fff; text-decoration: underline;}
#sec02::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 21.3vw; background: url("images/bg_02.png") no-repeat center; background-size: 100%;}
#sec03 { padding: 5.3vw 0; position: relative; text-align: center;}
#sec03 .sec03_ttl { text-align: center; font-size: 4.26vw; font-weight: 500; color: #1c3567; background: url("images/strong_ttl_bg.png") no-repeat center; background-size: 36vw; padding: 2.6vw 0 2.93vw; margin-bottom: 35px;}
#sec03 .sec03_txt { text-align: center; font-size: 3.73vw; color: #1c3567; font-weight: 500; margin: 2.6vw 0;}
#sec03 ul { text-align: left; display: inline-block; width: 78.9vw; font-size: 0; position: relative; z-index: 2;}
#sec03 ul li { display: inline-block; font-size: 3.73vw; margin-right: 2vw; margin-bottom: 2vw;}
#sec03 ul li a { color: #1c3567; display: inline-block; border: solid 2px #1c3567; box-sizing: border-box; padding: 1vw 2vw 1.3vw; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; line-height: 1.2em;}
#sec03 .sec03_img_01 { position: absolute; width: 26.5vw; left: 1vw; top: 1vw; z-index: 1;}
#sec03 .sec03_img_02 { position: absolute; width: 26.1vw; right: 0; bottom: 0; z-index: 1;}
.toppage { background: url("images/nav_bg.png") no-repeat center; background-size: cover;}
.top_head { text-align: right; width: 88.2vw; margin: 0 auto 29vw; padding-top: 6.6vw;}
.top_headin { width: 58vw; display: inline-block;}
.lang_top { background: #495d85; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; font-size: 0;}
.lang_top li { width: 20%; text-align: center; font-size: 4vw; display: inline-block; padding: 1vw 0; box-sizing: border-box; line-height: 1.5em;}
.lang_top li a { color: #cccccc;}
.lang_top li.active { background: #fff; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; font-weight: bold; color: #1c3567;}
.top_logo { width: 38.5vw; margin: 0 auto 34vw;}
.top_foot { margin-top: 33vw;}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: absolute;
width: 16.6vw; height: 20.8vw;
background: url("images/icon_nav_off.png") no-repeat top center; background-size: contain;
right: -1vw; top: -3.3vw;
transition: all .5s;
z-index: 9999;
}
.toggle_btn.toggle_btntop { position: relative; background: none; width: 48.9vw; margin: 0 auto; height: 21.3vw; right: 0; top: 0;transition: all 0s !important;}
.open.toggle_btn.toggle_btntop {
display: block;
position: absolute;
width: 16.6vw; height: 20.8vw;
background: url("images/icon_nav_on.png") no-repeat top center; background-size: contain;
right: 3vw; top: 0;
transition: all 0s !important;
z-index: 9999;
}
.open.toggle_btn.toggle_btntop img { display: none;}
.open .toggle_btn { background-image: url("images/icon_nav_on.png");}
/*============
#mask
=============*/
#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block; transition: all .5s;
position: absolute; top: 0; right: 0; width: 100%; height: 100vh; z-index: 20;
}
nav {
display: block;
position: fixed;
top: 0;
right: -100vw;
bottom: 0;
width: 100vw; background: url("images/nav_bg.png") no-repeat center; background-size: cover;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
opacity: 0; text-align: center; height: 100vh; box-sizing: border-box; padding-bottom: 10vw;
}
.open nav {
opacity: 1; z-index: 22; right: 0;
}
.navArea_inner { padding-top: 7.3vw; width: 86vw; margin: 0 auto; color: #fff;}
.acd-check{
display: none;
}
.acd-label{
display: block;
}
.acd-content{
height: 0;
opacity: 0;
padding: 0;
transition: .5s;
visibility: hidden; background: #495d85;
}
.acd-check:checked + .acd-label + .acd-content{
opacity: 1; height: auto;
visibility: visible;
}
nav .acd-label { font-size: 3.73vw; text-align: center; border-top: solid 1px #fff; padding: 4vw 0; position: relative;}
nav .acd-label.acd-label-first { border-bottom: solid 1px #fff;}
nav .acd-label::before { position: absolute; right: 2.66vw; top: 4vw; content: '＋'; font-size: 3.73vw; font-weight: bold;}
nav .acd-check:checked + .acd-label::before { content: 'ー';}
.navArea_inner .navArea_ttl { text-align: left; font-size: 6.66vw; font-weight: 700; background: url("images/icon_sake.png") no-repeat left top; padding: 1px 0 3px 8vw; background-size: contain; margin-left: 4.6vw;}
.navArea_inner .navArea_search { width: 74.9vw; margin: 0 auto; text-align: left;}
.navArea_inner h3 { font-size: 4.26vw; background: url("images/nav_ttl_bg.png") no-repeat center; padding: 2.26vw 0; background-size: 50.6vw; margin: 10.6vw 0 4.66vw; text-align: center;}
.navArea_inner .navArea_search .navArea_search_txt { font-size: 3.73vw; font-weight: 500; margin-bottom: 2.93vw; margin-left: 1.3vw;}
.navArea_inner .navArea_search .navArea_search_input { position: relative;}
.navArea_inner .navArea_search .navArea_search_input input[type="text"] { border: solid 1px #fff; background: #fff; padding: 1.6vw 8.6vw 1.6vw 4vw; box-sizing: border-box; font-size: 3.73vw; width: 100%; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; height: 8.3vw;}
.navArea_inner .navArea_search .navArea_search_input input[type="submit"] { -webkit-appearance: none; position: absolute; width: 14vw; height: 7.2vw; background: url("images/icon_search.png") no-repeat center #122652; background-size: 4vw; font-size: 0; -webkit-appearance: none; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; right: 0.7vw; top: 0.5vw; border: none;}
.navArea_inner .navArea_cat_txt { font-size: 3.73vw; font-weight: 500; margin-bottom: 4.4vw;}
.navArea_inner ul { font-size: 0; display: inline-block; text-align: left; padding: 3vw; width: 78vw; margin: 0 auto;}
.navArea_inner ul li { position: relative; display: inline-block; width: 49%; margin: 1vw 0; font-size: 3.73vw;}
.navArea_inner ul li:nth-child(2n) { right: -2%;}
.navArea_inner ul li a { color: #fff;}
#list { background: url("images/list_bg.png") repeat-y center top; background-size: 100%; text-align: center;}
#list .list_ttl { width: 88vw; margin: 0 auto 10.2%;}
#list .list_ttl .list_ttl_txt { text-align: left; color: #1c3567; margin-bottom: 2.6vw; font-size: 3.46vw; font-weight: 500;}
#list .list_ttl .list_ttl_ttl { font-size: 3.73vw; text-align: center; color: #1c3567; padding: 1px 0; border-bottom: solid 2px #1c3567; border-top: solid 2px #1c3567; font-weight: bold;}
#list .list_ttl .list_ttl_ttl span { display: block; padding: 2vw 0; border-bottom: solid 1px #1c3567; border-top: solid 1px #1c3567;}
#list .product_lists { font-size: 0; width: 85.3vw; margin: 0 auto;}
#list .product_lists .product_box { width: 47%; margin: 0 0 10vw; float: left; margin-right: 6%;}
#list .product_lists .product_box:nth-child(2n) { margin-right: 0; position: relative;}
#list .product_lists .product_box .product_box_img { height: 44vw; background-position: center; background-size: contain; background-repeat: no-repeat;}
#list .product_lists .product_box .product_box_txt { text-align: left; padding-top: 1vw;}
#list .product_lists .product_box .product_box_txt h3 { font-size: 3.73vw; line-height: 1.6em; margin-bottom: 1vw;}
#list .product_lists .product_box .product_box_txt .price { font-size: 3.4vw;}
footer img { width: 100%; height: auto; display: block;}
.navi-area { font-size: 0; font-weight: bold;}
.navi-area span { display: inline-block; vertical-align: middle; margin: 0 0 2vw; color: #1c3567; font-size: 3.4vw; padding: 3vw 3.4vw 2vw;}
.navi-area a { display: inline-block; vertical-align: middle; margin: 0 0 2vw; color: #1c3567; font-size: 3.4vw; padding: 3vw 3.4vw 2vw;}
.navi-area .current { color: #fff; background: url("images/icon_pager.png") no-repeat center; background-size: contain;}
#topnew { position: relative; z-index: 1;}
#topnew img { display: block;}
.topnew_lang { position: absolute; right: 21.3vw; top: 2.6vw;}
.topnew_lang .langs { margin: 0 auto 6vw;
font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal; font-size: 0; text-align: center; width: 48.5vw; display: block;}
.topnew_lang li { text-align: center; font-size: 4.5vw; width: 19.2%; background: url("images/icon_lang_off.png") no-repeat center; background-size: contain; padding: 3.3vw 0; display: inline-block; vertical-align: top;}
.topnew_lang li a { color: #666666; display: block;}
.topnew_lang li.on { background-image: url("images/icon_lang_on.png"); cursor: pointer;}
.topnew_lang li:hover { background-image: url("images/icon_lang_on.png");}
.topnew_lang li.on a { color: #fff;}
.topnew_lang li:hover a { color: #fff;}
.topnew_lang .langs li:nth-child(1) { margin-top: 6vw;}
.topnew_lang .langs li:nth-child(3) { margin-top: 6vw;}
.topnew_lang .langs li:nth-child(5) { margin-top: 6vw;}
.top_logo_new { width: 16.1vw; position: absolute; left: 6vw; top: 4.4vw;}
.top_logo_new img { width: 100%; height: auto;}
.search_result { border-bottom: solid 2px #1c3567; border-top: solid 3px #1c3567; padding: 2px 0;}
.search_result .search_result_inner { border-bottom: solid 1px #1c3567; border-top: solid 1px #1c3567; padding: 3.4vw 0;}
.search_result ul { text-align: left; width: 100%; margin: 0 auto;}
.search_result ul li { position: relative; background: #fff; border: solid 1px #1c3567; color: #1c3567; padding: 1vw 7vw 1vw 2vw; font-size: 3.7vw; display: inline-block; vertical-align: top; margin: 1.2vw 3.6vw 1.3vw 0;}
.search_result ul li span { font-size: 13px; position: absolute; right: 1.2vw; top: 1vw;}
.top_ttlarea { background: url("images/bg_new_01.png") no-repeat center top; background-size: cover; padding: 8.4vw 0 1vw;}
.top_ttlarea .top_ttlarea_ttl { margin: 0 auto; text-align: center; font-size: 4.5vw; font-weight: bold; padding: 2.9vw 0 3vw; background: url("images/rank_ttl_bg2.png") no-repeat center top; background-size: contain; margin-bottom: 5.7vw; color: #1C3567; width: 89vw;}
.top_ttlarea span { display: inline-block; padding: 1.2vw 0 1.2vw 10vw; background: url("images/icon_search_02.png") no-repeat; background-size: 5.8vw; background-position: 0 0;}
.top_rank { background: url("images/toprank_bg.png") no-repeat left top; background-size: cover; padding: 5.3vw 0; color: #fff;}
.top_rank .top_rank_ttl { text-align: center; font-size: 4.5vw; font-weight: bold; padding: 4vw 0 3.3vw; background: url("images/rank_ttl_bg.png") no-repeat center; background-size: contain; margin-bottom: 5.7vw;}
.top_rank .top_rank_boxes { display:block;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow: auto;
white-space: nowrap; width: 94.7vw; margin-left: 5.3vw; padding-bottom: 6vw; padding-left: 1.3vw; box-sizing: border-box;}
.top_rank .top_rank_box { display: inline-block; width: 26.6vw; margin-right: 4.8vw; overflow-wrap: break-word; word-wrap: break-word; white-space: normal; vertical-align: top;}
.top_rank .top_rank_box:nth-child(1) .top_rank_boximg::before { position: absolute; content: ''; width: 6.6vw; height: 13.3vw; background: url("images/icon_rank_1.png") no-repeat center; background-size: contain; left: -1.3vw; top: -4.6vw;}
.top_rank .top_rank_box:nth-child(2) .top_rank_boximg::before { position: absolute; content: ''; width: 6.6vw; height: 13.3vw; background: url("images/icon_rank_2.png") no-repeat center; background-size: contain; left: -1.3vw; top: -4.6vw;}
.top_rank .top_rank_box:nth-child(3) .top_rank_boximg::before { position: absolute; content: ''; width: 6.6vw; height: 13.3vw; background: url("images/icon_rank_3.png") no-repeat center; background-size: contain; left: -1.3vw; top: -4.6vw;}
.top_rank .top_rank_box:last-child { margin-right: 5.3vw;}
.top_rank .top_rank_box .top_rank_boximg { height: 26.6vw; background-repeat: no-repeat; background-size: contain; background-position: center; position: relative;}
.top_rank .top_rank_box .top_rank_boxprice { text-align: right; line-height: 1.5em; font-size: 3.2vw; font-weight: 500;}
.top_rank .top_rank_box .top_rank_boxname { font-size: 2.9vw; line-height: 1.6em; overflow-wrap: break-word; word-wrap: break-word; white-space: normal;}
.top_rank ::-webkit-scrollbar-track { background: #BEBEBE;}
.top_rank ::-webkit-scrollbar {
width: 1.3vw;
height: 1.3vw;
}
.top_rank ::-webkit-scrollbar-thumb {
background: #1C3567;
border-radius: 100px;
border: solid 1px #BEBEBE;
}
/*タブ切り替え全体のスタイル*/
.top_search .tabs {
margin-top: 14vw;
margin: 0 auto;
background: url("images/bg_new_01.png") repeat-y center top; background-size: 100%;
padding-bottom: 6.6vw;
}
/*タブのスタイル*/
.top_search .tab_item {
width: calc(100%/3);
height: 14vw;
background-color: #B1B1B1;
line-height: 14vw;
font-size: 4.5vw;
font-kerning: 500;
text-align: center;
color: #fff;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
box-sizing: border-box;
border-right: solid 1px #fff;
}
.top_search .tab_item:nth-child(6) { border: none;}
.top_search .tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
.top_search input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.top_search .tab_content {
display: none;
padding: 8vw 2.6vw 0;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#type:checked ~ #type_content,
#kodawari:checked ~ #kodawari_content,
#area:checked ~ #area_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.top_search .tabs input:checked + .tab_item {
background-color: #1C3567;
color: #fff;
}
.top_search .tab_content_description { background: url("images/bg_new_02_2.png") repeat-y center top #fff; background-size: 100%; padding: 7.2vw 2.6vw 8vw;}
.top_search #type_content .tab_content_description { background-image: url("images/bg_new_02.png");}
/* モーダル全体(背景＋本体) */
.modal{
display: none;
position: fixed;
top: 0; left: 0;
height: 100vh;
width: 100%;
z-index: 10;
}
/* モーダル背景 */
.modal-bg {
position: absolute;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 10;
}
/* モーダル本体 */
.modal-content{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: scroll; /* はみ出た部分はスクロールさせる */
height: 60%;/* これが無いと「overflow:scroll」が利かない */
width: 100%;/* これが無いと「overflow:scroll」が利かない */
background: #fff;
padding: 0;
box-sizing: border-box;
z-index: 11;
}
.modal-content { text-align: center;}
.modal-content .modal-contentin { font-size: 0; text-align: left; position: relative; right: -2%; padding: 5.3vw 4vw;}
.modal-content .modalbtnsno_ttl { background: #e0e2f2; padding: 3vw 0; text-align: center; font-weight: bold;}
.modal-content .modalbtnsno_ttl span { display: inline-block; padding: 1vw 0 1vw 6vw; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain; color: #1C3567; font-size: 4vw;}
.modal-content .modal-contentin input[type="radio"] { display: none;}
.modal-content .modal-contentin label { display: inline-block; vertical-align: top; width: 48%; font-size: 2.6vw; color: #4A4A4A; background: #E5E5E5; margin-bottom: 1vw; text-align: left; box-sizing: border-box; padding: 1.5vw 1.1vw 2.2vw 7vw; position: relative; margin-right: 1%;}
.modal-content .modal-contentin label::before { display: block; width: 4vw; height: 4vw; background: url("images/icon_circle_05.png") no-repeat center; background-size: contain; position: absolute; left: 2vw; top: 1.2vw; content: '';}
.modal-content .modal-contentin input:checked + label { background-color: #1C3567; color: #fff;}
.modal-content .modal-contentin input:checked + label::before { background-image: url("images/icon_circle_04_on.png");}
.modal-content .js-modal-close { display: inline-block; color: #fff; text-decoration: none; font-size: 3vw; margin-top: 4vw; width: 26vw; padding: 2.6vw 0; background: #1C3567; border: solid 1px #1C3567; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;}
.iconclose { background: url("images/icon_close.png") no-repeat center !important; background-size: contain !important; width: 5vw !important; height: 5vw !important; position: absolute; right: 3vw !important; top: 0; padding: 0 !important; border: none !important;}
.top_search .tab_ttl { text-align: center; font-size: 4.8vw; font-weight: 700; color: #1C3567; margin-bottom: 8.6vw;}
.top_search .tab_ttl span { display: inline-block; padding: 1vw 0 1vw 10vw; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain;}
.top_search .tab_subttl { text-align: center; font-size: 3.7vw; border-bottom: solid 1px #1C3567; border-top: solid 1px #1C3567; color: #1C3567; padding: 2vw 0; font-weight: 500; margin-bottom: 8.6vw;}
.top_search .modalbtns { margin: 0 auto; margin-bottom: 2.6vw; width: 98%;}
.top_search .modalbtns a { width: 100%; display: block; border: solid 1px #9F9F9F; color: #727272; text-align: left; font-size: 4vw; padding: 1.96vw 4.3vw; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background: #fff; position: relative; box-sizing: border-box; background: #E3E3E3;}
.modalbtns_ttl { display: inline-block; padding: 1vw 0 1vw 6vw; background: url("images/icon_bottle.png") no-repeat left top; background-size: contain; color: #1C3567; font-size: 4vw; margin-left: 5vw; margin-bottom: 2vw; margin-top: 6vw;}
.top_search .modalbtns .modalbtns_ttl:first-child { margin-top: 0;}
.top_search .modalbtns.modalbtn a { width: 100%; text-align: left; padding: 1.86vw 5.3vw 1.86vw 11.3vw;}
.top_search .modalbtns a:hover { cursor: pointer;}
.top_search .modalbtns a::before { content: ''; width: 4vw; height: 3vw; background: url("images/icon_select_arr.png") no-repeat; background-size: contain; position: absolute; right: 4vw; top: 3.3vw;}
.top_search .modalbtns a.on { background: #fff; text-align: center; color: #1C3567;}
.top_search .type_txt { box-sizing: border-box; border: solid 2px #1C3567; padding: 2px; text-align: center; margin: 12vw 0 6.6vw; background: #fff;}
.top_search .type_txtin { box-sizing: border-box; border: solid 1px #1C3567; font-size: 3.7vw; line-height: 1.6em; color: #1C3567; padding: 4.5vw 0;}
.top_search .type_map { height: 62.4vw; background: url("images/top_search_bg_01.png") no-repeat center top; background-size: contain; position: relative;}
.top_search .type_map#mapen { background-image: url("images/top_search_bg_01_en.png");}
.top_search .type_map#mapkr { background-image: url("images/top_search_bg_01_kr.png");}
.top_search .type_map#mapch { background-image: url("images/top_search_bg_01_ch.png");}
.top_search .type_map#maptw { background-image: url("images/top_search_bg_01_tw.png");}
.top_search .type_map .type_map_inner { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin: auto; height: 44.5vw; width: 69.4vw; background: url("images/top_search_bg_02.png") no-repeat center; background-size: contain;}
.top_search .type_map .type_map_box input { display: none;}
.top_search .type_map .box01 { height: 50%; width: 50%; position: absolute; left: 0; top: 0;}
.top_search .type_map .box01 input:checked + label { background: rgba(128,184,136,0.29);}
.top_search .type_map .box02 { height: 50%; width: 50%; position: absolute; right: 0; top: 0;}
.top_search .type_map .box02 input:checked + label { background: rgba(198,157,148,0.29);}
.top_search .type_map .box03 { height: 50%; width: 50%; position: absolute; left: 0; bottom: 0;}
.top_search .type_map .box03 input:checked + label { background: rgba(201,146,187,0.29);}
.top_search .type_map .box04 { height: 50%; width: 50%; position: absolute; right: 0; bottom: 0;}
.top_search .type_map .box04 input:checked + label { background: rgba(198,182,145,0.29);}
.top_search .type_map label { display: block; width: 100%; height: 100%;}
.top_search .type_submit { text-align: center; padding-bottom: 4vw; width: 67.3vw; margin: 12vw auto 0; position: relative;}
.top_search .type_submit input[type="submit"] { -webkit-appearance: none; font-size: 4.5vw; font-weight: 500; background: #1C3567; display: inline-block; padding: 2.6vw 0; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; color: #fff; border: solid 1px #1C3567; width: 100%;}
.top_search .type_submit::before { content: ''; width: 5.3vw; height: 6vw; background: url("images/icon_search.png") no-repeat center; background-size: contain; position: absolute; right: 8.8vw; top: 2.9vw; display: block;}
.head_submit { text-align: center; padding-bottom: 4vw; width: 67.3vw; margin: 12vw auto 0; position: relative;}
.head_submit input[type="submit"] { -webkit-appearance: none; font-size: 4.5vw; font-weight: 500; background: #fff; display: inline-block; padding: 2.6vw 0; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; color: #1C3567; border: solid 1px #fff; width: 100%;}
.head_submit::before { content: ''; width: 5.3vw; height: 6vw; background: url("images/icon_search_02.png") no-repeat center; background-size: contain; position: absolute; right: 8.8vw; top: 2.9vw; display: block;}
.toggle_btn_undernew { background: url("images/footer_bg.png") no-repeat #1C3567; background-size: contain; background-position: 10% 96%; padding: 8vw 0 20.9vw; text-align: center;}
.toggle_btn_undernew .foot_logo { margin-bottom: 5.3vw; text-align: center; width: 100%;}
.toggle_btn_undernew .foot_logo img { width: 20.6vw; height: auto; display: inline-block;}
.toggle_btn_undernew .foot_link { margin-bottom: 6.1vw;}
.toggle_btn_undernew .foot_link a { display: inline-block; font-size: 3.4vw; color: #fff; padding-right: 4.8vw; background: url("images/icon_hplink.png") no-repeat right center; background-size: 3.2vw;}
.toggle_btn_undernew #copyright { font-size: 2.9vw; color: #fff;}
.kodawari_lists { width: 80vw; margin: 0 auto; font-size: 0; text-align: left;}
.kodawari_lists .kodawari_list { font-size: 3.3vw; vertical-align: top; display: inline-block; margin-right: 1.2vw; margin-bottom: 1.8vw; margin-left: 1.2vw;}
.kodawari_lists .kodawari_list input { display: none;}
.kodawari_lists .kodawari_list label { border: solid 1px #1C3567; color: #1C3567; padding: 2.2vw 3.8vw; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; display: block;}
.kodawari_lists .kodawari_list input:checked + label { color: #fff; background: #1C3567;}
.kodawari_lists .kodawari_list {}
#area_content {}
#area_content h4 { font-size: 3.4vw; padding-bottom: 1vw; margin-bottom: 2.6vw; border-bottom: solid 1px #1C3567; color: #1C3567; font-weight: 500; position: relative; margin-top: 6.6vw;}
#area_content h4 span.lo { position: absolute; display: inline-block; right: 1vw; top: -1px; font-size: 3.4vw; color: #000;}
#area_content h4 span input { display: none;}
#area_content h4 span label { display: block; padding: 1px 0 1px 3.3vw; background: url("images/icon_check_01.png") no-repeat; background-size: 2.8vw; background-position: 0 0.8vw;}
#area_content h4 span input:checked +label { background-image: url("images/icon_check_02.png");}
#area_content h4 span.lo { white-space: nowrap;}
#area_content .area_box { font-size: 0;}
#area_content .area_box_label { display: inline-block; vertical-align: top; width: 49%; font-size: 3.7vw; margin-bottom: 1vw;}
#area_content .area_box_label:nth-child(2n) { position: relative; right: -1vw;}
#area_content .area_box_label input { display: none;}
#area_content .area_box_label label { display: block; box-sizing: border-box; border: solid 2px #1C3567; color: #1C3567; position: relative; padding: 2.4vw 0; text-align: center; background-color: #fff;}
#area_content .area_box_label input:checked + label { background: #1C3567; color: #fff;}
#area_content .area_box_label input:checked + label::before { background-image: url("images/icon_arrow_02.png");}
#area_content .area_box_label input:disabled + label { background-color: #B1B1B1 !important; border-color: #B1B1B1; color: #fff !important;}
#area_content .area_box_label input:disabled + label::before { background-image: url("images/icon_arrow_02.png") !important;}
.navArea_inner ul li input[type="radio"] { display: none;}
.navArea_inner ul li label { display: inline-block; vertical-align: top; width: 100%; font-size: 2.4vw; color: #4A4A4A; background: #E5E5E5; text-align: left; box-sizing: border-box; padding: 2.1vw 1.1vw 2.1vw 7vw; position: relative;}
.navArea_inner ul li label::before { display: block; width: 4vw; height: 4vw; background: url("images/icon_circle_05.png") no-repeat center; background-size: contain; position: absolute; left: 2vw; top: 1.2vw; content: '';}
.navArea_inner ul li input:checked + label { background-color: #1C3567; color: #fff;}
.navArea_inner ul li input:checked + label::before { background-image: url("images/icon_circle_04_on.png");}
/* ターミナル追加 */
.tab_new_accesstag {
margin-top: 10.6vw;
text-align: left;
}
.tab_new_accesstag .acd-label {
color: #fff;
font-weight: 500;
background: #9B7A51;
box-sizing: border-box;
padding: 4vw 4vw 4vw 5.3vw;
font-size: 3.7vw;
position: relative;
text-align: left;
display: block;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.tab_new_accesstag .acd-label::before {
content: '';
width: 0.5vw;
height: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 3.2vw;
right: 6.4vw;
}
.tab_new_accesstag .acd-check:checked + .acd-label::before {
display: none;
}
.tab_new_accesstag .acd-label::after {
content: '';
height: 0.5vw;
width: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 4vw;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.tab_new_accesstag .acd-content {
padding: 0;
font-size: 0;
background: none;
}
.tab_new_accesstag .acd-check:checked + .acd-label + .acd-content {
padding: 4vw 0 0;
}
.tab_new_accesstag .acd-content label {
font-size: 3.2vw;
color: #9B7A51;
background: #fff;
box-sizing: border-box;
border: solid 1px #9B7A51;
background: #fff;
padding: 2.5vw 4vw 2.5vw 6vw;
display: inline-block;
margin-bottom: 2vw;
margin-left: 2vw;
border-radius: 5vw; -webkit-border-radius: 5vw; -moz-border-radius: 5vw;
position: relative;
}
.tab_new_accesstag input:checked + .shoplabel {
color: #fff;
background: #9B7A51;
}
.tab_new_accesstag .acd-content label::before {
content: '#';
position: absolute;
left: 3vw;
top: 2.4vw;
}
.tab_new_accesstag .acd-content input[type="checkbox"] {
display: none;
}
.tab_new_access {
margin-bottom: 2.66vw;
}
.tab_new_access .acd-label {
color: #fff;
font-weight: 500;
background: #1C3567;
box-sizing: border-box;
padding: 1vw;
position: relative;
}
.tab_new_access .acd-label::before {
content: '';
width: 0.5vw;
height: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 4.3vw;
right: 6.4vw;
}
.tab_new_access .acd-check:checked + .acd-label::before {
display: none;
}
.tab_new_access .acd-label::after {
content: '';
height: 0.5vw;
width: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 4vw;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.tab_new_access .acd-label .txt {
border: solid 1px #fff;
box-sizing: border-box;
padding: 4vw 4vw 4vw 22.6vw;
font-size: 3.7vw;
background-repeat: no-repeat;
background-size: 13vw;
background-position: 4vw 50%;
}
.tab_new_access .acd-label .txt.t1 {
background-image: url("images/icon_terminal_01.png");
}
.tab_new_access .acd-label .txt.t2 {
background-image: url("images/icon_terminal_02.png");
}
.tab_new_access .acd-label .txt.t3 {
background-image: url("images/icon_terminal_03.png");
}
.tab_new_access .acd-content {
padding: 0;
background: none !important;
}
.tab_new_access .acd-check:checked + .acd-label + .acd-content {
padding: 4vw 0 0;
border-bottom: dashed 3px #1C3567;
}
.tab_new_access .acd-content label.shoplabel {
background: #fff;
border: solid 1px #D9D9D9;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
font-size: 3.2vw;
line-height: 1.6em;
color: #1C3567;
padding: 4vw 3vw 4vw 3.2vw;
display: block;
margin-bottom: 1.8vw;
box-shadow: 1px 3px 6px 0 rgba(119, 108, 89, .22);
}
.tab_new_access .acd-content input[type="checkbox"] {
display: none;
}
.tab_new_access .acd-content input[type="checkbox"]:checked + label.shoplabel {
background: #1C3567;
color: #fff;
}
.tab_new_access .allcheck_txt {
text-align: right;
margin-bottom: 2.6vw;
font-size: 3vw;
color: #1C3567;
font-weight: 500;
}
.tab_new_access .allcheck_txt label {
display: inline-block;
background: url("images/icon_shop_check.png") no-repeat;
background-size: 2.6vw;
padding-left: 3.3vw;
background-position: 0 95%;
}
.tab_new_access .allcheck_txt input:checked + label {
background-image: url("images/icon_shop_check2.png");
}
.navArea_shop .acd-label {
text-align: left !important;
padding: 2.6vw 0 !important;
}
.navArea_shop .acd-label .txt {
background-repeat: no-repeat;
background-size: contain;
background-position: 4vw 50%;
padding: 1vw 0 1vw 22vw;
}
.navArea_shop .acd-label .txt.t1 {
background-image: url("images/icon_terminal_01_sp.png");
}
.navArea_shop .acd-label .txt.t2 {
background-image: url("images/icon_terminal_02_sp.png");
}
.navArea_shop .acd-label .txt.t3 {
background-image: url("images/icon_terminal_03_sp.png");
}
.navArea_shop .acd-content {
background: none;
}
.navArea_shop .acd-content {
padding: 0;
}
.navArea_shop .acd-check:checked + .acd-label + .acd-content {
padding: 4vw 0 0;
border-bottom: dashed 3px #1C3567;
}
.navArea_shop .acd-content label.shoplabel {
background: #fff;
border: solid 1px #D9D9D9;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
font-size: 3.2vw;
line-height: 1.6em;
color: #1C3567;
padding: 4vw 3vw 4vw 3.2vw;
display: block;
margin-bottom: 1.8vw;
box-shadow: 1px 3px 6px 0 rgba(119, 108, 89, .22);
text-align: left;
}
.navArea_shop .acd-content input[type="checkbox"] {
display: none;
}
.navArea_shop .acd-content input[type="checkbox"]:checked + label.shoplabel {
background: #1C3567;
color: #fff;
}
.navArea_shop .allcheck_txt {
text-align: right;
margin-bottom: 2.6vw;
font-size: 3vw;
color: #fff;
font-weight: 500;
}
.navArea_shop .allcheck_txt label {
display: inline-block;
background: url("images/icon_shop_check.png") no-repeat;
background-size: 2.6vw;
padding-left: 3.2vw;
background-position: 0 95%;
}
.navArea_shop .allcheck_txt input:checked + label {
background-image: url("images/icon_shop_check2.png");
}
.shopcat {
width: 86.1vw;
margin: 0 auto;
font-size: 0;
}
.shopcat li {
width: 17.8vw;
display: inline-block;
margin-right: 1vw;
}
.single_shops {
margin-top: 3vw;
}
.single_shops .single_shop {
margin-bottom: 8vw;
}
.single_shops .single_shop:last-child {
margin-bottom: 0;
}
.single_shops .single_shop_ttl {
width: 17.3vw;
margin-bottom: 1.4vw;
}
.single_shops .single_shoplist {
font-size: 0;
margin-right: 1.4vw;
}
.single_shops .single_shoplist li {
font-weight: 400;
display: inline-block;
border: solid 1px #fff;
padding: 1vw 2.6vw;
margin-bottom: 1vw;
font-size: 3.2vw;
}
.single_shops .single_shoplist li a {
text-decoration: none !important;
}
.archive_shop {
margin-bottom: 2.4vw;
}
.archive_shop li {
width: 32%;
}
.archive_shop li .onimg { display: none !important;}
.archive_shop li .offimg { display: block !important;}
.archive_shop.t1 li:nth-child(1) .offimg { display: none !important;}
.archive_shop.t1 li:nth-child(1) .onimg { display: block !important;}
.archive_shop.t2 li:nth-child(2) .offimg { display: none !important;}
.archive_shop.t2 li:nth-child(2) .onimg { display: block !important;}
.archive_shop.t3 li:nth-child(3) .offimg { display: none !important;}
.archive_shop.t3 li:nth-child(3) .onimg { display: block !important;}
.single_shoptag {
background: rgba(155,122,81,0.16);
padding: 100px 50px 70px;
}
.single_shoptag .acd-label {
color: #fff;
font-weight: 500;
background: #9B7A51;
box-sizing: border-box;
padding: 4vw 4vw 4vw 5.3vw;
font-size: 3.7vw;
position: relative;
text-align: left;
display: block;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.single_shoptag .acd-label::before {
content: '';
width: 0.5vw;
height: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 3.2vw;
right: 6.4vw;
}
.single_shoptag .acd-check:checked + .acd-label::before {
display: none;
}
.single_shoptag .acd-label::after {
content: '';
height: 0.5vw;
width: 5.3vw;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 4vw;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
}
.single_shoptag .acd-check:checked + .acd-label + .acd-content {
padding-top: 3.7vw;
}
.single_shoptag .acd-content {
background: none !important;
}
.single_shoptag .acd-content ul {
font-size: 0;
}
.single_shoptag .acd-content ul li {
display: inline-block;
margin-bottom: 2.2vw;
margin-right: 2.2vw;
}
.single_shoptag .acd-content ul li a {
font-size: 3.2vw;
color: #9B7A51;
background: #fff;
box-sizing: border-box;
border: solid 1px #9B7A51;
background: #fff;
padding: 2vw 4vw 2vw 5vw;
display: inline-block;
border-radius: 4vw; -webkit-border-radius: 4vw; -moz-border-radius: 4vw;
position: relative;
}
.single_shoptag .acd-content ul li a::before {
content: '#';
position: absolute;
left: 2.4vw;
top: 2vw;
}
.single_shoptag .acd-content ul li a:hover {
background: #9B7A51;
color: #fff;
}
.top_search .tab_subttl_new {
border-bottom: solid 2px #1C3567;
border-top: solid 2px #1C3567;
text-align: center;
font-weight: 500;
font-size: 4.26vw;
padding: 4.6vw 0 2.66vw;
margin-bottom: 6vw;
color: #1C3567;
position: relative;
}
.tab_subttl_new2 {
margin-top: 13.3vw;
}
.top_search .tab_subttl_new .tab_subttl_new_step {
color: #fff;
font-size: 3vw;
font-weight: 500;
border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;
background: #1C3567;
padding: 1vw 5.3vw 1vw;
display: inline-block;
top: -3vw;
left: 50%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
position: absolute;
}
/* ターミナル追加 */
}
.slide-dots li:first-child:last-child {
display: none !important;
}