@charset "utf-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
}

.onlySp {
	display: none !important;
}
.onlyPc {
	display: block !important;
}

#suntory_contents > .container {
	font-family:"Arvo","Noto Sans JP Subsets",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,Arial,Hiragino Kaku Gothic ProN,"Droid Sans",YuGothic,Meiryo,Verdana,sans-serif;
}

#suntory_contents ul,
#suntory_contents ul li {
	list-style:  none;
	margin: 0;
	padding: 0 15px;
}

#suntory_contents div a,
#suntory_contents div a:hover,
#suntory_contents div a:active,
#suntory_contents div a:visited { text-decoration: none; color: #000000; }

#suntory_contents div a:hover { opacity: .6; }

#suntory_contents .globalnav { display: none; }

.mainvisual {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1.0;
}

.mainvisual img {
	width: 100%;
	height: auto;
}

.container {
	position: relative;
}

.container .nav {
	margin-top: -7px;
	background-color: #9c0000;
}

.container .nav ul,
.container .news dl {
	display: table;
	margin: 0 auto !important;
}

.container .nav ul li,
.container .news dl dt,
.container .news dl dd {
	display: table-cell;
	height: 75px;
	text-align: center;
	vertical-align: middle;
}

#suntory_contents .container .nav a,
#suntory_contents .container .nav a:active,
#suntory_contents .container .nav a:visited {
	color: #fff;
	padding: 25px;
	font-size: 16px;
}

#suntory_contents .container .nav {
	width :100%;
}

#suntory_contents .container .nav ul{
	margin:0 auto;
	width :1164px;
    padding-left: 200px;
    box-sizing: border-box;
}


.container .news {
	padding-top: 0;
	background-color: #fde6e9;
}

.container .news dl dt,
.container .news dl dd {
	padding: 0 20px;
	height: 40px;
	font-size: 14px;
	color: #000;
}

.container .news dl dt { font-weight: bold; }

.no-webp #countdown {
	position: absolute;
	bottom: -65px;
	left: calc(50% - 582px);
	width: 200px;
	height: 200px;
	background: url(../img/countdown.png) no-repeat;
	background-size:contain;
}
.no-webp #countdown.last1day {
	background: url(../img/countdown_1day.png) no-repeat;
	background-size:contain;	
}

.no-webp #countdown.kaikin {
	background: url(../img/countdown_kaikin.png) no-repeat;
	background-size:contain;
}

.webp #countdown {
	position: absolute;
	bottom: -65px;
	left: calc(50% - 582px);
	width: 200px;
	height: 200px;
	background: url(../img/countdown.webp) no-repeat;
	background-size:contain;
}
.webp #countdown.last1day {
	background: url(../img/countdown_1day.webp) no-repeat;
	background-size:contain;	
}

.webp #countdown.kaikin {
	background: url(../img/countdown_kaikin.webp) no-repeat;
	background-size:contain;
}

#countdown_day {
	display: block;
	margin: 84px 0 0 -38px;
	font-size: 72px;
	text-align: center;
	letter-spacing: -0.04em;
	transform: rotate( -10deg );
/*	color: #ba0001; */
	color: #e5bb7e;
	background:linear-gradient(45deg, #b67b03 0%, #daaf08 45%, #fee9a0 70%, #daaf08 85%, #b67b03 90% 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#countdown.last1day #countdown_day{
	margin:79px 0 0 -5px;
	font-size: 70px;
}

.to_shop div {
	margin: 50px auto;
	text-align: center;
}

.container2 ul.nav,
.container2 ul.nav li {
	list-style:  none;
	margin: 0;
	padding: 0;
}

.container2 ul.nav li img { border: none; }

.lineup {
	margin: 30px auto 75px;
}

.lineup > img,
.lineup > h2 > img {
	display: block;
	margin: 45px auto 0;
}

.lineup ul {
	display: table;
	margin: 45px auto !important;
}

.lineup ul li {
	display: table-cell;
	height: 282px;
	width: 97px;
	text-align: center;
	vertical-align: bottom;
}

.lineup .to_lineup {
	text-align: center;
	margin-bottom: 20px;
}

.container2 ul.foot {
	display: table;
	margin: 0 auto 70px !important;
}
.container2 ul.foot li {
	display: table-cell;
}

.container2 ul.foot li a {
	padding: 27px;
}
.container2 ul.foot li img {
	width: 450px;
}

#back_to_top {
	position: fixed;
	right: 0;
	bottom: 50px;
	opacity: 1;
	visibility: visible;
}

#back_to_top.hide {
	opacity: 0;
	transition: 0.3s;
	visibility: hidden;
}

@media screen and (max-width: 767px) {
	.container {
		width: 100%;
	}
	.onlySp {
		display: block !important;
	}
	.onlyPc {
		display: none !important;
	}
}
@media print, screen and (min-width: 768px) {
	.container {
		min-width: 1164px;
	}
	.mainvisual img {
		margin-top: 10px;
	}
	.catchcopy {
		width: 1164px;
		height: auto;
		margin: 0;
	}
	.container2 {
		width: 1164px;
		margin: 0 auto;
		position: relative;
	}
	#suntory_contents .container2 ul.foot li {
		padding: 0;
	}
}

@media screen and (max-width: 767px) {
	.no-webp #countdown,
	.webp #countdown {
		display: none;
		bottom: 25.5vw;
		left: 63vw;
		width: 35vw;
		height: 35vw;
		background-size: cover;
	}

	#countdown_day {
		margin: 16vw 0 0 -7vw;
		font-size: 12vw;
		font-weight: bold;
	}
	#countdown.last1day #countdown_day{
		margin: 14vw 0 0 -1vw;
		font-size: 12vw;
	}
	
	.container .news dl { 
		padding: 3vw 0;
		margin: -2vw 0 0 !important;
	}
	.container .news dl dt { vertical-align: top; line-height: 1.8em; }
	.container .news dl dd { text-align: left; }
	.to_shop div { margin: 6vw 4vw; }
	.to_shop div img { width: 92vw; }

	.catchcopy {
		padding: 0 15px 6vw;
	}
	.catchcopy img {
		width: 100%;
		height: auto;
	}
	.container2 ul.foot li {
		padding: 0 15px 10px;
	}
	.container2 ul.foot li img {
		width: 100%;
	}

	.lineup {
		margin: 15vw 4vw 0;
	}
	.lineup > img.hl_deco {
		width: 92vw;
		margin-top: 0;
	}
	.lineup > img.hl_deco:last-child {
		margin-bottom: 3vw;
	}
	.lineup > img.hl_text {
		width: 31.5vw;
		margin-top: 5vw;
	}
	#suntory_contents .lineup ul {
		display: block;
		margin: 6vw auto 0 !important;
		padding: 0 !important;
	}
	#suntory_contents .lineup ul li {
		display: inline-block;
		width: auto;
		height: auto;
		vertical-align: baseline;
		padding: 0 0 6vw !important;
	}
	.lineup ul li a { padding: 0 0.75vw; }
	.lineup ul li a img { width: 20vw; }
	.lineup .to_lineup a img { width: 92vw; }
	.container2 ul.foot li a img { width: 92vw; }
	.container2 ul.foot,
	.container2 ul.foot li {
		display: block;
		padding: 0 2vw !important;
	}
	.container2 ul.foot { margin-bottom: 3vw !important; }
	.container2 ul.foot li a {
		display: block;
		padding: 2vw 0;
	}
}

#sp_nav > .nav-logo,
#sp_nav #nav-content .nav-logo img { display: none; }
#sp_nav #nav-open { margin-top: 0; margin-bottom: -55px; }

#nav-input:checked ~ #nav-content { margin-top: 104px; }

@media screen and (orientation: landscape) {
	#sp_nav {}
}

html { -webkit-text-size-adjust: 100%; }

/*imgタグwebp対応*/
@media print, screen and (min-width: 768px) {
	.lineup picture .hl_deco {
		width: 1164px;
		display: block;
		margin: 0 auto;
	}
	.lineup > h2 > picture {
		width: 181px;
		display: block;
		margin: 45px auto 0;
	}
}

@media screen and (max-width: 767px) {
	.lineup picture,
	.lineup picture img {
		width: 100%;
	}
	.lineup h2 picture,
	.lineup h2 picture img {
		width: auto;
	}
	.lineup .hl_text {
		display: block;
		margin: 45px auto 0;
	}
}