@charset 'UTF-8';
/* --------------------------------------------------------------------------------
*   common
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*   text / font
-------------------------------------------------------------------------------- */
.discoverMore .tit,
.discoverMore .list .item .text,
#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .textWrap .tit,
#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .textWrap .subTit01,
#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .tit span,
#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(2) .text
{
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    font-style: normal;
}

.colorDetail .text,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .tit,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .num,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .num,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .about,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .insta .text,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) > .link,
#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .tit,
#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .tit
{
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-style: normal;
}

#footer .copy,
#header .list .item
{
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-style: normal;
}

.toTop .text,
.back .text,
.colorDetail .num,
#modal.modal_abtart .inner .boxWrap .box .boxIn > .tit,
#barba-wrapper.id_products_water_based .section01 .block01 .scroll .text,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .tit,
#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit,
#barba-wrapper.id_products_water_based .section01 .block05 .colorList .colorBall,
#barba-wrapper.id_products_water_based .section01 .block05 .btn,
#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .text,
#barba-wrapper.id_about .section01 .block01 .scroll .text,
#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .text,
#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap .text,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .tag,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4) .tit,
#barba-wrapper.id_howtouse_detail .section01 .block01 .scroll .text
{
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-style: normal;
}

.plane .num,
.plane .text,
#loading .loadingPercent,
#menu .inner .list .item .tit,
.slider .sliderInner .item .box .text,
#modal .inner .boxWrap .box > .text,
#modal.modal_products .inner .boxWrap .box .colorList .colorBall,
#modal.modal_color_chart .inner .boxWrap .box .tit,
#id_color .cssRenderer .tit,
#barba-wrapper.id_top .section01 .inner .sliderTop .item .category .num,
#barba-wrapper.id_top .section01 .inner .sliderTop .item .category .categorytext,
#barba-wrapper.id_top .section01 .inner .sliderTop .item .tit,
#barba-wrapper.id_top .section01 .inner .sliderTop .item .seeMore .textIn,
#barba-wrapper.id_products_water_based .section01 .block01 > .text,
#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .subTit,
#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .tit,
#barba-wrapper.id_products_water_based .section01 .block03 .titWrap .subTit,
#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .tit,
#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subTit01,
#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .tit,
#barba-wrapper.id_products_water_based .section01 .block04 .titWrap .subTit,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText .item span,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .num,
#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item span,
#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .circle,
#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .tit,
#barba-wrapper.id_products_water_based .section01 .block07 .play .text,
#barba-wrapper.id_about .section01 .block01 .box .tit,
#barba-wrapper.id_about .section01 .block01 .box .subTit,
#barba-wrapper.id_color .section01 .inner .list .item .tit,
#barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap .tit,
#barba-wrapper.id_color_water_based_chart .section01 .inner .about .circle,
#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .num,
#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .tit,
#barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap .tit,
#barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap .tit,
#barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .tit,
#barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .text,
#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1) .text,
#barba-wrapper.id_howtouse .section01 .inner .filter .item,
#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge,
#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .name,
#barba-wrapper.id_howtouse_detail .section01 .block02 .play .text,
#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner > .tit,
#barba-wrapper.id_abtart .section01 .inner .titWrap .tit
{
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-style: normal;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .subTit
{
    font-family: 'Barlow', sans-serif;
    font-weight: 800;
    font-style: normal;
}

/* --------------------------------------------------------------------------------
*   media query
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   z-index
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   easing
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   texture
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* Coolors Exported Palette - coolors.co/040091-6901f5-b735fb-fe249b-ff5a78 */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* --------------------------------------------------------------------------------
*
*   mixin
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   animation
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   media query
*
-------------------------------------------------------------------------------- */
/*
*
*   max order
*
*/
/*
*
*   min order
*
*/
/*
*
*   how to
*
*/
/* --------------------------------------------------------------------------------
*
*   portrait,landscape
*
-------------------------------------------------------------------------------- */
/*
  *
  *   how to
  *
  */
/* --------------------------------------------------------------------------------
*
*   common
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   line-height
*
-------------------------------------------------------------------------------- */
div,
p,
h1,
h2,
h3,
h4
{
    line-height: 1;
}

/* --------------------------------------------------------------------------------
*
*   float
*
-------------------------------------------------------------------------------- */
.fl
{
    float: left;
}

.fr
{
    float: right;
}

.cl
{
    clear: both;
}

.fList > li,
.fList > dt,
.fList > dd,
.fList > .item
{
    float: left;
}

.fList > .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.flex > li:last-child,
.flex > dt:last-child,
.flex > dd:last-child,
.flex > .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.fBoth > li:first-child
{
    float: left;
}

.fBoth > li:last-child
{
    float: right;
}

.fBoth > dt,
.fBoth > .item:nth-child(1)
{
    float: left;
}

.fBoth > dd,
.fBoth > .item:nth-child(2)
{
    float: right;
}

/* --------------------------------------------------------------------------------
*
*   flex
*
-------------------------------------------------------------------------------- */
.flex
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

/* --------------------------------------------------------------------------------
*
*   Clearfix
*
-------------------------------------------------------------------------------- */
.cf,
.fList
{
    zoom: 1;
}

.cf:after,
.fList:after,
.fBoth:after
{
    line-height: 0;

    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}

/* --------------------------------------------------------------------------------
*
*   TextAlign
*
-------------------------------------------------------------------------------- */
.al
{
    text-align: left;
}

.ar
{
    text-align: right;
}

.ac
{
    text-align: center;
}

.vb
{
    vertical-align: baseline;
}

/* --------------------------------------------------------------------------------
*
*   Nav
*
-------------------------------------------------------------------------------- */
.nav
{
    zoom: 1;
}

.nav:after
{
    line-height: 0;

    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}

/* --------------------------------------------------------------------------------
*
*   font
*
-------------------------------------------------------------------------------- */
.captalize
{
    text-transform: capitalize;
}

.uppercase
{
    text-transform: uppercase;
}

.lowercase
{
    text-transform: lowercase;
}

/* --------------------------------------------------------------------------------
*
*   responsive
*
-------------------------------------------------------------------------------- */
img.fitted
{
    width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------------
*
*   overflow hidden
*
-------------------------------------------------------------------------------- */
.oh
{
    overflow: hidden;
}

/* --------------------------------------------------------------------------------
*
*   word breadk
*
-------------------------------------------------------------------------------- */
.wb
{
    word-break: break-all;
}

/* --------------------------------------------------------------------------------
*
*   font-weight
*
-------------------------------------------------------------------------------- */
.fwb
{
    font-weight: bold;
}

/* --------------------------------------------------------------------------------
*
*   center
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   row
*
-------------------------------------------------------------------------------- */
.row
{
    font-size: 0;

    text-align: center;
}

.row .item
{
    display: inline-block;
}

.row.row_col2 > .item
{
    width: 50%;
}

.row.row_col3 > .item
{
    width: 33.3333%;
}

.row.row_col4 > .item
{
    width: 25%;
}

.row .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* --------------------------------------------------------------------------------
*
*   opacity
*
-------------------------------------------------------------------------------- */
.is-unvisible
{
    opacity: 0 !important;
}

.is-visible
{
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------------
*
*   display
*
-------------------------------------------------------------------------------- */
.is-block
{
    display: block !important;
}

.is-none
{
    display: none !important;
}

/* --------------------------------------------------------------------------------
*
*   overflow
*
-------------------------------------------------------------------------------- */
.is-scroll
{
    overflow: scroll !important;
}

.is-scroll-x
{
    overflow-x: scroll !important;
}

.is-scroll-y
{
    overflow-y: scroll !important;
}

.is-hidden
{
    overflow: hidden !important;
}

.is-hidden-x
{
    overflow-x: hidden !important;
}

.is-hidden-y
{
    overflow-y: hidden !important;
}

/* --------------------------------------------------------------------------------
*
*   position
*
-------------------------------------------------------------------------------- */
.is-fixed
{
    position: fixed !important;
}

.is-absolute
{
    position: absolute !important;
}

.is-relative
{
    position: relative !important;
}

.is-static
{
    position: static !important;
}

/* --------------------------------------------------------------------------------
*
*   // 画像保存禁止
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   design(見本)
*
-------------------------------------------------------------------------------- */
.sample
{
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;

    display: none;

    opacity: .3;
}

body
{
    margin: 0;
    padding: 0;

    border: none;
}

/* image */
img,
div,
p,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
textarea
{
    font-size: 100%;
    font-style: normal;

    margin: 0;
    padding: 0;

    list-style: none;

    text-decoration: none;

    border: 0;
}

a
{
    cursor: pointer;
}

table
{
    font-size: 100%;
}

hr.separator
{
    display: none;
}

input[type='text'],
button,
select,
textarea
{
    resize: none;

    border: none;
    border-radius: 0;
    outline: none;
    background-color: transparent;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

select::-ms-expand
{
    display: none;
}

img
{
    vertical-align: bottom;
}

/* --------------------------------------------------------------------------------
*   parts
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   footer
*
-------------------------------------------------------------------------------- */
#footer
{
    position: absolute;
    z-index: 9999;
    bottom: 20px;
    left: 0;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    box-sizing: border-box;
    width: 100%;
    padding: 0 10rem;

    opacity: 0;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#footer .copy
{
    font-size: 10px;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    letter-spacing: .1em;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#footer .f_logo svg
{
    width: 7.8rem;
    height: 1.2rem;
}

@media only screen and (max-width: 750px)
{
    #footer
    {
        bottom: 1.6rem;

        padding: 0 1.6rem;
    }
    #footer .copy
    {
        font-size: .9rem;
    }
    #footer .f_logo svg
    {
        width: 6.5rem;
        height: 1rem;
    }
}

#id_howtouse #footer .copy
{
    color: #fff;
}

#id_howtouse #footer .f_logo svg,
#id_howtouse #footer .f_logo path
{
    fill: #fff;
}

#id_color_water_based_chart #footer,
#id_color_water_based_blend #footer,
#id_color_water_based_detail #footer,
#id_products_water_based #footer,
#id_howtouse #footer,
#id_howtouse_detail #footer,
#id_about #footer,
#id_abtart #footer,
#id_qa #footer,
#id_shop #footer
{
    position: relative;

    margin-top: -15px;
    margin-bottom: 0;
}

@media only screen and (max-width: 750px)
{
    #id_color_water_based_chart #footer.outer,
    #id_color_water_based_blend #footer.outer,
    #id_color_water_based_detail #footer.outer,
    #id_products_water_based #footer.outer,
    #id_howtouse #footer.outer,
    #id_howtouse_detail #footer.outer,
    #id_about #footer.outer,
    #id_abtart #footer.outer,
    #id_qa #footer.outer,
    #id_shop #footer.outer
    {
        display: none;
    }
}

@media only screen and (min-width: 751px)
{
    #id_color_water_based_chart #footer.inner,
    #id_color_water_based_blend #footer.inner,
    #id_color_water_based_detail #footer.inner,
    #id_products_water_based #footer.inner,
    #id_howtouse #footer.inner,
    #id_howtouse_detail #footer.inner,
    #id_about #footer.inner,
    #id_abtart #footer.inner,
    #id_qa #footer.inner,
    #id_shop #footer.inner
    {
        display: none;
    }
}

@media only screen and (max-width: 750px)
{
    #id_color_water_based_chart #footer.inner,
    #id_color_water_based_blend #footer.inner,
    #id_color_water_based_detail #footer.inner,
    #id_products_water_based #footer.inner,
    #id_howtouse #footer.inner,
    #id_howtouse_detail #footer.inner,
    #id_about #footer.inner,
    #id_abtart #footer.inner,
    #id_qa #footer.inner,
    #id_shop #footer.inner
    {
        opacity: 1 !important;
    }
}

/* --------------------------------------------------------------------------------
*
*   header
*
-------------------------------------------------------------------------------- */
#header
{
    position: fixed;
    z-index: 9999;
    top: 6rem;
    left: 0;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    box-sizing: border-box;
    width: 100%;
    padding: 0 10rem;

    opacity: 0;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#header .logo svg
{
    width: 6.6rem;
    height: 2.5rem;
}

#header .list .item
{
    font-size: 12px;
    line-height: 13px;

    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-left: 70px;

    cursor: pointer;
    letter-spacing: .1em;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#header .list .item .underbar
{
    position: absolute;
    bottom: -20px;
    left: 0;

    width: calc(100% + 6px);
    height: 2px;
    margin-left: -3px;

    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);

    background: #242529;
}

#header .list .item:first-child
{
    margin-left: 0;
}

#header .list .item:nth-child(2)
{
    margin-left: 66px;
}

#header .list .item:nth-child(4)
{
    margin-left: 66px;
}

#header .list .item:nth-child(5)
{
    margin-left: 74px;
}

#header .list .item:nth-child(6)
{
    margin-left: 77px;
}

#header .list .menuBtn
{
    width: 24px;
    height: 13px;
}

#header .list .menuBtn .barWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    width: 24px;
    height: 13px;
    margin-left: -10px;
    padding: 10px;

    cursor: pointer;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
}

#header .list .menuBtn .barWrap .bar
{
    width: 24px;
    height: 1px;

    background: #242529;
}

@media only screen and (max-width: 900px)
{
    #header .list .item
    {
        margin-left: calc(70px - 20px);
    }
    #header .list .item:nth-child(2)
    {
        margin-left: calc(66px - 20px);
    }
    #header .list .item:nth-child(4)
    {
        margin-left: calc(66px - 20px);
    }
    #header .list .item:nth-child(5)
    {
        margin-left: calc(74px - 20px);
    }
    #header .list .item:nth-child(6)
    {
        margin-left: calc(77px - 20px);
    }
}

@media only screen and (max-width: 750px)
{
    #header
    {
        top: 2.6rem;

        padding: 0 1.6rem;
    }
    #header .inner
    {
        padding: 0 1.6rem;
    }
    #header .logo svg
    {
        width: 5.4rem;
        height: 2rem;
    }
    #header .list .item
    {
        display: none;
    }
    #header .list .item:nth-child(6)
    {
        display: block;
    }
    #header .list .menuBtn
    {
        width: 2rem;
        height: auto;
    }
    #header .list .menuBtn .barWrap
    {
        width: 2rem;
        height: 1.1rem;
    }
    #header .list .menuBtn .barWrap .bar
    {
        width: 100%;
    }
}

#id_howtouse #header .logo svg path
{
    fill: #fff;
}

#id_howtouse #header .list .item
{
    color: #fff;
}

#id_howtouse #header .list .item a
{
    color: #fff;
}

#id_howtouse #header .list .item .underbar
{
    background: #fff;
}

#id_howtouse #header .list .menuBtn .barWrap .bar
{
    background-color: #fff;
}

/* --------------------------------------------------------------------------------
*
*   html,body
*
-------------------------------------------------------------------------------- */
html
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: .05em;

    opacity: 1;
    color: #242529;
    background-color: #fff;

    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'palt' 1;
    /*
  *
  *   media query
  *
  */
}

@media only screen and (min-width: 1367px)
{
    html
    {
        font-size: 11px;
    }
}

@media only screen and (max-width: 1100px)
{
    html
    {
        font-size: 9px;
    }
}

@media only screen and (max-width: 1000px)
{
    html
    {
        font-size: 8px;
    }
}

@media only screen and (max-width: 900px)
{
    html
    {
        font-size: 7px;
    }
}

@media only screen and (max-width: 750px)
{
    html
    {
        font-size: 10px;

        overflow: hidden;

        height: 100%;
    }
}

@media only screen and (max-width: 374px)
{
    html
    {
        font-size: 8px;
    }
}

html.isFixed
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

body
{
    /*
  *
  *   media query
  *
  */
}

@media only screen and (max-width: 750px)
{
    body
    {
        overflow: hidden;

        height: 100%;
    }
}

html.bgColor body.bgColor
{
    background-color: #dbdde3;
}

html.bgColor_wheel,
body.bgColor_wheel
{
    background-color: #d0d3da;
}

canvas#cv
{
    background: url(../resource/img/common/bg_gradation_wheel_pc.jpg);
    background-position: top center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    canvas#cv
    {
        background: url(../resource/img/common/bg_gradation_wheel_sp.jpg);
        background-position: center center;
        background-size: cover;
    }
}

/* --------------------------------------------------------------------------------
*
*   #barba-wrapper #inner
*
-------------------------------------------------------------------------------- */
#barba-wrapper
{
    font-size: 1.2rem;

    position: relative;
    z-index: 3;

    opacity: 0;
    /*
  *
  *   media query
  *
  */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper
    {
        overflow: auto;
        overflow-x: hidden;

        height: 100%;

        -webkit-overflow-scrolling: touch;
    }
}

#inner
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
}

#id_color_water_based_chart #inner,
#id_color_water_based_blend #inner,
#id_color_water_based_detail #inner,
#id_products_water_based #inner,
#id_howtouse #inner,
#id_howtouse_detail #inner,
#id_about #inner,
#id_abtart #inner,
#id_qa #inner,
#id_shop #inner
{
    position: static;
}

#id_howtouse #inner
{
    width: 100vw;
}

/* --------------------------------------------------------------------------------
*
*   .wrapper .inner
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   menu btn
*
-------------------------------------------------------------------------------- */
.icon-animation
{
    display: block;

    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-right: 14px;

    transition: margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, margin-right .6s cubic-bezier(.215, .61, .355, 1) .3s;
}

.icon-animation span
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 11px;
    height: 1px;
    margin-left: -7px;

    background: #e4002b;
}

/* --------------------------------------------------------------------------------
*
*   type1
*
-------------------------------------------------------------------------------- */
.type-1 span
{
    transition: all .3s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
}

.type-1 .top
{
    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-1 .bottom
{
    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-1.is-open .middle
{
    background: rgba(255, 255, 255, 0);
}

.type-1.is-open .top
{
    -webkit-transform: rotate(-45deg) translateY(0px);
        -ms-transform: rotate(-45deg) translateY(0px);
            transform: rotate(-45deg) translateY(0px);
}

.type-1.is-open .bottom
{
    -webkit-transform: rotate(45deg) translateY(0px);
        -ms-transform: rotate(45deg) translateY(0px);
            transform: rotate(45deg) translateY(0px);
}

/* --------------------------------------------------------------------------------
*
*   type2
*
-------------------------------------------------------------------------------- */
.type-2 span
{
    transition: all .3s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
}

.type-2 .top
{
    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-2 .bottom
{
    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-2:hover .top
{
    -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
            transform: translateY(-20px);
}

.type-2:hover .bottom
{
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
}

.type-2.is-open .middle
{
    background: rgba(255, 255, 255, 0);
}

.type-2.is-open .top
{
    -webkit-transform: rotate(-45deg) translateY(0px);
        -ms-transform: rotate(-45deg) translateY(0px);
            transform: rotate(-45deg) translateY(0px);
}

.type-2.is-open .bottom
{
    -webkit-transform: rotate(45deg) translateY(0px);
        -ms-transform: rotate(45deg) translateY(0px);
            transform: rotate(45deg) translateY(0px);
}

/* --------------------------------------------------------------------------------
*
*   type3
*
-------------------------------------------------------------------------------- */
.type-3 span
{
    transition: all .3s;
}

.type-3 .middle
{
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);
}

.type-3 .top
{
    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-3 .bottom
{
    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-3.is-open .middle
{
    -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
            transform: translateX(100px);

    background: rgba(255, 255, 255, 0);
}

.type-3.is-open .top
{
    -webkit-transform: rotate(-45deg) translateY(0px);
        -ms-transform: rotate(-45deg) translateY(0px);
            transform: rotate(-45deg) translateY(0px);
}

.type-3.is-open .bottom
{
    -webkit-transform: rotate(45deg) translateY(0px);
        -ms-transform: rotate(45deg) translateY(0px);
            transform: rotate(45deg) translateY(0px);
}

/* --------------------------------------------------------------------------------
*
*   type4
*
-------------------------------------------------------------------------------- */
.type-4 span
{
    margin-top: -2px;

    -webkit-transform: translateY(0px) !important;
        -ms-transform: translateY(0px) !important;
            transform: translateY(0px) !important;

    background: #e4002b;
}

.type-4 .top
{
    margin-top: -6px;

    transition: margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1) .3s;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1) .3s, margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1) .3s, margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1) .3s;
}

.type-4 .middle
{
    transition: background .6s cubic-bezier(.215, .61, .355, 1) 0s, opacity .2s cubic-bezier(.215, .61, .355, 1) .3s;
}

.type-4 .bottom
{
    margin-top: 2px;

    transition: margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1) .3s;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1) .3s, margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1) .3s, margin-top .6s cubic-bezier(.215, .61, .355, 1) .3s, background .6s cubic-bezier(.215, .61, .355, 1) 0s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1) .3s;
    -webkit-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
            transform: rotate(0deg) !important;
}

.type-4.is-open .top
{
    margin-top: 0;

    -webkit-transform: rotate(-405deg) !important;
        -ms-transform: rotate(-405deg) !important;
            transform: rotate(-405deg) !important;

    background: #e4002b;
}

.type-4.is-open .middle
{
    opacity: 0;
}

.type-4.is-open .bottom
{
    margin-top: 0;

    -webkit-transform: rotate(405deg) !important;
        -ms-transform: rotate(405deg) !important;
            transform: rotate(405deg) !important;

    background: #e4002b;
}

.type-4.is-open
{
    margin-top: 0;
    margin-right: 12px;
}

/* --------------------------------------------------------------------------------
*
*   type5
*
-------------------------------------------------------------------------------- */
.type-5 .inner
{
    position: relative;

    width: 50px;
    height: 50px;
    margin: auto;
    padding: 75px 0;
}

.type-5 span
{
    transition: width .2s, right .2s, left .2s;
}

.type-5 .top
{
    right: 0;
    left: 0;

    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-5 .middle
{
    position: relative;

    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);

    background: none;
}

.type-5 .middle:before,
.type-5 .middle:after
{
    position: absolute;
    left: -25px;

    display: block;

    width: 50px;
    height: 1px;

    content: '';
    transition: all .2s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);

    background: #000;
}

.type-5 .bottom
{
    right: 0;
    left: 0;

    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-5.is-open .top
{
    left: 100%;

    width: 0;
}

.type-5.is-open .middle:before
{
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}

.type-5.is-open .middle:after
{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.type-5.is-open .bottom
{
    right: 100%;

    width: 0;
}

/* --------------------------------------------------------------------------------
*
*   type6
*
-------------------------------------------------------------------------------- */
.type-6 span
{
    position: relative;

    transition: .3s opacity;
}

.type-6 .top
{
    -webkit-animation: type6-top .5s;
            animation: type6-top .5s;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.type-6 .middle
{
    transition: .5s opacity;
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);

    opacity: 1;
}

.type-6 .bottom
{
    -webkit-animation: type6-bottom .5s;
            animation: type6-bottom .5s;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.type-6.is-open .middle
{
    transition: .5s opacity;

    opacity: 0;
}

.type-6.is-open .top
{
    -webkit-animation: type6-top-close .5s;
            animation: type6-top-close .5s;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.type-6.is-open .bottom
{
    -webkit-animation: type6-bottom-close .5s;
            animation: type6-bottom-close .5s;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes type6-top
{
    0%
    {
        -webkit-transform: translateY(0px) rotate(-45deg);
                transform: translateY(0px) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(-17px) rotate(0deg);
                transform: translateY(-17px) rotate(0deg);
    }
}

@keyframes type6-top
{
    0%
    {
        -webkit-transform: translateY(0px) rotate(-45deg);
                transform: translateY(0px) rotate(-45deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(-17px) rotate(0deg);
                transform: translateY(-17px) rotate(0deg);
    }
}

@-webkit-keyframes type6-bottom
{
    0%
    {
        -webkit-transform: translateY(-1px) rotate(45deg);
                transform: translateY(-1px) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(15px) rotate(0deg);
                transform: translateY(15px) rotate(0deg);
    }
}

@keyframes type6-bottom
{
    0%
    {
        -webkit-transform: translateY(-1px) rotate(45deg);
                transform: translateY(-1px) rotate(45deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(15px) rotate(0deg);
                transform: translateY(15px) rotate(0deg);
    }
}

@-webkit-keyframes type6-top-close
{
    0%
    {
        -webkit-transform: translateY(-17px) rotate(0deg);
                transform: translateY(-17px) rotate(0deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(0px) rotate(-45deg);
                transform: translateY(0px) rotate(-45deg);
    }
}

@keyframes type6-top-close
{
    0%
    {
        -webkit-transform: translateY(-17px) rotate(0deg);
                transform: translateY(-17px) rotate(0deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(0px) rotate(-45deg);
                transform: translateY(0px) rotate(-45deg);
    }
}

@-webkit-keyframes type6-bottom-close
{
    0%
    {
        -webkit-transform: translateY(15px) rotate(0deg);
                transform: translateY(15px) rotate(0deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(-1px) rotate(45deg);
                transform: translateY(-1px) rotate(45deg);
    }
}

@keyframes type6-bottom-close
{
    0%
    {
        -webkit-transform: translateY(15px) rotate(0deg);
                transform: translateY(15px) rotate(0deg);
    }
    50%
    {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
    }
    100%
    {
        -webkit-transform: translateY(-1px) rotate(45deg);
                transform: translateY(-1px) rotate(45deg);
    }
}

/* --------------------------------------------------------------------------------
*
*   type7
*
-------------------------------------------------------------------------------- */
.type-7 span
{
    transition: all .3s;
}

.type-7 .top
{
    -webkit-transform: translateY(-17px) scale(1);
        -ms-transform: translateY(-17px) scale(1);
            transform: translateY(-17px) scale(1);
}

.type-7 .middle
{
    position: relative;

    background: none;
}

.type-7 .middle:before,
.type-7 .middle:after
{
    position: absolute;

    display: block;

    width: 50px;
    height: 1px;

    content: '';
    transition: all .3s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);

    background: #000;
}

.type-7 .bottom
{
    -webkit-transform: translateY(17px) scale(1);
        -ms-transform: translateY(17px) scale(1);
            transform: translateY(17px) scale(1);
}

.type-7.is-open .top
{
    -webkit-transform: translateY(0px) scale(0);
        -ms-transform: translateY(0px) scale(0);
            transform: translateY(0px) scale(0);
}

.type-7.is-open .bottom
{
    -webkit-transform: translateY(0px) scale(0);
        -ms-transform: translateY(0px) scale(0);
            transform: translateY(0px) scale(0);
}

.type-7.is-open .middle:before
{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.type-7.is-open .middle:after
{
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------------
*
*   type8
*
-------------------------------------------------------------------------------- */
.type-8 span
{
    position: relative;

    transition: all .3s;

    background: none;
}

.type-8 span:before,
.type-8 span:after
{
    position: absolute;

    display: block;

    width: 25px;
    height: 1px;

    content: '';
    transition: all .3s;

    background: #000;
}

.type-8 span:before
{
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);

    opacity: 1;
}

.type-8 span:after
{
    -webkit-transform: translateX(25px);
        -ms-transform: translateX(25px);
            transform: translateX(25px);

    opacity: 1;
}

.type-8 .top
{
    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-8 .middle
{
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}

.type-8 .bottom
{
    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-8.is-open .middle:before
{
    -webkit-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
            transform: translateX(-100px);

    opacity: 0;
}

.type-8.is-open .middle:after
{
    -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
            transform: translateX(100px);

    opacity: 0;
}

.type-8.is-open .top
{
    -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

.type-8.is-open .top:before
{
    -webkit-transform: translateX(8px) rotate(45deg);
        -ms-transform: translateX(8px) rotate(45deg);
            transform: translateX(8px) rotate(45deg);
}

.type-8.is-open .top:after
{
    -webkit-transform: translateX(25px) rotate(-45deg);
        -ms-transform: translateX(25px) rotate(-45deg);
            transform: translateX(25px) rotate(-45deg);
}

.type-8.is-open .bottom
{
    -webkit-transform: translateY(5px);
        -ms-transform: translateY(5px);
            transform: translateY(5px);
}

.type-8.is-open .bottom:before
{
    -webkit-transform: translateX(8px) rotate(-45deg);
        -ms-transform: translateX(8px) rotate(-45deg);
            transform: translateX(8px) rotate(-45deg);
}

.type-8.is-open .bottom:after
{
    -webkit-transform: translateX(25px) rotate(45deg);
        -ms-transform: translateX(25px) rotate(45deg);
            transform: translateX(25px) rotate(45deg);
}

/* --------------------------------------------------------------------------------
*
*   type9
*
-------------------------------------------------------------------------------- */
.type-9 span
{
    transition: all .4s .4s;
}

.type-9 span:before,
.type-9 span:after
{
    content: '';
}

.type-9 .top
{
    -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
            transform: translateY(-17px);
}

.type-9 .middle
{
    position: relative;

    background: none;
}

.type-9 .middle:after
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;

    content: '';

    border-radius: 100%;
}

.type-9 .middle:before
{
    display: block;

    width: 50px;
    height: 1px;

    content: '';
    transition: all .4s;
    -webkit-transform: translateY(0px) translateX(0px);
        -ms-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);

    opacity: 1;
    background: #000;
}

.type-9 .bottom
{
    -webkit-transform: translateY(17px);
        -ms-transform: translateY(17px);
            transform: translateY(17px);
}

.type-9.is-open .bottom
{
    -webkit-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
            transform: translateY(0px) rotate(45deg);
}

.type-9.is-open .top
{
    -webkit-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
            transform: translateY(0px) rotate(-45deg);
}

.type-9.is-open .middle:before
{
    -webkit-transform: translateY(0px) translateX(100px);
        -ms-transform: translateY(0px) translateX(100px);
            transform: translateY(0px) translateX(100px);

    opacity: 0;
}

.type-9.is-open .middle:after
{
    content: '';
    -webkit-animation: type9-circle .5s;
            animation: type9-circle .5s;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes type9-circle
{
    0%
    {
        -webkit-transform: scale(0);
                transform: scale(0);

        opacity: 1;
        border: 1px solid #000;
    }
    100%
    {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);

        opacity: 0;
        border: 1px solid #000;
    }
}

@keyframes type9-circle
{
    0%
    {
        -webkit-transform: scale(0);
                transform: scale(0);

        opacity: 1;
        border: 1px solid #000;
    }
    100%
    {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);

        opacity: 0;
        border: 1px solid #000;
    }
}

/* --------------------------------------------------------------------------------
*
*   checkbox
*
-------------------------------------------------------------------------------- */
input[type='checkbox']
{
    position: relative;

    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-right: 10px;

    border: 1px solid #6d6d6d;
    outline: 0;
    background: none;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

input[type='checkbox']:checked::before
{
    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;
    width: 18px;
    height: 18px;

    content: '';

    background: url(../resource/svg/check.svg) no-repeat;
    background-position: 1px 3px;
}

/* --------------------------------------------------------------------------------
*
*   radio
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   select
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   canvas
*
-------------------------------------------------------------------------------- */
.plane
{
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;

    display: none;

    width: 120px;
    height: 100px;

    cursor: pointer;

    background: #f00;
    box-shadow: 28px 28px 20px 0 rgba(0, 0, 0, .2);
}

.plane a
{
    display: block;

    box-sizing: border-box;
    height: 100%;
    padding-top: 7px;
    padding-left: 9px;
}

.plane .num
{
    font-size: 36px;

    margin-bottom: 4px;

    letter-spacing: .05em;
}

.plane .text
{
    font-size: 12px;

    letter-spacing: .05em;
}

.plane svg
{
    position: absolute;
    right: 9px;
    bottom: 11px;
}

@media only screen and (max-width: 750px)
{
    .plane
    {
        width: 10rem;
        height: 8rem;
    }
    .plane a
    {
        padding-top: .5rem;
        padding-left: .7rem;
    }
    .plane .num
    {
        font-size: 3.2rem;

        margin-bottom: .2rem;
    }
    .plane .text
    {
        font-size: 1.2rem;
    }
    .plane svg
    {
        right: .9rem;
        bottom: 1.1rem;
    }
}

.visualbtnWrap
{
    position: fixed;
    z-index: 999999;
    bottom: 50px;
    left: 20px;

    display: none;
}

.visualbtnWrap .visualbtn
{
    font-size: 20px;

    margin-right: 10px;
    padding: 20px;

    cursor: pointer;

    color: #fff;
    background-color: #000;
}

.visualbtnWrap .visualbtn:last-child
{
    margin-right: 0;
}

#id_color_water_based_wheel .visualbtnWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

.cssRendererColorWheel
{
    pointer-events: none;
}

.cssRendererColorWheel .circle
{
    pointer-events: auto;
}

/* --------------------------------------------------------------------------------
*
*   dat gui
*
-------------------------------------------------------------------------------- */
.dg.a
{
    overflow: visible !important;
}

.dg li.color
{
    overflow: visible !important;
}

.dg.ac
{
    z-index: 999999 !important;
}

/* --------------------------------------------------------------------------------
*
*   loading
*
-------------------------------------------------------------------------------- */
#loading
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;
}

#loading .logo
{
    position: absolute;
    top: calc(50% - 3.5rem);
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#loading .logo svg
{
    width: 17.3rem;
    height: 6.4rem;
}

#loading .loadingBar
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 32rem;
    height: 1px;
    margin-top: 9rem;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    background-color: #e4e4e5;
}

#loading .loadingBar .bar
{
    width: 50%;
    height: 100%;

    background-color: #242529;
}

#loading .loadingPercent
{
    font-size: 1.6rem;

    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: 6.2rem;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    letter-spacing: .05em;

    color: #000;
}

#loading .ballWrap
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: calc(-40px + -10px);
    margin-left: -40px;
}

#loading .ballWrap .ball
{
    width: 80px;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    .isIOSSafari #loading .loadingBar
    {
        margin-top: -40px;
    }
}

#id_top #loading
{
    display: block;
}

/* --------------------------------------------------------------------------------
*
*   triangle
*
-------------------------------------------------------------------------------- */
.triangle
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 0;
    height: 0;

    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent #eee transparent transparent;
}

.triangle.over
{
    z-index: 2;
}

/* --------------------------------------------------------------------------------
*
*   circle
*
-------------------------------------------------------------------------------- */
.circle
{
    width: 100px;
    height: 100px;

    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   bar
*
-------------------------------------------------------------------------------- */
.bar_obj
{
    width: 100px;
    height: 1px;

    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   rect
*
-------------------------------------------------------------------------------- */
.rect
{
    width: 100px;
    height: 100px;

    background-color: #000;
}

.diamond
{
    width: 100px;
    height: 100px;

    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);

    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   opacity
*
-------------------------------------------------------------------------------- */
@media only screen and (min-width: 376px)
{
    .hover_op
    {
        transition: opacity .9s cubic-bezier(.23, 1, .32, 1) 0s;
    }
    .hover_op:hover
    {
        cursor: pointer;

        opacity: .6 !important;
    }
}

@media only screen and (min-width: 376px)
{
    .hover_op_sp
    {
        transition: opacity .6s cubic-bezier(.23, 1, .32, 1) 0s;
    }
    .hover_op_sp:hover
    {
        cursor: pointer;

        opacity: .3 !important;
    }
}

.showOp
{
    transition: opacity .6s cubic-bezier(.25, .46, .45, .94) 0s;

    opacity: 0;
}

.showOp.is-show
{
    opacity: 1;
}

/* --------------------------------------------------------------------------------
*
*   flash
*
-------------------------------------------------------------------------------- */
.flashShow .inner
{
    opacity: 1 !important;
}

@-webkit-keyframes kf_flash
{
    50%
    {
        opacity: .5;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
            filter: alpha(opacity=75);
    }
}

@keyframes kf_flash
{
    50%
    {
        opacity: .5;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
            filter: alpha(opacity=75);
    }
}

/* --------------------------------------------------------------------------------
*
*   scale
*
-------------------------------------------------------------------------------- */
.scale
{
    transition: -webkit-transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .35s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
}

.scale:hover
{
    cursor: pointer;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.scale_img
{
    transition: -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .3s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.scale_img:hover
{
    cursor: pointer;
    -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
            transform: scale(1.15);
}

/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
.hColor
{
    transition: color .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.hColor:hover
{
    cursor: pointer;

    color: #f63e69 !important;
}

.hBgColor
{
    transition: background-color .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.hBgColor:hover
{
    cursor: pointer;

    background-color: #f63e69 !important;
}

/*
*
*   cursor
*
*/
.cp
{
    cursor: pointer;
}

/* --------------------------------------------------------------------------------
*
*   shadow
*
-------------------------------------------------------------------------------- */
.scaleShadow .bgBox
{
    transition: all .6s cubic-bezier(.19, 1, .22, 1) 0s;
}

.scaleShadow:hover
{
    z-index: 5;

    -webkit-transform: translate3d(0, 0, 1px);
            transform: translate3d(0, 0, 1px);
}

.scaleShadow:hover .bgBox
{
    -webkit-transform: scale(1.2) translate3d(0, 0, 1px);
            transform: scale(1.2) translate3d(0, 0, 1px);

    box-shadow: rgba(0, 0, 0, .15) 23.335px 23.335px 65px 0, rgba(0, 0, 0, .25) 14.142px 14.142px 20px 0;
}

/* --------------------------------------------------------------------------------
*
*   filter
*
-------------------------------------------------------------------------------- */
.brightFilter
{
    transition: opacity 1.6s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-filter 1.6s cubic-bezier(.19, 1, .22, 1) 0s;
    transition: filter 1.6s cubic-bezier(.19, 1, .22, 1) 0s, opacity 1.6s cubic-bezier(.19, 1, .22, 1) 0s;
    transition: filter 1.6s cubic-bezier(.19, 1, .22, 1) 0s, opacity 1.6s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-filter 1.6s cubic-bezier(.19, 1, .22, 1) 0s;

    opacity: 0;

    -webkit-filter: brightness(50) grayscale(100);
            filter: brightness(50) grayscale(100);
}

.is-show .brightFilter
{
    opacity: 1;

    -webkit-filter: brightness(1) grayscale(0);
            filter: brightness(1) grayscale(0);
}

.brightFilterAbout
{
    transition: opacity 1.2s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;
    transition: opacity 1.2s cubic-bezier(.19, 1, .22, 1) 0s, transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;
    transition: opacity 1.2s cubic-bezier(.19, 1, .22, 1) 0s, transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;
    -webkit-transform: translateY(300px);
        -ms-transform: translateY(300px);
            transform: translateY(300px);

    opacity: 0;
}

#about.is-show.brightFilterAbout
{
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);

    opacity: 1;
}

/* --------------------------------------------------------------------------------
*
*   filte flash
*
-------------------------------------------------------------------------------- */
.brightFlash
{
    cursor: pointer;
}

.brightFlash:hover
{
    -webkit-animation: bF .5s cubic-bezier(.19, 1, .22, 1) 0s 1 normal;
            animation: bF .5s cubic-bezier(.19, 1, .22, 1) 0s 1 normal;
}

@-webkit-keyframes bF
{
    0%
    {
        -webkit-filter: brightness(20);
                filter: brightness(20);
    }
    100%
    {
        -webkit-filter: brightness(1);
                filter: brightness(1);
    }
}

@keyframes bF
{
    0%
    {
        -webkit-filter: brightness(20);
                filter: brightness(20);
    }
    100%
    {
        -webkit-filter: brightness(1);
                filter: brightness(1);
    }
}

.flash:hover
{
    -webkit-animation: kf_flash .05s infinite;
            animation: kf_flash .05s infinite;
}

/* --------------------------------------------------------------------------------
*
*   white
*
-------------------------------------------------------------------------------- */
.changeWhiteColor
{
    transition: color 1.2s cubic-bezier(.455, .03, .515, .955) 0s;
}

.white .changeWhiteColor
{
    color: #fff !important;
}

.changeWhiteBg
{
    transition: background 1.2s cubic-bezier(.455, .03, .515, .955) 0s;
}

.white .changeWhiteBg
{
    background: #fff !important;
}

.changeWhiteBgBar
{
    transition: background 1.2s cubic-bezier(.455, .03, .515, .955) 0s;
}

.white .changeWhiteBgBar
{
    background: rgba(255, 255, 255, .5) !important;
}

.changeWhitePath path,
.changeWhitePath rect
{
    transition: fill 1.2s cubic-bezier(.455, .03, .515, .955) 0s;
}

.white .changeWhitePath path,
.white .changeWhitePath rect
{
    fill: white !important;
}

/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
.color1
{
    background-color: #eeef99 !important;
}

.color2
{
    background-color: #bde1d6 !important;
}

.color3
{
    background-color: #007580 !important;
}

.color4
{
    background-color: #a1d8e6 !important;
}

.color5
{
    background-color: #00a5a8 !important;
}

.color6
{
    background-color: #008b9c !important;
}

.color7
{
    background-color: #10386b !important;
}

.color8
{
    background-color: #cb688e !important;
}

.color9
{
    background-color: #ed7987 !important;
}

.color10
{
    background-color: #fcd7a1 !important;
}

.color11
{
    background-color: #716c5e !important;
}

.color12
{
    background-color: #84a2b2 !important;
}

.color13
{
    background-color: #fff8d5 !important;
}

.color14
{
    background-color: #fcc800 !important;
}

.color15
{
    background-color: #d4bc00 !important;
}

.color16
{
    background-color: #cb890c !important;
}

.color17
{
    background-color: #fff100 !important;
}

.color18
{
    background-color: #ffed61 !important;
}

.color19
{
    background-color: #ab9d1b !important;
}

.color20
{
    background-color: #fffab5 !important;
}

.color21
{
    background-color: #a29a20 !important;
}

.color22
{
    background-color: #b0bf24 !important;
}

.color23
{
    background-color: #bcd400 !important;
}

.color24
{
    background-color: #78933b !important;
}

.color25
{
    background-color: #7fbf34 !important;
}

.color26
{
    background-color: #0d5a35 !important;
}

.color27
{
    background-color: #6d965e !important;
}

.color28
{
    background-color: #5bb53c !important;
}

.color29
{
    background-color: #617454 !important;
}

.color30
{
    background-color: #acd491 !important;
}

.color31
{
    background-color: #00a464 !important;
}

.color32
{
    background-color: #1f6141 !important;
}

.color33
{
    background-color: #005965 !important;
}

.color34
{
    background-color: #00a569 !important;
}

.color35
{
    background-color: #559f7e !important;
}

.color36
{
    background-color: #006253 !important;
}

.color37
{
    background-color: #009495 !important;
}

.color38
{
    background-color: #00a0ca !important;
}

.color39
{
    background-color: #aeddf0 !important;
}

.color40
{
    background-color: #00b3cd !important;
}

.color41
{
    background-color: #0092d7 !important;
}

.color42
{
    background-color: #b1def0 !important;
}

.color43
{
    background-color: #0085ce !important;
}

.color44
{
    background-color: #0098e0 !important;
}

.color45
{
    background-color: #5792c5 !important;
}

.color46
{
    background-color: #006ea8 !important;
}

.color47
{
    background-color: #5396d1 !important;
}

.color48
{
    background-color: #0074be !important;
}

.color49
{
    background-color: #739e9f !important;
}

.color50
{
    background-color: #005eae !important;
}

.color51
{
    background-color: #3c459a !important;
}

.color52
{
    background-color: #8a8fc6 !important;
}

.color53
{
    background-color: #542f8e !important;
}

.color54
{
    background-color: #dbd5ea !important;
}

.color55
{
    background-color: #c4add2 !important;
}

.color56
{
    background-color: #552b8c !important;
}

.color57
{
    background-color: #b51a86 !important;
}

.color58
{
    background-color: #cfa7cd !important;
}

.color59
{
    background-color: #751a86 !important;
}

.color60
{
    background-color: #623e61 !important;
}

.color61
{
    background-color: #be0081 !important;
}

.color62
{
    background-color: #e06898 !important;
}

.color63
{
    background-color: #f2a0b9 !important;
}

.color64
{
    background-color: #e62488 !important;
}

.color65
{
    background-color: #de4f7b !important;
}

.color66
{
    background-color: #d00075 !important;
}

.color67
{
    background-color: #8a2155 !important;
}

.color68
{
    background-color: #f7c7c9 !important;
}

.color69
{
    background-color: #efafb9 !important;
}

.color70
{
    background-color: #fce9ea !important;
}

.color71
{
    background-color: #b8193f !important;
}

.color72
{
    background-color: #cf1225 !important;
}

.color73
{
    background-color: #a72c29 !important;
}

.color74
{
    background-color: #e6001b !important;
}

.color75
{
    background-color: #c2143d !important;
}

.color76
{
    background-color: #fbd9c4 !important;
}

.color77
{
    background-color: #c4181f !important;
}

.color78
{
    background-color: #ef8459 !important;
}

.color79
{
    background-color: #6d3c30 !important;
}

.color80
{
    background-color: #e61919 !important;
}

.color81
{
    background-color: #843f2d !important;
}

.color82
{
    background-color: #eb5c01 !important;
}

.color83
{
    background-color: #e6a35b !important;
}

.color84
{
    background-color: #ef7a00 !important;
}

.color85
{
    background-color: #f18904 !important;
}

.color86
{
    background-color: #e7d2b1 !important;
}

.color87
{
    background-color: #f18b00 !important;
}

.color88
{
    background-color: #b34422 !important;
}

.color89
{
    background-color: #734b30 !important;
}

.color90
{
    background-color: #cb8050 !important;
}

.color91
{
    background-color: #f7ac00 !important;
}

.color92
{
    background-color: #ffefb2 !important;
}

.color93
{
    background-color: #fac44c !important;
}

.color94
{
    background-color: #d6ae58 !important;
}

.color95
{
    background-color: #f8b500 !important;
}

.color96
{
    background-color: #002 !important;
}

.color97
{
    background-color: #474342 !important;
}

.color98
{
    background-color: #7b7a7b !important;
}

.color99
{
    background-color: #7d7d7d !important;
}

.color100
{
    background-color: #807f80 !important;
}

.color101
{
    background-color: #91886c !important;
}

.color102
{
    background-color: #aaabab !important;
}

.color103
{
    background-color: #a4a4a5 !important;
}

.color104
{
    background-color: #b9baba !important;
}

.color105
{
    background-color: #c7baaf !important;
}

.color106
{
    background-color: #e3ddd6 !important;
}

.color107
{
    background-color: #e4e4e5 !important;
}

.color108
{
    background-color: #fff !important;
}

/* --------------------------------------------------------------------------------
*
*   bar
*
-------------------------------------------------------------------------------- */
.left_bar:after
{
    position: absolute;
    top: -.6rem;
    left: 0;

    display: block;

    width: .7rem;
    height: 3.5rem;

    content: '';

    background-color: #000;
}

.up_bar:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1rem;

    content: '';
    transition: height .18s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.25, .46, .45, .94);

    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   select
*
-------------------------------------------------------------------------------- */
body.no-select
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

         -o-user-select: none;
}

/* --------------------------------------------------------------------------------
*
*   grab
*
-------------------------------------------------------------------------------- */
.grab
{
    cursor: -webkit-grab;
    cursor:     -ms-grab;
    cursor:         grab;
}

.grabbing
{
    cursor: -webkit-grabbing;
    cursor:     -ms-grabbing;
    cursor:         grabbing;
}

/* --------------------------------------------------------------------------------
*
*   toTop
*
-------------------------------------------------------------------------------- */
.toTop
{
    position: fixed;
    z-index: 99999;
    right: 5.5rem;
    bottom: 9.4rem;

    cursor: pointer;
}

.toTop .inner
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

.toTop .text
{
    font-size: 1.4rem;

    margin-right: 1.3rem;

    letter-spacing: .1em;

    opacity: 0;
}

.toTop .bar
{
    width: 6rem;
    height: 1px;

    opacity: 0;
    background: #242529;
}

@media only screen and (max-width: 750px)
{
    .toTop
    {
        right: 2.5rem;
    }
    .toTop .text
    {
        font-size: 1rem;
    }
    .toTop .bar
    {
        width: 5rem;
    }
}

#id_howtouse .toTop .text
{
    color: #fff;
}

#id_howtouse .toTop .bar
{
    background-color: #fff;
}

/* --------------------------------------------------------------------------------
*
*   ui
*
-------------------------------------------------------------------------------- */
.ui
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

.ui .barWrap
{
    position: relative;

    overflow: hidden;

    width: 60rem;
    height: 1px;
    margin: 0 9.9rem;
    padding: 5px 0;

    cursor: pointer;
}

.ui .barWrap .barInner
{
    position: relative;

    width: 100%;
    height: 100%;

    opacity: 0;
    background: #a4a4a5;
}

.ui .barWrap .bar
{
    position: absolute;
    top: -11px;
    left: 0;

    width: 10rem;
    height: .3rem;
    padding: 10px 0;
}

.ui .barWrap .bar .barIn
{
    width: 100%;
    height: 100%;

    background: #242529;
}

.ui .arrow
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding: 10px 20px;

    cursor: pointer;

    opacity: 0;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

.ui .arrow svg
{
    width: 10.1rem;
    height: .5rem;
}

.ui .arrowl
{
    padding-right: 0;
}

.ui .arrowr
{
    padding-left: 0;
}

@media only screen and (max-width: 750px)
{
    .ui .barWrap
    {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }
    .ui .barWrap .barInner
    {
        height: 1px;
    }
    .ui .barWrap .bar
    {
        width: 6.5rem;
        height: 3px;
    }
    .ui .arrow
    {
        display: none;
    }
}

/* --------------------------------------------------------------------------------
*
*   back
*
-------------------------------------------------------------------------------- */
.back
{
    opacity: 0;
}

.back a
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

.back .text
{
    font-size: 12px;

    position: relative;
    top: -1px;

    margin-left: 1.1rem;

    letter-spacing: .1em;
}

.back.float
{
    position: absolute;
    bottom: 72px;
    left: calc(0px + 10rem);

    padding-bottom: 0;
}

@media only screen and (max-width: 750px)
{
    .back.float
    {
        bottom: 7.9rem;
        left: 1.6rem;
    }
}

#id_howtouse .back svg,
#id_howtouse .back path
{
    fill: #fff;
}

#id_howtouse .back .text
{
    color: #fff;
}

/* --------------------------------------------------------------------------------
*
*   menu
*
-------------------------------------------------------------------------------- */
#menu
{
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    background: url(../resource/img/common/bg_menu.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #menu
    {
        background: #fff;
    }
}

@media only screen and (max-height: 600px)
{
    #menu
    {
        overflow: scroll;
    }
    #menu .inner
    {
        min-height: 60rem;
    }
}

#menu .inner
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
            justify-content: flex-end;
}

@media only screen and (max-width: 750px)
{
    #menu .inner
    {
        min-height: 0;

        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-align-items: center;
        -ms-flex-align: center;
                align-items: center;
    }
}

#menu .inner .list
{
    padding-right: 28rem;
}

#menu .inner .list .item
{
    position: relative;

    margin-bottom: 3.8rem;

    cursor: pointer;
}

#menu .inner .list .item svg
{
    width: auto;
    height: 26px;
    margin-left: -1px;
    padding: 2px 1px;
}

#menu .inner .list .item .svgWrap
{
    display: inline-block;
}

#menu .inner .list .item .svgInner
{
    display: inline-block;
}

#menu .inner .list .item .tit
{
    font-size: 3.6rem;

    letter-spacing: .1em;

    color: #fff;

    -webkit-text-stroke: 1px #242529;
        -ms-text-stroke: 1px #242529;
            text-stroke: 1px #242529;
}

#menu .inner .list .item .tit.active
{
    color: #242529;

    -webkit-text-stroke: 0;
        -ms-text-stroke: 0;
            text-stroke: 0;
}

#menu .inner .list .item .text
{
    font-size: 1.2rem;
    font-weight: bold;

    position: absolute;
    bottom: -1.7rem;
    left: 0;

    letter-spacing: .1em;
}

#menu .inner .list .item:nth-child(1) svg
{
    width: 174px;
}

#menu .inner .list .item:nth-child(2) svg
{
    width: 126px;
}

#menu .inner .list .item:nth-child(3) svg
{
    width: 120px;
    height: 27px;
}

#menu .inner .list .item:nth-child(4) svg
{
    width: 224px;
}

#menu .inner .list .item:nth-child(5) svg
{
    width: 158px;
}

#menu .inner .list .item:nth-child(6) svg
{
    width: 76px;
    height: 29px;
}

#menu .inner .sns
{
    display: none;

    margin-top: 11rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#menu .inner .sns .item
{
    margin-right: 2.4rem;
}

#menu .inner .sns .item svg
{
    width: 15px;
    height: 15px;

    vertical-align: bottom;
}

#menu .inner .sns .item:nth-child(3)
{
    margin-left: -1px;
}

@media only screen and (max-width: 750px)
{
    #menu .inner .box
    {
        padding-left: 3.5rem;
    }
    #menu .inner .box .list
    {
        padding: 0;
    }
    #menu .inner .box .list .item
    {
        font-size: 1rem;

        bottom: -1.4rem;
    }
    #menu .inner .box .list .item svg
    {
        width: auto;
        height: 2.6rem;
        padding: .2rem 1px;
    }
    #menu .inner .box .list .item:nth-child(1) svg
    {
        width: 17.4rem;
    }
    #menu .inner .box .list .item:nth-child(2) svg
    {
        width: 12.6rem;
    }
    #menu .inner .box .list .item:nth-child(3) svg
    {
        width: 12rem;
        height: 2.7rem;
    }
    #menu .inner .box .list .item:nth-child(4) svg
    {
        width: 22.4rem;
    }
    #menu .inner .box .list .item:nth-child(5) svg
    {
        width: 15.8rem;
    }
    #menu .inner .box .list .item:nth-child(6) svg
    {
        width: 7.6rem;
        height: 2.9rem;
    }
    #menu .inner .box .sns
    {
        margin-top: 7.5rem;
    }
}

#menu .close
{
    position: absolute;
    top: 6.4rem;
    right: 10rem;

    width: 2rem;
    height: 2rem;

    cursor: pointer;
}

#menu .close svg
{
    width: 1.8rem;
    height: 1.8rem;
}

#menu .close .barWrap:nth-child(1)
{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;
}

#menu .close .barWrap:nth-child(1) .bar
{
    top: -1px;
    left: 1px;

    -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;
}

#menu .close .barWrap:nth-child(2)
{
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

#menu .close .barWrap:nth-child(2) .bar
{
    right: 0;
    left: auto;

    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

#menu .close .bar
{
    position: absolute;
    top: 0;
    left: 0;

    width: 2.7rem;
    height: 1px;

    background: #000;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

@media only screen and (max-width: 750px)
{
    #menu .close
    {
        top: 3.2rem;
        right: 2rem;
    }
    #menu .close svg
    {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* --------------------------------------------------------------------------------
*
*   slider
*
-------------------------------------------------------------------------------- */
.slider .sliderInner
{
    margin-bottom: 13rem;
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner
    {
        margin-bottom: 9rem;
        padding: 0 2rem;
    }
}

@media only screen and (max-height: 800px)
{
    .slider .sliderInner
    {
        margin-bottom: 16.25vh;
    }
}

.slider .sliderInner .item
{
    position: relative;

    display: inline-block;

    margin-right: 8rem;

    cursor: pointer;

    opacity: 0;
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner .item
    {
        margin-right: 4.2rem;
    }
}

.slider .sliderInner .item .open
{
    position: absolute;
    z-index: 2;
    top: .5rem;
    right: .5rem;

    -webkit-transform: translate3d(0, 0, 1px);
            transform: translate3d(0, 0, 1px);
}

.slider .sliderInner .item .open img
{
    vertical-align: bottom;
}

.slider .sliderInner .item .open svg
{
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner .item .open svg
    {
        width: 2.2rem;
        height: 2.2rem;
    }
}

.slider .sliderInner .item .img
{
    overflow: hidden;
}

.slider .sliderInner .item .img img
{
    width: 190px;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner .item .img img
    {
        width: 14rem;
        height: auto;
    }
}

@media only screen and (max-height: 800px)
{
    .slider .sliderInner .item .img img
    {
        width: auto;
        height: 23.75vh;
    }
}

.slider .sliderInner .item .box
{
    padding: 20px 15px 14px;

    background: #fff;
}

.slider .sliderInner .item .box .text
{
    margin-bottom: 9px;
}

.slider .sliderInner .item .box .colorWrap
{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.slider .sliderInner .item .box .colorWrap .colorBall
{
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 6px;

    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
            flex-shrink: 0;
}

.slider .sliderInner .item .box .colorWrap .colorBall:last-child
{
    margin-right: 0;
}

@media only screen and (max-height: 800px)
{
    .slider .sliderInner .item .box
    {
        padding: 2.5vh 1.875vh 1.75vh;

        background: #fff;
    }
    .slider .sliderInner .item .box .text
    {
        margin-bottom: 1.125vh;
    }
    .slider .sliderInner .item .box .colorWrap .colorBall
    {
        width: 2.5vh;
        height: 2.5vh;
        margin-right: .75vh;
        margin-bottom: .75vh;
    }
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner .item .box
    {
        box-sizing: border-box;
        padding: 1rem 1.5rem .6rem;
    }
    .slider .sliderInner .item .box .text
    {
        margin-bottom: .7rem;
    }
    .slider .sliderInner .item .box .colorWrap .colorBall
    {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .4rem;
        margin-bottom: .4rem;
    }
}

.slider .sliderInner .item .shadow
{
    position: absolute;
    bottom: -90px;
    left: calc(50% - .4rem);

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    pointer-events: none;
}

.slider .sliderInner .item .shadow img
{
    width: 230px;
    height: 45px;
}

@media only screen and (max-height: 800px)
{
    .slider .sliderInner .item .shadow
    {
        bottom: -11.25vh;
        left: calc(50% - .5vh);
    }
    .slider .sliderInner .item .shadow img
    {
        width: 28.75vh;
    }
}

@media only screen and (max-width: 750px)
{
    .slider .sliderInner .item .shadow
    {
        bottom: -6.5rem;
    }
    .slider .sliderInner .item .shadow img
    {
        width: 17.2rem;
        height: auto;
    }
}

.slider .sliderInner .item:last-child
{
    margin-right: 0;
}

@media only screen and (max-width: 750px)
{
    .slider .ui
    {
        width: calc(100vw - 4.8rem);
        padding: 0 2.4rem;
    }
}

/* --------------------------------------------------------------------------------
*
*   colorBall
*
-------------------------------------------------------------------------------- */
.colorBall
{
    width: 1.2rem;
    height: 1.2rem;

    border-radius: 50%;
    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   colorDetail
*
-------------------------------------------------------------------------------- */
.colorDetail
{
    padding-bottom: 1rem;
    padding-left: 1.5rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

.colorDetail .colorBall
{
    margin-right: .5rem;
}

.colorDetail .colorBall:last-child
{
    margin-right: 0;
}

.colorDetail .num
{
    font-size: 1.2rem;

    margin-top: -.2rem;
    margin-right: .7rem;

    letter-spacing: .1em;
}

.colorDetail .text
{
    font-size: 1.2rem;

    margin-top: -.2rem;
}

@media only screen and (max-width: 750px)
{
    .colorDetail .num
    {
        font-size: 1rem;
    }
    .colorDetail .text
    {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------------
*
*   modal
*
-------------------------------------------------------------------------------- */
#modal
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: none;
    overflow-y: scroll;

    width: 100%;
    height: 100%;
}

#modal .bg
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(198, 200, 208, .8);
}

#modal .innerWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;
    min-height: 750px;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

@media only screen and (max-height: 500px)
{
    #modal .innerWrap
    {
        min-height: 550px;
    }
}

@media only screen and (max-width: 750px)
{
    #modal .innerWrap
    {
        min-height: 450px;
    }
}

#modal .inner
{
    position: relative;
}

#modal .inner .close
{
    position: absolute;
    top: 0;
    right: -6.7rem;

    width: 3.8rem;
    height: 3.8rem;

    cursor: pointer;
}

#modal .inner .close .closebg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 40px;
    height: 40px;

    cursor: pointer;
}

#modal .inner .close .barWrap:nth-child(1)
{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;
}

#modal .inner .close .barWrap:nth-child(1) .bar
{
    top: -1px;
    left: 1px;

    -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;
}

#modal .inner .close .barWrap:nth-child(2)
{
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

#modal .inner .close .barWrap:nth-child(2) .bar
{
    right: 0;
    left: auto;

    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}

#modal .inner .close .bar
{
    position: absolute;
    top: 0;
    left: 0;

    width: 5.3rem;
    height: 1px;

    background: #000;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

#modal .inner .boxWrap
{
    max-width: 53rem;
}

#modal.modal_products .inner .boxWrap {
    min-width: 53rem;
}
#modal .inner .boxWrap .boxInner
{
    transition: box-shadow .6s cubic-bezier(.25, .46, .45, .94) 0s;
}

#modal .inner .boxWrap .boxInner.addShadow
{
    transition: box-shadow .9s cubic-bezier(.25, .46, .45, .94) 0s;

    box-shadow: 2.8rem 2.8rem 2rem 0rem rgba(0, 0, 0, .2);
}

#modal .inner .boxWrap .img
{
    position: relative;

    overflow: hidden;

    background-color: #fff;
}

#modal .inner .boxWrap .img img
{
    width: 100%;
    height: auto;
}

#modal .inner .boxWrap .img .overlay
{
    position: absolute;
    top: -1px;
    left: 0;

    width: 100%;
    height: 101%;

    background-color: #fff;
}

#modal .inner .boxWrap .box
{
    padding: 2rem 2rem 1rem;

    background: #fff;
}

#modal .inner .boxWrap .box > .text
{
    font-size: 2rem;

    margin-bottom: 1.5rem;
}

#modal .inner .boxWrap .box .colorWrap
{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#modal .inner .boxWrap .box .colorWrap .colorDetail
{
    padding: 0;
    padding-right: 2rem;
    padding-bottom: 1rem;
}

#modal .inner .boxWrap .arrow
{
    cursor: pointer;
}

#modal .inner .boxWrap .arrow svg
{
    width: 10.1rem;
    height: .5rem;
    padding: 1rem;
}

#modal .inner .boxWrap .arrowl
{
    position: absolute;
    top: 50%;
    bottom: auto;
    left: -23.5rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: -.3rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 800px)
{
    #modal .inner .boxWrap .arrowl
    {
        top: auto;
        bottom: -6.8rem;
        left: 1.5rem;
    }
    #modal .inner .boxWrap .arrowl svg
    {
        width: 75px;
        height: 4px;
    }
}

#modal .inner .boxWrap .arrowr
{
    position: absolute;
    top: 50%;
    right: -23.5rem;
    bottom: auto;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: -.3rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 800px)
{
    #modal .inner .boxWrap .arrowr
    {
        top: auto;
        right: 1.5rem;
        bottom: -6.8rem;
    }
    #modal .inner .boxWrap .arrowr svg
    {
        width: 75px;
        height: 4px;
    }
}

@media only screen and (max-width: 750px)
{
    #modal .inner .boxWrap .box
    {
        padding: 2rem 1.5rem 1.5rem;
    }
    #modal .inner .boxWrap .box > .text
    {
        font-size: 1.4rem;
    }
    #modal .inner .boxWrap .box .colorWrap .colorDetail
    {
        padding-right: 1.3rem;
    }
}

@media only screen and (max-width: 750px)
{
    #modal .inner
    {
        padding: 0 3.6rem;
    }
    #modal .inner .close
    {
        top: -5.4rem;
        right: 4rem;
    }
    #modal .inner .close svg
    {
        width: 2.5rem;
        height: 2.5rem;
    }
    #modal.modal_products .inner .boxWrap {
        min-width: unset;
    }
}

#modal.modal_abtart
{
    overflow: auto;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .innerWrap
    {
        display: block;
        overflow: scroll;

        height: 100%;
    }
}

@media only screen and (max-height: 700px)
{
    #modal.modal_abtart .innerWrap
    {
        min-height: 70rem;
    }
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .innerWrap
    {
        min-height: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .inner
    {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
}

#modal.modal_abtart .inner .close
{
    top: -4.8rem;
    right: 0;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .inner .close
    {
        top: -5.4rem;
        right: 4rem;
    }
}

#modal.modal_abtart .inner .boxWrap
{
    max-width: none;
}

#modal.modal_abtart .inner .boxWrap .boxInner
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 85vw;
    max-width: 85rem;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .inner .boxWrap .boxInner
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
}

#modal.modal_abtart .inner .boxWrap .img
{
    -webkit-flex: 0 0 62%;
        -ms-flex: 0 0 62%;
            flex: 0 0 62%;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .inner .boxWrap .img
    {
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
}

#modal.modal_abtart .inner .boxWrap .box
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    box-sizing: border-box;

    -webkit-flex: 0 0 38%;
        -ms-flex: 0 0 38%;
            flex: 0 0 38%;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
            justify-content: space-around;
}

#modal.modal_abtart .inner .boxWrap .box > .text
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2;

    margin: 0;
}

#modal.modal_abtart .inner .boxWrap .box .boxIn > .tit
{
    font-size: 1.4rem;

    margin-bottom: 1.5rem;
}

#modal.modal_abtart .inner .boxWrap .box .boxIn .colorDetail
{
    margin-bottom: 8px;
    padding-bottom: 0;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_abtart .inner .boxWrap .box
    {
        padding: 2.5rem 1.5rem;

        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    #modal.modal_abtart .inner .boxWrap .box > .text
    {
        font-size: 1.2rem;
        line-height: 1.66;

        margin-bottom: 2.5rem;
    }
}

#modal.modal_abtart .inner .boxWrap .arrowl
{
    left: -15rem;
}

@media only screen and (max-width: 1200px)
{
    #modal.modal_abtart .inner .boxWrap .arrowl
    {
        top: auto;
        bottom: -6.8rem;
        left: 1.5rem;
    }
    #modal.modal_abtart .inner .boxWrap .arrowl svg
    {
        width: 75px;
        height: 4px;
    }
}

#modal.modal_abtart .inner .boxWrap .arrowr
{
    right: -15rem;
}

@media only screen and (max-width: 1200px)
{
    #modal.modal_abtart .inner .boxWrap .arrowr
    {
        top: auto;
        right: 1.5rem;
        bottom: -6.8rem;
    }
    #modal.modal_abtart .inner .boxWrap .arrowr svg
    {
        width: 75px;
        height: 4px;
    }
}

@media only screen and (max-width: 750px)
{
    #modal.modal_products .innerWrap
    {
        min-height: 75rem;
    }
}

#modal.modal_products .inner .boxWrap .boxInner .img
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding: 60px 0;

    background: url(../resource/img/product/modal/bg.png) no-repeat;
    background-position: center center;
    background-size: cover;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#modal.modal_products .inner .boxWrap .boxInner .img img
{
    width: auto;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_products .inner .boxWrap .boxInner .img
    {
        padding: 30px 0;
    }
    #modal.modal_products .inner .boxWrap .boxInner .img img
    {
        width: 170px;
        height: auto;
    }
}

#modal.modal_products .inner .boxWrap .box
{
    padding: 2rem 2rem 1rem;
}

#modal.modal_products .inner .boxWrap .box .text
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Arial, sans-serif;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 18px;

    -webkit-align-items: flex-end;
    -ms-flex-align: end;
            align-items: flex-end;
}

#modal.modal_products .inner .boxWrap .box .text span:nth-child(1)
{
    font-size: 14px;

    margin-right: 10px;

    letter-spacing: .1em;
}

#modal.modal_products .inner .boxWrap .box .text span:nth-child(2)
{
    font-size: 10px;

    letter-spacing: .1em;
}

#modal.modal_products .inner .boxWrap .box .colorList
{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#modal.modal_products .inner .boxWrap .box .colorList .colorBall
{
    font-size: 1rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 28px;
    height: 28px;
    margin-right: 1.5rem;
    margin-bottom: 1rem;

    letter-spacing: .05em;

    color: #fff;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
            flex-shrink: 0;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_products .inner .boxWrap .box .colorList .colorBall
    {
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

#modal.modal_color_chart .innerWrap
{
    min-height: 950px;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_color_chart .innerWrap
    {
        height: auto;
        min-height: 0;
        padding: 100px 40px;
    }
}

#modal.modal_color_chart .inner .boxWrap
{
    max-width: none;
}

#modal.modal_color_chart .inner .boxWrap .boxInner
{
    padding: 55px;

    background: #fff;
    box-shadow: 2.8rem 2.8rem 2rem 0rem rgba(0, 0, 0, .2);
}

#modal.modal_color_chart .inner .boxWrap .box
{
    padding: 0;

    background: none;
}

#modal.modal_color_chart .inner .boxWrap .box .tit
{
    font-size: 18px;

    margin-bottom: 11px;

    letter-spacing: .1em;
}

#modal.modal_color_chart .inner .boxWrap .box .text
{
    font-size: 14px;
    line-height: 2;

    margin-bottom: 25px;

    letter-spacing: .05em;
}

#modal.modal_color_chart .inner .boxWrap .box .img
{
    margin: 0 auto;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_color_chart .inner .boxWrap .boxInner
    {
        padding: 50px 25px;
    }
    #modal.modal_color_chart .inner .boxWrap .close
    {
        right: 0;
    }
    #modal.modal_color_chart .inner .boxWrap .box .text
    {
        line-height: 1.71;
    }
}

#modal.modal_color_chart .inner .boxWrap .box:nth-child(1)
{
    margin-bottom: 50px;
}

#modal.modal_color_chart .inner .boxWrap .box:nth-child(1) .img
{
    width: 520px;
    height: 241px;

    background: url(../resource/img/color_chart/img01.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_color_chart .inner .boxWrap .box:nth-child(1) .img
    {
        width: 251px;
        height: 538px;

        background: url(../resource/img/color_chart/img01_sp.png) no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

#modal.modal_color_chart .inner .boxWrap .box:nth-child(2) .img
{
    width: 532px;
    height: 237px;

    background: url(../resource/img/color_chart/img02.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #modal.modal_color_chart .inner .boxWrap .box:nth-child(2) .img
    {
        width: 245px;
        height: 404px;

        background: url(../resource/img/color_chart/img02_sp.png) no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

/* --------------------------------------------------------------------------------
*
*   discoverMore
*
-------------------------------------------------------------------------------- */
.discoverMore
{
    padding-bottom: 6rem;
}

.discoverMore .tit
{
    font-size: 3.6rem;

    padding: 10.5rem 0 6.5rem;

    text-align: center;
    letter-spacing: .15em;
}

@media only screen and (max-width: 750px)
{
    .discoverMore
    {
        padding-bottom: 10rem;
    }
    .discoverMore .tit
    {
        font-size: 2.4rem;

        padding: 7.5rem 0 3.5rem;
    }
}

.discoverMore .list .item
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    overflow: hidden;

    width: 25%;
    height: 30rem;

    cursor: pointer;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

.discoverMore .list .item .overlay
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: opacity .8s cubic-bezier(.25, .46, .45, .94) 0s;

    background: rgba(0, 0, 0, .5);
}

.discoverMore .list .item .cover
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: -webkit-transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;
    transition:         transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;
    transition:         transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-transform 1.2s cubic-bezier(.19, 1, .22, 1) 0s;

    background: url(../resource/img/common/f_img01.jpg);
    background-position: center center;
    background-size: cover;
}

.discoverMore .list .item .text
{
    font-size: 2.4rem;

    position: relative;
    z-index: 2;

    letter-spacing: .15em;

    color: #fff;
}

.discoverMore .list .item:hover .overlay
{
    opacity: .2;
}

.discoverMore .list .item:hover .cover
{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.discoverMore .list .item:nth-child(2) .cover
{
    background: url(../resource/img/common/f_img02.jpg);
    background-position: center center;
    background-size: cover;
}

.discoverMore .list .item:nth-child(3) .cover
{
    background: url(../resource/img/common/f_img03.jpg);
    background-position: center center;
    background-size: cover;
}

.discoverMore .list .item:nth-child(4) .cover
{
    background: url(../resource/img/common/f_img04.jpg);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    .discoverMore .list
    {
        padding-bottom: 4rem;
    }
    .discoverMore .list .item
    {
        width: 17rem;
        height: 17rem;

        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
                flex-shrink: 0;
    }
    .discoverMore .list .item .text
    {
        font-size: 1.4rem;
    }
}

.discoverMore .ui
{
    display: none;
}

.discoverMore .ui .barWrap .barInner
{
    opacity: 1;
}

@media only screen and (max-width: 750px)
{
    .discoverMore .ui
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        margin: 0 2.4rem;
    }
}

.id_products_water_based .discoverMore .list .item:nth-child(1) .cover
{
    background: url(../resource/img/common/f_img05.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

/* --------------------------------------------------------------------------------
*
*   color index
*
-------------------------------------------------------------------------------- */
#id_color .cssRenderer .tit
{
    font-size: 1.6rem;

    text-align: center;
    letter-spacing: .2em;
}

#id_color .cssRenderer .text
{
    font-size: 1.2rem;
    line-height: 1.66;

    text-align: center;
    letter-spacing: .05em;
}

/* --------------------------------------------------------------------------------
*
*   coverWrap
*
-------------------------------------------------------------------------------- */
.coverWrap
{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;
}

.coverWrap .cover
{
    width: 100%;
    height: 100%;

    background: #fff;
}

/* --------------------------------------------------------------------------------
*
*   Tit
*
-------------------------------------------------------------------------------- */
.titSpan,
.subTitSpan,
.textSpan,
.numSpan,
.categorytextSpan
{
    opacity: 0;
}

/* --------------------------------------------------------------------------------
*
*   cssrenderer
*
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 750px)
{
    .cssRendererColorIndex .text
    {
        display: none;
    }
}

/* --------------------------------------------------------------------------------
*
*   media query module
*
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 750px)
{
    br.sp
    {
        display: inline-block;
    }
    br.pc
    {
        display: none;
    }
    .display.sp
    {
        display: inline-block;
    }
    .display.pc
    {
        display: none;
    }
    /*
  *
  *   display flex
  *
  */
    .sp-order-1
    {
        -webkit-order: 1;
        -ms-flex-order: 1;
                order: 1;
    }
    .sp-order-2
    {
        -webkit-order: 2;
        -ms-flex-order: 2;
                order: 2;
    }
    .sp-order-3
    {
        -webkit-order: 3;
        -ms-flex-order: 3;
                order: 3;
    }
    .sp-order-4
    {
        -webkit-order: 4;
        -ms-flex-order: 4;
                order: 4;
    }
    .sp-order-5
    {
        -webkit-order: 5;
        -ms-flex-order: 5;
                order: 5;
    }
    .sp-order-6
    {
        -webkit-order: 6;
        -ms-flex-order: 6;
                order: 6;
    }
    .sp-order-7
    {
        -webkit-order: 7;
        -ms-flex-order: 7;
                order: 7;
    }
    .sp-order-8
    {
        -webkit-order: 8;
        -ms-flex-order: 8;
                order: 8;
    }
    .sp-order-9
    {
        -webkit-order: 9;
        -ms-flex-order: 9;
                order: 9;
    }
}

@media only screen and (min-width: 751px)
{
    br.pc
    {
        display: inline-block;
    }
    br.sp
    {
        display: none;
    }
    .display.pc
    {
        display: inline-block;
    }
    .display.sp
    {
        display: none;
    }
    /*
  *
  *   display flex
  *
  */
    .pc-order-1
    {
        -webkit-order: 1;
        -ms-flex-order: 1;
                order: 1;
    }
    .pc-order-2
    {
        -webkit-order: 2;
        -ms-flex-order: 2;
                order: 2;
    }
    .pc-order-3
    {
        -webkit-order: 3;
        -ms-flex-order: 3;
                order: 3;
    }
    .pc-order-4
    {
        -webkit-order: 4;
        -ms-flex-order: 4;
                order: 4;
    }
    .pc-order-5
    {
        -webkit-order: 5;
        -ms-flex-order: 5;
                order: 5;
    }
    .pc-order-6
    {
        -webkit-order: 6;
        -ms-flex-order: 6;
                order: 6;
    }
    .pc-order-7
    {
        -webkit-order: 7;
        -ms-flex-order: 7;
                order: 7;
    }
    .pc-order-8
    {
        -webkit-order: 8;
        -ms-flex-order: 8;
                order: 8;
    }
    .pc-order-9
    {
        -webkit-order: 9;
        -ms-flex-order: 9;
                order: 9;
    }
}

/* --------------------------------------------------------------------------------
*
*   link
*
-------------------------------------------------------------------------------- */
a
{
    text-decoration: none;

    color: #242529;
}

a:hover
{
    text-decoration: none;

    color: #242529;
}

a:visited
{
    text-decoration: none;

    color: #242529;
}

a:active
{
    text-decoration: none;

    color: #242529;
}

/* --------------------------------------------------------------------------------
*
*   box-shadow
*
-------------------------------------------------------------------------------- */
.box-shadow
{
    box-shadow: 4px 2px 10px 1px #ccc inset;
}

/* --------------------------------------------------------------------------------
*
*   text-shadow
*
-------------------------------------------------------------------------------- */
.text-shadow
{
    text-shadow: 5px 5px 2px #ccc;
}

/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
.highlight
{
    color: #ff405e;
}

.error
{
    color: #e83434;
}

.error
{
    position: absolute;
    bottom: 5.1rem;
    left: 50%;

    width: 100%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

/* --------------------------------------------------------------------------------
*   page
-------------------------------------------------------------------------------- */
/*
*
*   top
*
*/
#barba-wrapper.id_top
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_top .section01
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    box-sizing: border-box;
    min-height: 100vh;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    /* --------------------------------------------------------------------------------
  *
  *   bgs
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   inner
  *
  -------------------------------------------------------------------------------- */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01
    {
        min-height: 0;
    }
}

#barba-wrapper.id_top .section01 .bgs
{
    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

#barba-wrapper.id_top .section01 .bgs .bg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
}

#barba-wrapper.id_top .section01 .bgs .bg.active
{
    opacity: 1;
}

#barba-wrapper.id_top .section01 .bgs .bg.transit
{
    transition: opacity 1.5s cubic-bezier(.455, .03, .515, .955) 0s;
}

#barba-wrapper.id_top .section01 .bgs .bg01
{
    background: url(../resource/img/top/bg.jpg);
    background-position: top center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .bgs .bg01
    {
        background: url(../resource/img/top/bg_sp.jpg);
        background-position: top center;
        background-size: cover;
    }
}

#barba-wrapper.id_top .section01 .bgs .bg02
{
    background: url(../resource/img/top/bg02.jpg);
    background-position: top center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .bgs .bg02
    {
        background: url(../resource/img/top/bg02.jpg);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_top .section01 .bgs .bg02 .img
{
    position: absolute;
    top: 50vh;
    left: 50vw;

    width: 100%;
    height: 100%;
    margin-top: calc(-1500px + 870px);
    margin-left: calc(-1500px - 310px);

    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

#barba-wrapper.id_top .section01 .bgs .bg02 .img img
{
    -webkit-transform: rotate(-92deg);
        -ms-transform: rotate(-92deg);
            transform: rotate(-92deg);
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .bgs .bg02 .img
    {
        position: absolute;
        top: 50vh;
        left: 50vw;

        width: 100%;
        height: 100%;
        margin-top: calc(-700px / 2 + 0px);
        margin-left: calc(-700px / 2 - 0px);
    }
    #barba-wrapper.id_top .section01 .bgs .bg02 .img img
    {
        width: 700px;
        height: auto;
    }
}

#barba-wrapper.id_top .section01 .bgs .bg03
{
    background: url(../resource/img/top/bg03.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_top .section01 .bgs .bg04
{
    background: url(../resource/img/top/bg04.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_top .section01 .bgs .bg05
{
    background: url(../resource/img/top/bg05.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_top .section01 .img
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -4rem;
    margin-left: 20rem;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#barba-wrapper.id_top .section01 .img .pen
{
    position: fixed;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#barba-wrapper.id_top .section01 .img .innerWrap
{
    display: inline-block;

    opacity: 0;
}

#barba-wrapper.id_top .section01 .img .pen01
{
    z-index: 2;
    top: calc(50% + 66px);
    left: calc(50% - 180px);
}

#barba-wrapper.id_top .section01 .img .pen01 .inner
{
    width: 268px;
    height: 160px;

    background: url(../resource/img/top/pen01.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .img .pen01
    {
        top: calc(50% + 5.6rem);
        left: calc(50% - 25rem);
    }
    #barba-wrapper.id_top .section01 .img .pen01 .inner
    {
        width: 45rem;
        height: 47.2rem;

        background: url(../resource/img/top/pen01_sp.png);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_top .section01 .img .pen02
{
    z-index: 2;
    top: calc(50% + -196px);
    left: calc(50% + 340px);
}

#barba-wrapper.id_top .section01 .img .pen02 .inner
{
    width: 82px;
    height: 66px;

    background: url(../resource/img/top/pen02.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .img .pen02
    {
        top: calc(50% - 19.6rem);
        left: calc(50% - 18rem);
    }
    #barba-wrapper.id_top .section01 .img .pen02 .inner
    {
        width: 6.5rem;
        height: 5.1rem;

        background: url(../resource/img/top/pen02_sp.png);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_top .section01 .img .pen03 .inner
{
    width: 461px;
    height: 462px;

    background: url(../resource/img/top/pen03.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .img .pen03
    {
        top: calc(50% + 3rem);
        left: calc(50% - 18rem);
    }
    #barba-wrapper.id_top .section01 .img .pen03 .inner
    {
        width: 28.3rem;
        height: 48.1rem;

        background: url(../resource/img/top/pen03_sp.png);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_top .section01 .img .pen04
{
    top: calc(50% + 14px);
    left: calc(50% + -200px);
}

#barba-wrapper.id_top .section01 .img .pen04 .inner
{
    width: 1366px;
    height: 768px;

    background: url(../resource/img/top/pen_shadow.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .img .pen04 .inner
    {
        display: none;
    }
}

#barba-wrapper.id_top .section01 .cover
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(228, 228, 229, .2);
}

#barba-wrapper.id_top .section01 .inner
{
    position: relative;
    z-index: 2;

    width: 100rem;
    max-width: 100rem;
    margin: 0 auto;
    margin-top: 11.5rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .inner
    {
        width: 100%;
        margin: 6rem 2.5rem 0;
    }
}

#barba-wrapper.id_top .section01 .inner .sliderTop
{
    opacity: 0;
    /*
      *
      *   item
      *
      */
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    margin-bottom: 7.8rem;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .itemInner
{
    display: inline-block;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .category
{
    margin-bottom: 2rem;

    -webkit-align-items: flex-end;
    -ms-flex-align: end;
            align-items: flex-end;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .category .num
{
    font-size: 1.4rem;

    margin-right: 1.5rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .category .categorytext
{
    font-size: 2.4rem;

    margin-bottom: -1px;

    letter-spacing: .1em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .tit
{
    font-size: 6rem;

    margin-bottom: 2.5rem;
    margin-left: -.3rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .subTit
{
    font-size: 2rem;
    line-height: 1.44;

    margin-bottom: 1.2rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .itemInner > .text
{
    line-height: 1.66;

    letter-spacing: .1em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .seeMore
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: 2.2rem;

    opacity: 0;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .seeMore .textIn
{
    font-size: 1.2rem;

    position: relative;

    margin-right: .6rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .seeMore .textIn .bar
{
    position: absolute;
    bottom: -5px;
    left: 0;

    width: 100%;
    height: 1px;

    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
            transform-origin: 0 50%;

    background: #242529;
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item .seeMore .icon svg
{
    width: 1.4rem;
    height: .4rem;
    margin-bottom: 2px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .inner .sliderTop .item
    {
        margin-bottom: 10.5rem;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .category
    {
        margin-bottom: 2rem;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .category .num
    {
        font-size: 1rem;

        margin-right: 1rem;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .category .text
    {
        font-size: 1.8rem;

        margin-bottom: -.2rem;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .tit
    {
        font-size: 4.2rem;
        line-height: 1;

        margin-bottom: 1.7rem;
        margin-left: 0;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .subTit
    {
        font-size: 1.8rem;

        margin-bottom: 1.4rem;
    }
    #barba-wrapper.id_top .section01 .inner .sliderTop .item .itemInner > .text
    {
        font-size: 1.2rem;
    }
}

#barba-wrapper.id_top .section01 .inner .sliderTop .item:nth-child(5) .category .categorytext
{
    white-space: nowrap;
}

#barba-wrapper.id_top .section01 .ui
{
    position: absolute;
    z-index: 3;
    bottom: 13rem;
    left: 50%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_top .section01 .ui
    {
        bottom: 10rem;

        box-sizing: border-box;
        width: 100%;
        padding: 0 2.4rem;
    }
}

/*
*
*   products
*
*/
#barba-wrapper.id_products_water_based
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_products_water_based .section01
{
    /* --------------------------------------------------------------------------------
  *
  *   block01
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block02
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block03
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block04
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block05
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block06
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   block07
  *
  -------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
  *
  *   discoverMore
  *
  -------------------------------------------------------------------------------- */
}

#barba-wrapper.id_products_water_based .section01 .block
{
    overflow: hidden;
}

#barba-wrapper.id_products_water_based .section01 .block .inner
{
    max-width: 100rem;
    margin: 0 auto;
}

#barba-wrapper.id_products_water_based .section01 .block01
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    background: url(../resource/img/product/bg01.jpg);
    background-position: center center;
    background-size: cover;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block01 > .text
{
    font-size: 6.8rem;

    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -9.1rem;
    margin-left: 4rem;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    white-space: nowrap;
    letter-spacing: .3em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 > .text
    {
        font-size: 4rem;
        line-height: 1.175;

        width: 30rem;
        margin-top: -10rem;
        margin-left: 0;

        text-align: center;
    }
}

#barba-wrapper.id_products_water_based .section01 .block01 .img img
{
    width: 109.4rem;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 .img
    {
        margin-top: -6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .img img
    {
        width: 100%;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens
{
    position: absolute;
    top: 50%;
    left: 50%;
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen
{
    position: absolute;

    opacity: 0;
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen01
{
    top: -20rem;
    left: -54.8rem;
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen01 .inner
{
    width: 24.5rem;
    height: 17.9rem;

    background: url(../resource/img/product/toppen01.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen01
    {
        top: -23.5rem;
        left: -17rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen01 .inner
    {
        width: 8.6rem;
        height: 6.2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen02
{
    top: -26.5rem;
    left: 42.6rem;
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen02 .inner
{
    width: 12.2rem;
    height: 9.3rem;

    background: url(../resource/img/product/toppen02.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen02
    {
        top: 6rem;
        left: 13rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen02 .inner
    {
        width: 4.2rem;
        height: 3.1rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen03
{
    top: 3.2rem;
    left: -44.8rem;
}

#barba-wrapper.id_products_water_based .section01 .block01 .pens .pen03 .inner
{
    width: 93.9rem;
    height: 23.1rem;

    background: url(../resource/img/product/toppen03.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen03
    {
        top: -1.3rem;
        left: -16.4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .pens .pen03 .inner
    {
        width: 31.8rem;
        height: 7.8rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block01 .scroll
{
    position: absolute;
    bottom: 6rem;
    left: 50%;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    margin-left: -2.5rem;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block01 .scroll .text
{
    font-size: 1.2rem;

    margin-bottom: 1.3rem;

    letter-spacing: .1em;

    opacity: 0;
    color: #000;
}

#barba-wrapper.id_products_water_based .section01 .block01 .scroll .bar
{
    width: 2px;
    height: 4rem;

    opacity: 0;
    background: #000;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block01 .scroll
    {
        bottom: auto;
        bottom: 7rem;

        margin-top: -3.4rem;
        margin-left: -2.1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .scroll .text
    {
        font-size: 1rem;

        margin-bottom: 1rem;

        color: #000;
    }
    #barba-wrapper.id_products_water_based .section01 .block01 .scroll .bar
    {
        width: 1px;
        height: 3rem;

        background: #000;
    }
}

#barba-wrapper.id_products_water_based .section01 .block02
{
    position: relative;

    overflow: hidden;

    padding: 10rem 0;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block02
    {
        padding: 6rem 2.4rem 0;
    }
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .img
{
    position: absolute;
    right: calc(50% - 80.4rem);
    bottom: -12rem;

    margin-bottom: -50px;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .img img
{
    width: 89.3rem;
    height: auto;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .subTit
{
    font-size: 2.4rem;

    margin-bottom: 4rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .bar
{
    width: 6rem;
    height: .2rem;
    margin-bottom: 5rem;

    background-color: #242529;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .tit
{
    font-size: 2.8rem;
    line-height: 2;

    margin-bottom: 2rem;

    letter-spacing: .3em;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text
{
    font-size: 1.6rem;
    line-height: 2;

    width: 53rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text01
{
    margin-bottom: 3.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text02
{
    margin-bottom: 7.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .tit
{
    font-size: 1.8rem;

    margin-bottom: 1.7rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner
{
    margin-right: 3rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner:last-child .text:nth-child(1) span
{
    margin-right: 1.6rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner:last-child .text:nth-child(2) span
{
    margin-right: .2rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner:last-child .text:nth-child(3) span
{
    margin-right: 2.6rem;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .text
{
    font-size: 1.2rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 1rem;

    letter-spacing: 0;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .text span
{
    display: block;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .text span:nth-child(1)
{
    font-weight: bold;

    margin-right: 4px;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .text span:nth-child(2)
{
    line-height: 1.8;

    margin-top: -5px;
}

#barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .text:last-child
{
    margin-bottom: 0;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block02 .inner
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .img
    {
        position: relative;
        right: 5.33333vw;
        bottom: -20.53333vw;

        margin-top: -13.33333vw;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .img img
    {
        width: 120.8vw;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .subTit
    {
        font-size: 1.8rem;

        margin-bottom: 3.2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .bar
    {
        width: 5rem;
        height: 1px;
        margin-bottom: 4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .tit
    {
        font-size: 2rem;
        line-height: 1.6;

        margin-bottom: 2.5rem;

        letter-spacing: .25em;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text
    {
        font-size: 1.4rem;
        line-height: 1.71;

        width: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text01
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap > .text02
    {
        margin-bottom: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .tit
    {
        font-size: 1.4rem;

        margin-bottom: 1.8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner
    {
        margin-bottom: 1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner .text
    {
        font-size: 1.1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner .text span
    {
        margin-right: 2.6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner .text span:nth-child(1)
    {
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner .text span:nth-child(2)
    {
        line-height: 1.6;

        margin-top: -3px;

        -webkit-flex: 0 0 90%;
            -ms-flex: 0 0 90%;
                flex: 0 0 90%;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner:last-child .text:nth-child(1) span
    {
        margin-right: 1.6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block02 .inner .textWrap .spec .textBox .textInner:last-child .text:nth-child(2) span
    {
        margin-right: .5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03
{
    padding: 10rem 0 13rem;

    background: url(../resource/img/product/bg02.jpg);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03
    {
        padding: 6rem 2.5rem 2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .titWrap
{
    position: relative;
    z-index: 2;

    margin-bottom: 9rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .titWrap .subTit
{
    font-size: 2.4rem;

    margin-bottom: 4rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .titWrap .bar
{
    width: 6rem;
    height: .2rem;

    background-color: #242529;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .titWrap
    {
        margin-bottom: 6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .titWrap .subTit
    {
        font-size: 1.8rem;

        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .titWrap .bar
    {
        width: 5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .tit
{
    margin-bottom: 7rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .tit svg
{
    width: 6.8rem;
    height: 3rem;
    padding: .2rem;

    stroke: #000;
    fill: none;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box .tit
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .tit svg
    {
        width: 4.5rem;
        height: 2.2rem;
        margin-left: -.2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .tit
{
    font-size: 8rem;

    margin-bottom: .9rem;
    margin-left: -.4rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subTit01
{
    font-size: 2.4rem;

    margin-bottom: .6rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subTit02
{
    font-size: 1.4rem;

    margin-bottom: 4rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .text
{
    font-size: 2.4rem;
    line-height: 1.41;

    margin-bottom: 1.5rem;

    letter-spacing: .15em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subtext
{
    font-size: 1.6rem;
    line-height: 1.75;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap
    {
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .tit
    {
        font-size: 6rem;

        margin-bottom: .8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subTit01
    {
        font-size: 2rem;

        margin-bottom: 1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .subTit02
    {
        font-size: 1.2rem;

        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner .textWrap .text
    {
        font-size: 2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2)
{
    margin-bottom: 15.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) .textWrap
{
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) > .img
{
    height: 31rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) > .img img
{
    position: relative;
    top: -9rem;
    left: -20rem;

    margin-top: 70px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2)
    {
        margin-bottom: 0;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) .textWrap
    {
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) > .img
    {
        height: 27rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(2) > .img img
    {
        top: 2rem;
        left: -3rem;

        width: auto;
        height: 26rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3)
{
            flex-direction: row-reverse;

    margin-top: -8rem;

    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .textWrap
{
    -webkit-flex: 0 0 37%;
        -ms-flex: 0 0 37%;
            flex: 0 0 37%;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .img img
{
    position: relative;
    top: -6rem;
    left: -3.5rem;

    margin-top: 70px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3)
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .img
    {
        position: relative;

        height: 22rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box .boxInner:nth-child(3) .img img
    {
        position: absolute;
        top: 4rem;
        right: 0;
        left: auto;

        width: auto;
        height: 17rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(2)
{
    margin-bottom: 10rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(2)
    {
        margin-bottom: 0rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .tit
{
    margin-bottom: 6.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .tit svg
{
    width: 7rem;
    height: 3rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .tit
    {
        margin-bottom: 4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .tit svg
    {
        width: 5.1rem;
        height: 2.2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .tit
{
    font-size: 3.6rem;

    margin-bottom: 1.5rem;
    margin-left: 0;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .subTit01
{
    font-size: 1.6rem;
    font-weight: normal;

    margin-bottom: 4rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .text
{
    font-size: 1.6rem;
    line-height: 1.75;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .subtext {
    font-size: 1.2rem;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .tit
    {
        font-size: 2.8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .subTit01
    {
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .textWrap .text
    {
        margin-bottom: 4rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap
{
    position: relative;

    margin-top: 70px;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img img
{
    position: static;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img01
{
    position: absolute;
    top: -3rem;
    left: 4rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img02
{
    position: absolute;
    top: 8rem;
    left: 49rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img03
{
    position: absolute;
    top: -90rem;
    left: 11rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .textInner
{
    position: absolute;
    top: 25rem;
    left: 27rem;

    width: 26rem;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .textInner .tit
{
    font-size: 1.4rem;
    font-weight: bold;

    margin-bottom: 1rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .textInner .text
{
    font-size: 1.2rem;
    line-height: 1.66;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap
    {
        -webkit-flex: 0 0 43rem;
            -ms-flex: 0 0 43rem;
                flex: 0 0 43rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img01
    {
        top: 13rem;
        left: -1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img02
    {
        top: 34rem;
        left: 18rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img03
    {
        top: -34rem;
        left: 1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .img03 img
    {
        width: 80rem;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block03 .box:nth-child(3) .boxInner .imgWrap .textInner
    {
        position: static;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04
{
    padding: 10rem 0 10rem;

    background-color: #fff;
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04
    {
        padding: 6rem 2.5rem 2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .titWrap
{
    position: relative;
    z-index: 2;

    margin-bottom: 12rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .titWrap .subTit
{
    font-size: 2.4rem;

    margin-bottom: 4rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .titWrap .bar
{
    width: 6rem;
    height: .2rem;

    background-color: #242529;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .titWrap
    {
        margin-bottom: 6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .titWrap .subTit
    {
        font-size: 1.8rem;

        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .titWrap .bar
    {
        width: 5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2)
{
    margin-bottom: 15rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2)
    {
        margin-bottom: 8rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .boxTit
{
    margin-bottom: 5.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .boxTit svg
{
    width: 36.5rem;
    height: 3.1rem;
    padding: .2rem;

    stroke: #000;
    fill: none;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .boxTit
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .boxTit svg
    {
        width: 27.1rem;
        height: 2.2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap
{
    -webkit-flex: 0 0 54%;
        -ms-flex: 0 0 54%;
            flex: 0 0 54%;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .tit
{
    font-size: 4rem;
    font-style: italic;

    margin-bottom: 2rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .text
{
    font-size: 2.4rem;

    margin-bottom: 2.5rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText
{
    margin-bottom: 2.8rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText .item
{
    font-size: 1.6rem;
    line-height: 2;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText .item span
{
    font-size: 1.8rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .item
{
    position: relative;

    margin-right: 3rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .num
{
    font-size: 2.4rem;
    font-weight: bold;
    font-style: italic;

    position: absolute;
    right: 2.3rem;
    bottom: .8rem;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .num
    {
        right: .7rem;
        bottom: .5rem;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap
    {
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .tit
    {
        font-size: 3.6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .text
    {
        font-size: 2rem;
        line-height: 1.5;

        margin-bottom: 1.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText
    {
        margin-bottom: 2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText .item
    {
        font-size: 1.4rem;
        line-height: 1.5;

        padding-left: 2.2rem;

        text-indent: -2.2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listText .item span
    {
        position: relative;
        top: 1px;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .item
    {
        margin-right: 1.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner .textWrap .listImg .item img
    {
        width: 10rem;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(1)
{
    height: 43.5rem;
    margin-bottom: 10rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(1) > .img
{
    position: relative;
    top: -14rem;
    left: -2rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(1)
    {
                flex-direction: column-reverse;

        height: auto;
        margin-bottom: 6rem;

        -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(1) > .img
    {
        top: -4rem;
        left: 0;

        height: 34rem;
        margin-bottom: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(1) > .img img
    {
        width: 81rem;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2)
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap
{
    -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listText
{
    margin-bottom: 1rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .subtext
{
    font-size: 1.2rem;

    margin-bottom: 2.5rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listImg
{
    margin-bottom: 9rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail
{
    position: absolute;
    top: 304px;
    left: 585px;

    width: 420px;
    height: 260px;

    background: #fff;
    box-shadow: 0 33px 65px 0 rgba(0, 0, 0, .2), 0 23px 20px 0 rgba(0, 0, 0, .15);
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .num
{
    font-size: 100px;

    position: absolute;
    top: -8px;
    right: 7px;

    letter-spacing: 0;

    color: #f2f2f2;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .tit
{
    position: relative;
    z-index: 2;

    padding-top: 65px;

    text-align: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .text01
{
    font-size: 14px;
    font-weight: bold;

    padding-top: 16px;

    text-align: center;
    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .img
{
    margin-left: 15px;
    padding-top: 24px;

    text-align: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .text02
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding-top: 4px;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .text02 .textIn
{
    font-size: 12px;
    line-height: 1.67;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2)
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap
    {
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listText
    {
        margin-bottom: 1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listText .item:nth-child(1)
    {
        padding-left: 2.1rem;

        text-indent: -2.1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listText .item:nth-child(1) span
    {
        margin-right: .3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .textWrap .listImg
    {
        margin-bottom: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail
    {
        position: relative;
        top: 0;
        left: 0;

        width: 100%;
        height: auto;
        margin-bottom: 6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .num
    {
        font-size: 7.5rem;

        top: -.4rem;
        right: .7rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .tit
    {
        padding-top: 4.3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .tit img
    {
        width: auto;
        height: 2.1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .text01
    {
        font-size: 1.2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .img img
    {
        width: auto;
        height: 3.7rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(2) .detail .text02 .textIn
    {
        padding: .6rem 2rem 2rem;

        text-align: justify;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(3) .textWrap
{
    -webkit-flex: 0 0 80%;
        -ms-flex: 0 0 80%;
            flex: 0 0 80%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(3) .textWrap
    {
        -webkit-flex: 0 0 100%;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(3) .textWrap .item:nth-child(1)
    {
        padding-left: 2.1rem;

        text-indent: -2.1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(2) .boxInner:nth-child(3) .textWrap .item:nth-child(1) span
    {
        margin-right: .3rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3)
{
    height: 59rem;
    margin-bottom: 18rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) > .img
{
    width: 40rem;
    margin-right: 21rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) > .img img
{
    position: relative;
    top: -8.2rem;
    left: -68rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3)
    {
                flex-direction: column;

        height: auto;
        margin-bottom: 8rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) > .img
    {
        height: 30rem;
        margin-bottom: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) > .img img
    {
        top: -7rem;
        left: -46rem;

        width: 80rem;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner
{
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    -webkit-flex-basis: calc(100% - 40rem);
    -ms-flex-preferred-size: calc(100% - 40rem);
            flex-basis: calc(100% - 40rem);
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .tit
{
    margin-bottom: 3.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .tit svg
{
    width: 40.2rem;
    height: 2.8rem;
    padding: .2rem;

    stroke: #000;
    fill: none;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .text
{
    font-size: 2.4rem;

    margin-bottom: 2rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .textInner
{
    position: relative;
    z-index: 2;

    margin-left: .5rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .textInner .text
{
    font-size: 1.6rem;
    line-height: 1.75;

    margin-right: .9rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap > .img
{
    margin-top: -6rem;
    margin-left: -12rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .subtext
{
    font-size: 1.6rem;

    padding-left: 4.5rem;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .tit
    {
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .tit svg
    {
        width: 24rem;
        height: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .text
    {
        font-size: 2rem;

        letter-spacing: .0em;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .textInner
    {
        margin: 0;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .textInner .text
    {
        font-size: 1.4rem;
        line-height: 1.57;

        margin-right: .6rem;

        letter-spacing: .0em;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .textInner .img img
    {
        width: 10rem;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap > .img
    {
        position: relative;
        left: -3.4rem;

        margin-top: -1rem;
        margin-bottom: 1rem;
        margin-left: 0;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap > .img img
    {
        width: 100%;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(3) .boxInner .textWrap .subtext
    {
        font-size: 1.4rem;

        padding-left: 1rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4)
{
    height: 44rem;
    margin-bottom: 17rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) > .img img
{
    position: relative;
    top: -16.2rem;
    left: 3rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4)
    {
                flex-direction: column-reverse;

        height: auto;
        margin-bottom: 6rem;

        -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) > .img
    {
        height: 47rem;
        margin-top: -5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) > .img img
    {
        top: -4rem;
        left: -4rem;

        width: 90rem;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner
{
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    -webkit-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
            flex-basis: 40%;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .tit
{
    margin-bottom: 3.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .tit svg
{
    width: 45.4rem;
    height: 2.8rem;
    padding: .2rem;

    stroke: #000;
    fill: none;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .text
{
    font-size: 2.4rem;

    margin-bottom: 2.8rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText
{
    margin-bottom: 2.8rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item
{
    font-size: 1.6rem;
    line-height: 2;

    padding-left: 2.2rem;

    text-indent: -2.2rem;
    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item span
{
    font-size: 1.8rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item:nth-child(1) span
{
    margin-right: .3rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item:nth-child(4)
{
    line-height: 1.5;

    margin-top: 4px;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .listImgInner
{
    margin-right: 3rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .item
{
    position: relative;

    margin-right: 3rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .num
{
    font-size: 2.4rem;
    font-weight: bold;
    font-style: italic;

    position: absolute;
    right: 2.3rem;
    bottom: .8rem;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .num
    {
        right: .7rem;
        bottom: .5rem;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner
    {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .tit
    {
        font-size: 3.6rem;

        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .tit svg
    {
        width: 24.3rem;
        height: 5.8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .text
    {
        font-size: 2rem;

        letter-spacing: .0em;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText
    {
        margin-bottom: 2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item
    {
        font-size: 1.4rem;
        line-height: 1.5;

        margin-bottom: .8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item span
    {
        position: relative;
        top: 1px;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listText .item:nth-child(1) span
    {
        margin-right: .5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .listImgInner
    {
        margin-bottom: 2rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .listImgInner:nth-child(2)
    {
        margin-right: 0;

        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
                justify-content: flex-end;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .item
    {
        width: 10rem;
        height: 100%;
        margin-right: 1.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(4) .boxInner .textWrap .listImg .item img
    {
        width: 100%;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap
{
    margin-bottom: 1.5rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap .tit
{
    margin-right: 2.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap .text
{
    font-size: 1.4rem;
    font-weight: bold;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list
{
    margin-bottom: 6rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item
{
    margin-right: 2.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .img
{
    margin-bottom: 1.5rem;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .tit
{
    font-size: 1.6rem;

    margin-bottom: 1.2rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .text
{
    font-size: 1.4rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .shadow
{
    margin-bottom: 6.5rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap
    {
                flex-direction: column;

        margin-bottom: 2.5rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
                align-items: flex-start;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap .tit
    {
        margin-bottom: 1.3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap .tit img
    {
        width: 14rem;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .titWrap .text
    {
        font-size: 1.6rem;
        line-height: 1.5;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list
    {
                flex-direction: column;

        margin-bottom: 5rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item
    {
        margin-right: 0;
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .img img
    {
        width: 100%;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item .tit
    {
        font-size: 1.8rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .list .item:last-child
    {
        margin-bottom: 0;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(5) .shadow
    {
        display: none;
    }
}

#barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(6)
{
    text-align: center;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(6)
    {
        margin-bottom: 4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block04 .box:nth-child(6) .img img
    {
        width: 100%;
        height: auto;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05
{
    padding: 6rem 0 10rem;

    background: url(../resource/img/product/bg02.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_products_water_based .section01 .block05 .inner
{
    max-width: 103rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05
    {
        padding: 4.5rem 0 6rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap
{
    text-align: center;
    /*
      *
      *   about
      *
      */
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit
{
    font-size: 24rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit .textInner
{
    position: relative;

    display: inline-block;

    margin-left: -29px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit .textInner
    {
        margin-left: -1.5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit .textInner span
{
    opacity: 0;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .subTit
{
    font-size: 4rem;

    margin-bottom: 4.5rem;
    margin-left: 2.2rem;

    letter-spacing: 1em;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .text
{
    font-size: 2.8rem;
    line-height: 1.71;

    margin-bottom: 3rem;

    letter-spacing: .3em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .tit
    {
        font-size: 14rem;

        margin-bottom: .5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .subTit
    {
        font-size: 2.4rem;

        margin-bottom: 3rem;
        margin-left: 1rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block05 .textWrap > .text
    {
        font-size: 2rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 5rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .aboutInner
{
    padding: .5rem .9rem;
    padding-right: 1.6rem;

    cursor: pointer;
    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, border .7s cubic-bezier(.25, .46, .45, .94) 0s;

    border: 1px solid #a4a4a5;
    border-radius: 10rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .circle
{
    font-size: 1.4rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 2rem;
    height: 2rem;

    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, color .7s cubic-bezier(.25, .46, .45, .94) 0s;

    color: #fff;
    border-radius: 50%;
    background: #000;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .text
{
    font-weight: bold;

    margin-left: .6rem;

    transition: color .7s cubic-bezier(.25, .46, .45, .94) 0s;
    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .aboutInner:hover
{
    border: 1px solid #23252a;
    background: #23252a;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .aboutInner:hover .circle
{
    color: #23252a;
    background: #fff;
}

#barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about .aboutInner:hover .text
{
    color: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .textWrap .about
    {
        margin-bottom: 3rem;
        margin-bottom: 4.1rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .colorList
{
    margin-bottom: 5rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_products_water_based .section01 .block05 .colorList .colorBall
{
    font-size: 1rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: calc((100% - 2.0rem * 14) / 15);
    max-width: 5rem;
    margin-right: 2rem;
    margin-bottom: 2rem;

    letter-spacing: .1em;

    color: #fff;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
            flex-shrink: 0;
}

@media only screen and (min-width: 769px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .colorList .colorBall:nth-child(15n)
    {
        margin-right: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .colorList
    {
        margin-bottom: 3rem;
        padding: 0 2.4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block05 .colorList .colorBall
    {
        width: calc((100% - 1.5rem * 5) / 6);
        max-width: none;
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block05 .colorList .colorBall:nth-child(6n)
    {
        margin-right: 0;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .btn
{
    font-size: 1.6rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    letter-spacing: .2em;

    color: #fff;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .btn .btnInner
{
    position: relative;

    width: 32.6rem;
    height: 7.6rem;

    cursor: pointer;
}

#barba-wrapper.id_products_water_based .section01 .block05 .btn .btnInner a
{
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 100%;
    height: 100%;

    color: #fff;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .btn .btnInner span
{
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .btn .btnInner
    {
        font-size: 1.2rem;

        width: 24.2rem;
        height: 5.6rem;

        letter-spacing: .2em;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf
{
    margin-top: 80px;
    /*
      *
      *   pdfBtn
      *
      */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .pdf
    {
        margin-top: 50px;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .scrollImg7
{
    display: -ms-flexbox;
    display:         flex;
    display: -webkit-flex;

    width: 100%;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .scrollImg7 img
{
    width: auto;
    max-width: 830px;

    box-shadow: 23px 23px 65px 0 rgba(0, 0, 0, .15), 14px 14px 20px 0 rgba(0, 0, 0, .25);
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .pdf .scrollImg7 img
    {
        width: calc(100% - 5rem);
        margin-left: 2.5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 5rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .pdfBtnInner
{
    padding: .6rem 3rem .7rem;
    padding-right: 3rem;

    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, border .7s cubic-bezier(.25, .46, .45, .94) 0s;

    color: #fff;
    border: 1px solid #23252a;
    border-radius: 10rem;
    background: #242529;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .pdfBtnInner:hover
{
    color: #23252a;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .circle
{
    position: relative;
    top: 1px;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: auto;
    height: auto;

    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, color .7s cubic-bezier(.25, .46, .45, .94) 0s;

    border-radius: none;
    background: none;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .text
{
    font-size: 12px;

    margin-left: 1.2rem;

    transition: color .7s cubic-bezier(.25, .46, .45, .94) 0s;
    letter-spacing: .05em;
    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn .pdfBtnInner:hover
{
    border: 1px solid #fff;
    background: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block05 .pdf .pdfBtn
    {
        margin-bottom: 3rem;
        margin-bottom: 4.1rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}

#barba-wrapper.id_products_water_based .section01 .block06
{
    padding: 6rem 0;

    background: #f5f5f5;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block06
    {
        padding: 5rem 0 2.5rem;
    }
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap
{
    margin-bottom: 3.5rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme,
#barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-popular
{
    margin-top: 5rem;
    padding-top: 5rem;
    border-top: 1px solid #e4e4e5;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .tit
{
    font-size: 3rem;

    margin-right: 1.8rem;

    margin-bottom: 4.5rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .tit span
{
    font-size: 2.8rem;

    margin-left: .2rem;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .text
{
    font-size: 1.6rem;

    font-weight: bold;

    margin-bottom: -1rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list
{
    margin-bottom: 3rem;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item
{
    margin-right: 7rem;

    cursor: pointer;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme .list .item {
    margin-right: 12rem;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .img
{
    margin-bottom: 2rem;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .img img
{
    width: 14rem;
    height: auto;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme .list .item .img img {
    width: 13.6rem;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .text01
{
    font-size: 1.4rem;
    font-weight: bold;

    margin-bottom: .6rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .text02
{
    font-size: 1rem;
    font-weight: bold;

    margin-bottom: .8rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .text03
{
    font-size: 1.2rem;
    line-height: 1.66;

    letter-spacing: .05em;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item:last-child
{
    margin-right: 0;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .indicator
{
    display: none;

    margin-bottom: 3rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .indicator .item
{
    width: 8px;
    height: 8px;
    margin-right: 20px;

    border-radius: 50%;
    background: #b9baba;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner .indicator .item.active
{
    background-color: #000;
}

#barba-wrapper.id_products_water_based .section01 .block06 .inner > .text
{
    font-size: 1.2rem;
    line-height: 1.83;

    letter-spacing: .1em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block06 .inner
    {
        padding: 0 2.4rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme
    {
        margin-top: 3rem;
        padding-top: 4.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap
    {
                flex-direction: column;

        margin-bottom: 4rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
                align-items: flex-start;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .tit
    {
        font-size: 2.8rem;

        margin: 0;
        margin-bottom: 5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .titWrap .text
    {
        margin: 0;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .list
    {
        margin-bottom: 2.5rem;

        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
                justify-content: flex-start;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item,
    #barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme .list .item
    {
        margin-right: 9rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .img
    {
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .list .item .img img,
    #barba-wrapper.id_products_water_based .section01 .block06 .inner.inner-theme .list .item .img img
    {
        width: 37.33333vw;
        height: auto;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner .indicator
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
    }
    #barba-wrapper.id_products_water_based .section01 .block06 .inner > .text
    {
        font-size: 1rem;
        line-height: 1.6;

        letter-spacing: .05em;
    }
}

#barba-wrapper.id_products_water_based .section01 .block07
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    background-color: #000;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_products_water_based .section01 .block07 .cover
{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url(../resource/img/howto_detail/movie.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_products_water_based .section01 .block07 video
{
    width: 100%;
    height: auto;
}

#barba-wrapper.id_products_water_based .section01 .block07 #video
{
    width: 90vw;
    height: 100vh;
    min-height: 500px;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play
{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    width: 100vw;
    height: 100vh;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play .icon
{
    cursor: pointer;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play .icon .playScale
{
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 60px);

    width: 120px;
    height: 120px;

    opacity: 0;
    border-radius: 50%;
    background: #000;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play .icon svg
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play .text
{
    font-size: 2rem;
    line-height: 1.8;

    position: absolute;
    bottom: -9rem;
    left: calc(50% + .3rem);

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    letter-spacing: .2em;
}

#barba-wrapper.id_products_water_based .section01 .block07 .play .text span
{
    display: inline-block;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_products_water_based .section01 .block07
    {
        min-height: 22rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block07 .play .icon svg
    {
        width: 6rem;
        height: 6rem;
    }
    #barba-wrapper.id_products_water_based .section01 .block07 .play .icon .playScale
    {
        top: calc(50% - 30px);
        left: calc(50% - 30px);

        width: 60px;
        height: 60px;
    }
    #barba-wrapper.id_products_water_based .section01 .block07 .play .text
    {
        font-size: 1rem;

        bottom: -2.5rem;
        left: calc(50% + .1rem);
    }
}

/*
*
*   about
*
*/
#barba-wrapper.id_about
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_about .section01 .block
{
    overflow: hidden;
}

#barba-wrapper.id_about .section01 .block .inner
{
    max-width: 100rem;
    margin: 0 auto;
}

#barba-wrapper.id_about .section01 .block01
{
    position: relative;

    box-sizing: border-box;
    height: 100vh;

    background: url(../resource/img/about/bg.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_about .section01 .block01 .inner
{
    position: relative;

    height: 100%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block01
    {
        box-sizing: border-box;
        min-height: 0;
        padding: 0 !important;
    }
    #barba-wrapper.id_about .section01 .block01 .inner
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        -webkit-align-items: center;
        -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}

#barba-wrapper.id_about .section01 .block01 .img
{
    position: absolute;
    top: 50vh;
    left: 50vw;

    width: 100%;
    height: 100%;
    margin-top: calc(-2000px + 850px);
    margin-left: calc(-2000px - 230px);
}

#barba-wrapper.id_about .section01 .block01 .img img
{
    width: 4000px;
    height: auto;

    -webkit-transform: rotate(-92deg);
        -ms-transform: rotate(-92deg);
            transform: rotate(-92deg);
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block01 .img
    {
        position: absolute;
        top: 50vh;
        left: 50vw;

        width: 100%;
        height: 100%;
        margin-top: calc(-1050px / 2 + 50px);
        margin-left: calc(-1050px / 2 - 0px);
    }
    #barba-wrapper.id_about .section01 .block01 .img img
    {
        width: 1050px;
        height: auto;
    }
}

#barba-wrapper.id_about .section01 .block01 .box
{
    position: absolute;
    top: 50%;
    left: 0;

    margin-top: 3rem;
    margin-left: 0;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

#barba-wrapper.id_about .section01 .block01 .box .tit
{
    font-size: 9rem;

    margin-bottom: 1.5rem;

    letter-spacing: .13em;
}

#barba-wrapper.id_about .section01 .block01 .box .subTit
{
    font-size: 4rem;

    margin-bottom: 5rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_about .section01 .block01 .box .text
{
    font-size: 1.6rem;
    line-height: 2;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block01 .box
    {
        top: 0;

        margin: 0 !important;

        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
        text-align: center;
    }
    #barba-wrapper.id_about .section01 .block01 .box .tit
    {
        font-size: 5rem;
    }
    #barba-wrapper.id_about .section01 .block01 .box .subTit
    {
        font-size: 2.4rem;

        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        margin-bottom: 4rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_about .section01 .block01 .box .text
    {
        font-size: 1.4rem;
        line-height: 1.71;
    }
}

#barba-wrapper.id_about .section01 .block01 .scroll
{
    position: absolute;
    bottom: 6rem;
    left: 50%;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    margin-left: -2.5rem;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_about .section01 .block01 .scroll .text
{
    font-size: 1.2rem;

    margin-bottom: 1.3rem;

    letter-spacing: .1em;

    opacity: 0;
    color: #000;
}

#barba-wrapper.id_about .section01 .block01 .scroll .bar
{
    width: 2px;
    height: 4rem;

    opacity: 0;
    background: #000;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block01 .scroll
    {
        bottom: auto;
        bottom: 6.5rem;

        margin-top: -3.4rem;
        margin-left: -2.1rem;
    }
    #barba-wrapper.id_about .section01 .block01 .scroll .text
    {
        font-size: 1rem;

        margin-bottom: 1rem;

        color: #000;
    }
    #barba-wrapper.id_about .section01 .block01 .scroll .bar
    {
        width: 1px;
        height: 3rem;

        background: #000;
    }
}

#barba-wrapper.id_about .section01 .block
{
    padding: 12rem 0 15rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block
    {
        padding: 7rem 2.5rem 6rem;
    }
}

#barba-wrapper.id_about .section01 .block .inner > .tit
{
    font-size: 3.6rem;

    margin-bottom: 5.5rem;

    text-align: center;
    letter-spacing: .3em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block .inner > .tit
    {
        font-size: 2.4rem;

        margin-bottom: 5rem;
    }
}

#barba-wrapper.id_about .section01 .block .inner .box
{
    position: relative;
}

#barba-wrapper.id_about .section01 .block .inner .box > .img
{
    margin-bottom: 13rem;
}

#barba-wrapper.id_about .section01 .block .inner .box > .img img
{
    width: 105%;
    height: auto;
    margin-left: -5%;
}

#barba-wrapper.id_about .section01 .block .inner .box .textWrap .tit
{
    font-size: 2.8rem;

    margin-bottom: 4rem;

    letter-spacing: .3em;
}

#barba-wrapper.id_about .section01 .block .inner .box .textWrap .subtext
{
    font-size: 1.2rem;
}

#barba-wrapper.id_about .section01 .block .inner .box .text
{
    font-size: 1.6rem;
    line-height: 2;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block .inner .box
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
                flex-direction: column;

        margin-bottom: 8rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_about .section01 .block .inner .box > .img
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_about .section01 .block .inner .box > .img img
    {
        width: 100%;
        height: auto;
        margin: 0;
    }
    #barba-wrapper.id_about .section01 .block .inner .box .textWrap
    {
        margin-bottom: 2rem;
    }
    #barba-wrapper.id_about .section01 .block .inner .box .textWrap .tit
    {
        font-size: 2rem;

        margin-bottom: 3.5rem;

        text-align: center;
    }
    #barba-wrapper.id_about .section01 .block .inner .box .text
    {
        font-size: 1.4rem;
        line-height: 1.71;
    }
}

#barba-wrapper.id_about .section01 .block02 .inner .box01 .textWrap
{
    position: absolute;
    top: 0;
    left: 0;

    width: 48rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box01 > .text
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 48rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box02
{
    margin-bottom: 12rem;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
}

#barba-wrapper.id_about .section01 .block02 .inner .box02 .textWrap
{
    -webkit-flex: 0 0 47%;
        -ms-flex: 0 0 47%;
            flex: 0 0 47%;
}

#barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap .img
{
    margin-right: -9.2rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap .subtext
{
    margin-top: -6rem;
    margin-left: -.3rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box03
{
    margin-bottom: 17rem;
    margin-left: 4.5rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap
{
    margin-left: -4.5rem;

    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

#barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap .subtext
{
    margin-top: -2rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap:nth-child(1)
{
    margin-left: 0;
}

#barba-wrapper.id_about .section01 .block02 .inner .box04
{
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_about .section01 .block02 .inner .box04 .img
{
    margin-bottom: 0;
}

#barba-wrapper.id_about .section01 .block02 .inner .box04 .img svg
{
    width: 40.5rem;
    height: 15.1rem;
}

#barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap .text
{
    width: 48rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block02 .inner .box01 .textWrap
    {
        position: static;

        width: auto;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box01 .text
    {
        position: static;

        width: auto;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02
    {
        margin-bottom: 5.5rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02 .textWrap
    {
        margin-bottom: 3.3rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap
    {
        margin-bottom: 6rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap .img
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        margin: 0;

        -webkit-align-items: center;
        -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap .img img
    {
        width: 28.4rem;
        height: auto;
        margin-right: -4rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box02 .imgWrap .subtext
    {
        margin-top: -3rem;
        margin-left: 3.9rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box03
    {
                flex-direction: row;

        margin: 0;
        margin-bottom: 8rem;

        -webkit-flex-direction: row;
            -ms-flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
                justify-content: flex-start;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap
    {
        margin-bottom: 2.5rem;
        margin-left: -.2rem;

        -webkit-flex: 0 0 10.9rem;
            -ms-flex: 0 0 10.9rem;
                flex: 0 0 10.9rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap .img
    {
        width: 10.9rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap img
    {
        width: 13.1rem;
        height: auto;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box03 .imgWrap .subtext
    {
        font-size: 1rem;

        margin-top: -1rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04
    {
                flex-direction: column-reverse;

        margin-bottom: 0;

        -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap
    {
        margin: 0;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap .tit
    {
        margin-bottom: 6rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap .img
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        margin-bottom: 5rem;

        text-align: center;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap .img svg
    {
        display: inline;

        width: 26.5rem;
        height: 9.9rem;
    }
    #barba-wrapper.id_about .section01 .block02 .inner .box04 .textWrap .text
    {
        width: auto;
    }
}

#barba-wrapper.id_about .section01 .block03,
#barba-wrapper.id_about .section01 .block04
{
    padding: 0;
}

#barba-wrapper.id_about .section01 .block03 > .imgWrap,
#barba-wrapper.id_about .section01 .block04 > .imgWrap
{
    overflow: hidden;

    height: 50rem;
}

#barba-wrapper.id_about .section01 .block03 > .imgWrap .img,
#barba-wrapper.id_about .section01 .block04 > .imgWrap .img
{
    height: 60rem;
    margin-top: -5rem;

    background: url(../resource/img/about/img03.jpg);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block03 > .imgWrap,
    #barba-wrapper.id_about .section01 .block04 > .imgWrap
    {
        height: 18rem;
    }
    #barba-wrapper.id_about .section01 .block03 > .imgWrap .img,
    #barba-wrapper.id_about .section01 .block04 > .imgWrap .img
    {
        height: 24rem;
        margin-top: -3rem;
    }
}

#barba-wrapper.id_about .section01 .block03 .inner,
#barba-wrapper.id_about .section01 .block04 .inner
{
    padding: 12rem 0 9rem;
}

#barba-wrapper.id_about .section01 .block03 .inner > .tit,
#barba-wrapper.id_about .section01 .block04 .inner > .tit
{
    font-size: 3.6rem;

    margin-bottom: 16rem;

    text-align: center;
    letter-spacing: .3em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block03 .inner,
    #barba-wrapper.id_about .section01 .block04 .inner
    {
        padding: 7rem 2.5rem 8rem;
    }
    #barba-wrapper.id_about .section01 .block03 .inner > .tit,
    #barba-wrapper.id_about .section01 .block04 .inner > .tit
    {
        font-size: 2.4rem;

        margin-bottom: 5rem;
    }
}

#barba-wrapper.id_about .section01 .block03 .inner .box .textWrap,
#barba-wrapper.id_about .section01 .block04 .inner .box .textWrap
{
    -webkit-flex: 0 0 48%;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
}

#barba-wrapper.id_about .section01 .block03 .inner .box .textWrap .text01,
#barba-wrapper.id_about .section01 .block04 .inner .box .textWrap .text01
{
    margin-bottom: 3rem;
}

#barba-wrapper.id_about .section01 .block03 .inner .box .img,
#barba-wrapper.id_about .section01 .block04 .inner .box .img
{
    margin-bottom: 0;

    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

#barba-wrapper.id_about .section01 .block03 .inner .box .img img,
#barba-wrapper.id_about .section01 .block04 .inner .box .img img
{
    position: relative;

    width: 100%;
    height: auto;
    margin: 0;
    margin-top: -19rem;
    margin-left: -1rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block03 .inner .box,
    #barba-wrapper.id_about .section01 .block04 .inner .box
    {
        margin: 0;
    }
    #barba-wrapper.id_about .section01 .block03 .inner .box .img img,
    #barba-wrapper.id_about .section01 .block04 .inner .box .img img
    {
        margin: 0;
    }
}

#barba-wrapper.id_about .section01 .block04 > .imgWrap .img
{
    background: url(../resource/img/about/img05.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_about .section01 .block04 .innerWrap
{
    overflow: hidden;

    background: url(../resource/img/about/bg_pen.png);
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block04 .innerWrap
    {
        padding-bottom: 20rem;

        background: url(../resource/img/about/bg_pen_sp.png);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_about .section01 .block04 .inner
{
    padding-bottom: 29rem;
}

#barba-wrapper.id_about .section01 .block04 .inner .box
{
            flex-direction: row-reverse;

    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
}

#barba-wrapper.id_about .section01 .block04 .inner .box .img img
{
    left: -4rem;

    margin-top: -41.5rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block04 .inner
    {
        padding: 13rem 0 8rem;
    }
    #barba-wrapper.id_about .section01 .block04 .inner > .tit
    {
        letter-spacing: .2em;
    }
    #barba-wrapper.id_about .section01 .block04 .inner .box
    {
                flex-direction: column;

        padding: 0 2.5rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_about .section01 .block04 .inner .box .img
    {
        position: relative;

        height: 30rem;
    }
    #barba-wrapper.id_about .section01 .block04 .inner .box .img img
    {
        position: absolute;
        top: -16rem;
        left: -23.8rem;

        width: 55rem;
        margin: 0;
    }
}

#barba-wrapper.id_about .section01 .block05
{
    margin-top: -10.1rem;
    padding-top: 0;
    padding-bottom: 6rem;
}

#barba-wrapper.id_about .section01 .block05 .tit
{
    padding-top: 0;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_about .section01 .block05
    {
        margin-top: -5.9rem;
        padding: 0rem 0 6rem;
    }
}

/*
*
*   color
*
*/
#barba-wrapper.id_color
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color .section01
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_color .section01 .inner .list
{
    margin-bottom: -3rem;
}

#barba-wrapper.id_color .section01 .inner .list .item .tit
{
    font-size: 1.6rem;

    margin-bottom: -.2rem;

    text-align: center;
    letter-spacing: .2em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color .section01 .inner .list
    {
        display: none;
    }
}

#barba-wrapper.id_color .section01 .inner .ui
{
    display: none;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color .section01 .inner .ui
    {
        position: absolute;
        bottom: 6rem;
        left: 0;

        display: block;

        width: calc(100vw - 4.8rem);
        padding: 0 2.4rem;
    }
}

#barba-wrapper.id_color_water_based_chart
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color_water_based_chart .section01
{
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 17.3rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01
    {
        padding-top: 10.5rem;
    }
}

#barba-wrapper.id_color_water_based_chart .section01 .bg
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url(../resource/img/common/bg_gradation_long_pc.jpg);
    background-position: top center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .bg
    {
        background: url(../resource/img/common/bg_gradation_long_sp.jpg);
        background-position: top center;
        background-size: cover;
    }
}

#barba-wrapper.id_color_water_based_chart .section01 .inner
{
    position: relative;
    z-index: 2;

    max-width: 100rem;
    padding: 0 calc((100vw - 100rem)/2);
    padding-bottom: 17.5rem;
    /*
    *
    *   titWrap
    *
    */
    /*
    *
    *   about
    *
    */
    /*
    *
    *   colorBoxWrap
    *
    */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .inner
    {
        padding: 0 1.6rem;
        padding-bottom: 13rem;
    }
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap
{
    margin-bottom: 1rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap .tit
{
    font-size: 3.2rem;

    margin-right: 2.8rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap .text
{
    font-size: 1.4rem;

    margin-top: 1px;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap .tit
    {
        font-size: 2.4rem;

        margin: 0;
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .titWrap .text
    {
        margin: 0;
        margin-bottom: 2rem;
    }
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 2rem;

    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
            justify-content: flex-end;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .aboutInner
{
    padding: .5rem .9rem;
    padding-right: 1.6rem;

    cursor: pointer;
    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, border .7s cubic-bezier(.25, .46, .45, .94) 0s;

    opacity: 0;
    border: 1px solid #a4a4a5;
    border-radius: 10rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .circle
{
    font-size: 1.4rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 2rem;
    height: 2rem;

    transition: background .7s cubic-bezier(.25, .46, .45, .94) 0s, color .7s cubic-bezier(.25, .46, .45, .94) 0s;

    color: #fff;
    border-radius: 50%;
    background: #000;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .text
{
    font-weight: bold;

    margin-left: .6rem;

    transition: color .7s cubic-bezier(.25, .46, .45, .94) 0s;
    letter-spacing: .05em;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .aboutInner:hover
{
    border: 1px solid #23252a;
    background: #23252a;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .aboutInner:hover .circle
{
    color: #23252a;
    background: #fff;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .about .aboutInner:hover .text
{
    color: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .inner .about
    {
        margin-bottom: 3rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 5rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: calc((100% - .5rem * 4) / 5);
    height: 12rem;
    margin-right: .5rem;
    margin-bottom: .5rem;

    cursor: pointer;

    opacity: 0;

    -webkit-align-items: flex-end;
    -ms-flex-align: end;
            align-items: flex-end;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .bgBox
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #fff;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .boxInner
{
    position: relative;
    z-index: 2;

    padding-bottom: 1.2rem;
    padding-left: 1rem;

    -webkit-transform: translate3d(0, 0, 1px);
            transform: translate3d(0, 0, 1px);
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .num
{
    font-size: 2.4rem;
}

#barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .text
{
    margin-top: .4rem;
    padding-left: 1px;
}

@media only screen and (min-width: 751px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box:nth-child(5n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box:nth-last-child(-n+5)
    {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box
    {
        width: calc((100% - .5rem * 2) / 3);
        height: 6.8rem;
        margin-right: .5rem;
        margin-bottom: .5rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box .boxInner
    {
        padding-bottom: .8rem;
        padding-left: .8rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .num
    {
        font-size: 1.8rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .text
    {
        font-size: .9rem;

        margin-top: .3rem;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box:nth-child(3n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_color_water_based_chart .section01 .inner .colorBoxWrap .box:nth-last-child(-n+3)
    {
        margin-bottom: 0;
    }
}

#barba-wrapper.id_color_water_based_wheel
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color_water_based_wheel .section01
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    min-height: 100vh;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    /*
  *
  *   tit
  *
  */
    /*
  *
  *   switch
  *
  */
    /*
  *
  *   control
  *
  */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01
    {
        min-height: 100%;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .inner
{
    position: relative;
    z-index: 2;

    width: 100rem;
    height: 46rem;
    margin: 0 auto;
    padding: 0 10rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .inner
    {
        height: 43rem;
        padding: 0 1.6rem;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap
{
    margin-bottom: 3.6rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner
{
    margin-bottom: 1.7rem;

    -webkit-align-items: flex-end;
    -ms-flex-align: end;
            align-items: flex-end;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .tit
{
    font-size: 3.2rem;

    margin-right: 2rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .text
{
    font-size: 1.4rem;
    font-weight: bold;

    margin-bottom: .3rem;

    letter-spacing: .1em;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .subTitWrap
{
    position: relative;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .subTitWrap .subTitSpan02,
#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .subTitWrap .subTitSpan03
{
    position: absolute;
    top: 0;
    left: 0;
}

#barba-wrapper.id_color_water_based_wheel .section01 .titWrap .text
{
    font-size: 1.4rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner
    {
                flex-direction: column;

        margin: 0;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
        -webkit-align-items: center;
        -ms-flex-align: center;
                align-items: center;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .tit
    {
        font-size: 2.4rem;

        margin: 0;
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .titInner .text
    {
        display: none;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .text
    {
        margin-bottom: 2rem;

        text-align: center;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .textWrap
    {
        text-align: center;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .titWrap .textWrap .text.sp
    {
        font-size: 1.4rem;
        font-weight: bold;

        margin-bottom: 0;

        letter-spacing: .1em;

        opacity: 0;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .switch
{
    z-index: 2;

    display: inline-block;

    cursor: pointer;

    opacity: 0;
}

#barba-wrapper.id_color_water_based_wheel .section01 .switch svg
{
    width: 6rem;
    height: 6rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .switch
    {
        position: relative;
        top: -6.4rem;
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .switch svg
    {
        width: 4.5rem;
        height: 4.5rem;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .control
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: auto;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: 0;
}

#barba-wrapper.id_color_water_based_wheel .section01 .control .brightBar
{
    position: absolute;
    top: 50%;
    left: calc(50% + 300px);

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#barba-wrapper.id_color_water_based_wheel .section01 .control .brightBar img
{
    width: 8px;
    height: 200px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .control .brightBar
    {
        left: calc(50% + 140px);
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .control .arrowl
{
    position: absolute;
    top: 50%;
    left: calc(50% - 400px);

    cursor: pointer;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    pointer-events: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .control .arrowl
    {
        top: calc(50% + 160px);
        left: calc(50% - 70px);
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .control .arrowl svg
    {
        width: 75px;
        height: 4px;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .control .arrowr
{
    position: absolute;
    top: 50%;
    left: calc(50% + 400px);

    cursor: pointer;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    pointer-events: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .control .arrowr
    {
        top: calc(50% + 160px);
        left: calc(50% + 70px);
    }
    #barba-wrapper.id_color_water_based_wheel .section01 .control .arrowr svg
    {
        width: 75px;
        height: 4px;
    }
}

#barba-wrapper.id_color_water_based_wheel .section01 .control svg
{
    width: 10.1rem;
    height: .5rem;

    cursor: pointer;
}

#barba-wrapper.id_color_water_based_wheel .section01 .annotation
{
    font-size: 10px;
    line-height: 1.6;

    position: absolute;
    bottom: 110px;
    left: calc(0px + 10rem);

    padding-bottom: 0;

    opacity: 0;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_wheel .section01 .annotation
    {
        font-size: .9rem;

        bottom: 12rem;
        left: 1.6rem;
    }
}

#barba-wrapper.id_color_water_based_blend
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color_water_based_blend .section01
{
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 17.3rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01
    {
        padding-top: 10.5rem;
    }
}

#barba-wrapper.id_color_water_based_blend .section01 .bg
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url(../resource/img/common/bg_gradation_long_pc.jpg);
    background-position: top center;
    background-size: cover;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .bg
    {
        background: url(../resource/img/common/bg_gradation_long_sp.jpg);
        background-position: top center;
        background-size: cover;
    }
}

#barba-wrapper.id_color_water_based_blend .section01 .inner
{
    position: relative;
    z-index: 2;

    max-width: 100rem;
    padding: 0 calc((100vw - 100rem)/2);
    padding-bottom: 17.5rem;
    /*
    *
    *   titWrap
    *
    */
    /*
    *
    *   blendBoxWrap
    *
    */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner
    {
        padding: 0 1.6rem;
        padding-bottom: 13rem;
    }
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap
{
    margin-bottom: 5.2rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap .tit
{
    font-size: 3.2rem;

    margin-right: 2.8rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap .text
{
    font-size: 1.4rem;

    margin-top: 1px;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap
    {
                flex-direction: column;

        margin-bottom: 2.7rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap .tit
    {
        font-size: 2.4rem;

        margin: 0;
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .titWrap .text
    {
        line-height: 1.71;

        margin: 0;

        text-align: center;
    }
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 5rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box
{
    width: calc((100% - 4em * 3) / 4);
    height: 268px;
    margin-right: 4rem;
    margin-bottom: 4rem;

    opacity: 0;
    background-color: #fff;
    box-shadow: 2.3rem 2.3rem 6.5rem 0rem rgba(0, 0, 0, .05), 1.4rem 1.4rem 2rem 0rem rgba(0, 0, 0, .15);
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding: 3rem 0 4rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap .blend
{
    width: 12rem;
    height: 12rem;

    border-radius: 50%;
    background: #000;
}

#barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .colorDetail:last-child
{
    padding-bottom: 1.5rem;
}

@media only screen and (min-width: 751px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-child(4n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-last-child(-n+4)
    {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box
    {
        width: calc((100% - 1.5rem * 2) / 3);
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        padding: 2.2rem 0 3rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap .blend
    {
        width: 9rem;
        height: 9rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .colorDetail
    {
        padding-bottom: .5rem;
        padding-left: 1.2rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .colorDetail:last-child
    {
        padding-bottom: 1.2rem;
    }
}

@media only screen and (min-width: 601px) and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-child(3n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-last-child(-n+3)
    {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 600px)
{
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box
    {
        width: calc((100% - 1.5rem * 1) / 2);
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        padding: 2.2rem 0 3rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .blendWrap .blend
    {
        width: 9rem;
        height: 9rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .colorDetail
    {
        padding-bottom: .5rem;
        padding-left: 1.2rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box .colorDetail:last-child
    {
        padding-bottom: 1.2rem;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-child(2n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_color_water_based_blend .section01 .inner .blendBoxWrap .box:nth-last-child(-n+2)
    {
        margin-bottom: 0;
    }
}

#barba-wrapper.id_color_water_based_themes
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color_water_based_themes .section01
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    box-sizing: border-box;
    min-height: 100vh;

    background: url(../resource/img/common/bg_gradation_pc.jpg);
    background-position: top center;
    background-size: cover;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_themes .section01
    {
        min-height: 0;

        background: url(../resource/img/common/bg_gradation_sp.jpg);
        background-position: center center;
        background-size: cover;
    }
}

#barba-wrapper.id_color_water_based_themes .section01 .inner
{
    position: relative;

    width: 100%;
    /*v
    *
    *   titWrap
    *
    */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_themes .section01 .inner
    {
        margin-top: -5rem;
    }
}

#barba-wrapper.id_color_water_based_themes .section01 .inner .titBox
{
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 10rem;
}

#barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap
{
    margin-bottom: 4rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap .tit
{
    font-size: 3.2rem;

    margin-right: 2.8rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap .text
{
    font-size: 1.4rem;

    margin-top: 1px;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_themes .section01 .inner .titBox
    {
        padding: 0;
    }
    #barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap
    {
                flex-direction: column;

        margin-bottom: 2.5rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap .tit
    {
        font-size: 2.4rem;

        margin: 0;
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_color_water_based_themes .section01 .inner .titBox .titWrap .text
    {
        line-height: 1.71;

        margin: 0;

        text-align: center;
    }
}

#barba-wrapper.id_color_water_based_themes .section01 .inner .slider
{
    max-width: 100rem;
    margin: 0 auto;
}

#barba-wrapper.id_color_water_based_detail
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_color_water_based_detail .section01 .bg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 47vh;

    background-color: #e62488;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .bg
    {
        height: 285px;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner
{
    position: relative;
    z-index: 2;

    overflow: hidden;

    height: 100vh;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner
    {
        height: auto;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap
{
    position: absolute;
    top: calc(50% - 188px);
    left: calc(50% - 392px);

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1050px) and (min-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap
    {
        top: calc(50% - 228px);
        left: calc(50% - 349px);

        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .tit
{
    font-size: 100px;

    margin-bottom: 3px;

    letter-spacing: 0;

    color: #fff;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .text
{
    font-size: 36px;

    letter-spacing: 0;

    color: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap
    {
        position: static;
        top: 0;
        left: 0;

        padding-top: 70px;
        padding-left: 18px;

        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .tit
    {
        font-size: 75px;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .titWrap .text
    {
        font-size: 27px;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner > .img
{
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#barba-wrapper.id_color_water_based_detail .section01 .inner > .img img
{
    width: 70vw;
    min-width: 700px;
    max-width: 819px;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner > .img
    {
        top: 209px;
        left: 50%;

        margin-left: 10px;

        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner > .img img
    {
        width: 360px;
        min-width: 360px;
        height: auto;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap
{
    position: absolute;
    top: 50%;
    left: 100px;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap .circle
{
    width: 16px;
    height: 16px;
    margin-right: 10px;

    background-color: #f2a0b9;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap .text
{
    font-size: 14px;

    letter-spacing: .1em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap
    {
        top: 310px;
        left: 20px;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap.right
{
    right: 100px;
    left: auto;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap.right .circle
{
    background-color: #de4f7b;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner .circleWrap.right
    {
        right: 20px;
        left: auto;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box
{
    position: absolute;
    top: 75%;
    left: 50%;

    width: 85vw;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1)
{
    margin-right: 14vw;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner
{
    margin-right: 8vw;

    text-align: center;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1) .text
{
    font-size: 24px;

    margin-bottom: 14px;

    letter-spacing: .1em;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1) .img
{
    margin-left: -23px;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(2)
{
    margin-right: 0;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(2) .text
{
    font-size: 24px;

    margin-bottom: 14px;

    letter-spacing: .1em;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(2) .img
{
    margin-left: -7px;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2)
{
    max-width: 600px;

    -webkit-flex-grow: 6;
    -ms-flex-positive: 6;
            flex-grow: 6;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) > .text
{
    font-size: 16px;
    line-height: 1.75;

    margin-bottom: 46px;

    letter-spacing: .05em;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) .textWrap .textIn
{
    margin-bottom: 14px;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) .textWrap .textIn .text:nth-child(1)
{
    font-size: 12px;
    font-weight: bold;

    margin-right: 40px;

    white-space: nowrap;
    letter-spacing: .0em;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) .textWrap .textIn .text:nth-child(2)
{
    font-size: 12px;
    line-height: 1.8;

    margin-top: -5px;

    letter-spacing: .0em;
}

#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) .textWrap .textIn:nth-child(3) .text:nth-child(1),
#barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2) .textWrap .textIn:nth-child(4) .text:nth-child(1)
{
    margin-right: 20px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box
    {
        position: static;
        top: 0;
        left: 0;

                flex-direction: column;

        width: 100%;
        margin-top: 200px;
        padding-bottom: 50px;

        -webkit-transform: none;
            -ms-transform: none;
                transform: none;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1)
    {
        margin: 0;
        margin-bottom: 40px;
        margin-left: -11px;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1)
    {
        margin-right: 70px;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1) .img img
    {
        width: auto;
        height: 159px;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(1) .text
    {
        margin-bottom: 0;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(1) .itemInner:nth-child(2) .img img
    {
        width: auto;
        height: 144px;
    }
    #barba-wrapper.id_color_water_based_detail .section01 .inner .box .item:nth-child(2)
    {
        box-sizing: border-box;
        width: auto;
        max-width: none;
        padding: 0 20px !important;

        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
}

#barba-wrapper.id_color_water_based_detail .section01 .back
{
    z-index: 3;

    opacity: 1;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_color_water_based_detail .section01 .back
    {
        position: static;

        padding-bottom: 100px;
        padding-left: 20px;
    }
}

/*
*
*   howto
*
*/
#barba-wrapper.id_howtouse
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
    /*
*
*   shadowWrap
*
*/
}

#barba-wrapper.id_howtouse .section01
{
    overflow: hidden;

    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 16rem;
    padding-bottom: 18rem;
}

#barba-wrapper.id_howtouse .section01 .bg
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    background: url(../resource/img/howto/bg.jpg);
    background-position: top center;
    background-size: cover;
}

#barba-wrapper.id_howtouse .section01 .pens
{
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;

    width: 100%;

    pointer-events: none;
}

#barba-wrapper.id_howtouse .section01 .pens .pen
{
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

#barba-wrapper.id_howtouse .section01 .pens .pen01
{
    margin-top: 20px;
    margin-left: -590px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen01
    {
        margin-top: 34px;
        margin-left: -140px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen01 img
    {
        width: 380px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen02
{
    margin-top: 67px;
    margin-left: -160px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen02
    {
        margin-top: 64px;
        margin-left: 24px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen02 img
    {
        width: 150px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen03
{
    margin-top: 827px;
    margin-left: 755px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen03
    {
        margin-top: 634px;
        margin-left: 224px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen03 img
    {
        width: 335px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen04
{
    margin-top: 707px;
    margin-left: 920px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen04
    {
        margin-top: 584px;
        margin-left: 314px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen04 img
    {
        width: 400px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen05
{
    margin-top: 1727px;
    margin-left: 755px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen05
    {
        margin-top: 1274px;
        margin-left: 274px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen05 img
    {
        width: 355px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen06
{
    margin-top: 1637px;
    margin-left: -675px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen06
    {
        margin-top: 1134px;
        margin-left: -204px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen06 img
    {
        width: 320px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen07
{
    margin-top: 1037px;
    margin-left: -765px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen07
    {
        margin-top: 764px;
        margin-left: -264px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen07 img
    {
        width: 400px;
        height: auto;
    }
}

#barba-wrapper.id_howtouse .section01 .pens .pen08
{
    margin-top: 1037px;
    margin-left: -765px;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .pens .pen08
    {
        margin-top: 624px;
        margin-left: -154px;
    }
    #barba-wrapper.id_howtouse .section01 .pens .pen08 img
    {
        width: 102px;
        height: auto;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01
    {
        padding-top: 11.5rem;
        padding-bottom: 13rem;
    }
}

#barba-wrapper.id_howtouse .section01 .inner
{
    position: relative;
    z-index: 4;

    max-width: 100rem;
    margin: 0 auto;
    padding: 0 5rem;
    /*
    *
    *   filter
    *
    */
    /*
    *
    *   boxWrap
    *
    */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .inner
    {
        padding: 0 2.4rem;
    }
}

#barba-wrapper.id_howtouse .section01 .inner .filter
{
    position: relative;
    z-index: 2;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 10rem;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_howtouse .section01 .inner .filter .item
{
    font-size: 1.2rem;

    margin-right: 2rem;
    padding: .5rem 2.4rem .7rem !important;

    cursor: pointer;
    transition: background-color .6s cubic-bezier(.23, 1, .32, 1) 0s, color .6s cubic-bezier(.23, 1, .32, 1) 0s;

    opacity: 0;
    border-radius: 10rem;
    background-color: #fff;
    box-shadow: .7rem .7rem 1rem 0rem rgba(41, 24, 23, .4);
}

#barba-wrapper.id_howtouse .section01 .inner .filter .item:hover
{
    color: #fff;
    background-color: #000;
}

#barba-wrapper.id_howtouse .section01 .inner .filter .item:last-child
{
    margin-right: 0;
}

#barba-wrapper.id_howtouse .section01 .inner .filter .item.active
{
    color: #fff;
    background-color: #000;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .inner .filter
    {
        position: relative;
        left: -.9rem;

        margin-bottom: 4.8rem;

        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
                justify-content: flex-start;
    }
    #barba-wrapper.id_howtouse .section01 .inner .filter .item
    {
        font-size: 1.2rem;

        margin-right: 1rem;
    }
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap
{
    position: relative;
    z-index: 2;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 13rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a
{
    position: relative;

    display: block;

    width: calc((100% - 6rem * 2) / 3);
    margin-right: 6rem;
    margin-bottom: 6rem;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .box
{
    opacity: 0;
    background-color: #fff;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge
{
    position: absolute;
    z-index: 3;
    top: -2.5rem;
    right: .9rem;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 5rem;
    height: 5rem;

    border-radius: 100%;
    box-shadow: .7rem .7rem 1rem 0rem rgba(41, 24, 23, .4);

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge.fz10
{
    font-size: 1rem;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge.basic
{
    background: #7fcddb;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge.advance
{
    background: #ff3;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge.pro
{
    background: #ff6349;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .img
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .img img
{
    width: 100%;
    height: auto;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .shadow
{
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 0;

    -webkit-transform: scale(.93);
        -ms-transform: scale(.93);
            transform: scale(.93);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    pointer-events: none;
}

#barba-wrapper.id_howtouse .section01 .inner .boxWrap a .shadow img
{
    width: 60.2rem;
    height: 65.8rem;
}

@media only screen and (min-width: 751px)
{
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a:nth-child(3n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a:nth-last-child(-n+3)
    {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a
    {
        width: calc((100% - 3.5rem * 1) / 2);
        margin-right: 3.5rem;
        margin-bottom: 3.5rem;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge
    {
        font-size: .9rem;

        top: -1.7rem;

        width: 3.4rem;
        height: 3.4rem;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a .budge.fz10
    {
        font-size: .7rem;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a:nth-child(2n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_howtouse .section01 .inner .boxWrap a:nth-last-child(-n+2)
    {
        margin-bottom: 0;
    }
}

#barba-wrapper.id_howtouse .section01 .inner .back
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_howtouse .shadowWrap
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

#barba-wrapper.id_howtouse .shadowWrap .shadow
{
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}

#barba-wrapper.id_howtouse .shadowWrap .shadow .shadowInner
{
    width: 100%;
    height: 100%;
}

#barba-wrapper.id_howtouse_detail
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_howtouse_detail .section01 .block
{
    overflow: hidden;
}

#barba-wrapper.id_howtouse_detail .section01 .block01
{
    position: relative;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01
    {
                flex-direction: column;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(1)
{
    min-height: 80rem;

    background: url(../resource/img/howto_detail/img.jpg);
    background-position: center center;
    background-size: cover;

    -webkit-flex: 0 0 58.5%;
        -ms-flex: 0 0 58.5%;
            flex: 0 0 58.5%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(1)
    {
        min-height: 37.5rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2)
{
    padding-top: 18.5rem;
    padding-left: 6.5rem;

    background: url(../resource/img/howto_detail/bg.jpg);
    background-position: center center;
    background-size: cover;

    -webkit-flex: 0 0 41.5%;
        -ms-flex: 0 0 41.5%;
            flex: 0 0 41.5%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2)
    {
        padding: 4rem 2.5rem 4.5rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .tag
{
    font-size: 1.2rem;

    display: inline-block;

    margin-bottom: 3rem;
    padding: .5rem 2.3rem .7rem;

    border: 1px solid #d5d6d6;
    border-radius: 10rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .tag
    {
        margin-bottom: 2rem;
        padding: .5rem 2rem .7rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) > .tit
{
    font-size: 20px;
    font-weight: bold;

    margin-bottom: 2.8rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) > .tit img
{
    width: 28.5rem;
    height: auto;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) > .text
{
    font-size: 1.4rem;
    line-height: 2;

    max-width: 32.3rem;
    margin-bottom: 3.8rem;

    text-align: justify;
    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) > .text
    {
        max-width: none;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4)
{
    margin-bottom: 10rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4) .tit
{
    font-size: 1.4rem;

    margin-bottom: 1.5rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4) .colorWrap
{
    max-width: 40rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4) .colorWrap .colorDetail
{
    padding-right: 2rem;
    padding-bottom: 1.3rem;
    padding-left: 0;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4) .text
{
    line-height: 1.8;

    max-width: 40rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(4)
    {
        margin-bottom: 7.5rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5)
{
    max-width: 32rem;
    padding-bottom: 6rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .about
{
    font-size: 1.6rem;
    font-style: italic;

    margin-bottom: 1.8rem;
    padding-bottom: 1.5rem;

    letter-spacing: .1em;

    border-bottom: 1px solid #b9baba;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .name
{
    font-size: 1.6rem;

    margin-bottom: 1rem;

    letter-spacing: .01em;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .insta
{
    color: #7b7a7b;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .insta .icon
{
    margin-right: .5rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .insta .text
{
    margin-top: -.3rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) .insta .text a
{
    color: #7b7a7b;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) > .link
{
    margin-bottom: 2rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) > .link a
{
    color: #7b7a7b;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5) > .text
{
    line-height: 1.66;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .box:nth-child(2) .box:nth-child(5)
    {
        width: 100%;
        max-width: none;
        padding-bottom: 0;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .scroll
{
    position: absolute;
    bottom: 6rem;
    left: 50%;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .scroll .text
{
    font-size: 1.2rem;

    margin-bottom: 1.3rem;

    letter-spacing: .1em;

    opacity: 0;
    color: #fff;
}

#barba-wrapper.id_howtouse_detail .section01 .block01 .scroll .bar
{
    width: 2px;
    height: 4rem;

    opacity: 0;
    background: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block01 .scroll
    {
        top: 37.5rem;
        bottom: auto;

        margin-top: -3.4rem;
        margin-left: -2.1rem;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block01 .scroll .text
    {
        font-size: 1rem;

        margin-bottom: 1rem;

        color: #000;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block01 .scroll .bar
    {
        width: 1px;
        height: 3rem;

        background: #000;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block02
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    background-color: #000;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .cover
{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    background: url(../resource/img/howto_detail/movie.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 video
{
    width: 100%;
    height: auto;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .videoMain
{
    width: 90vw;
    height: 100vh;
    min-height: 500px;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .play
{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    width: 100vw;
    height: 100vh;

    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .play .icon .playScale
{
    position: absolute;
    top: calc(50% - 60px);
    left: calc(50% - 60px);

    width: 120px;
    height: 120px;

    opacity: 0;
    border-radius: 50%;
    background: #000;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .play .icon svg
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .play .text
{
    font-size: 2rem;

    position: absolute;
    bottom: -6.4rem;
    left: calc(50% + .3rem);

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    white-space: nowrap;
    letter-spacing: .2em;
}

#barba-wrapper.id_howtouse_detail .section01 .block02 .play .text span
{
    display: inline-block;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block02
    {
        min-height: 22rem;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block02 .play .icon svg
    {
        width: 6rem;
        height: 6rem;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block02 .play .icon .playScale
    {
        top: calc(50% - 30px);
        left: calc(50% - 30px);

        width: 60px;
        height: 60px;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block02 .play .text
    {
        font-size: 1rem;

        bottom: -2.5rem;
        left: calc(50% + .1rem);
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03
{
    padding: 11rem 0 14rem;

    background: url(../resource/img/howto/bg.jpg) repeat-y;
    background-position: center center;
    background-size: 100%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03
    {
        padding: 8rem 2.5rem 9.7rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner
{
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 2rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner
    {
        padding: 0;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item
{
    margin-bottom: 3.6rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item
    {
                flex-direction: column;

        margin-bottom: 7rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap
{
    position: relative;

    margin-right: 8.4rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        margin: 0;
        margin-bottom: 4rem;
        padding: 0 4rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap .img
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap .img > img
{
    position: relative;
    z-index: 3;

    width: 40.5rem;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap .img > img
    {
        width: 100%;
        height: auto;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .imgWrap .shadow
{
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 0;

    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap
{
    z-index: 2;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 43.5rem;

    color: #fff;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .textInner
{
    margin-bottom: -1rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .tit
{
    font-size: 2.8rem;
    font-style: italic;

    margin-bottom: 2.6rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .text
{
    font-size: 1.4rem;
    line-height: 2;

    letter-spacing: .05em;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .text a
{
    text-decoration: underline;

    color: #fff;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .text01
{
    font-size: 2rem;
    font-weight: bold;

    margin-bottom: 1.8rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap
    {
        width: auto;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .textInner
    {
        margin: 0;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item .textWrap .text
    {
        width: 100%;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item.right
{
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
            justify-content: flex-end;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item.right .imgWrap
{
    margin-right: 0;
    margin-left: 8.4rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item.right .imgWrap
    {
        margin: 0;
        margin-bottom: 4rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item:nth-child(2)
{
    margin-bottom: 5.7rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item:nth-child(2) .textWrap .textInner
{
    margin-bottom: -5rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item:nth-child(2)
    {
        margin-bottom: 7rem;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item:nth-child(2) .textWrap .textInner
    {
        margin-bottom: 0;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03 .blockInner .item:last-child
{
    margin-bottom: 0;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern
{
    padding: 11rem 0 14rem;

    background: url(../resource/img/howto/bg.jpg) repeat-y;
    background-position: center center;
    background-size: 100%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern
    {
        padding: 8rem 2.5rem 9.7rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner
{
    max-width: 92rem;
    margin: 0 auto;
    padding: 0 2rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner
    {
        padding: 0;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap
{
    position: relative;
    z-index: 2;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .tit
{
    font-size: 2.8rem;
    font-style: italic;

    margin-bottom: 2.6rem;

    letter-spacing: .05em;

    color: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .tit
    {
        font-size: 2rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .tit .num
{
    font-size: 4rem;

    letter-spacing: .2em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .tit .num
    {
        font-size: 3rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .text
{
    font-size: 1.4rem;
    line-height: 2;

    letter-spacing: .05em;

    color: #fff;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap > .text
    {
        font-size: 1.2rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item
{
    margin-top: 30px;
    margin-bottom: 3.6rem;

    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item
    {
                flex-direction: column;

        margin-bottom: 7rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap
{
    position: relative;

    height: 50rem;

    -webkit-flex: 0 0 58%;
        -ms-flex: 0 0 58%;
            flex: 0 0 58%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap
    {
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        height: 30rem;
        margin: 0;
        margin-bottom: 4rem;
        padding: 0 4rem;

        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap .shadow
{
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 0;

    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap .play
{
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;

    cursor: pointer;
    -webkit-transform: translate3d(-50%, -50%, 0px);
            transform: translate3d(-50%, -50%, 0px);
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap .play svg
{
    width: 60px;
    height: 60px;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .imgWrap .cover
{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    background: url(../resource/img/howto_detail/movie.jpg);
    background-position: center center;
    background-size: cover;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap
{
    position: relative;
    z-index: 2;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    color: #fff;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .textInner
{
    margin-bottom: -1rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .tit
{
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.71;

    margin-bottom: 1.8rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .img img
{
    width: 280px;
    height: auto;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap
    {
        width: auto;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .textInner
    {
        width: 100%;
        margin: 0;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .img
    {
        text-align: center;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item .textWrap .text
    {
        width: 100%;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap.right .item
{
            flex-direction: row-reverse;

    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap.right .item
    {
                flex-direction: column;

        margin-bottom: 7rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap.right .item .imgWrap
{
    margin-right: 0;
    margin-left: 8.4rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .itemWrap.right .item .imgWrap
    {
        margin: 0;
        margin-bottom: 4rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .item:last-child
{
    margin-bottom: 100px;
}

#barba-wrapper.id_howtouse_detail .section01 .block03.videoPattern .blockInner .box
{
    position: relative;
    z-index: 2;

    text-align: center;
}

#barba-wrapper.id_howtouse_detail .section01 .block04
{
    padding-bottom: 11rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block04
    {
        padding-bottom: 10rem;
    }
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner
{
    max-width: 100rem;
    margin: 0 auto;
    padding-top: 10rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner > .tit
{
    font-size: 2.4rem;

    margin-bottom: 4rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .slider
{
    margin-bottom: 15rem;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .slider .sliderInner .item
{
    opacity: 1;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .slider .ui .barWrap .barInner
{
    opacity: 1;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .slider .ui .arrow
{
    opacity: 1;
}

#barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .back
{
    opacity: 1;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner
    {
        padding-top: 8.5rem;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner > .tit
    {
        font-size: 1.8rem;

        margin-bottom: 5rem;

        text-align: center;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .slider
    {
        margin-bottom: 0;
    }
    #barba-wrapper.id_howtouse_detail .section01 .block04 .blockInner .back
    {
        display: none;
    }
}

/*
*
*   abtart
*
*/
#barba-wrapper.id_abtart
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_abtart .section01
{
    overflow: hidden;

    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 16rem;
    padding-bottom: 18rem;

    background: url(../resource/img/abtart/bg.jpg) repeat-y;
    background-position: top center;
    background-size: 100%;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_abtart .section01
    {
        padding-top: 11.5rem;
        padding-bottom: 13rem;
    }
}

#barba-wrapper.id_abtart .section01 .inner
{
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 5rem;
    /*
    *
    *   titWrap
    *
    */
    /*
    *
    *   boxWrap
    *
    */
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_abtart .section01 .inner
    {
        padding: 0 2.4rem;
    }
}

#barba-wrapper.id_abtart .section01 .inner .titWrap
{
    margin-bottom: 5rem;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#barba-wrapper.id_abtart .section01 .inner .titWrap .tit
{
    font-size: 3.2rem;

    margin-right: 2.8rem;

    letter-spacing: .2em;
}

#barba-wrapper.id_abtart .section01 .inner .titWrap .text
{
    font-size: 1.4rem;

    margin-top: 1px;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_abtart .section01 .inner .titWrap
    {
                flex-direction: column;

        margin-bottom: 2.5rem;

        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    #barba-wrapper.id_abtart .section01 .inner .titWrap .tit
    {
        font-size: 2.4rem;

        margin: 0;
        margin-bottom: 2.5rem;
    }
    #barba-wrapper.id_abtart .section01 .inner .titWrap .text
    {
        line-height: 1.71;

        margin: 0;
        margin-bottom: 0rem;

        text-align: center;
    }
}

#barba-wrapper.id_abtart .section01 .inner .boxWrap
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 13rem;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#barba-wrapper.id_abtart .section01 .inner .boxWrap .box
{
    position: relative;

    width: calc((100% - 3.2rem * 2) / 3);
    margin-right: 3.2rem;
    margin-bottom: 3.2rem;

    cursor: pointer;

    opacity: 0;
    background-color: #fff;
}

#barba-wrapper.id_abtart .section01 .inner .boxWrap .box .img
{
    position: relative;
    z-index: 2;

    box-shadow: 23px 23px 65px 0 rgba(0, 0, 0, .05), 14px 14px 20px 0 rgba(0, 0, 0, .15);
}

#barba-wrapper.id_abtart .section01 .inner .boxWrap .box .img img
{
    width: 100%;
    height: auto;
}

@media only screen and (min-width: 751px)
{
    #barba-wrapper.id_abtart .section01 .inner .boxWrap .box:nth-child(3n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_abtart .section01 .inner .boxWrap .box:nth-last-child(-n+3)
    {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_abtart .section01 .inner .boxWrap
    {
        margin-bottom: 3rem;
    }
    #barba-wrapper.id_abtart .section01 .inner .boxWrap .box
    {
        width: calc((100% - 1.5rem * 1) / 2);
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
    #barba-wrapper.id_abtart .section01 .inner .boxWrap .box:nth-child(2n)
    {
        margin-right: 0;
    }
    #barba-wrapper.id_abtart .section01 .inner .boxWrap .box:nth-last-child(-n+2)
    {
        margin-bottom: 0;
    }
}

#barba-wrapper.id_abtart .section01 .inner .back
{
    position: relative;
    z-index: 2;
}

/*
*
*   abtart
*
*/
#barba-wrapper.id_qa
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_qa .section01
{
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 17.3rem;
    padding-bottom: 13.2rem;

    background: #fff;
}

#barba-wrapper.id_qa .section01 .inner
{
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 10rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_qa .section01 .inner
    {
        padding: 0 1.6rem;
    }
}

#barba-wrapper.id_qa .section01 .qa_title_area
{
    margin-bottom: 55px;
}

#barba-wrapper.id_qa .section01 h1
{
    font-family: Barlow, sans-serif;
    font-size: 3.7rem;
    font-weight: bold;

    letter-spacing: .2em;
}

#barba-wrapper.id_qa .section01 .qa_content
{
    padding-left: 8.5rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_qa .section01 .qa_content
    {
        padding-left: 0rem;
    }
}

#barba-wrapper.id_qa .section01 .qa_item
{
    margin-bottom: 5.3rem;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link
{
    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-top: 10px;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link .shop_link
{
    position: absolute;

    width: 12px;
    height: 12px;
    margin: 0 0 0 .1rem;

    content: '';

    background: url(../resource/img/shop/link_icn.png) center center/contain no-repeat;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link .icon
{
    margin-right: 3px;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link .icon svg
{
    width: 1.2rem;
    height: 1.2rem;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link a
{
    transition: .3s;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_link a:hover
{
    transition: .3s;
    text-decoration: underline;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_txtlink
{
    font-weight: bold;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_q
{
    font-family: Barlow, sans-serif;
    font-size: 2.4rem;
    font-weight: bold;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    margin-bottom: 2.2rem;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
            align-items: stretch;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_q p
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2;

    margin-left: 1.3rem;

    letter-spacing: .05em;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_a
{
    font-family: Barlow, sans-serif;
    font-size: 2.4rem;
    font-weight: bold;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
            align-items: stretch;
}

#barba-wrapper.id_qa .section01 .qa_item .qa_a p
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7;

    margin-left: 1.3rem;

    letter-spacing: .05em;
}

/*
*
*   abtart
*
*/
#barba-wrapper.id_shop
{
    /* --------------------------------------------------------------------------------
*
*   compornents
*
-------------------------------------------------------------------------------- */
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#barba-wrapper.id_shop .section01
{
    box-sizing: border-box;
    min-height: 100vh;
    padding-top: 17.3rem;
    padding-bottom: 13.2rem;

    background: #fff;
}

#barba-wrapper.id_shop .section01 .inner
{
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 10rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_shop .section01 .inner
    {
        padding: 0 1.6rem;
    }
}

#barba-wrapper.id_shop .section01 .shop_title_area
{
    margin-bottom: 55px;
}

#barba-wrapper.id_shop .section01 h1
{
    font-family: Barlow, sans-serif;
    font-size: 3.7rem;
    font-weight: bold;

    letter-spacing: .2em;
}

#barba-wrapper.id_shop .section01 .shop_content
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: column;

    width: 100%;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
}

#barba-wrapper.id_shop .section01 .shop_content p
{
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7;

    margin-bottom: 1em;

    letter-spacing: .05em;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item
{
    line-height: 2;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding: 1.8rem 0;

    border-bottom: #e4e4e5 1px solid;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
            align-items: stretch;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item:nth-child(1)
{
    border-top: #e4e4e5 1px solid;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item li
{
    padding-left: 2.2rem;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_shop .section01 .shop_content .shop_item li
    {
        padding-left: 0;
    }
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_name
{
    font-size: 1.4rem;
    font-weight: bold;

    position: relative;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 30rem;

    letter-spacing: .05em;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_name
    {
        width: 100%;
    }
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_name .shop_link
{
    position: absolute;

    width: 12px;
    height: 12px;
    margin: .4rem 0 0 .4rem;

    content: '';

    background: url(../resource/img/shop/link_icn.png) center center/contain no-repeat;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_name a
{
    transition: .3s;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_name a:hover
{
    box-shadow: 0 -2px 0 #242529 inset;
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_address
{
    font-size: 1.4rem;
    font-weight: normal;

    width: 36rem;

    letter-spacing: .05em;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_address
    {
        width: 100%;
    }
}

#barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_tel
{
    font-size: 1.4rem;
    font-weight: normal;

    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 12rem;

    letter-spacing: .05em;

    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

@media only screen and (max-width: 750px)
{
    #barba-wrapper.id_shop .section01 .shop_content .shop_item .shop_tel
    {
        width: 100%;
    }
}