@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}
a:hover img{
opacity: 0.6;
}

/*====================
フォント読み込み
====================*/
@font-face {
font-family: 'Mplus-Rounded';
font-weight: 100;
src: url(/sweets/candy_gum/poifull/font/rounded-x-mplus-1p-regular.woff)format('woff');
}

/*====================
basic
====================*/
#all_wrap{
box-sizing: border-box;
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
img{
max-width: 100%;
height: auto;
vertical-align: bottom;/*-webkit-backface-visibility: hidden;*/
}
.animate{
opacity: 1;
}
.hidden{
display: none;
}

/*====================
コンテンツ
====================*/
#content_wrap{
position: relative;
overflow: hidden;
background: #ffd6df; /*箱背景色*/
/*background: #ee92b7; 大粒背景色*/
color: #2c2c2c;
font-size: 3.4vw;;
line-height: 1.7;
letter-spacing: 0.1em;
-webkit-font-smoothing: antialiased; /*webフォントアンチエイリアス*/
}
#content_wrap > section{
/*text-align: center;*/
}

/* ▽ SP ▽======================================================================================================================================================== */
/*====================
base
====================*/
.inner{
text-align: center;
padding: 0 7.5vw;
}
#content_wrap p{
transform: rotate(0.05deg);
font-family: 'Mplus-Rounded';
text-align: left;
}

/*====================
ローディング
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #ee92b7;
}
#loading img{
width: 220px;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 110px);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}
@-moz-keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}
@keyframes blink{
0%{opacity:0;}
90%{opacity:1;}
100%{opacity:1;}
}

/*====================
ヘッダー
====================*/
#poifull_nav{
width: 100%;
background: #fff;
padding: 3vw 0 2vw;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#poifull_nav:after{
content: ""!important;
display: inline-block;
background: url("/sweets/candy_gum/poifull/images/wave.png") repeat-x;
height: 2.5vw;
width: 100%;
background-size: contain;
position: absolute;
bottom: -2.5vw;
left: 0;
}
#poifull_nav .inner{
margin: 0 auto;
padding: 0 5vw;
}
#poifull_nav h1{
width: 31vw;
padding-top: 1vw;
}
#poifull_nav nav ul{
display: flex;
justify-content: space-between;
align-items: center;
}
#poifull_nav nav li:nth-of-type(1){
margin-right: 3vw;
}
#poifull_nav nav li:nth-child(3){
text-align: right;
}
#poifull_nav nav li:not(:first-of-type) img{
width: 80%;
}

/*====================
お知らせ
====================*/
.info_box {
position: relative;
margin: 0 15px 30px;
padding: 6px 10px 6px;
border: solid 3px #e62388;
background: #fff;
}
.info_box .box-title {
position: absolute;
display: inline-block;
top: -35px;
left: -3px;
padding: 4px 10px;
/*height: 4vw;*/
line-height: 1.5;
background: #e62388;
color: #ffffff;
font-weight: bold;
border-radius: 10px 10px 0 0;
}
.info_box p {
margin: 0; 
padding: 0;
}
.info_box a{
color: #e62388;
}
.info_box a:hover{
opacity: 0.6;
}
.info_box li{
border-bottom: dashed 1px #e62388;
padding: 9px 0 6px;
}
.info_box li:last-child{
border-bottom: none;
}

/*====================
ポイフルCMPバナー掲載
====================*/
.cmp{
padding: 0 4vw 8vw
}

/*====================
商品紹介
====================*/
#nomal_poifull{
background: #ffd6df;
padding: 24vw 0 5vw;
}
#nomal_poifull li{
margin-bottom: 5vw;
}
.nomal_list h2 img{
width: 78vw;
}
.txt_nomal li:first-child{
text-align: left;
}
.txt_nomal li:first-child img{
width: 75vw;
}

/*====================
フッターコンテンツ
====================*/
#poifull_footer{
padding: 0 0 20vw;
font-size: 0;
text-align: center;
position: relative;
}
#poifull_footer .inner{
padding: 0;
}
.sns {
display: flex;
justify-content: center;
}
.sns li {
width: 12vw;
}
.sns li:not(:first-child) {
margin-left: 6vw;
}
.cmp_power{
padding: 0 4vw 5vw
}
.gummisite_list{
padding: 10vw 13vw 0;
}
.gummisite_list li:not(:first-child){
margin-top: 6.2vw;
}

/*===================
ページトップ
====================*/
.btn_pagetop{
width: 12vw;
display: block;
position: absolute;
bottom: 4vw !important;
right: 3vw;
z-index: 100;
}

/* ～640px For SP
====================================================*/
@media screen and (max-width: 640px){
/*====================
base
====================*/
.isPC{
display:none;
}
}

/* 641px～ For PC
====================================================*/
@media screen and (min-width: 641px), print{
/*====================
base
====================*/
.isSP{
display: none;
}
body{
min-width: 950px;
}
#all_wrap{
line-height: 1.6;
}
.inner{
width: 950px;
margin: 0 auto;
padding: 0;
}
.comment{
font-size: 1.4rem;
}
#content_wrap{
font-size: 18px;
}

/* ▽ PC ▽======================================================================================================================================================== */
/*====================
ヘッダー
====================*/
#poifull_nav{
padding: 12px 0 6px;
}
#poifull_nav:after{
height: 18px;
background-size: contain;
bottom: -18px;
}
#poifull_nav .inner{
width: 900px;
margin: 0 auto;
padding: 0;
}
#poifull_nav h1 {
width: 200px;
padding: 8px 0 2px;
line-height: 0;
}
#poifull_nav nav li:nth-of-type(1){
margin: 0;
}
#poifull_nav nav li:nth-child(2){
margin-left: 120px;
}
#poifull_nav nav li:not(:first-of-type) img{
width: 100%;
}

/*====================
お知らせ
====================*/
.info_box {
margin: 0 38px 48px;
padding: 4px 10px 4px;
border: solid 3px #e62388;
}
.info_box .box-title {
top: -34px;
left: -3px;
padding: 4px 12px 0px;
height: 30px;
border-radius: 8px 8px 0 0;
}
.info_box li{
padding: 9px 0 6px;
}

/*====================
ポイフルCMPバナー掲載
====================*/
.cmp{
width: 870px;
margin: 0 auto;
padding: 0 0 60px;
}

/*====================
商品紹介
====================*/
#nomal_poifull{
padding: 150px 0 0; /*ポイフルCMPバナー掲載時*/
/*padding: 180px 0 60px; 掲載順：上の時*/
/*padding: 84px 0; 掲載順：下の時*/
}
#nomal_poifull li{
margin-bottom: 30px;
}
.nomal_list{
display: flex;
justify-content: space-around;
position: relative;
margin-bottom: 12px;
}
.nomal_list li{
/*width: 300px; 3つのとき*/
width: 420px;
}
.nomal_list h2 img {
/*width: 275px; 3つのとき*/
width: 410px;
}
.txt_nomal li:first-child img{
width: 380px;
padding-left: 26px;
}
.txt_nomal li:nth-child(2){
padding: 0 26px;
}
.icon_new:after{
top: -62px;
left: 29px;
width: 106px;
height: 106px;
}

/*====================
フッターコンテンツ
====================*/
#poifull_footer{
padding: 0 0 50px;
}
#poifull_footer .inner{
width: 840px;
margin: 0 auto;
padding: 0;
}
.sns li {
width: 70px;
}
.sns li:not(:first-child) {
margin-left: 50px;
}
.cmp_power{
width: 870px;
margin: 0 auto;
padding: 0 0 40px;
}
.gummisite_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 50px 0 0;
}
.gummisite_list li{
width: 400px;
}
.gummisite_list li:not(:first-child){
margin-top: 0;
}
.gummisite_list li:last-child{
margin-top: 40px;
}
/*バナー３つ時*/
/*.gummisite_list li:last-child{
margin-top: 40px;
}*/
/*バナー4つ時*/
.gummisite_list li:nth-child(n+3){
margin-top: 40px;
}
.gummisite_list li img{
width: 400px;
}

/*===================
ページトップ
====================*/
.btn_pagetop{
width: 70px;
display: block;
position: absolute;
bottom: 40px !important;
right: 30px;
z-index: 100;
}
}