@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Noto+Sans+JP:wght@400;700&family=Oswald&display=swap');
:root {
    --color-orange: #FFC500;
    --color-yellow: #FFF9D8;
    --color-blue: #337CF1;
    --color-black: #393A41;
    --color-green: #48C3D9;
    --color-red: #C90101;
    --fs-large: 1.5rem;
    --ff-serif:游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}
/*ビューポート設定*/
body {
    // PC用の横幅を指定
    min-width: 768px;
}
// スマートフォンのブレイクポイント
@media screen and (max-width: 767px){
    body {
        // 初期化
        min-width: initial;
    }
}

html {
    font-size: 16;
    color: var(--color-black);
    scroll-behavior: smooth;
}
@media screen and (max-width: 640px){
    html , body{
        font-size: 12;
    }
}
body, h1, h2, h3, h4 {
    font-family: Century Gothic, "Helvetica Neue", 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
    background: none
}
sub, sup {font-size: .8rem;color: var(--color-black)}
img {vertical-align: top;}
p {color: inherit; line-height: 1.75;}
p:last-child {margin-bottom: 0}

.container-small {
    max-width: 1080px;
}
@media screen and (max-width: 991px) {
    .container {padding: 0 10px;}
}

section {
    padding-top: 60px;
    padding-bottom: 60px
}
.uk-text-small {line-height: 1;}
.uk-text-lead {font-feature-settings: 'palt';}
.ff-serif {
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}
.ff-dancing { font-family: 'Dancing Script', cursive; !important}
.ff-oswald { font-family: 'Oswald', sans-serif;}
.fs-larger {font-size: 125%}
.fs-smaller {font-size: 80%}
.fs-100 {font-size:6.25rem}
.fs-40 {font-size:2.5rem}
.fs-32 {font-size:2rem}
.fs-30 {font-size:1.875rem}
.fs-26 {font-size: 1.625rem}
.fs-20 {font-size: 1.25rem}
.bg-blue {background-color: #EDF5FA}
.bg-gray {background-color: #E2E2E2}
.bg-yellow {background-color: #FFF9D8}
.c-orange {color: var(--color-orange)}
.c-blue {color: var(--color-blue)}
.c-green {color: var(--color-green)}
.c-red {color: var(--color-red)}
.lead {font-size: 2rem;font-weight: 700;text-align: center;font-feature-settings: 'palt';}
.lead-orange {color: var(--color-orange); font-size: 3rem;font-weight: 700; text-align: center; font-feature-settings: 'palt';}
.lead-blue {color: var(--color-blue); font-size: 2rem; font-weight: 700;font-family: var(--ff-serif); font-feature-settings: 'palt';letter-spacing: .05em;}
.yellow-line {background:linear-gradient(transparent 70%, var(--color-orange) 0%);}
.waaai {
    display: inline-block;
    position: relative
}
@media screen and (max-width:767px) {
    .lead {font-size: 1.5rem;}
    .lead-orange {font-size: 2rem;}
    .lead-blue {font-size: 1.75rem;letter-spacing: 0;}
    .uk-text-small { font-size: .625rem;}
    .fs-100 {font-size: 4rem;}
}

.shirocara_ttl {
    background: url(../img/bg_kv.jpg) no-repeat;
    background-size: cover;
    text-align: left;
    padding-bottom: 0;
}
.shirocara_ttl h1 {
    margin: 0 auto;
}
@media screen and (max-width:767px) {
    .shirocara_ttl {
        padding: 0;
        background: none
    }
    .shirocara_ttl .container {
        padding: 0
    }
}
.sec_product {
    background: url(../img/bg_product.png) no-repeat;
    background-size: cover;
    padding-top: 0;
    padding-bottom: 0
}
@media screen and (max-width:767px) {
    .sec_product {
        background-image: url(../img/bg_product_sp.png);
    }
    .sec_product .uk-grid > div:first-child img,
    .sec_product .btn_amazon img {
        max-width: 75%;
        margin: auto;
        display: block;
    }
}
.sec_product .container {
    padding-top: 30px;
    padding-bottom: 30px
}
.btn_amazon {
    background: var(--color-orange);
    text-align: center;
    font-weight: 700;
    padding: 20px 10px;
}
.btn_amazon p {
    color: #000;
    font-size: 24px;
    margin-bottom: 0
}
.sec_nayami {
    background-image: url(../img/bg_01_img.png), url(../img/bg_01.jpg);
    background-size: auto, cover;
    background-position: left bottom, 0 0;
    background-repeat: no-repeat, no-repeat;
    padding: 30px 10px
}
@media screen and (max-width:767px) {
    .sec_nayami {
        background-size: 50%, cover;
        background-position: -20px 105%, 0 0;
        padding: 80px 10px;
    }
}
.sec_solution {
    background: url(../img/bg_02.jpg) no-repeat;
    background-size: cover
}
@media screen and (max-width:767px) {
    .sec_solution {background-image: url(../img/bg_02_sp.jpg);}
}
.sec_solution h2 {
    font-size: 4.5rem;
    line-height: 1.5;
    margin: 30px auto
}
@media screen and (min-width:768px) {
    .sec_solution h2 {margin-top: 10vw;}
}
@media screen and (max-width:767px) {
    .sec_solution h2{font-size: 3rem;}
}
.sec_solution h2 img {
    vertical-align: baseline
}
.sec_solution h2 span {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 3px
}
.sec_solution h2 .ff-serif {
    font-weight: 700;
    font-size: inherit;
}
.waai {
    position: relative;
    display: inline-block;
}
.waai::before, .waai::after {
    content: "";
    width: 0;
    height: 90%;
    display: inline-block;
    position: absolute;
    border-left: 2px solid #333;
    top: 5%;
}
.waai::before {
    left: -10px;
    transform: rotate(-28deg);
}
.waai::after {
    right: -10px;
    transform: rotate(28deg);
}
.waai._w2::before, .waai._w2::after {
    border: none;
    background: url(../img/waai.svg) no-repeat;
    width: 1em;
    height: 1em;
    left: -1.5em;
    top: 50%;
    background-size: contain;
    transform: translateY(-50%);
}
.waai._w2::after {
    transform: scale(-1, 1) translateY(-50%);
    left: unset;
    right: -1.5em
}
@media screen and (max-width:767px) {
    .waai._w2::before, .waai._w2::after {width: 1.5em; height: 1.5em;}
}
.solution_box {
    border: 1px solid var(--color-blue);
    background: #fff;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto ;
}
@media screen and (min-width:768px) {
    .solution_box {margin-top: -70px}
}
.solution_box ul {
    padding-left: 0;
    margin-bottom: 0
}
.solution_box ul li {
    margin-bottom: 0
}
.solution_box ul li:not(:last-child) {
    border-bottom: 1px solid #ddd
}
.solution_box ul li a {
    color: var(--color-black);
    position: relative;
    display: block;
    padding: 15px 0
}
.solution_box ul li a::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--color-blue);
    border-right: 1px solid var(--color-blue);
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right: 0
}
.solution_box ul li a:hover {text-decoration: none}
.solution_box ul li a:hover > div > div:last-child {
  text-decoration: underline;
}
.solution_box ul li .ff-dancing,
.sec_point h2 .ff-dancing,
.pickup-box .ff-dancing {
    background: var(--color-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.75rem;
    padding: 10px;
    width: 4.5em
}
.solution_box ul li .ff-dancing .larger,
.sec_point h2 .ff-dancing .larger,
.pickup-box .ff-dancing {
    padding-left: 3px;
    font-size: 125%
}
.solution_box ul li .txt {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left
}
@media screen and (max-width:767px) {
    .solution_box ul li .txt {
        font-size: 1rem;
    }
}
/*ポイント*/
.effect::before {
    background: url(../img/seme.png) no-repeat;
    background-size: auto;
    content: '';
    background-size: contain;
    display: inline-block;
    width: 419px;
    height: 417px;
    position: absolute;
    right: -260px;
    top: -260px;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .effect::before {
        width: 180px;
        height: 180px;
        right: -60px;
        top: -120px;
    }
}
.sec_point h2 {
    margin: 80px auto 80px;
    border-top: 2px solid var(--color-blue) !important;
    border-bottom: 2px solid var(--color-blue);
    padding: 80px 0 10px;
    position: relative;
    font-weight: 700
}
.sec_point h2 .uk-background-default {
    display: inline-block;
    margin: 0 auto;
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 20px
}
.sec_point h2 .ff-dancing,
.pickup-box  .ff-dancing{
    font-size: 2.35rem;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    line-height: 1
}
.sec_point h2 .ff-dancing .larger,
.pickup-box .ff-dancing .larger {
  margin-top: -.5em;
}
.sec_point h2 .uk-text-bold {
    color: var(--color-blue);
    font-size: 120%;
    margin: 15px auto 0;
}
.triangle {
    position: relative;
    margin-bottom: 60px
}
.triangle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 90px 0 90px;
    border-color: var(--color-orange) transparent transparent transparent;
    position: absolute;
    bottom: -40px;
    left: calc(50% - 90px);
}
@media screen and (max-width:767px) {
    .triangle::after {
        border-width: 30px 65px 0 65px;
        left: calc(50% - 65px);
        bottom: -30px;
    }
}
.effect .ttl,
#point01 .seme-box .ttl {
    background: var(--color-orange);
    padding: 10px;
    font-size: 2rem
}
.effect .ttl .fs-smaller,
#point01 .seme-box .ttl .fs-smaller {
    font-size: 70%
}
.effect [class*="box0"] ,
#point01 .seme-box [class*="box0"] {
    position: relative;
    padding: 20px;
    font-size: 1.25rem
}
#point01 .seme-box .box01 {
    background: #FFFAEA;
}
#point01 .seme-box .box02 {
    background: #FFEFBA;
    padding-top: 60px
}
#point01 .seme-box [class*="box0"]::after {
    content: '';
    width: 100%;
    height: 0;
    border-style: solid;
    border-width: 40px 550px 0 550px;
    border-color: #FFFAEA transparent transparent transparent;
    position: absolute;
    bottom: -40px;
    left: 0;
    z-index: 1
}
#point01 .seme-box .box02::after {
    border-color: #FFEFBA transparent transparent transparent;
}
@media screen and (max-width:767px) {
    #point01 .seme-box [class*="box0"]::after {
        border-width: 40px 47vw 0 47vw;
    }
}
.midasi {
    font-size: 1.75rem
}
@media screen and (max-width:767px) {
    .midasi {
        text-align: center;
    }
}
.result .lead {
    font-size: 2.5rem;
    text-align: left
}
.result .lead > * b {
    background: url(../img/nami_orange.svg) repeat-x;
	background-position: bottom left;
}
.result .lead .c-orange {
    font-size: 3.125rem;
    padding-left: 1em
}
@media screen and (max-width:767px) {
    .result .lead {font-size: 2rem;}
    .result .lead .c-orange {padding-left: 0; font-size: 2.75rem;}
    .result {
        position: relative;
    }
    .result .float-txt {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 62%;
    }
}
@media screen and (max-width:390px) {
    .result .lead {font-size: 7.45vw;}
}
.mamori-box.effect {
    z-index: 2
}
.mamori-box.effect::before {
    background-image: url(../img/mamori.png);
    z-index: 1;
    left: -260px;
}
@media screen and (max-width:767px) {
    .mamori-box.effect::before {
        left: -60px;
    }
}
.mamori-box .ttl {
    background: var(--color-green);
    color: #fff;
}
.mamori-box .box01 {
    background: #DEF3F7;
    padding: 20px
}
.mamori-box .box01 .uk-background-default {
    display: inline-block;
    position: relative;
    padding: 10px 50px;
    font-size: 1.25rem;
    font-weight: 700
}
@media screen and (min-width:768px) {
    .mamori-box .box01 .question-q .uk-background-default {
        margin-left: 40px
    }
    .mamori-box .box01 .question-a .uk-background-default {
        margin-right: 40px
    }
    .mamori-box .box01 :is(.question-q, .question-a) .uk-background-default::before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 17px 24px 17px 0;
        border-color: transparent #fff transparent transparent;
        position: absolute;
    }
    .mamori-box .box01 .question-q .uk-background-default::before {
        left: -24px
    }
    .mamori-box .box01 .question-a .uk-background-default::before {
        border-width: 17px 0 17px 24px;
        border-color: transparent transparent transparent #fff;
        right: -24px
    }
}
@media screen and (max-width:767px) {
    .mamori-box .box01 .question-q {
        margin-bottom: 30px;
    }
    .mamori-box .box01 :is(.question-q, .question-a) .uk-width-1-4 {
        position: absolute;
        z-index: 1;
        left: 0;
    }
    .mamori-box .box01 .question-a .uk-width-1-4 {
        right: 0;
        left: unset;
    }
    .mamori-box .box01 .uk-background-default {
        font-size: 1rem;
        padding: 10px 20px;
    }
    .mamori-box .box01 .question-q .uk-background-default {
        padding-left: 75px;
    }
    .mamori-box .box01 .question-a .uk-background-default {
        padding-right: 75px;
    }
}
.mamori-box .box01 :is(.question-q, .question-a) .uk-background-default::after {
    content: '';
    background: url(../img/q.svg) no-repeat;
    background-size: contain;
    width: 104px;
    height: 115px;
    display: inline-block;
    position: absolute;
    top: -50px
}
.mamori-box .box01 .question-q .uk-background-default::after {
    right: -50px
}
.mamori-box .box01 .question-a .uk-background-default::after {
    background-image: url(../img/a.svg);
    left: -60px
}
@media screen and (max-width:767px) {
    .mamori-box .box01 :is(.question-q, .question-a) .uk-background-default::after {
        width: 50px;
        height: 60px;
        right: -15px;
        top: 39%;
    }
    .mamori-box .box01 .question-a .uk-background-default::after {
        left: unset;
        right: 75px;
        top: 66%;
    }
}
.mamori-box .box02 {
    padding: 20px;
    background: #fff
}
#point02 .result .result .lead {
    font-size: 2rem;
}
#point02 .result .lead > * b {
    background-image: url(../img/nami_blue.svg)
}
.purun {
    background: url(../img/bg_purun.png) no-repeat;
    background-size: cover;
    position: relative;
    padding: 20px
}
.purun::after {
    content: '';
    background: url(../img/img_14.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 675px;
    height: 291px;
    position: absolute;
    right: -130px;
    bottom: -130px
}
@media screen and (max-width:767px) {
    .purun::after {
        background-image: url(../img/img_14_sp.png);
        position: relative;
        margin-top: -20px;
        right: unset;
        bottom: unset;
        width: 100%;
        height: 143px
    }
}
/*美白*/
.sec_bihaku {
    background: url(../img/bg_bihaku.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    padding-bottom: 10px;
}
@media screen and (max-width:767px) {
    .sec_bihaku {
        background-image: url(../img/bg_bihaku_sp.jpg);
    }
}
.sec_bihaku .container {
    padding-top: 150px;
}
.sec_bihaku h2 {
    font-size: 2.5rem
}
@media screen and (max-width:767px) {
    .sec_bihaku .container { padding-top: 0;}
    .sec_bihaku h2 { font-size: 2rem; margin-bottom: 50%;}
}
.sec_bihaku .uk-margin-large {
    margin-bottom: 100px
}
/*医薬部外品です*/
.sec_iyaku .bg-blue {
    border-radius: 20px;
    position: relative;
    padding: 20px
}
.sec_iyaku .bg-blue::after {
    content: '';
    background: url(../img/img_15.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 317px;
    height: 262px;
    position: absolute;
    right: -305px;
    top: 0;
}
.sec_iyaku .bg-blue .border {
    border-bottom: 1px solid #000;
    margin-bottom: 20px
}
.sec_iyaku .border-box {
    border-radius: 20px;
    padding: 60px 20px 20px;
    border: 1px solid var(--color-orange);
    position: relative
}
.sec_iyaku .border-box::before {
    content: '';
    background: url(../img/seme.png) no-repeat;
    background-size: contain;
    width: 200px;
    height: 200px;
    position: absolute;
    left: calc(50% - 100px);
    top: -120px
}
.sec_iyaku .border-box > * {
    margin: 0 auto
}
.sec_iyaku .border-box._mamori {
    border-color: var(--color-green);
}
.sec_iyaku .border-box._mamori::before {
    background-image: url(../img/mamori.png)
}
.iyakubugai {
	font-size: 84%
}
@media screen and (max-width:767px) {
    .sec_iyaku .bg-blue {
        margin-bottom: 80px;
    }
    .sec_iyaku .bg-blue::after {
        width: 157px;
        height: 130px;
        right: calc(50% - 100px);
        top: 80%;
    }
    .sec_iyaku .border-box {
        margin-top: 80px;
    }
	.iyakubugai .fs-20 {
	  font-size: 1rem;
	}
}
/*成分*/
.sec_component {
    background-image: url(../img/bg_component.jpg);
    background-size: cover;
    padding-top: 100px
}
@media screen and (max-width:767px) {
    .sec_component {background-image: url(../img/bg_component_sp.jpg);}
}
.sec_component .container::before,
.sec_question .container::before,
.sec_howto .container::before {/*コーナー名背景*/
    content: 'component';
    color: var(--color-blue);
    font-family: 'Dancing Script', cursive;
    font-size: 120px;
    opacity: .15;
    position: absolute;
    left: -20px;
    top: -100px;
    transform: rotate(-10deg);
}
.sec_question .container::before {
    content: 'question';
}
.sec_howto .container::before {
    content: 'how to use';
}
@media screen and (max-width: 767px) {
    .sec_question ,
    .sec_howto {
        padding-top: 100px;
    }
    .sec_component .container::before,
    .sec_question .container::before,
    .sec_howto .container::before {
        font-size: 75px;
        left: 0;
    }
}
.pickup-box {
    position: relative;
    background: rgba(255,255,255, .9);
    padding: 30px;
    margin: 60px 0
}
.pickup-box .ff-dancing {
    position: absolute;
    left: -20px;
    top: -50px
}
@media screen and (max-width:767px) {
    .pickup-box .ff-dancing {
        width: 90px;
        height: 90px;
        font-size: 1.5rem;
        left: -5px;
        top: -60px;
    }
}
.pickup-box .uk-grid > div:nth-child(2) {
    position: relative
}
.pickup-box .uk-grid > div:nth-child(2)::before {
    content: '';
    background: url(../img/mark.svg) no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    width: 60px;
    height: 51px;
    left: -30px
}
@media screen and (max-width:767px) {
    .pickup-box {
        padding: 30px 20px;
        margin: 75px 0;
    }
    .pickup-box .uk-grid > div:nth-child(2) .c-blue {
        padding-left: 50px;
    }
    .pickup-box .uk-grid > div:nth-child(2)::before {
        left: 20px;
        width: 44px;
        height: 38px;
    }
}
/*成分2*/
.sec_component2 {
    background-image: url(../img/bg_seibun.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
}
@media screen and (max-width:767px) {
    .sec_component2 {background-image: url(../img/bg_seibun_sp.png);}
}
.reason .uk-background-default {
    padding: 30px
}
.reason .uk-background-default .fs-larger {
    font-size: 2.25rem
}
.seibun-box {
    border: 1px solid var(--color-blue);
    background: #fff
}
.seibun-box .midasi {
    background-color: var(--color-blue);
    color: #fff;
    font-weight: 700;
    padding: 30px
}
/*結果*/
.sec_question .bg-yellow {
    font-size: 2rem;
    padding: 20px 10px;
    font-weight: 700;
}
.sec_question .bg-yellow .big {
    font-size: 3.65rem
}
.sec_question .bg-yellow .bigger {
    font-size: 4rem
}
.sec_question .border {
    padding: 30px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
@media screen and (max-width:767px) {
    .sec_question .bg-yellow {font-size: 1.5rem;}
    .sec_question .bg-yellow :is(.big, .bigger) {font-size: 2rem;}
}
/*インスタグラムで話題*/
.sec_insta {
    background: url(../img/bg_insta.jpg);
    background-size: cover;
}
/*使い方*/
.sec_howto .triangle {
    padding-bottom: 10px;
}
.sec_howto .triangle::after {
    border-color: var(--color-blue) transparent transparent transparent;
}
.scene-box {
    margin: 60px 0;
}
.scene-box .ff-dancing {
    font-size: 3.25rem;
}
.scene-box .img {
    position: relative;
}
.scene-box .img::before {
    content: '';
    border-radius: 200%;
    display: inline-block;
    width: 400px;
    height: 400px;
    position: absolute;
    background-color: #EDEDFA;
    box-shadow: 0 0 60px 60px rgba(237, 237, 250, 1);
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    z-index: -1;
}
.scene-box:is(._box2, ._box4) .img::before {
    left: unset;
    right: -100px;
}
.scene-box._box2 .img::before {
    background-color: rgba(72, 195, 217, .2);
    box-shadow: 0 0 60px 60px rgba(72, 195, 217, .2);
}
.scene-box._box3 .img::before {
    background-color: rgba(51, 124, 241, .2);
    box-shadow: 0 0 60px 60px rgba(51, 124, 241, .2);
}
.scene-box._box4 .img::before {
    background-color: rgba(37, 193, 175, .2);
    box-shadow: 0 0 60px 60px rgba(37, 193, 175, .2);
}
.scene-box._box5 .img::before {
    background-color: rgba(145, 199, 121, .2);
    box-shadow: 0 0 60px 60px rgba(145, 199, 121, .2);
}
@media screen and (max-width:767px) {
    .scene-box {margin: 40px 0;}
    .scene-box > div {
        max-width: 85%;
    }
    .scene-box > div:nth-child(2) {
        margin-top: -50px;
        position: relative;
        z-index: 1;
    }
    .scene-box:is(._box2, ._box4) > div {
        margin-left: auto;
    }
    .scene-box > div .lead-blue {
        margin-top: 20px;
    }
    .scene-box .img::before {
        width: 300px;
        height: 300px;
    }
}
/*透明感のある肌へ*/
.sec_pureskin {
    background: url(../img/bg_pureskin.jpg) no-repeat;
    background-size: contain;
    background-position: 100% 50%;
}
.tuzuku {
    background:linear-gradient(transparent 70%, #FFF9D8 0%);
    font-size: 60px;
}
.sec_pureskin h2 + img {margin-top: 30px}
@media screen and (max-width:1400px) {
    .sec_pureskin h2 + img {max-width: 42%;}
}
@media screen and (max-width:767px) {
    .sec_pureskin {
		background-size: cover;
		padding-top: 20px;padding-bottom: 20px;
	}
	.sec_pureskin h2 .uk-padding-small {padding: 5px}
	.sec_pureskin div p.lead {margin-bottom: 0}
    .uk-margin-large {margin: 20px auto 0 !important;}
    .tuzuku {font-size: 2rem;}
}
/*FAQ*/
.uk-accordion-title,
.uk-accordion-content {
    position: relative;
    padding: 20px 40px 20px 62px;
}
.uk-accordion-title::after,
.uk-accordion-content::after {
    content: "Q";
    color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    text-align: center;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Dancing Script', cursive;
    font-size: 2rem;
}
.uk-accordion-content::after {
    content: "A";
    color: var(--color-blue);
    top: 35px;
}
.uk-accordion .uk-accordion-title {
    border-top: 1px solid #7D7E81;
    background: #F4F4F5;
}

#float-bnr {
    background: var(--color-orange);
    padding: 10px 0 0;
    opacity: 0;
}
#float-bnr .container {
    position: relative;
}
#float-bnr .container::before {
    content: '';
    background: url(../img/float_icn.png) no-repeat;
    background-size: contain;
    display: inline-block;
    width: 85px;
    height: 85px;
    position: absolute;
    left: -10px;
    top: -60px;
}
#float-bnr.is-show {
    opacity: 1;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
@media screen and (max-width:767px) {
    #float-bnr .container::before {
        width: 60px;
        height: 60px;
        top: -30px;
        left: 0;
    }
    #float-bnr .uk-grid > div:nth-child(2) img {
        max-width: 160px;
        display: block;
        margin: 0 auto;
    }
}
footer {
    margin-top: 0;
    padding-bottom: 80px;
}