@charset "utf-8";

.brand-navi {position:fixed; left:0; top:50%; width:100%; z-index:20;}
.brand-navi ul {position:absolute; right:20px; top:50%; text-align:right;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.brand-navi li {padding:13px 0; font-family:"Montserrat",sans-serif; font-weight:500; line-height:1;}
.brand-navi span {display:inline-block; vertical-align:middle;}
.brand-navi i {display:inline-block; width:12px; height:12px; margin-left:26px; font-size:0; text-indent:-9999px; vertical-align:middle; border:2px solid #fff; border-radius:50%; background-color:#fff;
    -webkit-transition:background-color 200ms;
    -moz-transition:background-color 200ms;
    transition:background-color 200ms;
}
.brand-navi a {color:#fff;
    -webkit-transition:color 200ms;
    -moz-transition:color 200ms;
    transition:color 200ms;
}
.brand-navi.color2 a {color:#222;}
.brand-navi.color2 i {border-color:#222; background-color:#222;}
.brand-navi .active i {background-color:transparent;}

.brand-story .brand-tit {margin:0 0 75px; color:#222; font-family:"Montserrat",sans-serif; font-size:3.125em; font-weight:600; letter-spacing:-0.01em; line-height:1;}
.brand-story p {font-size:1.5em; letter-spacing:-0.05em; line-height:1.583em;}

.brandstory-sec1 {position:relative; color:#fff; text-align:center; background:url("../img/sub/brandstory_sec1_bg.jpg") no-repeat center center; background-size:cover;}
.brandstory-sec1 .fp-tableCell {position:relative; z-index:1;}
.brandstory-sec1 .cover {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.brandstory-sec1 .brand-tit {color:#fff;}
.brandstory-sec1 .typo {font-size:0; line-height:1;}
.brandstory-sec1 .typo i {display:inline-block; font-size:60px; letter-spacing:0.01em; font-weight:800; vertical-align:baseline;
    -webkit-transition:width 1200ms;
    -moz-transition:width 1200ms;
    -o-transition:width 1200ms;
    transition:width 1200ms;
}
.brandstory-sec1 .typo i span {
    -webkit-transition:opacity 800ms;
    -moz-transition:opacity 800ms;
    -o-transition:opacity 800ms;
    transition:opacity 800ms;
}
.brandstory-sec1 .typo img {margin-left:13px; vertical-align:baseline;}
.brandstory-sec1 .typo img:first-child {margin-left:0 !important;}
.brandstory-sec1 p {margin:42px 0 0;}
.animated .typo i {width:0 !important;
    -webkit-transition-delay:1200ms;
    -moz-transition-delay:1200ms;
    -o-transition-delay:1200ms;
    transition-delay:1200ms;
}
.animated .typo i span {opacity:0;
    -webkit-transition-delay:1200ms;
    -moz-transition-delay:1200ms;
    -o-transition-delay:1200ms;
    transition-delay:1200ms;
}

.brandstory-sec2 {background:url("../img/sub/brandstory_sec2_bg.jpg") no-repeat center center; background-size:cover;}
.brandstory-sec2 .txt {max-width:1128px; margin:0 auto;}

.brandstory-sec3 {text-align:center; background:url("../img/sub/brandstory_sec3_bg.jpg") no-repeat center center; background-size:cover;}
.concept {margin:0 0 74px;}
.concept strong {display:block; margin:0 0 40px; color:#523528; font-family:"Montserrat",sans-serif; font-size:5.000em; font-weight:700; letter-spacing:0.01em; line-height:1;}
.concept strong i {font-style:normal; opacity:0;}
.concept .sub {display:block; color:#000; font-size:1.500em; letter-spacing:-0.05em; line-height:1; opacity:0;
    transition:600ms linear;
    transform:translateY(-20%);
}
.concept .sub.ended {opacity:1;
    transform:translateY(0);
}
.concept .concept-fact,
.concept .concept-effect {display:inline-block;}
.concept .plus {display:inline-block; position:relative; width:68px; height:68px; margin:0 70px; font-size:0; text-indent:-9999px; vertical-align:top;}
.concept .plus i,
.concept .plus em {position:absolute; opacity:0; background-color:#523528;}
.concept .plus i {left:0; top:50%; width:0; height:18px; margin-top:-9px;}
.concept .plus em {left:50%; top:0; width:18px; height:0; margin-left:-9px;}

.brandstory-sec4 {text-align:center; background:url("../img/sub/brandstory_sec4_bg.jpg") no-repeat center center; background-size:cover;}
.brandstory-sec4 li {display:inline-block; margin:0 32px; padding-top:170px; vertical-align:top; background-repeat:no-repeat; background-position:center top;}
.brandstory-sec4 .benefit01 {background-image:url("../img/sub/brand_benefit_icon01.png");}
.brandstory-sec4 .benefit02 {background-image:url("../img/sub/brand_benefit_icon02.png");}
.brandstory-sec4 .benefit03 {background-image:url("../img/sub/brand_benefit_icon03.png");}
.brandstory-sec4 li b {display:block; font-size:1.875em; font-weight:700; letter-spacing:-0.05em; line-height:1;}
.brandstory-sec4 li p {margin:22px 0 0;}

.footer {margin:0 !important;}


@media screen and (max-width:1560px){
.brandstory-sec1 .typo i {font-size:50px;}
.brandstory-sec1 .typo img {height:80px; margin-left:12px;}

.brandstory-sec4 li {margin:0 25px;}
.brandstory-sec4 li {padding-top:155px; background-size:auto 130px;}
}
/* end media 1560px */


@media screen and (max-width:1023px){
.brand-navi {display:none;}

.brand-story .brand-tit {margin:0 0 60px;}
.brand-story p {margin:34px 0 0;}

.brandstory-sec1 .typo i {font-size:36px;}
.brandstory-sec1 .typo img {height:60px; margin-left:10px;}

.concept {margin:0 0 55px;}
.concept .plus {width:60px; height:60px; margin:5px 60px 0;}
.concept .plus i {height:16px; margin-top:-8px;}
.concept .plus em {width:16px; margin-left:-8px;}

.brandstory-sec4 ul {width:432px; margin:0 auto; text-align:left;}
.brandstory-sec4 li {margin:50px 0 0; padding:0 0 0 135px; background-position:left center; background-size:auto 105px;}
.brandstory-sec4 li:first-child {margin:0 !important;}
.brandstory-sec4 li p {margin:18px 0 0;}
}
/* end media 1023px */


@media screen and (max-width:767px){
.brand-story .brand-tit {margin:0 0 40px; font-size:2.083em;}
.brand-story p {margin:24px 0 0; font-size:1.167em;}

.brandstory-sec1 {background-image:url("../img/sub/m_brandstory_sec1_bg.jpg");}
.brandstory-sec1 .typo i {font-size:20px;}
.brandstory-sec1 .typo img {height:36px; margin-left:5px;}

.brandstory-sec2 {background-image:url("../img/sub/m_brandstory_sec2_bg.jpg");}

.brandstory-sec3 {background-image:url("../img/sub/m_brandstory_sec3_bg.jpg");}
.concept {margin:0 0 25px;}
.concept strong {margin:0 0 16px; font-size:3.333em;}
.concept .plus {width:34px; height:34px; margin:3px 5px 0;}
.concept .plus i {height:9px; margin-top:-4px;}
.concept .plus em {width:9px; margin-left:-4px;}
.concept .sub {font-size:1.167em;}

.brandstory-sec4 {background-image:url("../img/sub/m_brandstory_sec4_bg.jpg");}
.brandstory-sec4 ul {width:275px;}
.brandstory-sec4 li {margin:25px 0 0; padding:0 0 0 90px; background-size:auto 71px;}
.brandstory-sec4 li b {font-size:1.667em;}
.brandstory-sec4 li p {margin:13px 0 0; font-size:1.167em;}
}
/* end media 767px */


@media screen and (max-width:359px){
.brand-story p {font-size:1em;}

.brandstory-sec1 .typo i {font-size:16px;}
.brandstory-sec1 .typo img {height:30px; margin-left:4px;}

.concept strong {font-size:2.8em;}
.concept .plus {width:28px; height:28px;}
.concept .plus i {height:8px; margin-top:-4px;}
.concept .plus em {width:8px; margin-left:-4px;}
.concept .sub {font-size:1em;}
}
/* end media 359px */