@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=EB+Garamond:wght@400&family=Noto+Serif+JP:wght@400;500&display=swap");
*, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; }

html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-tap-highlight-color: transparent; /* 3*/ }

body { margin: 0; }

main { display: block; }

p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

dt { font-weight: bold; }

dd { margin-left: 0; }

hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border-top-width: 1px; margin: 0; clear: both; color: inherit; }

pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

address { font-style: inherit; }

a { background-color: transparent; text-decoration: none; color: inherit; }

abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

b, strong { font-weight: bolder; }

code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img, embed, object, iframe { vertical-align: bottom; }

button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; outline: 0; border-radius: 0; text-align: inherit; }

[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }

[type="radio"] { -webkit-appearance: radio; appearance: radio; }

button, input { /* 1 */ overflow: visible; }

button, select { /* 1 */ text-transform: none; }

button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; -webkit-appearance: none; appearance: none; }

button[disabled], [type="button"][disabled], [type="reset"][disabled], [type="submit"][disabled] { cursor: default; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

select::-ms-expand { display: none; }

option { padding: 0; }

fieldset { margin: 0; padding: 0; min-width: 0; }

legend { color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

progress { vertical-align: baseline; }

textarea { overflow: auto; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { outline-offset: -2px; /* 1 */ }

[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

label[for] { cursor: pointer; }

details { display: block; }

summary { display: list-item; }

[contenteditable] { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption { text-align: left; }

td, th { vertical-align: top; padding: 0; }

th { text-align: left; font-weight: bold; }

template { display: none; }

[hidden] { display: none; }

html { height: 100%; width: 100%; }

body { color: #262627; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Georgia, "Times New Roman", Times, serif; font-weight: 400; }

img { width: 100%; height: auto; vertical-align: top; }

a { text-decoration: none; }
a:hover { opacity: 1; transition: all 0.3s ease; }

body.Android { font-family: "Noto Serif JP", serif; }

.all_wrapper { overflow: hidden; }

@media screen and (min-width: 481px) { .spOnly { display: none; } }

@media screen and (max-width: 1023px) { .pcOnly { display: none; } }

.fadeup { opacity: 0; transform: translateY(20px); transition: all 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fadeup.scroll { opacity: 1; transform: translate(0); }
@media (prefers-reduced-motion: reduce) { .fadeup { transition-duration: .01ms; transform: none; } }
@media screen and (min-width: 1024px) { .fadeup { transform: translateY(24px); } }

@media screen and (min-width: 1024px) { .fadeup-delay { transition-delay: .15s; } }

header { position: fixed; top: 0; left: 0; z-index: 99; background: rgba(252, 252, 250, 0.5); width: 100%; height: 52px; transition: all .4s; /*	&.is-active {
		opacity:1;
	}
	&.is-hide {
		transform: translateY(-100%);
	}
	&.is-show {
		background: rgba(252, 252, 250, 0.90);
	}*/ }
@media screen and (min-width: 1024px) { header { height: 88px; } }
@media screen and (min-width: 1024px) { header.compact { background: rgba(252, 252, 250, 0.9); height: 80px; } }
header .logo { position: absolute; top: 8px; left: 16px; z-index: 100; width: 122px; transition: all .4s; }
@media screen and (min-width: 1024px) { header .logo { width: 204px; top: 16px; left: 20px; } }
@media screen and (min-width: 1201px) { header .logo { left: 80px; } }
header .logo a:hover { opacity: inherit; }
header .logo img { transition: all .3s; }
header .menu-panel { /*		.it3 {
			position: relative; 
			padding-top: 40px;
			margin-top: 40px;
			@include min-screen($pc) {
				padding: 0 0 0 30px;
				margin-top: 0;
				&::after {
					@include min-screen($pc) {
						left: calc(50% + 6px);
					}
				}
			}
			@include min-screen($hd) {
				padding: 0 0 0 40px;
				&::after {
					@include min-screen($pc) {
						left: calc(50% + 10px);
					}
				}
			}
			&::before {
				position: absolute; 
				content: '';
				top: 0;
				left: calc(50% - 12px);
				display: block; 
				width: 24px;
				height: 1px;
				background:$primary-color;
				@include min-screen($pc) {
					width: 1px;
					height: 24px;
					top: calc(50% - 12px);
					left: 0;
				}
			}
		}*/ }
@media screen and (max-width: 1023px) { header .menu-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 98; background: #FCFCFA; clip-path: inset(0 0 100% 0); transition: clip-path .5s ease; } }
@media screen and (min-width: 1024px) { header .menu-panel .global-nav { position: absolute; top: 0; right: 20px; height: 88px; display: inline-flex; align-content: center; align-items: center; } }
@media screen and (min-width: 1201px) { header .menu-panel .global-nav { right: 80px; } }
header .menu-panel a { color: #0077C8; text-align: center; display: block; }
@media screen and (max-width: 1023px) { header .menu-panel a { text-align: center; text-decoration: none; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; margin: 30px 0; } }
@media screen and (min-width: 1024px) { header .menu-panel a { margin: 0 15px; position: relative; } }
@media screen and (min-width: 1201px) { header .menu-panel a { margin: 0 20px; } }
@media screen and (min-width: 1024px) { header .menu-panel a::after { position: absolute; bottom: -8px; left: calc(50% - 12px); content: ''; width: 0; height: 1px; background-color: #0077C8; transition: .3s; transform: translateX(0%); } }
@media screen and (min-width: 1024px) { header .menu-panel a:hover::after { width: 24px; } }
header .menu-panel a span { display: block; font-family: Georgia, "Times New Roman", Times, "serif"; font-size: 18px; line-height: 1.3; }
header .menu-panel a small { font-family: "Noto Sans JP", sans-serif; font-size: 13px; line-height: 1.3; letter-spacing: 0.39px; }
@media screen and (max-width: 1023px) { header .menu-panel .it1 { margin-top: 130px; } }
header .menu-panel .it6 { width: 36px; margin: auto; }
@media screen and (min-width: 1024px) { header .menu-panel .it6 { width: 40px; margin-right: 0; margin-left: 15px; } }
@media screen and (min-width: 1201px) { header .menu-panel .it6 { margin-left: 40px; } }
header .menu-panel.open { clip-path: inset(0 0 0% 0); }
header .menu-panel.open a { opacity: 1; transform: none; }
header .menu-panel.open .it1 { transition-delay: .16s; }
header .menu-panel.open .it2 { transition-delay: .24s; }
header .menu-panel.open .it3 { transition-delay: .32s; }
header .menu-panel.open .it4 { transition-delay: .38s; }
header .menu-panel.open .it5 { transition-delay: .44s; }
header .menu-panel.open .it6 { transition-delay: .5s; }

/*.is-hide .logo {
	top: 4px;
	width: 81px;
	@include min-screen($pc) {
		top: 10px;
		width: 122px;
	}
}*/
.compact .logo { top: 4px; width: 81px; }
@media screen and (min-width: 1024px) { .compact .logo { top: 10px; width: 122px; } }

@media screen and (min-width: 1024px) { .compact .menu-panel .global-nav { height: 80px !important; } }

.icon_menu { position: relative; z-index: 100; display: block; width: 28px; height: 23px; margin-left: auto; margin-top: 15px; margin-right: 18px; cursor: pointer; }
@media screen and (min-width: 1024px) { .icon_menu { display: none; } }
.icon_menu span { display: inline-block; position: absolute; left: 0; width: 100%; height: 1px; background-color: #0077C8; transition: all .3s; }
.icon_menu span:open { background-color: #0077C8; }
.icon_menu span:nth-of-type(1) { top: 0; }
.icon_menu span:nth-of-type(2) { top: 11px; }
.icon_menu span:nth-of-type(3) { top: 22px; }
.icon_menu.open span:nth-of-type(1) { transform: translateY(11px) rotate(45deg); }
.icon_menu.open span:nth-of-type(2) { opacity: 0; }
.icon_menu.open span:nth-of-type(3) { transform: translateY(-11px) rotate(-45deg); }

footer { background: #fff; padding: 8px 0 12px 0; }
@media screen and (min-width: 1024px) { footer { padding: 30px 0 20px 0; } }
footer .footer-nav { display: flex; flex-wrap: wrap; align-content: center; align-items: center; width: 90%; max-width: 750px; margin: auto; }
footer a { color: #0077C8; text-align: center; display: block; }
@media screen and (max-width: 1023px) { footer a { text-align: center; text-decoration: none; margin: 16px 0; } }
@media screen and (min-width: 1024px) { footer a { margin: 0 20px; transition: .3s; } }
@media screen and (min-width: 1024px) { footer a:hover { color: #003E7D; } }
footer a span { display: block; font-family: Georgia, "Times New Roman", Times, "serif"; font-size: 15px; line-height: 1.3; letter-spacing: 0.36px; }
@media screen and (min-width: 1024px) { footer a span { font-size: 16px; } }
footer a small { font-family: "Noto Sans JP", sans-serif; font-size: 12px; line-height: 1.3; letter-spacing: 0.39px; }
@media screen and (max-width: 1023px) { footer .it1 { width: 40%; margin-left: 10%; } }
@media screen and (max-width: 1023px) { footer .it2 { width: 40%; /*			position: relative;
			&::before {
				position: absolute; 
				content: '';
				bottom: -16px;
				left: -12px;
				display: block; 
				width: 24px;
				height: 1px;
				background:$primary-color;
			}*/ } }
footer .it3 { /*		@include min-screen($pc) {
			position: relative;
			padding: 0 0 0 30px;
			margin-top: 0;
			&::before {
				position: absolute; 
				content: '';
				top: calc(50% - 12px);
				left: 0;
				display: block; 
				width: 1px;
				height: 24px;
				background:$primary-color;
			}
		}*/ }
@media screen and (max-width: 1023px) { footer .it3 { width: 30%; } }
@media screen and (max-width: 1023px) { footer .it4 { width: 40%; } }
@media screen and (max-width: 1023px) { footer .it5 { width: 30%; } }
@media screen and (max-width: 1023px) { footer .it6 { width: 100%; margin: 0; } }
footer i.instagram { display: block; width: 34px; height: 34px; /* ① 通常時の色（例：グレー） */ background-color: #0077C8; /* ② アイコン画像のパスを指定 */ -webkit-mask-image: url("/echire/brand_common/images/icon_Instagram.svg"); -webkit-mask-size: contain; mask-image: url("/echire/brand_common/images/icon_Instagram.svg"); mask-size: contain; mask-repeat: no-repeat; mask-mode: alpha; margin: auto; }
@media screen and (min-width: 1024px) { footer i.instagram { width: 30px; height: 30px; transition: background-color 0.3s ease; }
  footer i.instagram:hover { background-color: #003E7D; } }
footer .copyright { font-family: "Noto Sans JP", sans-serif; font-size: 11px; line-height: 1.3; text-align: center; margin-top: 32px; }
@media screen and (min-width: 801px) { footer .copyright { font-size: 12px; letter-spacing: 0.36px; margin-top: 40px; } }

body { background: #FCFCFA; }

.ttl { text-align: center; font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: 0.9px; margin-bottom: 24px; }
@media screen and (min-width: 1024px) { .ttl { font-size: 34px; letter-spacing: 1.02px; } }
.ttl span { display: block; font-family: Georgia, "Times New Roman", Times, "serif"; font-size: 22px !important; color: #0077C8; font-weight: 400; letter-spacing: 0 !important; margin-bottom: 8px; }

#hero { overflow: hidden; position: relative; width: 100%; height: 100dvh; background: #fff; z-index: 0; }
#hero .hero-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 0; filter: blur(11px); transition: opacity 1200ms ease, filter 1200ms ease; }
#hero .hero-logo.is-active { opacity: 1; filter: blur(0); }
#hero .hero-logo figure { width: 140px; }
@media screen and (min-width: 1024px) { #hero .hero-logo figure { width: 200px; } }
#hero .hero-backimg { position: absolute; z-index: 20; opacity: 0; transform: scale(1.09); transition: opacity 1000ms ease, transform 2200ms cubic-bezier(0.16, 0.84, 0.32, 1); }
#hero .hero-backimg.is-active { opacity: 1; transform: scale(1); }
#hero .hero-backimg img { width: 100vw; height: 100dvh; object-fit: cover; display: block; }
#hero .hero-scrim { position: absolute; bottom: 0; z-index: 30; width: 100%; height: 100dvh; background: linear-gradient(180deg, rgba(10, 18, 28, 0.1) 0%, rgba(10, 18, 28, 0.06) 40%, rgba(10, 18, 28, 0.5) 100%); opacity: 0; transition: opacity 800ms ease; }
#hero .hero-scrim.is-active { opacity: 1; }
#hero .hero-copy { position: absolute; left: 28px; bottom: 100px; z-index: 40; opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1700ms cubic-bezier(0.16, 0.84, 0.32, 1); }
@media screen and (min-width: 1024px) { #hero .hero-copy { left: 160px; bottom: 180px; } }
#hero .hero-copy.is-active { opacity: 1; transform: translateY(0); }
#hero .hero-copy p { font-family: Georgia, "Times New Roman", Times, "serif"; color: #0077C8; font-size: clamp(28px, 5vw, 42px); line-height: 1.3; letter-spacing: -0.84px; text-shadow: 0 0 14.027px #FFF; }
#hero .hero-copy h1 { color: #fff; font-size: clamp(32px, 5vw, 50px); font-weight: 500; line-height: 1.4; letter-spacing: -0.64px; margin-top: 8px; }
@media screen and (min-width: 1024px) { #hero .hero-copy h1 { letter-spacing: -1px; } }
#hero .scroll-cue { position: absolute; right: 24px; bottom: 32px; z-index: 40; width: 2px; height: 56px; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@media screen and (min-width: 1024px) { #hero .scroll-cue { left: 100px; bottom: 50px; height: 100px; } }
#hero .scroll-cue.is-active { opacity: 1; transform: translateY(0); }
#hero .scroll-track { position: absolute; inset: 0; background: #eee; }
#hero .scroll-glow { position: absolute; left: 0; top: -40%; width: 2px; height: 40%; background: linear-gradient(180deg, rgba(188, 216, 238, 0) 0%, #0077b4 55%, rgba(188, 216, 238, 0) 100%); animation: scrollFlow 2.4s linear infinite; }
@keyframes scrollFlow { 0% { top: -40%; }
  100% { top: 100%; } }
#about { padding: 72px 0; text-align: center; }
@media screen and (min-width: 1024px) { #about { padding: 120px 0; } }
#about h2.ttl { font-size: 30px; line-height: 1.3; letter-spacing: 0.96px; margin-bottom: 24px; }
@media screen and (min-width: 1024px) { #about h2.ttl { font-size: 46px; letter-spacing: -0.92px; margin-bottom: 56px; } }
#about h2.ttl span { margin-bottom: 8px; }
#about p { margin: 16px 0; font-size: 15px; font-weight: 500; line-height: 2; }
@media screen and (min-width: 1024px) { #about p { margin: 24px 0; font-size: 18px; line-height: 2.3; } }

#brandstory article { position: relative; width: 100%; height: 100dvh; background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; color: #fff; }
#brandstory .parallax { position: sticky; top: 0; left: 0; }
#brandstory .wrap { width: 85%; margin: auto; }
@media screen and (min-width: 1024px) { #brandstory .wrap { width: 466px; margin-right: 10%; } }
#brandstory .tag_sp { font-family: Georgia, "Times New Roman", Times, "serif"; text-shadow: 0 0 4px #000, 0 0 60px #000; font-size: 16px; line-height: 1.3; }
#brandstory .tag_sp span { font-family: "EB Garamond", serif; margin-right: 12px; font-size: 18px; line-height: 1; letter-spacing: -0.9px; }
@media screen and (min-width: 1024px) { #brandstory .tag_sp { display: none; } }
#brandstory .tag_pc { position: absolute; top: 15px; left: 10%; font-family: Georgia, "Times New Roman", Times, "serif"; text-shadow: none; font-size: 16px; line-height: 1.3; }
#brandstory .tag_pc span { font-family: "EB Garamond", serif; margin-right: 12px; font-size: 18px; line-height: 1; letter-spacing: -0.9px; }
@media screen and (max-width: 1023px) { #brandstory .tag_pc { display: none; } }
#brandstory h3 { text-shadow: 0 0 4px #000, 0 0 60px #000; font-size: 28px; font-style: normal; font-weight: 500; line-height: 1.3; letter-spacing: 0.9px; margin-bottom: 24px; }
@media screen and (min-width: 1024px) { #brandstory h3 { text-shadow: 0 0 7px #000; font-size: 34px; font-weight: 400; letter-spacing: 1.02px; margin-bottom: 32px; } }
#brandstory p { text-shadow: 0 0 4px #000, 0 0 60px #000; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.75; margin: 16px 0; }
@media screen and (min-width: 1024px) { #brandstory p { text-shadow: 0 0 7px #000; margin: 24px 0; } }
#brandstory .logos { display: flex; gap: 8px; }
@media screen and (min-width: 1024px) { #brandstory .logos { gap: 12px; } }
#brandstory .logos p { width: 62px; }
@media screen and (min-width: 1024px) { #brandstory .logos p { width: 90px; } }
#brandstory .eyebrow { text-align: center; font-family: Georgia, "Times New Roman", Times, "serif"; text-shadow: 0 0 4px #000, 0 0 60px #000; font-size: 16px; line-height: 1.3; }
@media screen and (min-width: 1024px) { #brandstory .eyebrow { font-size: 22px; } }
#brandstory .bs-ttl { text-align: center; text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.2); font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: 0.9px; }
@media screen and (min-width: 1024px) { #brandstory .bs-ttl { text-shadow: 0 0 7px #000; font-size: 34px; font-weight: 400; letter-spacing: 1.02px; } }
#brandstory .lead { text-align: center; text-shadow: 0 0 4px #000, 0 0 60px #000; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; }
@media screen and (min-width: 1024px) { #brandstory .lead { font-size: 18px; } }
#brandstory .text { text-shadow: 0 0 7px #000; font-size: 14px; font-weight: 500; line-height: 1.75; margin: 32px 0 0 0; }
#brandstory .link_buy { display: flex; width: 340px; padding: 20px 0; justify-content: center; align-items: center; border-radius: 4px; border: 2px solid #FFF; background: rgba(255, 255, 255, 0.15); font-size: 18px; font-weight: 500; line-height: 1.3; margin: 50px auto 0; }
@media screen and (min-width: 1024px) { #brandstory .link_buy { position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease; }
  #brandstory .link_buy::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0077C8; /* ホバー時の背景色 */ transform: scaleX(0); transform-origin: left; transition: transform 0.3s; z-index: -1; }
  #brandstory .link_buy:hover { color: #fff; }
  #brandstory .link_buy:hover::before { transform: scaleX(1); }
  #brandstory .link_buy:hover { border-color: #0077C8; } }
#brandstory .panel01 { z-index: 1; background-image: url(../images/history_img1_sp.jpg); }
@media screen and (min-width: 1024px) { #brandstory .panel01 { background-image: url(../images/history_img1_pc.jpg); } }
#brandstory .panel02 { z-index: 2; background-image: url(../images/history_img2_sp.jpg); }
@media screen and (min-width: 1024px) { #brandstory .panel02 { background-image: url(../images/history_img2_pc.jpg); }
  #brandstory .panel02 .tag_pc { color: #0077C8; } }
#brandstory .panel03 { z-index: 3; background-image: url(../images/history_img3_sp.jpg); }
@media screen and (min-width: 1024px) { #brandstory .panel03 { background-image: url(../images/history_img3_pc.jpg); } }
#brandstory .panel04 { z-index: 4; background-image: url(../images/history_img4_sp.jpg); }
@media screen and (min-width: 1024px) { #brandstory .panel04 { background-image: url(../images/history_img4_pc.jpg); }
  #brandstory .panel04 .wrap { width: 100%; margin-right: 0; text-align: center; } }

#artdevivre { z-index: 10; background: #F7F5EF; padding: 80px 0; }
@media screen and (min-width: 1024px) { #artdevivre { padding: 160px 0; } }
#artdevivre .artdevivre-ttl img { display: block; width: 90%; max-width: 327px; margin: auto; }
@media screen and (min-width: 1024px) { #artdevivre .artdevivre-ttl img { width: 70%; max-width: 906px; } }
#artdevivre .ttl { font-size: 24px; margin: 104px 0 32px; }
@media screen and (min-width: 1024px) { #artdevivre .ttl { font-size: 30px; letter-spacing: 1.02px; margin: 160px 0 40px; } }
#artdevivre .ttl span { font-size: 16px !important; color: #AC8400; letter-spacing: 0 !important; margin-bottom: 8px; }

#season .slider { width: 90%; max-width: 1172px; margin: auto; }
#season .slider li { position: relative; margin: 0 10px; }
#season figure { overflow: hidden; }
#season figure img { transition: transform 0.5s ease; will-change: transform; }
#season figure img:hover { transform: scale(1.03); }
#season img { image-rendering: -webkit-optimize-contrast; }
@media screen and (min-width: 1024px) { #season img { z-index: 10; width: 375px; height: 500px; } }
#season figurecaption { position: absolute; z-index: 20; left: 50%; bottom: 20px; transform: translate(-50%, -50%); font-family: Georgia, "Times New Roman", Times, "serif"; font-size: 18px; color: #fff; line-height: 1.3; text-shadow: 0 0 4px rgba(0, 0, 0, 0.75); }
@media screen and (min-width: 1024px) { #season figurecaption { font-size: 20px; bottom: 24px; } }

#recipe .ttl { margin: 96px 0 24px; }
@media screen and (min-width: 1024px) { #recipe .ttl { margin: 120px 0 40px; } }
#recipe ul { width: 90%; max-width: 1152px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
#recipe ul li { width: 48%; margin-bottom: 30px; }
@media screen and (min-width: 1024px) { #recipe ul li { width: 32%; margin-bottom: 64px; position: relative; } }
@media screen and (min-width: 1024px) { #recipe .overlay { position: absolute; z-index: 10; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.72%, rgba(0, 0, 0, 0) 59.15%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; } }
#recipe figure { overflow: hidden; }
#recipe figure img { transition: transform 0.5s ease; will-change: transform; }
#recipe figure img:hover { transform: scale(1.03); }
@media screen and (max-width: 480px) { #recipe img { aspect-ratio: 1 / 1; } }
@media screen and (min-width: 1024px) { #recipe img { z-index: 10; } }
#recipe p { margin-top: 8px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; line-height: 1.3; }
@media screen and (min-width: 1024px) { #recipe p { position: absolute; z-index: 20; left: 8%; top: 68%; z-index: 100; width: 84%; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.75); } }
#recipe p span { display: block; font-family: Georgia, "Times New Roman", Times, "serif"; font-size: 13px !important; color: #AC8400; font-weight: 400; margin-bottom: 4px; }
@media screen and (min-width: 1024px) { #recipe p span { font-size: 14px !important; color: #fff; } }
#recipe .link_artdevivre { display: flex; width: 340px; padding: 16px 0; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid #AC8400; font-size: 18px; color: #AC8400; font-weight: 500; line-height: 1; margin: 26px auto 0; }
@media screen and (min-width: 1024px) { #recipe .link_artdevivre { padding: 20px 0; margin: 16px auto 0; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease; }
  #recipe .link_artdevivre::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0077C8; /* ホバー時の背景色 */ transform: scaleX(0); transform-origin: left; transition: transform 0.3s; z-index: -1; }
  #recipe .link_artdevivre:hover { color: #fff; }
  #recipe .link_artdevivre:hover::before { transform: scaleX(1); }
  #recipe .link_artdevivre::before { background-color: #AC8400; /* ホバー時の背景色 */ }
  #recipe .link_artdevivre:hover { color: #fff; } }

#shops { width: 90%; max-width: 1152px; margin: auto; padding: 80px 0 40px 0; }
@media screen and (min-width: 1024px) { #shops { padding: 160px 0 100px 0; } }
#shops .h2_txt { font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.75; }
@media screen and (min-width: 1024px) { #shops .h2_txt { text-align: center; } }
#shops .embmabelab { margin: 96px 0; }
@media screen and (min-width: 801px) { #shops .embmabelab { display: flex; justify-content: space-between; align-items: center; margin: 80px 0 120px 0; } }
#shops .pab { margin: 32px 0 0 0; }
@media screen and (min-width: 1024px) { #shops .pab { margin: 160px 0 0 0; } }
@media screen and (min-width: 1024px) { #shops .shop-description { width: 48%; } }
#shops .shop-description figure img { display: block; width: 180px; margin: auto; }
@media screen and (min-width: 801px) { #shops .shop-description figure img { text-align: center; } }
#shops .shop-description .elabpab { width: 167px; }
@media screen and (min-width: 1024px) { #shops .shop-description .elabpab { width: 187px; } }
#shops .shop-description h4 { text-align: center; font-size: 22px; font-weight: 500; line-height: 1.3; margin-top: 24px; }
@media screen and (min-width: 1024px) { #shops .shop-description h4 { font-size: 28px; margin-top: 32px; } }
#shops .shop-description h4 small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; margin-top: 4px; }
@media screen and (min-width: 1024px) { #shops .shop-description h4 small { font-size: 18px; margin-top: 8px; } }
#shops .shop-description p { font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; margin: 24px 0 32px 0; }
@media screen and (min-width: 1024px) { #shops .shop-description p { margin: 32px 0 0 0; } }
@media screen and (min-width: 1024px) { #shops .pab .shop-description { width: 100%; }
  #shops .pab .shop-description p { width: 90%; max-width: 934px; margin: 32px auto 0; } }
@media screen and (min-width: 1024px) { #shops .photo { width: 48%; }
  #shops .photo figure { overflow: hidden; }
  #shops .photo figure img { transition: transform 0.5s ease; will-change: transform; }
  #shops .photo figure img:hover { transform: scale(1.03); } }
#shops ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
@media screen and (min-width: 1024px) { #shops ul { margin-top: 64px; }
  #shops ul:after { display: block; content: ""; width: 32%; } }
#shops ul li { width: 48%; text-align: center; margin-bottom: 40px; }
@media screen and (min-width: 1024px) { #shops ul li { width: 32%; margin-bottom: 64px; }
  #shops ul li figure { overflow: hidden; }
  #shops ul li figure img { transition: transform 0.5s ease; will-change: transform; }
  #shops ul li figure img:hover { transform: scale(1.03); } }
@media screen and (max-width: 480px) { #shops ul img { aspect-ratio: 1 / 1; } }
#shops ul h4 { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; margin-top: 12px; }
@media screen and (min-width: 1024px) { #shops ul h4 { font-size: 18px; margin-top: 24px; } }

#instagram { background: #EDF4F6; padding: 80px 0; }
@media screen and (min-width: 1024px) { #instagram { padding: 120px 0; } }
#instagram ul { width: 90%; max-width: 1152px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
@media screen and (min-width: 801px) { #instagram ul { margin-top: 64px; }
  #instagram ul:after { display: block; content: ""; width: 23.5%; }
  #instagram ul:before { display: block; content: ""; order: 1; width: 23.5%; } }
#instagram ul li { width: 48%; text-align: center; margin: 8px 0; }
@media screen and (min-width: 801px) { #instagram ul li { width: 23.5%; margin: 12px 0; } }
#instagram ul a { display: block; }
@media screen and (min-width: 801px) { #instagram ul a { position: relative; overflow: hidden; } }
#instagram ul .hover-layer { display: none; }
@media screen and (min-width: 801px) { #instagram ul .hover-layer { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 119, 200, 0.2); background-image: url(../images/icon_Instagram_w.svg); background-size: 30px 30px; background-repeat: no-repeat; background-position: center center; opacity: 0; transition: opacity 0.35s ease; } }
#instagram ul a:hover .hover-layer { opacity: 1; }

.footer-cta { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 150; background: rgba(252, 252, 250, 0.8); padding: 8px 0; transform: translateY(120%); transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media screen and (min-width: 801px) { .footer-cta { padding: 12px 0; } }
.footer-cta .wrap { width: 90%; max-width: 480px; margin: auto; display: flex; justify-content: space-between; }
@media screen and (min-width: 801px) { .footer-cta .wrap { width: 700px; max-width: 700px; } }

.footer-cta.show { transform: translateY(0); }

/* フッターに近づいたら fixed → absolute に切替。JSでtop値を設定し、bottomは解除 */
.footer-cta.docked { position: absolute; bottom: auto; transition: none; /* 位置切替時のガタつきを防ぐため、この瞬間はtransitionを切る */ }

.footer-cta a { border-radius: 2px; width: 48%; padding: 4px 0 4px 4px; transition: all 0.3s ease; }
@media screen and (min-width: 801px) { .footer-cta a { border-radius: 4px; width: 330px; height: 62px; padding: 6px 0 6px 6px; }
  .footer-cta a img { height: 50px; width: auto; } }

.footer-cta .btn-adv { background: #B09D60; }
@media screen and (min-width: 801px) { .footer-cta .btn-adv:hover { background: #AC8400; } }

.footer-cta .btn-buy { background: #0077C8; }
@media screen and (min-width: 801px) { .footer-cta .btn-buy:hover { background: #003E7D; } }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); will-change: transform; }

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; top: 0; left: 0; display: block; }

.slick-track:before, .slick-track:after { display: table; content: ''; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; height: 100%; min-height: 1px; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; }

[dir='rtl'] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid #000; }

.slick-arrow.slick-hidden { display: none; }

/* Arrows */
.slick-prev, .slick-next { font-size: 0; position: absolute; top: calc(50% - 20px); display: block; width: 40px; height: 40px; border-radius: 50%; border: solid 1px #AC8400; padding: 0; cursor: pointer; background-color: rgba(255, 255, 255, 0.7); }

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { opacity: 1; }

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }

.slick-prev { left: 22px; z-index: 1; background-image: url(../images/arrows_prev.svg); background-size: 7px auto; background-position: center center; background-repeat: no-repeat; }

.slick-next { right: 22px; z-index: 1; background-image: url(../images/arrows_next.svg); background-size: 7px auto; background-position: center center; background-repeat: no-repeat; }

@media screen and (max-width: 480px) { .slick-prev { width: 30px; height: 30px; background-size: 6px auto; left: 15px; }
  .slick-next { width: 30px; height: 30px; background-size: 6px auto; right: 15px; } }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { display: block; }

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 40px; }

.slick-dots { position: absolute; bottom: -30px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }

.slick-dots li { position: relative; display: inline-block; margin: 0 7px; padding: 0; }
@media screen and (min-width: 481px) { .slick-dots li { margin: 0 10px; } }

.slick-dots li button { font-size: 0; line-height: 0; vertical-align: middle; background: #dde6e8; display: block; width: 30px; height: 5px; cursor: pointer; }
@media screen and (min-width: 481px) { .slick-dots li button { width: 50px; } }

.slick-dots li button:hover, .slick-dots li button:focus { background: #000; }

.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }

.slick-dots li.slick-active button { background: #000; }

@media screen and (min-width: 769px) { .slick-dots { bottom: -40px; } }
/* ----- cookie-box ----- */
.cookie-box { display: none; position: fixed; z-index: 999; bottom: 0; left: 0; width: 100%; background-color: rgba(89, 59, 14, 0.9); font-family: "Noto Sans JP", sans-serif; font-weight: 400; letter-spacing: normal; line-height: normal; }

.cookie-box .cookie-box__inner { display: flex; justify-content: flex-start; align-items: center; max-width: 1280px; width: 100%; margin: 0 auto; padding: 38px 40px; }

.cookie-box .cookie-box__detail { width: calc(100% - (40px + 220px)); margin-right: 40px; }

.cookie-box .cookie-box__detail > *:first-child { margin-top: 0; }

.cookie-box .cookie-box__text { font-size: 14px !important; color: #fff; line-height: 1.6; }

.cookie-box .cookie-box__link { color: #fff; text-decoration: underline; }

.cookie-box .cookie-box__link:hover { text-decoration: none; }

.cookie-box .cookie-box__button { width: 220px; }

.cookie-box .cookie-box__accept { -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: center; padding: 8px 10px; border: 1px solid #e8e0be; background-color: #f9f6ef; cursor: pointer; transition: opacity 0.2s ease-out; }

.cookie-box .cookie-box__accept:hover { opacity: .7; }

.cookie-box .cookie-box__accept .cookie-box__accept__label { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 14px !important; color: #410000; }

@media screen and (max-width: 768px) { .cookie-box { position: fixed; bottom: 0; left: 0; width: 100%; min-width: inherit; background-color: rgba(89, 59, 14, 0.9); }
  .cookie-box .cookie-box__inner { display: block; justify-content: flex-start; align-items: center; max-width: inherit; min-width: inherit; width: 100%; margin: 0 auto; padding: 25px 12px; }
  .cookie-box .cookie-box__detail { width: 100%; margin-right: 0; }
  .cookie-box .cookie-box__detail > *:first-child { margin-top: 0; }
  .cookie-box .cookie-box__text { font-size: 13px !important; color: #fff; }
  .cookie-box .cookie-box__link { color: #fff; text-decoration: underline; }
  .cookie-box .cookie-box__button { width: 200px; margin: 20px auto 0; }
  .cookie-box .cookie-box__accept { -webkit-appearance: none; appearance: none; display: block; width: 100%; text-align: center; padding: 8px 10px; border: 1px solid #e8e0be; background-color: #f9f6ef; cursor: pointer; transition: opacity 0.2s ease-out; }
  .cookie-box .cookie-box__accept .cookie-box__accept__label { font-size: 12px !important; color: #410000; } }