@charset "utf-8";
/* CSS Document */

body { font-size:calc(20 * 0.17vw); }
:target { scroll-margin-top: calc(130vw / 7.2); }


.fs12vw { font-size:calc(12 * 0.21vw); }
.fs14vw { font-size:calc(14 * 0.2vw); }
.fs15vw { font-size:calc(15 * 0.2vw); }
.fs16vw { font-size:calc(16 * 0.2vw); }
.fs17vw { font-size:calc(17 * 0.19vw); }
.fs18vw { font-size:calc(18 * 0.19vw); }
.fs20vw { font-size:calc(20 * 0.17vw); }
.fs21vw { font-size:calc(21 * 0.17vw); }
.fs22vw { font-size:calc(22 * 0.17vw); }
.fs23vw { font-size:calc(23 * 0.17vw); }
.fs24vw { font-size:calc(24 * 0.16vw); }
.fs25vw { font-size:calc(25 * 0.16vw); }
.fs26vw { font-size:calc(26 * 0.16vw); }
.fs27vw { font-size:calc(27 * 0.16vw); }
.fs28vw { font-size:calc(28 * 0.16vw); }
.fs29vw { font-size:calc(29 * 0.16vw); }
.fs30vw { font-size:calc(30 * 0.16vw); }
.fs31vw { font-size:calc(31 * 0.16vw); }
.fs32vw { font-size:calc(32 * 0.16vw); }
.fs33vw { font-size:calc(33 * 0.16vw); }
.fs34vw { font-size:calc(34 * 0.16vw); }
.fs35vw { font-size:calc(35 * 0.16vw); }
.fs36vw { font-size:calc(36 * 0.15vw); }
.fs37vw { font-size:calc(37 * 0.15vw); }
.fs38vw { font-size:calc(38 * 0.15vw); }
.fs40vw { font-size:calc(40 * 0.14vw); }
.fs42vw { font-size:calc(42 * 0.14vw); }
.fs44vw { font-size:calc(44 * 0.12vw); }
.fs45vw { font-size:calc(45 * 0.12vw); }
.fs46vw { font-size:calc(46 * 0.12vw); }
.fs48vw { font-size:calc(48 * 0.11vw); }
.fs50vw { font-size:calc(50 * 0.11vw); }
.fs52vw { font-size:calc(52 * 0.11vw); }
.fs53vw { font-size:calc(53 * 0.11vw); }
.fs54vw { font-size:calc(54 * 0.11vw); }
.fs55vw { font-size:calc(55 * 0.11vw); }
.fs56vw { font-size:calc(56 * 0.11vw); }
.fs58vw { font-size:calc(58 * 0.11vw); }
.fs60vw { font-size:calc(60 * 0.11vw); }
.fs62vw { font-size:calc(62 * 0.11vw); }
.fs64vw { font-size:calc(64 * 0.11vw); }
.fs65vw { font-size:calc(65 * 0.11vw); }
.fs66vw { font-size:calc(66 * 0.11vw); }
.fs68vw { font-size:calc(68 * 0.11vw); }
.fs70vw { font-size:calc(70 * 0.1vw); }
.fs72vw { font-size:calc(72 * 0.095vw); }
.fs80vw { font-size:calc(80 * 0.095vw); }
.fs84vw { font-size:calc(84 * 0.095vw); }
.fs90vw { font-size:calc(90 * 0.095vw); }
.fs98vw { font-size:calc(98 * 0.08vw); }
.fs100vw { font-size:calc(100 * 0.08vw); }
.fs105vw { font-size:calc(105 * 0.08vw); }
.fs110vw { font-size:calc(100 * 0.08vw); }
.fs140vw { font-size:calc(140 * 0.08vw); }
.fs160vw { font-size:calc(160 * 0.08vw); }
.fs180vw { font-size:calc(180 * 0.08vw); }

.pc { display: none; }
.sp { display: unset; }
.sp_left { text-align:left; }


.inner { width: 92%; max-width: unset; }
.middle_inner { width: 90%; max-width: unset; }
.inner_right { width: 90%; max-width: unset; margin-right:auto; margin-left:auto; }
.inner_left { width: 90%; max-width: unset; margin-right:auto; margin-left:auto; }

.low_inner { width: 92%; max-width: unset; }
.minimum_inner { width: 90%; max-width: unset; }



/*********** 弦 GEN / SP ****************************************/
/* デザインは1920のPCのみ。SPは 720 基準（/7.2）に置き換えて再構成 */

body { background-size:200% auto; }


/*********** header ****************************************/

header#header { height:calc(130vw / 7.2); }

header#header .site_name { inset:calc(18vw / 7.2) auto auto calc(30vw / 7.2); }
header#header .site_name .logo { width:calc(210vw / 7.2); }

header#header .tel_btn,
header#header .reserve_tab { display:none; }

/* ハンバーガー（バーの色は白 / ×は JS の --offset で中央寄せ） */
header#header #hamburger {
	display:block; position:absolute; inset:calc(50vw / 7.2) calc(30vw / 7.2) auto auto; z-index:9999;
}
header#header #hamburger .bar { width:calc(66vw / 7.2); height:2px; background:#FFFFFF; }
header#header #hamburger .bar_1 { margin-block-end:calc(20vw / 7.2); }
header#header #hamburger.active .bar_1 { transform:translateY(var(--offset)) rotate(45deg); }
header#header #hamburger.active .bar_2 { transform:translateY(calc(var(--offset) * -1)) rotate(-45deg); }

/* ドロワー */
header#header #drawer {
	position:fixed; inset:0; width:100%; height:100%;
	display:flex; justify-content:flex-start; align-items:flex-start;
	opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:1000;
	/* 閉じている .drawer_content（translateX(100%)）が画面外に居残って横スクロールを作らないよう clip */
	overflow:hidden;
}
header#header #drawer.open { opacity:1; pointer-events:auto; }
header#header #drawer .drawer_content {
	width:100%; height:100%; transform:translateX(100%); transition:transform 0.3s ease;
	padding:calc(210vw / 7.2) 10% calc(120vw / 7.2) 10%;
	background-color:#010101;
	background-image:url(../img/bgi.webp); background-size:200% auto; background-repeat:repeat-y;
}
header#header #drawer.open .drawer_content { transform:translateX(0); }

header#header .gnav ul { display:block; }
header#header .gnav ul li { border-bottom:dotted 1px #777777; }
header#header .gnav ul li + li { margin-left:0; }
header#header .gnav ul li a { padding:1.15em 0 1.15em 0; font-size:calc(30 * 0.16vw); letter-spacing:0.1em; }

/* タカハシグループロゴはヘッダーに入らないのでドロワー内へ */
header#header .group_logo { display:none; }
header#header .drawer_logo { display:block; width:calc(300vw / 7.2); margin:calc(90vw / 7.2) auto 0 auto; }
header#header .drawer_logo img { width:100%; aspect-ratio:200 / 51; }


/*********** 共通見出し（中央寄せ・和文は横書き） ****************************************/

.heading { position:relative; inset:auto; width:100%; text-align:center; margin-bottom:calc(70vw / 7.2); }
.heading .ja {
	-ms-writing-mode:lr-tb; writing-mode:horizontal-tb;
	width:auto; margin:calc(14vw / 7.2) 0 0 0;
	line-height:1.4; letter-spacing:0.12em;
}

.sub_ttl { line-height:1.5; }
.text_box .text { line-height:2.2; }


/*********** fv ****************************************/

#fv { height:calc(900vw / 7.2); aspect-ratio:auto; }
#fv .slide1::after { inset:calc(130vw / 7.2) 0 0 0; }

#fv .bar { width:calc(70vw / 7.2); }
#fv .bar span { width:calc(6vw / 7.2); }
#fv .bar_l { inset:calc(200vw / 7.2) auto auto calc(24vw / 7.2); height:calc(560vw / 7.2); }
#fv .bar_r { inset:calc(200vw / 7.2) calc(24vw / 7.2) auto auto; height:calc(540vw / 7.2); }

#fv .catch_r { inset:calc(210vw / 7.2) calc(130vw / 7.2) auto auto; letter-spacing:-0.1em; }
#fv .catch_l { inset:calc(210vw / 7.2) auto auto calc(130vw / 7.2); letter-spacing:-0.05em; }

#fv .fv_logo { inset:calc(215vw / 7.2) auto auto 50%; width:calc(270vw / 7.2); transform:translateX(-50%); }

#fv .fv_date { inset:calc(600vw / 7.2) 0 auto 0; line-height:calc(62vw / 7.2); }
#fv .fv_date .date_txt { height:calc(62vw / 7.2); line-height:calc(62vw / 7.2); }
#fv .fv_date .day { width:calc(60vw / 7.2); margin:calc(6vw / 7.2) 0 0 calc(4vw / 7.2); }

#fv .fv_time { inset:calc(680vw / 7.2) 0 auto 0; line-height:calc(62vw / 7.2); }
#fv .fv_open { inset:calc(760vw / 7.2) 0 auto 0; line-height:calc(62vw / 7.2); }

/****** slide2〜5 ******/

#fv .slide2 .catch {
	inset:calc(230vw / 7.2) 50% auto auto; transform:translateX(50%);
	line-height:calc(60vw / 7.2); letter-spacing:0.118em;
	text-shadow:0 calc(4vw / 7.2) calc(20vw / 7.2) rgba(0,0,0,0.75);
}

#fv .slide3 .catch {
	inset:calc(230vw / 7.2) calc(60vw / 7.2) auto auto;
	line-height:calc(70vw / 7.2); letter-spacing:0.1em;
	text-shadow:calc(10vw / 7.2) calc(10vw / 7.2) calc(40vw / 7.2) rgba(0,0,0,0.85);
}

#fv .slide4 .catch {
	inset:calc(220vw / 7.2) auto auto calc(60vw / 7.2);
	line-height:calc(61vw / 7.2); letter-spacing:0.1em;
	text-shadow:calc(10vw / 7.2) calc(10vw / 7.2) calc(50vw / 7.2) rgba(0,0,0,0.75);
}

#fv .slide5 .drink_text {
	inset:calc(230vw / 7.2) 0 auto 0; width:auto; text-align:center;
	line-height:calc(56vw / 7.2); letter-spacing:0.08em;
	text-shadow:calc(10vw / 7.2) calc(10vw / 7.2) calc(50vw / 7.2) rgba(0,0,0,0.75);
}
#fv .slide5 .drink_text .en { letter-spacing:0.2em; }
#fv .slide5 .drink_text .t1 { margin-top:calc(20vw / 7.2); }
#fv .slide5 .drink_text .t2,
#fv .slide5 .drink_text .t3 { margin-top:calc(6vw / 7.2); }
#fv .slide5 .drink_text .free { margin-top:calc(60vw / 7.2); justify-content:center; }
#fv .slide5 .drink_text .free .de { margin:calc(30vw / 7.2) 0 0 calc(4vw / 7.2); }
#fv .slide5 .drink_text .t4 { margin-top:calc(34vw / 7.2); }


/*********** news ****************************************/

#news {
	height:auto; margin-top:0; padding:calc(145vw / 7.2) 0 calc(105vw / 7.2) 0;
	background-size:100% calc(700vw / 7.2);
}

#news .news_photo {
	inset:calc(-70vw / 7.2) 0 auto auto; width:calc(219vw / 7.2);
	filter:drop-shadow(0 calc(5vw / 7.2) calc(20vw / 7.2) rgba(0,0,0,0.5));
}

#news .news_list { margin-top:0; }
#news .news_list .item { display:block; padding:calc(30vw / 7.2) 0; }
#news .news_list .item::before { display:none; }
#news .news_list .date { width:auto; }
#news .news_list .ttl { margin-top:calc(12vw / 7.2); }


/*********** about ****************************************/

#about { height:auto; padding:calc(120vw / 7.2) 0 calc(120vw / 7.2) 0; }

.liner span {
	height:calc(8vw / 7.2);
	box-shadow:0 calc(5vw / 7.2) calc(5vw / 7.2) calc(5vw / 7.2) rgba(0,0,0,0.13);
}
.liner span + span { margin-top:calc(52vw / 7.2); }

#about .liner { inset:calc(402vw / 7.2) 0 auto 0; width:100%; }

/* SPは画面いっぱいに流す。カードは /9 で少し小さめに */
#about .loop-slider { inset:calc(377vw / 7.2) 0 auto 0; width:100%; }
#about .loop-slider .slide { margin-right:calc(60vw / 9); }

#about .loop-slider .slide01 { width:calc(600vw / 9); }
#about .loop-slider .slide02 { width:calc(601vw / 9); }
#about .loop-slider .slide03 { width:calc(500vw / 9); }
#about .loop-slider .slide04 { width:calc(500vw / 9); }
#about .loop-slider .slide05 { width:calc(500vw / 9); }
#about .loop-slider .slide06 { width:calc(450vw / 9); }
#about .loop-slider .slide07 { width:calc(450vw / 9); }

#about .low_inner { padding-top:calc(449vw / 7.2); }
#about .text { line-height:2.2; }


/*********** menu_image ****************************************/

#menu_image { height:calc(320vw / 7.2); }


/*********** menu 共通（1カラム化） ****************************************/

#menu.grand_menu,
.tabe_menu,
.drink_menu { padding:calc(120vw / 7.2) 0 calc(120vw / 7.2) 0; }

#menu.grand_menu .heading { top:auto; }

#menu.grand_menu .inner,
.tabe_menu .inner,
.drink_menu .inner { display:flex; flex-direction:column; }

/* SPは1カラムなので固定表示は解除して素直に積む */
.sticky_box { position:static; top:auto; }
#menu.grand_menu .sticky_box,
.tabe_menu .sticky_box,
.drink_menu .sticky_box { width:100%; }

#menu.grand_menu .text_box,
.tabe_menu .text_box,
.drink_menu .text_box { width:100%; padding-top:0; }

/* 並び順：見出し → 説明 → ソフトドリンクバーの注記 */
#menu.grand_menu .text_box { display:flex; flex-direction:column; }
#menu.grand_menu .sub_ttl { order:1; margin-top:0; }
#menu.grand_menu .text { order:2; width:100%; margin-top:calc(40vw / 7.2); }
#menu.grand_menu .note_box {
	order:3; width:100%; height:auto; margin:calc(70vw / 7.2) 0 0 0;
	padding:calc(45vw / 7.2) 0 calc(45vw / 7.2) 0;
}
#menu.grand_menu .note_box .line { width:100%; }
#menu.grand_menu .note_box .l2 { top:calc(8vw / 7.2); }
#menu.grand_menu .note_box .l3 { top:auto; bottom:calc(8vw / 7.2); }
#menu.grand_menu .note_box .l4 { top:auto; bottom:0; }
/* グラスアイコンはSPでは非表示 */
#menu.grand_menu .note_box .glass { display:none; }
#menu.grand_menu .note { padding-top:0; line-height:1.9; }

.tabe_menu .text_box .text,
.drink_menu .text_box .text { margin-top:calc(40vw / 7.2); }

.menu_sheet { width:100%; margin-top:calc(70vw / 7.2); }
.menu_sheet img + img { margin-top:calc(40vw / 7.2); }
/* PC用の .tabe_menu .menu_sheet{margin-top:0} が詳細度で勝ってしまうので上書き */
.tabe_menu .menu_sheet { margin-top:calc(70vw / 7.2); }

/* 縦組みキャッチ */
.tabe_menu .catch_box,
.drink_menu .catch_box {
	position:relative; inset:auto; width:calc(240vw / 7.2); height:calc(310vw / 7.2);
	margin:0 auto calc(60vw / 7.2) auto;
}
.catch_box .l2 { left:calc(8vw / 7.2); }
.tabe_menu .catch_box .l3,
.drink_menu .catch_box .l3 { left:calc(232vw / 7.2); }
.tabe_menu .catch_box .l4,
.drink_menu .catch_box .l4 { left:calc(240vw / 7.2); }
.tabe_menu .catch_box .catch,
.drink_menu .catch_box .catch {
	inset:calc(10vw / 7.2) calc(38vw / 7.2) auto auto;
	line-height:calc(56vw / 7.2); letter-spacing:0.067em;
}

/* 並び順：キャッチ＋テキスト → メニュー表 */
.tabe_menu .sticky_box { order:1; }
.tabe_menu .menu_sheet { order:2; }


/*********** info ****************************************/

#info { padding:calc(400vw / 7.2) 0 calc(130vw / 7.2) 0; }
#info .low_inner { padding-top:0; }

.info_table .row { display:block; padding:calc(30vw / 7.2) 0 calc(34vw / 7.2) 0; }
/* ゴールド文字が白より小さく見える錯視の補正でわずかに大きく（.fs18vw = calc(18 * 0.19vw) 相当より上げる） */
.info_table dt { width:auto; font-size:calc(22 * 0.17vw); -webkit-text-stroke:calc(1vw / 7.2) #000000; }
.info_table dd { margin-top:calc(14vw / 7.2); }
.info_table dd .block + .block { margin-top:calc(30vw / 7.2); }

#info .map { margin-top:calc(80vw / 7.2); }
/* スクエア寄りに */
#info .map iframe { height:calc(620vw / 7.2); }


/*********** floor ****************************************/

#floor { padding:calc(120vw / 7.2) 0 calc(120vw / 7.2) 0; }
#floor .liner { inset:auto 0 calc(144vw / 7.2) 0; width:100%; }

#floor .low_inner { padding-top:0; }
#floor .floor_map .logo { inset:10.4% auto auto 63.9%; width:22.4%; }

#floor .caution { margin-top:calc(70vw / 7.2); padding-top:calc(70vw / 7.2); }
#floor .caution .row { display:block; }
#floor .caution .row + .row { margin-top:calc(60vw / 7.2); }
#floor .caution dt { width:auto; font-size:calc(22 * 0.17vw); -webkit-text-stroke:calc(1vw / 7.2) #000000; }
#floor .caution dd { margin-top:calc(14vw / 7.2); }

#floor .floor_photo { margin-top:calc(100vw / 7.2); }
#floor .floor_photo img { width:calc(340vw / 7.2); }
#floor .floor_photo .photo01 { margin-top:calc(40vw / 7.2); }


/*********** reserve ****************************************/

#reserve { height:auto; padding:calc(120vw / 7.2) 0 calc(140vw / 7.2) 0; }
#reserve .bg { inset:0; height:100%; aspect-ratio:auto; }
/* bg2/bg3 は写真ではなくビネット（グラデーション）なので、cover で切り取らず全面に伸ばす */
#reserve .bg2,
#reserve .bg3 { object-fit:fill; }
#reserve .ja { margin-top:calc(20vw / 7.2); line-height:1.5; }
/* 2行目「…WEBからどうぞ。」が92%幅ぎりぎり（余裕1px）なので字送りだけ僅かに詰める */
#reserve .text { margin-top:calc(50vw / 7.2); line-height:2; letter-spacing:0.03em; }

#reserve .btn_box { display:block; width:100%; margin:calc(70vw / 7.2) auto 0 auto; }
#reserve .btn { display:block; width:100%; height:calc(120vw / 7.2); line-height:calc(120vw / 7.2); font-size:calc(28 * 0.17vw); }
#reserve .btn + .btn { margin-top:calc(30vw / 7.2); }


/*********** footer ****************************************/

#footer { height:auto; padding:calc(110vw / 7.2) 0 calc(220vw / 7.2) 0; }
#footer .low_inner { height:auto; }

#footer .logo,
#footer .fnav,
#footer .sns,
#footer .takahashi,
#footer .note,
#footer .copyright { position:static; inset:auto; }

#footer .logo { width:calc(300vw / 7.2); margin:0 auto; }

#footer .fnav { margin-top:calc(60vw / 7.2); }
#footer .fnav ul { flex-wrap:wrap; justify-content:center; }
#footer .fnav ul li { margin:0 calc(24vw / 7.2); }
#footer .fnav ul li + li { margin-left:calc(24vw / 7.2); }
#footer .fnav ul li a { padding:0.55em 0 0.55em 0; }

#footer .sns { justify-content:center; margin-top:calc(60vw / 7.2); }
#footer .sns .line_btn { width:calc(90vw / 7.2); height:calc(90vw / 7.2); }
#footer .sns .line_btn i { font-size:calc(90vw / 7.2); }

#footer .takahashi { width:calc(280vw / 7.2); margin:calc(70vw / 7.2) auto 0 auto; }

#footer .note { text-align:center; margin-top:calc(50vw / 7.2); }
#footer .copyright { text-align:center; margin-top:calc(20vw / 7.2); }


/*********** track（追従 TEL / 予約） ****************************************/

#track {
	width:100%; position:fixed; inset:auto 0 0 0; z-index:1000;
	display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:-o-flex; display:flex;
	justify-content:space-evenly;
}
#track.show { opacity:1; pointer-events:auto; }

#track .btn { width:50%; padding:calc(16vw / 7.2) 0 calc(18vw / 7.2) 0; text-align:center; line-height:1.4; }
#track .btn .text { display:block; letter-spacing:0.05em; font-weight:500; }
#track .btn .text i { margin-right:0.3em; }
#track .btn .memo { display:block; letter-spacing:0.05em; }

#track .tel_btn { background:#9B7E57; }
#track .web_btn { background:#A90006; }