@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { font-weight: normal; text-align: left; vertical-align: middle; }

q, blockquote { quotes: none; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/*
--------------------------------------------------------------
 Mix-In
--------------------------------------------------------------
*/
@media screen and (min-width: 768px) { #shea-kukui .sp-disp { display: none !important; } }

@media screen and (max-width: 767px) { #shea-kukui .pc-disp { display: none !important; } }

/*
--------------------------------------------------------------
 Frame Reset
--------------------------------------------------------------
*/
#wrapper { margin: 0; padding: 0; }

#wrapper .header-banner, #wrapper .top-banner { display: none !important; }

footer#footer { display: none !important; }

#main { margin: 0; padding: 0; }

.content-asset ul { margin: 0; padding: 0; }

.content-asset p { margin: auto; }

/*
--------------------------------------------------------------
 General
--------------------------------------------------------------
*/
body { background: #fff; font-family: "slabo 27px",'Noto Sans JP',noto sans japanese,Quicksand,游ゴシック体,yu gothic,YuGothic,ヒラギノ角ゴシック pro,hiragino kaku gothic pro,メイリオ,Meiryo,Osaka,sans-serif; opacity: 0; }

body.on { -webkit-animation: fadeIn 3s ease; animation: fadeIn 3s ease; opacity: 1; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

::-moz-selection { background: #a76264; color: #fff; }

::selection { background: #a76264; color: #fff; }

::-moz-selection { background: #a76264; color: #fff; }

.siteHeader { background: #fff; border-bottom: solid 3px #000; line-height: 0; position: relative; text-align: center; z-index: 50; }

#shea-kukui { background: #fff; color: #3e3a39; }

#shea-kukui img { -webkit-backface-visibility: hidden; backface-visibility: hidden; line-height: 0; margin: 0 auto; }

#shea-kukui a { -webkit-transition-delay: 0s; -webkit-transition-duration: 600ms; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: ease; transition-delay: 0s; transition-duration: 600ms; transition-duration: 0.6s; transition-timing-function: ease; transition-timing-function: ease; }

#shea-kukui a img { -webkit-transition-delay: 0s; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: ease; transition-delay: 0s; transition-duration: 0.6s; transition-timing-function: ease; }

#shea-kukui a:hover { opacity: 0.6; }

.section { overflow: hidden; position: relative; text-align: center; width: 100%; z-index: 50; }

@media screen and (max-width: 767px) { .siteHeader { border-bottom: solid 0.46875vw #000; }
  .siteHeader .sitelogo { line-height: 0; }
  .siteHeader .sitelogo img { height: 12.1875vw; width: auto; }
  .section { width: 100%; }
  .section p { font-size: 13px; font-size: 4.0625vw; line-height: 1.53846; }
  .section img { height: auto; width: 100%; } }

@media screen and (min-width: 768px) { .section p { font-size: 16px; line-height: 187.5%; margin: 0; }
  .section img { height: auto; max-width: 100%; } }

/*
--------------------------------------------------------------
 Scroll Animation
--------------------------------------------------------------
*/
/*
// Scroll Animation
*/
.js-anim-scroll { -webkit-transition-duration: 1600ms; -webkit-transition-timing-function: ease; opacity: 0; transition-duration: 1600ms; transition-timing-function: ease; visibility: hidden; }

.js-anim-scroll.inview { opacity: 1; visibility: visible; }

.js-anim-scroll[data-anim="b-to-t"] { -ms-transform: translateY(30px); -webkit-transform: translateY(30px); -webkit-transition-duration: 1800ms; transform: translateY(30px); transition-duration: 1800ms; }

.js-anim-scroll[data-anim="b-to-t"].inview { -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.js-anim-scroll[data-anim="t-to-b"] { -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); -webkit-transition-duration: 1800ms; transform: translateY(-30px); transition-duration: 1800ms; }

.js-anim-scroll[data-anim="t-to-b"].inview { -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }

.js-anim-scroll[data-anim="l-to-r"] { -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); -webkit-transition-duration: 1600ms; transform: translateX(-30px); transition-duration: 1600ms; }

.js-anim-scroll[data-anim="l-to-r"].inview { -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.js-anim-scroll[data-anim="r-to-l"] { -ms-transform: translateX(30px); -webkit-transform: translateX(30px); -webkit-transition-duration: 1600ms; transform: translateX(30px); transition-duration: 1600ms; }

.js-anim-scroll[data-anim="r-to-l"].inview { -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }

.js-anim-scroll.ttl_deco.js-anim-scroll, .js-anim-scroll.secTitle.js-anim-scroll, .js-anim-scroll.secTxt.js-anim-scroll, .js-anim-scroll .sec-lineup h3.js-anim-scroll { -ms-transform: translateY(3vh); -webkit-filter: brightness(2); -webkit-transform: translateY(3vh); filter: brightness(2); transform: translateY(3vh); }

.js-anim-scroll.ttl_deco.js-anim-scroll.inview, .js-anim-scroll.secTitle.js-anim-scroll.inview, .js-anim-scroll.secTxt.js-anim-scroll.inview, .js-anim-scroll .sec-lineup h3.js-anim-scroll.inview { -ms-transform: translateY(0px); -webkit-filter: brightness(1); -webkit-transform: translateY(0px); filter: brightness(1); transform: translateY(0px); }

.fragrance-box.js-anim-scroll .fragrance-box__item { -ms-transform: scale(1) translateY(-15%); -webkit-transform: scale(1) translateY(-15%); -webkit-transition-duration: 1200ms; -webkit-transition-timing-function: ease; opacity: 0; transform: scale(1) translateY(-15%); transition-duration: 1200ms; transition-timing-function: ease; }

.fragrance-box.js-anim-scroll .fragrance-box__item:nth-child(1) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.fragrance-box.js-anim-scroll .fragrance-box__item:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

.fragrance-box.js-anim-scroll .fragrance-box__item:nth-child(3) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

.fragrance-box.js-anim-scroll .fragrance-box__item:nth-child(4) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }

.fragrance-box.js-anim-scroll .fragrance-box__items.inview .fragrance-box__item { -ms-transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); opacity: 1; transform: scale(1) translateY(0); }

@-webkit-keyframes sAnimAbout { 0% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0; }
  30% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0.5; }
  50% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0.5; }
  100% { -webkit-filter: brightness(1); filter: brightness(1);
    opacity: 1; } }

@keyframes sAnimAbout { 0% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0; }
  30% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0.5; }
  50% { -webkit-filter: brightness(100); filter: brightness(100);
    opacity: 0.5; }
  100% { -webkit-filter: brightness(1); filter: brightness(1);
    opacity: 1; } }

#secAbout .sec-about__inner.js-anim-scroll .sec-about__logo { -ms-transform: translateY(-5%); -webkit-transform: translateY(-5%); -webkit-transition-delay: 0.5s; -webkit-transition-duration: 1.2s; -webkit-transition-timing-function: ease; opacity: 0; transform: translateY(-5%); transition-delay: 0.5s; transition-duration: 1.2s; transition-timing-function: ease; visibility: hidden; }

#secAbout .sec-about__inner.js-anim-scroll.inview .sec-about__logo { -ms-transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; transform: translateY(0); visibility: visible; }

.sec-lineup .boxTitle.js-anim-scroll img { -ms-transform: scale(0.5); -webkit-backface-visibility: hidden; -webkit-transform: scale(0.5); -webkit-transition-duration: 1000ms; -webkit-transition-timing-function: ease; backface-visibility: hidden; transform: scale(0.5); transition-duration: 1000ms; transition-timing-function: ease; }

.sec-lineup .boxTitle.js-anim-scroll.inview img { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); width: auto; }

/*
--------------------------------------------------------------
 Background
--------------------------------------------------------------
*/
@-webkit-keyframes bgFadeInCB { 0% {
    background-position: center -10%; opacity: 1; }
  15% { opacity: 0.8; }
  30% {
    background-position: center 0; opacity: 0.8; }
  45% { opacity: 0.3; }
  100% { opacity: 0.3; } }
@keyframes bgFadeInCB { 0% {
    background-position: center -10%; opacity: 1; }
  15% { opacity: 0.8; }
  30% {
    background-position: center 0; opacity: 0.8; }
  45% { opacity: 0.3; }
  100% { opacity: 0.3; } }

#shea-kukui .bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

#shea-kukui .bg .inner { -webkit-transition-duration: 2500ms; -webkit-transition-timing-function: ease; background-position: center 0px; transition-duration: 2500ms; transition-timing-function: ease; width: 100%; }

#shea-kukui .bg.bg-mv { background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(80%, #fff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, #fff 0%, #fff 80%, rgba(255, 255, 255, 0) 100%); z-index: 5; }

#shea-kukui .bg.bg-mv .inner { -moz-filter: blur(50px) !important; -ms-filter: blur(50px) !important; -webkit-filter: blur(50px) !important; background-position: center -10%; background-repeat: no-repeat; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='50' /></filter></svg>#blur"); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='50'); filter: blur(50px); height: 100%; left: 0; position: absolute; top: 0; z-index: 5; }

#shea-kukui .bg.bg-mv.on .inner { -moz-filter: blur(0px) !important; -ms-filter: blur(0px) !important; -webkit-animation: bgFadeInCB 10s ease; -webkit-filter: blur(0px) !important; animation: bgFadeInCB 10s ease; background-position: center 0; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='0' /></filter></svg>#blur"); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); filter: blur(0px); opacity: 0.3; }

@media screen and (min-width: 768px) { #shea-kukui .bg.bg-mv { height: 1300px; } }

#shea-kukui .bg.bg-page { z-index: 4; }

#shea-kukui .bg.bg-page .inner { -webkit-transition-timing-function: ease; background-repeat: repeat-y; height: 100%; height: 100vh; left: 0; position: fixed; top: 0; transition-timing-function: ease; z-index: 4; @transition-duration :3000ms; }

@media screen and (min-width: 768px) and (max-width: 1120px) { #shea-kukui .bg.bg-page .inner { background-size: 292% auto; } }

/*
--------------------------------------------------------------
 Bottom Area
--------------------------------------------------------------
*/
#secBottom .fig { width: 100%; }

#secBottom .fig img { width: inherit; }

@media screen and (max-width: 767px) { #secBottom { background-size: 1.71875vw 2.34375vw; } }

/*
--------------------------------------------------------------
 Footer
--------------------------------------------------------------
*/
#skFooter { background: #FFF; height: auto; max-width: 100%; z-index: 10; }

#skFooter a { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease; transition-duration: 500ms; transition-timing-function: ease; }

#skFooter a:hover { opacity: 0.6; }

#skFooter .secInner { margin: 0 auto; max-width: 1120px; text-align: center; width: 100%; }

#skFooter .secInner .bnrList { display: -webkit-box; display: -ms-flexbox; display: flex; }

#skFooter .secInner .bnrList li a { display: block; line-height: 0; }

#skFooter .secInner .bnrList li a img { height: auto; width: 100%; }

#skFooter .secInner .footNavigation .navTitle { text-align: center; }

#skFooter .secInner .footNavigation .navChildren { -ms-flex-pack: justify; -webkit-box-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; }

#skFooter .secInner .footNavigation .navChildren .navChild { -ms-flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; text-align: left; }

#skFooter .secInner .footNavigation .navChildren .navChild .navTitleSub { font-weight: bold; line-height: 1; }

#skFooter .secInner .footNavigation .navChildren .navChild .navList li a { color: #333; text-decoration: none; }

#skFooter .secInner .footNavigation .navChildren .navChild .navList li a:hover { text-decoration: underline; }

@media screen and (max-width: 767px) { #skFooter { padding: 10.9375vw 3.125vw 0vw 3.125vw; }
  #skFooter .secInner { margin: 0; width: 100%; }
  #skFooter .secInner .btn-allitem { margin-bottom: 16.875vw; }
  #skFooter .secInner .bnrList { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 6.25vw; }
  #skFooter .secInner .bnrList li { margin-bottom: 3.125vw; width: 100%; }
  #skFooter .secInner .footNavigation { margin-bottom: 6.25vw; }
  #skFooter .secInner .footNavigation .navTitle { border-bottom: solid 0.3125vw #000; border-top: solid 0.625vw #000; margin-bottom: 7.8125vw; }
  #skFooter .secInner .footNavigation .navTitle img { height: 13.28125vw; width: auto; }
  #skFooter .secInner .footNavigation .navChildren .navChild { -ms-flex-line-pack: start; align-content: flex-start; width: 50%; }
  #skFooter .secInner .footNavigation .navChildren .navChild:nth-child(2) { padding-left: 3.75vw; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navTitleSub { font-size: 4.0625vw; margin-bottom: 6.25vw; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navList { font-size: 3.4375vw; width: 100%; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navList li { margin-bottom: 3.125vw; width: 100%; }
  #skFooter .footLogo img { height: 14.0625vw; width: auto; } }

@media screen and (min-width: 768px) { #skFooter { padding-top: 65px; }
  #skFooter .secInner { max-width: 1160px; padding-left: 20px; padding-right: 20px; width: 100%; }
  #skFooter .secInner .btn-allitem { margin-bottom: 85px; }
  #skFooter .secInner .bnrList { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; margin-bottom: 74px; }
  #skFooter .secInner .bnrList li { max-width: 540px; width: calc( 50% - 20px); }
  #skFooter .secInner .footNavigation { font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; font-weight: 500; margin-bottom: 70px; }
  #skFooter .secInner .footNavigation .navTitle { border-bottom: solid 1px #000; border-top: solid 2px #000; margin-bottom: 50px; }
  #skFooter .secInner .footNavigation .navChildren { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; }
  #skFooter .secInner .footNavigation .navChildren .navChild { width: 50%; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navTitleSub { font-size: 18px; margin-bottom: 38px; width: 100%; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navList { -ms-flex-flow: column wrap; -webkit-box-direction: normal; -webkit-box-orient: vertical; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: column wrap; font-size: 14px; max-height: 160px; max-width: 540px; width: 100%; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navList li { line-height: 1; margin-bottom: 19px; max-width: 270px; width: 45%; }
  #skFooter .secInner .footNavigation .navChildren .navChild .navList li:nth-child(n+6) { float: right; }
  #skFooter .secInner .footNavigation .navChildren .navChild.navRight .navList { max-height: 250px; }
  #skFooter .footLogo img { width: 90px; } }

#copyright { clear: both; color: #000; float: right; font-family: "slabo 27px",noto sans japanese,Quicksand,游ゴシック体,yu gothic,YuGothic,ヒラギノ角ゴシック pro,hiragino kaku gothic pro,メイリオ,Meiryo,Osaka,sans-serif; font-size: 12px; font-weight: 300; letter-spacing: .08em; margin: 1em 0; margin-right: 20px; }

@media screen and (max-width: 767px) { #copyright { float: none; font-size: 10px; font-size: 2.96875vw; line-height: 170%; margin-right: 0; white-space: nowrap; } }

/*----// Button //----*/
.btn-lineup { -webkit-box-sizing: border-box; box-sizing: border-box; color: #FFF; display: block; line-height: 0; margin-left: auto; margin-right: auto; position: relative; text-align: center; width: 100%; }

.btn-lineup, .btn-lineup * { -webkit-transition-duration: 800ms; -webkit-transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); transition-duration: 800ms; transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); }

.btn-lineup .arrow { background: #FFF; display: block; height: 1px; position: absolute; right: 44px; top: 27px; }

.btn-lineup .arrow:after { -ms-transform: rotate(34deg); -webkit-transform: rotate(34deg); border-top: 1px solid #fff; content: ""; height: 1px; position: absolute; right: 0; transform: rotate(34deg); width: 8px; }

.btn-lineup:hover { opacity: 0.5; }

@media screen and (max-width: 767px) { .btn-lineup { height: 12.5vw; line-height: 12.5vw; padding: 0; width: 100%; }
  .btn-lineup img { height: 100%; width: auto; } }

@media screen and (min-width: 768px) { .btn-lineup { font-size: 18px; line-height: 0px; padding: 0; width: 100%; } }

#shea-kukui .btn-allitem .btn-lineup { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); line-height: 0; padding: 0; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); z-index: 0; }

#shea-kukui .btn-allitem .btn-lineup img { height: auto; width: 100%; }

@media screen and (max-width: 767px) { #shea-kukui .btn-allitem { height: auto; margin: 0 auto; width: 93.75vw; }
  #shea-kukui .btn-allitem .btn-lineup { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); height: auto; padding: 0; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); width: 100%; z-index: 0; }
  #shea-kukui .btn-allitem .btn-lineup img { height: 22.8125vw; width: 100%; } }

@media screen and (min-width: 768px) { #shea-kukui .btn-allitem { margin: 0 auto; max-width: 780px; width: 100%; }
  #shea-kukui .btn-allitem .btn-lineup { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); height: auto; padding: 0; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.46, 0.89, 0.765, 0.995); z-index: 0; } }

/*
--------------------------------------------------------------
 Hero
--------------------------------------------------------------
*/
/*
--------------------------------------------------------------
 Main Visual
--------------------------------------------------------------
*/
@-webkit-keyframes imgFuwa2_sp { 0% { -webkit-transform: translate(0, 0px) rotate(0deg); transform: translate(0, 0px) rotate(0deg); }
  20% { -webkit-transform: translate(0, 5%) rotate(0deg); transform: translate(0, 5%) rotate(0deg); }
  40% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); }
  100% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } }
@keyframes imgFuwa2_sp { 0% { -webkit-transform: translate(0, 0px) rotate(0deg); transform: translate(0, 0px) rotate(0deg); }
  20% { -webkit-transform: translate(0, 5%) rotate(0deg); transform: translate(0, 5%) rotate(0deg); }
  40% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); }
  100% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } }

@-webkit-keyframes imgFuwa2 { 0% { -webkit-transform: translate(0, 0px) rotate(0deg); transform: translate(0, 0px) rotate(0deg); }
  15% { -webkit-transform: translate(0, 4%) rotate(0deg); transform: translate(0, 4%) rotate(0deg); }
  35% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); }
  100% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } }

@keyframes imgFuwa2 { 0% { -webkit-transform: translate(0, 0px) rotate(0deg); transform: translate(0, 0px) rotate(0deg); }
  15% { -webkit-transform: translate(0, 4%) rotate(0deg); transform: translate(0, 4%) rotate(0deg); }
  35% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); }
  100% { -webkit-transform: translate(0, 0) rotate(0deg); transform: translate(0, 0) rotate(0deg); } }

@-webkit-keyframes bgZoomOut { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  50% { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes bgZoomOut { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  50% { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@-webkit-keyframes mainTitle { 0% {
    -moz-filter: blur(5px) !important;
    -ms-filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
    filter: blur(5px); opacity: 0.0;
    /*transform:translate(0,-3%);*/ }
  100% {
    -moz-filter: blur(0px) !important;
    -ms-filter: blur(0px) !important;
    -webkit-filter: blur(0px) !important;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='0' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    filter: blur(0px); opacity: 1.0;
    /*transform:translate(0,0);*/ } }

@keyframes mainTitle { 0% {
    -moz-filter: blur(5px) !important;
    -ms-filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
    filter: blur(5px); opacity: 0.0;
    /*transform:translate(0,-3%);*/ }
  100% {
    -moz-filter: blur(0px) !important;
    -ms-filter: blur(0px) !important;
    -webkit-filter: blur(0px) !important;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='0' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    filter: blur(0px); opacity: 1.0;
    /*transform:translate(0,0);*/ } }

@-webkit-keyframes mainTitle_sp { 0% {
    -moz-filter: blur(5px) !important;
    -ms-filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
    -webkit-transform: translate(0, 3%) scale(1.1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
    filter: blur(5px); opacity: 0.0;
            transform: translate(0, 3%) scale(1.1); }
  100% {
    -moz-filter: blur(0px) !important;
    -ms-filter: blur(0px) !important;
    -webkit-filter: blur(0px) !important;
    -webkit-transform: translate(0, 0) scale(1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='0' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    filter: blur(0px); opacity: 1.0;
            transform: translate(0, 0) scale(1); } }

@keyframes mainTitle_sp { 0% {
    -moz-filter: blur(5px) !important;
    -ms-filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
    -webkit-transform: translate(0, 3%) scale(1.1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='5' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
    filter: blur(5px); opacity: 0.0;
            transform: translate(0, 3%) scale(1.1); }
  100% {
    -moz-filter: blur(0px) !important;
    -ms-filter: blur(0px) !important;
    -webkit-filter: blur(0px) !important;
    -webkit-transform: translate(0, 0) scale(1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='0' /></filter></svg>#blur");
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    filter: blur(0px); opacity: 1.0;
            transform: translate(0, 0) scale(1); } }

@media screen and (max-width: 767px) { @-webkit-keyframes mainCopy { 0% {
      -webkit-transform: scale(1); opacity: 0.0;
              transform: scale(1); }
    20% {
      -webkit-transform: scale(1); opacity: 0.0;
              transform: scale(1); }
    100% {
      -webkit-transform: scale(1); opacity: 1.0;
              transform: scale(1); } } @keyframes mainCopy { 0% {
      -webkit-transform: scale(1); opacity: 0.0;
              transform: scale(1); }
    20% {
      -webkit-transform: scale(1); opacity: 0.0;
              transform: scale(1); }
    100% {
      -webkit-transform: scale(1); opacity: 1.0;
              transform: scale(1); } } }

@media screen and (min-width: 768px) { @-webkit-keyframes mainCopy { 0% {
      -webkit-transform: scale(1.1); opacity: 0.0;
              transform: scale(1.1); }
    20% {
      -webkit-transform: scale(1.1); opacity: 0.0;
              transform: scale(1.1); }
    100% {
      -webkit-transform: scale(1); opacity: 1.0;
              transform: scale(1); } } @keyframes mainCopy { 0% {
      -webkit-transform: scale(1.1); opacity: 0.0;
              transform: scale(1.1); }
    20% {
      -webkit-transform: scale(1.1); opacity: 0.0;
              transform: scale(1.1); }
    100% {
      -webkit-transform: scale(1); opacity: 1.0;
              transform: scale(1); } } }

#opening { -ms-flex-align: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-box-pack: center; -webkit-transition-delay: 0s; -webkit-transition-duration: 1800ms; -webkit-transition-timing-function: ease; align-items: center; background-color: #e3c6b6; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; justify-content: center; left: 0; position: fixed; top: 0; transition-delay: 0s; transition-duration: 1800ms; transition-timing-function: ease; width: 100%; z-index: 999; }

#opening .inner { text-align: center; }

#opening.show { opacity: 0; visibility: hidden; }

#opening .loader, #opening .loader:before, #opening .loader:after { -webkit-animation: load7 1.8s infinite ease-in-out; -webkit-animation-fill-mode: both; animation: load7 1.8s infinite ease-in-out; animation-fill-mode: both; border-radius: 50%; height: 2.0em; width: 2.0em; }

@media screen and (max-width: 767px) { #opening .loader, #opening .loader:before, #opening .loader:after { height: 1.5em; width: 1.5em; } }

#opening .loader { -webkit-animation-delay: -0.16s; -webkit-transform: translateZ(0); animation-delay: -0.16s; color: #ffffff; font-size: 10px; margin: 30px auto; position: relative; text-indent: -9999em; transform: translateZ(0); }

#opening .loader:before, #opening .loader:after { content: ''; position: absolute; top: 0; }

#opening .loader:before { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; left: -3.5em; }

#opening .loader:after { left: 3.5em; }

@-webkit-keyframes load7 { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em; box-shadow: 0 2.5em 0 -1.3em; }
  40% { -webkit-box-shadow: 0 2.5em 0 0; box-shadow: 0 2.5em 0 0; } }

@keyframes load7 { 0%, 80%, 100% { -webkit-box-shadow: 0 2.5em 0 -1.3em; box-shadow: 0 2.5em 0 -1.3em; }
  40% { -webkit-box-shadow: 0 2.5em 0 0; box-shadow: 0 2.5em 0 0; } }

#mainVisual { overflow: visible; z-index: 60; }

@media screen and (max-width: 767px) { #mainVisual { background: url("../../images/shea-and-kukui/hero_img_sp.jpg") no-repeat center top #ebe8eb; background-size: cover; height: 125vw; } }

@media screen and (min-width: 768px) { #mainVisual { background: url("../../images/shea-and-kukui/hero_img.jpg") no-repeat center top #ebe8eb; background-size: cover; height: 45.83333vw; } }

#mainVisual img { display: block; height: auto; line-height: 0; width: 100%; }

#mainVisual .hero-wrapper { -webkit-transition-delay: 0s; -webkit-transition-duration: 800ms; -webkit-transition-timing-function: ease; background-color: #e3c6b6; height: 100%; position: relative; transition-delay: 0s; transition-duration: 800ms; transition-timing-function: ease; width: 100%; z-index: 101; }

#mainVisual .hero-wrapper.show { background-color: transparent; }

#mainVisual .logo { -ms-transform: translateY(11.80556vw); -webkit-transform: translateY(11.80556vw); transform: translateY(11.80556vw); }

#mainVisual .logo .heroTitle { width: 100%; }

#mainVisual .logo .heroTitle img { -webkit-transition-delay: 0s; -webkit-transition-duration: 1.6s; -webkit-transition-timing-function: ease; opacity: 0; transition-delay: 0s; transition-duration: 1.6s; transition-timing-function: ease; visibility: hidden; width: 100%; }

#mainVisual .logo .heroTitle.show img { opacity: 1; visibility: visible; }

#mainVisual .logo .heroCopy img { -webkit-transition-delay: 0s; -webkit-transition-duration: 1.8s; -webkit-transition-timing-function: ease; height: auto; opacity: 0; transition-delay: 0s; transition-duration: 1.8s; transition-timing-function: ease; visibility: hidden; width: 100%; }

#mainVisual .logo .heroCopy.show img { opacity: 1; visibility: visible; }

@media screen and (max-width: 767px) { #mainVisual .logo { -ms-transform: translateY(0); -webkit-transform: translateY(0); padding-top: 15.625vw; transform: translateY(0); }
  #mainVisual .logo .heroTitle.show img { -webkit-animation: mainTitle_sp 2.0s ease; animation: mainTitle_sp 2.0s ease; }
  #mainVisual .logo .heroCopy.show img { -webkit-animation: mainCopy 2.0s ease; animation: mainCopy 2.0s ease; } }

@media screen and (min-width: 768px) { #mainVisual .logo { width: 100%; }
  #mainVisual .logo .heroTitle.show img { -webkit-animation: mainTitle 2.5s ease; animation: mainTitle 2.5s ease; }
  #mainVisual .logo .heroCopy.show img { -webkit-animation: mainCopy 2.8s ease; animation: mainCopy 2.8s ease; } }

/*
--------------------------------------------------------------
 Kukui Nuts
--------------------------------------------------------------
*/
@media screen and (max-width: 767px) { @-webkit-keyframes anim-nuts1 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-10%, -150%) rotate(10deg) scale(2.2);
              animation-timing-function: ease-in;
      opacity: 0; transform: translate(-10%, -150%) rotate(10deg) scale(2.2); }
    20% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(10%, -70%) rotate(70deg) scale(0.75);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(10%, -70%) rotate(70deg) scale(0.75); }
    25% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(10%, -40%) rotate(60deg) scale(0.9);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(10%, -40%) rotate(60deg) scale(0.9); }
    65% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, -12%) rotate(-45deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, -12%) rotate(-45deg) scale(1); }
    85% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(5deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(5deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } } @keyframes anim-nuts1 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-10%, -150%) rotate(10deg) scale(2.2);
              animation-timing-function: ease-in;
      opacity: 0; transform: translate(-10%, -150%) rotate(10deg) scale(2.2); }
    20% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(10%, -70%) rotate(70deg) scale(0.75);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(10%, -70%) rotate(70deg) scale(0.75); }
    25% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(10%, -40%) rotate(60deg) scale(0.9);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(10%, -40%) rotate(60deg) scale(0.9); }
    65% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, -12%) rotate(-45deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, -12%) rotate(-45deg) scale(1); }
    85% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(5deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(5deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }
  @-webkit-keyframes anim-nuts2 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-23%, -115%) rotate(290deg) scale(0.8);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-23%, -115%) rotate(290deg) scale(0.8); }
    25% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-23%, -115%) rotate(290deg) scale(0.8);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(-23%, -115%) rotate(290deg) scale(0.8); }
    65% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
    80% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
    90% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }
  @keyframes anim-nuts2 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-23%, -115%) rotate(290deg) scale(0.8);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-23%, -115%) rotate(290deg) scale(0.8); }
    25% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-23%, -115%) rotate(290deg) scale(0.8);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(-23%, -115%) rotate(290deg) scale(0.8); }
    65% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
    80% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
    90% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } } }

@media screen and (min-width: 768px) { @-webkit-keyframes anim-nuts1 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-5%, -25%) rotate(-10deg) scale(1);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-5%, -25%) rotate(-10deg) scale(1); }
    15% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-5%, -10%) rotate(-70deg) scale(1);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-5%, -10%) rotate(-70deg) scale(1); }
    20% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-10%, -5%) rotate(-60deg) scale(1);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(-10%, -5%) rotate(-60deg) scale(1); }
    60% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, -2%) rotate(20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, -2%) rotate(20deg) scale(1); }
    80% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-5deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-5deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } } @keyframes anim-nuts1 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-5%, -25%) rotate(-10deg) scale(1);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-5%, -25%) rotate(-10deg) scale(1); }
    15% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-5%, -10%) rotate(-70deg) scale(1);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(-5%, -10%) rotate(-70deg) scale(1); }
    20% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-10%, -5%) rotate(-60deg) scale(1);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(-10%, -5%) rotate(-60deg) scale(1); }
    60% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, -2%) rotate(20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, -2%) rotate(20deg) scale(1); }
    80% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-5deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-5deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }
  @-webkit-keyframes anim-nuts2 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(145%, -130%) rotate(320deg) scale(0.9);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(145%, -130%) rotate(320deg) scale(0.9); }
    20% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(145%, -125%) rotate(310deg) scale(0.9);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(145%, -125%) rotate(310deg) scale(0.9); }
    60% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
    75% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
    85% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }
  @keyframes anim-nuts2 { 0% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(145%, -130%) rotate(320deg) scale(0.9);
              animation-timing-function: ease-in;
      opacity: 1; transform: translate(145%, -130%) rotate(320deg) scale(0.9); }
    20% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(145%, -125%) rotate(310deg) scale(0.9);
              animation-timing-function: ease-out;
      opacity: 1; transform: translate(145%, -125%) rotate(310deg) scale(0.9); }
    60% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
    75% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
    85% {
      -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
              animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
    100% {
      -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
              animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } } }

@-webkit-keyframes anim-nuts3 { 0% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-45%, -100%) rotate(-10deg) scale(1.1);
            animation-timing-function: ease-in;
    opacity: 1; transform: translate(-45%, -100%) rotate(-10deg) scale(1.1); }
  20% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-35%, -75%) rotate(-160deg) scale(0.9);
            animation-timing-function: ease-out;
    opacity: 1; transform: translate(-35%, -75%) rotate(-160deg) scale(0.9); }
  60% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(20deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(20deg) scale(1); }
  80% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-5deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-5deg) scale(1); }
  100% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
            animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }

@keyframes anim-nuts3 { 0% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-45%, -100%) rotate(-10deg) scale(1.1);
            animation-timing-function: ease-in;
    opacity: 1; transform: translate(-45%, -100%) rotate(-10deg) scale(1.1); }
  20% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-35%, -75%) rotate(-160deg) scale(0.9);
            animation-timing-function: ease-out;
    opacity: 1; transform: translate(-35%, -75%) rotate(-160deg) scale(0.9); }
  60% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(20deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(20deg) scale(1); }
  80% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-5deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-5deg) scale(1); }
  100% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
            animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }

@-webkit-keyframes anim-nuts4 { 0% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-60%, -120%) rotate(320deg) scale(1);
            animation-timing-function: ease-in;
    opacity: 1; transform: translate(-60%, -120%) rotate(320deg) scale(1); }
  20% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-60%, -120%) rotate(320deg) scale(1);
            animation-timing-function: ease-out;
    opacity: 1; transform: translate(-60%, -120%) rotate(320deg) scale(1); }
  60% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
  75% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
  85% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
  100% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
            animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }

@keyframes anim-nuts4 { 0% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(-60%, -120%) rotate(320deg) scale(1);
            animation-timing-function: ease-in;
    opacity: 1; transform: translate(-60%, -120%) rotate(320deg) scale(1); }
  20% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(-60%, -120%) rotate(320deg) scale(1);
            animation-timing-function: ease-out;
    opacity: 1; transform: translate(-60%, -120%) rotate(320deg) scale(1); }
  60% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-20deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-20deg) scale(1); }
  75% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(4deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(4deg) scale(1); }
  85% {
    -webkit-animation-timing-function: ease-in; -webkit-transform: translate(0%, 0%) rotate(-2deg) scale(1);
            animation-timing-function: ease-in; transform: translate(0%, 0%) rotate(-2deg) scale(1); }
  100% {
    -webkit-animation-timing-function: ease-out; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1);
            animation-timing-function: ease-out; transform: translate(0%, 0%) rotate(0deg) scale(1); } }

.anim-nuts .nuts { position: absolute; z-index: 100; }

@media screen and (max-width: 767px) { .anim-nuts .nuts img { height: auto; width: 100%; }
  .anim-nuts .nuts.nuts1 { -ms-transform: translate(-10%, -150%) rotate(10deg) scale(2.2); -webkit-transform: translate(-10%, -150%) rotate(10deg) scale(2.2); bottom: -10.9375vw; height: 15.625vw; left: 33.4375vw; opacity: 0; transform: translate(-10%, -150%) rotate(10deg) scale(2.2); visibility: hidden; width: 15.625vw; }
  .anim-nuts .nuts.nuts2 { -ms-transform: translate(-23%, -115%) rotate(290deg) scale(0.8); -webkit-transform: translate(-23%, -115%) rotate(290deg) scale(0.8); bottom: -18.90625vw; height: 15.625vw; opacity: 0; right: 36.09375vw; transform: translate(-23%, -115%) rotate(290deg) scale(0.8); visibility: hidden; width: 15.625vw; }
  .anim-nuts .nuts.nuts5 { bottom: -40vw; height: 75vw; left: -34.6875vw; width: 59.21875vw; z-index: 111; } }

@media screen and (min-width: 768px) { .anim-nuts .nuts img { height: auto !important; width: 100% !important; }
  .anim-nuts .nuts.js-anim-scroll { opacity: 1; visibility: visible; }
  .anim-nuts .nuts.nuts1 { -ms-transform: translate(-5%, -25%) rotate(-10deg) scale(1); -webkit-transform: translate(-5%, -25%) rotate(-10deg) scale(1); bottom: -6.5625vw; opacity: 0; right: 36.21528vw; transform: translate(-5%, -25%) rotate(-10deg) scale(1); visibility: hidden; width: 7.29167vw; }
  .anim-nuts .nuts.nuts2 { -ms-transform: translate(145%, -130%) rotate(320deg) scale(0.9); -webkit-transform: translate(145%, -130%) rotate(320deg) scale(0.9); bottom: -12.70833vw; left: 41.46552%; opacity: 0; transform: translate(145%, -130%) rotate(320deg) scale(0.9); visibility: hidden; width: 6.94444vw; }
  .anim-nuts .nuts.nuts3 { opacity: 0; right: -30px; top: 0; visibility: hidden; width: 8.62069%; }
  .anim-nuts .nuts.nuts4 { opacity: 0; right: -125px; top: 8.62069%; visibility: hidden; width: 8.62069%; }
  .anim-nuts .nuts.nuts5 { bottom: -22.24138%; left: -18.96552%; width: 31.89655%; z-index: 111; } }

@media screen and (min-width: 768px) { .anim-nuts .nuts.nuts1.show { -webkit-transition-delay: 0s; -webkit-transition-duration: 800ms; -webkit-transition-timing-function: ease; opacity: 1; transition-delay: 0s; transition-duration: 800ms; transition-timing-function: ease; visibility: visible; } }

.anim-nuts .nuts.nuts1.on { -ms-transform: translate(0%, 0%) rotate(0deg) scale(1); -webkit-animation: anim-nuts1 2.0s linear; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1); animation: anim-nuts1 2.0s linear; opacity: 1; transform: translate(0%, 0%) rotate(0deg) scale(1); visibility: visible; }

.anim-nuts .nuts.nuts2.show { opacity: 1; visibility: visible; }

@media screen and (min-width: 768px) { .anim-nuts .nuts.nuts2.show { -webkit-transition-delay: 0s; -webkit-transition-duration: 800ms; -webkit-transition-timing-function: ease; transition-delay: 0s; transition-duration: 800ms; transition-timing-function: ease; } }

.anim-nuts .nuts.nuts2.on { -ms-transform: translate(0%, 0%) rotate(0deg) scale(1); -webkit-animation: anim-nuts2 2.0s linear; -webkit-transform: translate(0%, 0%) rotate(0deg) scale(1); animation: anim-nuts2 2.0s linear; transform: translate(0%, 0%) rotate(0deg) scale(1); }

.anim-nuts .anim-nuts-group { -webkit-transition-delay: 0s; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; height: 100%; left: 0; position: absolute; top: 50.60345%; transition-delay: 0s; transition-duration: 0.2s; transition-timing-function: linear; width: 100%; z-index: 100; }

@media screen and (min-width: 768px) { .anim-nuts .anim-nuts-group.inview .nuts.nuts3 { -webkit-animation: anim-nuts3 2.0s linear; animation: anim-nuts3 2.0s linear; opacity: 1; visibility: visible; }
  .anim-nuts .anim-nuts-group.inview .nuts.nuts4 { -webkit-animation: anim-nuts4 2.0s linear; animation: anim-nuts4 2.0s linear; opacity: 1; visibility: visible; } }

/*
--------------------------------------------------------------
 Concept/Fragrance
--------------------------------------------------------------
*/
/*
--------------------------------------------------------------
 Fragrance Area
--------------------------------------------------------------
*/
/*----// Fragrance box //----*/
@-webkit-keyframes frameShine {
  0% { background-size: 100% 100%; }
  40% { background-size: 400% 200%; } /* 0% { background-size: 100% 100%; } 40% { background-size: 100% 180%; } 60% { background-size: 100% 200%; background-position: 0 100%; } 80% { background-size: 150% 200%; background-position: 50% 100%; } 90% { background-size: 150% 100%; background-position: 50% 0; } 100% { background-size: 100% 100%; background-position: 0% 0; } */
  60% {
    background-position: 0 100%; background-size: 300% 200%; }
  80% {
    background-position: 50% 100%; background-size: 150% 200%; }
  90% {
    background-position: 100% 0; background-size: 200% 100%; }
  100% {
    background-position: 0% 0; background-size: 100% 100%; } }
@keyframes frameShine {
  0% { background-size: 100% 100%; }
  40% { background-size: 400% 200%; } /* 0% { background-size: 100% 100%; } 40% { background-size: 100% 180%; } 60% { background-size: 100% 200%; background-position: 0 100%; } 80% { background-size: 150% 200%; background-position: 50% 100%; } 90% { background-size: 150% 100%; background-position: 50% 0; } 100% { background-size: 100% 100%; background-position: 0% 0; } */
  60% {
    background-position: 0 100%; background-size: 300% 200%; }
  80% {
    background-position: 50% 100%; background-size: 150% 200%; }
  90% {
    background-position: 100% 0; background-size: 200% 100%; }
  100% {
    background-position: 0% 0; background-size: 100% 100%; } }

#shea-kukui .sec-fragrance { background: #fff no-repeat center top; background-size: cover; }

#shea-kukui .sec-fragrance__inner { margin: 0 auto; position: relative; }

@media screen and (max-width: 767px) { #shea-kukui .sec-fragrance { background-image: url("../../images/shea-and-kukui/concept_bg_sp.jpg"); background-size: 100vw auto; padding: 8.28125vw 0 0; }
  #shea-kukui .sec-fragrance__inner { padding: 0 3.125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-fragrance { background-image: url("../../images/shea-and-kukui/concept_bg.jpg"); padding: 7.15278vw 0 0; }
  #shea-kukui .sec-fragrance__inner { max-width: 1160px; padding: 0 20px; } }

#shea-kukui .fragrance-box { -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; margin: 0 auto; position: relative; width: 100%; }

#shea-kukui .fragrance-box__bgWrap { background: #fff; }

#shea-kukui .fragrance-box__bgWrap-inner2 { background-position: 5% top; }

@media screen and (max-width: 767px) { #shea-kukui .fragrance-box { -webkit-animation: frameShine 7s ease infinite; -webkit-box-shadow: 0 0 6.25vw 0 rgba(129, 85, 65, 0.35); animation: frameShine 7s ease infinite; background: linear-gradient(142deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 100%); box-shadow: 0 0 6.25vw 0 rgba(129, 85, 65, 0.35); min-height: 249.375vw; padding: 1.5625vw; }
  #shea-kukui .fragrance-box__bgWrap { padding: 0.9375vw; }
  #shea-kukui .fragrance-box__bgWrap-inner { -webkit-animation: frameShine 7s ease infinite; animation: frameShine 7s ease infinite; background: linear-gradient(-142deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 100%); padding: 0.3125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .fragrance-box { -webkit-animation: frameShine 7s ease infinite; -webkit-box-shadow: 0 0 40px 0 rgba(129, 85, 65, 0.35); animation: frameShine 7s ease infinite; background: linear-gradient(-202deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 95%, #cea8a8 100%); box-shadow: 0 0 40px 0 rgba(129, 85, 65, 0.35); padding: 10px; }
  #shea-kukui .fragrance-box__bgWrap { padding: 10px; }
  #shea-kukui .fragrance-box__bgWrap-inner { -webkit-animation: frameShine 7s ease infinite; animation: frameShine 7s ease infinite; background: linear-gradient(202deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 100%); padding: 2px; }
  #shea-kukui .fragrance-box__bgWrap-inner2 { background-image: url("../../images/shea-and-kukui/concept_bg.jpg"); background-size: 120% auto; } }

#shea-kukui .fragrance-box__inner { margin: 0 auto; position: relative; width: 100%; }

@media screen and (max-width: 767px) { #shea-kukui .fragrance-box__inner { background-color: #fff; } }

@media screen and (min-width: 768px) { #shea-kukui .fragrance-box__inner { background-color: rgba(255, 255, 255, 0.6); margin: 0 auto; padding: 5.57621%; } }

#shea-kukui .fragrance-box__title { line-height: 0; margin: 0 auto; width: 100%; }

#shea-kukui .fragrance-box__title img { height: auto; width: 100%; }

#shea-kukui .fragrance-box__txt { line-height: 0; margin: 0 auto; }

#shea-kukui .fragrance-box__items { -ms-flex-pack: justify; -webkit-box-pack: justify; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; margin: 0 auto; width: 100%; }

#shea-kukui .fragrance-box__item { line-height: 0; }

#shea-kukui .fragrance-box__item img { height: auto; }

@media screen and (max-width: 767px) { #shea-kukui .fragrance-box__title img { height: 35.15625vw; }
  #shea-kukui .fragrance-box__txt img { height: 98.125vw; }
  #shea-kukui .fragrance-box__items { -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; width: 90vw; }
  #shea-kukui .fragrance-box__item { width: 45vw; } }

@media screen and (min-width: 768px) { #shea-kukui .fragrance-box__title { max-width: 880px; }
  #shea-kukui .fragrance-box__txt { max-width: 880px; }
  #shea-kukui .fragrance-box__items { max-width: 880px; }
  #shea-kukui .fragrance-box__item { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; } }

/*
--------------------------------------------------------------
 Concept Area
--------------------------------------------------------------
*/
#shea-kukui .sec-concept { -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 105; }

#shea-kukui .sec-concept__inner { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; width: 100%; }

#shea-kukui .sec-concept__inner a:hover { opacity: 0.6; }

#shea-kukui .sec-concept__txtarea { text-align: left; }

#shea-kukui .sec-concept__title { line-height: 0; }

@media screen and (max-width: 767px) { #shea-kukui .sec-concept { background: rgba(255, 255, 255, 0); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(31.25vw, white), to(white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 31.25vw, white 100%); padding-top: 15.625vw; }
  #shea-kukui .sec-concept__inner { background-image: url("../../images/shea-and-kukui/concept_why_bg_sp.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: 87.5vw auto; padding-bottom: 70.46875vw; }
  #shea-kukui .sec-concept__txtarea { margin: 0 auto; width: 87.5vw; }
  #shea-kukui .sec-concept__txt { font-size: 4.0625vw; line-height: 1.92308; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-concept { background: rgba(255, 255, 255, 0); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 150px, white 100%); padding-bottom: 90px; padding-top: 150px; }
  #shea-kukui .sec-concept__inner { background-image: url("../../images/shea-and-kukui/concept_why_bg.jpg"); background-position: right bottom; background-repeat: no-repeat; background-size: 100%; max-width: 1120px; min-height: 392px; }
  #shea-kukui .sec-concept__txtarea { margin-left: 2.23214%; }
  #shea-kukui .sec-concept__txt { font-size: 16px; line-height: 2.375; width: 45.53571%; } }

/*
--------------------------------------------------------------
 Lineup
--------------------------------------------------------------
*/
/*
--------------------------------------------------------------
 Lineup Area
--------------------------------------------------------------
*/
@-webkit-keyframes seabgAnim { 0% { background-position: 0% 0%;
    background-size: 100vw auto; }
  10% { background-position: 0% 0%;
    background-size: 100vw auto; }
  25% { background-position: 0% -3%;
    background-size: 110vw auto; }
  50% { background-position: 0% 0%;
    background-size: 130vw auto; }
  75% { background-position: 0% 3%;
    background-size: 110vw auto; }
  100% { background-position: 0% 0%;
    background-size: 100vw auto; } }
@keyframes seabgAnim { 0% { background-position: 0% 0%;
    background-size: 100vw auto; }
  10% { background-position: 0% 0%;
    background-size: 100vw auto; }
  25% { background-position: 0% -3%;
    background-size: 110vw auto; }
  50% { background-position: 0% 0%;
    background-size: 130vw auto; }
  75% { background-position: 0% 3%;
    background-size: 110vw auto; }
  100% { background-position: 0% 0%;
    background-size: 100vw auto; } }

#shea-kukui .sec-lineup { background: #f3f3f3 repeat center top; background-repeat: repeat-y; background-size: 100%; }

#shea-kukui .sec-lineup__inner { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; position: relative; width: 100%; }

#shea-kukui .sec-lineup__title { line-height: 0; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup { background-image: url("../../images/shea-and-kukui/lineup_bg-top.png"); background-position: center top; background-repeat: no-repeat; background-size: 100%; min-height: 1734.375vw; padding: 17.1875vw 0 10.3125vw; }
  #shea-kukui .sec-lineup__title img { height: 16.875vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup { background-image: url("../../images/shea-and-kukui/lineup_bg-body.png"); padding-top: 120px; }
  #shea-kukui .sec-lineup:before { background-image: url("../../images/shea-and-kukui/lineup_bg-top.png"); background-repeat: no-repeat; background-size: 100%; content: ""; height: 47.70833vw; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; }
  #shea-kukui .sec-lineup__inner { max-width: 1060px; padding: 0 20px; padding-bottom: 70px; } }

#shea-kukui .sec-lineup__anchor-items { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; }

#shea-kukui .sec-lineup__anchor-items-li { line-height: 0; }

#shea-kukui .sec-lineup__anchor-items-li a { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 0; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup__anchor-items { margin-bottom: 6.25vw; }
  #shea-kukui .sec-lineup__anchor-items-li a img { height: 21.71875vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup__anchor-items { margin-bottom: 40px; width: 81.17647%; } }

#shea-kukui .sec-lineup .lpbox { background-color: #fff; border: solid #f0ddd6; position: relative; }

#shea-kukui .sec-lineup .lpbox__inner { background-position: center top; background-repeat: repeat-y; background-size: 100% auto; width: 100%; }

#shea-kukui .sec-lineup .lpbox__title { line-height: 0; text-align: center; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox { border-left: none; border-right: none; border-width: 0.9375vw; margin-bottom: 7.8125vw; margin-bottom: 6.25vw; padding: 0.3125vw 0; }
  #shea-kukui .sec-lineup .lpbox:last-child { margin-bottom: 0; }
  #shea-kukui .sec-lineup .lpbox__inner { background-image: url("../../images/shea-and-kukui/lpbox_bg-img_sp.png"); background-size: cover; padding: 0; padding-bottom: 1.25vw; }
  #shea-kukui .sec-lineup .lpbox__title { margin: 0 auto; width: 87.5vw; }
  #shea-kukui .sec-lineup .lpbox__title img { height: 22.65625vw; width: 100%; }
  #shea-kukui .sec-lineup .lpbox.lpbox1 { min-height: 106.25vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox1 .item1 .lpbox__child-fig img { height: 76.25vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox2 { min-height: 97.03125vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox2 .item1 .lpbox__child-fig img { height: 52.34375vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox3 { min-height: 292.34375vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox3 .item1 .lpbox__child-fig img { height: 73.75vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox3 .item2 .lpbox__child-fig img { height: 55.3125vw; }
  #shea-kukui .sec-lineup .lpbox.lpbox3 .item3 .lpbox__child-fig img { height: 70.3125vw; }
  #shea-kukui .sec-lineup .lpbox.facial1 { min-height: 342.34375vw; }
  #shea-kukui .sec-lineup .lpbox.facial1 .item1 .lpbox__child-fig img { height: 68.75vw; }
  #shea-kukui .sec-lineup .lpbox.facial1 .item2 .lpbox__child-fig img { height: 55.3125vw; }
  #shea-kukui .sec-lineup .lpbox.facial1 .item3 .lpbox__child-fig img { height: 47.8125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox { border-width: 4px; margin-bottom: 30px; padding: 2px; }
  #shea-kukui .sec-lineup .lpbox__inner { background-image: url("../../images/shea-and-kukui/lpbox_bg-img.png"); padding: 0; padding-bottom: 20px; } }

#shea-kukui .sec-lineup .lpbox__child { -webkit-box-sizing: border-box; background-color: #fff; border: solid #f0ddd6; box-sizing: border-box; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child { -webkit-box-shadow: 0 0 4.6875vw 0 rgba(139, 60, 62, 0.65); border-width: 0.9375vw; box-shadow: 0 0 4.6875vw 0 rgba(139, 60, 62, 0.65); margin: 0 auto 6.25vw auto; padding: 0 3.75vw 6.25vw 3.75vw; width: 87.5vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child { -webkit-box-shadow: 0 0 30px 0 rgba(139, 60, 62, 0.65); border-width: 6px; box-shadow: 0 0 30px 0 rgba(139, 60, 62, 0.65); margin: 0 auto 40px auto; padding: 2.97619% 3.57143%; width: 90.27778%; } }

#shea-kukui .sec-lineup .lpbox__child-label { line-height: 0; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child-label img { height: 17.96875vw; } }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child-text { font-size: 4.0625vw; line-height: 1.76923; margin-bottom: 4.6875vw; text-align: left; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child-text { margin-bottom: 33px; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } }

#shea-kukui .sec-lineup .lpbox__child-fig { line-height: 0; }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child-fig { width: 41.28329%; } }

#shea-kukui .sec-lineup .lpbox__child-txtarea { text-align: left; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child-txtarea .summary { font-size: 4.0625vw; line-height: 1.92308; margin-bottom: 3.125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child-txtarea { margin-left: auto; width: 55.69007%; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .summary { margin-bottom: 24px; } }

@-webkit-keyframes prodFrameShine { 0% { background-size: 100% 100%; }
  40% { background-size: 400% 200%; }
  60% {
    background-position: 0 100%; background-size: 300% 200%; }
  80% {
    background-position: 50% 100%; background-size: 150% 200%; }
  90% {
    background-position: 100% 0; background-size: 200% 100%; }
  100% {
    background-position: 0% 0; background-size: 100% 100%; } }

@keyframes prodFrameShine { 0% { background-size: 100% 100%; }
  40% { background-size: 400% 200%; }
  60% {
    background-position: 0 100%; background-size: 300% 200%; }
  80% {
    background-position: 50% 100%; background-size: 150% 200%; }
  90% {
    background-position: 100% 0; background-size: 200% 100%; }
  100% {
    background-position: 0% 0; background-size: 100% 100%; } }

#shea-kukui .sec-lineup .lpbox__child-txtarea .databox { background-color: #f7eeea; }

#shea-kukui .sec-lineup .lpbox__child-txtarea .databox__inner-bg { background-color: #f7eeea; }

#shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop { font-weight: 700; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child-txtarea .databox { padding: 1.5625vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__inner { -webkit-animation: prodFrameShine 5s ease infinite; animation: prodFrameShine 5s ease infinite; background: linear-gradient(-60deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 100%); padding: 0.625vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__inner-bg { padding: 3.75vw 2.65625vw 5vw 2.65625vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop { font-size: 3.75vw; line-height: 1.41667; margin-bottom: 4.375vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-name { margin-bottom: 0.625vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price { font-size: 3.75vw; line-height: 1.17647; margin-left: 1.25vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price .yen { margin-right: 0.46875vw; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price .val { font-size: 5.3125vw; line-height: 1; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox .btn-detail { display: block; line-height: 0; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox .btn-detail img { height: 14.0625vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child-txtarea .databox { padding: 6px; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__inner { -webkit-animation: prodFrameShine 5s ease infinite; animation: prodFrameShine 5s ease infinite; background: linear-gradient(120deg, #cea8a8 0%, #d6b6a7 10%, #a4745e 37%, #a4745e 69%, #f1c8bb 100%); padding: 3px; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__inner-bg { padding: 4.46429% 4.6875% 5.58036% 4.6875%; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop { font-size: 16px; line-height: 1.625; margin-bottom: 17px; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price { font-size: 14px; margin-left: 6px; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price .yen { margin-right: 2px; }
  #shea-kukui .sec-lineup .lpbox__child-txtarea .databox__prop-price .val { font-size: 20px; line-height: 1; } }

#shea-kukui .sec-lineup .lpbox__child .howto { color: #a76264; font-weight: 700; }

#shea-kukui .sec-lineup .lpbox__child .howto__title { border: dotted #a76264; border-left: none; border-right: none; text-align: center; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox__child .howto__title { border-width: 0.3125vw; font-size: 4.375vw; margin-bottom: 1.25vw; padding: 1.5625vw 0; }
  #shea-kukui .sec-lineup .lpbox__child .howto__txt { font-size: 3.4375vw; line-height: 1.77273; margin-bottom: 5.3125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox__child .howto { margin-bottom: 28px; }
  #shea-kukui .sec-lineup .lpbox__child .howto__title { border-width: 2px; font-size: 18px; margin-bottom: 11px; padding: 8px 0; }
  #shea-kukui .sec-lineup .lpbox__child .howto__txt { font-size: 14px; line-height: 2; padding: 0 3px; } }

#shea-kukui .sec-lineup .lpbox.facial1 { border-color: #d6babb; }

@media screen and (max-width: 767px) { #shea-kukui .sec-lineup .lpbox.facial1 .lpbox__inner { background-image: url("../../images/shea-and-kukui/lpbox_facecare_bg-img_sp.png"); } }

@media screen and (min-width: 768px) { #shea-kukui .sec-lineup .lpbox.facial1 .lpbox__inner { background-image: url("../../images/shea-and-kukui/lpbox_facecare_bg-img.png"); } }

/*
--------------------------------------------------------------
 Item Set
--------------------------------------------------------------
*/
/*
--------------------------------------------------------------
 Movie
--------------------------------------------------------------
*/
/*
--------------------------------------------------------------
 Bottom Button
--------------------------------------------------------------
*/
#shea-kukui .sec-bottom { -webkit-box-sizing: border-box; background-color: #fff; background-size: cover; box-sizing: border-box; }

@media screen and (max-width: 767px) { #shea-kukui .sec-bottom { background-image: url("../../images/shea-and-kukui/bg_link-sk_sp.jpg"); padding: 14.53125vw 0; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-bottom { background-image: url("../../images/shea-and-kukui/bg_link-sk.jpg"); padding: 92px 0 107px 0; }
  #shea-kukui .sec-bottom__inner { margin: 0 auto; max-width: 1160px; padding: 0 20px; } }

/*
--------------------------------------------------------------
 Movie
--------------------------------------------------------------
*/
#shea-kukui .sec-movie { background-position: center top; background-repeat: no-repeat; background-size: cover; }

#shea-kukui .sec-movie__inner { line-height: 0; margin: 0 auto; }

#shea-kukui .sec-movie__title { line-height: 0; }

#shea-kukui .sec-movie__video { background-color: #fff; line-height: 0; }

#shea-kukui .sec-movie__video img { width: 100%; }

@media screen and (max-width: 767px) { #shea-kukui .sec-movie { background-image: url("../../images/shea-and-kukui/movie_bg_sp.png"); padding-bottom: 15.15625vw; padding-top: 14.0625vw; }
  #shea-kukui .sec-movie__inner { width: 93.75vw; }
  #shea-kukui .sec-movie__title img { height: 19.53125vw; } }

@media screen and (min-width: 768px) { #shea-kukui .sec-movie { background-image: url("../../images/shea-and-kukui/movie_bg.png"); padding: 110px 0; }
  #shea-kukui .sec-movie__inner { max-width: 1160px; padding: 0 20px; } }