@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; /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */
}

@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で高さいっぱいに */
  
  line-height: 1.5; /* アクセシブルな行の高さ */
}

:where(input, button, textarea, select) {
  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); /* 見出しの行の高さを減らす */
}

/* .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);
}

:where(a) {
  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);
}
@media print, screen and (min-width:768px) {
  :where(p) {
    font-size: 15px;
  }
}
: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 (max-width:767px) {
  .pc {
    display: none !important;
  }
}
@media print, screen and (min-width:768px) {
  .sp {
    display: none !important;
  }
}
/* ==========================================================================
Layout
========================================================================== */
#thewine_sitetop{
	background: #391825;
	overflow: hidden;
	width: 100%;
}
span.thewinefull-br{
	margin: 0;
	flex-direction: column;
	align-items: baseline;
}
section h2 span.thewinefull-br::after,section h2 span.thewinefull-br span::after{
	display:none
}
span.thewinefull span {
	font-size: 11px;
	margin: 0 6px 0 0px;
	display: inline;
	letter-spacing: -0.05em;
}
section h2{
	margin-bottom: 64px;
	letter-spacing: 0.1em;
	font-size: clamp(27px,3.2vw,44px);
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	color: #fff;
}
section h2 span{
	display: flex;
	align-items: center;
	font-size: clamp(12px,1.3vw,17px);
	gap: 10px;
}
section h2 span::after{
	display: block;
	content: "";
	width:150px;
	height: 1px;
	background: #ffffff;
}
@media screen and (max-width:768px){
	section h2{
	margin-bottom:20px;
}
	section h2 span::after{
	width: 57px;
	}
}
.thewine-fv{
	position: relative;
	height: 94vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center
}
.thewine-fv .thewine-mv::before{
	content: "";
	display: block;
	width:100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #00000052;
	z-index: 10;
}
.thewine-fv .thewine-mv::after{
	content: "";
	display: block;
	width:100%;
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;
	background: #000000;
background: linear-gradient(180deg, rgb(0 0 0 / 75%) 55%, rgba(0, 0, 0, 0) 100%);
	z-index: 10;
}
.thewine-fv h1{
	position: absolute;
	top: 50%;
	left: 2vw;
	transform: translateY(-50%);
	width:50vw;
	max-width: 500px;
	animation: fade 1.5s forwards;
	z-index: 1000;
	height: 14vh;
}
.thewine-fv h1 img{
	height:100%;
	object-fit:contain
}
@keyframes fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@media screen and (max-width:768px){
	.thewine-fv h1{
	width:60%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}
}
.thewine-fv ul{
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap:10px;
	z-index: 100;
	font-weight:600;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	width: 90%;
}
.thewine-fv ul li{
	padding: 0 3px 4px;
	border-bottom: 1px solid;
	color: #fff;
	text-shadow: 0 2px 3px #000;
	line-height: 1.5;
	vertical-align: baseline;
}
.thewine-fv ul li span.thewinefull-br {
	font-size: clamp(12px, 3.5vw, 17px);
}
.thewine-fv ul li span.thewinefull-br span{
	font-size: clamp(10px, 0.7vw, 12px);
}
.thewine-fv ul li a{
	color: #fff;
	display: block;
	height: 100%;
	display: flex;
	align-items: flex-end;
}
.thewine-fv ul li:first-of-type a{
	display:flex;
	white-space:nowrap
}
@media screen and (max-width:768px){
	.thewine-fv ul{
		width: 100%;
		display: flex;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.thewine-fv ul li{
		display: inline-block;
		margin: 0 13px;
	}
}
.thewine-mv{
	width:100%;
	height: 100%;
}
.thewine-mv figure{
	height:100%
}
.thewine-mv figure img{
	height:100%;
	display:block;
}
.thewine-mv .thewine-mv-slider{
	width:100%;
	height: 100%;
}
.thewine-mv .thewine-mv-slider img{
	height:100%;
	object-fit:cover;
}



.top_textlink {
    background: #1b0b11;
}

.top_textlink p {
    text-align: center;
}
.top_textlink p a::before{
    content:"NEW OPEN";
    display:inline-block;
    padding: 5px 5px;
    background: #ffffff;
    color: #1b0b11;
    font-size: clamp(9px,1.2vw,10px);
}
.top_textlink p a {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 600;
    color: #ffffff;
    padding: 10px;
    gap: 10px;
    font-size: clamp(13px, 1.5vw, 15px);
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}
.top_textlink p a > span .sp{
	display:none;
}
@media screen and (max-width: 500px){
	.top_textlink p a > span .sp{
	display:block;
  }
}
.top_textlink p.newopen a::before{
    content:"NEW OPEN";
}
.top_textlink p.hot a::before{
    content:"HOT";
}
.top_textlink p.event a::before{
    content:"EVENT";
}
.top_textlink p.sale a::before{
    content:"SALE";
}
.top_textlink p.news a::before{
    content:"NEWS";
}


.news-area{
	padding: 80px 30px;
}
.news-area .content{
	display: grid;
	grid-template-columns: 200px 1fr;
	gap:7%;
}
@media screen and (max-width:768px){
	.news-area .content{
		grid-template-columns: 1fr;
		gap:15px;
	}
}
.news-area .news-wrap{
	padding: 15px 20px 20px;
	display: grid;
	gap:30px 0;
	background: #ffffffe6;
	border: none;
}
.news-area .news-wrap li a{
  	display: grid;
	grid-template-columns: 15% 1fr;
	gap:0 8%;
	align-items: center;
	color: #000;
}
@media screen and (max-width:768px){
	.news-area .news-wrap li a{
		grid-template-columns: 1fr;
		gap:10px;
	}
}
.news-area .news-wrap li:nth-of-type(n+2)::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #c3c3c3;
	transform: translateY(-16px);
}
.news-area .news-wrap li a .date{
	margin: 0;
	font-weight: 600;
	border-right: 1px solid;
	font-size: clamp(11px,1.5vw,14px);
}
@media screen and (max-width:768px){
	.news-area .news-wrap li a .date{
	border-right: none;
	}
}
.news-area .news-wrap li a .date span{
	margin: 5px 0 0;
	display: block;
	font-size: clamp(12px,1.7vw,14px);
	line-height: 1.0;
}
.news-area .news-wrap li a .news-content{
	margin: 0;
	font-size: clamp(13px,1.7vw,16px);
	line-height: 1.5;
}



.about-area{
	padding: 100px 0 200px;
	overflow: hidden;
}
@media screen and (max-width:768px){
	.about-area{
		padding: 50px 0 160px;
	}
}
.about-area .about-content{
	position: relative;
}
.about-area .about-image{
	width: 57%;
	position: absolute;
	top:50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 1000;
	height: 40vh;
}
.about-area .about-image img{
	height:100%;
	object-fit:cover;
	object-position:center left
}
@media screen and (max-width:768px){
	.about-area .about-image{
		position: relative;
		width:80%;
		top:auto;
		transform: translateY(0);
		height: 26vh;
	}
}
.about-text-wrap{
	margin: 0 0 0 auto;
	padding: 39px 0 50px;
	writing-mode:vertical-rl;
	background: #fff;
	width:80%;
	color: #391825;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	box-shadow: 0 -19px 10px #0000002e;
	z-index: 100;
	position: relative;
	display: flex;
	font-feature-settings: initial;
	height: 59vh;
}
@media screen and (min-height:500px) and (max-height:800px){
	#thewine_about .about-text-wrap{
		height: 80vh;
	}
}
@media screen and (max-width:768px){
	.about-text-wrap{
		margin: -2% 0 0 auto;
		padding: 43px 30px 27px;
		width: 80%;
		height: 68vh;
	}
}
@media screen and (max-width:400px){
	.about-text-wrap{
		width: auto;
	}
}
.about-title{
	margin-left: 20px;
	font-size: clamp(20px,3.0vw,30px);
	display: block;
}
p.about-text{
	font-size: clamp(14px,2.2vh,18px);
	max-width: 1200px;
	width: 80%;
	margin: 0 auto;
}
@media screen and (min-width:1500px){
	p.about-text{
		width: 70%;
	}
}
@media screen and (max-width:1050px){
	p.about-text{
		width:90%;
	}
}
.about-link{
	border-bottom: 2px solid;
	color: #391825;
	writing-mode: rl;
	margin: 20px 20px 0 auto;
	position: relative;
}

@media screen and (max-width:550px){
	.about-link span.thewinefull-br{
		display:flex;
		line-height: 1.4;
	}
}
.about-link a{
	padding: 9px 110px 10px 5px;
	color: #391825;
}
.about-link::after{
	content: "";
	display: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 7px 0 7px 62px;
	border-color: transparent transparent transparent #391825;
	position: absolute;
	bottom: -1px;
	right: -10px;
	transform: translateY(50%);
}
@media screen and (max-width:768px){
	.about-link::after{
	border-width: 4px 0 5px 35px;
	}
	.about-link a{
	padding: 0 30px 10px 5px;
}
}
	.about-link a{
	  display:flex;
	  align-items:flex-end;
	  gap:3px;
	  
	 }

.topics-area{
	padding: 0 31px 100px;
	position: relative;
	width: 100%;
}
.topics-area h2{
	grid-column: 1/5;
}
.x-post{
	padding: 15px;
	background: #fff;
	width:70%;
	border-radius:10px;
}
.x-post .twitter-timeline.twitter-timeline-rendered{
	margin:0 auto;
		height:50vh;
		overflow:hidden
}
@media screen and (min-width:768px) and (max-width:900px){
	.x-post{
	width: calc((100% - 230px) - 30px);
	}
}
@media screen and (max-width:768px){
	.x-post{
	width:80%;
		margin:0 auto
  }
	.x-post .twitter-timeline.twitter-timeline-rendered{
	margin:0 auto;
		height:50vh;
		overflow:hidden
}
}
.accounts-wrap{
	display: grid;
	gap:20px;
	position: absolute;
	right: 16px;
	top:100px
}
@media screen and (max-width:768px){
	.accounts-wrap{
		margin: 30px auto 0;
		width: 95%;
		display: flex;
		position: relative;
		top: 0;
		flex-direction: column;
		right: 0;
	}
}
.accounts-wrap li{
	width: 100%;
	min-width: 230px;
}
@media screen and (max-width:768px){
	.accounts-wrap li{
		width: 100%;
		max-width: 260px;
		margin: 0 auto;
	}
}
.accounts-wrap li a{
	padding: 15px 15px 20px;
	color: #fff;
	display: block;
}
.x-account{
	background: #000;
}
.line-account{
	background: #39a756;
}
.account_button{
	padding: 10px 15px;
	display: flex;
	gap:10px;
	color: #000;
	background: #fff;
	border-radius: 20px;
	font-size: 16px;
	align-items: center;
	max-width: 230px;
	margin: auto;
}
.account_button figure{
	width:50px;
}
.x-account .account_button figure{
	border: 1px solid #ccc;
	border-radius: 50%;
	overflow: hidden;
}
@media screen and (max-width:768px){
	.account_button figure{
		width:30px;
	}
}
.account_button p{
	width: calc((100% - 50px) - 10px);
	white-space: nowrap;
}
@media screen and (max-width:768px){
	.account_button p{
		width: calc((100% - 30px) - 10px);
	}
}
.account_button p span{
	color: #b8b8b8;
	font-size: 12px;
	display: block;
}
p.x-text{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
		text-align: center;
}
p.x-text::before,p.x-text::after{
	content:"/";
	display: inline-block;
	font-size:20px;
	margin: 0 6px;
}
p.x-text::before{transform: scale(1,-1);}
.follow-us{
	margin-bottom:10px;
	text-align: center;
}



.winefair-area {
	background: url(https://www.tokyu-dept.co.jp/thewine/winefair_bg.webp) no-repeat center/cover;
	padding: 20vh 30px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
}
.winefair-block{
	display: grid;
	grid-template-columns: 70% 1fr;
	gap:50px;
	color: #fff;
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
figure.fair-image {
	width: 50%;
}
@media screen and (max-width:768px){
	.winefair-area {
	padding: 20vh 39px;
	}
	.winefair-block{
		grid-template-columns: 1fr;
	}
	
}
.winefair-block .winefair-text-wrap{
	position: relative
}

.winefair-block .winefair-text-wrap h2{
	margin-bottom: 64px;
	font-size: clamp(33px,4.5vw,62px);
	z-index:10;
	position:relative;
	letter-spacing: 0.1em;
}
.winefair-block h2 span::after{
	display:none
}
.winefair-block .winefair-text-wrap h2 .month{
	margin: 0 5% 0 0;
	width: 100px;
	display: inline-block;
	position:relative;
	z-index:10;
	text-align: center;
	vertical-align: middle;
	font-size: clamp(19px, 4.5vw, 34px);
	letter-spacing: 0;
}
.winefair-block .winefair-text-wrap h2 .month::before{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	background: url(https://www.tokyu-dept.co.jp/thewine/winefair-sealing.webp) no-repeat top left/contain;
	aspect-ratio:145/154;
	width: 130px;
	transform: translate(-50%,-50%);
	z-index:-1;
}
.winefair-area .thewine-bt a{
	background:#9e8a23
}
@media screen and (max-width:768px){
	.winefair-block .winefair-text-wrap h2 .month::before{
	width: 110px;
	}
}
.winefair-block .winefair-text-wrap h2 .month span{
	font-size: clamp(39px,4.3vw,66px);
	display: inline;
}
@media screen and (max-width:470px){
	.winefair-block .winefair-text-wrap h2 .month{
		margin: 0 0 15px -12px;
		font-size: clamp(15px, 1.5vw, 21px);
		width: 70px;
	}
	.winefair-block .winefair-text-wrap h2 .month span{
	font-size: 26px;
	}
	.winefair-block .winefair-text-wrap h2 .month::before{
	width: 68px;
}
	.winefair-block .winefair-text-wrap h2{
	font-size: clamp(33px, 4.5vw, 44px);
	margin: 0 0 20px;
	transform: translateX(0px);
	}
}
.winefair-block .winefair-text{
	font-size: clamp(14px,1.8vw,18px);
	line-height: 2.0;
}
.winefair-block .winefair-text span{
	margin: 0 0 10px;
	font-size: clamp(19px,2.2vw,26px);
	display: block;
}
.winefair-block .winefair-text span span{
	font-size: clamp(15px,1.7vw,22px);
	border-bottom:1px solid;
	display:inline-block;
	transform:translateY(-5px)
}
.winefair-block .winefair-text span.kome{
	font-size: 12px
}
.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;
}
.fair-image img{
	height: 100%;
	object-fit: contain;
}
@media screen and (max-width:768px){
	.fair-image{
		position: absolute;
		top:0;
		height: 100px;
		right: 0;
	}
}

.mail-area{
	padding: 100px 50px;
	background: #f2f2f2;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
}
@media screen and (max-width:768px){
	.mail-area{
	padding: 100px 30px;
	}
}
.content{
	max-width: 1200px;
	margin: 0 auto;
}
.mail-area .content{
	display: grid;
	grid-template-columns: 20% 1fr;
	gap:5%;
	position: relative
}
@media screen and (max-width:768px){
	.mail-area .content{
		grid-template-columns: 1fr;
		gap:20px;
	}
}
.mail-area .content h2{
	font-size: clamp(16px,3.5vw,27px);
	color: #000;
	line-height: 1.6;
}
section.mail-area h2 span::after{
	display:none
}
.mail-area .content h2 span.mailmagtext::after{
	background:#000;
	width: 15%;
	display:block
}
@media screen and (max-width:768px){
	.mail-area .content h2{
		width: 100%;
		margin:0 auto 0 0;
		line-height: 1.3;
	}
	.mail-area .content h2::after{
		content:"";
		display:block;
		width:20%;
		background:url(https://www.tokyu-dept.co.jp/thewine/mailmagazin-img.webp) no-repeat center/contain;
		aspect-ratio:155/237;
		position: absolute;
		top: 0;
		right: 0;
	}
	.mail-area .content h2 span.mailmagtext::after{
	background:#000;
	width: 37px;
}
}
@media screen and (max-width:380px){
	.mail-area .content h2{
		width:100%;
		font-size: clamp(13px, 2.5vw, 20px);
	}
	.mail-area .content h2::after{
		width: 20%;
		transform: translateY(-9%);
	}
}
@media screen and (max-width:460px){
	.mail-area .content h2{
		font-size: clamp(13px, 2.5vw, 20px);
	}
}
span.thewinefull-br span{
	display:block;
	font-size: clamp(11px, 0.8vw, 13px);
	letter-spacing: -0.05em;
}
@media screen and (min-width: 800px){
	.mail-area .content h2 > span:first-of-type,.mail-area .content h2 > span:first-of-type > span{
		/* display:inline; */
		font-size: clamp(15px, 2.3vw, 22px);
		gap: 0;
	}
	span.thewinefull-br{
		font-size: clamp(14px, 3.5vw, 22px);
		margin: 0 0px 0 0;
		line-height: 1.0;
		align-items: flex-start;
		gap: 2px;
		margin: 0 11px 0 0;
	}
	.mail-area .content h2 span.mailmagtext{
		display:flex
	}
}
.mail-area .content h2 span.mailmagtext{
	font-size: clamp(25px,4.8vw,47px);
	margin: 0 0 20px;
}
section .mail-wrap h2 span{
	gap:0
}
section .mail-wrap h2 span.thewinefull-br{
font-size: clamp(16px,4.8vw,20px);
}
@media screen and (max-width:460px){
	.mail-area .content h2 span.mailmagtext{
	font-size: clamp(21px,2.8vw,30px);
	margin: 0 0 20px;
	}
	.mail-area .content h2 > span:first-of-type{
		flex-direction:column;
		align-items:flex-start;
		font-size: clamp(14px, 1.3vw, 17px);
	}
	.mail-area .content h2 > span:first-of-type span{
		align-items:flex-start;
	}
	.mail-area .content h2 > span:first-of-type > span{
		justify-content:flex-end;
		align-items: flex-end;
		gap: 5px;
		margin-bottom: 9px;
		font-size: clamp(15px, 1.3vw, 17px);
	}
	.mail-area .content h2 > span:first-of-type span span{
		gap:0;
	}
}
@media screen and (max-width:380px){
	.mail-area .content h2 span.mailmagtext{
	font-size: clamp(20px,2.8vw,30px);
	}
}
.mail-image{
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-size: clamp(14px,2.1vw,20px);
	justify-content: center;
	text-align: center;
}
@media screen and (max-width:768px){
	.mail-image{
		display:none
	}
}
.mail-image figure{
	margin: 0 auto 20px;
	width:85%;
}
@media screen and (max-width:768px){
	.mail-image p{
		display: none
	}
}

.mail-image p span{
	display: block;
	font-size: clamp(14px, 3.5vw, 12px);
}
.mailwrap-list{
	margin-bottom: 40px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:40px;
	color: #8a782a;
}
@media screen and (max-width:768px){
	.mailwrap-list{
		margin-top: -17px;
	}
}
@media screen and (max-width:503px){
	.mailwrap-list{
		margin: -10px 0 41px;
		grid-template-columns: 1fr;
		gap: 0;
	}
}
.mailwrap-list li{
	display: grid;
	gap:10px;
	grid-template-columns: 24% 1fr;
	text-align: center;
}
@media screen and (max-width:768px){
	.mailwrap-list li{
		display:block;
	}
}
.mailwrap-list li::before{
	content:"";
	display: inline-block;
	background:#f2f2f2 url(https://www.tokyu-dept.co.jp/thewine/tokuten-icon01.webp) no-repeat center/90%;
}
@media screen and (max-width:768px){
	.mailwrap-list li::before{
		transform: translateY(50%);
		width:60px;
		height: 50px;
	}
}
.mailwrap-list li:nth-of-type(2)::before{
	background:#f2f2f2 url(https://www.tokyu-dept.co.jp/thewine/tokuten-icon02.webp) no-repeat center/90%;
}
.mailwrap-list li p{
	padding: 10px;
	border-top:1px solid;
	border-bottom:1px solid;
	font-size: clamp(20px,2.0vw,24px);
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mailwrap-list li:nth-of-type(2) p{
	/* font-size: clamp(14px,1.7vw,19px); */
}
@media screen and (max-width:768px){
	.mailwrap-list li p{
	padding: 20px 10px 10px;
	height:109px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin: 0;
}
}
.mailwrap-list li p span{
	display: block;
	font-size: clamp(14px,1.7vw,16px);
}
.mail-merit{
	color: #000;
	font-size: clamp(16px, 2.2vw, 20px);
	letter-spacing: 0.1em;
	font-feature-settings: "palt";
}
.mail-merit::before{
	content:"";
	display: inline-block;
	width:15px;
	aspect-ratio:1/1;
	background:#000;
	border-radius: 50%;
	margin-right: 10px;
}
.mail-merit:nth-of-type(n+2){
	margin-top:15px;
}
.mail-merit .font-big{
	font-size: clamp(18px,2.5vw,26px)
}
@media screen and (max-width:768px){
	.mail-merit:nth-of-type(n+2){
	margin-top:5px;
}
}

.stores-area{
	padding: 100px 50px 150px;
	color: #fff;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
@media screen and (max-width:768px){
	.stores-area{
	padding: 50px 30px 70px;
  }
}
.stores-area .content{
	max-width:1200px;
	margin:0 auto
}
.stores-area .store-block{
	display: grid;
	grid-template-columns: 1fr 45%;
	gap: 52px 5%;
	align-items:center;
}
.stores-area .store-block .thewine-bt a{
  background: #9e8a23;
  padding:5px 10px
}
@media screen and (max-width:768px){
	.stores-area h2{
		margin-bottom:40px
	}
	.stores-area .store-block{
	display: block;
	}
}
.google-map,.google-map iframe{
	width: 100%;
	height: 100%;
}
.stores-area .store-block:nth-of-type(n+2){
	margin-top: 125px;
}
.stores-area .store-block h3{
	grid-column: 1/3;
	font-size: clamp(20px,2.3vw,26px);
}
@media screen and (max-width:768px){
	.google-map iframe{
		height:20vh
	}
	.stores-area .store-block h3{
		grid-column:auto;
		margin: 0 0 27px;
	}
}
.stores-area .store-block h3 span{
		font-size: clamp(16px,2.0vw,20px);
}
.stores-area .store-block h3 span.big {
	font-size: clamp(20px, 3vw, 35px);
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
	border-bottom: 1px solid;
	margin: 5px 0 0 0;
}
.stores-area .store-block .access-box{
	display: grid;
	grid-template-columns: 85px 1fr;
	grid-column: 2;
	align-items: center;
	gap: 15px 20px;
}
@media screen and (max-width:768px){
	.stores-area .store-block .access-box{
		margin: 27px 0 0;
	}
	.stores-area .store-block h3 span.big{
		display:block;
		margin: 10px 0 0;
	}
}
.stores-area .store-block .access-box .access-title{
	padding-bottom: 5px;
	border-bottom: 1px solid;
	font-size: clamp(12px,1.7vw,16px);
	grid-column: 1;
	text-align: center;
}
.stores-area .store-block .access-box .access-text{
		font-size: clamp(16px,2.0vw,20px);
		grid-column: 2;
		line-height: 1.5;
}
dd.access-text a {
    margin-top: 4px;
    display: block;
    color: #f0d3ae;
    font-size: clamp(13px, 1.7vw, 18px);
}

dd.access-text a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
    transform: rotate(135deg);
    margin-left: 10px;
}



.onlinestore-area {
	background: #fff;
	padding: 100px 50px;
	color: #000;
}
@media screen and (max-width:768px){
	.onlinestore-area{
	padding: 50px 30px 70px;
  }
}
.onlinestore-area h2{
	display: grid;
	grid-template-columns: 357px 1fr;
	color: #000;
}
.onlinestore-area h2 span::after{
	background:#000
	}
.onlinestore-area h2 .online-subtitle{
	font-size: clamp(16px,2.0vw,20px);
}
@media screen and (max-width:768px){
	.onlinestore-area h2{
	grid-template-columns: 200px 1fr;
	gap: 18%;
}
	.onlinestore-area h2 .online-subtitle{
		font-size:13px;
	}
}
@media screen and (max-width:500px){
	.onlinestore-area h2{
	grid-template-columns:1fr;
	gap: 10px;
		margin-bottom:50px;
}
}
.onlinestore-area h2 .online-subtitle{
	display: flex;
	gap:10px;
	align-items: center;
	justify-content: flex-end;
	letter-spacing: 0;
	line-height: 1.6;
}
.onlinestore-area h2 .online-subtitle span.thewinefull-br{
	margin:0;
	gap: 7px;
	/* display: inline-flex; */
}
@media screen and (max-width:768px){
	.onlinestore-area h2 .online-subtitle{
		display:block
	}
	.onlinestore-area h2 .online-subtitle br{
		display:none
	}
	.onlinestore-area h2 .online-subtitle span.thewinefull-br{
		line-height:1.0
	}
	.onlinestore-area h2 .online-subtitle span.thewinefull-br span{
		font-size:11px
	}
}
@media screen and (max-width:500px){
	.onlinestore-area h2 .online-subtitle{
	justify-content: flex-start;
}
}
.onlinestore-area h2 .online-subtitle::after{
	content:"";
	display: none;
	width:50px;
	height: 1px;
	background: #000;
	transform: translateY(-15px);
}
@media screen and (max-width:768px){
	.onlinestore-area h2 .online-subtitle::after{
		display:none
	}
}
.onlinestore-ranking{
	margin-bottom: 50px;
}
.onlinestore-area h3{
	font-size: clamp(16px,2.0vw,20px);
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 600;
	text-align:center;
	margin-bottom:20px;
}
.bnr-wrap{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:20px;
}
@media screen and (max-width:768px){
	.bnr-wrap{
	grid-template-columns: 1fr;
		max-width:500px;
		margin:0 auto
  }
}

.campaign-area{
	padding: 80px 50px;
	background: #333232
}
.campaign-area .bnr-wrap{
	grid-template-columns: repeat(3,1fr);
	gap:10%
}
@media screen and (max-width:768px){
	.campaign-area .bnr-wrap{
	grid-template-columns: repeat(2,1fr);
	gap:10%
  }
}
.sns-wrap a img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
footer{
	padding: 49px 20px;
	display: flex;
	justify-content: center;
	position: relative;
	background: #220e16;
}
.sns-wrap{
	position: absolute;
	top:50%;
	right: 50px;
	transform: translateY(-50%);
	display: flex;
	gap: 28px;
}
.sns-wrap a{
	width:50px;
}
.footerlogo {
    width: 200px;
}
@media screen and (max-width:768px){
	footer{
	padding: 30px 20px 30px;
	}
	footer a{
	width:45%
	}
	.sns-wrap{
		top: 50%;
		bottom: 0px;
		gap: 18px;
		right:10px
	}
	.sns-wrap a{
		width:30px;
	}
}
.sns-wrap a img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}



#thewine_about{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	background: #391825
}
#thewine_about h2{
	padding: 0 0 0 39px;
	font-size: clamp(26px,2.8vw,54px);
	position: relative;
	margin-bottom: 47px;
	z-index: 100;
}
@media screen and (max-width:768px){
	#thewine_about h2{
	padding: 0 0 0 20px;
	margin-bottom: 27px;
	}
}
#thewine_about h2::before{
	content: "01";
	display: block;
	position: absolute;
	top: 0;
	left: -20px;
	color: #221117;
	z-index: -1;
	font-size: clamp(111px,9.8vw,300px);
	letter-spacing: 0;
}
#thewine_about .aboutpoint-block:nth-of-type(2) h2::before{
	content: "02";
}
#thewine_about .aboutpoint-block:nth-of-type(3) h2::before{
	content: "03";
}
#thewine_about section h2 span::after{
	display:none
}
#thewine_about section h2 span{
	display: block;
	font-size: clamp(20px, 2.8vw, 54px);
}
#thewine_about .thewine-fv{
	position: relative;
	height: 80vh;
}
#thewine_about .about-text-wrap{
	width: auto;
	padding: 50px 50px;
	position: absolute;
	top: 55%;
	right: 4%;
	background: #391825c9;
	color: #fff;
	display: block;
	transform: translateY(-50%);
	animation: fade 1.5s forwards;
	animation-delay: 0.5s;
	opacity: 0;
	height: 61vh;
}
@media screen and (max-width:768px){
	#thewine_about .thewine-fv{height: 92vh;}
	#thewine_about .about-title{
	font-size: clamp(15px, 3.2vh, 20px);
	}
	#thewine_about .about-text-wrap{
		padding: 30px 20px;
		top: 73%;
		height: 37vh;
		right: 0%;
	}
	#thewine_about p.about-text{
		font-size: clamp(12px, 2vh, 22px);
	}
	#thewine_about .thewine-fv h1{
		width: 47%;
		top: 34%;
		left: 50%;
	}
}
.aboutpoint-area {
	background: url(https://www.tokyu-dept.co.jp/thewine/aboutpoint_bg.webp) no-repeat center/cover;
	padding: 0 0 100px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
}
.aboutpoint-block{
	margin: 20vh 0 20vh auto;
	display: flex;
	gap:50px;
	color: #fff;
	justify-content: space-between;
	align-items: center;
	width: 90%;
}
.aboutpoint-block:nth-of-type(2){
	flex-direction:row-reverse;
	margin: 34vh auto 34vh 0;
}
@media screen and (max-width:768px){
	.aboutpoint-block{
		grid-template-columns: 1fr;
		margin: 20vh auto;
		flex-direction: column;
	}
	.aboutpoint-block:nth-of-type(2){
	flex-direction: column;
	margin: 34vh auto 34vh;
  }
}
.aboutpoint-block .aboutpoint-text-wrap{
	padding: 0;
	position: relative;
	max-width: 703px;
}
.aboutpoint-block figure {
    width: 50%;
}
@media screen and (max-width:768px){
	.aboutpoint-block figure {
    width: 80%;
}
}
.aboutpoint-block .aboutpoint-text{
	margin-top: 0;
	font-size: clamp(14px,1.8vh,20px);
	line-height: 2.2;
}
.fair-image img{
	height: 100%;
	object-fit: contain;
}
@media screen and (max-width:768px){
	.fair-image{
		position: absolute;
		top:0;
		height: 150px;
		left: calc((100% - 52%));
		transform: translateY(-24%);
		width: auto;
	}
}
@media screen and (max-width:488px){
	.fair-image{
		position: absolute;
		top: -24px;
		height: 122px;
		left: calc((100% - 31%));
	}
}


.thewine-stuff-slider .swiper-slide{
	padding:50px 20px;
	color: #fff;
	text-align:center;
	background: #240f18;
}
.thewine-stuff-slider .swiper-slide figure{
	width:60%;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 15px;
}
.thewine-stuff-slider .swiper-slide .name{
	font-size: clamp(15px,2.0vw,20px);
}
.thewine-stuff-slider .swiper-slide .explanation{
	font-size: clamp(13px,1.7vw,16px);
	max-width:250px;
	margin:0 auto
}