@charset "UTF-8";
/* CSS Document */

/* CSS Reset */
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
/*sub{vertical-align:text-bottom}*/
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a { text-decoration:none; }
*:focus { outline: 0; }
*, :after, :before { box-sizing: border-box;}
[class*="col-"] {float: left;}
.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:33.33%;position: relative;}.col-4{width:25%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9 {width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%}.col-12 {width:100%;}
#flame .clear { clear: both;}
#flame .mobile{ display:none;}
#flame .desktop{ display:block;}
#flame {overflow: hidden;font-family: HelveticaNeue,helvetica,arial,"ヒラギノ角ゴ Pro W4",hirakakupro-w4,'ＭＳ Ｐゴシック',sans-serif; font-size:16px; line-height: 1.4em; color:#FFF; background:#000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility; }
#flame h1 {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 3.375em;font-weight: normal;transform: scale(1.2, 1);/*padding-left: 8%;*/ text-align: center;}
#flame h2  {position: relative;line-height: 1.1em; margin: 40px auto;font-size: 2.5em;font-weight: normal;transform: scale(1.2, 1);/*padding-left: 8%;*/text-align: center;z-index: 3;}
#flame h3 {line-height: 1.3em; font-size: 1.875em;margin: 40px auto;transform: scale(1.2, 1);/*padding-left: 8%;*/text-align: center;}
#flame h4 {transform: scale(1.2, 1);}

#flame section {margin-top:80px;}
#flame .header { text-align: center; padding: 20px 0; background-color: #000000; }
#flame .header a, #shupkm .header img { display:block; margin:0 auto; }
#flame .max-width img {max-width: 100%; width:100%; display:block;}
#flame section {position:relative;}
#flame .banner .title { position: absolute;left: 25%;top: 50%;width: 50%;transform: translateY(-50%);}
#flame .banner .title h2 {font-weight: lighter;}
#flame .button {z-index: 3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     color: #000;
    background:#fff;
    border-radius: 4.25rem;
    border: 1px solid 
    transparent;
    cursor: pointer;
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1;
    max-width: 100%;
    outline: 0;
    overflow: hidden;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
    text-transform: lowercase;
    vertical-align: middle;
    white-space: nowrap;
    transform: scale(1.1, 1);}
#flame .button:hover {background: #111111;color:#fff;border: 1px solid #fff; text-decoration: none;opacity: .8;}
#flame .banner {position: relative;}
#flame .banner .title h2 {font-weight:lighter;}
#flame section.flame-video {text-align: center;}
#flame section.flame-video .video-wrap {max-width:1280px; right:0;width: 100%; position: relative; z-index: 2;}
#flame section.flame-video .video {width: 40%; position:relative;padding-top: 50%;margin: 0 auto;}
#flame section.flame-video .video .youtube-video {position: absolute;top: 0;right: 0;}
.html5-main-video {width: 100%!important; left: 0!important;right: 0!important;height: auto!important;}
.youtube-video { display: block;}
#flame section.flame-video .button {margin:30px auto;}
#flame section.flame-video .flame-bg {position: absolute;z-index: 1;max-width: 852px; width: 70%;top: 0px;left: 0;right: 0; margin: 0 auto;}
#flame .content-wrap {max-width:1280px; margin:0 auto;}
#flame section.shades {text-align: center;}
#flame section.shades .shade img {max-width:246px;margin: 0 auto;width: 74%;}
#flame section.shades .shade {max-width: 600px; margin:0 auto;}
#flame section.shades .shade.matte {margin-top:100px;}
#flame section.shades .shade.right {float:right;}
#flame section.shades .group img {max-width: 560px;width: 88%;margin: 0 auto 30px;}
#flame section.shades h4 { margin: 20px 0; font-size:1.5em;}
#flame section.shades h5 { margin: 30px 0; font-size:1.5em;line-height: 1.3em;}
#flame section.shades h5 span {font-weight: bold;}

#flame section.limited-edt i {display: block;}
#flame section.limited-edt h3 {text-align: left;font-size: 1.2em; line-height:1.4em; padding-left:8%; }
#flame section.limited-edt .main {float:left;}
#flame section.limited-edt .details {float:left;margin-left: 2%;}
#flame section.limited-edt .main {text-align: left; position: relative;}
#flame section.limited-edt .main img {max-width: 613px; width: 100%;}
#flame section.limited-edt .details img {max-width: 203px; width:100%;}
#flame section.limited-edt .col-6 img {vertical-align: bottom;}
#flame section.limited-edt .col-6.desc, #flame section.limited-edt .desc-wrap {text-align: left;padding-left: 5%;}
#flame section.limited-edt .col-6.desc h3, #flame section.limited-edt .desc-wrap h3 {margin:10px auto;}
#flame section.limited-edt .col-6.desc h3 span, #flame section.limited-edt .desc-wrap h3 span {font-weight: bold;}
#flame section.limited-edt .col-6.align {text-align: right;}
#flame section.limited-edt .row {position: relative;}
#flame section.limited-edt .row .desc-wrap {position: absolute;right: -50%;width: 50%;top: 0;}
#flame section.looks {margin-top: 160px;}
#flame section.looks {text-align: center;}
#flame section.looks ul {max-width: 405px;padding-left: 5%;}
#flame section.looks ul li {display: inline-block; }
#flame section.looks ul li {margin-right: 7%;}
#flame section.looks ul li.first {margin-right: 5%;}
#flame section.looks .num {font-size: 4.6875em;padding-right: 2%;font-weight: lighter;}
#flame section.looks h3 {text-align: left;font-size: 1.5625em;font-weight: lighter; margin: 20px auto !important;}
#flame section.looks .button {margin:60px 0;}
#flame section.looks h3 span {font-weight: normal; display: block;}
#flame section.looks h4 {position: absolute; font-weight: bold;bottom: 1%;padding-left: 13%;height: 23%; text-align: left;}
#flame section.looks h4 span {display:block; font-weight:normal; padding-bottom:10px;}
#flame section.looks img.photo {max-width:383px; width: 90%;}
#flame section.looks img.texture {max-width:417px; width: 91%;}
#flame section.looks img.flammable-bg {position: absolute;max-width: 645px;width: 45%;text-align: center;top: -100px;left: 0;right: 0;margin: 0 auto;z-index: 1;}
#flame section.looks .looks-wrap {margin-top:100px;}
#flame section.looks img.hard-formula {position: absolute;bottom: 1%;right: 2%;max-width: 29px;width: 9%;}

@media screen and (max-width:1280px) {
#flame {font-size: 13px;}	
#flame section .content-wrap {padding:0 20px;}	
#flame section.shades .group img {width:100%;}
#flame section.limited-edt .main {width:45%;text-align: center;}
#flame section.limited-edt .details {width: 36%;}
#flame section.limited-edt .row .desc-wrap {position: absolute;right: 0;top: 0; left: 0; padding-left:5% !important;}
#flame section.looks img.flammable-bg {top: -70px;}
}

@media screen and (max-width:980px) {
#flame {font-size: 12px;}
.button {padding: 10px 15px; font-size: 1.5vw !important;}	
#flame section.limited-edt .main {margin-bottom:40px;width:100%;}
#flame section.limited-edt .details {margin: 0 auto; float:none;width: 100%;
max-width: 406px;}
#flame section.looks h3 {text-align: left;font-size: 1.3em;}	
#flame section.looks .num {font-size: 4em;}
}

@media screen and (max-width:768px) {
#flame section {margin-top: 50px;}
#flame {font-size: 15px;}	
#flame .mobile{ display:block!important }
#flame .desktop{ display:none!important }
#flame .banner .title {position: absolute;left: 10%; top: auto; width: auto; transform: translateY(0);bottom: 10%;}
#flame .banner .title h2 {margin: 20px auto; font-size:1.2em;}
#flame h1 {font-size:1.8em;}
#flame section .content-wrap { padding: 0 10px;}
.button {font-size: 2vw !important;}
#flame section.flame-video img.collection {max-width:100%; margin: 0 auto 30px auto;}
#flame section.flame-video .video {width: 80%; position: relative; padding-top: 100%;}
#flame .col-6.shade, #flame .col-6.group {width:100%;}
#flame section.shades .shade {max-width: 100%;}
#flame section.shades h2.mobile {margin:0;}
#flame section.shades h2 span {display: block;font-size: 0.7em;padding-top: 30px;line-height: 1.2em;font-weight: lighter;}
#flame section.shades h3 {font-size: 1.7em;}
#flame section.shades h4 {font-size:1.2em;}
#flame section.shades h5 {font-size:1.2em;}
#flame section.shades .shade.matte {margin-top:0;}
#flame section.limited-edt .row .desc-wrap {padding-left:0;}
#flame section.limited-edt .details, #flame section.limited-edt .details {width:100%;max-width: 406px;}
#flame section.limited-edt .desc-wrap {left:0;}
#flame section.limited-edt .col-6.desc h3, #flame section.limited-edt .desc-wrap h3 {margin: 20px auto;}
#flame section.looks {margin-top: 120px;}
#flame section.looks .col-3 {width: 100%;position: relative; margin:0 auto; float:none;max-width: 383px;}
#flame section.looks ul {margin:0 auto;}
#flame section.looks img.flammable-bg {width: 70%;}
#flame section.looks .looks-wrap {margin-top: 40px;}
#flame section.looks .looks-wrap .col-3 {margin-top:50px;}
#flame section.looks h4 {padding-left: 10% !important;}
	
}

@media screen and (max-width:480px) {
.button {padding: 10px 15px; font-size: 3.2vw !important;}
#flame .banner .title {position: absolute;left: 8%;top: auto;width: auto;transform: translateY(0); bottom: 8%;}
#flame .banner .title h2 {margin: 15px auto; font-size:1em;}
#flame h1 {font-size:1.6em;}
#flame h2 {font-size:2em;}
#flame h3 {font-size:1.2em;}
#flame section.limited-edt h3 {font-size:0.9em;}
flame section.looks img.flammable-bg {top: -44px;}
#flame section.looks img.flammable-bg {width:100%;}
#flame section.looks h4 {font-size: 0.9em;}
}