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

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
color: #242322;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
background: #ffffff;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
/*transition: ease .4s;*/
transition: width 1s ease-in-out 0.01s;
}
.l-container a:hover img,
.nav_menu a:hover{
opacity: 0.7;
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
font-size: 3.2vw;
letter-spacing: .01em;
background: #e9f9ff;
}
#content_wrap > section{
text-align: center;
}

/* ▽ SP ▽================================================================================================================================== */
/*====================
base
====================*/
.inner{
padding: 0 5vw;
}
#content_wrap p,
#content_wrap a,
#content_wrap figcaption,
#content_wrap div{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
text-shadow: 2px 2px 10px #ffffff, -2px 2px 10px #ffffff, 2px -2px 10px #ffffff, -2px -2px 10px #ffffff;
}
.information,
.information p
{
font-size: 2.6vw !important;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}
.txt_l,
.txt_l p{
font-size: 3.4vw;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: url("/products/brand/meltykiss/common/images/snow_sp.png"), #c6e5f8;
background-position: center -60vw, center center;
background-repeat: repeat, repeat;
background-size: 100vw, auto;
}
#loading img{
width: 37.159vw;
position: absolute;
top: calc(50% - 16vw);
left: calc(50% - 18.5795vw);
-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;}
}

/*====================
各エリア見出し
====================*/
#story h3,
#history h3,
#special h3{
/*width: 78.2vw;*/
width: 80.313vw;
margin: 0 auto 2.6vw;
position: relative;
}
.choco{
position: absolute;
width: calc(100%*754/767);
left: 0.7vw;
top: 0;
z-index: 10;
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: url(/products/brand/meltykiss/common/images/snow_sp.png), url(/products/brand/meltykiss/history/images/deco_sp.png), #c6e5f8;
background-position: center top, center 2.3vw, center center;
background-repeat: repeat-y, no-repeat, repeat;
background-size: 100%, 90.5vw, auto;
position: relative;
padding: 15.4vw 5vw 12.3vw;
}
#mainvisual:after{
content: "";
display: block;
width: 100%;
height: 21vw;
background: url("/products/brand/meltykiss/history/images/grd_b.png") repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#mainvisual h2{
margin: 0 auto 5.5vw;
width: 66.5vw;
}

/*====================
ページ内ナビ
====================*/

/*====================
誕生物語
====================*/
#story{
padding: 10vw 0 14vw;
background: url(/products/brand/meltykiss/common/images/snow_sp.png);
background-position: center -10vw;
background-repeat: repeat-y;
background-size: 100%;
position: relative;
}
#story .inner {
position: relative;
padding: 0 12vw;
z-index: 20;
}
.movies_list{
margin-top: 3.6vw;
}
.mfp-close {
width: 7.8vw !important;
height: 7.8vw !important;
font-size: 0 !important;
position: absolute;
top: -9.7vw !important;
right: 0 !important;
background: url("/products/brand/meltykiss/common/images/btn_close.png") no-repeat center / contain !important;
}

/*====================
メルティーキッスヒストリー
====================*/
#history{
padding: 10vw 0 13vw;
background: url(/products/brand/meltykiss/common/images/snow_sp.png);
background-position: center top;
background-repeat: repeat-y;
background-size: 100%;
position: relative;
}
#history .inner{
padding: 0;
}
#history_area{
padding: 0 5vw;
text-align: center;
}
.nav_history{
background: #560c0c;
border-radius: 3vw;
line-height: 1;
margin: 5vw 0 10vw;
}
.nav_history_list{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.nav_history_list p{
padding: 5.4vw 3.4vw;
}
.nav_history_list li{
position: relative;
width: calc(100% / 4);
}
.nav_history_list li:after{
content: "";
width: 1px;
height: 4vw;
background: #a37474;
position: absolute;
right: 0;
top: calc(50% - 2vw);
}
.nav_history_list li:last-child:after{
content: none;
}
#history_area ol{
margin: 0 auto;
position: relative;
}
#history_area ol li{
position: relative;
padding: 0 0 9vw 3.4vw;
}
.pkg{
position: relative;
margin-bottom: 2.5vw;
padding: 0 0 0 0.6vw;
}
#history_area ol:before{
content: "";
height: calc(92.6%);
width: 1vw;
background: #e0d7c7;
position: absolute;
left: 0;
top: 9.5vw;
}
#history_area ol li:after{
content: "";
width: 3.4vw;
height: 3.4vw;
background: #bd9754;
border-radius: 50vw;
display: block;
position: absolute;
top: 8vw;
left: -1.2vw;
}

/*====================
SNS・ページトップ
====================*/
.sns {
display: flex;
justify-content: center;
margin-top: 13.8vw;
}
.sns li {
width: 7.9vw;
}
.sns li:not(:first-child) {
margin-left: 4.4vw;
}
.pagetop{
position: fixed;
bottom: 13vw;
right: 5.2vw;
width: 8vw;
z-index: 50;
}
.pagetop a{
display: block;
}

/*====================
ブランドトップ誘導
====================*/
#brand_footer{
padding: 11.8vw 0;
background: #560c0c;
position: relative;
}
#brand_footer .inner{
padding: 0 18vw;
}
#brand_footer .bnr_list li:not(:last-child){
margin-bottom: 9.1vw;
}

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

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*====================
base
====================*/
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
.l-container{
line-height: 2;
}
.inner{
width: 940px;
margin: 0 auto;
padding: 0 !important;
}
.information,
.information p{
font-size: 13px !important;		
}
#content_wrap,
#content_wrap p{
font-size: 16px;
}
.txt_l,
.txt_l p{
font-size: 20px !important;
}

/*====================
ローディング画面
====================*/
#loading{
background: url("/products/brand/meltykiss/common/images/snow_pc.png"), #c6e5f8;
background-position: center -160px, center center;
background-repeat: repeat, repeat;
background-size: auto, auto;
}
#loading img{
width: 285px;
top: calc(50% - 120px);
left: calc(50% - 142.5px);
}

/*====================
各エリア見出し
====================*/
#story h3,
#history h3,
#special h3{
width: 495px;
margin: 0 auto 25px;
}
.choco{
position: absolute;
width: 1287px;
left: calc(50% - 635px);
top: 4px;
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: url(/products/brand/meltykiss/common/images/snow_pc.png), url(/products/brand/meltykiss/history/images/deco_pc.png), #c6e5f8;
background-position: center -565px, center 3px, center center;
background-repeat: repeat, no-repeat, repeat;
background-size: auto, auto, 100%;
position: relative;
padding: 120px 0 109px;
}
#mainvisual:after{
height: 160px;
}
#mainvisual h2{
margin: 0 auto 28px;
width: 510px;
}

/*====================
ページ内ナビ
====================*/

/*====================
誕生物語
====================*/
#story{
padding: 60px 0 65px;
background: url(/products/brand/meltykiss/common/images/snow_pc.png);
background-position: center -565px, center center;
background-repeat: repeat;
background-size: auto;
position: relative;
}
.movies_list{
margin-top: 21px;
}
.movies_list li{
margin: 0 auto 60px;
width: 644px;
}
.movies_list li:last-child{
margin-bottom: 0;
}
.mfp-close {
width: 54px !important;
height: 54px !important;
top: -70px !important;
right: 0 !important;
}

/*====================
メルティーキッスヒストリー
====================*/
#history{
padding: 60px 0 100px;
background: url(/products/brand/meltykiss/common/images/snow_pc.png);
background-position: center -565px, center center;
background-repeat: repeat;
background-size: auto;
position: relative;
}
#history_area{
padding: 0 5px;
}
#history_area .inner{
width: 840px;
}
.nav_history{
background: none;
border-radius: 0;
margin: 30px 0 58px;
}
.nav_history_list p{
padding: 10px 36px;
}
.nav_history_list li{
background: #560c0c;
border-radius: 12px;
width: 192px;
}
.nav_history_list li:after{
content: none;
}
#history_area ol{
width: 950px;
}
#history_area ol li{
padding: 0;
}
#history_area ol li{
width: 475px;
}
.pkg{
margin-bottom: 9px;
}
#history_area ol li:nth-child(odd) .pkg{
padding: 0 0 0 31px;
}
#history_area ol li:nth-child(even){
padding-left: 477px;
}
#history_area ol li:nth-child(even) .pkg{
padding: 0 0 0 24px;
}
#history_area ol li:last-child{
padding: 0 0 0 224px;
}
#history_area ol:before{
content: "";
height: calc(86.8%);
width: 4px;
left: 473px;
top: 60px;
}
#history_area ol > li:nth-child(odd):before{
content: "";
border-bottom: dotted 2px #bd9754;
width: 94px;
height: 1px;
position: absolute;
left: 375px;
top: 58px;
}
#history_area ol > li:nth-child(even):before{
content: "";
border-bottom: dotted 2px #bd9754;
width: 94px;
height: 1px;
position: absolute;
right: 375px;
top: 58px;
}
#history_area ol > li:last-child:before{
content: none;
}
#history_area ol > li:after{
width: 12px;
height: 12px;
border-radius: 50px;
top: 53px;
left: 469px;
}
#history_area ol > li:last-child:after{
top: 0;
}
#history_area ol li:nth-child(2){
margin-top: -129px;
}
#history_area ol li:nth-child(3){
margin-top: -182px;
}
#history_area ol li:nth-child(4){
margin-top: -64px;
}
#history_area ol li:nth-child(5){
margin-top: -76px;
}
#history_area ol li:nth-child(6){
margin-top: -153px	;
}
#history_area ol li:nth-child(6){
margin-top: -153px	;
}
#history_area ol li:nth-child(7){
margin-top: 20px;
}
#history_area ol li:nth-child(8){
margin-top: -179px;
}
#history_area ol li:nth-child(9){
margin-top: -67px;
}
#history_area ol li:nth-child(10){
margin-top: -102px;
}
#history_area ol li:nth-child(11){
margin-top: -70px;
}
#history_area ol li:nth-child(12){
margin-top: -454px;
}

/*====================
SNS・ページトップ
====================*/
.sns {
margin-top: 100px;
}
.sns li {
width: 60px;
}
.sns li:not(:first-child) {
margin-left: 34px;
}
.pagetop{
bottom: 100px;
right: 60px;
width: 60px;
}

/*====================
ブランドトップ誘導
====================*/
#brand_footer{
padding: 90px 0;
}
#brand_footer .inner{
width: 900px
}
#brand_footer .bnr_list{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#brand_footer .bnr_list li{
width: 380px;
}
#brand_footer .bnr_list li:not(:last-child){
margin-bottom: 0;
}
}