@charset "utf-8";
/* ===================================================
	Beers CSS
====================================================== */
#contents_wrap { background: url(../img/bg_pattern_01.webp); }
#reservation { display: none; }

/* Text Animation */
.txt_anim>span { position: relative; display: inline-block; }
.txt_anim>span span { opacity: 0.5; }
.txt_anim>span::before { content: attr(data-text)""; position: absolute; top: 0; left: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.25,.46,.45,.94) 0.7s; }
.show .txt_anim>span::before { -webkit-clip-path: inset(0); clip-path: inset(0); }

/* ---------------------------------------------------
	共通
------------------------------------------------------ */
.tit_01{ padding: 0 0 90px; text-align: center; }
.tit_01 .copy_01{ font-size: 10rem; line-height: 1; letter-spacing: 0.07em; position: relative; z-index: 1;}
.tit_01 .copy_02{ position: relative; z-index: 2; height: 5rem; margin-top: -2rem; }
.tit_01 .copy_02 img { object-fit: contain; height: 100%; width: auto; }
.tit_01 .copy_03{ font-size: min(3rem,30px); line-height: 1; padding: 35px 0 0;}

.sec_slide { position: relative; z-index: 0; overflow: hidden; }
div[class*=sec_img] { margin: 0; z-index: 0;}
div[class*=sec_img] .slick-slide{ padding: 0 30px;}
div[class*=sec_img] .slick-slide div { width: 925px; max-width: calc(100vw - 400px); min-width: 800px; position: relative;}
div[class*=sec_img] .slick-slide div img { height: 693px;}
div[class*=sec_img] .slick-slide .slick-item::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.4); transition: background-color 1s; }
div[class*=sec_img] .slick-current .slick-item::before { background: rgba(255,255,255,0);}
div[class*=sec_detail] { width: 800px; margin: -140px auto 0; z-index: 10; background: #f7f7f4; position: relative;}
div[class*=sec_detail] .slick-list { overflow: visible;}
div[class*=sec_detail] .num{ position: absolute; top: 0; left: 0; background: #000; color: #fff; font-size: 20px; line-height: 1; padding: 10px;}
div[class*=sec_detail] .slick-item > dl > dt { text-align: center; line-height: 1; padding: 70px 50px 25px;}
div[class*=sec_detail] .slick-item > dl > dt .en { font-size: 50px; display: block; margin-bottom: 5px; }
div[class*=sec_detail] .slick-item > dl > dd { font-size: 14px; line-height: 1.8; padding: 0 100px 70px; text-align: left;}
div[class*=sec_detail] .slick-item > dl > dd .spec { margin-top: 15px; }
div[class*=sec_detail] .slick-item > dl > dd .awards { margin-top: 25px; }
div[class*=sec_detail] .slick-item > dl > dd .awards dt { font-size: 16px; }

.btn_01 { width: min(350px, 90%); }
.cmn_btn_01 a { height: 63px; }

@media screen and (max-width: 600px) {
	.tit_01{ padding: 0 0 30px;}
	.tit_01 .copy_01{ font-size: 4.2rem; }
	.tit_01 .copy_02{ height: 2.1rem; margin-top: -1rem; }
	.tit_01 .copy_03{ font-size: 18px; line-height: 1; padding: 10px 0 0;}

	div[class*=sec_img] .slick-slide div { width: auto; max-width: none; min-width: 0;}
	div[class*=sec_img] .slick-slide div img { height: auto;}
	div[class*=sec_detail] { width: calc(100vw - 100px); max-width: 500px; min-height: 0; margin: -40px auto 0;}
	div[class*=sec_detail] .slick-slide { padding: 0;}
	div[class*=sec_detail] .num{ font-size: 16px; padding: 5px;}
	div[class*=sec_detail] .slick-item > dl > dt { font-size: 14px; padding: 40px 5% 20px;}
	div[class*=sec_detail] .slick-item > dl > dt .en { font-size: 26px; margin-bottom: 10px; }
	div[class*=sec_detail] .slick-item > dl > dd { font-size: 13px; line-height: 1.7; padding: 0 5% 30px;}
	div[class*=sec_detail] .slick-item > dl > dd .spec { margin-top: 10px; }
	div[class*=sec_detail] .slick-item > dl > dd .awards { margin-top: 15px; }
	div[class*=sec_detail] .slick-item > dl > dd .awards dt { font-size: 15px; }

	.btn_01 { width: min(350px, 100%); }
	.cmn_btn_01 a { height: 50px; }
}


/* ---------------------------------------------------
	menu
------------------------------------------------------ */
#menu { padding: 185px 0 100px; }
@media screen and (max-width: 600px) {
	#menu { padding: 90px 0 50px; }
}


/* ---------------------------------------------------
season
------------------------------------------------------ */
#season { padding: 90px 0 195px; }
@media screen and (max-width: 600px) {
	#season { padding: 50px 0 100px; }
}


/* ---------------------------------------------------
box_bnrs
------------------------------------------------------ */
#box_bnrs { width: min(1330px, 83%); margin: 0 auto; padding-bottom: 100px; }
#box_bnrs ul { display: flex; justify-content: center; gap: 40px;}
#box_bnrs ul li { padding-top: 50px; margin-top: -50px; width: 48.5%; }

@media screen and (max-width: 600px) {
	#box_bnrs { padding-bottom: 50px; }
	#box_bnrs ul { flex-direction: column; align-items: center; gap: 25px; }
	#box_bnrs ul li { padding-top: 30px; margin-top: -30px; width: 80%; }
}


/* ---------------------------------------------------
	dealers
------------------------------------------------------ */
#dealers { padding: 80px 0 215px; }
#dealers .tit_01 { padding-bottom: 100px;}
#dealers .list_col { width: min(1200px, 80%); margin: 0 auto; }
#dealers .list_item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d6d6d6; font-size: 14px; }
#dealers .list_item .place { display: flex; align-items: center; gap: 55px; position: relative; padding: 35px 0 35px 5px;  width: 38.75%; flex-shrink: 0; }
#dealers .list_item .place:before { content: ''; position: absolute; bottom: -1px; left: 0; background: #b4b4b4; width: 100%; height: 1px; }
#dealers .list_item .place .pref { font-size: 13px; width: 85px; border: 1px solid #8d8d8d; align-content: center; text-align: center; box-sizing: border-box; }
#dealers .list_item .place p:not(.pref) { font-size: 18px; letter-spacing: 0.05em; }
#dealers .list_item .place + p { padding-left: 8.3%; flex-grow: 1; }
#dealers .list_item .link_list { display: flex; gap: 35px; flex-shrink: 0; padding: 0 5.5%; box-sizing: border-box; }
#dealers .list_item .link_list li a { display: flex; align-items: center; gap: 10px; }
#dealers .list_item .link_list li a::before { content: ''; width: 15px; height: 19px; background-position: center; background-size: contain; background-repeat: no-repeat; }
#dealers .list_item .link_list li.site a::before { background-image: url(../../beers/img/ico_lang.svg); }
#dealers .list_item .link_list li.map a::before { background-image: url(../../beers/img/ico_map.svg); }

@media screen and (max-width: 600px) {
	#dealers { padding: 50px 0 120px; }
	#dealers .tit_01 { padding-bottom: 30px;}
	#dealers .list_item { flex-direction: column; gap: 10px; font-size: 14px; padding: 20px 2%; }
	#dealers .list_item .place { flex-direction: column; gap: 10px; padding: 0; width: 100%; }
	#dealers .list_item .place:before { display: none; }
	#dealers .list_item .place .pref { font-size: 12px; }
	#dealers .list_item .place p:not(.pref) { font-size: 16px; }
	#dealers .list_item .place + p { padding-left: 0;  }
	#dealers .list_item .link_list { width: 100%; justify-content: space-around; gap: 0; padding: 0 5%; }
	#dealers .list_item .link_list li a::before { width: 13px; height: 17px; }
}


/* ---------------------------------------------------
awards
------------------------------------------------------ */
#awards { position: relative; color: #fff; padding: 135px 0 235px; }
#awards::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.63); z-index: 1; }
#awards .bgimg { position: absolute; inset: 0; }
#awards .inner { width: 670px; margin: 0 auto; position: relative; z-index: 2; }
#awards .tit_01 + p { text-align: center; font-size: 30px; line-height: 1.3; letter-spacing: 0.2em; }
#awards .emblem_list { margin-top: 65px; }
#awards .emblem_list ul { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
#awards .emblem_list ul:nth-child(1) li:nth-child(1) { width: 192px; }
#awards .emblem_list ul:nth-child(1) li:nth-child(1) img { aspect-ratio: 192 / 106;}
#awards .emblem_list ul:nth-child(1) li:nth-child(2) { width: 156px; }
#awards .emblem_list ul:nth-child(1) li:nth-child(2) img { aspect-ratio: 156 / 143;}
#awards .emblem_list ul:nth-child(2) { gap: 20px; margin-top: 15px; }
#awards .emblem_list ul:nth-child(2) li { width: 135px; }
#awards .emblem_list ul:nth-child(2) li img { aspect-ratio: 1 / 1;}
#awards .history { margin-top: 60px; }
#awards .history div { display: flex; }
#awards .history div + div { margin-top: 60px; }
#awards .history div dt { font-size: 40px; line-height: 1; padding-right: 40px; margin-left: -10px; }
#awards .history div dd { font-size: 16px; padding-top: 8px; }
#awards .history div dd p:not(:first-child),
#awards .history div dd li { margin-top: 1.375em; display: flex; align-items: center; }
#awards .history div dd li::before { content: ''; width: 7px; height: 1px; display: inline-block; background: #fff; margin-right: 10px; }

@media screen and (max-width: 600px) {
	#awards { padding: 70px 0 100px; }
	#awards .inner { width: 75%; }
	#awards .tit_01 + p { font-size: 1.8rem;}
	#awards .emblem_list { margin-top: 30px; }
	#awards .emblem_list ul { gap: 20px;}
	#awards .emblem_list ul:nth-child(1) li:nth-child(1) { width: 40%; }
	#awards .emblem_list ul:nth-child(1) li:nth-child(2) { width: 30%; }
	#awards .emblem_list ul:nth-child(2) { gap: 10px; margin-top: 10px; }
	#awards .emblem_list ul:nth-child(2) li { width: calc((100% - 30px) / 4); }
	#awards .history { margin-top: 50px; }
	#awards .history div { flex-direction: column; }
	#awards .history div + div { margin-top: 30px; }
	#awards .history div dt { font-size: 28px; padding-right:0; margin-left: 0; }
	#awards .history div dd { font-size: 13px; padding-top: 15px; }
	#awards .history div dd p:not(:first-child),
	#awards .history div dd li { margin-top: 1em; }
	#awards .history div dd li::before { width: 5px; margin-right: 7px; }
}


/* ---------------------------------------------------
sec05
------------------------------------------------------ */
#sec05 { display: flex; padding-bottom: 200px; }
#sec05 .photo { max-width: 50%; flex-grow: 1; }
#sec05 .txt_col { flex-shrink: 0; width: 555px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
#sec05 .txt_col h2 { font-size: clamp(25px, 3rem, 28px); margin-bottom: 75px; letter-spacing: 0.12em; }
#sec05 .txt_col p { font-size: max(12px, 1.4rem); line-height: 1.7; }
#sec05 .txt_col .btn_01 { margin: 75px auto 0; }

@media screen and (max-width: 600px) {
	#sec05 { flex-direction: column; padding-bottom: 120px; }
	#sec05 .photo { max-width: none; }
	#sec05 .txt_col { width: 80%; padding: 50px 0; }
	#sec05 .txt_col h2 { font-size: 2rem; margin-bottom: 30px; }
	#sec05 .txt_col p { font-size: 12px; }
	#sec05 .txt_col .btn_01 { margin: 40px auto 0; }
}


/* ---------------------------------------------------
sec06
------------------------------------------------------ */
#sec06 { padding: 180px 0; }
#sec06 div[class*=sec_detail] .slick-item > dl > dt { padding: 80px 50px 45px; font-size: 30px; line-height: 1.3; letter-spacing: 0.15em;}
#sec06 div[class*=sec_detail] .slick-item > dl > dd > p { letter-spacing: 0.12em;}
#sec06 div[class*=sec_detail] .slick-item .menu { width: 500px; margin: 0 auto; padding-top: 45px; }
#sec06 div[class*=sec_detail] .slick-item .menu > p { text-align: center; font-size: 16px; padding-bottom: 25px; }
#sec06 div[class*=sec_detail] .slick-item .menu dl { font-size: 12px; }
#sec06 div[class*=sec_detail] .slick-item .menu dl div { display: flex; justify-content: space-between; border-bottom: 1px solid #e3e3df; margin-bottom: 5px; padding-bottom: 2px; padding-left: 15px; }
#sec06 div[class*=sec_detail] .slick-item .menu dl div dd { text-align: right; line-height: 1; align-content: flex-end; }
#sec06 .private_col { width: 600px; margin: 0 auto; padding-top: 85px; }
#sec06 .private_col h3 { font-size: 18px; text-align: center; padding-bottom: 45px; }
#sec06 .private_col p { font-size: 14px; line-height: 1.7;}
#sec06 .private_col .btn_01 { margin: 60px auto 0; }

@media screen and (max-width: 600px) {
	#sec06 { padding: 100px 0 40px; }
	#sec06 div[class*=sec_detail] .slick-item > dl > dt { padding: 40px 5% 20px; font-size: 18px; }
	#sec06 div[class*=sec_detail] .slick-item .menu { width: 86%; padding-top: 25px; }
	#sec06 div[class*=sec_detail] .slick-item .menu > p { font-size: 14px; padding-bottom: 15px; }
	#sec06 div[class*=sec_detail] .slick-item .menu dl div { margin-bottom: 10px; padding-left: 5px; flex-direction: column; gap: 5px; }
	#sec06 .private_col { width: 80%; padding-top: 50px; }
	#sec06 .private_col h3 { font-size: 16px; padding-bottom: 20px; }
	#sec06 .private_col p { font-size: 12px; }
	#sec06 .private_col .btn_01 { margin: 30px auto 0; }
}