@charset "utf-8";
/*
Theme Name: homewine
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');
@font-face {
    font-family: "SpratRegular";
    src: url("css/fonts/Sprat-Regular.woff")format("woff");
    font-weight: 400;
    font-style: normal;
}


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
a { color: #333; text-decoration: none;}
@media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; background: #f4f0e8; font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", YuGothic, sans-serif; font-size: 1.4rem; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: normal; color: #333; }
code, kbd, pre, samp { font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", YuGothic, sans-serif;}
#container { position: relative; width: 100%;}
.quasimoda { font-family: "quasimoda", sans-serif; font-weight: 600;}
.sprat { font-family: "SpratRegular", serif; font-weight: 400; letter-spacing: 0.05em;}
.inter { font-family: "Inter", sans-serif; font-weight: 700; font-variation-settings: "slnt" 0;}

.t-center { text-align: center; }
.mt1em { margin-top: 1em; }
.mt2em { margin-top: 2em; }

.contents-width { width: 1220px; padding: 0 16px; margin: 0 auto; max-width: 100%; }


/*HEADER*/
/*******************************************************************/
#header { position: sticky; top: 0; left: 0;z-index: 1000; }
#header .inner { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; background: #600F18; }
#logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);max-width: 188px;}


#nav .head-mega-menu { display: none; }
#nav .head-mega-menu ul { display: block; }
#nav .head-wine-search .ttl span,
#nav .head-wine-search .ttl a { border-bottom: 1px solid #CEC5AF; font-weight: bold; font-size: 1.3rem; margin-bottom: .5em; padding: 0 0 .5em; display: block; width: 100%; position: relative; padding: .5em 0;}

#nav .head-wine-search .ttl a,
#nav .head-wine-search .menulist a { display: flex; justify-content: space-between; align-items: center; padding: .5em 0; }
#nav .head-wine-search .ttl a::after,
#nav .head-wine-search .menulist a::after{ content: ''; position: relative; transform: rotate(-45deg); display: block; width: 8px; height: 8px; border-right: 1px solid #222; border-bottom: 1px solid #222;}
  
#nav .head-wine-search .menulist { margin: 0;}
#nav .head-wine-search .menulist > li { border-bottom:  1px solid #AAA; font-size: 1.3rem; margin-bottom: 1em; }

#nav .head-sommelier-list .item { display: flex; justify-content: space-between; }
#nav .head-sommelier-list .img { width: 25%; }
#nav .head-sommelier-list .img img { width: 100%; height: 9em; object-fit: contain; object-position: top center; }
#nav .head-sommelier-list .text { width: 73%; }
#nav .head-sommelier-list a {display: block; width: 100%; margin-bottom: 1em; }
#nav .head-sommelier-list .name { border-bottom: 1px solid #CEC5AF; font-size: 1.6rem; font-weight: bold; padding-bottom: .5em; display: block; margin-bottom: .5em; position: relative; padding-right: 1.5em; }
#nav .head-sommelier-list .name::after{ content: ''; position: relative; transform: rotate(-45deg); display: block; width: 8px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }

#nav .head-sommelier-list .name span { display: block; font-size: .5em; margin-bottom: 1em; }


#mv .swiper-slide { background: #FFF; }


.slider .button { width: 100%; box-sizing: border-box; }

#main.home { background: #F7F6F2; }

@media only screen and (max-width: 950px){
#nav { pointer-events: none; opacity: 0; position: fixed; top: 0; left: 0; transform: translateX(-100%); max-width: 80%; min-width: 200px; max-height: 100vh; padding: 64px 48px; background: #600F18; border-bottom-right-radius: 30px; color: #FFF; box-shadow: 0 0 48px rgba(0,0,0,.15); overflow-y: auto; overscroll-behavior: contain; z-index: 1000; transition: .4s cubic-bezier(.645,.045,.355,1); }
#nav > ul { display: flex; flex-direction: column; gap: 32px; margin: 0; line-height: 1; list-style: none;}
#nav > ul > li > a { display: flex; justify-content: space-between; gap : 4px; font-size: 1.4rem; font-weight: 700; color: #FFF;}
#nav > ul > li > a.haschild::after { content: ''; position: relative; transform: rotate(45deg); display: block; width: 8px; height: 8px; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF;}
#nav li ul { display: none; margin: 24px 0 24px 16px;}
#nav li ul li:not(:first-child) { margin-top: 16px;}
#nav li ul li a { font-size: 1.4rem; font-weight: 500; color: #FFF;}
  
  
#nav li:hover .head-mega-menu { pointer-events: all; opacity: 1;} 
  #nav .head-wine-search .ttl a::after, #nav .head-wine-search .menulist a::after { border-color: #FFF; }
  #nav .head-wine-search .menulist > li a { font-size: 1.3rem; font-weight: bold; }
  
  #nav .head-sommelier-list > ul {margin-left: 0; }
  #nav .head-sommelier-list .img img { height: 7em;}
  
#open { position: relative; width: 32px; height: 32px; cursor: pointer; z-index: 2000;}
#open span { position: absolute; left: 8px; display: block; width: 16px; height: 2px; background: #FFF; border-radius: 8px; transition: .2s linear;}
#open span:nth-child(1) { top: 10px;}
#open span:nth-child(2) { top: 15px;}
#open span:nth-child(3) { top: 20px;}
.open #nav { pointer-events: auto; transform: translateX(0); opacity: 1; transition: opacity .4s cubic-bezier(.23,1,.32,1) .1s, transform 1s cubic-bezier(.23,1,.32,1) .0s;}
.open #open span:nth-child(1) { top: 15px; transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0;}
.open #open span:nth-child(3) { top: 15px; transform: rotate(-45deg);}
}
.searchbtn { cursor: pointer; padding: 4px; width: 24px; display: block; }
.searchbox { position: absolute; top: 100%; left: 0; width: 100%; padding: 0 24px 8px; background: #600F18; transition: .2s ease-out; opacity: 0; pointer-events: none;}
.searchbox.on { opacity: 1; pointer-events: auto;}
.searchbox form { display: flex;}
#s { flex: 1; padding: 8px 24px 8px 8px; background: #FFF; border-radius: 0 40px 40px 0; font-size: 1.2rem;}
#searchsubmit { padding: 8px 0 8px 16px; background: #FFF; border-radius: 40px 0 0 40px;}
#mypage { margin-left: auto;}
#mypage img , #cart img { width: 24px; padding: 4px; }


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; padding: 32px 16px; background: #766949; color: #FFF; margin-top: 50px; }
#footer .logo { width: 80%; margin:0 auto 32px; text-align: center;}
#sitemap { position: relative; display: grid; gap: 24px;}
#sitemap .sitemap { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px 8px;}
#sitemap .sitemap > li > a,
#sitemap .sitemap a.large-item { position: relative; display: block; padding: 8px 24px 8px 8px; border-bottom: 1px solid #FFF; font-size: 1.4rem; font-weight: 700; color: #FFF; font-weight: normal; text-decoration: none; margin: 0; }
#sitemap .sitemap > li > a::after { content: ''; position: absolute; top: 0; right: 8px; width: 10px; height: 10px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; transform: translateY(100%) rotate(45deg); transition: transform .2s ease-out;}
#sitemap .sitemap a.large-item::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; transform: translateY(100%) rotate(45deg); }
#sitemap .sitemap > li > a.haschild::after { border-width: 2px; transform: translateY(100%) rotate(135deg);}
#sitemap .sitemap > li > a.haschild.on::after { transform: translateY(100%) rotate(315deg);}
#sitemap .sitemap > li.wide { grid-column: 1 / 3;}
#sitemap .sitemap > li:not(.sub) > ul { display: none;}
#sitemap .sitemap > li > ul a { display: block; margin: 8px; text-decoration: underline; font-size: 1.3rem; color: #FFF;}
#sitemap .sitemap > li.wide > ul a, #sitemap .sitemap > li.sub > ul a { text-decoration: none;}
#sitemap .sns { display: flex; justify-content: flex-end; align-items: center; gap: 16px;}
#info { font-size: 1.3rem;}
#info .info-title { padding: 8px 24px 8px 8px; border-bottom: 2px solid #FFF; font-size: 1.4rem; font-weight: 700;}
#info dt { margin: 16px 0 8px; font-weight: 700;}
#info .homewine { margin-top: 24px; text-align: center;}
#info p { margin: 16px 0; font-size: 1rem; color: #F7F6F2;}
#info .copyright { font-family: "SpratRegular", serif; font-size: 1rem; color: #F7F6F2;}


/*CONTENTS*/
/*******************************************************************/
#main { overflow: hidden;}
article { position: relative; padding: 32px 16px;}
article article { padding-left: 0; padding-right: 0; }
article header { position: relative; max-width: 1220px; margin: 0 auto;}
section { position: relative; max-width: 1220px; margin: 0 auto;}
section + section { margin-top: 16px;}
.bg { position: relative; padding: 32px 16px!important;}
.bg::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #F3F0E7; z-index: -1;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left;}
.pc { display: none!important;}
.button { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 400px; margin: 0 auto; padding: 12px; text-align: center; background: #600F18; border-radius: 40px; font-size: 1.2rem; font-weight: 700; color: #FFF;}
.button + .button { margin-top: 8px;}
.button.cart::before { content: ''; display: inline-block; width: 15px; height: 14px; background: url("../img/common/cart_w.svg") center no-repeat; background-size: contain;}
.button.favorite::before { content: ''; display: inline-block; width: 15px; height: 14px; background: url("../img/common/heart.svg") center no-repeat; background-size: contain;}
.button.invertion { background: #FFF; color: #600F18;}
.button.invertion.cart::before { background-image: url("../img/common/cart.svg");}
.button.alt { background: #766949;}
.button.square { background: #FFF; border: 1px solid #A58847; border-radius: 0; font-size: 1.4rem; color: #A58847;}
.button.line { background: #13834D; border-radius: 6px; font-size: 1.2rem;}
.button.review { background: none; border: 1px solid #766949; color: #766949; cursor: pointer; }
.button.review::before { content: ''; display: inline-block; width: 13px; height: 13px; background: url("../img/common/review.svg") center no-repeat; background-size: contain;}

.arrow { display: inline-block; padding-right: 16px; background: url("../img/common/arrow.svg") right center no-repeat; font-size: 1.3rem; font-weight: 700; color: #600F18;}
.marker { display: inline; padding: 0 1px 0px; background: linear-gradient(transparent 60%, rgba(252,225,79,.53) 0%);}
.underline { text-decoration: underline;}
.pc { display: none;}
.fadeInUp{ animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
.animated { opacity: 0; animation-duration: 0.4s; animation-delay: 0.1s; animation-fill-mode: both;}


/*TOP*/
#mv { padding: 24px 32px; background: url("../img/top/mv.jpg") center no-repeat; background-size: cover; overflow: hidden; }
#mv .swiper { overflow: visible; }
#mv .swiper-pagination-bullets { position: absolute; bottom: -24px; left: 4%; right: 4%; width: auto; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 0;  z-index: 10;}
#mv .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0; background: #FFF; opacity: 1;}
#mv .swiper-pagination-bullet-active { background: #CBBC9F; opacity: 1;}
#mv .swiper-next, #mv .swiper-prev { width: 24px; height: 24px; position: absolute; top: calc(50% - 12px); background: url('img/common/next.svg') center no-repeat; background-size: contain; z-index: 2;}
#mv .swiper-prev { left: -28px; transform: scaleX(-1);}
#mv .swiper-next { right: -28px;}

.banner { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; max-width: 700px; margin: 0 auto;}

#news { padding-top: 0;}
#news section { padding: 16px 0; border-top: 1px solid #A58847; border-bottom: 1px solid #A58847;}
#news .swiper { max-width: 560px;}
#news .swiper-slide { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px;}
#news .news-cat { padding: 2px 8px; background: #A58847; border-radius: 4px; font-size: 1.2rem; font-weight: 700; color: #FFF;}
#news .news-time { font-size: 1.2rem; font-weight: 500; letter-spacing: 0.06em; color: #A58847;}
#news .news-contents { grid-column: 1 / 3; font-size: 1.2rem;}
#news .swiper-nav { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px;}
#news .swiper-pagination { position: relative; bottom: 0; width: auto;}
#news .swiper-pagination-bullet { background: none; font-size: 1rem; color: #CBBC9F; opacity: 1;}
#news .swiper-pagination-bullet-active { color: #A58847;}
#news .swiper-next, #news .swiper-prev { width: 6px; height: 6px; border-top: 2px solid #A58847; border-right: 2px solid #A58847;}
#news .swiper-prev { transform: translateY(2px) rotate(-135deg); order: -1;}
#news .swiper-next { transform: translateY(2px) rotate(45deg);}
#news .swiper-button-disabled { opacity: 0;}

.single-news-title { padding-bottom: 0; }
.single-news-title #title { margin-bottom: 0;}
.single-news-title h1 { font-size: 1.5em; margin-top: .5em;  }


#country h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 1.4rem; color: #766949;}
#country h3 i { font-size: 1rem; letter-spacing: 0.05em; color: #A58847}
.country { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px;}
.country figure img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; }
.country li a { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; padding: 8px; background: #EFEADB; font-size: 1.2rem; font-weight: 700; color: #766949;}

.tab-sub { overflow: hidden; }
.tab-sub .swiper { overflow: visible;}
.tab-sub .swiper-slide { display: grid; grid-template-columns: 44px 1fr; justify-content: center; align-items: center; gap: 8px; width: auto; padding: 8px; background: #CCC8C0; border-radius: 8px 8px 0 0; font-size: 1rem; color: #FFF; white-space: nowrap; cursor: pointer;}
.tab-sub .swiper-slide figure { border: 2px solid #FFF; border-radius: 50%; overflow: hidden;}
.tab-sub .swiper-slide >div { padding: 0 5px; }
.tab-sub .swiper-slide em { display: block; font-size: 1.2rem; font-weight: 700;}
.tab-sub .swiper-slide-thumb-active { background: #f4f0e8; color: #600F18;}
.tab-sub.simple { margin-bottom: 16px;}
.tab-sub.simple .swiper-slide { display: block; background: none; font-size: 1.4rem; font-weight: 700; color: #B7B3A8;}
.tab-sub.simple .swiper-slide-thumb-active { border-bottom: 2px solid #600F18; border-radius: 2px; color: #600F18;}
.tab-main { position: relative; margin: 0 -16px; padding: 16px 0; background: #f4f0e8;}
.tab-main::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #f4f0e8; z-index: -1;}
.tab-main .button.square { margin: 16px auto 0; width: calc(100% - 32px); }
.slider .swiper { padding: 0 16px;}
.slider .swiper-slide a:first-of-type { display: block;}
.slider figure { position: relative; width: 100%; padding-top: 100%; background: #FFF; z-index: 1; overflow: hidden;}
.slider figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down;}
.slider h3 { margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid #A58847; font-size: 1.3rem; }
.slider h3 span { display: block; }
.slider h3 i { display: block; font-size: 1.1rem; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; height: 1.3em;  }
.slider .new { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: #A58847; border-radius: 4px; font-size: 1rem; color: #FFF;}
.slider .rank { position: absolute; top: 4px; left: 4px; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; background: #D2C6A6; font-size: 1rem; color: #FFF;}
.slider .rank em { font-size: 1.7rem; font-weight: 500; letter-spacing: -.1em; margin-left: -.1em;}
.slider .rank.no1 { background: #C2AF4C;}
.slider .rank.no2 { background: #B5B5B5;}
.slider .rank.no3 { background: #AF9C92;}
.area { display: grid; grid-template-columns: 18px 1fr; align-items: flex-start; gap: 8px; font-size: 1.3rem; }
.area > img { margin-top: 0; width: 2em; height: 1.5em; object-fit: contain; }
.varieties { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; align-items: flex-start; }
.varieties > img { margin-top: .2em; width: 1.5em; height: 1.5em; object-fit: contain; }
.type { display: flex; align-items: center; gap: 4px;}
.type span { display: inline-block; width: 15px; height: 15px; background: #CCC; border-radius: 50%;}
.price { margin-bottom: 8px; text-align: right; font-size: 1.2rem; font-weight: 500;}
.price em { font-size: 1.6rem; font-weight: 500;}



.ranking-link { display: none; }
.ranking-link.active { display: block; }
.set-link { display: none; }
.set-link.active { display: block; }

#producers .tab-sub .swiper-slide { background: #E2D7BE;}
#producers .tab-sub .swiper-slide-thumb-active { background: #EFEADB; color: #A58847;}
#producers .slider figure { padding-top: calc(96 / 160 * 100%);}
#producers .slider figure img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

#newarrivals header { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; padding-top: 40px; color: #600F18;}
#newarrivals header i { position: absolute; top: 0; left: -8px; font-size: 4.5rem; opacity: 0.1; white-space: nowrap; pointer-events: none; }
#newarrivals section { margin: 0 -16px; padding: 16px 0; color: #FFF;}
#newarrivals section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: rgb(59,7,13); background: linear-gradient(0deg, rgba(59,7,13,1) 0%, rgba(96,15,24,1) 100%); z-index: -1;}
#newarrivals.slider figure img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#newarrivals.slider .swiper-slide a:first-of-type { color: #FFF;}

#newarrivals .modal-conts { color: #333; }

#set .slider figure { background: #E2D7BE;}

#program header { max-width: initial; margin: 0 -16px -40px; padding: 16px 16px 56px; background: url("../img/top/program.jpg") center no-repeat; background-size: cover; border-top: 6px solid #A58847;}
#program header h2 { margin-top: 16px; font-size: 1.4rem; color: #FFF;}
#program .tab-sub .swiper-slide { grid-template-columns: 1fr; min-width: 78px; height: 40px; padding: 0 16px; text-align: center; background: #918975; font-family: "SpratRegular", serif; font-size: 1.6rem;}
#program .tab-sub .swiper-slide-thumb-active { background: #F3F0E7; color: #918975;}
#program .slider figure { background: none;}

#program .ttl-home-program { width: 406px; max-width: 100%; height: auto; }

@media screen and (max-width: 900px) {
  #program .tab-sub .swiper { overflow: hidden; }
  #program .tab-sub .swiper-slide { min-width: 0; width: min(15vw, 78px); }
}
.information { display: grid; gap: 8px; margin-bottom: 16px;}
.information li a { display: grid; grid-template-columns: 100px 1fr; gap: 8px;}
.information-time { position: relative; align-self: flex-start; padding-top: 100%; overflow: hidden;}
.information-time figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.information-time time { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; height: 100%; background: rgba(0,0,0,.5); line-height: 1; color: #FFF;}
.information-time time .year { font-size: 1.4rem;}
.information-time time .day { font-size: 2rem;}
.information-time time .time { font-size: 1.2rem;}
.information-time time .venue { padding: 2px 8px; border: 1px solid #FFF; border-radius: 24px; font-size: 1rem;}
.information-contents { padding: 16px; border-top: 1px solid #A58847;}
.information-contents h3 { margin-bottom: 8px; font-size: 1.6rem;}
.information-contents p,
.information-contents .outline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-backface-visibility: hidden; font-size: 1.2rem;}
.information li:last-child .information-contents { border-bottom: 1px solid #A58847;}

#concierge { margin-top: 16px; background: #DFEBE5;}
#concierge section { display: grid; grid-template-columns: 1fr 100px; gap: 8px;}
#concierge section p { font-size: 1.2rem; font-weight: 700;}
#concierge section p span { display: inline-block; margin: 4px 4px 0 0; padding: 2px 8px; background: #BEE1D0; border-radius: 24px; font-size: 1rem; color: #13824D;}
#concierge section .button { grid-column: 1 / 3;}

#about { padding: 0;}
#about header { max-width: initial; padding: 8px; text-align: center; background: #330409; color: #FFF;}
#about header h2 { font-size: 1.4rem;}
#about header h2 em { font-size: 2rem;}
#about section { padding: 16px 16px 32px; text-align: center; color: #FFF;}
#about section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: rgb(59,7,13); background: linear-gradient(0deg, rgba(59,7,13,1) 0%, rgba(96,15,24,1) 100%); z-index: -1;}
#about section figure { margin: 0 -16px 8px;}
#about section h3 { font-size: 1.4rem;}
#about section h3 img { display: block; margin: 0 auto -8px;}
#about section p { margin: 16px 0; font-size: 1.2rem;}
#about .button.square { border-color: #600F18; color: #600F18;}

#topics { padding-top: 0; padding-bottom: 50px; }
#topics header { padding-top: 32px; border-top: 1px solid #A58847;}
.topics { display: grid; gap: 8px; text-align: center; }

#related.slider { padding-left: 0; padding-right: 0;}
#related.slider figure { padding-top: calc(130 / 200 * 100%);}
#related.slider figure img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#related.slider h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-backface-visibility: hidden; padding: 0; border-bottom: none; font-size: 1.3rem;}


/*PAGE*/
#breadcrumb { max-width: 1220px; margin: 0 auto; }
#breadcrumb + * { padding-top: 0;}
#breadcrumb ul { padding: 8px 16px;}
#breadcrumb li { display: inline; font-size: 1rem;}
#breadcrumb li:not(:first-child)::before { content: '＞';}
#title { margin-bottom: 1em;}
#title figure { position: relative; margin: 0 -16px 1em;}
#title figure i { position: absolute; bottom: 8px; left: 16px; font-size: 3.2rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: #FFF; text-shadow: 0 0 8px rgba(0,0,0,.4);}
#title figure i.center { bottom: 50%; left: 50%; transform: translate(-50%,50%);}
#title h1 { text-align: center; font-weight: 700;}
#title figure + h1:not(.center) { text-align: left; font-size: 1.8rem; font-weight: 400; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2`;}
#title .area { margin-top: 8px;}
#title.detail { margin: 0 -16px; padding: 0 16px 16px;}
#title.detail figure { padding-top: 100%;}
#title.detail figure img { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; object-fit: scale-down;}
#title.detail h1 { margin: 0 -16px; padding: 16px 16px 0; border-top: 1px solid #CEC5AF; font-size: 2rem; font-weight: 700;}
#title.detail h1 i { display: block; font-size: 1.4rem; font-weight: 400;}
.index-title { margin-bottom: 16px; text-align: center;}
.index-title i { margin-bottom: 8px; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em;}
.index-title h2 { font-size: 2rem;}
.img-title { position: relative; margin: 0 -16px 1em;}
.img-title figure { position: relative;}
.img-title h2 { position: absolute; bottom: 8px; left: 16px; text-align: left!important; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1; color: #FFF; text-shadow: 0 0 8px rgba(0,0,0,.4);}
.img-title h2.top { bottom: 0; top: 20%; margin-top: 0;}
.tag { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px;}
.tag a,
.tag span { display: inline-block; padding: 2px 8px; border: 1px solid #766949; border-radius: 24px; font-size: 1.2rem; color: #766949;}
.separate { margin: 0 -16px; padding: 16px; border-top: 1px solid #CEC5AF;}

.search { position:  relative; margin: 0 -16px ; padding: 16px; background: #F3F0E7; border-top: 1px solid #CEC5AF;}
.search dt { margin-bottom: 8px; font-size: 1.3rem; font-weight: 500;}
.search dd + dt { margin-top: 16px;}
.search dd { display: flex; flex-wrap: wrap; gap: 8px;}
.search dd label { height: auto;}
.search input[type="checkbox"], .search input[type="radio"] { display: none;}
.search input[type="checkbox"] + span:not(.areaname),
.search input[type="radio"] + span:not(.areaname),
.search .linkbtn { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 8px 16px; background: #FFF; border-radius: 12px; font-weight: 700; line-height: 1.2; color: #766949; opacity: 0.6; cursor: pointer; }
.search .linkbtn .all { line-height: 2; }
.search input[type="checkbox"]:checked + span, .search input[type="radio"]:checked + span,
.search .linkbtn.current { opacity: 1;}
.search input[type="radio"] + span.face,
.search .linkbtn .name { font-size: 1rem;}
.search input[type="radio"] + span.face em,
.search .linkbtn .name em{ font-size: 1.3rem;}
.search input[type="radio"] + span.face img,
.search .linkbtn .face img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }
.search input[type="text"] { width: 100%; margin-top: 16px; padding: 8px 8px 8px 32px; background: #ebe6d8 url("../img/common/searchbtn.svg") 8px center no-repeat; border-bottom: 5px;}
.search select,
.search .radio-group p { width: 100%; margin-top: 16px; padding: 8px 32px 8px 8px; background: url("../img/common/select.svg") right 8px center no-repeat; border-bottom: 1px solid #CEC5AF;}
.search input[type="submit"] { display: block; width: 200px; margin: 24px auto 0; padding: 8px; border: 1px solid #A58847; font-weight: 700; color: #A58847;}
.filterbtn { position: absolute; bottom: -44px; right: 16px; padding: 4px 16px 4px 32px; background: url("../img/common/filter.png") no-repeat 4px center / 2em auto; border: 1px solid #766949; border-radius: 40px; font-size: 1.3rem; color: #766949; cursor: pointer; z-index: 99; }

.filter { display: block; margin-top: 16px; padding: 7em 16px 16px; background: #f4f0e8; border-radius: 5px; }
.filter-delete { display: flex; flex-wrap: wrap; gap: 4px;}
.filter-delete a { display: inline-block; padding: 4px 32px 4px 8px; background: #FFF url("../img/common/delete.svg") right 8px center no-repeat; border-radius: 5px; font-weight: 700;}
.search + .sort { padding: 16px 128px 16px 16px;}
.search + .mainarea .sort { padding: 16px 128px 16px 16px; margin-bottom: 16px; }
.sort { display: flex; align-items: center; gap: 8px; margin: 0 -16px 32px; padding: 16px; border-bottom: 1px solid #CEC5AF; position: relative; }
.sort .counter { margin-right: auto; font-size: 1.6rem;}
.sort select,
.sort .current{ margin-left: auto; padding-left: 24px; background: url("../img/common/sort.png")  no-repeat left center / 18px 18px; font-size: 1.3rem; color: #766949; cursor: pointer; }

.sort .sort-choices { display: none; position: absolute; top: calc(100% - .5em); right:120px; background: #FFF; z-index: 2; padding: 1em 2em; color: #766949; font-size: 1.3rem;  }
.sort .sort-choices > li + li { margin-top: 1em; }
.sort .sort-choices.open { display: block; }

.sort.nofilter .sort-choices { right: .5rem; }

.list { display: grid; gap: 32px;}
.list a:first-of-type { display: grid; grid-template-columns: 100px 1fr; gap: 8px; width: 100%;  align-items: flex-start; }
.list .button { margin-top: 16px; width: 100%; }
.list figure { position: relative; width: 100%; padding-top: 100%; overflow: hidden;}
.list figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down;}
.list h3 { font-size: 1.4rem;}
.list .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 1.2rem; color: #999;}
.list .area { grid-template-columns: 24px 1fr; margin-bottom: 4px; font-size: 1.2rem; font-weight: 400;}
.list .varieties { grid-template-columns: 24px 1fr; font-size: 1.2rem; font-weight: 400; margin-bottom: .5em; }
.list .price em { font-size: 2rem;}
.list .pc-price { display: none; }
.list .producer { margin: 4px 0 8px; }
.list p { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-backface-visibility: hidden; font-size: 1.2rem; color: #999;}
.list p span { position: absolute; bottom: 0; right: 0; background: #f4f0e8; text-decoration: underline;}
.list p span::before { content: '...'; position: absolute; top: 0; right: 100%; padding: 0 0.2em; background: #f4f0e8; text-decoration: none;}
.screen-reader-text { display: none;}

.pagination .wp-pagenavi { margin: 32px -16px 0; padding: 24px 16px; border-top: 1px solid #CEC5AF; border-bottom: 1px solid #CEC5AF; text-align: center; font-family: "Inter", sans-serif; font-size: 1.3rem; font-weight: 500; white-space: nowrap; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;}
.pagination a { display: flex; justify-content: center; align-items: center; color: #766949;}
.pagination span { display: flex; justify-content: center; align-items: center; height: 35px; font-weight: 700;}
.pagination span.current { width: 34px; background: #766949; border-radius: 5px; color: #FFF;}

.catlist { display: grid;}
.catlist > li { padding: 16px; border-bottom: 1px solid #CEC5AF;}
.catlist a { display: block;}
.catlist .allarea { display: block; padding: .5em; }
.catlist a::after { content: ''; clear: both; display: block;}
.catlist figure { float: left; margin-right: 8px; width: 40px; }
.catlist h3 { float: left; margin-right: 8px; font-size: 1.4rem; line-height: 1.4;}
.catlist h3 i { display: block; font-size: 1.2rem; font-weight: 300;}
.kind { float: right; display: flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 700; color: #766949;}
.arealist a.haschild::before { content: ''; float: right; display: block; margin-top: 8px; width: 12px; height: 7px; background: url("../img/common/select.svg") center no-repeat;}
.arealist a.haschild.on::before { transform: rotate(180deg);}
.arealist > li > ul { display: none; clear: both; padding-top: 8px;}
.arealist > li > ul li i { display: block; font-size: 1.2rem;}
.arealist > li > ul li { margin-top: 8px; padding-top: 8px; border-top: 1px solid #CEC5AF;}
.arealist > li > ul ul { margin-left: 1em;}


.radio-group-child label { cursor: pointer; }
.radio-group-child > ul { display: none; }
.radio-group-child > ul > li { border-bottom: 1px solid #CEC5AF; }
.radio-group-child label { padding: 10px 16px; display: block; }
.radio-group-child > ul > li.hasc::before { content: ''; float: right; display: block; margin-top: 20px; width: 12px; height: 7px; background: url("../img/common/select.svg") center no-repeat; pointer-events: none; }
.radio-group-child > ul > li.hasc.on::before { transform: rotate(180deg);}
.radio-group-child > ul > li > ul { display: none; }
.radio-group-child > ul ul { margin-left: 1em; }
.radio-group-child > ul  ul li { border-top: 1px solid #CEC5AF; }


.sommelierslist { display: grid; gap: 32px;}
.sommelierslist a { position: relative; display: block; padding: 16px 16px 16px 30%; background: #EFEADB; border-radius: 5px;}
.sommelierslist a::after { content: ''; position: absolute; top: -16px; right: 24px; width: 45px; height: 45px; background: url("../img/sommeliers/badge.png") center no-repeat; background-size: contain;}
.sommelierslist figure { position: absolute; bottom: 0; left: 0; width: 30%; height: 114%; overflow: hidden;}
.sommelierslist figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down;}
.sommelierslist h3 { position: relative; display: inline-block; margin-bottom: 8px; padding-right: 24px; font-size: 1rem; line-height: 1.4; color: #766949;}
.sommelierslist h3::before { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); display: block; margin-top: 8px; width: 12px; height: 7px; background: url("../img/common/select.svg") center no-repeat;}
.sommelierslist h3 em { display: block; font-size: 1.6rem; color: #222;}
.sommelierslist p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; -webkit-backface-visibility: hidden; padding: 0; border-bottom: none; font-size: 1rem; color: #766949;}

.itemlist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 16px;}
.itemlist a:first-of-type { display: block;}
.itemlist figure { position: relative; width: 100%; padding-top: 100%; background: #FFF; overflow: hidden;}
.itemlist figure img { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; object-fit: scale-down;}
.itemlist figure.full { padding-top: calc(96 / 160 * 100%);}
.itemlist figure.full img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.itemlist h3 { margin: 8px 0; padding-bottom: 8px; border-bottom: 1px solid #A58847; font-size: 1.3rem;}
.itemlist h3 span { display: block; }
.itemlist h3 i { display: block; font-family: "SpratRegular", serif; font-weight: 400; font-size: 1.1rem; height: 1.3em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.itemlist .price em { font-size: 1.6rem;}
.itemlist .button { width: 100%; }

.post h1 { position: relative; font-size: 1.8rem; font-weight: 400;}
.post h2 { text-align: center; font-size: 2rem; font-weight: 700;}
.post h3 { position: relative; text-align: center; font-size: 1.6rem; font-weight: 700;}
.post h3::after { content: ''; display: block; width: 50px; height: 3px; margin: 8px auto 0; background: #9B8833;}
.post h3 i { font-size: 1.1rem; font-weight: 400;}
.post h3 span { position: absolute; top: 0; right: 0; z-index: -1;}
.post h3 span img { width: 88px;}
.post h4 { font-size: 1.5rem; font-weight: 700; text-align: center; }
.post h5 { font-size: 1.4rem; font-weight: 700; text-align: center; }
.post * + h2, .post * + h3, .post * + .img-title { margin-top: 3em;}
.post * + h4, .post * + h5, .post * + ul, .post * + ol, .post * + .wp-block-quote, .post * + .wp-block-columns, .post * + .related { margin-top: 2em;}
.post * + p, .post * + figure, .post * + .wp-block-buttons, .post * + .comment, .post * + .button { margin-top: 1.5em;}
.post ul { display: grid; gap: 1em; list-style: none;}
.post ul li { position: relative; padding-left: 32px;}
.post ul li::before { content: ''; position: absolute; top: 6px; left: 8px; transform: rotate(45deg); width: 10px; height: 10px; background: #766949;}
.post ol { display: grid; gap: 1em; list-style: none; counter-reset: number;}
.post ol li { position: relative; padding-left: 32px;}
.post ol li::before { counter-increment: number; content: counter(number); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; background: #766949; border-radius: 50%; font-family: "Inter", sans-serif; font-weight: 700; line-height: 1; color: #FFF;}
.post .wp-block-table table { width: 100%; border-collapse: collapse;}
.post .wp-block-table th { padding: 8px; text-align: center; vertical-align: center; background: #F3F0E7; border: 1px solid #CEC5AF; font-size: 1.3rem; white-space: nowrap; width: 30%; }
.post .wp-block-table td { padding: 8px; border: 1px solid #CEC5AF; font-size: 1.2rem;}
.post .wp-block-quote { display: flex; flex-direction: column-reverse;}
.post .wp-block-quote cite { margin-bottom: 8px; font-weight: 700; font-style: normal; color: #766949;}
.post .wp-block-quote p { margin-left: 1em; padding-left: 1em; border-left: 1px solid #766949;}
.post .wp-block-button { text-align: center;}
.post .wp-block-button a { display: block; width: 100%; max-width: 400px; margin: 0 auto; padding: 8px 32px; text-align: center; color: #766949; border-radius: 48px; font-weight: 700; line-height: 1.2; font-size: 1.2rem; border: 1px solid  #766949; background: none; }
#ez-toc-container { margin: 2em 0; padding: 16px 20px; background: #FFF;}
.ez-toc-title { margin-bottom: 8px; font-size: 1.6rem; font-weight: 700;}
.post .ez-toc-list li { padding-left: 0;}
.post .ez-toc-list > li { padding-left: 0; padding-bottom: 1em; border-bottom: 1px solid #A9A9A9;}
.post .ez-toc-list li ul { margin-top: 8px; margin-left: 1em; font-size: 1.3rem;}
.post .ez-toc-list li::before { display: none;}


.post .accordion-block { background: #FFF; border: 1px solid #A9A9A9; margin: 2em 0 0;}
.post .accordion-block .accordion-inner { height: 200px; overflow: hidden; padding: 1em;  }
.post .accordion-block.open .accordion-inner { height: auto; }
.post .accordion-block .accordion-title { padding: 1em; border-bottom: 1px solid #A9A9A9; font-weight: bold; }
.post .accordion-block .accordion-button { text-align: center; border-top: 1px solid #A9A9A9; padding: .5em; font-size: 1.3rem; cursor: pointer; }
.post .accordion-block .accordion-button::after { content: ''; width: .4em; height: .4em; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-50%) rotate(45deg); display: inline-block; margin-left: .5em; }
.post .accordion-block.open .accordion-button::after { transform: translateY(-50%) rotate(225deg); }


.post .explain-conts { background: #e1dbcf; padding: 1em; border-radius: 10px; margin-top: 1em; }
.post .attention-point { background: #ede8de; padding: 2em 1em 1em; border-radius: 10px; margin-top: 1em; position: relative; }
.post .attention-point::before { content: ''; width: 6em; height: 2em; background: url("../img/common/Point.svg") no-repeat left top / 100% auto; position: absolute; top: -.5em; left: 1em; margin: auto; transform: rotate(-10deg); }
.post .attention-point .title { border-bottom: 1px solid; padding-bottom: .5em; margin-bottom: .5em; color: #766949; font-weight: bold; }

.post .button.cart { width: 100%; }
.button.cart.soldout { background: #BBB; }


.post-body a { color: #766949; }
.post-body a[target="_blank"] {text-decoration: underline; }


.post-body table { margin: 1em 0 .5em;}
.post-body table td:first-child { background: #ede8de; width: 30%;  }
.post .wp-element-caption { font-size: 1.2rem; }


.has-small-font-size { font-size: 1rem;}
.has-medium-font-size { font-size: 1.4rem;}
.has-large-font-size { font-size: 1.6rem;}
.has-x-large-font-size { font-size: 1.8rem;}
.has-xx-large-font-size { font-size: 2rem;}
.producers { gap: 24px 32px;}
.producers figure { align-self: flex-start; padding-top: 100px;}
.producers figure img { object-fit: contain; object-position: top center; }
.producer { margin-top: 8px; font-size: 1.2rem; font-weight: 300; line-height: 1.3; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.profile { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 0 16px; margin-top: 2em; padding: 16px; background: #EFEADB;}
.bg .profile { background: #FFF;}
.profile figure { position: relative; grid-column: 1 / 2; grid-row: 1 / 3; padding-top: 60px; border-radius: 50%; overflow: hidden;}
.profile figure img { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; object-fit: cover; object-position: top center; background: #FFF; }
.profile-name { font-size: 1.1rem;}
.profile-name em { display: block; font-size: 1.6rem; font-weight: 700;}
.profile-position { font-size: 1.2rem;}
.profile-star { display: flex; gap: 4px;}
.profile-description { margin-top: 1em; padding-top: 1em; grid-column: 1 / 3; border-top: 1px solid #CEC5AF;}
.profile h3 { text-align: left;}
.profile h3::after { display: none;}
.profile-time { text-align: right; font-size: 1.1rem; font-weight: 400; color: #999;}
.profile.alt  { grid-template-columns: 98px 1fr;}
.profile.alt figure { padding-top: 0; border-radius: 0;}
.profile.alt figure img { position: relative;}
.profile.alt .profile-name { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #CEC5AF;}
.review h3,
.review h4 { font-size: 1.6rem; margin-bottom: .5em;  color: #766949; text-align: left; }
.review figure { border-radius: 0;}
.review .profile-name { font-size: 1.4rem;}
.review .profile-description { padding-top: 0; border-top: none;}
.related { display: grid; grid-template-columns: 100px 1fr; gap: 0 16px; padding: 16px; background: #F3F0E7; border-radius: 5px; overflow: hidden;}
.related h4 { grid-column: 1 / 3; margin: -16px -16px 16px; padding: 8px; text-align: center; background: #EFEADB;}
.related figure { position: relative; width: 100%; margin: 0; padding-top: 100%; background: #FFF; overflow: hidden;}
.related figure img { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; object-fit: scale-down;}
.related p { font-size: 1rem;}
.related .related-contents h5 { text-align: left; }



.comment { display: grid; grid-template-columns: 100px 1fr; align-items: flex-start; gap: 0 16px; margin-bottom: 1em; }
.comment figure { position: relative; padding-top: 100px; border-radius: 50%; overflow: hidden;}
.comment figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.comment p { position: relative; margin: 0; padding: 16px; background: #FFF; border: 1px solid #CEC5AF; font-size: 1.3rem;}
.comment p::before, .comment p::after { content: ''; position: absolute; top: 24px; left: -14px; width: 0; height: 0; border-style: solid; border-color: transparent #cec5af transparent transparent; border-width: 7px 14px 7px 0px;}
.comment p::after { left: -12px; border-right-color: #FFF;}


.speech-bubble { margin-bottom: 2em; }
.speech-bubble .head { display: grid; grid-template-columns: 100px 1fr;  align-items: center; gap: 0 16px; margin-bottom: 1em; margin-bottom: 1.2em; }
.speech-bubble .title { font-size: 1.4rem; }
.speech-bubble .name { font-weight: bold; display: block; font-size: 1.6rem; }
.speech-bubble .name .role { font-weight: normal; font-size: .7em; }
.speech-bubble .bubble { background: #EFEADB; border-radius: 5px; padding: 1em; position: relative; }
.speech-bubble .bubble::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 .5em 1em; display: block; border-color: transparent transparent  #EFEADB; position: absolute; bottom: 100%; left: calc(50px - .5em); margin: auto; }

.glsr-review-author { display: inline; }

.buy h2 { text-align: left; font-size: 1.4rem;}
.stock { font-weight: 700;}
.original { font-size: 1.2rem; color: #999;}
.original em { font-size: 2rem; font-weight: 500;}
.strike { text-decoration: line-through;}
.buy { margin-top: 16px; }
.buy .price { text-align: left; font-size: 1.4rem; color: #600F18;}
.buy .price em { font-size: 2.8rem;}
.stocklist { position: relative; display: grid; gap: 16px;}
.stocklist h2 { text-align: left;}
.attention { position: absolute; top: 24px; right: 16px;}
.attention button { display: inline-block; padding-left: 20px; background: url("../img/common/attention.svg") left center no-repeat; font-size: 1.2rem; font-weight: 500;}

.modal-conts { display: none; overflow-y: scroll; padding: min(15vw, 100px) 0; }
.modal-conts.show { display: block; width: 100%; height: 100%; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; }
.modal-inner { width: 90%; margin: 0 auto; max-width: 800px; background: #FFF; position: relative; }
.modal-conts .close { position: absolute; top: 1em; right: 1em; background: #EFEADB; height: 2em; width: 2em; text-align: center; line-height: 2; z-index: 2; border-radius: 50%;  } 
.modal-conts .close::before,
.modal-conts .close::after { content: ''; width: 1em; height: 1px; display: block; position: absolute; inset: 0; margin: auto; background:#766949;  } 
.modal-conts .close::before { transform: rotate(45deg); }
.modal-conts .close::after { transform: rotate(-45deg); }

.modal-inner .title { font-weight: bold; padding: 3rem 5rem 1rem; border-bottom: 1px solid #DDD; font-size: 1.5rem; }
.modal-inner .conts { padding: 2rem 5rem; }
.modal-inner .desc { display: grid; grid-template-columns: 4em minmax(0, 1fr);  border-top: 1px solid #DDD; margin-top: 3rem; }
.modal-inner .desc > dt,
.modal-inner .desc > dd { padding: 3rem 0; border-bottom: 1px solid #DDD;  }
.modal-inner .desc > dt span { background: #EFEADB; font-family: "SpratRegular", serif; color: #766949;display: block; text-align: center; }
.modal-inner .desc > dd { padding-left: 1rem; }
.modal-inner .desc .ttl { font-weight: bold; margin-bottom: 1em; text-align: left; font-size: 1em; }
.modal-inner .desc .ttl::after { display: none; }

.modal-inner .price-list { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; }
.modal-inner .price-list dt { text-align: left; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #DDD; padding-right: 1em; }
.modal-inner .price-list dd {  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #DDD; display: flex; align-items: center; }
.modal-inner .price-list dd a { width: 100%; }
.modal-inner .price-list .price { text-align: left; }
.modal-inner .price-list .button { width: 100%; }

@media screen and (max-width: 768px) {
	.modal-inner .title,
	.modal-inner .conts { padding-left: 5%; padding-right: 5%; }
  
  .modal-inner .price-list { grid-template-columns: 1fr; }
  .modal-inner .price-list dt { border: none; padding: 0; margin-bottom: .5em;  }
}


.stock { background: #FFF;}
.stock-info { padding: 16px;}
.stock-info h3 { text-align: left; font-size: 1.8rem; color: #766949;}
.stock-info h3 span { position: relative; z-index: auto; }
.stock-info h3 .price em { font-size: 2rem; }
.stock-info h3::after { display: none;}

.stock-info .subinfo { font-weight: normal; font-size: 1.4rem; }

.stock-info .score { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;}
.stock-info .score span { display: inline-block; padding: 2px 6px; background: #EFEADB; border-radius: 24px; font-family: "SpratRegular", serif; font-size: 1rem; font-weight: 400; color: #766949;}
.stock-info .price { clear: both; display: flex; align-items: baseline;}
.stock-info .excluded { margin-right: auto; font-size: 1.2rem; color: #999;}


.evaluate { display: none; padding: 16px; border-top: 1px solid #CEC5AF;}
.evaluate h4 { font-size: 1.4rem; color: #766949;}
.evaluate p { font-size: 1.2rem;}
.evaluatebtn { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 8px 16px; background: #FBF9F3; font-size: 1.2rem; color: #766949; cursor: pointer;}
.evaluatebtn::after { content: ''; display: block; width: 12px; height: 7px; background: url("../img/common/select.svg") center no-repeat;}
.evaluatebtn.on::after { transform: rotate(180deg);}

.sommeliers #title h1 { text-align: center; font-size: 1.6rem; font-weight: 700; color: #766949;}
.sommeliers #title h1 i { display: block; font-size: 3.2rem; font-weight: 400;}
.prof { position: relative; display: grid; grid-template-columns: 40% 1fr; gap: 0 16px; align-items: center; margin: 0 -16px; padding: 16px; background: #EFEADB;}
.prof figure { grid-row: 1 / 3; margin-bottom: -16px; text-align: center;}
.prof figure img { width: 100%; max-width: 160px; max-height: 240px; object-fit: cover; object-position: top center;  }
.prof h2 { align-self: flex-end; font-size: 1.4rem; color: #766949;}
.prof ul { display: grid; gap: 4px; list-style: disc; margin-left: 1.5em; font-size: 1.3rem;}

@media screen and (max-width: 768px) {
  .prof { display: block; }
  .prof figure { grid-row: none; width: 60%; display: block; margin: 0 auto 2em; }
}
.anchor li { padding: 0!important;}
.anchor li::before { display: none;}
.anchor a { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-bottom: 1px solid #766949; font-size: 1.6rem; font-weight: 700; color: #766949;}

.importer { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px 16px!important; margin: 32px 0;}
.importer li { padding-left: 0!important;}
.importer li::before { display: none;}
.importer figure { position: relative; width: 100%; padding-top: calc(100 / 164 * 100%); background: #FFF; z-index: 1; overflow: hidden;}
.importer figure img { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; object-fit: scale-down;}
.importer h3 { margin: 8px 0; padding: 0; text-align: left; font-size: 1.3rem; line-height: 1.2;}
.importer h3::after { display: none;}
.importer p { margin: 0; font-size: 1rem;}

.noresult { text-align: center; padding: 2em 0;}
.noresult p { margin: 1em 0;}





@media only screen and (min-width: 951px){
html { font-size: 75%;}


/*HEADER*/
/*******************************************************************/
#header { position: relative;   background: #600F18; }
#header.scrolled { position: sticky; transform: translateY(-100%); }
#header.scrolled.show { transform: translateY(0); transition: transform .3s; }
  
#header .inner { display: flex; flex-wrap: wrap; gap: 24px;z-index: 1000;padding: 16px 32px; max-width: 1284px; margin: 0 auto;  }
#logo { position: absolute; top: 32px; left: 50%; transform: translate(-50%,-50%);max-width: 256px;}
#nav { order: 1; width: calc(100%); margin: 0; background: #FFF; font-size: 1.3rem; position: relative; }
#nav > ul { display: flex; justify-content: center; gap: 16px; line-height: 1; list-style: none;}
#nav li a { display: flex; align-items: center; gap: 8px; padding: 16px;}
#nav li a.haschild::after { content: ''; position: relative; transform: rotate(45deg); display: block; width: 8px; height: 8px; border-right: 1px solid #222; border-bottom: 1px solid #222;}
#nav li:hover ul { pointer-events: all; opacity: 1;} 
#nav li li a { padding: 8px; font-size: 1.3rem; font-weight: 500; color: #FFF;}
#open { display: none;}
.searchbtn { display: none;}
.searchbox { position: relative; top: 0; left: 0; width: auto; padding: 0; opacity: 1; pointer-events: auto;}

  
#nav .head-mega-menu {position: absolute; top: 100%; left: 0; right: 0;  width: 1220px; margin: auto; max-width: 90vw; pointer-events: none; opacity: 0; display: block; }
#nav .head-mega-menu ul { display: block; }
#nav li:hover .head-mega-menu { pointer-events: all; opacity: 1;} 

#nav .head-wine-search { background: #FFF; width: 100%; padding: 3rem 5%; }
#nav .head-wine-search > ul {  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 3rem; color: #333; }
#nav .head-wine-search a { color: #333; font-size: 1.2rem; }
  
  
  
  #nav .head-sommelier-list { background: #FFF; padding: 3rem 5%; }

  #nav .head-sommelier-list > ul {  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 3rem; color: #333;}
  #nav .head-sommelier-list a { color: #333; margin-bottom: 0;  }
  #nav .head-sommelier-list .name { margin: 0;}
  #nav .head-sommelier-list .view { font-size: 1.2rem; }
/*FOOTER*/
/*******************************************************************/
#footer { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: flex-start; gap: 64px;}
#footer .logo { display: none;}
#sitemap { display: flex; flex-direction: column-reverse; gap: 24px; max-width: 780px;}
#sitemap .sitemap { grid-template-columns: repeat(4,1fr); gap: 24px;}
#sitemap .sitemap > li > a,
#sitemap .sitemap a.large-item { font-size: 1.2rem; font-weight: 700; color: #FFF; border-bottom-width: 2px; }
#sitemap .sitemap > li > a.haschild { pointer-events: none;}
#sitemap .sitemap > li > a.haschild::after { display: none;}
#sitemap .sitemap > li.wide { grid-column: 1 / 4; grid-row: 2 / 6;}
#sitemap .sitemap > li.sub { grid-column: 4 / 5; grid-row: 2 / 6;}
#sitemap .sitemap > li:not(.sub) > ul { display: block;}
#sitemap .sitemap > li > ul a { font-size: 1.1rem;}
#sitemap .sns { justify-content: flex-start; margin: 0 0 16px;}
#info { max-width: 420px; font-size: 1rem;}
#info .info-title { font-size: 1.2rem;}
#info .homewine { text-align: right;}
#info p { font-size: 0.9rem;}
#info .copyright { font-size: 0.8rem;}


/*CONTENTS*/
/*******************************************************************/
.sp { display: none;}


/*TOP*/
#mv section { width: 100%; position: relative; height: 281px; }
  #mv .swiper { width: 1564px; position: absolute; left: 50%; transform: translateX(-50%); height: 281px; }
  
#mv .swiper-next, #mv .swiper-prev { width: 44px; height: 44px; top: calc(50% - 22px);}
#mv .swiper-prev { left: -56px;}
#mv .swiper-next { right: -56px;}
#country { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 1220px; margin: 0 auto;}
#country .index-title { grid-column: 1 / 3;}
#country section { width: 100%; margin: 0;}
#newarrivals section { margin: 0 auto; padding: 32px 0;}
.column-pc { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; gap: 40px; max-width: 1000px; margin: 0 auto; padding-bottom: 32px; }
  
.column-pc.-one-column { grid-template-columns: 1fr; max-width: 500px; }
  
#concierge section { grid-template-columns: 1fr 160px; padding: 40px;}
#concierge section p { display: flex; flex-direction: column; align-items: flex-start;}
.tab-main { padding: 32px 0;}
.tab-main .button.square { margin: 50px auto 20px;}
.slider .rank { width: 42px; height: 42px;}
#program header { padding: 64px 64px 80px;}
.information { margin-bottom: 32px;}
#about section { display: grid; grid-template-columns: 1fr 56%; gap: 0 16px; max-width: 1000px; padding: 32px 16px 32px; text-align: left;}
#about section figure { align-self: flex-end; grid-column: 2 / 3; grid-row: 1 / 4; margin: 0 -20% 0 0;}
#about section h3 { font-size: 1.8rem;}
#about .button.square { width: 100%; margin: 0;}
.topics { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; max-width: 1000px; margin: 0 auto;}

.list-about-point { margin-top: 3rem; }
  
/*PAGE*/
#title h1 { text-align: left;}
#title.detail { display: grid; grid-template-columns: 400px minmax(0, 1fr); align-items: flex-start; gap: 50px;  margin-top: 2rem;}
#title.detail figure { width: 400px;  margin: 0 auto; padding: 0;}
#title.detail figure img { position: relative; width: 100%;  object-fit: scale-down; top: 0; left: 0; }
.img-title h2 { bottom: 10%; left: 4%; font-size: 3.2rem;}
.img-title h2.top { top: 10%;;}

.post { max-width: 840px; margin: 0 auto;}
.post:first-of-type{ padding-top: 0; }
.narrow { max-width: 840px; margin: 0 auto;}
.column { display: grid; grid-template-columns: 1fr 30%; align-items: flex-start; gap: 16px 56px; max-width: 1220px; margin: 0 auto 50px; padding-top: 0; }
.column #title, .column .index-title { grid-column: 1 / 3; width: 100%; text-align: left;}
.column section { width: 100%;}
.column .search {order: 2; margin: 0; padding: 0 0 0; background: none; border-top: none;}
.search dl { padding: 16px; background: #e9e4d4;}
.filterbtn { position: relative; bottom: 0; right: 0; margin-top: 24px; padding: 0 0 8px; background: none; border: none; border-bottom: 1px solid #CEC5AF; border-radius: 0; color: #000; pointer-events: none; cursor: auto;}
.filter { display: block!important; padding: 0;}
.filter-delete a { font-size: 1rem;}
.sort { margin: 0; padding: 0 0 16px!important;}
  .sort .sort-choices { right: -2em;}

.list { display: grid; gap: 32px;}
.list li { position: relative; display: flex; }
.list li:not(:first-child) { padding-top: 32px; border-top: 1px solid #CEC5AF;}
.list:not(.producers) a:first-of-type { grid-template-columns: 150px 1fr; }
.list.product a:first-of-type  { width: 100%;  padding-right: 0 ;}
.list .button { position: absolute; bottom: 0; right: 0; width: 25%; margin-top: 16px; cursor: pointer; transition: opacity .2s ease-out;}
  .list .button:hover{  opacity: 0.6; }
.list .price { position: relative; top: 0; right: 0; display: block; width: fit-content; margin: 0 0 0 auto;  }
.list p { -webkit-line-clamp: 4;}

.list .pc-price { display: block; width: 40%; padding-bottom: 5rem;  }
.list-contents.product .price { display: none; }
  

.itemlist { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px;}

.importer { grid-template-columns: repeat(3,1fr); gap: 40px!important;}
}

.post .product-detail-producers { display: grid; display: grid; grid-template-columns: 100px 1fr; column-gap: 8px; margin: 2em 0; color: #333; }
.post .product-detail-producers figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.post .product-detail-producers h3 { text-align: left; }
.post .product-detail-producers h3::after { display: none; }
.post .product-detail-producers .producer { margin-bottom: 8px;}

  
@media only screen and (max-width: 950px){
  #sitemap .sitemap > li:nth-child(4) { grid-column: 1 /3; }
  #sitemap .sitemap > li:not(.sub) > .menulist { display: block; display: grid;  grid-template-columns: 1fr 1fr; gap: 16px 8px; }
}


.glsr-no-margins { text-align: center; margin: 1em 0;}
.review-wrap .glsr-reviews, 
.review-wrap .glsr-reviews-wrap { display: block; }
.wine-reveiw-form { display: none; margin-top: 2em; border: 2px solid #fff; padding: 2em 5%; background: #FFF; }


@media only screen and (min-width: 951px){
  .wine-reveiw-form { padding: 3rem; }
}

@media screen and (max-width: 950px) {
  .catlist-wrap { width: 100%; margin-bottom: 50px; }
  .column { display: flex; flex-direction: column; padding-top: 0; }
  .search + .mainarea { display: contents; }
  .column .post { order: 1; margin-bottom: 50px; padding-top: 0; }
  .column .search { order: 2;  }
  .column .sort { order: 3; }
  .column .single-search-result-title { order: 4; }
  .column .search-result { order: 5; }
  
  .filter{ position: fixed; right: 0; top: 0; margin: auto; transform: translateX(100%); transition: transform .3s; z-index: 100; height: 100%; overflow-y: scroll; width: 80%;  }
.filter.show { transform: translateX(0%);box-shadow: -2px 0 10px rgba(0,0,0,.1);  }

}

.sp-fixed-cart { display: none; }
.sp-fixed-cart.show { display: block; position: fixed; left: 0; right: 0; width: 100%; bottom: 0; margin: auto; z-index: 10; }
.sp-fixed-cart .inner { display: grid; grid-template-columns: 1fr; z-index: 10; background: #FFF; width: 100%; }
.sp-fixed-cart .button { margin: 0; width: 100%; border-radius: 0; max-width: none; }
.sp-fixed-cart .button.favorite { background: #FFF; border: 1px solid #CCC; color: #333; }
@media only screen and (min-width: 951px){
  .sp-fixed-cart.show { display: none; }
}


.sidebar-title { border-bottom: 1px solid #CEC5AF; margin-bottom: 1em; padding-bottom: 1em; font-weight: normal; font-size: 1.3rem; color:#766949; }

.grape-sort { width: calc(100% + 32px); }
.sidebar-banner { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.sidebar-recommend-info > * { margin-bottom: 1em; }
@media only screen and (min-width: 951px){
  .grape-sort { width: 100%; }
  .sidebar-recommend-info { margin-top: 4.5rem; }
  .sidebar-banner { grid-template-columns: 1fr; }
  .sidebar-recommend-info .is-layout-flex { display: block; }
  
  .sidebar-recommend-info .is-layout-flex > * { margin-bottom: 1em; }
}



.sigle-wine-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: stretch; margin-top: 2em; }
.sigle-wine-related .related-product { margin: 0; }

.related-product { padding: 16px; background: #F3F0E7; border-radius: 5px; overflow: hidden;}
.related-product h4 { grid-column: 1 / 3; margin: -16px -16px 16px; padding: 8px; text-align: center; background: #EFEADB;}
.related-product figure { position: relative; width: 100%; margin: 0; padding-top: 100%; background: #FFF; overflow: hidden; height: 0; margin-bottom: 1em; }
.related-product figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down;}
.related-product p { font-size: 1rem;}
.related-product .related-contents h5 { text-align: left; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media only screen and (min-width: 601px){
  .sigle-wine-related { grid-template-columns: repeat(3, 1fr); gap: 1em; }
}

.wine-basic-info { position: relative; }
.wine-basic-info.-acc .inner { height: 200px; overflow: hidden; }
.wine-basic-info.open .inner { height: auto; padding-bottom: 2em; }
.wine-basic-info.-acc .morebtn { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; padding-top: 3em; z-index: 2; display: block; background: linear-gradient(to bottom , transparent , #f4f0e7 60%); width: 100%; text-align: center; font-size: 1.3rem; color: #766949; }
.wine-basic-info.open .morebtn { height: 2em; padding-top: 0; }



.eval-point-wrap { padding: 2em 0; 
  border-image-source: linear-gradient(#EFEADB,#EFEADB);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;}
.eval-point-wrap .subtitle { margin: 0; text-align: center; position: relative; display: block; font-size: .7em; z-index: 1;}
.eval-point { display: grid; grid-template-columns: 100px 1fr; gap: 8px; margin-top: 1em; }

.eval-point h3 { text-align: left; color: #9B8833; }
.eval-point h3::after { display: none; }
.eval-point img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.eval-point .eval-detail .inner { height: 5em; overflow: hidden;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.eval-point .eval-detail .inner.show { height: auto; -webkit-line-clamp: none; overflow: visible; display: block; }
.eval-point .eval-detail .morebtn { display: block; width: fit-content; color: #9B8833; font-size: .8em; margin: 0 0 0 auto;}




.list-ranking { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 80px; }
.ranking-cat { background: #ebe6d8; padding: 16px; display: flex; flex-wrap: wrap; margin-bottom: 32px; gap: 8px; }
.ranking-cat a { background: #FFF; color: #766949; font-weight: bold; padding: 8px 16px; border-radius: 12px; opacity: .6; margin-right: 4px; }
.ranking-cat a.current { opacity: 1; } 
.list-ranking .price em{ font-size: 2em; }

.list-ranking .meta { display: none; }
.list-ranking .desc { display: none; }

  .filterbtn.nomargin { margin-top: 2px; padding-bottom: 18px;  }
@media screen and (max-width: 950px) {
  .list-ranking { grid-template-columns: repeat(3,  minmax(0, 1fr)); gap: 40px; }
  
  .filterbtn.nomargin { margin-top: 0; padding-bottom: 4px; }
}
@media screen and (max-width: 601px){
  .list-ranking { grid-template-columns: 1fr; }
  .list-ranking .ranking-item { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin-bottom: 1em; align-items: flex-start; }
  .list-ranking.slider h3 { border: none; margin: 0; font-size: 1.4rem; padding: 0; }
  .list-ranking.slider h3 span { height: auto!important; }
  .list-ranking.slider h3 i { display: none; }
  .list-ranking .meta { display: flex; margin-bottom: 1em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 1.2rem; color: #999;}
  .list-ranking .desc { display: block; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-backface-visibility: hidden; font-size: 1.2rem; color: #999; }
  .list-ranking .desc span { position: absolute; bottom: 0; right: 0; background: #F7F6F2; text-decoration: underline;}
  .list-ranking .desc span::before { content: '...'; position: absolute; top: 0; right: 100%; padding: 0 0.2em; background: #F7F6F2; text-decoration: none;}

}


.wine-set-form { display: contents; }
.wine-party-banner > li { margin-bottom: 1em;}


.archive-price-list { display: grid; grid-template-columns: 4em minmax(0, 1fr); align-items: baseline; text-align: left; }
.archive-price-list dd { white-space: nowrap; }
@media print {
#container { width: 1024px;}
}

.ez-toc-link { cursor: pointer; }