@charset "UTF-8";

.p-pagetop,
.buttonizer {
	display: none !important;
}

html,
body {
	padding: 0;
	margin: 0;

}

:root {
	--container: 1180px;
	--text-black: #000000;
	--be: #FFF8EE;
	--red: #B82F29;
	--mb: 60px;
}

@media (max-width: 768px) {
	:root {
		--mb: 30px;
	}
}

.sp {
	display: none
}

#fs_hiroshima {
	color: var(--text-black) !important;
	font-family: YakuHanJP, "Source Han Sans JP", -apple-system, BlinkMacSystemFont,
		"Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", Meiryo, sans-serif !important;
}

#fs_hiroshima img {
	max-width: 100%;

	height: auto;
}

.readarea {
	text-align: center;
	line-height: 2;
	margin-bottom: var(--mb);
}

@media (max-width: 768px) {
	.readarea {
		text-align: left;
		padding-left: 5%;
		padding-right: 5%;
	}
}

.l-row {
	display: flex;
	flex-wrap: wrap;
}

.fs_hiroshima_kv {
	margin-top: 171px;
}

@media (max-width: 1199px) {
	.fs_hiroshima_kv {
		margin-top: 0;
	}
}

/*------------
 KV
------------*/
.kv {
	margin-top: 170px
}

@media (max-width: 1199px) {
	.kv {
		margin-top: 0
	}
}

.kv__inner {
	width: 100%;
	display: flex;

	overflow: hidden;
}

.kv__panel {
	position: relative;
	min-width: 0;
}

.kv__panel--left {
	width: 52%
}

.kv__panel--right {
	background: url("kv_r.jpg") center / cover no-repeat;
	width: 48%
}

.kv__content {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	padding: clamp(38px, 3vw, 83px);
	color: #fff;
}

.kv__content_inner {
	padding: 0 40px;
}

.kv_r_logo1 {
	width: min(358px, 50%);
	margin: 0 auto clamp(43px, -124.742px + 12.903vw, 123px) 0
}

.kv_r_logo2 {
	width: min(630px, 90%);
	margin: 0 auto clamp(50px, -12.903px + 4.839vw, 80px) 0
}

.kv__date {
	font-size: clamp(16px, 2.4vw, 53px);
	font-weight: 800;
	margin-bottom: 40px;
	letter-spacing: 3px
}

.kv__date span {
	font-size: 80%
}

.kv__memo {
	font-size: clamp(12px, -0.581px + 0.968vw, 18px);
	margin-bottom: clamp(10px, -52.903px + 4.839vw, 40px);
	line-height: 1.6;
}

.kv__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	width: min(720px, 100%);
	align-items: baseline;
}

.kv__btn {
	width: calc(50% - 6px);
}

/* スマホで縦積みしたい場合 */
@media (max-width: 1199px) {
	.kv__inner {
		display: block
	}

	.kv__panel--left {
		width: 100%;
	}

	.kv__panel--right {
		width: 100%;
	}

	.kv__content {
		position: relative;
	}

	.kv_r_logo1 {
		margin: 0 auto clamp(43px, -124.742px + 12.903vw, 123px) auto;
	}

	.kv_r_logo2 {
		margin: 0 auto clamp(50px, -12.903px + 4.839vw, 80px) auto;
	}

	.kv__date {
		font-size: clamp(20px, 384.000px + -28vw, 48px);
		text-align: center;
	}

	.kv__memo {
		text-align: center
	}

	.kv__cta {
		margin: 0 auto
	}
}

@media (max-width: 768px) {
	.kv__cta {
		position: fixed;
		bottom: 8px;
		z-index: 999;
        left: 0;
	}
	.kv_r_logo1{
		width: min(198px, 80%);
		        margin: 0 auto 10px;
	}
	.kv__content_inner{
		padding: 0
	}
	.kv__date{
		font-size: clamp(20px, 7.273px + 3.394vw, 48px);
	}
	.kv_r_logo2 {
        margin: 0 auto 20px;
    }
	.kv__date{
		    margin-bottom: 10px;
	}
}



/*------------
 introduction
------------*/

.fs_hiroshima_introduction {
	background: var(--be);
	padding: clamp(50px, 37.864px + 3.236vw, 100px) 0;
}

.fs_hiroshima_introduction .mainttl {
	font-size: clamp(27px, 13.165px + 3.689vw, 84px);
	line-height: 1.3;
	font-weight: 900;
	text-align: center;
	letter-spacing: .05em;
	margin-bottom: var(--mb);
}

.fs_hiroshima_introduction .mainttl span {
	align-items: center;
	display: flex;
	justify-content: center;
	font-size: clamp(22px, 11.806px + 2.718vw, 64px);
}

.fs_hiroshima_introduction .mainttl span::before,
.fs_hiroshima_introduction .mainttl span::after {
	background-color: #000;
	content: "";
	height: 5px;
	width: 1em;
}

@media (max-width: 768px) {

	.fs_hiroshima_introduction .mainttl span::before,
	.fs_hiroshima_introduction .mainttl span::after {
		height: 2px;
	}
}

.fs_hiroshima_introduction .mainttl span::before {
	margin-right: 10px;
	transform: rotate(60deg);
}

@media (max-width: 768px) {
	.fs_hiroshima_introduction .mainttl span::before {
		margin-right: 5px;
	}
}

.fs_hiroshima_introduction .mainttl span::after {
	margin-left: 10px;
	transform: rotate(-60deg);
}

@media (max-width: 768px) {
	.fs_hiroshima_introduction .mainttl span::after {
		margin-left: 5px;
	}
}

.fs_hiroshima_introduction .readarea {
	font-size: clamp(16px, 13.087px + 0.777vw, 28px);
	font-weight: 500
}

.introductionarea {
	background: url(hiroshimamap_kiri.svg)no-repeat;
	background-size: 100%;
	width: min(1620px, 100%);
	padding: 0 5%;
	margin: 0 auto
}

.introductionarea .subttl {
	font-size: clamp(18px, 11.447px + 1.748vw, 45px);
	color: var(--red);
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1.5;
	text-align: center;
	margin-bottom: var(--mb);
}

.foodlink {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: var(--mb);
}

.foodlink .sec {
	margin-top: 110px
}

.foodlink a img {
	transition: transform .6s ease;
}

.foodlink a:hover img {
	transform: scale(1.1);
}

.introductionbox {
	width: min(980px, 90%);
	margin: 0 auto var(--mb);
	border-radius: 30px;
	padding: 40px 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (max-width: 768px) {
	.introductionbox {
		padding: 20px;
	}
}

.introductionbox .columnttl {
	font-size: clamp(22px, 13.748px + 2.201vw, 56px);
	font-weight: 900;
	text-align: center;
	line-height: 1.45;
	margin-bottom: clamp(10px, 7.573px + 0.647vw, 20px);
}

.introductionbox .mainimg {
	margin-bottom: clamp(36px, 31.146px + 1.294vw, 56px);
}

.introductionbox .mainimg img {
	border-radius: 30px
}

.introductionbox .columnttl span,
.introductionbox .columnsubttl {
	font-size: clamp(16px, 12.117px + 1.036vw, 32px);
	display: block;
	line-height: 1.45;
	text-align: center;
}

.introductionbox .columnsubttl {
	margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
}

.introductionbox .txtarea {
	font-size: clamp(14px, 13.029px + 0.259vw, 18px);
	line-height: 2;
	margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
}

.introductionbox .txtarea strong {
	font-size: 24px;
	color: var(--red)
}

.introductionbox .txtarea.l-row {
	gap: 5%
}

.introductionbox .txtarea.l-row p {
	width: 60%;
}

@media (max-width: 768px) {
	.introductionbox .txtarea.l-row p {
		width: 100%;
		margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
	}
}

.introductionbox .txtarea.l-row .img {
	width: 35%;
}

@media (max-width: 768px) {
	.introductionbox .txtarea.l-row .img {
		width: 100%;
		margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
	}
}

.introductionbox .txtarea.l-row .img img:not(:last-child) {
	margin-bottom: 40px
}

.introductionbox .txtarea.l-row .img img {
	border-radius: 10px
}

.introductionbox._food01 {
	background: #F4DDBD;
}

.introductionbox._food02 {
	background: #F4D0BD;
}

.introductionbox._food03 {
	background: #EDDAD6;
}

.introductionbox._food04 {
	background: #E7DEB9;
}

.introductionbox._food05 {
	background: #E5E7DF;
}

/*------------
 オフ会
------------*/
.fs_hiroshima_off {
	background: var(--red);
	padding: clamp(50px, 25.728px + 6.472vw, 150px) 0;
}

.fs_hiroshima_off .inner {
	width: min(980px, 90%);
	margin: 0 auto;
}

.fs_hiroshima_off__ttlarea,
.offboxarea {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	grid-row-gap: var(--mb);
}

.fs_hiroshima_off__ttlarea {
	color: #fff;
}

.fs_hiroshima_off_ttl {
	border-bottom: 3px solid #fff;
	border-top: 3px solid #fff;
	padding: var(--mb) 5%;
	display: flex;
	justify-content: center;
}

.fs_hiroshima_off__ttlarea .subttl {
	font-size: clamp(20px, 16.602px + 0.906vw, 34px);
	font-weight: 900;
	margin-bottom: 0;
	text-align: center;
}

.fs_hiroshima_off__ttlarea .readarea {
	font-size: clamp(14px, 13.029px + 0.259vw, 18px);
	font-weight: 500
}

.offbox {
	background: #fff;
	border-radius: 30px;
	padding: 30px 30px 30px 160px;
	position: relative
}

@media (max-width: 768px) {
	.offbox {
		padding: 60px 20px 30px;
	}
}

.offbox .icon {
	position: absolute;
	top: -12px;
	left: 30px
}

@media (max-width: 768px) {
	.offbox .icon {
		width: 61px;
		left: 20px;
		top: -7px;
	}
}

.offbox .ttl {
	font-size: clamp(18px, 14.117px + 1.036vw, 34px);
	font-weight: 700;
	line-height: 136%;
	margin-bottom: 10px
}

.offbox table {
	margin-bottom: 10px;
	font-weight: 500
}

@media (max-width: 768px) {
	.offbox table {
		font-size: 14px;
		table-layout: fixed;
	}
}

.offbox table th,
.offbox table td {
	padding-bottom: 5px;
	vertical-align: baseline
}

@media (max-width: 768px) {}

.offbox table th {
	text-align: left;
	padding-right: 1em;
	min-width: 7em;
}

@media (max-width: 768px) {
	.offbox table th {
		width: 88px
	}
}

.offbox table td {
	text-align: left;
	padding-right: 1em;
	line-height: 1.6
}

.offbox .img {
	margin-bottom: 30px
}

.offbox .btn a {
	text-align: center;
	background: #C8AD58;
	color: #fff;
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	position: relative
}

.offbox .btn a:after {
	content: '';
	background: url(play_arrow.svg)no-repeat;
	width: 24px;
	height: 24px;
	position: absolute;
	right: 30px;
}

.offbox .btn a:hover {
	background: #ba900a
}

/*------------
 参加店舗一覧
------------*/
.stores {
	background: var(--be);
	padding: clamp(50px, 25.728px + 6.472vw, 150px) 0;
}

.stores .inner {
	width: min(980px, 90%);
	margin: 0 auto;
}

.logo-light {
	text-align: center;
	margin-bottom: 40px
}

@media (max-width: 768px) {
	.logo-light {
		width: 140px;
		margin: 0 auto 20px;
	}
}

.stores_ttl {
	font-size: clamp(24px, 14.291px + 2.589vw, 64px);
	font-weight: 900;
	text-align: center;
	line-height: 1.45;
	margin-bottom: 20px;
	margin-bottom: var(--mb)
}

.stores span {
	font-size: clamp(24px, 16.718px + 1.942vw, 54px);
	display: block;
	line-height: 1.45;
	text-align: center;
}

/* アコーディオン：タイトル（青背景は.container内のみ） */
.area {
	margin: 0 0 1px;
	border: none;
}

.area > summary {
	list-style: none;
	cursor: pointer;
	background: transparent;
}

.area > summary::-webkit-details-marker {
	display: none;
}


.area__band {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--red);
	color: #fff;
	padding: 12px 16px;
}


.area__head {
	position: relative;
	font-weight: 700;
	letter-spacing: .03em;
	font-size: clamp(18px, 16.544px + 0.388vw, 24px);
	padding: 10px;
	width: 100%;
}

/* 左矢印（>）位置。openで下向き */
.area__head::before {
	content: '';
	background: url(menu_open.svg)no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	margin-right: 0;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.area[open] .area__head::before {
	content: '';
	background: url(close.svg)no-repeat;
	width: 24px;
	height: 24px;
	display: inline-block;
	margin-right: 0;
	position: absolute;
	right: 0px;
}

/* 展開パネル（100%背景だが中身は.container） */
.area__body {
	overflow: hidden;
	transition: max-height .28s ease;
}

.area__pad {
	padding: 0;
}

/* 展開内の店舗リスト（白カード縦並び：デザイン準拠） */
.shoplist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shopcard {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 0;
	background: #fff;
	border-bottom: 1px solid #c9c9c9;
	border-radius: 0px;
	overflow: hidden;
}

.shopcard + .shopcard {
	margin-top: 0px;
}

.shopcard__img {
	background: #f2f2f2;
}

.shopcard__img img {
	width: 100%;
}

.shopcard__body {
	padding: 14px;
	text-align: left;
}

.shopcard__line1 {
	color: #5a6470;
	font-size: var(--pt-18);
	margin: 0 0 0.6em;
}

.shopcard__ttl {
	margin: 0 0 0.6em;
	font-weight: 800;
	font-size: var(--pt-24);
}

.shopcard__meta {
	margin: 0 0 0.6em;
	color: #5a6470;
	font-size: var(--pt-18);
}

/* ===== 次世代日本酒フェア参加バッジ ===== */
:root {
	--sakefair-red: #d23a3a;
	/* 基本色（落ち着いた赤） */
}

.badge {
	display: inline-block;
	vertical-align: middle;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	user-select: none;
}

/* 日本酒フェア参加 */
.badge--sakefair {
	font-size: 14px;
	/* ちっちゃめ */
	color: #fff;
	/* 白文字 */
	padding: 3px 7px;
	/* 細身のピル型 */
	background: var(--sakefair-red);
	transform: translateZ(0);
	/* 文字のにじみ軽減トリック */
}

/* 見出しの先頭で使うときの余白（必要なら） */
.shopcard__ttl .badge--sakefair {
	margin-right: .5em;
}

/* PC（~デスクトップ） */
@media (min-width:1025px) {
	.shopcard__img {
		width: 340px;
		/* カラム幅と一致 */
		height: 180px;
		/* クロップ高さ */
		overflow: hidden;
		/* はみ出し非表示 */
		display: block;
		/* aタグでも安定 */
	}

	.shopcard__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 枠いっぱいにカバー＝トリミング */
		object-position: center;
		/* 中心からのクロップ */
		display: block;
	}
}

/* タブレット（あなたのレイアウトに合わせて200pxカラムに最適化） */
@media (max-width:1024px) and (min-width:769px) {
	.shopcard__img {
		width: 200px;
		height: 180px;
		/* 比率およそ同等（任意） */
		overflow: hidden;
	}

	.shopcard__img img {
		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: center;
		display: block;
	}
}

/* SP（1カラム時は横幅可変。高さは比率固定にしたい場合は aspect-ratio を使用） */
@media (max-width:768px) {
	.shopcard__img {
		width: 100%;
		aspect-ratio: 17 / 7.5;
		/* ≒ 340:150 を比率で維持 */
		overflow: hidden;
	}

	.shopcard__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}
}


/* 既存の青板タイプを使う場合のスタイル（必要なら使用） */
/* .shops, .shop, .shop__info 等は使わない */

/* レスポンシブ */
@media (max-width:1024px) {
	.shopcard {
		grid-template-columns: 200px 1fr;
	}
}

@media (max-width:768px) {
	.shopcard {
		grid-template-columns: 1fr;
	}
}

/*------------
 attempt
------------*/

.attempt_kv {
	background: var(--be);
	position: relative
}

.attempt_kv .main img {
	border-radius: 100px 100px 0 0
}

@media (max-width:768px) {
	.attempt_kv .main img {
		border-radius: 60px 60px 0 0
	}
}

.attempt_kv .sub {
	width: 100%;
	position: absolute;
	bottom: -1px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	left: 50%;
}

.attempt_kv .sub img {
	width: 100%
}

.attemptcontents {
	background: #EAE7D8;
	padding-bottom: 150px
}

@media (max-width:768px) {
	.attemptcontents {
		padding-bottom: 50px;
		padding-top: 30px
	}
}

.min {
	font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

.attemptttl {
	font-size: clamp(26px, 14.835px + 2.977vw, 72px);
	color: #ED4700;
	text-align: center;
	margin-bottom: 20px;
	font-weight: 400;
	letter-spacing: 0.1em
}

.attempt .subttl {
	font-size: clamp(16px, 9.689px + 1.683vw, 42px);
	margin-bottom: 40px;
	text-align: center;
	letter-spacing: 0.1em
}

.attempt .readarea {
	font-size: clamp(14px, 13.029px + 0.259vw, 18px);
	margin-bottom: clamp(40px, 28.592px + 3.042vw, 87px);
}

.fairlist {
	display: flex;
	gap: 54px;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.fairlist {
		gap: 8px;
	}
}

.fairlistarea {
	width: min(1180px, 100%);
	margin: 0 auto var(--mb);
}

@media (max-width: 768px) {
	.fairlistarea {
		padding: 0 5%
	}
}

.fairlistttl {
	text-align: center;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	padding: 24px 0;
	margin-bottom: var(--mb);
}



.arrow_r {
	position: relative;
	display: inline-block;
	width: 100%;
}

.arrow_r:before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #ED4700;
	border-right: solid 2px #ED4700;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	margin: auto;
}

@media (max-width: 768px) {
	.sp {
		display: block
	}

	.pc {
		display: none
	}

	.foodlink li:first-child {
		width: min(240px, 100%);
	}

	.foodlink li:nth-child(2) {
		width: min(270px, 100%);
	}

	.foodlink .sec {
		margin-top: 0;
	}

	.foodlink li:nth-child(3) {
		width: min(260px, 100%);
	}

	.foodlink li:nth-child(4) {
		width: min(360px, 100%);
	}

	.foodlink li:nth-child(5) {
		width: min(280px, 100%);
	}

	.arrow_r:before {
		right: 10px
	}
}
.OK_hiroshima_banner{
	text-align: center;
	    padding: clamp(50px, 25.728px + 6.472vw, 100px) 0 40px;
}
.OK_hiroshima_banner_ttl{
	       font-size: clamp(20px, 16.602px + 0.906vw, 34px);
	font-weight: 900;
	margin-bottom: 40px;
}
.OK_hiroshima_banner_btn{
	   width: min(360px,90%);
	margin: 0 auto;
}
.OK_hiroshima_banner_btn a:hover img{
	opacity: .8
}