@charset "UTF-8";

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


@media screen and (min-width: 769px) {
	.SP {
		display: none !important;
	}
}




@media screen and (max-width: 768px) {
	.PC {
		display: none !important;
	}
}

img{
	vertical-align: top;
	-webkit-backface-visibility: hidden;

	_::content, _:future, &:not(*:root) {
		image-rendering: -webkit-optimize-contrast;
	}
}

body {
	width: 100%;
	height: auto;
}

html.touchDevice , .touchDevice body{ min-height: 100vh}

body.fixed {
	position: fixed !important;
	overflow: hidden !important;
	overflow-y: scroll !important;
	width: 100%;
	height: 100vh;
}

body.locked {
	position: fixed !important;
	overflow: hidden !important;
	overflow-y: scroll !important;
	width: 100%;
	height: 100vh;
}

body.heroEnd {
	display: block;
	overflow: auto;
	overflow-x: hidden;
	height: auto;
}

body.modalMode {
	overflow: scroll;
	overflow-x: hidden;
}

body.modalMode #suntoryCommonWrapper {
	position: relative;
}

body.modalMode #suntoryCommonHeader {
	position: relative;
	z-index: -1;
	visibility: hidden;
}

body.modalMode #suntory_contents {
	position: relative;
	z-index: 99999;
}

body.modalMode.fixed #suntory_contents {
	overflow: visible;
}

body.modalMode #suntoryCommonFooter {
	position: relative;
	z-index: -1;
	visibility: hidden;
}

#suntoryCommonWrapper {
	position: relative;
}

#suntoryCommonHeader {
	position: relative;
	z-index: 50000;
}

#suntory_contents {
	z-index: 1;
	background: transparent;
	background-size: 100% auto;
	text-align: center;
		transition: opacity 0.5s ease-out;
	opacity: 0;
}
.loadingFinish #suntory_contents{opacity: 1;}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50000;
	pointer-events: none;
	background: #fff;
}

#loadingAnim {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	width: 100px;
	height: 0px;
	padding-top: 100%;
	z-index: 9000;
	transition: opacity 0.3s ease-in-out;
	background: url(../images/common/loading.gif?v=3) center center no-repeat; background-size: contain;
}


#horoyoi-adgallery #loadingAnim {
	background: url(../images/common/loading_pink.gif) center center no-repeat; background-size: contain;
}


.loadingFinish #loadingAnim {
	opacity: 0;
}





#loadingAnim .text {
	width: 0%;
	height: 0px;
	padding-top: 20%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0%;
	overflow: hidden;
	transition: all 0.3s ease-in-out 100ms;
}

#loadingAnim .text img {
	width: 40vw;
	height: auto;
	position: absolute;
	top: 0;
	left: 0%;
}

#loadingAnim .board {
	width: 100%;
	position: absolute;
	top: 15%;
	left: 0%;
	opacity: 0;
	transform: translate(0, -2%) scale(1);
	transition: all 200ms cubic-bezier(0.87, 0.33, 0.94, 1.33) 100ms;
}

#loadingAnim .item {
	position: relative;
	width: 100%;
	height: auto;
	left: 50%;
	transform: translate(-50%, 0%);
}

#loadingAnim .sato {
	width: 40%;
	position: absolute;
	top: 40%;
	right: -25%;
	transform: translate(-20%, 10%) rotate(0deg);
	opacity: 0;
	transition: all 1s ease-out 800ms;
}

#loadingAnim .bucyo {
	width: 174%;
	position: absolute;
	bottom: -45%;
	left: -105%;
	transform: translate(0%, 0%);
}

#loader.in #loadingAnim .text {
	width: 100%;
	opacity: 1;
}

#loader.in #loadingAnim .board {
	opacity: 1;
	transform: translate(0, 0%) scale(1);
}

#loader.in #loadingAnim .sato {
	opacity: 1;
	transform: translate(0%, 0%) rotate(0deg);
}



#awaDeco{ position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;}



.bubble {
 position: fixed !important;
 bottom: 0px;
transform: translate3d(0,0,0);


}

.bubble.start{
	animation: awatype_start 3000ms ease-out;
	 animation-fill-mode: forwards;
}

.bubble.start.type_a{
	
	 animation: awatype_start 3000ms ease-out;
	 animation-fill-mode: forwards;
}

.bubble.start.type_b{
	
	 animation: awatype_start 6000ms ease-out;
	  animation-fill-mode: forwards;
}

.bubble.start.type_a2{
	 animation: awatype_start2 3000ms ease-out;
	  animation-fill-mode: forwards;
}

.bubble.start.type_b2{
	 animation: awatype_start2 6000ms ease-out;
	  animation-fill-mode: forwards;
}

.uaIE .bubble.start.type_a{ animation: awatype_start 30000ms ease-out;}
.uaIE .bubble.start.type_b{animation: awatype_start 60000ms ease-out;}
.uaIE .bubble.start.type_a2{  animation: awatype_start2 30000ms ease-out;}
.uaIE .bubble.start.type_b2{animation: awatype_start2 60000ms ease-out;}



.bubble:before{ content: ''; display: block; position: absolute; top: 0;left: 0; width: 100%; height: 100%; opacity: 1;
	 background: url(../images/common/deco_awa.png) center center no-repeat; background-size: contain;
	   
}

.bubble.start.type_a:before,
.bubble.start.type_a2:before{animation: rotate-anime 3.0s linear infinite;}

.bubble.start.type_b:before,
.bubble.start.type_b2:before{animation: rotate-anime 6.0s linear infinite;}

.sodaColor{     color: #18e06e;}

.deco{ position: absolute !important; }

.deco.awa{  width: 30px; height: 30px; 	 background: url(../img/deco/awa.png) center center no-repeat; background-size: contain;}

.deco.star{  width: 50px; height: 50px; 	 background: url(../img/deco/star.png) center center no-repeat; background-size: contain;}














body.loading_cans #loadingAnim {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -80%);
	width: 40vw;
	height: 0px;
	padding-top: 50%;
	z-index: 9000;
	transition: opacity 0.3s ease-in-out;
}



body.loading_cans #loadingAnim .text {
	width: 0%;
	height: 0px;
	padding-top: 20%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0%;
	overflow: hidden;
	transition: all 0.3s ease-in-out 100ms;
}

body.loading_cans #loadingAnim .text img {
	width: 40vw;
	height: auto;
	position: absolute;
	top: 0;
	left: 0%;
}

body.loading_cans #loadingAnim{ }
body.loading_cans #loadingAnim .cans{ position: absolute; top: 72%; left: 50%; width: 120%;	transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms; opacity: 0; transform: translate3d(-50%,0%,0) scale(1);}
body.loading_cans #loadingAnim .cans:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 31.83%;}

body.loading_cans #loadingAnim .fukidashi{ position: absolute; }
body.loading_cans #loadingAnim .fukidashi span{ display: block; width: 100%; height: 0; padding-top: 100%;transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms; opacity: 0; transform-origin: bottom right;}


body.loading_cans #loadingAnim .fukidashi_2{bottom: 12vw; left: -17vw; width: 20vw;	}


body.loading_cans #loadingAnim .fukidashi_2 span{transform: translate3d(20%,20%,0) scale(0.5);background: url(../img/loading/fukidashi.png) center bottom no-repeat; background-size: contain;}

body.loading_cans #loader.in #loadingAnim .cans{ opacity: 1; transform: translate3d(-50%,0,0) scale(1);}

body.loading_cans #loader.in #loadingAnim .fukidashi span{opacity: 1;transform: translate3d(0,0,0) scale(1);}

body.loading_cans #loader.in #loadingAnim .text {
	width: 100%;
	opacity: 1;
}



.nolink {
	pointer-events: none;
	cursor: default;
}

.horoyoi-preload {
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.firstLoad {
	opacity: 0;
	transition: opacity 1s ease-out;
}

.firstLoad.in {
	opacity: 1;
}

#container {
	position: relative;
	transition: opacity 1s ease-out;
	opacity: 1;
	pointer-events: none;
	min-height: 500px;
	z-index: 2;
	overflow: hidden;
}

#container::after{ content: ''; display: none; position: absolute; top: 0; left: 0;z-index: 1000; width: 50%; height: 100%; 
/* 	background: url(../images/_dummy/design_guide.png) left 56vw no-repeat; background-size: 100vw auto;  */
	opacity: 0.5;}

.introActive #container {
	opacity: 0 !important;
	pointer-events: none !important;
}



.loadingFinish #container {
	pointer-events: auto;
}





#globalNav {
	display: none;
}

.wfull {
	width: 100%;
	height: auto;
}

.fixed {
	width: 100%;
	height: 110vh;
	position: fixed;
	top: 0;
	left: 0;
}

.inview {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.inview.in {
	opacity: 1;
}

img, div, a {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

*:after, *:before {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.slick-container {
	width: 100%;
	position: relative;
}

.slick-slide {
	position: relative;
	text-align: center;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.slick-list {
	overflow: visible !important;
}

.slick-slider {
	margin-bottom: 0;
}

.slick-slide {
	
	outline: 0;
}

.slick-slide .item {
	
	outline: 0;
}

.slick-dots {
	box-sizing: border-box;
	position: absolute;
	bottom: -35px;
	display: block;
	width: 100%;
	padding: 0 50px 0 0;
	list-style: none;
	text-align: right;
}

.slick-slide {
	transform: scale(0.85);
	transition: 0.5s ease-in-out;
	/*filter: blur(7px);*/
}

.slick-current {
	transform: scale(1);
	/*filter: blur(0);*/
}

.swiper-container {
	width: 100%;
	height: 100%;
	overflow: visible;
	z-index: 1;
	position: relative;
}

.swiper-wrapper .swiper-slide:last-child {
	margin: 0 !important;
}

.swiper-slide {
	transition: .3s;
	opacity: 1;
	transition-delay: 100ms;
}

.swiper-slide-active {
	opacity: 1;
}

#horoyoi-top-slide .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.48, 0.83, 0.065, 0.985);
}

#horoyoi-top-slide .swiper-slide {
	transition: 0.5s;
	transition-timing-function: ease;
}

#horoyoi-top-osusume .swiper-wrapper {
	transition-timing-function: cubic-bezier(0.48, 0.83, 0.065, 0.985);
}

#horoyoi-top-osusume .swiper-slide {
	transition: .3s;
}

.swiper-button-prev, .swiper-button-next {
	fill: #fff;
	stroke: none;
	stroke-width: 0;
	z-index: 50;
	width: 20px;
	margin-top: -18px;
	background-image: none;
	display: none;
	outline: 0;
}

.swiper-button-disabled {
	display: none !important;
}



/**
 * class
 */
 
ul.banner{ margin: auto; list-style: none; padding: 0; margin: 0 0 1rem 0;}
ul.banner li:not(:last-child){ margin-bottom: 1rem;}
ul.banner li img{ width: 100%;height: auto; line-height: 0; vertical-align: bottom;}
 

 
 
/**
 * mainvisual
 */
.mainvisual {
	overflow-x: hidden;
}

section.area {
	position: relative;

}

#suntory_contents {font-family: 'Noto Sans JP',   sans-serif;}

section .contentsFrame{ width: 100%; margin: auto; }

#suntory_contents section *{ box-sizing: border-box; position: relative;}


section .sectionTitle{ margin: 0; padding: 0;}

#suntory_contents section .sectionTitle .titleEffect{ position: relative;  line-height: 0; display: inline-block; margin: auto;}
#suntory_contents section .sectionTitle .titleEffect .guide{ vertical-align: bottom; visibility: hidden;}
#suntory_contents section .sectionTitle .effectItem{ position: absolute; top: 0; left: 0; z-index: 10; width: 0%; height: 100%;  overflow: hidden; transform: translate(-1vw,0); transition: width 300ms ease-in , transform 1000ms ease-out;}
#suntory_contents section .sectionTitle .effectItem img{position: absolute; top: 0; left: 0;  width: auto; height: 100%; max-width: none; vertical-align: bottom;}
#suntory_contents section .sectionTitle.inView.in .effectItem{ width: 100%;transform: translate(0%,0);}


#suntory_contents section .inViewUnit.inView{transition: all 500ms ease-out 500ms;transform: translate(0%,50px); opacity: 0;}
#suntory_contents section .inViewUnit.inView.in{transform: translate(0%,0); opacity: 1;}

#suntory_contents section img{ max-width: 100%; height: auto;}
#suntory_contents section a,
#suntory_contents section a:link,
#suntory_contents section a:active,
#suntory_contents section a:visited{ text-decoration: none;}


#suntory_contents section .btnBoxBG{}
#suntory_contents section .btnBoxBG .inWrap{}
#suntory_contents section .btnBoxBG .inWrap span{}

#suntory_contents .frameBanner{}
#suntory_contents .frameBanner .inWrap{ display: block; z-index: 5; overflow: hidden; border-radius: 10px;  border: solid 5px #fff; background: #fff;box-shadow: 0px 1px 3px 1px #999;}
#suntory_contents .frameBanner .inWrap img{ position: relative;  z-index: 4;}




#suntory_contents .buttonLink{ display: flex; justify-content: center; align-items: center; z-index: 5; overflow: hidden; border-radius: 10px;  box-shadow: 0px 0.4rem 0px 0px #000; border: solid 0.2rem #000; background: #666;text-align: left; min-height: 16vw; padding: 1rem; color: #fff; font-weight: bold; line-height: 1;}
#suntory_contents .buttonLink .inWrap{  display: flex; align-items: center;
	    width: 100%;
    justify-content: center;
    text-align: center;

}

#suntory_contents .buttonLink.arrowR{}
#suntory_contents .buttonLink.arrowR .arrow{ display: inline-block; position: absolute; top: 50%; right: 0; transform: translate(-150%,-50%);}
	
	

#suntory_contents .buttonLink.arrowTwitter{ border: solid 1px #f30;}
#suntory_contents .buttonLink.arrowTwitter .inWrap .text::after{ content: ''; background: url(../images/common/icon_twitter.svg) center center no-repeat; background-size: contain;  display: inline-block; width: 7.5vw; height: 7.5vw; position: absolute; top: 51%; right: 3.5vw; transform: translate(0%,-50%);}

#suntory_contents .buttonLink.linkTwitter.arrowTwitter .inWrap .text{ padding-left: 5.5vw; line-height: 1; position: relative;}
#suntory_contents .buttonLink.linkTwitter.arrowTwitter .inWrap .text::after{  width: 4vw; height: 4vw; position: absolute; top: 50%; left: 0; right: auto; }













#toolsCover{ position: absolute; top: 0; left: 0; width: 100%; height: 0;z-index: 100;}
#toolsCover .inFrame{}
#toolsCover #menuBtn{ position: absolute; top: 0; left: 0; width: 16vw; height: 16vw;  background: url(../images/common/btn_nav_menu.png) center center no-repeat #f18198; background-size: contain;}
#toolsCover #twitterBtn{position: absolute; top: 2vw; right: 2vw; width: 16vw; height: 16vw; border-radius: 8vw;  background: url(../images/common/btn_nav_twitter.png) center center no-repeat #00acee; background-size: contain;}
#toolsCover{}

.toolsFixed #toolsCover{ position: fixed; z-index: 100;}


#toolsCover #menuBtn{
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
}
#toolsCover #twitterBtn{
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
}










#containerBG{
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:  #b5e3ee;
	transition: background 2000ms ease 700ms;
}

.heroStart #containerBG{background:  #80cee0;}
/* .heroStart #containerBG{background:  #6dbfd9;} */

#containerBG::before{ content: '';
	display: block;
		position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

}

.touchDevice #containerBG::before{ opacity: 0.8;}

section#hero{ }
/*
section#feature{ background: rgba(108,206,217,0.8);}
section#gallery{ background: rgba(234,164,175,0.8);}
section#products{ background: rgba(131,206,216,0.8);}
section#horoyoibu{ background: #fff584;}
*/

section.bgDeco{}
section.bgDeco::before{ content: ''; display: block; position: absolute; top: 0%; left: 50%; width: 120%; height: 100%; background: rgba(0,0,0,0.8); transform: translate(-50%,0%) skewY(2deg);}


section.flatBG.bgDeco::before{ transform: translate(-50%,0%) skewY(0deg); }

section#feature::before{ background: rgba(102,206,215,0.8);}
section#gallery::before{ background: rgba(254,148,160,0.8);}
section#products::before{ background: rgba(172,233,255,0.8);}
section#horoyoibu::before{ height: 140%;background: url(../images/horoyoi-bu/bg_deco.png) center top no-repeat #fff586; background-size: 100% auto; }



#containerBG .gradeAwa{ width: 55vw; height: 55vw; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); opacity: 0;  transition: all 3000ms ease;}
#containerBG .gradeAwa .bg{ display: block; position: absolute; top: 0; left: 0; right:0; bottom: 0; opacity: 0.8;}
#containerBG .gradeAwa.yellow{transform: translate(130%,-150%);}
#containerBG .gradeAwa.pink{ transform: translate(-250%,-80%);}
#containerBG .gradeAwa.blue{ transform: translate(110%,40%);}



#containerBG .gradeAwa.yellow .bg{ background: url(../images/common/awa_grade_yellow.png) center center no-repeat; background-size: contain; }
#containerBG .gradeAwa.pink .bg{ background: url(../images/common/awa_grade_pink.png) center center no-repeat; background-size: contain; }
#containerBG .gradeAwa.blue .bg{ background: url(../images/common/awa_grade_blue.png) center center no-repeat; background-size: contain; }

#containerBG .cans{ list-style: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; width: 100%; height: 220vw;}
#containerBG .cans li{ width: 20vw;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 1;}
#containerBG .cans li .item{}

#containerBG .cans li.shiroi_sour{margin-top:-24vw; margin-left:0vw;}
#containerBG .cans li.grape{margin-top:37vw; margin-left:12vw;}
#containerBG .cans li.momo{margin-top:-80vw; margin-left:38vw;}
#containerBG .cans li.icetea{margin-top:5vw; margin-left:-23vw;}

#containerBG .cans li.muscat{margin-top:-85vw; margin-left:-43vw;}
#containerBG .cans li.acerola{margin-top:35vw; margin-left:-38vw;}
#containerBG .cans li.casis{margin-top:-87vw; margin-left:10vw;}
#containerBG .cans li.hapicle{margin-top:-30vw; margin-left:-42vw;}

#containerBG .cans li.mix{margin-top:-85vw; margin-left:-16vw;}
#containerBG .cans li.syuwabita{margin-top:37vw; margin-left:37vw;}
#containerBG .cans li.umesyu{margin-top:30vw; margin-left:-9vw;}
#containerBG .cans li.salty{margin-top:-32vw; margin-left:42vw;}

#containerBG .cans li.lemon{margin-top:0vw; margin-left:28vw;}
#containerBG .cans li.cola{margin-top:-62vw; margin-left:-31vw;}
#containerBG .cans li.cider{margin-top:0vw; margin-left:48vw;}
#containerBG .cans li.ginger{margin-top:-48vw; margin-left:25vw;}


#containerBG .cans li.shiroi_sour .item{ transform: scale(2) rotate(-14deg);}
#containerBG .cans li.grape .item{ transform: scale(0.8) rotate(-10deg);}
#containerBG .cans li.momo .item{ transform: scale(1.2) rotate(-15deg);}
#containerBG .cans li.icetea .item{ transform: scale(0.5) rotate(-20deg);}

#containerBG .cans li.muscat .item{ transform: scale(1) rotate(10deg);}
#containerBG .cans li.acerola .item{ transform: scale(1.4) rotate(-10deg);}
#containerBG .cans li.casis .item{ transform: scale(0.8) rotate(15deg);}
#containerBG .cans li.hapicle .item{ transform: scale(1.2) rotate(-15deg);}

#containerBG .cans li.mix .item{ transform: scale(0.6) rotate(-20deg);}
#containerBG .cans li.syuwabita .item{ transform: scale(1.2) rotate(10deg);}
#containerBG .cans li.umesyu .item{ transform: scale(0.6) rotate(10deg);}
#containerBG .cans li.salty .item{ transform: scale(1) rotate(10deg);}

#containerBG .cans li.lemon .item{ transform:scale(0.5) rotate(20deg);}
#containerBG .cans li.cola .item{ transform: scale(0.4) rotate(20deg);}
#containerBG .cans li.cider .item{ transform: scale(0.5) rotate(20deg);}
#containerBG .cans li.ginger .item{ transform: scale(0.5) rotate(14deg);}

#containerBG .cans li img{ width: 100%; height: auto;}




#introUnit{ transition: opacity 300ms ease; opacity: 0;}
.introActive #introUnit{ opacity: 1;}
#introUnit .contentsWrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#introUnit .guide{ width: 65vw; height: auto; opacity: 0}

#introUnit .kanban .image{  position: absolute; top: 0vw; left: 50%; transform: translate(-50%,0%);width: 42vw; height: auto;}

#introUnit .text{position: absolute;  top: 60%; left: 50%; transform: translate(-50%,0%); width: 60vw; height: 30vw; }
#introUnit .text .item{position: absolute; width: 7vw; height: auto; }
#introUnit .text .item .image{ width: 100%; height: auto; }

#introUnit .text .item:nth-of-type(1) {width: 18%;  top: 0vw; left: 0vw; transform: translate(-24%,-19%) rotate(0deg); }
#introUnit .text .item:nth-of-type(2) {width: 17%;  top: 0vw; left: 7vw; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(3) {width: 18%;  top: 0vw; left: 14vw; transform: translate(-23%,-24%) rotate(0deg); }
#introUnit .text .item:nth-of-type(4) {width: 18%;  top: 0vw; left: 21vw; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(5) {width: 18%;  top: 0vw; left: 28vw; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(6) {width: 19%;  top: 0vw; left: 35vw; transform: translate(-15%,-20%) rotate(0deg); }

#introUnit .text .item:nth-of-type(7) {width: 21%;  top: 36%; left: 32%; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(8) {width: 18%;  top: 36%; left: 48%; transform: translate(-20%,-14%) rotate(0deg); }
#introUnit .text .item:nth-of-type(9) {width: 17%;  top: 36%; left: 63%; transform: translate(-20%,-7%) rotate(0deg); }
#introUnit .text .item:nth-of-type(10) {width: 21%;  top: 36%; left: 77%; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(11) {width: 12%;  top: 36%; left: 95%; transform: translate(-20%,-20%) rotate(0deg); }


.introActive #containerBG .cans{ opacity: 0;}
.introActive #containerBG .gradeAwa{ opacity: 0;}

.introActive #introUnit .kanban .image{ transform: translate(-50%,0%) rotate(0deg); transform-origin: center top;}
.introActive #introUnit .text{opacity: 0;}
.introActive #introUnit .text .item{}
.introActive #introUnit .text .item .image{}

.introActive.introStart #introUnit .kanban .image{ animation: intro-kanban 4000ms  both linear 500ms;}
.introActive.introStart #introUnit .text{ transition: all 500ms ease-in-out 1800ms; opacity: 1;}
.introActive.introStart #introUnit .text .image{animation: intro-word-jump 1000ms   both 2000ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(1) .image {animation-delay: 2700ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(2) .image {animation-delay: 2800ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(3) .image {animation-delay: 2900ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(4) .image {animation-delay: 3000ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(5) .image {animation-delay: 3100ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(6) .image {animation-delay: 3200ms;}

.introActive.introStart #introUnit .text .item:nth-of-type(7) .image {animation-delay: 3400ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(8) .image {animation-delay: 3500ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(9) .image {animation-delay: 3600ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(10) .image {animation-delay: 3700ms;}
.introActive.introStart #introUnit .text .item:nth-of-type(11) .image {animation-delay: 3800ms;}

.introActive.introStart #containerBG .cans{}
.introActive.introStart #containerBG .cans *{
	  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform,animation,position,opacity;
}


.introActive.introStart #containerBG .cans li{ transform: translate3d(-50%,-50%,0) scale3d(0); top: 40%; opacity: 1; margin: 0; transition: all 2000ms cubic-bezier(0,1.22,.22,1)0ms;}
.introActive.introStart #containerBG .cans li .item{ display: flex;}
.introActive.introStart #containerBG .cans li .item .inWrap{position: relative; top: 0; left: 0; width: 100%; height: 100%; transform: scale3d(0,0,0); }
.introActive.introStart #containerBG .cans li.shiroi_sour{margin-top:-24vw; margin-left:0vw; top: 50%;  opacity: 0; }

.introActive.introStart #containerBG .gradeAwa{opacity: 0; transition: all 2000ms cubic-bezier(.53,.15,0,1);}
.introActive.introStart #containerBG .gradeAwa.yellow{ transition-delay: 500ms;}
.introActive.introStart #containerBG .gradeAwa.pink{transition-delay: 700ms;}
.introActive.introStart #containerBG .gradeAwa.blue{transition-delay: 900ms;}

.introActive.heroStart #introUnit{ opacity: 0;}


.heroStart #containerBG .cans{ opacity: 1; }
.heroStart #containerBG .gradeAwa{}
.heroStart  #containerBG .gradeAwa.yellow{transform: translate(30%,-150%);opacity: 1;}
.heroStart  #containerBG .gradeAwa.pink{ transform: translate(-150%,-80%); opacity: 1;}
.heroStart  #containerBG .gradeAwa.blue{ transform: translate(10%,40%);opacity: 1;}


.introActive.heroStart #containerBG .cans li{transform: translate3d(-50%,-50%,0) scale3d(1); opacity: 1;top: 50%; }
.introActive.heroStart #containerBG .cans li .item .inWrap{ transform: scale3d(1,1,1) !important;
	
	 animation: hero-can-zoom 1700ms;
	 animation-fill-mode: forwards;
	 animation-delay: 0ms;
	 
} 
.introActive.heroStart #containerBG .cans li.shiroi_sour{  opacity: 1;}
.introActive.heroStart #containerBG .cans li.shiroi_sour .item{ transition-delay: 300ms !important; }


.introActive.heroStart #containerBG .cans li.shiroi_sour .inWrap{ animation: hero-can-zoom 800ms;animation-delay: 0ms;  }

.introActive.heroStart #containerBG .cans li.shiroi_sour{margin-top:-24vw; margin-left:0vw; }
.introActive.heroStart #containerBG .cans li.grape{margin-top:37vw; margin-left:12vw;transition-delay: 700ms;}
.introActive.heroStart #containerBG .cans li.momo{margin-top:-70vw; margin-left:38vw;transition-delay: 700ms;}
.introActive.heroStart #containerBG .cans li.icetea{margin-top:5vw; margin-left:-23vw;transition-delay: 700ms;}

.introActive.heroStart #containerBG .cans li.muscat{margin-top:-77vw; margin-left:-39vw;transition-delay: 800ms;}
.introActive.heroStart #containerBG .cans li.acerola{margin-top:35vw; margin-left:-38vw;transition-delay: 800ms;}
.introActive.heroStart #containerBG .cans li.casis{margin-top:-87vw; margin-left:10vw;transition-delay: 800ms;}
.introActive.heroStart #containerBG .cans li.hapicle{margin-top:-30vw; margin-left:-42vw;transition-delay: 800ms;}

.introActive.heroStart #containerBG .cans li.mix{margin-top:-85vw; margin-left:-16vw;transition-delay: 900ms;}
.introActive.heroStart #containerBG .cans li.syuwabita{margin-top:37vw; margin-left:37vw;transition-delay: 900ms;}
.introActive.heroStart #containerBG .cans li.umesyu{margin-top:27vw; margin-left:-9vw;transition-delay: 900ms;}
.introActive.heroStart #containerBG .cans li.salty{margin-top:-32vw; margin-left:42vw;transition-delay: 900ms;}

.introActive.heroStart #containerBG .cans li.lemon{margin-top:0vw; margin-left:31vw;transition-delay: 1000ms;}
.introActive.heroStart #containerBG .cans li.cola{margin-top:-62vw; margin-left:-29vw;transition-delay: 1000ms;}
.introActive.heroStart #containerBG .cans li.cider{margin-top:0vw; margin-left:48vw;transition-delay: 1000ms;}
.introActive.heroStart #containerBG .cans li.ginger{margin-top:-48vw; margin-left:25vw;transition-delay: 1000ms;}


.introDeactive #introUnit{ display: none;}


.fuwafuwaStart #containerBG .gradeAwa .bg{animation: fuwafuwa_awa 15000ms infinite alternate 0ms; animation-timing-function: ease;}
.fuwafuwaStart #containerBG .gradeAwa.yellow .bg{}
.fuwafuwaStart #containerBG .gradeAwa.pink .bg{animation-delay: 1500ms;}
.fuwafuwaStart #containerBG .gradeAwa.blue .bg{animation-delay: 3000ms;}

.fuwafuwaStart #containerBG .cans li{}
.fuwafuwaStart #containerBG .cans li .item img{ animation: fuwafuwa_anim 5000ms infinite alternate 0ms; animation-timing-function: ease-in-out;} 

.introActive.heroStart #containerBG .cans li.shiroi_sour img{animation-delay: 0ms;}
.introActive.heroStart #containerBG .cans li.grape img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 300ms;}
.introActive.heroStart #containerBG .cans li.momo img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 1500ms;}
.introActive.heroStart #containerBG .cans li.icetea img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 3000ms;}

.introActive.heroStart #containerBG .cans li.muscat img{animation-delay: 1400ms;}
.introActive.heroStart #containerBG .cans li.acerola img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 900ms;}
.introActive.heroStart #containerBG .cans li.casis img{animation-delay: 2200ms;}
.introActive.heroStart #containerBG .cans li.hapicle img{animation-delay: 3000ms;}

.introActive.heroStart #containerBG .cans li.mix img{animation-delay: 3200ms;}
.introActive.heroStart #containerBG .cans li.syuwabita img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 1200ms;}
.introActive.heroStart #containerBG .cans li.umesyu img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 700ms;}
.introActive.heroStart #containerBG .cans li.salty img{animation-delay: 2300ms;}

.introActive.heroStart #containerBG .cans li.lemon img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 4700ms;}
.introActive.heroStart #containerBG .cans li.cola img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 2700ms;}
.introActive.heroStart #containerBG .cans li.cider img{animation: fuwafuwa_anim_2 5000ms infinite alternate;animation-delay: 700ms;}
.introActive.heroStart #containerBG .cans li.ginger img{animation-delay: 1500ms;}


.loadingFinish.heroEnd #container {
	transition: all 300ms ease;
    opacity: 1 !important;
    pointer-events: auto !important;
}




	
	section#hero{ padding-top: 0; padding-bottom: 0;}
	section#hero .heroSpace{ 	
/* 		background: url(../images/_dummy/hero_space.png) center top no-repeat; background-size: cover;  */
		height: 150vw; border: solid 2px #ccc; opacity: 0; pointer-events: none;}

	
	section#hero .bannerSpace{padding-bottom: 21.5vw;
		
	}
	section#hero .bannerSpace::before{
		content: ''; display: block; position: absolute; top: 0%; left: 50%; width: 120%; height: 100%;  transform: translate(-50%,0%) skewY(2deg);
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,0.8) 100%);

}
	
		section#hero .bannerSpace .banner.topics li.limited .inWrap:not(:last-child){ margin-bottom: 1rem;}
	
	section#feature{}
	
	section#feature ul.banner:not(:last-child){ margin-bottom: 4rem;}
	
	section#feature ul.banner li img{ margin-bottom: 1rem;}
	
	section#feature ul.banner li .links{  width: 80%; margin: auto;}
	
	section#feature ul.banner li:not(:last-child){margin-bottom: 3rem;}
	section#feature ul.banner li.thumb{}
	section#feature ul.banner li .btn{ display: flex; width: 100%; align-items: center; box-sizing: border-box;min-height: 15.8vw; padding:2vw 2vw 2vw 2vw; position: relative; font-weight: bold;}
	section#feature ul.banner li .btn:not(:last-child){margin-bottom: 5vw; }
	
/*
	section#feature ul.banner li .btn:nth-of-type(1) { background: #ffeb76; color: #ec6600;  box-shadow: 0px 0.4rem 0px 0px #ec6600; border-color: #ec6600; }
	section#feature ul.banner li .btn:nth-of-type(2) { background: #e3f3fd; color: #4081c3;  box-shadow: 0px 0.4rem 0px 0px #4081c3; border-color: #4081c3;}
*/

	section#feature ul.banner li .btn.arrowR{}
	section#feature ul.banner li .btn.arrowR::after{ content: '>'; display: inline-block; position: absolute; top: 50%; right: 0; transform: translate(-200%,-50%);}

	section#feature ul.banner li .btn .icon{
		display: flex;
		position: absolute;
		top: 50%;
		left: 4.3vw;
		transform: translate(0,-50%);
		width: 7vw;
	}
		section#feature ul.banner li .btn .icon img{ margin: 0;}
		
	section#feature ul.banner li .btn .inWrap{display: flex;  align-items: center;  width: 100%;  margin: auto;}

	section#feature ul.banner li .btn .inWrap .text{ flex: 1; text-align: center; }	
	

	
	
	
	section#gallery{}
	
		section#gallery .sectionTitle{}
		
		section#gallery > .galleryUnit:not(:last-child){ margin-bottom: 6rem;}
		section#gallery .inViewUnit > .galleryUnit:not(:last-child){ margin-bottom: 6rem;}
		
		.galleryUnit .unitTitle{ display: inline-block; line-height: 0; padding: 1.2vw 3vw; background: #fff; margin:0 0 0.5rem; }
		.galleryUnit .unitTitle img{ width: auto !important; height: 5.5vw !important;}
		.galleryUnit p.read{ font-size: 0.7rem; padding: 0; margin:0 0 2rem; color: #fff; font-weight: bold; line-height: 2;}
		.galleryUnit .thumbUnit{ margin-bottom: 10vw;}
		
			section#gallery .moreGallery{  box-shadow: 0px 0.4rem 0px 0px #c5405d; border-color:#c5405d; background: #e8788f;}
	
	
	    .swiper {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
      }
      
      .swiper-slide .thumbnail{
	      width: 100%;
	      		border-radius: 0.5rem;
		overflow: hidden; 
box-shadow: 0px 0.2rem 0.2rem 0px #c5405d;
      }
      
      .swiper-slide .thumbnail.iconPlay::after{ content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%,-50%); width: 10vw; height: 10vw; 
	      background: url(../images/common/icon_play.png) center center no-repeat; background-size: contain;
      }
      
       .swiper-slide .caption{ color: #fff; padding-top: 0.5rem; font-size: 0.8rem;  text-align: left; width: 100%; font-weight: bold;}

 .swiper-slide .thumbnail{
	         display: block;
        width: 80%;

 } 
  .swiper-slide .caption{

        width: 80%;

 } 
 
      .swiper-slide img {
	      vertical-align: bottom;
        height: auto;
        object-fit: cover;
      }

      .swiper-slide {
        width: 60%;
      }

      .swiper-slide:nth-child(2n) {
        width: 40%;
      }

      .swiper-slide:nth-child(3n) {
        width: 20%;
      }
      
        .swiper .swiper-button-prev,
        .swiper .swiper-button-next{ display: block; position: absolute !important; top: 50%; width: 8vw; height: 8vw; background: #fff; border-radius: 4vw; margin: -7vw 0 0 0; 
	            box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);



        }
        
        .swiper .swiper-button-prev{ transform: translate(-30%,-50%);}
        .swiper .swiper-button-next{ transform: translate(30%,-50%);}
        
        .swiper .swiper-button-prev::before,
        .swiper .swiper-button-next::before{ content:  ''; display: inline-block; position: absolute !important; top: 50%; left: 50%; width: 2vw; height: 2vw;border:solid 3px #d63859;}
        .swiper .swiper-button-prev::before{ border-bottom: 0; border-right: 0;  transform: translate(-35%,-50%) rotate(-45deg);  }
        .swiper .swiper-button-next::before{ border-top: 0; border-left: 0;  transform: translate(-65%,-50%) rotate(-45deg);}

        .swiper .swiper-button-prev{ left: 0; }
        .swiper .swiper-button-next{ right: 0;}
		.swiper-pagination{ width: 80%; margin:0 auto ; text-align: right; padding-top: 1vw;}



.swiper-pagination-bullet {
    width: 2vw;
    height: 2vw;
    display: inline-block;
    border-radius: 1vw;
    background: rgba(0,0,0,0.2);
    opacity: 1;
    border: 0;
    margin: 0 1vw;
    line-height: 0;
    font-size: 0;
    padding: 0;
}
.swiper-pagination-bullet::after{ content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.3); border-radius: 100%;  width: 100%; height: 100%; border: solid 1px #fff; visibility: hidden; }

.swiper-pagination-bullet-active{    background: #fff;}
.swiper-pagination-bullet-active::after{visibility: visible;}

section#gallery .moreUnit{ width: 80%; margin: auto;}


      section#products .sectionTitle{ margin-bottom: 13vw;}
	
		section#products .productSpace{}
		section#products ul.cans{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;}
		section#products ul.cans li{padding: 0; margin: 0 0 8vw 0; width: 25%; }
		section#products ul.cans li .item{ width: 13.8vw; margin: auto;}
		section#products ul.cans li img{ width: 100%; height: auto; vertical-align: bottom;}
	
		section#products ul.cans .fukidashi{ position: absolute; top: 6vw; width: 20vw; left: -5vw; height: 13vw; transform: translate(0%,-100%); background: rgba(255,0,0,0); pointer-events: none !important;}
		section#products ul.cans .fukidashi.left{}
		section#products ul.cans .fukidashi.right{ right: -5vw;left: auto;  }
		
		section#products ul.cans .fukidashi .popup{}
		
		section#products ul.cans li.pos_left .fukidashi .popup{ transform: rotate(-10deg); transform-origin: center bottom;}
		section#products ul.cans li.pos_right .fukidashi .popup{ transform: rotate(10deg); transform-origin: center bottom;}
		
		section#products ul.cans li .fukidashi .popup img{ transform: translate(0%,50px) scale(0.6); opacity: 0; transition: all 500ms ease;}
		section#products ul.cans li.active .fukidashi .popup img{    animation: fukidashi_pop 1500ms both 0ms;    transform-origin: center bottom;}
		section#products ul.cans li.active.no_0 .fukidashi .popup img{ animation-delay: 0ms;}
		section#products ul.cans li.active.no_1 .fukidashi .popup img{ animation-delay: 200ms;}
		section#products ul.cans li.active.no_2 .fukidashi .popup img{ animation-delay: 400ms;}
		section#products ul.cans li.active.no_3 .fukidashi .popup img{ animation-delay: 600ms;}
		section#products ul.cans li.active.no_4 .fukidashi .popup img{ animation-delay: 800ms;}
	
	
		section#products .productSpace p.ex{ font-size: 10px; margin: 0; padding: 0; color: #666;}
	
	section#horoyoibu{}
	
	
	
	
	section#horoyoibu .pushArea{ margin-top: -8vw;}
	
		section#horoyoibu .pushArea .kanban{}
		section#horoyoibu .pushArea .kanban.in img{animation: top-kanban 4000ms  both linear 300ms; transform-origin: center top;}
	
	section#horoyoibu .twitterUnit{ margin-bottom: 15vw;}
	section#horoyoibu .twitterUnit .btnItem{ margin-top: 40vw;}
	
	section#horoyoibu .twitterUnit .nyubuTwitter{ overflow: visible; z-index: 4; width: 78vw; margin: auto; padding: 0;}
	
	

	
	section#horoyoibu .twitterUnit .nyubuTwitter .inWrap{ display: block; margin: auto;}
	section#horoyoibu .twitterUnit .nyubuTwitter .text{ transform: translate(0vw,0);}
	 section#horoyoibu .twitterUnit .nyubuTwitter .text img{ width: auto; height: 8.5vw;}
	 
	 section#horoyoibu .twitterUnit .nyubuTwitter .jiro{ position: absolute; bottom: 0; left: -1.5vw; width: 15vw; line-height: 0; z-index: 6;}
	  section#horoyoibu .twitterUnit .nyubuTwitter .jiro img{ width: auto; height: auto;}
	  
	section#horoyoibu .twitterUnit .fukidashi{ position: absolute; bottom: 67%; left: -7vw; width: 90vw; z-index: 5;}
	
	section#horoyoibu .twitterUnit .fukidashi .guide{ opacity: 0;}
	section#horoyoibu .twitterUnit .fukidashi .message{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%,-2%) ; width: 100%; height: 100%;}
	section#horoyoibu .twitterUnit .fukidashi .message img{ position: absolute;width: 100%; height: 100%; transition: all 300ms cubic-bezier(.41,.91,.57,1.23);}
	section#horoyoibu .twitterUnit .fukidashi .message .message_bg{ bottom: 0; left: 50%; transform: translate(-50%,10%) scale(1,0.5); opacity: 0; transform-origin: left bottom;transition-delay: 500ms;}
	section#horoyoibu .twitterUnit .fukidashi .message .message_text{ bottom: 0; left: 50%; transform: translate(-50%,10%) scale(1);opacity: 0;transform-origin: center center; transition-delay: 800ms;}
	section#horoyoibu .twitterUnit .fukidashi .secret{position: absolute; bottom: 39%; left: -1%; transform: translate(0%,20%) scale(0); opacity: 0; width: 18%; height: auto; transform-origin: right center; 
		 transition: all 500ms cubic-bezier(.41,.91,.57,1.23);
		 transition-delay: 1100ms;}
	section#horoyoibu .twitterUnit .fukidashi .gift{position: absolute; bottom: 22%; right: 0%; transform: translate(0%,20%) scale(0); opacity: 0; width: 27%; height: auto;transform-origin: left center;  
		 transition: all 500ms cubic-bezier(.41,.91,.57,1.23);
		  transition-delay: 1200ms;}

	
	section#horoyoibu .twitterUnit.in .fukidashi .message{}
	section#horoyoibu .twitterUnit.in .fukidashi .message img{  }
	section#horoyoibu .twitterUnit.in .fukidashi .message .message_bg{  transform: translate(-50%,0%) scale(1); opacity: 1;}
	section#horoyoibu .twitterUnit.in .fukidashi .message .message_text{  transform: translate(-50%,0%) scale(1); opacity: 1;}
	section#horoyoibu .twitterUnit.in .fukidashi .secret{bottom: 39%; left: -1%; transform: translate(0%,0) scale(1); opacity: 1;  }
	section#horoyoibu .twitterUnit.in .fukidashi .gift{bottom: 22%; right: 0%; transform: translate(0%,0) scale(1); opacity: 1;   }

	
		
	
	section#horoyoibu .profileWrap{ margin-bottom: 5vw;}
	section#horoyoibu .profileUnit{ background: rgba(255,255,255,0.8); padding: 4vw; border-radius: 1rem;  box-shadow: 0px 3px 5px -2px #ccc;}
	section#horoyoibu .profileUnit:not(:last-child){ margin-bottom: 5vw;}
	section#horoyoibu .profileUnit dl{ display: flex; width: 100%; margin: 0; padding: 0;}
	section#horoyoibu .profileUnit dl dt{ width: 34vw;}
	section#horoyoibu .profileUnit dl dd{ flex: 1; text-align: left; padding-left: 5vw; padding-bottom: 2vw; margin: 0;}
	
	section#horoyoibu .profileUnit dl dd p{ font-size: 0.7rem; margin-top:0; }
	section#horoyoibu .profileUnit dl dd .name{ font-weight: bold; font-size: 0.8rem; margin-bottom: 0.35em;}
	section#horoyoibu .profileUnit dl dd .name span{ display: inline-block; font-size: 1.2em;}
	
	
	section#horoyoibu .profileUnit .btnItem{}	
	section#horoyoibu .profileUnit .btnItem .moreBtn{ display: flex; width: 100%; justify-content:center;align-items: center; min-height: 10vw; background: #000; color: #fff; font-size: 0.8rem;}
	section#horoyoibu .profileUnit .btnItem .moreBtn span{}	   	   	   	   	   	   
	   	   	   	   		

	section#horoyoibu .moreProfile{  box-shadow: 0px 0.4rem 0px 0px #bd4c63; border-color:#bd4c63; background: #f18198; font-size: 0.7rem; text-align: center; padding: 0.5rem; min-height: inherit; min-height: 8vw;}
	section#horoyoibu .moreProfile .inWrap{ display: block;}


	#suntory_contents .buttonLink.linkTwitter,
	#suntory_contents .buttonLink.linkBrandtop{ width: 60vw; margin: auto; min-height: 8vw; height: 8vw; border-radius: 4vw;  font-size: 0.8rem; padding: 0 !important; text-decoration: none;}
	
	
#suntory_contents .buttonLink.nyubuTwitter,
#suntory_contents .buttonLink.linkTwitter{  box-shadow: 0px 0.4rem 0px 0px #0188bc; border-color:#0188bc; background: #00acee;}


#suntory_contents #menuCover .buttonLink.linkTwitter{  box-shadow: none !important; border:0 !important; background: #00acee; position: relative;}
#suntory_contents #menuCover .buttonLink.linkBrandtop{  box-shadow: none !important;  border:0 !important;  background: #f18198;}
	   	   	   	   				
#suntory_contents section.area .buttonLink.linkBrandtop{  box-shadow: 0px 0.4rem 0px 0px #bf6779; border-color:#bf6779; background: #f18198;}
	
	
	
	
.modalUnit{position: fixed;  top: 0; left: 0; bottom: 0; right: 0; z-index: 500;  display: none;}
.modalUnitClose{position: absolute;  top: 2vw; right: 2vw; width: 14vw; height: 14vw; cursor: pointer; z-index: 6000; }
.modalUnitClose:before{ content: '';position: absolute;  top: 0; right: 0; width: 100%; height: 100%;  background: url(../images/common/btn_cover_close.png) center center no-repeat; background-size: contain;transition: transform 200ms cubic-bezier(.28,1.05,.6,1.14); transform: translate(0%,0%) scale(1);}
.modalUnitClose:hover:before{transform: translate(0%,-0%) scale(1.05);}
	
#modalCover{ }
.modalOpen #modalCover{}


#modalCover #modalCoverClose{}
#modalCover .coverFrame{position: absolute;  top: 0; left: 0; bottom: 0; right: 0; width: 100%; overflow: none; display: flex; align-items: center; justify-content: center;transition: background 500ms ease-in-out 200ms;
	background-color: #fff;
}

#modalCover .bgFrame{position: absolute;  top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0;width: 100%; height: 100%; overflow: none; display: flex; align-items: center; justify-content: center;transition:  all 500ms ease-in-out 0ms;
}

#modalCover .bgFrame.next{opacity: 0;z-index: 2; }
#modalCover .bgFrame.active{  opacity: 1; z-index: 1; }
#modalCover .bgFrame.active.hide{opacity: 1s; z-index: 1; }


#modalCover .contentsArea{  width: 100%; height: 100vw; margin: auto; position: relative; z-index: 5000;}
#modalCover .contentsArea .productDetail{position: absolute; width: 100%; height: 100%; top: 50%; left: 50%;opacity: 0; transform: translate(-50%,-100%); transition: all 500ms ease-in-out; pointer-events: none;
	
		display: flex;
	align-items:flex-start;
	justify-content: center;
	
	
}
#modalCover .contentsArea .productDetail.next{ transform: translate(-50%,-50%) scale(1); opacity: 0;}
#modalCover .contentsArea .productDetail.active{ transition-delay: 100ms; transform: translate(-50%,-50%) scale(1); opacity: 1;  pointer-events: all;}
#modalCover .contentsArea .productDetail.active.hide{transition: all 50ms ease; pointer-events: none;transform: translate(-50%,-50%) scale(1); opacity: 0; }

#modalCover .contentsArea .productDetail .image{ margin-bottom: 4vw;}
#modalCover .contentsArea .productDetail .detail{ margin-bottom: 6vw;}
#modalCover .contentsArea .productDetail .osusume{ position: absolute;bottom: 0vw; left: 50%; transform: translate(-50%,0); width: 74%;}

#modalCover .contentsArea .productDetail .image img{ width: 100%; height: auto; max-width: 25vw; vertical-align: bottom;}
#modalCover .contentsArea .productDetail .detail .read{width:auto; height: 12.8vw; max-width: auto;}
#modalCover .contentsArea .productDetail .detail .text{ font-size: 0.65rem; margin-top: 0.5rem;}
#modalCover .contentsArea .productDetail .detail .ex{}

#modalCover .contentsArea .productDetail .osusume::before{ content: ''; display: block;  width: 100%; height: 5vw; background: url(../images/products/text_osusume.png) center center no-repeat; background-size: contain; }
#modalCover .contentsArea .productDetail .osusume .btnItem{}
#modalCover .contentsArea .productDetail .osusume .buttonLink{ text-decoration: none; position: relative; padding: 1vw 7vw 1vw 7vw; min-height: 10vw; justify-content: flex-start;}
#modalCover .contentsArea .productDetail .osusume .icon{ position: absolute; top: 50%; left: 3vw; transform: translate(0,-45%); width: 10vw;}
#modalCover .contentsArea .productDetail .osusume .icon img{ width: 100%; height: auto;}
#modalCover .contentsArea .productDetail .osusume .inWrap{}

#modalCover .contentsArea .productDetail .osusume .text h4{ font-size: 0.8rem; padding: 0; margin: 0 0 0.2rem; line-height: 1;}
#modalCover .contentsArea .productDetail .osusume .text p{ font-size: 10px; padding: 0; margin: 0;line-height: 1.2;transform-origin: center bottom; transform: scale(0.95)}


#modalCover .contentsArea .productDetail .image{ }
#modalCover .contentsArea .productDetail .image img{transition: all 500ms cubic-bezier(.45,.26,.19,1.38);transform: translate(0%,0%) scale(0); opacity: 0; }
#modalCover .contentsArea .productDetail .detail{transition: all 800ms ease-in-out 600ms;transform: translate(0%,0%); opacity: 0;  }
#modalCover .contentsArea .productDetail .osusume{transition: all 800ms ease-in-out 600ms;transform: translate(-50%,0%); opacity: 0;  }

#modalCover .contentsArea .productDetail.active{}
#modalCover .contentsArea .productDetail.active .image{  }
#modalCover .contentsArea .productDetail.active .image img{transform: translate(0%,0%) scale(1); opacity: 1;  }
#modalCover .contentsArea .productDetail.active .detail{transform: translate(0%,0%); opacity: 1;  }
#modalCover .contentsArea .productDetail.active .osusume{transform: translate(-50%,0%); opacity: 1;  }



#galleryCover----------------------{}
	
#galleryCover{ background: rgba(0,0,0,0.8);  }
.movieOpen #galleryCover{}
#galleryCover #galleryCoverClose{
	    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%,-50%);
    
}
#galleryCover .coverFrame{position: absolute;  top: 0; left: 0; bottom: 0; right: 0; width: 100%; overflow: none; display: flex; align-items: center; justify-content: center;transition: background 500ms ease-in-out 200ms;}

#galleryCover .contentsFrame{position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%);  width: 80%;max-width: 800px; display: flex; align-items: center; justify-content: center;}
#galleryCover .contentsArea{  width: 100%; max-width: 800px; margin: auto;}
#galleryCover .contentsArea::before{ content: ''; display: block; width: 100%; height: 0; padding-top: 56%;}
	
	#galleryCover .contentsArea iframe,
	#galleryCover .contentsArea .image{position: absolute;  top: 0; left: 0;width: 100%; height: 100%;}
	


#profileCover----------------------{}
	
#profileCover{ background: rgba(0,0,0,0.8);  }
.profileOpen #profileCover{}
#profileCover #galleryCoverClose{}
#profileCover .coverFrame{position: absolute;  top: 0; left: 0; bottom: 0; right: 0; width: 100%; overflow: none; display: flex; align-items: center; justify-content: center;transition: background 500ms ease-in-out 200ms;}
#profileCover .contentsArea{position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%);  width: 80%; max-width: 800px; margin: auto;}

	

	#profileCover .contentsArea .talentWrap{ color: #fff; text-align: left;display: none;	}
		#profileCover .contentsArea .talentWrap h3{ font-size: 1.3em;  margin-bottom: 1rem;}
			#profileCover .contentsArea .talentWrap p{ font-size: 0.75em; line-height: 2;}
	
		#profileCover .contentsArea .talentWrap.kuroki{ 	}






#menuCover----------------------{}
	
#menuCover{ background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,240,246,1) 100%);}
.menuOpen #menuCover{}
#menuCover #menuCoverClose{ position: fixed;  }
#menuCover .coverFrame{position: absolute;  top: 0; left: 0; bottom: 0; right: 0; width: 100%; overflow: none; display: flex; align-items: center; justify-content: center;transition: background 500ms ease-in-out 200ms;}
#menuCover .contentsArea{position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%);  box-sizing: border-box;  width: 80%; max-width: 800px; margin: auto; text-align: center;}
#menuCover .contentsArea .inMenu{}
#menuCover .contentsArea .sitename{width: 50vw; margin:0 auto 5vw;}
#menuCover .contentsArea .sitename img{ width: 100%; height: auto;}
#menuCover .contentsArea .menu{ list-style: none; padding: 0;margin: 0 0 5vw ; }
#menuCover .contentsArea .menu li{  padding: 4vw; margin-bottom: 5vw; font-size: 1.2rem; font-weight: bold; color: #555; position: relative;}
#menuCover .contentsArea .menu li:not(:last-child)::after{ content: ''; display: block;  text-align: center; width: 1vw; height: 1vw; border-radius: 0.5vw; background: #000;  opacity: 0.5; line-height: 0; font-size: 0; position: absolute; bottom: -0.5rem; left: 50%; transform: translate(-50%,0);
}
#menuCover .contentsArea .linkBrandtop{margin-bottom: 5vw;}

#menuCover .contentsArea .buttonLink{width: 55vw;}


#menuCover #introReset{ display:inline-block; padding: 0.2rem 1rem; line-height: 1; background: rgba(0,0,0,0.8); position: fixed; bottom:-3rem; left:1rem; cursor: pointer;}
#menuCover #introReset::before{ content: 'イントロ閲覧履歴削除'; display: inline-block; font-size: 10px; color: #fff; line-height: 1; transform: translate(0,-30%);}

#menuCover a,
#menuCover a:link,
#menuCover a:active,
#menuCover a:hover{ text-decoration: none; color: inherit}

#menuCover .btnItem { color: #fff;}



#menuBtn,
#twitterBtn,
.gotoContents,
.swiper-slide .thumbnail,
section#products ul.cans li .item,
.buttonLink{ cursor: pointer;}

 	   		 
	
	

	
	

/* SP */
@media screen and (max-width: 768px) {
		.onlySP{ display: block;}
	.onlyPC{ display: none;}
	
	
	#suntory_contents{ }
	
		section .contentsFrame{max-width: 750px; width: 89.5% ;}
		section{ padding: 23vw 0 21vw 0;}
		section .sectionTitle{ margin-bottom: 5vw;}
		
		section#products ul.cans li:nth-of-type(4n){ margin-right: 0%;}




}
#for_PC----------------------{}
	
	
/* PC */
@media screen and (min-width: 769px) {
	#loadingAnim{ 	transform: translate(-50%, -50%);}
	#container::after{ content: ''; display: none; position: absolute; top: 0; left: 0;z-index: 1000; width: 50%; height: 100%;
/* 		 background: url(../images/_dummy/design_guide_pc.png) left -15px no-repeat; background-size: auto auto;  */
		 opacity: 0.5;}
	
	#suntory_contents{}
	.ua_iPad #suntory_contents{ min-width: 1024px;}
/* 	#containerBG{background-image: url(../images/_dummy/base_pc.png) ;} */
	.contentsFrame{max-width: 1140px; }
	
	.onlySP{ display: none;}
	.onlyPC{ display: block;}
	
	
.hoverEffect{ transition: transform 200ms cubic-bezier(.28,1.05,.6,1.14); transform: translate(0%,0%) scale(1);}
.hoverEffect_boyon{ transition: transform 200ms cubic-bezier(.48,1.12,.24,1.5); }
.hoverEffect:hover{ transform: translate(0%,-0%) scale(1.05);}
  
 .swiper-slide .inThumb{ transition: transform 200ms cubic-bezier(.28,1.05,.6,1.14); transform: translate(0%,0%) scale(1);}
 .swiper-slide .inThumb:hover{ transform: translate(0%,-0%) scale(1.05);}
 
  .swiper .swiper-button-prev,
 .swiper .swiper-button-next{  transition: transform 200ms cubic-bezier(.28,1.05,.6,1.14); }
 
 .swiper .swiper-button-prev{    transform: translate(-150%,-50%) scale(1);}
 .swiper .swiper-button-next{    transform: translate(150%,-50%) scale(1);}

 .swiper .swiper-button-prev:hover{    transform: translate(-150%,-50%) scale(1.05);}
 .swiper .swiper-button-next:hover{    transform: translate(150%,-50%) scale(1.05);}	  
 

	  
	#suntory_contents .buttonLink{ max-width: 330px; margin-left: auto; margin-right: auto;min-height: 54px;   }
	
	#suntory_contents .buttonLink.linkTwitter{ max-width: 330px; margin: auto; min-height: 54px; height: 54px; border-radius: 27px;  }
	#suntory_contents .buttonLink.linkTwitter.arrowTwitter .inWrap .text{ padding-left: 30px;}
	#suntory_contents .buttonLink.linkTwitter.arrowTwitter .inWrap .text::after{  width: 20px; height: 20px;  left: 0px; }

	#suntory_contents .buttonLink.linkBrandtop{ max-width: 330px; margin: auto; min-height: 54px; height: 54px; border-radius: 27px;  }

	section.area{ padding: 100px 0;}
	
	
#suntory_contents .buttonLink.arrowTwitter::after{    width: 42px;height:42px;    right:20px;}
	
	
	.sectionTitle{ margin-bottom: 10px;}
	#suntory_contents section .sectionTitle img{ width: auto; height: 140px;}
	
	

	
		section#hero .heroSpace{ 	 height: 630px; opacity: 0; pointer-events: none;}
	
	
#containerBG .gradeAwa{ width: 350px; height: 350px;  top: 300px;}
#containerBG .gradeAwa.yellow{transform: translate(80%,-80%);}
#containerBG .gradeAwa.pink{ transform: translate(-190%,40%);}
#containerBG .gradeAwa.blue{ transform: translate(70%,60%);}

.heroStart #containerBG .gradeAwa.yellow{transform: translate(30%,-80%);}
.heroStart #containerBG .gradeAwa.pink{ transform: translate(-140%,40%);}
.heroStart #containerBG .gradeAwa.blue{ transform: translate(20%,60%);}

	
#containerBG .cans{  height: 800px;}
#containerBG .cans li{ width: 110px;}

#containerBG .cans li.shiroi_sour{margin-top:-20px; margin-left:-20px;}
#containerBG .cans li.grape{margin-top:250px; margin-left:70px;}
#containerBG .cans li.momo{margin-top:-180px; margin-left:270px;}
#containerBG .cans li.icetea{margin-top:190px; margin-left:-210px;}

#containerBG .cans li.muscat{margin-top:-200px; margin-left:-420px;}
#containerBG .cans li.acerola{margin-top:210px; margin-left:-380px;}
#containerBG .cans li.casis{margin-top:-250px; margin-left:120px;}
#containerBG .cans li.hapicle{margin-top:20px; margin-left:-270px;}

#containerBG .cans li.mix{margin-top:-260px; margin-left:-210px;}
#containerBG .cans li.syuwabita{margin-top:200px; margin-left:370px;}
#containerBG .cans li.umesyu{margin-top:240px; margin-left:-110px;}
#containerBG .cans li.salty{margin-top:-70px; margin-left:440px;}

#containerBG .cans li.lemon{margin-top:150px; margin-left:200px;}
#containerBG .cans li.cola{margin-top:-100px; margin-left:-190px;}
#containerBG .cans li.cider{margin-top:20px; margin-left:280px;}
#containerBG .cans li.ginger{margin-top:-80px; margin-left:150px;}



#containerBG .cans li.shiroi_sour .item{ transform: scale(1.7) rotate(-14deg);}
#containerBG .cans li.grape .item{ transform: scale(0.8) rotate(-10deg);}
#containerBG .cans li.momo .item{ transform: scale(1.2) rotate(5deg);}
#containerBG .cans li.icetea .item{ transform: scale(0.5) rotate(-20deg);}

#containerBG .cans li.muscat .item{ transform: scale(1) rotate(10deg);}
#containerBG .cans li.acerola .item{ transform: scale(1.4) rotate(-10deg);}
#containerBG .cans li.casis .item{ transform: scale(0.8) rotate(15deg);}
#containerBG .cans li.hapicle .item{ transform: scale(1.2) rotate(-15deg);}

#containerBG .cans li.mix .item{ transform: scale(0.6) rotate(-20deg);}
#containerBG .cans li.syuwabita .item{ transform: scale(1.2) rotate(10deg);}
#containerBG .cans li.umesyu .item{ transform: scale(0.6) rotate(10deg);}
#containerBG .cans li.salty .item{ transform: scale(1) rotate(10deg);}

#containerBG .cans li.lemon .item{ transform:scale(0.5) rotate(20deg);}
#containerBG .cans li.cola .item{ transform: scale(0.4) rotate(20deg);}
#containerBG .cans li.cider .item{ transform: scale(0.5) rotate(20deg);}
#containerBG .cans li.ginger .item{ transform: scale(0.5) rotate(14deg);}


		
			






#introUnit{ transition: opacity 300ms ease;}
#introUnit .contentsWrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#introUnit .guide{ width: 300px; height: auto; opacity: 0;}

#introUnit .kanban .image{  position: absolute; top: 0vw; left: 50%; transform: translate(-50%,0%);width: 200px; height: auto;}

#introUnit .text{position: absolute;  top: 60%; left: 50%; transform: translate(-50%,0%); width: 300px; height: 100px; }
#introUnit .text .item{position: absolute; width: 7vw; height: auto; }
#introUnit .text .item .image{ width: 100%; height: auto; }

#introUnit .text .item:nth-of-type(1) {width: 18%;  top: 0vw; left: 10px; transform: translate(-24%,-19%) rotate(0deg); }
#introUnit .text .item:nth-of-type(2) {width: 15%;  top: 0vw; left: 44px; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(3) {width: 16%;  top: 0vw; left: 75px; transform: translate(-23%,-21%) rotate(0deg); }
#introUnit .text .item:nth-of-type(4) {width: 18%;  top: 0vw; left: 106px; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(5) {width: 18%;  top: 0vw; left: 140px; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(6) {width: 19%;  top: 0vw; left: 171px; transform: translate(-15%,-20%) rotate(0deg); }

#introUnit .text .item:nth-of-type(7) {width: 21%;  top: 52%; left: 100px; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(8) {width: 17%;  top: 52%; left: 147px; transform: translate(-20%,-14%) rotate(0deg); }
#introUnit .text .item:nth-of-type(9) {width: 17%;  top: 52%; left: 187px; transform: translate(-20%,-11%) rotate(0deg); }
#introUnit .text .item:nth-of-type(10) {width: 21%;  top: 52%; left: 220px; transform: translate(-20%,-20%) rotate(0deg); }
#introUnit .text .item:nth-of-type(11) {width: 12%;  top: 52%; left: 270px; transform: translate(-20%,-20%) rotate(0deg); }








.introActive.heroStart #containerBG .cans{  height: 800px;}
.introActive.heroStart #containerBG .cans li{ width: 110px;}

.introActive.introStart #containerBG .cans li.shiroi_sour{margin-top:-20px; margin-left:-20px;}

.introActive.heroStart #containerBG .cans li.shiroi_sour{margin-top:-20px; margin-left:-20px;}
.introActive.heroStart #containerBG .cans li.grape{margin-top:250px; margin-left:70px;}
.introActive.heroStart #containerBG .cans li.momo{margin-top:-180px; margin-left:270px;}
.introActive.heroStart #containerBG .cans li.icetea{margin-top:190px; margin-left:-210px;}

.introActive.heroStart #containerBG .cans li.muscat{margin-top:-200px; margin-left:-420px;}
.introActive.heroStart #containerBG .cans li.acerola{margin-top:210px; margin-left:-380px;}
.introActive.heroStart #containerBG .cans li.casis{margin-top:-250px; margin-left:120px;}
.introActive.heroStart #containerBG .cans li.hapicle{margin-top:20px; margin-left:-270px;}

.introActive.heroStart #containerBG .cans li.mix{margin-top:-260px; margin-left:-210px;}
.introActive.heroStart #containerBG .cans li.syuwabita{margin-top:200px; margin-left:370px;}
.introActive.heroStart #containerBG .cans li.umesyu{margin-top:240px; margin-left:-110px;}
.introActive.heroStart #containerBG .cans li.salty{margin-top:-70px; margin-left:440px;}

.introActive.heroStart #containerBG .cans li.lemon{margin-top:150px; margin-left:200px;}
.introActive.heroStart #containerBG .cans li.cola{margin-top:-100px; margin-left:-190px;}
.introActive.heroStart #containerBG .cans li.cider{margin-top:20px; margin-left:280px;}
.introActive.heroStart #containerBG .cans li.ginger{margin-top:-80px; margin-left:150px;}










	
	section#hero{ padding-top: 0;}
	section#hero .heroSpace{ height: 650px;}
	
	section#hero .bannerSpace {padding-bottom: 120px;}
	section#hero .bannerSpace .banner{}
	
	
	section#hero .bannerSpace .banner.topics{ max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 30px; display: flex; justify-content: center; flex-wrap: wrap;}
	section#hero .bannerSpace .banner.topics li.cpn{ width: 385px; margin-right: 13px; margin-bottom: 0;	}
	
	section#hero .bannerSpace .banner.topics li.limited{ width: 362px; 		display: flex;		align-items: flex-end;}
	section#hero .bannerSpace .banner.topics li.limited .inWrap:not(:last-child){ margin-bottom: 15px;}
		
		section#hero .bannerSpace .banner.topics.limited_col_2{ width: 100%; margin-bottom: 1rem;}
		section#hero .bannerSpace .banner.topics.limited_col_2 li.limited{margin: 0 0.5rem 1rem;}
		
		section#hero .bannerSpace .banner.topics.cpn_only li.limited{width: 312px; 	}
		section#hero .bannerSpace .banner.topics.cpn_only li.limited .banner.nav li{ width: 100%;}
	
	section#hero .bannerSpace .banner.nav{ display: flex; justify-content: center; flex-wrap: wrap; width: 100%;}
	section#hero .bannerSpace .banner.nav li{ width: 300px; margin: 0 10px 10px;}
	
	
	
	section#feature .bannerSpace{ width: 600px; margin: auto;}
	
	section#feature ul.banner li .links{ display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
	
	section#feature ul.banner li .btn{ width:250px; margin: 0 10px; min-height: 60px;    padding: 6px 6px 6px 6px; font-size: 14px;}
	section#feature ul.banner li .btn .icon{
		display: flex;
		width: 30px;
		left: 15px;
	}
	section#feature ul.banner li .btn .icon img{ width: auto; max-width: 30px; height: 45px;}
	section#feature ul.banner li .btn .inWrap .text {padding-left: 10px;}
	
	section#feature ul.banner li .btn {margin-bottom: 10px !important;}
	
	section#gallery .sectionTitle{ margin-bottom: 50px;}
	section#gallery .thumbUnit{ width: 960px; margin: auto;}
	
	.ua_iPad section#gallery .thumbUnit{ width: 800px; margin: auto;}
	
	section#gallery .galleryUnit .unitTitle{ padding: 4px 25px;}
	section#gallery .galleryUnit .unitTitle img{ max-height: 30px; width: auto;}
	section#gallery .galleryUnit p.read{ font-size: 1.0rem; margin-bottom: 20px;}

section#gallery .galleryUnit{ }
section#gallery .galleryUnit .thumbUnit{ margin-bottom: 20px;}

.swiper-slide .thumbnail,
.swiper-slide .caption{ width: 100%;}

.onlyPC .swiper-slide{ display: flex; flex-wrap: wrap; justify-content: center;}
.onlyPC .swiper-slide .inThumb{ width: 31%; margin: 0 1%;}
.onlyPC .swiper-slide{ opacity: 0; transform: opacity 300ms ease;}
.onlyPC .swiper-slide-active{ opacity: 1;}
.onlyPC .swiper-slide .inThumb{ pointer-events: none !important;}
.onlyPC .swiper-slide-active .inThumb{ pointer-events: all !important;}

.swiper-slide img{ width: 100%;}

 .swiper-slide .thumbnail.iconPlay::after{ width: 50px; height: 50px;}




        .swiper .swiper-button-prev,
        .swiper .swiper-button-next{ width: 50px; height: 50px; border-radius: 25px; margin-top: -40px;}
        
        .swiper .swiper-button-prev{ transform: translate(-150%,-50%);}
        .swiper .swiper-button-next{ transform: translate(150%,-50%);}
        
        .swiper .swiper-button-prev::before,
        .swiper .swiper-button-next::before{ width: 15px; height: 15px;}
        .swiper .swiper-button-prev::before{  transform: translate(-35%,-50%) rotate(-45deg);  }
        .swiper .swiper-button-next::before{ transform: translate(-65%,-50%) rotate(-45deg);}

		.swiper-pagination{ width: 100%; padding-top: 20px;}
		
		

		.thumbUnit.count_2 .swiper-slide{ transform: translate(150px, 0);}
		

		.thumbUnit.noNavi .swiper-button-next,
		.thumbUnit.noNavi .swiper-button-prev,
		.thumbUnit.noNavi .swiper-pagination{ display: none;}


.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 0 5px;
}


section#products .productSpace{ max-width: 960px; margin: auto;}
section#products .sectionTitle{ margin-bottom: 60px;}

section#products ul.cans{ margin-bottom: 10px;}
section#products ul.cans li{     width: 10.5%;    margin: 0 1% 30px 1%;}
section#products ul.cans li .item{width: 74px;  transition: all 300ms ease; cursor: pointer;transform: translate(0%,-0%) scale(1); }
	section#products ul.cans li .item:hover{transform: translate(0%,-3%) scale(1.05) rotate(3deg);}
		section#products ul.cans .fukidashi{ top: 5px; width: 110px;height: 68px; left: -20px;  transform: translate(0%,-100%); background: rgba(255,0,0,0);}
		section#products ul.cans .fukidashi.left{}
		section#products ul.cans .fukidashi.right{ right: -20px;left: auto;  }
		
		section#products .productSpace p.ex{ font-size: 0.85rem;}
		

section#horoyoibu::before{background: url(../images/horoyoi-bu/bg_deco_pc.png) center top no-repeat #fff584; background-size: auto; }



section#horoyoibu .kanban{ width: 250px; position: absolute; top: 0; left: 50%; transform: translate(-140%,0);}


section#horoyoibu .pushArea{ max-width: 960px; margin:-5px auto 50px; display: flex;}
section#horoyoibu .profileWrap{ max-width: 720px; margin: 0 auto 50px;  display: flex; align-items: flex-start;justify-content: space-between; }
section#horoyoibu .profileWrap .profileUnit{ width: 330px;}

section#horoyoibu .twitterUnit{ width: 570px; margin: 0 0 0 350px;}
section#horoyoibu .twitterUnit .btnItem{ margin-top: 280px;}
section#horoyoibu .twitterUnit .fukidashi{ width: 520px;
	bottom: 60px;
    left: -15px;
    pointer-events: none;
}

section#horoyoibu .twitterUnit .nyubuTwitter { max-width: 440px; height: 90px;}
section#horoyoibu .twitterUnit .nyubuTwitter .text img{ height: 50px;}

	 section#horoyoibu .twitterUnit .nyubuTwitter .jiro{  left: -10px; width: 95px; }
	  section#horoyoibu .twitterUnit .nyubuTwitter .jiro img{ width: auto; height: auto;}

section#horoyoibu .twitterUnit .jiro {
    left: -8px;
    width: 95px;
}



	section#horoyoibu .profileUnit{ padding: 20px; }
	section#horoyoibu .profileUnit:not(:last-child){ margin-bottom: 0;}
	section#horoyoibu .profileUnit:nth-of-type(2){ margin-top: 40px;} 
	section#horoyoibu .profileUnit dl{ }
	section#horoyoibu .profileUnit dl dt{ width: 106px;}
	section#horoyoibu .profileUnit dl dd{ padding-left: 15px; padding-bottom: 5px;}
	
	section#horoyoibu .profileUnit dl dd p{ font-size: 0.7rem;}
	
	section#horoyoibu .profileUnit .btnItem{}	
	section#horoyoibu .profileUnit .btnItem .moreBtn{ }
	section#horoyoibu .profileUnit .btnItem .moreBtn span{}	   	
	
	section#horoyoibu .moreProfile { min-height: 40px;}
	
	
	
	
	.modalUnitClose{position: absolute;  top: 40px; right: 40px; width: 60px;; height: 60px; cursor: pointer;}
	



#toolsCover----------------------{}
#toolsCover{ }
#toolsCover .inFrame{ margin: auto; width: 1140px; position: relative;}
#toolsCover #menuBtn{ position: absolute; top: 0; left: 0; width:90px; height: 90px;  background: url(../images/common/btn_nav_menu.png) center center no-repeat #f18198; background-size: contain;}
#toolsCover #twitterBtn{position: absolute; top: 20px; right: 30px; width: 90px; height: 90px; border-radius: 45px;  background: url(../images/common/btn_nav_twitter.png) center center no-repeat #00acee; background-size: contain;}
#toolsCover{}

 
 #toolsCover #menuBtn{ transition: all 300ms ease; cursor: pointer;transform: translate(0%,-0%) scale(1); transform-origin: center top;}
  #toolsCover #menuBtn:hover{ /* background-color: #ff8aa1; */transform: translate(0%,-0%) scale(1.05);}
  
   #toolsCover #twitterBtn{ transition: all 300ms ease; cursor: pointer;transform: translate(0%,-0%) scale(1);}
  #toolsCover #twitterBtn:hover{/*  background-color: #00b7ff; */transform: translate(0%,-0%) scale(1.05);}

#menuCover----------------------{}
	
#menuCover{   background: rgba(255,255,255,0.8) ;}
.menuOpen #menuCover{}
#menuCover .modalUnitClose{ position: absolute;  top:0px; right: 0px; width: 60px; height: 60px; transform: translate(50%,-50%);}
#menuCover .coverFrame{}
#menuCover .contentsArea{position: absolute;  top: 50%; left: 50%; transform: translate(-50%,-50%);  width: 80%; max-width: 650px; margin: auto; text-align: center; background: #fff; padding: 100px; border-radius: 20px; }
#menuCover .contentsArea .inMenu{}
#menuCover .contentsArea .sitename{width: 210px; margin:0 auto 30px;}
#menuCover .contentsArea .sitename img{ width: 100%; height: auto;}
#menuCover .contentsArea .menu{ list-style: none; padding: 0;margin: 0 0 20px ; }
#menuCover .contentsArea .menu li{  padding: 10px; margin-bottom: 20px; font-size: 1rem; font-weight: bold; color: #555;}
#menuCover .contentsArea .menu li:not(:last-child)::after{ width: 4px; height: 4px; border-radius: 2px; bottom: -13px;}


#menuCover .contentsArea .linkBrandtop {margin-bottom: 10px;}

#menuCover .contentsArea .buttonLink{ width: 220px !important;    min-height: 40px;
    height: 40px;
    border-radius: 20px;
   line-height: 1;
   }
    
    
    
    #modalCover { background: rgba(255,255,255,0.9);}
    
    #modalCover .coverFrame{
	    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%,-50%);
    width: 650px;
    height: 650px;
    border-radius: 20px;
    background-color: #fff; 
    }
    
    #modalCover .bgFrame{    
	     position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%,-50%);
    width: 650px;
    height: 650px;
    border-radius: 20px;
    }
    
#modalCover .modalUnitClose{ position: absolute; top: 0; right: 0; transform: translate(50%,-50%); width: 60px; height: 60px; }

#modalCover .contentsArea{ height: 100%; overflow: hidden; }
	
#modalCover .contentsArea .productDetail{ padding: 0px 0 0 0; box-sizing: border-box;	align-items:center;}

#modalCover .contentsArea .productDetail .contentUnit{ padding-bottom: 90px;}
#modalCover .contentsArea .productDetail.noOsusume .contentUnit{ padding-bottom: 0px;}

#modalCover .contentsArea .productDetail .image{ margin-bottom: 20px;}
#modalCover .contentsArea .productDetail .detail{ margin-bottom: 10px;}
#modalCover .contentsArea .productDetail .osusume{ position: absolute;bottom: 60px; left: 50%; transform: translate(-50%,0); width: 78%;}

#modalCover .contentsArea .productDetail .image img{ max-width: 146px;}
#modalCover .contentsArea .productDetail .detail .read{max-width: auto; margin-bottom: 10px;    height: 60px;}
#modalCover .contentsArea .productDetail .detail .text{ font-size: 0.8rem;}
#modalCover .contentsArea .productDetail .detail .ex{}

#modalCover .contentsArea .productDetail .osusume::before{ height: 20px;  }
#modalCover .contentsArea .productDetail .osusume .btnItem{}
#modalCover .contentsArea .productDetail .osusume .buttonLink{ padding: 5px 40px 5px 40px; min-height: 60px; width: 320px;box-sizing:border-box;}
#modalCover .contentsArea .productDetail .osusume .icon{  left: 5px; transform: translate(0,-47%); width: 44px;}
#modalCover .contentsArea .productDetail .osusume .icon img{}
#modalCover .contentsArea .productDetail .osusume .inWrap{}

#modalCover .contentsArea .productDetail .osusume .text h4{ font-size: 0.8rem; padding: 0; margin: 0 0 0.2rem; line-height: 1;}
#modalCover .contentsArea .productDetail .osusume .text p{ font-size: 0.6rem; padding: 0; margin: 0;line-height: 1.2;transform-origin: left bottom; transform: scale(1)}


#profileCover .contentsArea{ max-width: 600px;}
		#profileCover .contentsArea .talentWrap h3{ font-size: 1.5em;  margin-bottom: 2rem;}
			#profileCover .contentsArea .talentWrap p{ font-size: 0.9em; line-height:2;}



#menuCover #introReset{  bottom:1rem; left:1rem; cursor: pointer;}

}/* end PC */