@charset "utf-8";

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

html {
	font-size: calc(10vw / 7.68);
	-webkit-font-smoothing: antialiased;
}
body {
	color: #3b3b3b;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-size: 2.8rem;
	line-height: 1;
	background-color: #ffffff;
	-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%;
	vertical-align: top;
}
.cf:after {
	content: "";
	display: block;
	clear: both;
}
.ib {
	display: inline-block;
	line-height: inherit;
	font-weight: inherit;
}
.arrowType01 {
	display: block;
	position: relative;
}
.arrowType01:after {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 0;
	right: 10px;
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	transform: rotate(45deg);
}
.blank {
	display: block;
	background-image: url(../images/icon_blank.png);
	background-position: calc(100% - 10px) center;
	background-repeat: no-repeat;
	background-size: 10px auto;
}
.accordionContent {
	display: none;
}
.wrapper {
	overflow: hidden;
	transition: opacity 1.0s;
}

.slide .item {
	opacity: 0;
	position: absolute;
	top: 0;
}
.slide .item:first-child {
	opacity: 1;
	position: relative;
}
.slide.slick-initialized .item {
	opacity: 1;
	position: relative;
}
.slick-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 25px 0 0 0;
}
.slick-dots li {
	overflow: hidden;
	margin: 0 6px;
}
.slick-dots li button {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;

	display: block;
	cursor: pointer;
	width: 6px;
	height: 6px;
	text-indent: -9999em;
	background-color: #cccccc;
	border-radius: 50%;
	transition: background-color 0.2s ease-out;
}
.slick-dots li button:hover,
.slick-dots li.slick-active button {
	width: 8px;
	height: 8px;
	background-color: #c0ab35;
}
.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-prev {
	right: 100%;
	border-top: 2px solid #c2a800;
	border-left: 2px solid #c2a800;
	transform: rotate(-45deg);
}
.slick-arrow.slick-next {
	left: 100%;
	border-top: 2px solid #c2a800;
	border-right: 2px solid #c2a800;
	transform: rotate(45deg);
}

/* 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(../images/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 {
	margin-top: calc(-88 / 768 * 100%);
	padding-top: calc(88 / 768 * 100%);
}
.contentInner {
	width: calc(680 / 768 * 100%);
	margin: auto;
}
.scrollPosition {
	margin-top: calc(-88 / 768 * 100%);
	padding-top: calc(88 / 768 * 100%);
}
.fadeContent {
	opacity: 0;
	transition: opacity 1.0s ease-out;
}
.fadeContent.current {
	opacity: 1;
}
.mode_pc {
	display: none;
}
.mode_pc.important {
	display: none !important;
}
.mode_sp {
	display: block;
}
.mode_sp.important {
	display: block !important;
}
.accordionTrigger {
	cursor: pointer;
	display: block;
}
.accordionContent {
	display: none;
}
@media screen and (min-width: 769px) {
	.wrapper {
		min-width: 960px;
	}
	.contentWrap {
		margin-top: -60px;
		padding-top: 60px;
	}
	.contentInner {
		width: 100%;
		max-width: 900px;
	}
	#movieArea .contentInner,
	#tokusuiMovieArea .contentInner {
		width: 100%;
		max-width: 1000px;
	}


	.scrollPosition {
		margin-top: -60px;
		padding-top: 60px;
	}
	.mode_pc {
		display: block;
	}
	.mode_pc.important {
		display: block !important;
	}
	.mode_sp {
		display: none;
	}
	.mode_sp.important {
		display: none !important;
	}

	/* 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;
	}
}

/* module */
.titleType01 {
	position: relative;
	font-size: 47px;
	font-size: 4.7rem;
	font-weight: 700;
	text-align: center;
	padding: calc(67 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
.titleType01:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: calc(60 / 680 * 100%);
	height: 2px;
	background-color: #c2a800;
	margin: auto;
}
@media screen and (min-width: 769px) {
	.titleType01 {
		font-size: 38px;
		font-size: 3.8rem;
		padding: calc(20 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	.titleType01:after {
		width: calc(60 / 900 * 100%);
		height: 2px;
	}
}

.titleType02 {
	position: relative;
	font-size: 47px;
	font-size: 4.7rem;
	font-weight: 700;
	text-align: center;
	padding: calc(67 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
.titleType02 .line {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.titleType02 .line:after,
.titleType02 .line:before {
	content: "";
	display: block;
	width: 26px;
	width: 2.6rem;
	height: 2px;
	background-color: #00a0ca;
	margin: 0 8px;
}
@media screen and (min-width: 769px) {
	.titleType02 {
		font-size: 40px;
		font-size: 4.0rem;
		padding: calc(20 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
}

.buttonType01 {
}
.buttonType01 a {
	display: block;
	position: relative;
	color: #000000;
	font-size: 33px;
	font-size: 3.3rem;
	font-weight: 500;
	text-align: center;
	background-color: #c2a800;
	padding: calc(40 / 680 * 100%) 0;
}
.buttonType01 a:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(26 / 400 * 100%);
	width: calc(12 / 400 * 100%);
	height: 0;
	margin: auto;
	padding: calc(12 / 400 * 100%) 0 0 0;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	transform: rotate(45deg);
}
.buttonType01.blue a {
	color: #ffffff;
	background-color: #0061ac;
}
.buttonType01.blue a:after {
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
@media screen and (min-width: 769px) {
	.buttonType01 {
		width: calc(400 / 900 * 100%);
		margin: 0 auto;
	}
	.buttonType01 a {
		font-size: 20px;
		font-size: 2.0rem;
		padding: calc(25 / 400 * 100%) 0;
	}
	.buttonType01 a:after {
		right: calc(26 / 400 * 100%);
		width: calc(12 / 400 * 100%);
		padding: calc(12 / 400 * 100%) 0 0 0;
	}
}

/* pcNav */
@media screen and (min-width: 769px) {
	#pcNav {
		position: relative;
		height: 60px;
		background-color: #000000;
	}
	#pcNav .listWrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1010;
		height: 56px;
		color: #e6c750;
		background-color: #000000;
		background-image: url(../images/bg_border_nav.jpg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: contain;
		padding: 0 0 4px 0;
	}
	#pcNav.fixed .listWrap {
		position: fixed;
	}
	#pcNav .listWrap .list {
		display: flex;
		align-items: center;
		max-width: 960px;
		margin: auto;
	}
	#pcNav .listWrap .list .item {
	}
	#pcNav .listWrap .list .item.logo {
		flex-basis: 108px;
		margin: 0 10px 0 0;
	}
	#pcNav .listWrap .list .item:not(.logo) a {
		font-size: 18px;
		font-size: 1.8rem;
		letter-spacing: 0.08em;
/* 		padding: 14px 16px 16px 16px; */
		padding: 17px 16px 14px 16px;
	}
}

/* globalNav */
#globalNav {
	position: relative;
	background-color: #000000;
	padding: calc(92/ 768 * 100%) 0 0 0;
}
#globalNav .navWrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1010;
	color: #e6c750;
	background-color: #000000;
}
#globalNav.fixed .navWrap {
	position: fixed;
}
#globalNav .navWrap:before {
	content: "";
	display: block;
	width: 100%;
	background-image: url(../images/bg_border_nav_sp.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: calc(6 / 750 * 100%) 0 0 0;
}
#globalNav .logo {
	width: calc(150 / 768 * 100%);
	padding: calc(4 / 768 * 100%) 0;
}
#globalNav .buttonWrap {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1000;
}
#globalNav .buttonWrap .buttonArea {
	cursor: pointer;
	position: absolute;
	top: calc(30 / 768 * 100vw);
	right: calc(23 / 768 * 100vw);
	z-index: 1000;
	width: calc(44 / 768 * 100vw);
	box-sizing: border-box;
}
#globalNav .buttonWrap .buttonArea .wrap {
	position: relative;
	width: 100%;
	padding: 70% 0 0 0;
}
#globalNav .buttonWrap .buttonArea .wrap span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #d5b249;
	margin: auto;
	transition: all 0.2s;
}
#globalNav .buttonWrap .buttonArea .wrap span:nth-of-type(1) {
	top: 0;
}
#globalNav .buttonWrap .buttonArea .wrap span:nth-of-type(2) {
	top: calc(50% - 1px);
}
#globalNav .buttonWrap .buttonArea .wrap span:nth-of-type(3) {
	bottom: 0;
}
#globalNav .menu {
	overflow: auto;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 999;
	width: 100%;
	background-color: #000000;
	padding: calc(15 / 768 * 100%) 0 calc(96 / 768 * 100%) 0;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}
#globalNav .list {
	width: calc(680 / 768 * 100%);
	margin: auto;
}
#globalNav .list .item {
	border-bottom: 1px solid #ffffff;
}
#globalNav .list .item a {
	display: block;
	position: relative;
	color: #e6c750;
	font-size: 32px;
	font-size: 3.2rem;
	line-height: 1;
	padding: calc(33 / 680 * 100%) 0;
}
#globalNav .list .item a:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(8 / 680 * 100%);
	width: calc(15 / 680 * 100%);
	height: 0;
	margin: auto;
	padding: calc(15 / 680 * 100%) 0 0 0;
	border-top: 1px solid #e6c750;
	border-right: 1px solid #e6c750;
	transform: rotate(45deg);
}
#globalNav .bg {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, 0.4);
	transition: opacity 0.3s ease-out;
}
#globalNav.open .buttonWrap .buttonArea .wrap span:nth-of-type(1) {
	bottom: 0;
	left: 0;
	transform: translateY(50%) translateY(-1px) rotate(-45deg);
}
#globalNav.open .buttonWrap .buttonArea .wrap span:nth-of-type(2) {
	opacity: 0;
	left: 0;
}
#globalNav.open .buttonWrap .buttonArea .wrap span:nth-of-type(3) {
	top: 0;
	left: 0;
	transform: translateY(-50%) translateY(1px) rotate(45deg);
}
#globalNav.open .menu {
	transform: translateX(0);
}
#globalNav.open .bg {
	opacity: 1;
	bottom: 0;
}

/* mv */
#mv .slick-dots {
	display: none !important;
}
@media screen and (min-width: 769px) {
	#mv .slick-dots {
		display: flex !important;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		font-size: 11px;
		font-size: 1.1rem;
/* 		margin: calc(1.45 * 3em + 5px + 30px) 0 0 0; */
		margin: calc(1.45 * 2em) 0 0 0;
	}
}

/* header */
#header .desc {
	position: relative;
	font-size: 10px;
/*
	font-size: 18px;
	font-size: 1.8rem;
*/
	color: #555;
	line-height: 1.33;
	padding: calc(10 / 768 * 100%) 10px 0 10px;
}
#header .desc span {
	display: block;
	font-size: 12px;
	line-height: 1;
	margin-bottom: 1%;
}

/*
#header .desc::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-image: url(../images/img_recycle.png);
	background-size: contain;
	background-repeat: no-repeat;
  }
*/
/*
	content: url(../images/img_recycle.png);
	display: inline-block;
	vertical-align: middle;
	width: 8px;
*/
}

@media screen and (min-width: 769px) {
	#header .desc {
/*
		font-size: 11px;
		font-size: 1.1rem;
*/
		line-height: 1.45;
		margin: 0 0 calc(34 / 1242 * 100%) 0;
		padding: 5px 10px 0 10px;
	}
}

/* shopBanner */
.shopBanner .content {
}
.shopBanner .contentInner {
}
.shopBanner .buttonArea {
	padding: calc(70 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
.shopBanner .buttonArea .text {
	width: calc(392 / 680 * 100%);
	margin: auto;
	padding: 0 0 calc(20 / 680 * 100%) 0;
}
.shopBanner .buttonArea .button {
	margin: auto;
}
.shopBanner .buttonArea .button img {
	height: auto;
}
@media screen and (min-width: 769px) {
	.shopBanner .buttonArea {
		padding: calc(72 / 900 * 100%) 0 calc(60 / 900 * 100%) 0;
	}
	.shopBanner .buttonArea .text {
		width: calc(230 / 900 * 100%);
		padding: 0 0 calc(20 / 900 * 100%) 0;
	}
	.shopBanner .buttonArea .button {
		width: calc(360 / 900 * 100%);
	}
}

/* newsArea */
#newsArea .content {
}
#newsArea .contentInner {
}
#newsArea .title {
	margin: 0 0 calc(56 / 680 * 100%) 0;
    padding: calc(96 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
#newsArea .bannerWrap {
	margin: 0 0 calc(50 / 680 * 100%) 0;
}
#newsArea .bannerWrap .list {
}
#newsArea .bannerWrap .list .item {
	margin: 0 0 calc(30 / 680 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#newsArea .title {
		padding: calc(88 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}


	#newsArea .title {
		margin: calc(20 / 900 * 100%) 0 calc(50 / 900 * 100%) 0;
	}
	#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;
	}
}

/* movieArea */
#movieArea .content {
	color: #FFFFFF;
	background-color: #000000;
	padding-bottom:calc(20 / 900 * 100%);
}
#movieArea .title {
	margin: 0 0 calc(60 / 680 * 100%) 0;
	padding: calc(96 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
#movieArea .movieList .item a {
	display: block;
	position: relative;
}
#movieArea .movieList .item a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: calc(106 / 640 * 100%);
	background-image: url(../images/icon_play.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: auto;
	padding: calc(106 / 360 * 100%) 0 0 0;
}
#movieArea .movieList .item .movieTitle {
	font-size: 32px;
	font-size: 3.2rem;
	text-align: center;
	padding: calc(18 / 680 * 100%) 0 calc(61 / 680 * 100%) 0;
}
#movieArea .thumbWrap {
}
#movieArea .thumbList {
/* 	padding: 0 calc(44 / 768 * 100%) calc(85 / 768 * 100%) calc(44 / 768 * 100%); */
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	touch-action: auto;
}
#movieArea .thumbList .slick-list {
/* 	width: calc(3 / 2 * 100%); */
	width: calc(2 / 2 * 100%);
}
#movieArea .thumbList .item {
	cursor: pointer;
}
#movieArea .thumbList .item .image {
/* 	margin: 0 calc(20 / 340 * 100%) 0 0; */
	margin: 0 calc(10 / 340 * 100%) ;
	border: 2px solid transparent;
}
#movieArea .thumbList .item.slick-current .image {
	border: 2px solid #bea800;
}
#movieArea .thumbList .item .image img {
	margin: auto;
}
#movieArea .thumbList .item .movieTitle {
	font-size: 20px;
	font-size: 2.0rem;
	text-align: center;
	margin: 0 calc(20 / 340 * 100%) 0 0;
	padding: calc(8 / 210 * 100%) 0 0 0;
}
@media screen and (min-width: 769px) {
	#movieArea .title {
		margin: 0 0 calc(52 / 900 * 100%) 0;
		padding: calc(85 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	#movieArea .movieList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 1000px;
		margin: auto;
	}
	#movieArea .movieList .item {
		flex-basis: calc(470 / 1000 * 100%);
	}
	#movieArea .movieList .item.single {
		flex-basis: calc(470 / 1000 * 100%);
		margin: auto;
	}
	#movieArea .movieList .item.large {
		flex-basis: calc(640 / 896 * 100%);
		margin: auto;
	}
	#movieArea .movieList .item .image {
		overflow: hidden;
	}
	#movieArea .movieList .item .image img {
		transition: transform 0.4s ease-out;
	}
	#movieArea .movieList .item .image a:hover img {
		transform: scale(1.1);
	}
	#movieArea .movieList .item .movieTitle {
		font-size: 16px;
		font-size: 1.6rem;
		padding: 0.8em 0 3.2em 0;
	}
	#movieArea .movieList .item.large .movieTitle {
		font-size: 18px;
		font-size: 1.8rem;
		padding: 1em 0 3.5em 0;
	}
	#movieArea .thumbList {
/* 		width: calc(630 / 900 * 100%); */
/* 		width: calc(420 / 900 * 100%);  */
		max-width: 420px;
		margin: auto;
		padding: 0;
		overflow: hidden;
	}
	#movieArea .thumbList .slick-list {
		width: 100%;
	}
	#movieArea .thumbList .item .image {
		margin: 0 calc(15 / 210 * 100%);
		border: 2px solid transparent;
	}
	#movieArea .thumbList .item .movieTitle {
		font-size: 12px;
		font-size: 1.2rem;
		padding: calc(8 / 210 * 100%) 0 0 0;
	}
}

/* tokusuiMovieArea */
#tokusuiMovieArea .content {
	color: #FFFFFF;
	background-color: #12173e;
	padding-bottom:calc(45 / 900 * 100%);
}
#tokusuiMovieArea .title {
	padding: calc(71 / 680 * 100%) 0 calc(60 / 680 * 100%) 0;
}
#tokusuiMovieArea .movieList .item a {
	display: block;
	position: relative;
}
#tokusuiMovieArea .movieList .item a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: calc(106 / 640 * 100%);
	background-image: url(../images/icon_play2.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: auto;
	padding: calc(106 / 360 * 100%) 0 0 0;
}
#tokusuiMovieArea .movieList .item .icon {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(76 / 640 * 100%);
	margin: calc(-38 / 640 * 100%) calc(-15 / 640 * 100%) 0 0;
}
#tokusuiMovieArea .movieList .item .movieTitle {
	font-size: 32px;
	font-size: 3.2rem;
	text-align: center;
	padding: calc(18 / 680 * 100%) 0 calc(61 / 680 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#tokusuiMovieArea .content {
		padding-bottom: 0;
	}
	#tokusuiMovieArea .title {
		padding: calc(51 / 900 * 100%) 0 calc(23 / 900 * 100%) 0;
	}
	#tokusuiMovieArea .movieList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: calc(45 / 1000 * 100%);
	}
	#tokusuiMovieArea .movieList .item {
		flex-basis: calc(640 / 1000 * 100%);
	}
	#tokusuiMovieArea .movieList .item.single {
		margin: auto;
	}
	#tokusuiMovieArea .movieList .item .image picture {
		overflow: hidden;
		display: block;
	}
	#tokusuiMovieArea .movieList .item .image picture img {
		transition: transform 0.4s ease-out;
	}
	#tokusuiMovieArea .movieList .item .image a:hover picture img {
		transform: scale(1.1);
	}
	#tokusuiMovieArea .movieList .item .icon {
		margin: calc(-40 / 640 * 100%) calc(-37 / 640 * 100%) 0 0;
	}
	#tokusuiMovieArea .movieList .item .movieTitle {
		font-size: 18px;
		font-size: 1.8rem;
		padding: 1em 0 3.2em 0;
	}
}

/* secretArea */
#secretArea .content {
	background-color: #efe9bd;
}
#secretArea .title {
	margin: 0 0 calc(60 / 680 * 100%) 0;
	padding: calc(96 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
#secretArea .copy {
	width: calc(500 / 680 * 100%);
	text-align: center;
	margin: 0 auto calc(37 / 680 * 100%) auto;
}
#secretArea .area {
	position: relative;
	padding: calc(663 / 680 * 100%) 0 0 0;
}
#secretArea .area .parts {
	position: absolute;
}
#secretArea .area .parts00 {
	top: calc(14 / 680 * 100%);
	left: calc(180 / 680 * 100%);
	width: calc(320 / 680 * 100%);
}
#secretArea .area .parts01 {
	top: calc(12 / 680 * 100%);
	left: calc(-25 / 680 * 100%);
	width: calc(188 / 680 * 100%);
	animation: horizontal1 1s ease-in-out infinite alternate;
}
#secretArea .area .parts02 {
	top: calc(277 / 680 * 100%);
	left: calc(-19 / 680 * 100%);
	width: calc(188 / 680 * 100%);
	animation: horizontal2 1s ease-in-out infinite alternate;
}
#secretArea .area .parts03 {
	top: calc(13 / 680 * 100%);
	left: calc(514 / 680 * 100%);
	width: calc(184 / 680 * 100%);
	animation: horizontal1 1s ease-in-out infinite alternate;
}
#secretArea .area .parts04 {
	top: calc(271 / 680 * 100%);
	left: calc(519 / 680 * 100%);
	width: calc(184 / 680 * 100%);
	animation: horizontal2 1s ease-in-out infinite alternate;
}
#secretArea .area .parts05 {
	top: calc(378 / 680 * 100%);
	left: calc(283 / 680 * 100%);
	width: calc(137 / 680 * 100%);
	animation: horizontal1 1s ease-in-out infinite alternate;
}
#secretArea .area .parts .anime {
	display: block;
	animation: vertical 1s ease-in-out infinite alternate;
}
#secretArea .area .parts01 .anime {
	animation-duration: 1.1s;
}
#secretArea .area .parts02 .anime {
	animation-duration: 1.3s;
}
#secretArea .area .parts03 .anime {
	animation-duration: 1.5s;
}
#secretArea .area .parts04 .anime {
	animation-duration: 1.7s;
}
#secretArea .area .parts05 .anime {
	animation-duration: 1.9s;
}
#secretArea .buttonArea {
	padding: 0 0 calc(83 / 680 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#secretArea .title {
		margin: 0 0 calc(48 / 900 * 100%) 0;
		padding: calc(88 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	#secretArea .copy {
		text-align: center;
		margin: 0 auto calc(37 / 900 * 100%) auto;
	}
	#secretArea .area {
		padding: calc(482 / 900 * 100%) 0 0 0;
	}
	#secretArea .area .parts {
	}
	#secretArea .area .parts00 {
		top: calc(2 / 900 * 100%);
		left: calc(324 / 900 * 100%);
		width: calc(260 / 900 * 100%);
	}
	#secretArea .area .parts01 {
		top: calc(3 / 900 * 100%);
		left: calc(4 / 900 * 100%);
		width: calc(299 / 900 * 100%);
	}
	#secretArea .area .parts02 {
		top: calc(300 / 900 * 100%);
		left: calc(37 / 900 * 100%);
		width: calc(262 / 900 * 100%);
	}
	#secretArea .area .parts03 {
		top: calc(0 / 900 * 100%);
		left: calc(599 / 900 * 100%);
		width: calc(280 / 900 * 100%);
	}
	#secretArea .area .parts04 {
		top: calc(300 / 900 * 100%);
		left: calc(600 / 900 * 100%);
		width: calc(251 / 900 * 100%);
	}
	#secretArea .area .parts05 {
		top: calc(533 / 900 * 100%);
		left: calc(325 / 900 * 100%);
		width: calc(229 / 900 * 100%);
	}
	#secretArea .buttonArea {
		padding: 0 0 calc(67 / 900 * 100%) 0;
	}
}

/* tokusuiAboutArea */
#tokusuiAboutArea .bg {
	background-image: url(../images/bg_tokusui_sp.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
}
#tokusuiAboutArea .contentInner {
	width: 100%;
}
#tokusuiAboutArea .title {
	margin: 0 0 calc(60 / 768 * 100%) 0;
	padding: calc(93 / 768 * 100%) 0 calc(40 / 768 * 100%) 0;
}
#tokusuiAboutArea .area {
	position: relative;
	padding: 0 0 calc(118 / 768 * 100%) 0;
}
#tokusuiAboutArea .area .parts {
	position: absolute;
}
#tokusuiAboutArea .area .parts01 {
	top: calc(70 / 768 * 100%);
	left: calc(42 / 768 * 100%);
	width: calc(235 / 768 * 100%);
	animation: horizontal1 1s ease-in-out infinite alternate;
}
#tokusuiAboutArea .area .parts02 {
	top: calc(56 / 768 * 100%);
	left: calc(482 / 768 * 100%);
	width: calc(221 / 768 * 100%);
	animation: horizontal1 1s ease-in-out infinite alternate;
}
#tokusuiAboutArea .area .parts03 {
	top: calc(379 / 768 * 100%);
	left: calc(27 / 768 * 100%);
	width: calc(248 / 768 * 100%);
	animation: horizontal2 1s ease-in-out infinite alternate;
}
#tokusuiAboutArea .area .parts04 {
	top: calc(361 / 768 * 100%);
	left: calc(479 / 768 * 100%);
	width: calc(231 / 768 * 100%);
	animation: horizontal2 1s ease-in-out infinite alternate;
}
#tokusuiAboutArea .area .parts .anime {
	display: block;
	animation: vertical 1s ease-in-out infinite alternate;
}
#tokusuiAboutArea .area .parts01 .anime {
	animation-duration: 1.1s;
}
#tokusuiAboutArea .area .parts02 .anime {
	animation-duration: 1.3s;
}
#tokusuiAboutArea .area .parts03 .anime {
	animation-duration: 1.5s;
}
#tokusuiAboutArea .area .parts04 .anime {
	animation-duration: 1.7s;
}
#tokusuiAboutArea .buttonArea {
	width: calc(680 / 768 * 100%);
	margin: auto;
	padding: 0 0 calc(83 / 768 * 100%) 0;
}
@media screen and (min-width: 769px) {
	#tokusuiAboutArea .content {
/*		background-color: rgba(229, 247, 253, 1); */
		background: linear-gradient(to right, rgba(229, 247, 253, 1) 0%, rgba(229, 247, 253, 1) 49.9%, rgba(177, 218, 245, 1) 50%, rgba(177, 218, 245, 1) 100%);
	}
	#tokusuiAboutArea .bg {
		position: relative;
		max-width: 2000px;
		background-image: url(../images/bg_tokusui.png);
		margin: auto;
	}
	#tokusuiAboutArea .bg:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100px;
		background: linear-gradient(to right, rgba(229, 247, 253, 1) 0%, rgba(229, 247, 253, 0) 100%);
	}
	#tokusuiAboutArea .bg:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100px;
		background: linear-gradient(to left, rgba(177, 218, 245, 1) 0%, rgba(177, 218, 245, 0) 100%);
	}
	#tokusuiAboutArea .title {
		margin: 0;
		padding: calc(60 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	#tokusuiAboutArea .area {
		padding: 0;
	}
	#tokusuiAboutArea .area .parts01 {
		top: calc(103 / 900 * 100%);
		left: calc(144 / 900 * 100%);
		width: calc(209 / 900 * 100%);
	}
	#tokusuiAboutArea .area .parts02 {
		top: calc(82 / 900 * 100%);
		left: calc(539 / 900 * 100%);
		width: calc(196 / 900 * 100%);
	}
	#tokusuiAboutArea .area .parts03 {
		top: calc(507 / 900 * 100%);
		left: calc(134 / 900 * 100%);
		width: calc(221 / 900 * 100%);
	}
	#tokusuiAboutArea .area .parts04 {
		top: calc(475 / 900 * 100%);
		left: calc(537 / 900 * 100%);
		width: calc(205 / 900 * 100%);
	}
	#tokusuiAboutArea .buttonArea {
		width: 100%;
		padding: 0 0 calc(67 / 900 * 100%) 0;
	}
}

/* evolutionSecretArea */
#evolutionSecretArea .content {
	color: #ffffff;
	background-color: #000000;
}
#evolutionSecretArea .title {
	margin: 0 0 calc(56 / 680 * 100%) 0;
	padding: calc(97 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
#evolutionSecretArea .area {
}
#evolutionSecretArea .area:before {
}
#evolutionSecretArea .area .point {
}
#evolutionSecretArea .area .point01 {
}
#evolutionSecretArea .area .point02 {
	margin: calc(-19 / 768 * 100%) 0 0 0;
}
#evolutionSecretArea .area .point03 {
	margin: calc(-51 / 768 * 100%) 0 0 0;
}
@media screen and (min-width: 769px) {
	#evolutionSecretArea .title {
		margin: 0 0 calc(48 / 900 * 100%) 0;
		padding: calc(88 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	#evolutionSecretArea .area {
		position: relative;
		background-image: url(../images/bg_evolution.jpg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: contain;
		padding: calc(700 / 1280 * 100%) 0 0 0;
	}
	#evolutionSecretArea .area:before {
		content: "";
		position: absolute;
		top: calc(54 / 1280 * 100%);
		left: calc(539 / 1280 * 100%);
		width: calc(263 / 1280 * 100%);
		background-image: url(../images/img_evolution_bottle_tokucha.png);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: contain;
		padding: calc(572 / 1280 * 100%) 0 0 0;
	}
	#evolutionSecretArea .area .point {
		position: absolute;
	}
	#evolutionSecretArea .area .point01 {
		top: calc(99 / 1280 * 100%);
		left: calc(22 / 1280 * 100%);
		width: calc(507 / 1280 * 100%);
	}
	#evolutionSecretArea .area .point02 {
		top: calc(-24 / 1280 * 100%);
		left: calc(708 / 1280 * 100%);
		width: calc(498 / 1280 * 100%);
		margin: 0;
	}
	#evolutionSecretArea .area .point03 {
		top: calc(497 / 1280 * 100%);
		left: calc(775 / 1280 * 100%);
		width: calc(408 / 1280 * 100%);
		margin: 0;
	}
}

/* productArea */
#productArea .content {
	position: relative;
}
#productArea .content:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, #efe9bb, #f5f2d6);
	margin: calc(536 / 768 * 100%) 0 0 0;
}
#productArea .title {
	margin: 0 0 calc(54 / 680 * 100%) 0;
	padding: calc(96 / 680 * 100%) 0 calc(40 / 680 * 100%) 0;
}
#productArea .contentInner p.claim{
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 4em;
}

#productArea .desc {
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 1.43;
	font-weight: 500;
	text-align: center;
	margin: 0 0 calc(100 / 680 * 100%) 0;
}
#productArea .category1 {
}
#productArea .category2 {
	position: relative;
	z-index: 2;
	background-color: #cdeffb;
}
#productArea .list {
	margin: 0 0 calc(45 / 680 * 100%) 0;
}
#productArea .category2 .list {
	padding: calc(98 / 680 * 100%) 0 0 0;
}
#productArea .list .item {
	position: relative;
	margin: 0 0 calc(96 / 680 * 100%) 0;
}
#productArea .list .item .icon {
	position: absolute;
	top: calc(19 / 680 * 100%);
	right: calc(140 / 680 * 100%);
	width: calc(110 / 680 * 100%);
}
#productArea .list .item .image {
	width: calc(350 / 680 * 100%);
	margin: 0 auto calc(36 / 680 * 100%) auto;
}
#productArea .list .item .text {
	font-size: 26px;
	font-size: 2.6rem;
	line-height: 1.38;
	font-weight: 500;
	margin: 0 0 calc(14 / 680 * 100%) 0;
}
#productArea .list .item .note {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.33;
}
	#productArea .list .item .note a {
		display: inline-block;
		text-decoration: underline;
		margin-bottom: 5px;
	}
	#productArea .list .item .note a::after {
    content: "";
    display: inline-block;
    width: 12.5px;
    height: 10px;
    background-image: url('../images/icon_link.png');
    background-position: center;
    background-size: contain;
	margin-left: 0.3em;
	}
#productArea .category1 .about {
	text-align: center;
	padding: 0 0 calc(90 / 680 * 100%) 0;
	position: relative;
}
#productArea .category1 .about .text {
	display: flex;
	align-items: center;
	font-size: 21px;
	font-size: 2.1rem;
	line-height: 2;
	text-align: left;
}
#productArea .category1 .about .text:before {
	content: "";
	display: inline-block;
	width: calc(97 / 680 * 100%);
	vertical-align: middle;
	background-image: url(../images/icon_tokuho.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin: 0 calc(10 / 680 * 100%) 0 calc(26 / 680 * 100%);
	padding: calc(97 / 680 * 100%) 0 0 0;
}
#productArea .category1 .about .text .inner {
	display: inline-block;
	vertical-align: middle;
}
#productArea .category1 .about .text .large {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 700;
}
#productArea .category2 .about {
	text-align: center;
	padding: 0 0 calc(100 / 680 * 100%) 0;
	position: relative;
}
#productArea .category2 .about .text {
	display: inline-block;
	font-size: 32px;
	font-size: 3.2rem;
	line-height: 1;
	font-weight: 700;
	padding: 4px 10px 6px 10px;
	border: 2px solid #000000;
}
@media screen and (min-width: 769px) {
	#productArea .content:before {
		display: none;
	}
	#productArea .title {
		margin: 0 0 calc(37 / 900 * 100%) 0;
		padding: calc(86 / 900 * 100%) 0 calc(30 / 900 * 100%) 0;
	}
	#productArea .contentInner {
		position: relative;
		z-index: 3;
		width: 1160px;
		max-width: 1160px;
	}
	#productArea .contentInner p.claim{
		font-size: 1.1rem;
		text-align: right;
		margin-bottom: 4em;
	}
	#productArea .desc {
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 1.67;
		margin: 0 auto calc(36 / 900 * 100%) auto;
	}
	#productArea .wrap {
		display: flex;
		justify-content: center;
		max-width: 1160px;
		margin: auto;
		padding: 0;
		box-sizing: border-box;
	}
	#productArea .category1 {
		flex-basis: calc(934 / 1160 * 100%);
		position: relative;
		padding: 0 calc(11 / 1160 * 100%) 0 0;
		box-sizing: border-box;
	}
	#productArea .category1:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
		width: 100vw;
		background: linear-gradient(to bottom, #efe9bb, #f5f2d6);
		margin: 160px 0 0 0;
	}
	#productArea .category2 {
		flex-basis: calc(236 / 1160 * 100%);
		background-color: transparent;
		padding: 0 0 0 calc(20 / 1160 * 100%);
		box-sizing: border-box;
	}
	#productArea .category2:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
		width: 100vw;
		background-color: #cdeffb;
		margin: 160px 0 0 0;
	}
	#productArea .category1 .contentInner,
	#productArea .category2 .contentInner {
		width: 100%;
	}
	#productArea .list {
		display: flex;
		justify-content: space-between;
		margin: 0 0 calc(45 / 900 * 100%) 0;
	}
	#productArea .category2 .list {
		padding: 0 0 calc(44 / 226 * 100%) 0;
	}
	#productArea .list .item {
		flex-basis: calc(216 / 923 * 100%);
		margin: 0;
	}
	#productArea .category2 .list .item {
		flex-basis: 100%;
	}
	#productArea .list .item .icon {
		top: calc(4.5 / 285 * 100%);
		right: calc(27 / 285 * 100%);
		width: calc(60 / 285 * 100%);
	}
	#productArea .list .item .image {
		width: calc(240 / 276 * 100%);
		margin: 0 auto calc(6 / 276 * 100%) auto;
	}
	#productArea .list .item .text {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.43;
		margin: 0 0 calc(14 / 285 * 100%) 0;
	}
	#productArea .list .item .note {
		font-size: 11px;
		font-size: 1.1rem;
		line-height: 1.36;
	}
	#productArea .category1 .about {
		padding: 0 0 calc(75 / 923 * 100%) 0;
	}
	#productArea .category1 .about .text {
		display: inline-block;
		font-size: 15px;
		font-size: 1.5rem;
		line-height: 1.6;
		text-align: left;
		padding: 0 82px 0 82px;
	}
	#productArea .category1 .about .text:before {
		display: inline-block;
		width: 69px;
		vertical-align: middle;
		background-image: url(../images/icon_tokuho.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		margin: 0 15px 0 0;
		padding: 69px 0 0 0;
	}
	#productArea .category1 .about .text .inner {
		display: inline-block;
		vertical-align: middle;
	}
	#productArea .category1 .about .text .large {
		font-size: 18px;
		font-size: 1.8rem;
	}
	#productArea .category2 .about {
		text-align: center;
		padding: 0 0 calc(100 / 680 * 100%) 0;
		position: relative;
	}
	#productArea .category2 .about .text {
		font-size: 18px;
		font-size: 1.8rem;
		padding: 4px 10px 6px 10px;
        margin-top: 50px;
	}
}

/* bannerArea */
#bannerArea .content {
}
#bannerArea .contentInner {
	width: 100%;
}
#bannerArea .list {
	width: calc(680 / 768 * 100%);
	margin: auto;
	padding: calc(6 / 680 * 100%) 0 calc(34 / 680 * 100%) 0;
}
#bannerArea .list .item {
	margin: 0 0 calc(30 / 680 * 100%) 0;
}
#bannerArea .list .item a img {
	width: 100%;
	height: auto;
}


@media screen and (min-width: 769px) {
#bannerArea .contentInner {
		max-width: 780px;
/* 		max-width: 1160px;　バナーが3つ */
	}

	#bannerArea .list {
	width: 780px; 　
/* 	width: 1160px バナーが3つ; */
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: wrap;	
	padding: calc(18 / 900 * 100%) 0 calc(40 / 900 * 100%) 0;
	}
	#bannerArea .list .item {
		margin: 0 0 calc(30 / 900 * 100%) 0;
/* 		width: 400px; バナーが2つ */
		width: 370px;
		height: 80px;
	}


	#bannerArea .list .item a {
		display: block;
	}

}

/* linkArea */
#linkArea {
	width: calc(524 / 768 * 100%);
	margin: auto;
	padding: 0 0 calc(34 / 768 * 100%) 0;
}

/* toTop */
#toTop {
	color: #e6c750;
	text-align: center;
	background-color: #000000;
}
#toTop:before {
	content: "";
	display: block;
	width: 100%;
	background-image: url(../images/bg_border_nav_sp.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: calc(6 / 768 * 100%) 0 0 0;
}
#toTop a {
	display: block;
	padding: calc(28 / 768 * 100%) 0;
}

/* floatBanner */
#floatBanner {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1001;
}
#floatBanner a {
	position: absolute;
	bottom: 10px;
	right: 11px;
	width: calc(188 / 768 * 100vw);
	max-width: 237px;
}
#floatBanner a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
#floatBanner a img {
	position: relative;
}
@media screen and (min-width: 769px) {
	#floatBanner {
		bottom: 10px;
		right: 10px;
	}
	#floatBanner a:before {
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
	}
}

@keyframes horizontal1 {
	0% {
		transform: translateX(-2px);
	}
	100% {
		transform: translateX(0px);
	}
}
@keyframes horizontal2 {
	0% {
		transform: translateX(2px);
	}
	100% {
		transform: translateX(0px);
	}
}
@keyframes vertical {
	0% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}
@media screen and (min-width: 769px) {
	@keyframes horizontal1 {
		0% {
			transform: translateX(-3px);
		}
		100% {
			transform: translateX(0px);
		}
	}
	@keyframes horizontal2 {
		0% {
			transform: translateX(3px);
		}
		100% {
			transform: translateX(0px);
		}
	}
	@keyframes vertical {
		0% {
			transform: translateY(-10px);
		}
		100% {
			transform: translateY(0px);
		}
	}
}

#movieArea .slick-slider .slick-track {
	transform: translate3d(0px, 0px, 0px) !important;
}

.mfp-wrap .mfp-iframe-holder .mfp-close {
	font-family: inherit;
	font-size: 40px;
	top: -50px;
}
@media screen and (min-width: 769px) {
	.mfp-wrap .mfp-iframe-holder .mfp-content {
		max-width: 800px;
	}
	.mfp-wrap .mfp-iframe-holder .mfp-close {
		font-size: 50px;
		top: -58px;
		right: -65px;
	}
}