@charset "utf-8";

/*  ================================================================================================

	リセット

============================================================================================  */
		
/*　リセットCSS-全体
-----------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/*　font
-----------------------------------------------------*/
@font-face {
	font-family: 'NotoSans';
	src: url("font/NotoSansJP-Regular.ttf") format("truetype");
}
@font-face {
	font-family: 'NotoSansB';
	src: url("font/NotoSansJP-Bold.ttf") format("truetype");
}
@font-face {
	font-family: 'NotoSansBLK';
	src: url("font/NotoSansJP-Black.ttf") format("truetype");
}
body {
	line-height: 1.5;
	font-family: 'NotoSans',sans-serif;
}
#wrapper header#commonHeader,
#wrapper footer#commonFooter {
	font-family: 'NotoSans',sans-serif!important;
}
#wrapper #headerInner .globalNaviList a,
#wrapper #headerInner .globalNaviList span,
#wrapper .aboutGekkeikan .content>a p,
#wrapper footer#commonFooter .siteLink dt {
	font-family: 'NotoSansB',sans-serif!important;
	font-weight:normal!important;
}
/*PCのみ font */
@media screen and (min-width: 768px) {
	#wrapper #headerInner .globalNaviList .linkBlock a,
	#wrapper #headerInner .globalNaviList .otherLink ul#slideToggle a span {
		font-family: 'NotoSans',sans-serif!important;
	}
}
/*Spのみ font */
@media screen and (max-width: 767px) {
	#wrapper .recommendContent .recommendContSlick .articleWrap .articleTxt h3,
	#wrapper footer#commonFooter .siteLink dl dt a {
		font-family: 'NotoSansB',sans-serif!important;
		font-weight:normal!important;
	}
}


ol, ul {
	list-style: none;
}
img {
	vertical-align: bottom;
}
/*-----------------------------------------------------
                      PC (xs) 
-----------------------------------------------------*/
@media screen and (min-width: 821px) {
	#wrapper #headerInner .globalNaviList .linkBlock a {
		font-family: 'NotoSans',sans-serif!important;
	}
	#top .pcNone {
		display: none!important;
	}
}

html {
	font-size: calc(100vw * 18 / 1920);
}
html #wrapper {
	margin: 0;
	padding: 0;
}


.recommendContent,
.searchProducts,
.aboutGekkeikan,
.newsRelease,
.topTopics {
	max-width: 1920px;
	margin: 0 auto 8.4rem;
}

.main .movieWrap {
	margin: 0 0 8.4rem;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main .movieWrap .fitsize {
	position: absolute;
}
.main .movieWrap .scrollHint {
	display: inline-block;
	width: 0.1rem;
	height: 3.8rem;
	background-color: #FFFFFF;
	position: absolute;
	transform: translate(0, -50%);
	top: 50%;
	right: 4.7rem;
}
.main .movieWrap .scrollHint::after {
	content: "";
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 100vh;
	background-color: #FFFFFF;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 0%;
	left: 50%;
	animation: circlemove 2.3s ease-in-out infinite, cirlemovehide 2.3s ease-in-out infinite;
}
@keyframes circlemove{
	0%{top: 0%;}
	100%{top: 100%;}
}
@keyframes cirlemovehide{
	0%{opacity:0}
	20%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
}

.main .movieWrap .videoBtnWrap {
	display: flex;
	position: absolute;
	bottom: 0.7rem;
	right: 3.95rem;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	z-index: 2;
}
.main .movieWrap .videoBtnWrap .playBtn {
	width: 4rem;
	margin: 0 0.4rem 0 0;
	cursor: pointer;
}
.main .movieWrap .videoBtnWrap .soundBtn {
	width: 4rem;
	cursor: pointer;
}
.main .movieWrap .videoBtnWrap img {
	width: 100%;
}
.notices {
	width: 90%;
	max-width: calc(1920px * 0.9);
	margin: 2.4rem auto 0;
	padding: 2.7rem 1.8rem;
	background-color: #F3F3F3;
}
.notices h2 {
	margin: 0 0 2.7rem;
	font-size: 1.3rem;
	font-weight: bold;
	color: #D60000;
}
.notices li {
	margin: 0 0 1.3rem;
}
.notices li:last-child {
	margin: 0;
}
.notices li a {
	font-size: 1.1rem;
	color: #333333;
	text-decoration: none;
}
.notices li a.pdfLink {
	padding: 0 2.2rem 0 0;
	background-image: url("/lib/img/top/ico_pdf.png");
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
}
.notices li a span {
	margin: 0 1.8rem 0 0;
	font-size: 1rem;
}

.hWrap {
	width: 90%;
	margin: 0 auto 2.2rem;
}
.hWrap h2 {
	display: inline-block;
}
h2 .enH {
	display: block;
	font-size: 1rem;
	font-family: 'NotoSansBLK',sans-serif!important;
	color: #00823E;
}
h2 .jpH {
	display: block;
	font-size: 2.2rem;
	color: #333333;
}
.swiper-button-prev {
		background: url("/lib/img/top/btn_prev.png") no-repeat center center / contain;
}
.swiper-button-prev::after {
		content: ""!important;
}

.swiper-button-next {
		background: url("/lib/img/top/btn_next.png") no-repeat center center / contain;
}
.swiper-button-next::after {
		content: ""!important;
}

.recommendContent {
	position: relative;
	overflow: hidden;
}
.recommendContent .recommendContSlick {
	width: 100%;
	position: static;
}
.recommendContent .recommendContSlick.swiper-wrapper {
	margin-bottom: 1.7rem;
}
.recommendContent .recommendContSlick .slick-list {
	overflow: unset;
}
.recommendContent .recommendContSlick .slick-track {
	display: flex;
}

.recommendContent .recommendContSlick .articleWrap {
	height: auto;
}
.recommendContent .recommendContSlick .articleWrap a {
	display: inline-block;
	width: calc(100% - 0.8rem);
	height: 100%;
	margin: 0 0.4rem;
	border-radius: 0.5rem;
	font-size: 2rem;
	background-color: #fff;
	filter: drop-shadow(0 3px 0  rgba(0, 0, 0, 0.25));
	overflow: hidden;
	text-decoration: none;
}
.recommendContent .recommendContSlick .articleWrap .articleImg {
	overflow: hidden;
}
.recommendContent .recommendContSlick .articleWrap .articleImg img {
	width: 100%;
	transform: translateZ(0) scale(1);
	transition: .3s ease-in-out;
}
@media screen and (min-width: 971px) {
	.recommendContent .recommendContSlick .articleWrap a:hover .articleImg img {
		transform: translateZ(0) scale(1.1);
	}
}
.recommendContent .recommendContSlick .articleWrap .articleCont {
	padding: 1.4rem 0.9rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
}
.recommendContent .recommendContSlick .articleWrap .articleIco {
	display: inline-block;
	width: 6.9rem;
	margin: 0 0 0.9rem;
	padding: 0.5rem 0;
	border: 1px solid #107A4B;
	border-radius: 100vh;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1;
	color: #107A4B;
}
.recommendContent .recommendContSlick .articleWrap .articleTxt h3 {
	margin: 0 0 0.9rem;
	font-size: 1.3rem;
	font-weight: bold;
	color: #333333;
}
.recommendContent .recommendContSlick .articleWrap .articleTxt p {
	font-size: 1.1rem;
	overflow: hidden;
	/* display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; */
	color: #333333;
}

.recommendContent .swiper-button-prev {
	display: inline-block!important;
	width: 4rem;
	height: 4.2rem;
	position: absolute;
	transform: translate3d(0, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 97.5%;
	left: 43%;
	z-index: 2;
	margin-top:0!important;
}
@media screen and (min-width: 971px) {
	.recommendContent .swiper-button-prev:hover {
		transform: translate3d(0, -100%, 0) scale(0.9);
	}
}
.recommendContent .swiper-button-next {
	display: inline-block!important;
	width: 4rem;
	height: 4.2rem;
	position: absolute;
	transform: translate3d(0, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 97.5%;
	right: 43%;
	z-index: 2;
	margin-top:0!important;
}
@media screen and (min-width: 971px) {
	.recommendContent .swiper-button-next:hover {
		transform: translate3d(0, -100%, 0) scale(0.9);
	}
}
.recommendContent .swiper-button-prev:before,
.recommendContent .swiper-button-next:before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: static;
	opacity: 1;
}
.recommendContent .swiper-button-prev:before {
	background-image: url("/lib/img/top/btn_prev.png");
}
.recommendContent .swiper-button-next:before {
	background-image: url("/lib/img/top/btn_next.png");
}
.recommendContent .swiper_control {
	width: 4rem;
	position: absolute;
	transform: translate3d(-50%, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 97.5%;
	left: 50%;
	z-index: 2;
	cursor: pointer;
}
@media screen and (min-width: 971px) {
	.recommendContent .swiper_control:hover {
		transform: translate3d(-50%, -100%, 0) scale(0.9);
	}
}
.recommendContent .swiper_control img {
	width: 100%;
}
.recommendContent .swiper-pagination {
	width: 90%!important;
	margin: 2.9rem auto;
	line-height: 1;
	position: static;
	font-size: 0;
	text-align: right;
}
.recommendContent .swiper-pagination .swiper-pagination-bullet {
	width: 0.9rem!important;
	height: 0.9rem!important;
	margin: 0 0.7rem!important;
	background-color: #BFBFBF;
	opacity: 1;
}
.recommendContent .swiper-pagination .swiper-pagination-bullet:last-child {
	margin: 0 0 0 0.7rem!important
}
.recommendContent .swiper-pagination .swiper-pagination-bullet button:before {
	content: '';
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 100vh;
	background-color: #BFBFBF;
	opacity: 1;
}
.recommendContent .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	opacity: 1;
	background-color: #107A4B;
}

.searchProducts {
	position: relative;
	overflow: hidden;
}
.searchProducts .productsSlickWrap {
	position: relative;
}
.searchProducts .productsSlick {
	width: 100%;
	position: static;
}
/* margin上書き用 */
.searchProducts .productsSlick.swiper-wrapper {
	margin-bottom: 1.6rem;
}
.searchProducts .productsSlick .slick-list {
	overflow: unset;
}
.searchProducts .productsSlick .slick-track {
	display: flex;
}

.searchProducts .productsSlick .itemWrap {
	height: auto;
}
.searchProducts .productsSlick .itemWrap a {
	display: inline-block;
	width: calc(100% - 0.8rem);
	height: 100%;
	margin: 0 0.4rem;
	font-size: 2rem;
	background-color: #fff;
	text-decoration: none;
}
.searchProducts .productsSlick .itemWrap .itemImgWrap {
	position: relative;
	width: 100%;
	height: 35.5rem;
}
.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImgBg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 34rem;
	transform: translateZ(0) scale(1);
	transition: .3s ease-in-out;
	background: transparent radial-gradient(closest-side at 50% 50%, #F2F2F2 0%, #ECECEC 50%, #BBBBBB 100%) 0% 0% no-repeat padding-box;
	background-size: 160% 160%;
	background-position: center;
	z-index: 1;
}
@media screen and (min-width: 971px) {
	.searchProducts .productsSlick .itemWrap a:hover .itemImgWrap .itemImgBg {
		transform: translateZ(0) scale(0.94);
	}
}
.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	transform: translateZ(0) scale(1);
	transition: .3s ease-in-out;
	z-index: 2;
}
@media screen and (min-width: 971px) {
	.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImgBg {
		transform: translateZ(0) scale(1);
		transition: .3s ease-in-out;
		background-size: 160% 160%;
	}
	.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImg {
		transform: translateZ(0) scale(1);
		transition: .3s ease-in-out;
	}
}
@media screen and (min-width: 971px) {
	.searchProducts .productsSlick .itemWrap a:hover .itemImgWrap .itemImg {
		transform: translateZ(0) scale(1.04);
	}
}

.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImg>div {
	display: flex;
	flex-flow: row nowrap;
	filter: drop-shadow(10px -1px 6px rgb(0,0,0,25%));
}
.shinKankakuNihonshu { height: 35.5rem; }
.kinoSeiNihonshu { height: 35.5rem; }
.junmaidaiginjoshu { height: 35.5rem; }
.tokubetsujunmaishu { height: 35.5rem; }
.honjozoSake { height: 35.5rem; }
.futsuSake { height: 35.5rem; }
.kizake { height: 35.5rem; }
.tsunodaru { height: 23.1rem; }
.ryointenmuke { height: 35.5rem; }
.limited { height: 35.5rem; }
.nihonshuTaste { height: 35.5rem; }
.sparkling { height: 35.5rem; }
.importedBeer { height: 35.5rem; }
.other { height: 23.1rem; }

.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImg img {
	width: auto;
	height: 100%;
}
.searchProducts .productsSlick .itemWrap .itemCont {
	padding: 1.3rem 0 0;
}
.searchProducts .productsSlick .itemWrap .itemCont p {
	font-size: 1.3rem;
	color: #333333;
}

.searchProducts .swiper-button-prev {
	display: inline-block!important;
	width: 4rem;
	height: 4.2rem;
	position: absolute;
	transform: translate3d(0, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 104%;
	left: 43%;
	z-index: 2;
	margin-top:0!important;
}
@media screen and (min-width: 971px) {
	.searchProducts .swiper-button-prev:hover {
		transform: translate3d(0, -100%, 0) scale(0.9);
	}
}
.searchProducts .swiper-button-next {
	display: inline-block!important;
	width: 4rem;
	height: 4.2rem;
	position: absolute;
	transform: translate3d(0, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 104%;
	right: 43%;
	z-index: 2;
	margin-top:0!important;
}
@media screen and (min-width: 971px) {
	.searchProducts .swiper-button-next:hover {
		transform: translate3d(0, -100%, 0) scale(0.9);
	}
}
.searchProducts .swiper-button-prev:before,
.searchProducts .swiper-button-next:before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: static;
	opacity: 1;
}
.searchProducts .swiper-button-prev:before {
	background-image: url("/lib/img/top/btn_prev.png");
}
.searchProducts .swiper-button-next:before {
	background-image: url("/lib/img/top/btn_next.png");
}
.searchProducts .swiper_control {
	width: 4rem;
	position: absolute;
	transform: translate3d(-50%, -100%, 0) scale(1);
	transition: .3s ease-in-out;
	top: 104%;
	left: 50%;
	z-index: 2;
	cursor: pointer;
}
@media screen and (min-width: 971px) {
	.searchProducts .swiper_control:hover {
		transform: translate3d(-50%, -100%, 0) scale(0.9);
	}
}
.searchProducts .swiper_control img {
	width: 100%;
}
.searchProducts .swiper-pagination {
	width: 90%!important;
	margin: 2.4rem auto 3.3rem;
	line-height: 1;
	position: static;
	font-size: 0;
	text-align: right;
}
.searchProducts .swiper-pagination .swiper-pagination-bullet {
	width: 0.9rem;
	height: 0.9rem;
	margin: 0 0.7rem!important;
}
.searchProducts .swiper-pagination .swiper-pagination-bullet:last-child {
	margin: 0 0 0 0.7rem;
}
.searchProducts .swiper-pagination .swiper-pagination-bullet button {
	width: 0.9rem;
	height: 0.9rem;
}
.searchProducts .swiper-pagination .swiper-pagination-bullet button:before {
	content: '';
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 100vh;
	background-color: #BFBFBF;
	opacity: 1;
}
.searchProducts .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	opacity: 1;
	background-color: #107A4B;
}

.searchProducts .allProducts {
	width: 90%;
	margin: 0 auto;
	text-align: right;
}
.searchProducts .allProducts a {
	padding: 0 2.84rem 0 0;
	font-size: 1.2rem;
	text-decoration: none;
	color: #333;
	position: relative;
}
.searchProducts .allProducts a::after {
	content: "";
	width: 1.94rem;
	height: 1.94rem;
	background-image: url("/lib/img/top/ico_linkRight_df.png");
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}
@media screen and (min-width: 971px) {
	.searchProducts .allProducts a:hover:after {
		background-image: url("/lib/img/top/ico_linkRight_ov.png");
	}
}

.aboutGekkeikan .content {
	display: flex;
	width: 90%;
	margin: 0 auto;
	flex-flow: row wrap;
	justify-content: space-between;
}
.aboutGekkeikan .content>a {
	display: block;
	width: calc((100% - 1.8rem) / 3);
	margin: 0 0 0.9rem;
	position: relative;
	overflow: hidden;
}
.aboutGekkeikan .content .btnBg {
	width: 100%;
	overflow: hidden;
}
.aboutGekkeikan .content .btnBg img {
	width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out;
}
@media screen and (min-width: 971px) {
	.aboutGekkeikan .content>a:hover img {
		transform: scale(1.1);
	}
}
.aboutGekkeikan .content>a p {
	display: flex;
	width: 100%;
	height: 100%;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	animation: aboutOverlay-out .5s ease-out forwards;
}
@media screen and (min-width: 971px) {
	.aboutGekkeikan .content>a:hover p {
		animation: aboutOverlay .5s ease-out forwards;
	}
}
@keyframes aboutOverlay{
	0% {
		background-color: rgb(51 51 51 / 60%);
	}
	100% {
		background-color: rgb(51 51 51 / 20%);
	}
}
@keyframes aboutOverlay-out {
	0% {
		background-color: rgb(51 51 51 / 20%);
	}
	100% {
		background-color: rgb(51 51 51 / 60%);
	}
}

.newsRelease .hWrap {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: space-between;
}
.newsRelease .hWrap .rssLinkWrap {
	font-size: 0;
}
.newsRelease .hWrap .rssLinkWrap a {
	font-size: 1.2rem;
	text-decoration: none;
	position: relative;
}
.newsRelease .hWrap .rssLinkWrap .rssLink {
	padding: 0 0.9rem 0 1.7rem;
	font-weight: 500;
	line-height: 1;
	color: #00823E;
}
.newsRelease .hWrap .rssLinkWrap .rssLink::before {
	content: "";
	width: 1.26rem;
	height: 1.26rem;
	background-image: url("/lib/img/top/ico_rss.png");
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
}
@media screen and (min-width: 971px) {
	.newsRelease .hWrap .rssLinkWrap .rssLink:hover {
		text-decoration: underline;
	}
}
.newsRelease .hWrap .rssLinkWrap .rssAboutLink {
	padding: 0 2.84rem 0 0;
	color: #333333;
	line-height: 1.2;
}
.newsRelease .hWrap .rssLinkWrap .rssAboutLink::after {
	content: "";
	width: 1.94rem;
	height: 1.94rem;
	background-image: url("/lib/img/top/ico_linkRight_df.png");
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}
@media screen and (min-width: 971px) {
	.newsRelease .hWrap .rssLinkWrap .rssAboutLink:hover:after {
		background-image: url("/lib/img/top/ico_linkRight_ov.png");
	}
}
.newsRelease .content {
	width: 90%;
	margin: 0 auto;
}
.newsRelease .content ul {
	margin: 0 0 2.2rem;
	border-bottom: 1px solid #CCCCCC;
}
.newsRelease .content li a {
	display: flex;
	flex-flow: row nowrap;
	padding: 2.2rem 1.8rem;
	border-top: 1px solid #CCCCCC;
	text-decoration: none;
}
.newsRelease .content .newsThumb {
	width: 12rem;
	height: 12rem;
}
.newsRelease .content .newsThumb img {
	width: 100%;
	object-fit: contain;
	height: 100%;
}
@media screen and (max-width: 820px) {	
.newsRelease .content .newsThumb {
	height: 14.3rem;
}
}
.newsRelease .content .newsCont {
	width: calc(100% - 12rem);
	padding: 0 0 0 2.2rem;
}
.newsRelease .content .newsCont .newsData {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 0 0 1.3rem;
}
.newsRelease .content .newsCont .newsData .newsIco {
	display: inline-block;
	width: 7.3rem;
	margin: 0 0.9rem 0 0;
	padding: 0.5rem 0;
	border: 1px solid #107A4B;
	border-radius: 100vh;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1;
	color: #107A4B;
}
.newsRelease .content .newsCont .newsData .newsDay {
	font-size: 1.1rem;
	color: #333333;
	line-height: 1;
}
.newsRelease .content .newsCont .newsTxt {
	font-size: 1.2rem;
	color: #333333;
	line-height: 2;
}
.newsRelease .allNews {
	text-align: right;
}
.newsRelease .allNews a {
	padding: 0 2.84rem 0 0;
	font-size: 1.2rem;
	text-decoration: none;
	color: #333;
	position: relative;
}
.newsRelease .allNews a::after {
	content: "";
	width: 1.94rem;
	height: 1.94rem;
	background-image: url("/lib/img/top/ico_linkRight_df.png");
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}
@media screen and (min-width: 971px) {
	.newsRelease .allNews a:hover:after {
		background-image: url("/lib/img/top/ico_linkRight_ov.png");
	}
}

.topTopics .content {
	width: 90%;
	margin: 0 auto;
}
.topTopics .content ul {
	margin: 0 0 2.2rem;
	border-bottom: 1px solid #CCCCCC;
}
.topTopics .content li a {
	display: flex;
	flex-flow: row nowrap;
	padding: 2.2rem 1.8rem;
	border-top: 1px solid #CCCCCC;
	text-decoration: none;
}
.topTopics .content .topicsThumb {
	width: 12rem;
}
.topTopics .content .topicsThumb img {
	width: 100%;
}
.topTopics .content .topicsCont {
	width: calc(100% - 12rem);
	padding: 0 0 0 2.2rem;
}
.topTopics .content .topicsCont .topicsData {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 0 0 1.3rem;
}
.topTopics .content .topicsCont .topicsData .topicsIco {
	display: inline-block;
	width: 7.3rem;
	margin: 0 0.9rem 0 0;
	padding: 0.5rem 0;
	border: 1px solid #107A4B;
	border-radius: 100vh;
	font-size: 0.9rem;
	text-align: center;
	line-height: 1;
	color: #107A4B;
}
.topTopics .content .topicsCont .topicsData .topicsDay {
	font-size: 1.1rem;
	color: #333333;
	line-height: 1;
}
.topTopics .content .topicsCont .topicsTxt {
	font-size: 1.2rem;
	color: #333333;
	line-height: 2;
}

/*-----------------------------------------------------
                      SP (xs) 
-----------------------------------------------------*/
@media screen and (max-width: 820px) {
	#top .spNone {
		display: none!important;
	}
	html {
		font-family: Noto Sans JP,sans-serif;
		/* viewport 375px のときfont-size 16px = 1rem */
		font-size: calc(100vw * 16 / 375);
	}
	#wrapper footer#commonFooter .siteLink {
		font-family: 'NotoSans',sans-serif!important;
	}

	.main .movieWrap {
		margin: 0 0 0;
	}
	.main .mainSlideWrap {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		pointer-events: none;
	}
	.main .mainSlideWrap .mainSlide {
		overflow: hidden;
	}
	.main .mainSlideWrap .mainSlide img {
		width: auto;
		height: 100%;
		transform: translate(-50%, 0);
		position: relative;
		left: 50%;
	}
	.main .movieWrap .scrollHint {
		width: 0.1rem;
		height: 4.3rem;
		transform: translate(-50%, 0);
		top: unset;
		bottom: 0.7rem;
		right: 50%;
		z-index: 1;
	}
	.main .movieWrap .videoBtnWrap {
		right: 0.7rem;
		bottom: 0.7rem;
	}
	.main .movieWrap .videoBtnWrap .spmovieBtn {
		width: 2.7rem;
		margin: 0;
		cursor: pointer;
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap {
		display: none;
		text-align: center;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #333;
		z-index: 9990;
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap .movieClose {
		display: inline-block;
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap .movieClose::before,
	.main .movieWrap .videoBtnWrap .spMovieWrap .movieClose::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 30px;
		background: #fff;
		border-radius: 2.5px;
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap .movieClose::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	
	.main .movieWrap .videoBtnWrap .spMovieWrap .movieClose::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap .spMovie {
		width: 100%;
		font-size: 0;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
	}
	.main .movieWrap .videoBtnWrap .spMovieWrap .spMovie video {
		width: 100%;
	}

	.notices {
		width: 100%;
		margin: 2.4rem 0 0;
		padding: 1.5rem 1rem;
	}
	.notices h2 {
		margin: 0 0 1.5rem;
		font-size: 1.1rem;
	}
	.notices li {
		margin: 0 0 2.1rem;
	}
	.notices li a {
		font-size: 0.9rem;
	}
	.notices li a span {
		display: block;
		margin: 0 0 0.25rem;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.recommendContent,
	.searchProducts,
	.aboutGekkeikan,
	.newsRelease,
	.topTopics {
		margin: 0 0 5rem;
	}
	.hWrap {
		width: 90%;
		margin: 0 auto 1.6rem;
	}
	h2 .enH {
		font-size: 0.75rem;
	letter-spacing: 0;
	}
	h2 .jpH {
		font-size: 2rem;
	}

	.recommendContent .swiper2 {
		margin-bottom: 4.2rem;
	}
	.recommendContent .recommendContSlick .articleWrap .articleCont {
		padding: 1rem 0.5rem;
	}
	.recommendContent .recommendContSlick .articleWrap .articleIco {
		width: 5.75rem;
		margin: 0 0 0.5rem;
		padding: 0.25rem 0;
		font-size: 0.75rem;
	}
	.recommendContent .recommendContSlick .articleWrap .articleTxt h3 {
		margin: 0 0 0.5rem;
		font-size: 1rem;
	}
	.recommendContent .recommendContSlick .articleWrap .articleTxt p {
		font-size: 0.88rem;
	}
	.recommendContent .swiper-button-prev {
		width: 3rem;
		height: 3.2rem;
		left: 27%;
		margin-top:0.7rem!important;
	}
	.recommendContent .swiper-button-next {
		width: 3rem;
		height: 3.2rem;
		right: 27%;
		margin-top:0.7rem!important;
	}
	.recommendContent .swiper-pagination {
		width: 100%!important;
		margin: 1.5rem 0 0;
		text-align: center;
	}
	.recommendContent .swiper-pagination .swiper-pagination-bullet {
		width: 0.6rem!important;
		height: 0.6rem!important;
		margin: 0 0.5rem!important;
	}
	/* pc上書き */
	.recommendContent .swiper-pagination .swiper-pagination-bullet:last-child {
		margin: 0 0.5rem!important;
	}
	.recommendContent .swiper-pagination .swiper-pagination-bullet button {
		width: 0.6rem!important;
		height: 0.6rem!important;
	}
	.recommendContent .swiper-pagination .swiper-pagination-bullet button:before {
		width: 0.6rem!important;
		height: 0.6rem!important;
	}
	.recommendContent .swiper_control {
		width: 3rem;
		height: 3.2rem;
		margin-top:0.7rem!important;
	}

	/* margin上書き用 */
	.searchProducts .productsSlick.swiper-wrapper {
		margin-bottom: 1.8rem;
	}

	.searchProducts .productsSlick .itemWrap a {
		width: calc(100% - 1.26rem);
		margin: 0 0.63rem;
		font-size: 1.5rem;
	}
	.searchProducts .productsSlick .itemWrap .itemImgWrap {
		height: 25.8rem;
	}
	.searchProducts .productsSlick .itemWrap .itemImgWrap .itemImgBg {
		height: 24.4rem;
	}
	.searchProducts .productsSlick .itemWrap .itemImgWrap.active .itemImgBg {
		transform: translateZ(0) scale(0.94);
	}
	.searchProducts .productsSlick .itemWrap .itemImgWrap.active .itemImg {
		transform: translateZ(0) scale(1.04);
	}

	.shinKankakuNihonshu { height: 25.8rem; }
	.kinoSeiNihonshu { height: 25.8rem; }
	.junmaidaiginjoshu { height: 25.8rem; }
	.tokubetsujunmaishu { height: 25.8rem; }
	.honjozoSake { height: 25.8rem; }
	.futsuSake { height: 25.8rem; }
	.kizake { height: 25.8rem; }
	.tsunodaru { height: 15.6rem; }
	.ryointenmuke { height: 25.8rem; }
	.limited { height: 25.8rem; }
	.nihonshuTaste { height: 25.8rem; }
	.sparkling { height: 25.8rem; }
	.importedBeer { height: 25.8rem; }
	.other { height: 17.4rem; }

	.searchProducts .productsSlick .itemWrap .itemCont {
		padding: 0.5rem 0 0;
	}

	.searchProducts .swiper-button-prev {
		width: 3rem;
		height: 3.2rem;
		left: 27%;
		margin-top:2.5rem!important;
	}
	.searchProducts .swiper-button-next {
		width: 3rem;
		height: 3.2rem;
		right: 27%;
		margin-top:2.5rem!important;
	}
	.searchProducts .swiper-pagination {
		width: 100%!important;
		margin: 2.5rem 0 5.5rem!important;
		text-align: center;
	}
	.searchProducts .swiper-pagination .swiper-pagination-bullet {
		width: 0.63rem!important;
		height: 0.63rem!important;
		margin: 0 0.5rem!important;
	}
	/* pc上書き */
	.searchProducts .swiper-pagination .swiper-pagination-bullet:last-child {
		margin: 0 0.5rem!important;
	}
	.searchProducts .swiper-pagination .swiper-pagination-bullet:first-child {
		margin: 0 0.5rem 0 0!important;
	}
	.searchProducts .swiper-pagination .swiper-pagination-bullet:last-child {
		margin: 0 0 0 0.5rem!important;
	}
	.searchProducts .swiper-pagination .swiper-pagination-bullet button {
		width: 0.63rem!important;
		height: 0.63rem!important;
	}
	.searchProducts .swiper-pagination .swiper-pagination-bullet button:before {
		width: 0.63rem!important;
		height: 0.63rem!important;
	}
	.searchProducts .swiper_control {
		width: 3rem;
		height: 3.2rem;
		margin-top:2.5rem!important;
	}

	.searchProducts .allProducts a {
		padding: 0 2rem 0 0;
		font-size: 1rem;
	}
	.searchProducts .allProducts a::after {
		width: 1.5rem;
		height: 1.5rem;
	}

	.aboutGekkeikan .content>a {
		width: 100%;
		margin: 0 0 1.5rem;
	}
	.aboutGekkeikan .content>a p {
		font-size: 1.5rem;
		background-color: rgb(51 51 51 / 20%);
		animation: unset;
	}

	.newsRelease .content li a {
		padding: 1.5rem 0;
		flex-flow: row wrap;
		justify-content: center;
	}
	.newsRelease .content .newsThumb {
		width: 14.3rem;
		margin: 0 0 0.5rem;
	}
	.newsRelease .content .newsCont {
		width: 100%;
		padding: 0;
	}
	.newsRelease .content .newsCont .newsData {
		padding: 0 0 0.5rem;
	}
	.newsRelease .content .newsCont .newsData .newsIco{
		width: 5rem;
		padding: 0.25rem 0;
		font-size: 0.8rem;
	}
	.newsRelease .content .newsCont .newsData .newsDay{
		font-size: 0.88rem;
	}
	.newsRelease .content .newsCont .newsTxt {
		font-size: 0.9rem;
		line-height: 1.6;
	}
	.newsRelease .content .rss {
		margin: 0 0 1.4rem;
		text-align: right;
	}
	.newsRelease .content a {
		text-decoration: none;
		position: relative;
	}
	.newsRelease .content a.rssLink {
		font-size: 1rem;
		font-weight: bold;
		line-height: 1;
		color: #00823E;
	}
	.newsRelease .content a.rssLink::before {
		content: "";
		display: inline-block;
		width: 0.97rem;
		height: 0.97rem;
		margin: 0 0.25rem 0 0;
		background-image: url("/lib/img/top/ico_rss.png");
		background-size: 100%;
		background-position: left top;
		background-repeat: no-repeat;
		
	}
	.newsRelease .content a.rssAboutLink {
		padding: 0 2rem 0 0;
		font-size: 1rem;
		line-height: 1.2;
		color: #333333;
	}
	.newsRelease .content a.rssAboutLink::after {
		content: "";
		width: 1.5rem;
		height: 1.5rem;
		background-image: url("/lib/img/top/ico_linkRight_df.png");
		background-size: 100%;
		background-position: left top;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
	}
	.newsRelease .allNews a {
		padding: 0 2rem 0 0;
		font-size: 1rem;
	}
	.newsRelease .allNews a::after {
		width: 1.5rem;
		height: 1.5rem;
	}

	.topTopics .content li a {
		padding: 1.5rem 0;
		flex-flow: row wrap;
		justify-content: center;
	}
	.topTopics .content .topicsThumb {
		width: 14.3rem;
		margin: 0 0 0.5rem;
	}
	.topTopics .content .topicsCont {
		width: 100%;
		padding: 0;
	}
	.topTopics .content .topicsCont .topicsData {
		padding: 0 0 0.5rem;
	}
	.topTopics .content .topicsCont .topicsData .topicsIco{
		width: 5rem;
		padding: 0.25rem 0;
		font-size: 0.8rem;
	}
	.topTopics .content .topicsCont .topicsData .topicsDay{
		font-size: 0.88rem;
	}
	.topTopics .content .topicsCont .topicsTxt {
		font-size: 0.9rem;
		line-height: 1.6;
	}

}

/*-----------------------------------------------------
                     TABLET (sm) 
-----------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 970px) {

}


@media screen and (min-width: 768px) {
	#commonHeader {
		margin-top: -400px!important;
		transition: .3s;
	}
	#commonHeader.is-animation {
		margin-top: 0!important;
		display: flex;
		align-items: center;
	}
}
@media screen and (max-width: 769px) {
	#commonHeader {
		margin-top: -55px!important;
		transition: .3s;
	}
	#commonHeader.is-animation {
		margin-top: 0px!important;
	}
}


	#movieWrapper {
		height: 100svh;
	}

	.relative {
			position: relative;
			height: 100vh;
			overflow: hidden;
		}
		.absolute {
			position: absolute;
			left: 0%;
			top: 0%;
			bottom: 0%;
			right: 0%;

			width: 100%;
			height: 100%;
		}
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.main .movieWrap {
			display: block;
		}
		.main .mainSlideWrap {
			width: 100%;
			margin: 0;
			height: 100svh;
		}
		/* .main .mainSlideWrap .mainSlide img {
			height: 100dvh!important;
		} */
		.slick-track {
			width: 100%;
		}