@charset "utf-8";
/* ==========================================================================
Base
========================================================================== */
/*!
 * @acab/reset.css
 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; /* もちろん、より直感的なbox-sizingに設定 */
  margin: 0; /* マージンは0に */
  padding: 0; /* パディングも常に0に */
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important; /* hiddenは非表示を意味します */
}

:where(html) {
  -webkit-text-size-adjust: none; /* iOSのランドスケープでテキストが調整されないようにする */
  color-scheme: dark light; /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */
height: -webkit-fill-available;

}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth; /* 何かにフォーカスがある場合のみスムーズスクロール */
  }
}
:where(body) {
  -webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */
  block-size: 100%; /* サファリ以外のブラウザのフォールバック */
  block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */
  font-family: system-ui, sans-serif; /* timeの代わりにシステムフォントを使用 */
  line-height: 1.5; /* アクセシブルな行の高さ */
height: -webkit-fill-available;

}

:where(input, button, textarea, select) {
  color: inherit; /* カラーも継承 */
  font: inherit; /* フォーム コントロールは親フォントを継承 */
}

:where(textarea) {
  resize: vertical; /* テキストエリアの水平リサイズを無効に */
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer; /* インタラクティブなものにカーソルを合わせる */
}

:where(:disabled) {
  cursor: not-allowed; /* フォームコントロール無効時のカーソルを許可しない */
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed; /* ラベルにもカーソルを許可しない */
}

:where(button) {
  border-style: solid; /* ボタンのボーダーのスタイルを設定しやすくする */
}

:where(a) {
  text-underline-offset: 0.2ex; /* 下線の上にスペースを追加する */
}

:where(ul, ol) {
  list-style: none; /* ビュレットを削除、必要に応じて手動で追加する */
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block; /* 置換された要素をより予測可能にする */
}

:where(img, picture, svg) {
  block-size: auto; /* アスペクト比を保持 */
  max-inline-size: 100%; /* images should never overflow past the available space */
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word; /* 長い単語は改行 */
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem); /* 見出しの行の高さを減らす */
}
h2{
	margin: 0
}
:where(hr) {
  block-size: 0;
  /* より一貫性のある、スタイリッシュなhr */
  border: none;
  -webkit-border-before: 1px solid;
  border-block-start: 1px solid;
  color: inherit;
  overflow: visible;
}

:where(:focus-visible) {
  /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

/* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */
:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  border: 0 !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

:root {
  --line-height-l: 2;
  --line-height-m: 1.75;
  --line-height-s: 1.5;
  --line-height-xs: 1.3;
  --letter-spacing-l: 0.12em;
  --letter-spacing-m: 0.08em;
  --letter-spacing-s: 0em;
}

/* Base
----------------------------------------------------------------- */
html {
  font-size: 62.5%;
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-l);
	color:#000
}


:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a):hover {
  text-decoration: none;
}
:where(ol),
:where(ul),
:where(dl) {
  list-style: none;
}

:where(em),
:where(i) {
  font-style: normal;
}

:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
  font-size: 1.6rem;
  font-weight: 700;
:where(p) {
}

  font-size: 14px;
  font-weight: 700;
  line-height: var(--line-height-m);
  margin-top: 15px;
}
@media print, screen and (min-width:768px) {
  :where(p) {
    font-size: 15px;
    margin-top: 0;
  }
}
:where(p).-center {
  text-align: center;
}

:where(em) {
  font-style: normal;
  font-weight: 500;
}

:where(img) {
  display: block;
  height: auto;
  width: 100%;
}

@media print, screen and (min-width:768px) {
  .sp-only {
    display: none;
  }
}
@media print, screen and (max-width:767px) {
  .sp-only {
    display: block;
  }
}
inut,
select,
textarea,
legend,
label,
form,
button {
  display: block;
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  appearance: none;
}
button:focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}
::placeholder {
  color: #333;
}
/* visually-hidden */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  clip-path: inset(50%);
}
div#thewinefir {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
header#winefair {
    padding: 5vh 30px;
}
header#winefair .winefair-block .winefair-text-wrap h2{
    margin:0
}
header#winefair .winefair-block::after{
	display:none
}
ul.store-tab {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2%;
    margin: 50px auto 20px;
    width: 93%;
}
@media screen and (max-width:768px){
	ul.store-tab{
		margin: 20px auto;
	}
}
ul.store-tab li {
    padding: 20px;
    border: 1px solid;
    text-align: center;
    font-weight: 600;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    margin-bottom: 0;
	transition:0.3s;
}
@media screen and (max-width:450px){
	ul.store-tab li{
		 padding: 20px 10px;
	}
}
ul.store-tab li.active{
	background:#391825;
	color:#fff;
}
.tab-content {
    display: none;
    opacity: 0;
    transition: 0.3s;
}

.tab-content.active {
    display: block;
    opacity: 1;
}
section.note-wrap {
    background: #e1e1e1;
    padding: 30px;
}
section.note-wrap h2, section.winelist h2{
	font-size:clamp(16px,1.9vw,22px);
	color:#000;
	line-height:1.5;
	margin-bottom:30px;
	letter-spacing: 0;
}
section.note-wrap .note {
    margin: 30px auto;
    width: 90%;
}
@media screen and (max-width:768px){
	section.note-wrap .note {
    width: 100%;
}
}
section.note-wrap .note h3{
	border-bottom:1px solid;
	margin-bottom:13px
}
p.caution {
	font-weight: 500;
	margin-top: 15px;
}
.note ul {
	display: grid;
	gap: 10px;
	font-weight: 600;
	margin-top: 15px;
}
.note ul li{
	display:grid;
	grid-template-columns:15% 1fr;
	gap: 5px 22px;
	font-size: clamp(16px,2.2vw,19px);
	align-items: center;
}
.note ul li span.caution{
	line-height: 1.0;
	grid-column:1/3;
	font-weight: 500;
	font-size: clamp(13px,1.5vw,15px);
}
.note ul li span.sub-title {
	font-size: clamp(13px,1.5vw,15px);
	border-right: 1px solid;
}
.thewine-bt{
	margin: 30px auto 0;
	background:#391825;
	border-radius: 100vh;
	max-width: 350px;
	text-align: center;
	font-size: clamp(16px,2.2vw,22px);
	letter-spacing: 0.1em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
}
.thewine-bt a{
	padding: 15px 20px;
	color: #fff;
	background: #391825;
	border-radius: 100vh;
	display: block;
}


section.winelist .list-header {
    display: grid;
    grid-template-columns: 47px 20% 5% 1fr 47px 60px 10%;
    gap: 0;
    background: #210e15;
    color:#fff;
    padding: 5px 2px 8px;
    box-sizing: border-box;
    text-align: center;
}
@media screen and (max-width:768px){
	section.winelist .list-header {
    grid-template-columns: 24px 20% 26px 1fr 39px 43px 50px;
    gap: 3px;
  }
	
}
section.winelist .list-header li{
	border-right:1px solid #ffffff94;
	font-size: clamp(9px,1.1vw,12px);
	line-height: 1.0;
	text-align: center;
}
section.winelist .list-header li:last-of-type{
	border:none
}
section.winelist .wine-list{
	width: 100%;
	margin:0 auto
}
section.winelist .wine-list li {
    margin: 15px 0;
    display: grid;
    grid-template-columns: 47px 20% 5% 1fr 47px 60px 10%;
    /* gap: 1%; */
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 9px 0;
}
@media screen and (max-width:768px){
	section.winelist .wine-list li {
    grid-template-columns: 24px 20% 26px 1fr 39px 43px 50px;
    gap: 3px;
    margin: 5px 0;
  }
	
}
section.winelist .wine-list li p{
	font-size: clamp(10px,1.0vw,14px);
	line-height: 1.3;
}
p.no, p.color, p.year {
    text-align: center;
}
section.winelist .wine-list li.limitedset {
    margin: 0;
    background: #86405b4d;
    position: relative;
}
.limitedset-text{
    background: #a95f7c;
    line-height: 1.2;
    font-size: clamp(11px,1.0vw,13px);
    color: #fff;
    padding: 5px;
    font-weight: 600;
    text-align: center;
}
@media screen and (max-width:768px){
	.limitedset-text{
    text-align: center;
  }
	li.limitedset + li.limitedset .explain-block{
		margin-top:30px;
		position:relative;
	}
	li.limitedset + li.limitedset .explain-block{
		display: block;
		background: #ffffff;
		border: 2px solid;
		width: 97%;
		transform:none;
		text-align: center;
		line-height: 1.2;
		font-size: clamp(11px,1.0vw,13px);
		color: #7d0d39;
		padding: 5px;
		font-weight: 600;
		margin: 0;
		box-sizing: border-box;
		padding: 15px;
		margin: 0 auto;
	}
}
section.winelist .wine-list li:last-of-type,section.winelist .wine-list li:first-of-type{
	margin:0
}
section.winelist .wine-list li.limitedset p.price {
    width: 80%;
}
.explain-block {
    grid-column: 1/9;
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: auto 1fr;
    gap: 14px 3%;
    margin: 15px auto;
    width: 100%;
    font-weight: 500;
    padding: 20px 15px 15px;
    border: 3px solid;
    margin: 0;
    background: #fff;
    z-index: 10;
}
.explain-block::after{
	display:none
}
section.winelist .wine-list li .explain-block p.name{
	font-weight:600;
	font-size: clamp(14px,2.0vw,18px);
	line-height: 1.3;
	margin: 12px 0 10px;
}
.explain-block p {
    grid-column: 2/3;
    font-weight: 500;
    margin: 0;
}
.explain-block figure {grid-row: 1/3;}
p.color {
    line-height: 1.3;
}
.wine-block {
    margin: 50px 0;
}
.wine-block:has( + h2){
	margin-top:0
}

.wine-block h3{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	background: #391825;
	color:#fff;
	padding: 5px 20px;
	margin: 0;
}
section.winelist{
	padding:0 30px
}
section.winelist.premium {
    margin: 50px 0;
}
@media screen and (max-width:768px){
	section.winelist{
	padding:0
}
	.winefair-area {
	padding: 20vh 39px;
	}
	.winefair-block{
		grid-template-columns: 1fr;
	}
	
}

div#winefairlist .thewine-fv{
  background: url(https://www.tokyu-dept.co.jp/thewine/winefair_bg.webp) center center / cover no-repeat;
  height: 41vh;
}
div#winefairlist .thewine-fv h1{
    color:#fff;
    font-size: clamp(30px, 4.2vw, 47px);
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 600;
    line-height: 1.0;
    margin-top: 30px;
    left: 5vw;
}

#winefairlist .winefair-list ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}
div#winefairlist section{
	width:90%;
	margin: 17vh auto 20vh;
	max-width:1200px;
}
div#winefairlist section h2{
	color:#000
}
div#winefairlist .winefair-block .winefair-text-wrap h2 .month{
	color:#ffffff
}


#winefairlist section.winefair-now .winefair-block{
	margin: 77px auto 0;
	gap: 0 10%;
	max-width: 100%;
	background: #220e16;
	padding: 60px 20px 40px;
	justify-content: center;
	grid-template-columns: 490px max-content;
	box-shadow: 5px 5px 10px #00000080;
}
#winefairlist section.winefair-now .winefair-block figure.fair-image{
	height:200px;
}
#winefairlist .winefair-block .winefair-text-wrap h2{
	color: #fff;
	font-size: clamp(27px, 4.5vw, 56px);
	margin: 0;
}
#winefairlist section.winefair-now .about-link{
	margin: 0px 0 0 auto;
	width: 218px;
	color:#fff;
	transition:0.3s;
}
#winefairlist section.winefair-now .about-link:hover{
	width: 250px;
	transform:translateX(32px)
}
#winefairlist section.winefair-now .about-link a{
	color:#fff;
	text-decoration:none;
}
#winefairlist section.winefair-now .about-link::after{
	    border-color: transparent transparent transparent #ffffff;
}
li.winefair-month .winefair-text-wrap h2 {
    padding: 0;
    margin: 0;
}
li.winefair-month {
    list-style: none;
}
li.winefair-month a{
    display: grid;
    justify-content: center;
    align-items:center;
    padding: 20px;
    text-decoration: none;
    grid-template-columns: 1fr 22%;
    background: #220e16;
    color: #fff;
    box-shadow: 0 3px 9px #00000080;
	transition:0.3s
}
li.winefair-month a figure{
	transition:0.3s;
}
li.winefair-month a:hover{
	box-shadow:none;
	transform:translateY(2px)
}
li.winefair-month a:hover figure{
	transform:scale(1.1)
}
p.monthtitle span span {
	font-size: clamp(20px,3.2vw,28px);
}

p.monthtitle {
	font-size: clamp(14px,1.8vw,20px);
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	letter-spacing: 0.1em;
}
figure.fair-image {
    height: 100px;
    width: auto;
}

figure.fair-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}