@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@500&display=swap');

html {
	font-size: calc(10vw / 7.5);
	-webkit-font-smoothing: antialiased;
}
body {
	color: #ffffff;
	font-family: YakuHanJP_Noto, 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-size: 2.8rem;
	line-height: 1;
	background-color: #002e23;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@media screen and (min-width: 769px) {
	html {
		font-size: 10px;
	}
	body {
		font-size: 14px;
		font-size: 1.4rem;
	}
}
* {
	-webkit-tap-highlight-color: transparent;
}
a {
	color: inherit;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
p, dt, dd, li {
	word-break: break-word;
	word-wrap: normal;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.ib {
	display: inline-block;
	line-height: inherit;
	font-weight: inherit;
}
.serif {
	font-family: YakuHanMP_Noto, 'Noto Serif JP', serif;
}
.txtBold {
	font-weight: 700;
}
.super {
	font-size: 0.5em;
	vertical-align: super;
}
.wrapper {
	transition: opacity 1.0s;
}
body.loading .wrapper {
	opacity: 0;
}
body.load_complete .wrapper {
	opacity: 1;
}

/* loading */
html {
	width: 100%;
	height: 100%;
}
body.loading {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: #000000;
}
#loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3000;
	background-image: url(../img/loading_blk.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 180px 180px;
}
#loading.load {
	animation: fade 4s linear infinite;
}
@keyframes fade {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
body.load_complete #loading {
	display: none;
}
#suntory_contents {
	transition: opacity 0.5s;
}
body.loading #suntory_contents {
	opacity: 0;
}
body.load_complete #suntory_contents {
	opacity: 1;
}
@media screen and (min-width: 769px) {
	#loading {
		background-size: 220px 220px;
	}
}

.contentWrap {
}
.contentInner {
	width: 100%;
	margin: auto;
}
.fadeContent {
	opacity: 0;
	transition: opacity 1.0s ease-out;
}
.fadeContent.current {
	opacity: 1;
}
.mode_pc {
	display: none;
}
.mode_sp {
	display: block;
}
@media screen and (min-width: 769px) {
	.wrapper {
		min-width: 960px;
	}
	.contentInner {
		width: calc(1180 / 1280 * 100%);
		max-width: 1180px;
		padding-top: 0;
	}
	.mode_pc {
		display: block;
	}
	.mode_sp {
		display: none;
	}

	/* mover */
	.mover {
		transition: opacity 0.2s ease-out;
		backface-visibility: hidden;
		zoom: 1;
	}
	.mover:hover {
		opacity: 0.8;
	}
	.moverContent:before, .moverContent > * {
		transition: opacity 0.2s ease-out;
		backface-visibility: hidden;
		zoom: 1;
	}
	.moverContent:hover:before,
	.moverContent:hover > * {
		opacity: 0.8;
	}
}

/* movieArea */
#movieArea {
	background: #023c2e;
	text-align: center;
	padding: calc(98 / 780 * 100%) calc(45 / 780 * 100%) calc(84 / 780 * 100%) calc(45 / 780 * 100%) ;
}
#movieArea h2 {
	padding: 0 0 calc(40 / 780 * 100%) 0;
    font-size: 4.4rem;
    font-weight: 500;
}
#movieArea p {
    font-size: 2.8rem;
    padding: calc(36 / 780 * 100%) 0 0 0;
}
#movieArea .movieWrap .wrap {
	position: relative;
    padding: 0;
    border: 2px solid #bea800;
    box-sizing: border-box;
	margin: 0 auto;
    padding: calc(383 / 680 * 100%) 0 0 0;
}
#movieArea .movieWrap .wrap iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 769px) {
	#movieArea {
		padding: 0;
	}
	#movieArea h2 {
	   font-size: 3.8rem;
	   padding: 78px 0 70px 0;
	}
	#movieArea p {
	    font-size: 1.8rem;
	    padding: 30px 0 108px 0;
	}
	#movieArea .movieWrap .wrap {
		position: relative;
	    width: 900px;
	    height: 510px;
	    padding: 0;
	}
}	

/* quercetingold */
#quercetingold .content {
	background-color: #002e23;
}
#quercetingold .mvWrap {
	background-color: #001610;
}
#quercetingold .title {
	padding: calc(125 / 750 * 100%) 0 calc(37 / 750 * 100%) 0;
}
#quercetingold .box {
	position: relative;
	color: #004a37;
	margin: 0 0 calc(50 / 750 * 100%) 0;
}
#quercetingold .box:before {
	content: "";
	display: block;
	width: 100%;
	background-image: url(../img/frame_box_top_sp.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: calc(85 / 750 * 100%) 0 0 0;
}
#quercetingold .box:after {
	content: "";
	display: block;
	width: 100%;
	background-image: url(../img/frame_box_bottom_sp.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0 0 calc(85 / 750 * 100%) 0;
}
#quercetingold .box .boxInner {
	overflow: hidden;
	background-image: url(../img/frame_box_middle_sp.png);
	background-position: center center;
	background-repeat: repeat-y;
	background-size: 100% auto;
	padding: calc(39 / 750 * 100%) calc(86 / 750 * 100%) 0 calc(86 / 750 * 100%);
}
#quercetingold .box .boxTitle {
	position: absolute;
	left: 0;
	right: 0;
	width: calc(570 / 750 * 100%);
	color: #23181f;
	font-size: 2.8rem;
	font-weight: 500;
	text-align: center;
	background-image: url(../img/bg_box_title_sp.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: calc(-128 / 750 * 100%) auto 0 auto;
	padding: 0.9em 0 1.1em 0;
}
#quercetingold .box .text {
	font-size: 2.4rem;
	line-height: 3.8rem;
	font-weight: 500;
	margin: 0 0 calc(40 / 578 * 100%) 0;
}
#quercetingold .box .text.text02 {
	line-height: 4.2rem;
	margin: 0;
}
#quercetingold .box .text .color {
	display: inline-block;
	position: relative;
	color: #c6a541;
	font-weight: 700;
}
#quercetingold .box .text .color .bottom {
	position: absolute;
	top: 0.8em;
}
#quercetingold .box .trivia {
	overflow: hidden;
	padding: calc(35 / 578 * 100%) 0 0 0;
	border-top: 1px solid #004b37;
}
#quercetingold .box .trivia .icon {
	float: left;
	width: calc(120 / 578 * 100%);
}
#quercetingold .box .trivia .triviaTitle {
	float: left;
	width: calc(458 / 578 * 100%);
	font-size: 2.7rem;
	line-height: 4.4rem;
	font-weight: 700;
	margin: 0 0 calc(45 / 578 * 100%) 0;
	padding: calc(9 / 578 * 100%) 0 0 calc(18 / 578 * 100%);
	box-sizing: border-box;
}
#quercetingold .box .trivia .wrap {
	clear: both;
	display: flex;
	justify-content: space-between;
}
#quercetingold .box .trivia .wrap .text {
	width: calc(374 / 578 * 100%);
	line-height: 4.0rem;
	font-weight: 500;
	margin: 0;
}
#quercetingold .box .trivia .wrap .image {
	width: calc(184 / 578 * 100%);
	margin: calc(10 / 578 * 100%) 0 0 0;
}
#quercetingold .box .textWrap {
}
#quercetingold .box .textWrap .text {
}
#quercetingold .box .image {
	width: calc(495 / 578 * 100%);
	margin: calc(-30 / 578 * 100%) auto calc(15 / 578 * 100%) auto;
}
#quercetingold .note {
	font-size: 1.8rem;
	font-weight: 300;
	text-align: right;
	margin: calc(-48 / 750 * 100%) 0 0 0;
	padding: 0 0 calc(52 / 750 * 100%) 0;
}
#quercetingold .note.note01 {
	text-align: center;
	margin: 0;
}
@media screen and (min-width: 769px) {
	#quercetingold .content {
	}
	#quercetingold .mvWrap {
	}
	#quercetingold .mv {
		width: calc(1180 / 1280 * 100%);
		max-width: 1180px;
		margin: auto;
	}
	#quercetingold .title {
		padding: calc(103 / 1180 * 100%) 0 calc(33 / 1180 * 100%) 0;
	}
	#quercetingold .box {
		margin: 0 0 calc(36 / 1180 * 100%) 0;
	}
	#quercetingold .box:before {
		background-image: url(../img/frame_box_top.png);
		padding: calc(85 / 1180 * 100%) 0 0 0;
	}
	#quercetingold .box:after {
		background-image: url(../img/frame_box_bottom.png);
		padding: 0 0 calc(85 / 1180 * 100%) 0;
	}
	#quercetingold .box .boxInner {
		overflow: hidden;
		background-image: url(../img/frame_box_middle.png);
		padding: calc(46 / 1180 * 100%) calc(250 / 1180 * 100%) 0 calc(250 / 1180 * 100%);
	}
	#quercetingold .box .boxTitle {
		width: calc(494 / 1180 * 100%);
		min-width: 494px;
		font-size: 2.4rem;
		background-image: url(../img/bg_box_title.png);
		margin: calc(-72 / 680 * 100%) auto 0 auto;
		padding: 0.9em 0 1.1em 0;
	}
	#quercetingold .box .text {
		font-size: 1.8rem;
		line-height: 3.3rem;
		letter-spacing: -0.02em;
		margin: 0 0 calc(42 / 680 * 100%) 0;
	}
	#quercetingold .box .text.text02 {
		line-height: 3.3rem;
		margin: 0 0 calc(17 / 680 * 100%) 0;
	}
	#quercetingold .box .text .color {
		color: #c6a541;
		font-weight: 700;
	}
	#quercetingold .box .trivia {
		padding: calc(48 / 680 * 100%) 0 calc(15 / 680 * 100%) 0;
	}
	#quercetingold .box .trivia .icon {
		width: calc(110 / 680 * 100%);
		margin: calc(3 / 680 * 100%) 0 calc(50 / 680 * 100%) 0;
	}
	#quercetingold .box .trivia .triviaTitle {
		float: left;
		width: calc(570 / 680 * 100%);
		font-size: 2.1rem;
		line-height: 3.0rem;
		margin: 0 0 calc(16 / 680 * 100%) 0;
		padding: 0 0 0 calc(16 / 680 * 100%);
		box-sizing: border-box;
	}
	#quercetingold .box .trivia .wrap {
		clear: none;
		float: left;
		width: calc(570 / 680 * 100%);
		padding: 0 0 0 calc(16 / 680 * 100%);
		box-sizing: border-box;
	}
	#quercetingold .box .trivia .wrap .text {
		width: calc(345 / 534 * 100%);
		line-height: 3.3rem;
		letter-spacing: 0.03em;
		margin: 0;
	}
	#quercetingold .box .trivia .wrap .image {
		width: calc(156 / 534 * 100%);
		margin: calc(6 / 534 * 100%) calc(17 / 534 * 100%) 0 0;
	}
	#quercetingold .box .textWrap {
	}
	#quercetingold .box .textWrap .text {
	}
	#quercetingold .box .image {
		width: calc(370 / 680 * 100%);
		margin: calc(-52 / 680 * 100%) calc(-61 / 680 * 100%) 0 0;
	}
	#quercetingold .box.box02 .wrap {
		display: flex;
		justify-content: space-between;
	}
	#quercetingold .box.box02 .wrap .textWrap {
		width: calc(350 / 680 * 100%);
	}
	#quercetingold .note {
		font-size: 1.2rem;
		margin: calc(-43 / 1180 * 100%) calc(106 / 1180 * 100%) 0 0;
		padding: 0 0 calc(30 / 1180 * 100%) 0;
	}
	#quercetingold .note.note01 {
		text-align: center;
		margin: 0;
		padding: 0 0 calc(43 / 1180 * 100%) 0;
	}
}

/* goldmembers */
#goldmembers .content {
	background-color: #000000;
}
#goldmembers .contentInner {
	background-image: url(../img/bg_goldmembers_sp.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#goldmembers .title {
	padding: calc(80 / 750 * 100%) 0 0 0;
}
#goldmembers .image {
}
#goldmembers .buttonArea {
	margin: 0 0 calc(80 / 750 * 100%) 0;
}
#goldmembers .bannerArea {
}
#goldmembers .bannerArea .banner {
	width: calc(667 / 750 * 100%);
	margin: auto;
	padding: 0 0 calc(62 / 750 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#goldmembers .contentInner {
		background-image: url(../img/bg_goldmembers.png);
	}
	#goldmembers .title {
		padding: calc(76 / 1180 * 100%) 0 0 0;
	}
	#goldmembers .image {
	}
	#goldmembers .buttonArea {
		width: calc(473 / 1180 * 100%);
		margin: calc(-170 / 1180 * 100%) 0 calc(83 / 1180 * 100%) calc(246 / 1180 * 100%);;
	}
	#goldmembers .bannerArea {
	}
	#goldmembers .bannerArea .banner {
		width: calc(360 / 1180 * 100%);
		margin: auto;
		padding: 0 0 calc(65 / 1180 * 100%) 0;
	}
}

/* newsArea */

#newsArea {
	background: #000000;
	padding: calc(50 / 780 * 100%) 0;
}
#newsArea .bannerWrap .list .item {
    margin: 0 0 calc(30 / 680 * 100%) 0;
}
#newsArea .contentInner {
    width: calc(680 / 768 * 100%);
    margin: auto;
}
.bannerArea .banner {
	padding-top: calc(40 / 680 * 100%) ;
}

@media screen and (min-width: 769px) {
	#newsArea {
		padding: 80px 0 70px 0;
	}
	#newsArea .contentInner {
	    width: 100%;
	    max-width: 900px;
	}
	#newsArea .slideWrap {
	    position: relative;
	    margin: 0 0 calc(76 / 900 * 100%) 0;
	}
	#newsArea .slideWrap .list {
	    width: calc(860 / 900 * 100%);
	    margin: auto;
	}
	#newsArea .slideWrap .list .item a {
	    display: block;
	    padding: 0 calc(15 / 430 * 100%);
	    box-sizing: border-box;
	}
	.slick-arrow {
	    cursor: pointer;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    z-index: 10;
	    width: 20px;
	    height: 20px;
	    text-indent: -9999em;
	    margin: auto;
	    padding: 0;
	    background: none;
	    border: none;
	    border-radius: 0;
	    outline: none;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    box-sizing: border-box;
	}
	.slick-arrow.slick-next {
	    left: 100%;
	    border-top: 2px solid #fbff00;
	    border-right: 2px solid #fbff00;
	    transform: rotate(45deg);
	}
	.slick-arrow.slick-prev {
	    right: 100%;
	    border-top: 2px solid #fbff00;
	    border-left: 2px solid #fbff00;
	    transform: rotate(-45deg);
	}
	.bannerArea .banner {
	    width: calc(472 / 1180 * 100%);
	    margin: auto;
		padding-top: 0;
	}
}

/* floatBanner */
#floatBanner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
#floatBanner .button {
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(225 / 750 * 100%);
	margin: 0 calc(8 / 750 * 100%) 0 0;
}
#floatBanner .button:hover > * {
	opacity: 1;
}
@media screen and (min-width: 769px) {
	#floatBanner .button {
		max-width: 271px;
		margin: 0 calc(8 / 750 * 100%) 0 0;
	}
}