@charset "utf-8";

/*--
中 font-size:96%;
小 font-size:88%;
--*/
@import url(https://fonts.googleapis.com/css?family=Fira+Sans);
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
color:#4d4d4d;
font-family:'Fira Sans',"游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size:87.5%;
line-height:1.8;
-webkit-text-size-adjust: 100%;
}
.pc{
display:block !important;
}
.tab-pc{
display:block !important;
}
.tab{
display: none !important;
}
.sp-tab{
display:none !important;
}
.sp{
display:none !important;
}
@media screen and (max-width:980px){
.pc{
display:none !important;
}
.tab{
display:block !important;
}
.sp-tab{
display:block !important;
}
}
@media screen and (max-width:640px){
body{
font-size:9pt;
}
.tab-pc{
display: none !important;
}
.tab{
display: none !important;
}
.sp{
display:block !important;
}
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
/*---------------------------------------*/
/* header */
/*---------------------------------------*/
#header{
position:fixed;
top:0;
left:0;
width:100%;
height:66px;
z-index:999;
}
#header .hNavi{
position:absolute;
left:10%;
top:20px;
}
@media screen and (max-width:1210px){
#header .hNavi{
left:0;
}
}
#header .hNavi li{
display:inline;
float:left;
margin-right:18px;
font-size:107%;
font-weight:bold;
}
@media screen and (max-width:1210px){
#header .hNavi li{
margin-right:5px;
}
}
#header .hNavi li:after{
content:"";
height:10px;
width:1px;
margin-left:18px;
position:relative;
z-index:10;
border-right:1px dotted #ff5abe;
-webkit-transform: translateY(0) rotate(10deg);
transform: translateY(0) rotate(10deg);
display:inline-block;
}
@media screen and (max-width:1210px){
#header .hNavi li:after{
margin-right:5px;
}
}
#header .hNavi li:last-child:after{
display:none;
}
#header .hNavi li a{
position:relative;
padding:0 2px;
overflow:hidden;
line-height:1;
display:inline-block;
}
#header .hNavi li a:hover{
	background:#ff5abe;
}
#header .hNavi li:first-child a{
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
-o-transition: all 0.3s ease 0.3s;
transition: all  0.3s ease 0.3s;
}
#header .hNavi li:first-child a:hover{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#header .hNavi li:nth-child(2) a{
-webkit-transition: all 0.3s ease 0.6s;
-moz-transition: all 0.3s ease 0.6s;
-o-transition: all 0.3s ease 0.6s;
transition: all  0.3s ease 0.6s;
}
#header .hNavi li:nth-child(2) a:hover{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#header .hNavi li:nth-child(3) a,
#header .hNavi li:nth-child(4) a,
#header .hNavi li:nth-child(5) a{
-webkit-transition: all 0.3s ease 0.4s;
-moz-transition: all 0.3s ease 0.4s;
-o-transition: all 0.3s ease 0.4s;
transition: all  0.3s ease 0.4s;
}
#header .hNavi li:nth-child(3) a:hover,
#header .hNavi li:nth-child(4) a:hover,
#header .hNavi li:nth-child(5) a:hover{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#header .hNavi li:nth-child(6) a,
#header .hNavi li:nth-child(7) a{
-webkit-transition: all 0.3s ease 0.5s;
-moz-transition: all 0.3s ease 0.5s;
-o-transition: all 0.3s ease 0.5s;
transition: all  0.3s ease 0.5s;
}
#header .hNavi li:nth-child(6) a:hover,
#header .hNavi li:nth-child(7) a:hover{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}


#header .hNavi li a:before{
content:"";
height:100%;
width:10px;
display:block;
position:absolute;
top:0;
left:0;
margin-left:-20px;
background:#ff5abe;
z-index:20;
-webkit-transform: translateY(0) rotate(15deg);
transform: translateY(0) rotate(15deg);
}
#header .hNavi li:first-child a:before{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all  0.5s ease;
}
#header .hNavi li:first-child a:hover:before{
-webkit-transition: all 0.5s ease 0.2s;
-moz-transition: all 0.5s ease 0.2s;
-o-transition: all 0.5s ease 0.2s;
transition: all  0.5s ease 0.2s;
}
#header .hNavi li:nth-child(2) a:before{
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all  0.9s ease;
}
#header .hNavi li:nth-child(2) a:hover:before{
-webkit-transition: all 0.9s ease 0.2s;
-moz-transition: all 0.9s ease 0.2s;
-o-transition: all 0.9s ease 0.2s;
transition: all  0.9s ease 0.2s;
}
#header .hNavi li:nth-child(3) a:before,
#header .hNavi li:nth-child(4) a:before,
#header .hNavi li:nth-child(5) a:before{
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all  0.6s ease;
}
#header .hNavi li:nth-child(3) a:hover:before,
#header .hNavi li:nth-child(4) a:hover:before,
#header .hNavi li:nth-child(5) a:hover:before{
-webkit-transition: all 0.6s ease 0.2s;
-moz-transition: all 0.6s ease 0.2s;
-o-transition: all 0.6s ease 0.2s;
transition: all  0.6s ease 0.2s;
}
#header .hNavi li:nth-child(6) a:before,
#header .hNavi li:nth-child(7) a:before{
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all  0.8s ease;
}
#header .hNavi li:nth-child(6) a:hover:before,
#header .hNavi li:nth-child(7) a:hover:before{
-webkit-transition: all 0.8s ease 0.2s;
-moz-transition: all 0.8s ease 0.2s;
-o-transition: all 0.8s ease 0.2s;
transition: all  0.8s ease 0.2s;
}
#header .hNavi li a:hover:before{
margin-left:100%;
}
#header .hNavi li a .txt{
position:relative;
z-index:10;
}
#header .hLink{
border-bottom:1px solid #ff5abe;
border-left:1px solid #ff5abe;
border-right:1px solid #ff5abe;
position:absolute;
top:0;
right:2%;
height:65px;
padding: 0 20px 0 30px;
}
@media screen and (max-width:1210px){
#header .hLink{
right:0;
padding: 0 0px 0 10px;
}
}
#header .hLink .links li{
display:inline;
float:left;
margin-right:20px;
font-style:86%;
font-weight:bold;
line-height:65px;
}
@media screen and (max-width:1210px){
#header .hLink .links li{
margin-right:10px;
}
}
#header .hLink .sns{
margin-top:12px;
}
#header .hLink .sns li{
display:inline;
float:left;
margin-right:10px;
font-style:86%;
font-weight:bold;
}
#header .hLink .links a{
	position:relative;	
}
#header .hLink .links a:after{
position:absolute;
bottom:0;
left:0;
width:0;
height:1px;
background:#ff5abe;
content:"";
display:block;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
#header .hLink .links a:hover:after{
width:100%;
}
#header .hLink .sns li .svg-box{
width:18px;
height:18px;
}
#header .hLink .sns li .svg-box:hover .hover-bg.twitter{
fill:#ff5abe;
transition: fill 0.6s linear 0.3s;
}
#header .hLink .sns li .svg-box:hover .hover-bg.insta{
fill:#ff5abe;
transition: fill 0.6s linear 0.3s;
}
#header .hLink .sns li .svg-box:hover .hover-bg.line{
fill:#ff5abe;
transition: fill 0.6s linear 0.3s;
}
/*---------------------------------------*/
/* fix-online */
/*---------------------------------------*/
#fix-online{
position:fixed;
top:50%;
/* margin-top:-114px; */
/* margin-top:-15.5px; */
margin-top:-84.5px;
right:0;
width:5%;
height:1em;
z-index:10000;
font-size:143%;
line-height:1;
white-space: nowrap;
-webkit-transform: translateY(0) rotate(90deg);
transform: translateY(0) rotate(90deg);
}
@media screen and (max-width:640px){
#fix-online{
width:10%;
font-size:11pt;
margin-top:-70.5px;
}
}
#fix-online a{
position:relative;
}
#fix-online a:after {
content: attr(data-txt);
position: absolute;
top:2px;
left:0;
opacity:0;
color: #fff;
background:#ff5abe;
-webkit-transition:opacity 0.3s ease 0.1s;
-moz-transition:opacity 0.3s ease 0.1s;
-o-transition:opacity 0.3s ease 0.1s;
transition:opacity  0.3s ease 0.1s;
padding:2px 0;
font-size:80%;
text-align:center;
}
#fix-online a.contact-fix:after{
left:-16px;
}
#fix-online a.shop-fix:after{
/*left:15px;*/
left:-5px;
}
#fix-online a:hover:after {
opacity:1;
}
/*---------------------------------------*/
/* fix-sns */
/*---------------------------------------*/
#fix-sns{
position:fixed;
top:50%;
margin-top:-46px;
left:0;
width:5%;
z-index:10000;
}
@media screen and (max-width:640px){
#fix-sns{
width:10%;
}
}
/* アイコン動き共通 */
.svg-box {
width:25px;
height:25px;
margin:10px auto;
text-align:center;
}
.hover{
stroke:#666;
stroke-width:1;
stroke-dashoffset:400;
stroke-dasharray: 400;
transition: stroke-dashoffset 0.6s linear;
stroke-linejoin:round;
fill:none;
}
.svg-box:hover .hover {
stroke-dashoffset:0;
transition: stroke-dashoffset 2.5s linear;
}
.hover-bg{
fill:#ddd;
transition: fill 0.6s linear;
stroke:none;
}
.no-scroll .hover-bg{
fill:#fff;
}
.svg-box:hover .hover-bg.twitter{
fill:#00DAFF;
transition: fill 0.6s linear 0.3s;
}
.svg-box:hover .hover-bg.insta{
fill:#003470;
transition: fill 0.6s linear 0.3s;
}
.svg-box:hover .hover-bg.line{
fill:#00c402;
transition: fill 0.6s linear 0.3s;
}
.svg-box:hover .hover-bg.map{
fill:#CE0003;
transition: fill 0.6s linear 0.3s;
}
/*---------------------------------------*/
/* video_wrapper */
/*---------------------------------------*/
#topArea{
position:relative;
margin-top:66px;
}
@media screen and (max-width:980px){
#topArea{
margin-top:0;
}
}
#visual{
padding: 0;
position: relative;
width:100%;
margin: -1px auto 0;
background:url(../images/common/bg-movie.jpg) no-repeat center center;
background-size:cover;
}
.visual_contents {
background: rgba(0, 0, 0, 0) url(../images/common/dot-keyvisual.png) repeat scroll 0 0;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:100;
}
.visual_contents.bg-dot{
-webkit-animation: bgscroll 25s linear infinite;
animation: bgscroll 25s linear infinite;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.visual_contents .scroll{
position:absolute;
bottom:9%;
left:0;
width:100%;
text-align:center;
color:#fff;
}
.visual_contents .ttl{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
color:#fff;
margin-top:-0.5em;
line-height:1;
font-size:536%;
}
@media screen and (max-width:980px){
.visual_contents .ttl{
font-size:350%;
}
}
.visual_contents .scroll .arrow{
border-left:2px solid #fff;
border-bottom:2px solid #fff;
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
margin-top:-1em;
}
#visual #keyvisual_wrapper{
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
position: relative; 
padding-top: 56.4%;
}
#visual #keyvisual_wrapper #keyvisual{
margin: 0 auto;
padding: 0;
vertical-align: bottom;
width: 100%;
position: absolute;
height: 100%;
top: 0; 
}
#topArea #mask{
position:absolute;
top:0;
left:0;
width:100%;
z-index: 11;
}
#topArea #mask img{
width:100%;
height:auto;
}
#topArea .cotton-link{
position:absolute;
right:17%;
bottom:87.6%;
width:20.73%;
z-index:12;
}
#topArea .sweets-link{
position:absolute;
left:18.6%;
bottom:6.1%;
width:16.86%;
z-index:12;
}
#topArea .cakepop-link{
position:absolute;
right:22.4%;
bottom:6.1%;
width:9.4%;
z-index:12;
}
#topArea .cotton-link a,
#topArea .sweets-link a,
#topArea .cakepop-link a{
display:block;
}
#topArea .cotton-link img,
#topArea .sweets-link img,
#topArea .cakepop-link img{
width:100%;
height:auto;
bottom:0;
}
#topArea .logo{
position:absolute;
top:5%;
left:50%;
font-size:0;
z-index:13;
}
#topArea .logo .icon-logo{
font-size:138px;
margin-left:-69px;
color:#ff5cb0;
}
@media screen and (max-width:980px){
#topArea .logo .icon-logo{
font-size:86px;
margin-left:-43px;
}
}
.shopinfo{
width:90%;
margin:0 auto;
text-align:center;
z-index:13;
font-size:93%;
letter-spacing:1px;
position:relative;
}
@media screen and (max-width:980px){
.shopinfo{
letter-spacing:0;
margin:30px auto;
}
}
@media screen and (max-width:640px){
.shopinfo{
margin:40px auto;
font-size:9pt;
}
}
.shopinfo a{
margin-right:15px;
}
@media screen and (max-width:640px){
.shopinfo a{
margin-right:0;
display:block;
}
.shopinfo p{
margin-bottom:10px;
}
}
/*---------------------------------------*/
/* sp-topArea */
/*---------------------------------------*/
#sp-topArea .bg-header{
background:url(../images/common/bg-header.png) repeat-x bottom center;
background-size:640px;
width:100%;
height:55px;
position:fixed;
top:0;
left:0;
z-index:100;
}
#sp-topArea .cover-r{
position:fixed;
top:0;
right:0;
z-index:100;
background:#fff;
width:51px;
height:51px;
border-bottom-left-radius:100%;
}
#sp-topArea .cover-l{
position:fixed;
top:0;
left:0;
z-index:100;
background:#fff;
width:51px;
height:51px;
border-bottom-right-radius:100%;
}
#sp-topArea .logo{
position:fixed;
top:10px;
left:50%;
font-size:0;
z-index:100;
}
#sp-topArea .logo .icon-logo{
font-size:46px;
margin-left:-23px;
color:rgba(255,255,255,0);
}
#sp-topArea #visual-sp{
position:relative;
width:100%;
margin-top:45px;
}
#sp-topArea #visual-sp img{
width:100%;
height:auto;
}
#sp-topArea #visual-sp .ttl{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
margin-top:-0.9em;
color:#fff;
font-size:25pt;
}
#sp-topArea #visual-sp .dot-keyvisual{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/common/dot-keyvisual.png) repeat scroll 0 0;
}
/*---------------------------------------*/
/* #snsArea */
/*---------------------------------------*/
#snsArea .blockLeft,
#snsArea .blockRight{
width:98%;
box-sizing:border-box;
height:900px;
padding-top:20px;
}
#snsArea .blockLeft{
margin:0 1% 0 4%;
}
#snsArea .blockRight{
margin:0 1%;
}
@media screen and (max-width:980px){
#snsArea .blockLeft,
#snsArea .blockRight{
float:none;
width:100%;
margin:0 auto;
}
#snsArea .blockLeft{
margin:0 0 35px;
}
#snsArea .blockRight{
margin:0;
height:auto;
}
}
iframe#twitter-widget-0{
width:94% !important;
margin:0 3% !important;
}
#snsArea .ttl{
width:90%;
margin:0 auto;
border-bottom:1px solid #e2e9ec;
font-size:157%;
letter-spacing:0.15em;
position:relative;
}
#snsArea .ttl .more{
position:absolute;
bottom:0;
right:0;
font-size:64%;
}
.instagram{
width:90%;
margin:15px auto 0;
}
.instagram .instagram-placeholder{
display:inline;
float:left;
height:260px;
width:260px;
margin:0 1% 2px;
overflow: hidden;
}
@media screen and (max-width:980px){
.instagram .instagram-placeholder{
height:36vw;
width:36vw;
margin:0 2vw 2px;
}
}
.instagram .instagram-placeholder img{
width:100%;
height:auto;
}
/*---------------------------------------*/
/* brandArea */
/*---------------------------------------*/
.brandArea{
padding:90px 0;
border-top:1px solid #ff5abd;
color:#ff5abd;
text-align:center;
}
@media screen and (max-width:640px){
.brandArea{
padding:30px 0;
}
}
.brandAreaInner{
display:inline-block;
}
.brandAreaInner .ttl{
font-size:157%;
text-align:center;
font-weight:bold;
letter-spacing:0.15em;
margin-bottom:50px;
}
@media screen and (max-width:640px){
.brandAreaInner .ttl{
margin-bottom:20px;
}
}
.brandAreaInner .blockLeft{
margin:0 25px;
width:auto;
text-align:left;
}
@media screen and (max-width:980px){
.brandAreaInner .blockLeft{
margin:0 15px;
}
}
.brandAreaInner .blockLeft:last-child{
margin-right:0;
}
@media screen and (max-width:767px){
.brandAreaInner .blockLeft{
width:230px;
margin:0 auto 20px;
float:none;
}
}
.brandAreaInner .brandContent{
position:relative;
min-height:48px;
}
.brandAreaInner .brandContent .icon{
position:absolute;
top:0;
left:0;
font-size:48px;
}
.brandAreaInner .brandContent .note{
display:block;
margin-left:68px;
}
.brandAreaInner .brandContent .note span{
display:block;
}
.brandAreaInner .brandContent .note .en{
font-size:86%;
padding-top:5px;
}
@media screen and (max-width:640px){
.brandAreaInner .brandContent .note .en{
font-size:8pt;
padding-top: 7px;
}
}
.brandAreaInner .brandContent .note .jp{
font-size:71%;
}
@media screen and (max-width:640px){
.brandAreaInner .brandContent .note .jp{
font-size:7pt;
}
}
/*---------------------------------------*/
/* fix-long */
/*---------------------------------------*/
.fix-long{
position:fixed;
z-index:999;
top:50%;
right:15px;
margin-top:-120px;
width:138px;
}
@media screen and (max-width:640px){
.fix-long{
margin-top:-70px;
width:80px;
right:7px;
}
}
.fix-long img{
width:100%;
height:auto;
}
/*---------------------------------------*/
/* footer */
/*---------------------------------------*/
#footer .gotop{
font-size:129%;
text-align:center;
line-height:0.5;
letter-spacing:1px;
margin-bottom:20px;
}
@media screen and (max-width:640px){
#footer .gotop{
font-size:11pt;
}
}
#footer .gotop a{
display:block;
width:105px;
margin:0 auto;
}
#footer .copyright{
margin-bottom:50px;
font-size:79%;
color:#ff5abe;
text-align:center;
letter-spacing:1px;
}
@media screen and (max-width:640px){
#footer .copyright{
font-size:7pt;
letter-spacing:0px;
}
}
/*---------------------------------------*/
/* layout */
/*---------------------------------------*/
#container{
margin:100px 0;
}
@media screen and (max-width:640px){
#container{
margin:50px 0;
}
}
.blockLeft{
float:left;
}
.blockRight{
float:right;
}
.txtRight{
text-align:right;
}