@import url("default.css");

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}

body { font-size: .15rem; line-height: 1.6;}

@media (min-width: 768px) {
    .sp { display: none!important;}
}
@media (max-width: 767px) {
    .pc { display: none!important;}
}
.mgt105 { margin-top: 1.05rem;}
.mw430 { max-width: 4.3rem; margin: auto;}


header .menu-trg-area { width: 50px; height: 50px; position: absolute; top: 0; bottom: 0; right: 4px; background: none; margin: auto;}
header .menu-trigger,
header .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
header .menu-trigger { position: absolute; right: 12px; top: 0; width: 25px; height: 37px; z-index: 2;}
header .menu-trigger span { position: absolute; left: 0; width: 100%; height: 3px; background-color: #000;}
header .menu-trigger span:nth-of-type(1) { top: 15px;}
header .menu-trigger span:nth-of-type(2) { top: 24.4px;}
header .menu-trigger span:nth-of-type(3) { bottom: 0;}
header .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top: 5px;}
header .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards;}
header .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(45deg); transform: translateY(-20px) rotate(45deg); bottom: -11px;}
@media (max-width: 767px) {
    header .menu-trg-area { display: block!important;}
}

.ai-center { align-items: center;}
.scroll { position: absolute; left: 0; right: 0; bottom: 65px; margin: auto; z-index: 1; text-align: center;}
.fixed-frame { position: absolute; left: 110px; top: 0; z-index: 999;}
.top_btn { display: inline-block; position: fixed; right: -2px; bottom: .2rem; z-index: 15;}
header { background-image: url(../images/bg.png); background-size: cover; background-position: center; position: relative; display: -ms-flex; display: flex; padding-top: .4rem;}
header .flex { width: 100%;}
header .logo { position: relative; top: -50px; left: -10px; padding-left: 20px; padding-right: 20px;}
header .wrapper { max-width: 1050px; margin: auto; position: relative; z-index: 1; text-align: center;}
header .wrapper .col-sm-3 { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%;}
header .wrapper .col-sm-6 { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
header .wrapper .c3 { padding-top: .54rem;}
header .wrapper .t1 { margin-top: .3rem;}
header .wrapper .t2 { margin-top: .3rem;}
header .wrapper .icon-1 { width: 90px; -webkit-animation:fuwafuwa1 3s infinite linear alternate; animation:fuwafuwa1 3s infinite linear alternate;}
header .wrapper .icon-2 { width: 55px; -webkit-animation:fuwafuwa2 3s infinite linear alternate; animation:fuwafuwa2 3s infinite linear alternate;}
header .wrapper .icon-3 { position: relative; margin-top: .4rem; width: 55px; -webkit-animation:fuwafuwa3 4s infinite linear alternate; animation:fuwafuwa3 4s infinite linear alternate;}
header .wrapper .icon-4 { position: absolute; width: 10.4%; right: 12.3%; top: 18.5%; -webkit-animation:fuwafuwa4 6s infinite linear alternate; animation:fuwafuwa4 6s infinite linear alternate;}
header .wrapper .icon-5 { position: absolute; width: 10.4%; left: 12.3%; top: 10%; -webkit-animation:fuwafuwa4 6s infinite -2s linear alternate; animation:fuwafuwa4 6s infinite -2s linear alternate;}

footer { padding-top: .85rem; padding-bottom: .8rem;}

#content { padding-left: 16.8%; padding-right: 16.8%;}

.item-list { margin-left: -35px; margin-right: -35px;}
.item-list > li { padding-left: 35px; padding-right: 35px; margin-bottom: .66rem;}
.item-list > li > div { max-width: 160px; margin: auto; align-items: flex-end;}
.item-list > li > .item-img { margin-top: .16rem;}
.item-list > li > .colorname { margin-top: .275rem; border-bottom: 1px solid #62718d;}
.item-list > li > .colorname .candle { min-width: 52px; text-align: center; padding-bottom: .09rem;}
.item-list > li > .colorname .candlename { padding-left: .1rem; padding-right: .1rem; padding-bottom: .09rem; position: relative;}
.item-list > li > .colorname .candlename:before { content: ""; background: #62718d; height: .165rem; width: 1px; position: absolute; left: 0; bottom: 0;}
.item-list > li > .link-wrap { margin-top: .25rem;}
.item-list > li > .count { margin-bottom: .165rem; font-size: 0; line-height: 1; letter-spacing: 0;}
.item-list > li > .item-img img { height: 2.33rem; width: auto;}
.item-list > li > .colorname .candle img { height: .63rem!important; width: auto;}

a.link-btn { font-size: 0; line-height: 1; text-align: center; position: relative; border: 1px solid #d6562b; border-radius: 20px; display: block; max-width: 160px; width: 100%; margin: auto; padding: .08rem .15rem .085rem; transition: all .3s;}
a.link-btn .ungle { font-size: 0; line-height: 1; position: absolute; top: 0; right: .15rem; bottom: 0; margin: auto; display: inline-block; height: .1056rem;}
a.link-btn:hover { background:#d6562b;}
a.link-btn:hover .buy-1 { fill: #fff;}
a.link-btn:hover .ungle-1 { stroke: #fff;}

.fot-link { margin-top: .6rem;}
.fot-link li .link-btn { max-width: 2.75rem; padding: .15rem; border-radius: 30px;}
.fot-link li .link-btn:hover .fotlink-1,
.fot-link li .link-btn:hover .fotlink-2 { fill: #fff;}
.fot-link li:nth-child(2) .link-btn { border-color: #62718d; margin-top: .32rem;}
.fot-link li:nth-child(2) .link-btn:hover { background: #62718d;}
.fot-link li:nth-child(2) .link-btn .fotlink-2:hover { fill: #fff;}

.bottom-candle { padding-top: .17rem;}
.spec { max-width: 545px; margin: auto; margin-top: .48rem; border-bottom: 1px solid #757e7f;}
.spec h3 { font-size: 0; line-height: 1; border-top: 1px solid #757e7f; border-bottom: 1px solid #757e7f; padding-top: .0875rem; padding-bottom: .0773rem;}
.spec .row { text-align: center; padding-top: .195rem; padding-bottom: .195rem;}
.spec .row .col-md-6 { padding-top: .07rem; padding-bottom: .07rem;}
.spec .row .col-md-6:nth-child(1) { border-right: 1px solid #757e7f;}

@media (max-width: 1040px) {
    #content { padding-left: 50px; padding-right: 50px;}
}
@media (max-width: 991px) {
    .item-list { margin-left: -15px; margin-right: -15px;}
    .item-list > li { padding-left: 15px; padding-right: 15px;}
}

@media (max-width: 767px) {
    header { align-items: center;}
    .fixed-frame .top { height: calc(45vh - 140px); width: calc(100% - 40px); left: 20px; top: 20px; border-top: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff;}
    .fixed-frame .bottom { height: calc(45vh - 140px); width: calc(100% - 40px); left: 20px; bottom: 20px; border-bottom: 4px solid #fff; border-left: 4px solid #fff; border-right: 4px solid #fff;}
    .fixed-frame .left { left: 20px;}
    .fixed-frame .right { right: 20px;}
    .fixed-frame .label { left: 40px; width: 60px;}
    #mainImage { max-width: 800px; margin: auto; position: relative; z-index: 1;}
    #mainImage .icon-1 { position: absolute; width: 13.4%; left: -3%; top: 50%; -webkit-animation:fuwafuwa1 3s infinite linear alternate; animation:fuwafuwa1 3s infinite linear alternate;}
    #mainImage .icon-2 { position: absolute; width: 8%; right: 3%; top: 49%; -webkit-animation: fuwafuwa2 3s infinite linear alternate; animation: fuwafuwa2 3s infinite linear alternate;}
    #mainImage .icon-3 { position: absolute; width: 8%; right: -2%; top: 55.5%; -webkit-animation: fuwafuwa3 4s infinite linear alternate; animation: fuwafuwa3 4s infinite linear alternate;}
    #mainImage .icon-4 { position: absolute; width: 10.4%; right: 12.3%; top: 20.5%; -webkit-animation:fuwafuwa4 6s infinite linear alternate; animation:fuwafuwa4 6s infinite linear alternate;}
    #mainImage .icon-5 { position: absolute; width: 10.4%; left: 12.3%; top: 10%; -webkit-animation:fuwafuwa4 6s infinite -2s linear alternate; animation:fuwafuwa4 6s infinite -2s linear alternate;}
    .fixed-frame img { max-width: 50px; height: auto;}
    header { padding-top: 50px; background-image: url(../images/sp/sp_bg.png); height: 100vh;}
    header .logo { top: -35px;}
    .logo h1 img { max-width: 274px; margin: auto; display: block;}
    .sm-mgt15.text-center img { max-width: 220px; margin: auto; display: block;}
    .cake { max-width: 250px; margin: auto; display: block;}
    #mainImage .icon-1 { left: 4%; top: 39%;}
    #mainImage .icon-2 { right: 11%; top: 43%;}
    #mainImage .icon-3 { right: 3%; top: 48.5%;}
    #mainImage .icon-4 { right: 22.3%; top: 28.5%;}
    #mainImage .icon-5 { left: 20%; top: 18%;}
    #content { padding-left: 10px; padding-right: 10px;}
    .fixed-frame { left: 15px;}
    .top_btn img { height: 87px;}
    .candleFire img { height: 51.9px;}
    .fire-icon img { height: 56.21px; width: auto;}
    p.mgt50.sm-mgt25.parabase { margin-top: 55px!important; margin-bottom: 55px!important;}
    strong.d-block.text-center.mgt45 { margin-top: 47px!important;}
    .item-list > li > .colorname .candle { min-width: 46px;}
    .item-list > li > .colorname .candle img { height: 46px!important;}
    .item-list > li > .item-img img { height: 193px; width: auto;}
    .bottom-candle > .img-wrap img { max-width: 55px; height: auto;}
}

.item-list .col-md-3:first-child .candleFire { -webkit-animation:fire1 1.5s infinite linear alternate; animation:fire1 1.5s infinite linear alternate;}
.item-list .col-md-3:nth-child(2n) .candleFire { -webkit-animation:fire2 1.6s infinite linear alternate; animation:fire1 1.6s infinite linear alternate;}
.item-list .col-md-3:nth-child(3n) .candleFire { -webkit-animation:fire1 1.8s infinite linear alternate; animation:fire1 1.8s infinite linear alternate;}
.item-list .col-md-3:nth-child(5) .candleFire { -webkit-animation:fire2 1.4s infinite linear alternate; animation:fire1 1.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(5n) .candleFire { -webkit-animation:fire1 2s infinite linear alternate; animation:fire1 2s infinite linear alternate;}
.item-list .col-md-3:nth-child(7n) .candleFire { -webkit-animation:fire2 2.1s infinite linear alternate; animation:fire1 2.1s infinite linear alternate;}
.item-list .col-md-3:nth-child(11n) .candleFire { -webkit-animation:fire1 2.4s infinite linear alternate; animation:fire1 2.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(13) .candleFire { -webkit-animation:fire1 1.4s infinite linear alternate; animation:fire1 1.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(17) .candleFire { -webkit-animation:fire2 1.8s infinite linear alternate; animation:fire1 1.8s infinite linear alternate;}
.item-list .col-md-3:nth-child(19) .candleFire { -webkit-animation:fire1 1.3s infinite linear alternate; animation:fire1 1.3s infinite linear alternate;}

.item-list .col-md-3:first-child .candleFire img { -webkit-animation: trans-vertical 1.5s infinite linear alternate; animation: trans-vertical 1.5s infinite linear alternate;}
.item-list .col-md-3:nth-child(2n) .candleFire img { -webkit-animation: trans-vertical 1.6s infinite linear alternate; animation: trans-vertical 1.6s infinite linear alternate;}
.item-list .col-md-3:nth-child(3n) .candleFire img { -webkit-animation: trans-vertical 1.8s infinite linear alternate; animation: trans-vertical 1.8s infinite linear alternate;}
.item-list .col-md-3:nth-child(5) .candleFire img { -webkit-animation: trans-vertical 1.4s infinite linear alternate; animation: trans-vertical 1.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(5n) .candleFire img { -webkit-animation: trans-vertical 2s infinite linear alternate; animation: trans-vertical 2s infinite linear alternate;}
.item-list .col-md-3:nth-child(7n) .candleFire img { -webkit-animation: trans-vertical 2.1s infinite linear alternate; animation: trans-vertical 2.1s infinite linear alternate;}
.item-list .col-md-3:nth-child(11n) .candleFire img { -webkit-animation: trans-vertical 2.4s infinite linear alternate; animation: trans-vertical 2.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(13) .candleFire img { -webkit-animation: trans-vertical 1.4s infinite linear alternate; animation: trans-vertical 1.4s infinite linear alternate;}
.item-list .col-md-3:nth-child(17) .candleFire img { -webkit-animation: trans-vertical 1.8s infinite linear alternate; animation: trans-vertical 1.8s infinite linear alternate;}
.item-list .col-md-3:nth-child(19) .candleFire img { -webkit-animation: trans-vertical 1.3s infinite linear alternate; animation: trans-vertical 1.3s infinite linear alternate;}
.fire-icon { -webkit-animation:fire1 1.3s infinite linear alternate; animation:fire1 1.3s infinite linear alternate;}
.fire-icon img { -webkit-animation: trans-vertical 1.3s infinite linear alternate; animation: trans-vertical 1.3s infinite linear alternate;}
.bottom-candle .fire-icon { margin-bottom: 5px;}

.parabase { position: relative;}
.para1 { position: absolute; right: -1.8rem; top: -20px; bottom: 0; margin: auto;}
.para2 { position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
.para3 { position: absolute; right: -.531rem; top: 0; bottom: 0; margin: auto;}
.para4 { position: absolute; left: -.6rem; top: -30px; bottom: 0; margin: auto;}
.para5 { position: absolute; right: -1.05rem; top: -30px; bottom: 0; margin: auto;}
.para6 { position: absolute; left: -1.35rem; top: 17%; bottom: 0; margin: auto;}
.para7 { position: absolute; right: -1.53rem; top: 36%; bottom: 0; margin: auto;}
.para8 { position: absolute; left: -1.53rem; top: 58%; bottom: 0; margin: auto;}
.para9 { position: absolute; right: -1.55rem; top: 72%; bottom: 0; margin: auto;}
.para10 { position: absolute; left: -1.43rem; top: 90%; bottom: 0; margin: auto;}
@media (max-width:767px){
    p.mgt75.mgb45 { padding-top: 95px; padding-bottom: 45px; margin-top: 0!important; margin-bottom: 0!important;}
    .para1 { right: 0.2rem; top: 10px;}
    .para1 img { height: 1.22rem; width: auto;}
    .para2 { top: -80px;}
    .para2 img { height: .99312rem; width: auto;}
    .para3 { display: none;}
    .para4 { display: none;}
    .para5 { top: -110px; right: -20px;}
    .para5 img { height: 1.12rem; width: auto;}
    .para6 { top: 19%; left: -19px;}
    .para6 img { height: 69.6px; width: auto;}
    .para7 { top: 27.5%; right: -20px;}
    .para7 img { height: 98.6px; width: auto;}
    .para8 { top: 48%; left: -20px;}
    .para8 img { height: 95.56px; width: auto;}
    .para9 { right: -20px; top: 70%;}
    .para9 img { height: 58.48px; width: auto;}
    .para10 { top: 90%; left: -20px;}
    .para10 img { height: 82.859px; width: auto;}
}

/* scroll */
@keyframes key1 {
    0% {transform: translateY(0px);}
    100% {transform: translateY(-5px);}
}
@-webkit-keyframes key1 {
    0% {-webkit-transform: translateY(0px);}
    100% {-webkit-transform: translateY(-5px);}
}

/* 羊 */
@keyframes fuwafuwa1 {
    0% {transform:translate(0, 0) rotate(-5deg);}
    50% {transform:translate(0, -5px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(5deg);}
}
@-webkit-keyframes fuwafuwa1 {
    0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
    50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}
@-ms-keyframes fuwafuwa1 {
    0% {-ms-transform:translate(0, 0) rotate(-5deg);}
    50% {-ms-transform:translate(0, -5px) rotate(0deg);}
    100% {-ms-transform:translate(0, 0)rotate(5deg);}
}

/* 鳥1 */
@keyframes fuwafuwa2 {
    0% {transform:translate(0, 0) rotate(5deg);}
    50% {transform:translate(0, -5px) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(-5deg);}
}
@-webkit-keyframes fuwafuwa2 {
    0% {-webkit-transform:translate(0, 0) rotate(5deg);}
    50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0) rotate(-5deg);}
}
@-ms-keyframes fuwafuwa2 {
    0% {-ms-transform:translate(0, 0) rotate(5deg);}
    50% {-ms-transform:translate(0, -5px) rotate(0deg);}
    100% {-ms-transform:translate(0, 0) rotate(-5deg);}
}

/* 鳥2 */
@keyframes fuwafuwa3 {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -5px) rotate(0deg);}
    100% {transform:translate(0, 0) rotate(3deg);}
}
@-webkit-keyframes fuwafuwa3 {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0) rotate(3deg);}
}
@-ms-keyframes fuwafuwa3 {
    0% {-ms-transform:translate(0, 0) rotate(-3deg);}
    50% {-ms-transform:translate(0, -5px) rotate(0deg);}
    100% {-ms-transform:translate(0, 0) rotate(3deg);}
}

/* 風船1 */
@keyframes fuwafuwa4 {
    0% {transform:translate(0, 0) rotate(3deg);}
    50% {transform:translate(0, -10px) rotate(0);}
    100% {transform:translate(0, 0) rotate(-3deg);}
}
@-webkit-keyframes fuwafuwa4 {
    0% {-webkit-transform:translate(0, 0) rotate(3deg);}
    50% {-webkit-transform:translate(0, -10px) rotate(0);}
    100% {-webkit-transform:translate(0, 0) rotate(-3deg);}
}
@-ms-keyframes fuwafuwa4 {
    0% {-ms-transform:translate(0, 0) rotate(3deg);}
    50% {-ms-transform:translate(0, -10px) rotate(0);}
    100% {-ms-transform:translate(0, 0) rotate(-3deg);}
}


/* 炎 */
@keyframes fire1 {
    0% { -webkit-transform:translateX( -3px) rotate(-5deg);}
    100% { -webkit-transform:translateX( 3px) rotate(5deg);}
}
@-webkit-keyframes fire1 {
    0% { -webkit-transform:translateX( -3px) rotate(-5deg);}
    100% { -webkit-transform:translateX( 3px) rotate(5deg);}
}
@-ms-keyframes fire1 {
    0% { -webkit-transform:translateX( -3px) rotate(-5deg);}
    100% { -webkit-transform:translateX( 3px) rotate(5deg);}
}

@keyframes fire2 {
    0% { -webkit-transform:translateY(  3px) rotate(6deg);}
    100% { -webkit-transform:translateY(  -3px) rotate(-6deg);}
}
@-webkit-keyframes fire2 {
    0% { -webkit-transform:translateY(  3px) rotate(6deg);}
    100% { -webkit-transform:translateY(  -3px) rotate(-6deg);}
}
@-ms-keyframes fire2 {
    0% { -webkit-transform:translateY(  3px) rotate(6deg);}
    100% { -webkit-transform:translateY(  -3px) rotate(-6deg);}
}


@keyframes trans-vertical {
    0% { -webkit-transform:translateY(-3px) scale(.85,.9);}
    100% { -webkit-transform:translateY(  3px) scale(1,1);}
}
@-webkit-keyframes trans-vertical {
    0% { -webkit-transform:translateY(-3px) scale(.85,.9);}
    100% { -webkit-transform:translateY( 3px) scale(1,1);}
}
@-ms-keyframes trans-vertical {
    0% { -webkit-transform:translateY(-3px) scale(.85,.9);}
    100% { -webkit-transform:translateY( 3px) scale(1,1);}
}