@charset "utf-8";
/*--------------------------------o----
　pucca（プッカ） ＜PC用＞ index.css
--------------------------------------*/
/*FFでアニメーション時に画像が1pxずれるバグに対応*/
img{
box-shadow: #000 0 0 0;
}
img{
margin: 0;
padding: 0;
}

/*reset.cssの影響を調整*/
div:after, dl:after, ul:after{
content: none;
}
img{
-webkit-backface-visibility: hidden;
}
*:focus{
outline: none;
}

/* ------ ▽ 共通 ▽ ------ */
#cont_wrap{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
min-width: 950px;
font-size: 14px;
color: #231815;
-webkit-text-size-adjust: 100%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
position: relative;
letter-spacing: 1px;
}
#cont_wrap .btn_pagetop{
right: 10px;
z-index: 50;
}
#cont_wrap .btn_pagetop img{
width: 130px;
}
#cont_wrap .btn_pagetop:hover{
opacity: 0.8 !important;
}
.moveit{
visibility: hidden;
}

/* ------ ▽ トップ ▽ ------ */
#pucca_nav{
background: url(/sweets/chocolate/pucca/common/images/bg_header.png);
background-position: left top;
background-repeat: repeat-x;
width: 100%;
height: 150px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#pucca_nav .inner{
position: relative;
width: 937px;
margin: 0 auto;
}
#pucca_nav h1{
padding-top: 8px;
}
#pucca_nav nav{
position: absolute;
top: 33px;
right: 4px;
}
#pucca_nav nav ul{
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
height: 45px;
-webkit-align-items: center; /*safari*/
align-items: center;
}
#pucca_nav nav ul li{
margin-left: 18px;
}
#pucca_nav nav li:hover{
opacity: 0.6 !important;
}
#mv_wrap{
height: 624px;
background: #ffe47a;
position: relative;
/*border-bottom:  32px solid #90c31f; オリパラバナー、テキストなし*/
border-bottom:  160px solid #90c31f; /*オリパラバナー、テキストあり*/
}
#mv_wrap > *{
position: absolute;
}
#mv_wrap .illust_back{
top: 154px;
left: calc(50% - 629px);
}
#mv_wrap .illust_front{
top: 327px;
left: calc(50% - 485px);
z-index: 10;
}
#mv_wrap .bg_grass{
background: url(/sweets/chocolate/pucca/images/bg_grass.png);
background-position: left bottom;
background-repeat: repeat-x;
width: 100%;
height: 130px;
top: 494px;
}
#mv_wrap h2{
top: 166px;
right: calc(50% - 450px);
z-index: 10;
}
#mv_wrap .bom_lucky{
position: absolute;
top: 294px;
right: calc(50% - 221px);
z-index: 10;
}
#mv_wrap .egg_pucca{
position: absolute;
top: 154px;
right: calc(50% - 224px);
z-index: 10;
}
#mv_wrap .mv_chara{
top: 430px;
left: calc(50% - 153px);	
width: 372px;
height: 171px;
}
#mv_wrap .mv_chara li:nth-child(2){
position: absolute;
top: 4px;
right: 0;
}
#mv_wrap .olympic_txt{
bottom: -7px;
right: calc(50% - 440px);
z-index: 10;
}
#mv_wrap .cmp_power{
bottom: -140px;
left: calc(50% - 425px);
z-index: 10;
}

/* ------ ▽ 商品紹介 ▽ ------ */
#product_wrap{
background: #90c31f;
position: relative;
}
#product_wrap .inner{
width: 870px;
margin: 0 auto;
padding-top: 40px;
text-align: center;
}
#product_wrap .base_product{
height: 719px;
background: url(/sweets/chocolate/pucca/images/base_product.png) no-repeat;
margin: 0 auto;
padding-top: 53px;
position: relative;
}
#product_wrap .base_product h3{
margin-bottom: 28px;
}
#product_wrap .pkg{
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
-webkit-align-items: center; /*safari*/
align-items: center;
width: 432px;
margin: 38px auto 0;
}
#product_wrap .pkg li{
margin-left: 37px;
}
#product_wrap .pkg li img{
width: 163px;
}
#product_wrap .point{
position: absolute;
top: 224px;
left: -18px;	
width: 888px;
height: 512px;
}
#product_wrap .point li:first-child{
position: absolute;
top: 30px;
left: 0;
}
#product_wrap .point li:nth-child(2){
position: absolute;
top: 0;
right: 0;
}
#product_wrap .point li:nth-child(3){
position: absolute;
bottom: 24px;
left: 83px;
}
#product_wrap .point li:nth-child(4){
position: absolute;
bottom: 0;
right: 83px;
}

/*====================
店舗検索バナー
====================*/
.bnr_storesmap{
width: 440px;
margin: 40px auto 10px;
}

/* ------ ▽ プッカからの挑戦状 ▽ ------ */
#challenge_wrap{
background:  #3e8bce;
position: relative;
padding-bottom: 20px;
}
#challenge_wrap::before{
content: " ";
display: block;
background: url(/sweets/chocolate/pucca/images/bg_green_lr.png) center no-repeat;
height: 220px;
width: 100%;
}
.challenge_chara{
position: absolute;
bottom: -36px;
left: 238px;
z-index: 40;
}
.illust_challenge{
position: absolute;
bottom: -17px;
right: -22px;
z-index: 40;
}
.bg_challenge_l{
position: absolute;
top: 436px;
left: calc(50% - 820px);
}
.bg_challenge_r{
position: absolute;
top: 262px;
right: calc(50% - 941px);
}
#challenge_wrap .inner{
width: 880px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
position: relative;
}
#challenge_wrap h3{
margin-bottom: 17px;
}
.challenge_nav{
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
-webkit-justify-content: center; /*safari*/
justify-content: center;
-webkit-align-items: center; /*safari*/
align-items: center;
margin-bottom: 34px;
}
.challenge_nav li{
width: 220px;
text-align: center;
position: relative;
-ms-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.challenge_nav li:hover{
opacity: 0.8 !important;
cursor: pointer;
}
.challenge_nav li.active:before{
content: url(/sweets/chocolate/pucca/images/challenge_nav_active.png);
position: absolute;
top: 20px;
right: 18px;
z-index: 10;
}
.challenge_box_wrap{
background: url(/sweets/chocolate/pucca/images/base_challenge.png) no-repeat center top;
margin: 0 auto;
padding-top: 42px;
position: relative;
height: 686px;
}
.challenge_box{
display: -ms-flexbox !important; /*IE10*/
display: -webkit-flex !important; /*safari*/
display: flex !important;
-webkit-justify-content: center; /*safari*/
justify-content: center;
-webkit-align-items: center; /*safari*/
align-items: center;
}

/* ------ ▽ プッカの仲間たち ▽ ------ */
#character_wrap{
height: 1360px;
background: url(/sweets/chocolate/pucca/common/images/bg_character.png), #fee377;
background-repeat: repeat, repeat;
background-position: center top, center center;
position: relative;
}
#character_wrap::before{
content: " ";
display: block;
background: url(/sweets/chocolate/pucca/images/bg_lightblue.png) center no-repeat;
height: 220px;
width: 100%;
}
#character_wrap .inner{
width: 880px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
#character_wrap h3{
margin-bottom: 33px;
}
.chara_nav{
display: -ms-flexbox; /*IE10*/
display: -webkit-flex; /*safari*/
display: flex;
-webkit-justify-content: center; /*safari*/
justify-content: center;
-webkit-align-items: center; /*safari*/
align-items: center;
height: 114px;
margin-bottom: 15px;
}
.chara_nav li{
width: 114px;
text-align: center;
position: relative;
-ms-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.chara_nav li:hover{
opacity: 0.8 !important;
cursor: pointer;
}
.chara_nav li img{
width: 94px;
}
.chara_nav li.active img{
width: 110px;
}
.chara_nav li.active:before{
content: url(/sweets/chocolate/pucca/common/images/chara_nav_active.png);
position: absolute;
bottom: -30px;
left: 43px;
}
.chara_box_wrap{
background: url(/sweets/chocolate/pucca/images/base_character.png) no-repeat center top;
margin: 0 auto;
padding: 0;
position: relative;
height: 628px;
}
.chara_box{
display: -ms-flexbox !important; /*IE10*/
display: -webkit-flex !important; /*safari*/
display: flex !important;
-webkit-justify-content: center; /*safari*/
justify-content: center;
-webkit-align-items: center; /*safari*/
align-items: center;
}
.chara_box .profile{
width: 495px;
}
.chara_box .profile img{
margin: 0 auto;
}
.chara_box .profile .chara_img{
margin-bottom: 10px;
}
.chara_box .comic_area{
width: 353px;
padding-top: 20px;
}
.chara_box .comic_area img{
width: 201px;
height: 572px;
margin: 0 auto;
}

/* ------ ▽ フッター ▽ ------ */
#footer_wrap{
height: 87px;
background: #004ba0;
position: relative;
}
#footer_wrap::before{
content: " ";
display: block;
background: url(/sweets/chocolate/pucca/images/bg_blue.png) center no-repeat;
height: 220px;
width: 100%;
position: absolute;
left: 0;
top: -220px;
}

/* ------ ▽ SNSボタン ▽ ------ */
#footer_wrap .sns_wrap{
width: 210px;
height: 90px;
background: #ffffff;
border-radius: 50px;
margin: 0 auto;
padding: 0;
box-shadow: 4px 7px rgba(0, 0, 0, .2);
position: absolute;
top: -56px;
left: 0;
right: 0;
z-index: 50;
}
#footer_wrap .sns_wrap li:first-child{
position: absolute;
top: 14px;
left: 14px;
}
#footer_wrap .sns_wrap li:nth-child(2){
position: absolute;
top: 14px;
right: 14px;
}
#footer_wrap .sns_wrap li img{
width: 64px;
}
#footer_wrap .sns_wrap li:hover{
opacity: 0.6 !important;
}

/*====================
slick-theme.css
====================*/
/* Arrows　プッカからの挑戦状用 */
.prev-arrow, .next-arrow {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 385px;
	display: block;
	width: 94px;
	height: 97px;
	padding: 0;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	z-index: 1;
}
.prev-arrow:hover, .prev-arrow:focus, .next-arrow:hover, .next-arrow:focus {
	color: transparent;
	outline: none;
}
.prev-arrow:hover:before, .prev-arrow:focus:before, .next-arrow:hover:before, .next-arrow:focus:before {
	opacity: 1;
}
.prev-arrow.slick-disabled:before, .next-arrow.slick-disabled:before {
	opacity: .25;
}
.prev-arrow:before, .next-arrow:before {
	font-size: 20px;
	line-height: 1;
	opacity: .75;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.prev-arrow {
	left: -57px;
	background: url(/sweets/chocolate/pucca/common/images/btn_prev.png);
	background-size: 94px 97px;
}
[dir='rtl'] .prev-arrow {
	right: -55px;
	left: auto;
}
.next-arrow {
	right: -55px;
	background: url(/sweets/chocolate/pucca/common/images/btn_next.png);
		background-size: 94px 97px;
}
[dir='rtl'] .next-arrow {
	right: auto;
	left: -57px;
}

/* Arrows プッカの仲間たち用 */
.slick-prev, .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 300px;
	display: block;
	width: 94px;
	height: 97px;
	padding: 0;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	z-index: 1;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
	color: transparent;
	outline: none;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
	opacity: 1;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
	opacity: .25;
}
.slick-prev:before, .slick-next:before {
	font-size: 20px;
	line-height: 1;
	opacity: .75;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
	left: -57px;
	background: url(/sweets/chocolate/pucca/common/images/btn_prev.png);
	background-size: 94px 97px;
}
[dir='rtl'] .slick-prev {
	right: -55px;
	left: auto;
}
.slick-next {
	right: -55px;
	background: url(/sweets/chocolate/pucca/common/images/btn_next.png);
		background-size: 94px 97px;
}
[dir='rtl'] .slick-next {
	right: auto;
	left: -57px;
}