@charset "utf-8";
/*
	Last Update: 2026/03/09
	Auther: yt
*/
/*===================================================================
	style
===================================================================*/

:root { --curtain-height: 610px; }
@media (min-width: 2561px) {
	:root { --curtain-height: calc((100vw / 2560px) * 610px); }
}
@media (max-width: 767px) {
	:root { --curtain-height: 440px; }
}
.first_screen_wrap { position:sticky; top:0; }
.curtain_scroll_spacer { height:var(--curtain-height); }
#curtain { position:fixed; top:0; left:0; width:100%; height:var(--curtain-height); z-index:1500; background:url(../image/curtain.png) no-repeat center center / auto 100%; transition:filter .3s; }
#curtain:not(.is-hide) { filter:drop-shadow(0 8px 42px rgba(0,0,0,0.25)); }
#curtain.is-hide { pointer-events:none; }
#curtain .curtain_inner { position:absolute; top:60px; left:max(40px, calc(50% - 720px)); }
#curtain .curtain_inner .site_logo { margin-bottom:40px; }
#curtain .curtain_inner .curtain_navi { display:flex; flex-direction:column; gap:15px; }
#curtain .curtain_inner .curtain_navi li a { font-family:"Zen Kaku Gothic New"; font-weight:500; line-height:1.4; }
@media (max-width: 991px) {
	#curtain .curtain_inner { display:none; }
}
@media (max-width: 767px) {
	#curtain { background-image:url(../image/curtain-sp.png); }
}

#feature { background-color:var(--c-black); }
#feature .image_slider,
#feature .hashtag_slider { padding:110px 0; }
#feature .image_slider::before,
#feature .hashtag_slider::before { content:''; display:block; width:100%; height:var(--display-height); background:repeat-x 0 0 / auto var(--display-height); animation:bg_slider 15s linear infinite; }
#feature .image_slider::before { --img-width:3348px; --img-height:394px; --display-height:197px; background-image:url(../image/image_slider.jpg); }
#feature .hashtag_slider::before { --img-width:3324px; --img-height:144px; --display-height:72px; background-image:url(../image/hashtag_slider.png); }
@keyframes bg_slider {
	from { background-position: 0 0; }
	to { background-position: calc(var(--img-width) * var(--display-height) / var(--img-height) * -1) 0; }
}
@media (max-width: 767px) {
	#feature .image_slider,
	#feature .hashtag_slider { padding:60px 0; }
	#feature .image_slider::before { --display-height:110px; }
	#feature .hashtag_slider::before { --display-height:46px; }
}

#recipe .recipe_header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:40px; }
#recipe .recipe_header .text_wrap { width:500px; max-width:100%; }
#recipe .recipe_header .comment { font-size:.9em; font-weight:500; color:#282828; letter-spacing:.15em; }
#recipe .recipe_list { display:grid; grid-template-columns:repeat(4,1fr); gap:60px 30px; }
#recipe .recipe_list .unit:nth-child(1),
#recipe .recipe_list .unit:nth-child(2) { grid-column:span 2; }
#recipe .recipe_list .unit { display:flex; flex-direction:column; align-items:center; gap:15px; }
#recipe .recipe_list .unit .image { border:1px solid #000; }
#recipe .recipe_list .unit .image img { width:100%; height:auto; object-fit:cover; }
#recipe .recipe_list .unit .title { font-family:"Zen Kaku Gothic New"; flex:1; text-align:center; font-size:1.2em; font-weight:bold; letter-spacing:.1em; }
#recipe .recipe_detail_header { display:flex; align-items:center; justify-content:space-between; gap:10px 20px; margin-bottom:20px; }
#recipe .recipe_detail_header .title_wrap .hl_1 { margin-bottom:0; }
#recipe .recipe_detail_header .tag_wrap { display:flex; align-items:center; gap:10px; }
#recipe .recipe_detail_body { display:grid; gap:20px; grid-template-columns:6fr 4fr; }
#recipe .recipe_detail_body .detail_image img { width:100%; }
#recipe .recipe_main_unit { background:var(--c-beige-o); }
#recipe .recipe_main_unit:not(:last-child) { margin-bottom:20px; }
#recipe .recipe_main_unit .recipe_main_title { font-size:1.2em; font-weight:bold; letter-spacing:.1em; background:var(--c-black); color:var(--c-white); padding:5px 80px 5px 20px; display:inline-block; clip-path:polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
#recipe .recipe_main_unit .comment { padding:20px; font-weight:500; font-size:.9em; color:var(--c-black); }
#recipe .recipe_main_unit .comment p + p { margin-top:10px; }
@media (max-width: 991px) and (min-width: 768px) {
	#recipe .recipe_list { grid-template-columns:repeat(6,1fr); }
	#recipe .recipe_list .unit:nth-child(1),
	#recipe .recipe_list .unit:nth-child(2) { grid-column:span 3; }
	#recipe .recipe_list .unit { grid-column:span 2; }
}
@media (max-width: 767px) {
	#recipe .recipe_header { flex-direction:column; }
	#recipe .recipe_header .text_wrap { width:100%; }
	#recipe .recipe_header .image_wrap { width:297px; margin-left:auto; }
	#recipe .recipe_list { grid-template-columns:repeat(2,1fr); gap:30px 10px; }
	#recipe .recipe_list .unit:nth-child(1),
	#recipe .recipe_list .unit:nth-child(2) { display:grid; grid-template-columns:1fr 138px; gap:15px 5px; }
	#recipe .recipe_list .unit:nth-child(1) .image,
	#recipe .recipe_list .unit:nth-child(2) .image { grid-column:span 2; }
	#recipe .recipe_list .unit:nth-child(1) .title,
	#recipe .recipe_list .unit:nth-child(2) .title { text-align:left; }
	#recipe .recipe_list .unit .title { font-size:1em; letter-spacing:.05em; }
	#recipe .recipe_detail_header { flex-direction:column; align-items:flex-start; }
	#recipe .recipe_detail_body { grid-template-columns:1fr; }
}
@media (max-width: 575px) {
	#recipe .recipe_detail_header .hl_1 .main { font-size:1.5em; }
}

#sales { background:var(--c-beige); border-radius:60px; }
#sales .sales_hl_img { text-align:right; margin-right:-190px; margin-top:-190px; }
#sales .sales_hl_img img { transform: translateY(60px); }
#sales .sales_box { background:var(--c-white); }
#sales .sales_box .sales_title_wrap { display:flex; align-items:flex-start; gap:10px 20px; flex-wrap:wrap; }
#sales .sales_box .sales_comment { line-height:1.4; font-weight:500; font-family:"Zen Kaku Gothic New"; padding:0 20px; }
#sales .sales_box .sales_comment .top { color:var(--c-red); display:flex; align-items:center; gap:0 10px; flex-wrap:wrap; margin-bottom:5px; }
#sales .sales_box .sales_comment .top .main { font-size:1.25em; }
#sales .sales_box .sales_comment .top .sub { font-size:1.1em; }
#sales .sales_box .sales_comment .bottom { font-size:.9em; }
#sales .sales_box .sales_title { display:inline-block; background:var(--c-black); color:var(--c-white); padding:5px 160px 5px 40px; display:inline-block; clip-path:polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); font-size:1.2em; }
#sales .sales_box .sales_content { padding:60px; }
#sales .sales_content .sales_item_wrap { display:flex; justify-content:center; gap:60px; font-family:"Zen Kaku Gothic New"; }
#sales .sales_content._online .sales_item { width:365px; }
#sales .sales_content._store .sales_item { width:310px; }
#sales .sales_content .sales_item { display:flex; flex-direction:column; gap:15px; }
#sales .sales_content .sales_item .image { text-align:center; }
#sales .sales_content .sales_item .text_wrap { flex:1; }
#sales .sales_content .sales_item .title_wrap { display:flex; justify-content:space-between; gap:5px; flex-wrap:wrap; margin-bottom:5px;}
#sales .sales_content .sales_item .title_wrap .title { font-size:1.4em; font-weight:bold; letter-spacing:.05em; }
#sales .sales_content .sales_item .title_wrap .price { margin-left:auto; }
#sales .sales_content .sales_item .title_wrap .price .number { font-size:1.75em; font-weight:500; }
#sales .sales_content .sales_item .title_wrap .price .price_unit { font-weight:500; }
#sales .sales_content .sales_item .comment { font-size:.9em; font-weight:500; letter-spacing:.05em; line-height:1.4; }
#sales .sales_content .sales_item .button_wrap { text-align:center; }
#sales .sales_content .sales_item .button_wrap .button { width:230px; }
#sales .sales_content .sales_item .button_wrap .button .main { padding-right:35px; background-size:30px auto; min-height:30px; font-size:1em; }
@media (max-width: 1200px) {
	#sales { margin-top:60px; }
	#sales #menu { display:flex; flex-direction:column; }
	#sales #menu .sales_hl_img { order:1; margin:-120px -60px 40px 0; }
	#sales #menu .sales_hl_img img { transform:none; }
	#sales #menu .hl_1 { order:2; margin-bottom:30px; }
	#sales #menu .sales_box { order:3; }
}
@media (max-width: 767px) {
	#sales { margin-top:40px; }
	#sales #menu .sales_hl_img { margin:-100px -20px 10px 0; }
	#sales .sales_box .sales_content { padding:20px 20px 40px; }
	#sales .sales_content .sales_item_wrap { gap:40px; flex-direction:column; align-items:center; }
	#sales .sales_content._online .sales_item { width:365px; max-width:100%; }
	#sales .sales_content._store .sales_item { width:310px; max-width:100%; }
	#sales .sales_box .sales_title { padding:5px 80px 5px 20px; }
}

#sales .store_info { background:#fff; display:flex; margin-top:100px; }
#sales .store_info .image_wrap { width:48%; margin-top:-100px; padding-bottom:60px; }
#sales .store_info .image_main { width:100%; aspect-ratio:688/544; background:url(../image/store1.jpg) no-repeat center center / cover; }
#sales .store_info .image_thumbnails { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); width:80%; margin-left:auto; margin-right:auto; margin-top:-7%; }
#sales .store_info .image_thumbnails .thumbnail_unit { border:none; background:transparent; cursor:pointer; padding:0; margin:0; }
#sales .store_info .image_thumbnails .thumbnail_unit  img { width:100%; }
#sales .store_info .text_wrap { padding:50px; flex:1; display:flex; flex-direction:column; justify-content:center; }
#sales .store_info .store_info_main .title { font-family:"Zen Kaku Gothic New"; font-size:1.5em; font-weight:bold; letter-spacing:.05em; margin-bottom:10px; }
#sales .store_info .store_info_main .open { font-weight:bold; color:var(--c-red); margin-bottom:10px; font-size:1.1em; letter-spacing:.1em; }
#sales .store_info .store_info_main .address { font-size:.95em; font-weight:500; letter-spacing:.05em; line-height:1.6; margin-bottom:20px; }
#sales .store_info .store_info_main .address p:not(:last-child) { margin-bottom:10px; }
#sales .store_info .store_info_main .business_hours { font-weight:bold; font-size:1.1em; letter-spacing:.1em; margin-bottom:20px; line-height:1.4; }
@media (min-width: 1441px) {
	#sales .store_info .text_wrap { font-size:calc((100vw / 1440px) * 1em); }
}
@media (max-width: 991px) {
	#sales .store_info { flex-direction:column; }
	#sales .store_info .image_wrap { padding-bottom:0; width:calc(100% - 20px); }
	#sales .store_info .text_wrap { padding:20px 20px 40px; }
	
}

/*===================================================================
	dialog (modal)
===================================================================*/
dialog { border:0; padding:0; background:transparent; max-width:min(1130px, calc(100% - 40px)); width:100%; overscroll-behavior:none; }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog .dialog_content { position:relative; background:#fff; border:1px solid #000; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35); max-height:calc(100svh - 40px); overflow:auto; padding:60px 90px; }
dialog .close_button { position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; background:transparent; cursor:pointer; }
dialog .close_button::before { content:''; position:absolute; top:50%; left:50%; width:30px; height:2px; background:#000; transform-origin:center; transform:translate(-50%,-50%) rotate(45deg); }
dialog .close_button::after { content:''; position:absolute; top:50%; left:50%; width:30px; height:2px; background:#000; transform-origin:center; transform:translate(-50%,-50%) rotate(-45deg); }
@media (max-width: 1200px) {
	dialog .dialog_content { padding:60px 40px; }
}
@media (max-width: 991px) {
	dialog .dialog_content { padding:60px 20px; }
}
@media (max-width: 767px) {
	dialog .dialog_content { padding:20px 10px; }
}