@charset 'UTF-8';
/* Reset
------------------------------------------------------------*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td
{
    margin: 0;
    padding: 0;
}

address,
em
{
    font-style: normal;
}

strong,
th
{
    font-weight: normal;
}

table
{
    width: 100%; 

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

th
{
    text-align: left;
}

hr,
legend
{
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-size: 100%;
    font-weight: normal;
}

img,
fieldset
{
    border: 0;
}

img
{
    max-width: 100%;
    height: auto; 

    vertical-align: top;

    border: 0;
}
b,
li
{
    list-style-type: none;
}

input[type='submit'],
button,
label,
select
{
    cursor: pointer;
}

.clearfix:after
{
    display: block;
    visibility: hidden; 
    clear: both;

    height: 0;

    content: '.';
}

*
{
    box-sizing: border-box;
}

*:before,
*:after
{
    box-sizing: border-box;
}

/* link
------------------------------------------------------------*/
a
{
    transition: all .3s ease;
    text-decoration: underline; 

    color: #2d2926;
}
a:hover
{
    text-decoration: none;

    opacity: .8;
}

button:hover
{
    opacity: .8;
}

/* Fonts
------------------------------------------------------------*/
@font-face
{
    font-family: 'MyYuGothicM';
    font-weight: normal;

    src: local('YuGothic-Medium'), local('Yu Gothic Medium'), local('YuGothic-Regular');
    /* Mediumがない場合 */
}
@font-face
{
    font-family: 'MyYuGothicM';
    font-weight: bold;

    src: local('YuGothic-Bold'), local('Yu Gothic');
    /* for Chrome */
}
/*
* Noto Sans Japanese (subsetfonts) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.woff2") format("woff2"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.woff") format("woff"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Light_sub.otf") format("opentype");
}

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.woff2") format("woff2"), url("../fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.woff") format("woff"), url("../fonts/notosansjp_subset/NotoSansCJKjp-DemiLight_sub.otf") format("opentype");
}

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/notosansjp_subset/NotoSansCJKjp-Regular_sub.woff2") format("woff2"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Regular_sub.woff") format("woff"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Regular_sub.otf") format("opentype");
}

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.woff2") format("woff2"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.woff") format("woff"), url("../fonts/notosansjp_subset/NotoSansCJKjp-Bold_sub.otf") format("opentype");
}

/* webフォント -jins_next- */
@font-face {
  font-family: 'jins_nextbold';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextBold.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextBold.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextBold.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextBold_web.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextBold.svg#JINS_NextBold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'jins_nextextralight';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-extralight-webfont.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-extralight-webfont.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-extralight-webfont.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-extralight-webfont.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-extralight-webfont.svg#jins_nextextralight") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'jins_nextlight';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-light-webfont.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-light-webfont.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-light-webfont.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-light-webfont.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-light-webfont.svg#jins_nextlight") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'jins_nextblack';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-black-webfont.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-black-webfont.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-black-webfont.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-black-webfont.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/jins_next-black-webfont.svg#jins_nextblack") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'jins_nextmedium';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextMedium.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextMedium.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextMedium.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextMedium_web.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextMedium.svg#JINS_NextMedium") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'jins_nextregular';
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextRegular.eot");
  src: url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextRegular.eot?#iefix") format("embedded-opentype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextRegular.woff") format("woff"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextRegular_web.ttf") format("truetype"), url("/client_info/JINSJINS/view/userweb/css2/font/JINS_NextRegular.svg#JINS_NextRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* html
{
    font-size: 62.5%;
} */

/* 10px base */
body
{
    font-family: 'proxima-nova', 'Proxima Nova', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, MyYuGothicM, YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.8;

    letter-spacing: .75px; 
    word-wrap: break-word;

    color: #2d2926;

    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}
@media only screen and (max-width: 600px)
{
    body
    {
        letter-spacing: .5px;
    }
}

body > div,
input,
button,
textarea,
select
{
    font-size: 14px;
    font-size: 1.4rem;
}

input,
button,
textarea,
select
{
    font-family: 'proxima-nova', 'Proxima Nova', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, MyYuGothicM, YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; 
    line-height: 1.8;

    color: #2d2926;
}
.IEUnder input,
.IEUnder button,
.IEUnder textarea,
.IEUnder select
{
    font-family: 'メイリオ',Verdana, 'Hiragino Kaku Gothic ProN',  Meiryo, sans-serif;
}

/* form
------------------------------------------------------------*/
select
{
    padding: 10px;

    border-radius: 5px;
}

textarea,
input[type='text'],
input[type='password'],
input[type='email'],
select
{
    padding: 10px;

    border: solid 1px #aaa; 
    border-radius: 5px;
}

textarea.error,
input[type='text'].error,
input[type='password'].error,
input[type='email'].error,
select.error
{
    border: solid 2px #e33e41; 
    background-color: #fff2f2;
}

/* radio
-------------*/
input[type='radio']
{
    display: none;
}

input[type='radio'] + label
{
    position: relative;

    display: inline-block;

    width: 100%; 
    padding: 3px 10px 3px 24px;

    cursor: pointer;
}

input[type='radio'] + label::before,
input[type='radio'] + label::after
{
    position: absolute;
    top: 50%;

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

    border-radius: 100%;
}

input[type='radio'] + label::before
{
    left: 0;

    width: 16px;
    height: 16px;
    margin-top: -9px;

    border: 1px solid #ccc; 
    background: #eee;
}

input[type='radio'].error + label::before
{
    border: 1px solid #e33e41;
    background-color: #fff2f2;
}

input[type='radio'] + label:hover::before
{
    background: #fefefe;
}

input[type='radio'] + label::after
{
    left: 3px;

    width: 10px;
    height: 10px;
    margin-top: -6px;

    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5); 

    opacity: 0;
    background: #3498db;
}

input[type='radio']:checked + label::before
{
    border: 1px solid #3498db; 
    background: #fff;
}

input[type='radio']:checked + label::after
{
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1); 

    opacity: 1;
}

/* checkbox
-------------*/
input[type='checkbox']
{
    display: none;
}

input[type='checkbox'] + label
{
    position: relative;

    display: inline-block;

    padding: 3px 10px 3px 22px;

    cursor: pointer;
    transition: all .2s;
}

input[type='checkbox'] + label::before,
input[type='checkbox'] + label::after
{
    position: absolute;

    content: '';
}

input[type='checkbox'] + label::before
{
    top: 50%;
    left: 0;

    width: 14px;
    height: 14px;
    margin-top: -8px;

    border: 1px solid #ccc;
    border-radius: 3px; 
    background: #f4f4f4;
}

input[type='checkbox'] + label::after
{
    top: 50%;
    left: 3px;

    width: 8px;
    height: 4px;
    margin-top: -4px;

    -webkit-transform: rotate(-45deg) scale(.5);
        -ms-transform: rotate(-45deg) scale(.5);
            transform: rotate(-45deg) scale(.5); 

    opacity: 0;
    border-bottom: 2px solid #3498db;
    border-left: 2px solid #3498db;
}

input[type='checkbox'] + label:hover::before
{
    background: #fff;
}

input[type='checkbox']:checked + label::before
{
    border: 1px solid #3498db; 
    background: #fff;
}

input[type='checkbox']:checked + label::after
{
    -webkit-transform: rotate(-45deg) scale(1);
        -ms-transform: rotate(-45deg) scale(1);
            transform: rotate(-45deg) scale(1); 

    opacity: 1;
}

/*
#overview
base
*/
#header
{
    padding: 20px 50px 20px 0;
}
@media only screen and (max-width: 1024px)
{
    #header
    {
        height: 60px; 
        padding: 0;
    }
}
@media only screen and (max-width: 992px)
{
    #header
    {
        height: 50px;
    }
}
#header .inner
{
    display: table;

    width: 100%;
}
@media only screen and (max-width: 1024px)
{
    #header .inner
    {
        display: block;

        width: auto;
    }
}
#header .siteTitle
{
    display: table-cell;

    width: 250px;
    padding-left: 30px; 

    vertical-align: middle;
}
@media only screen and (max-width: 1200px)
{
    #header .siteTitle
    {
        width: 200px;
    }
}
@media only screen and (max-width: 1024px)
{
    #header .siteTitle
    {
        display: block;

        width: auto;
        padding-left: 0; 

        text-align: left;
    }
    #header .siteTitle a
    {
        display: block;

        box-sizing: content-box; 
        width: 150px;
        padding: 20px;
    }
}
@media only screen and (max-width: 992px)
{
    #header .siteTitle a
    {
        display: block;

        width: 90px; 
        padding: 20px 0 0 15px;
    }
}
#header .siteTitle img
{
    width: 155px;
}
@media only screen and (max-width: 1024px)
{
    #header .siteTitle img
    {
        width: auto;
    }
}
#header .siteTitle .type01
{
    display: none;
}
#header.coming .siteTitle
{
    padding-left: 50px;

    text-align: left;
}
@media only screen and (max-width: 1024px)
{
    #header.coming .siteTitle
    {
        padding-left: 0;
    }
}
#header .btnBuy
{
    position: absolute;
    top: 0;
    right: 0; 

    display: inline-block;

    width: 170px;

    vertical-align: middle;
}
@media only screen and (max-width: 1200px)
{
    #header .btnBuy
    {
        width: 130px;
    }
}
#header .btnBuy a
{
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.2; 

    position: relative;

    display: block;

    padding: 15px 5px;

    text-align: center;
    text-decoration: none;

    color: #fff;
    border: solid 1px #fff;
    border-radius: 3px;
}
#header .btnBuy a:hover
{
    opacity: 1; 
    color: #00acc7;
}
#header .btnBuy a:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0;

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

    opacity: .8;
    background-color: #fff;
}
#header .btnBuy a:hover:before
{
    width: 100%;
}
#header .btnBuy a span
{
    position: relative;
}
@media only screen and (max-width: 1024px)
{
    #header .btnBuy
    {
        position: static;
        top: auto;
        right: 0;
        left: 0; 

        display: block;

        margin-right: auto;
        margin-left: auto;
    }
    #header .btnBuy a
    {
        color: #00aec7;
        border-color: #00aec7;
    }
}

#gNav
{
    display: table-cell;

    vertical-align: middle;
}
@media only screen and (max-width: 1200px)
{
    #gNav
    {
        padding-left: 0;
    }
}
@media only screen and (max-width: 1024px)
{
    #gNav
    {
        display: block;

        padding: 0;
    }
}
#gNavContents
{
    position: relative;
}
@media only screen and (max-width: 1024px)
{
    #gNavContents
    {
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;

        display: none; 

        width: 100%;
        min-height: 100vh;
        padding: 0 0 50px;

        background-color: #fff;
    }
}
#gNav .gNavBtn
{
    display: none;
}
@media only screen and (max-width: 1024px)
{
    #gNav .gNavBtn
    {
        position: absolute;
        top: 0;
        right: 0; 

        display: block;
    }
    #gNav .gNavBtn a
    {
        font-family: 'jins_nextlight'; 
        font-size: 14px;
        font-size: 1.4rem;

        display: block;

        padding: 15px 15px 15px 24px;

        text-decoration: none;

        color: #fff;
        background-image: url(../img/common/btnMenu.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 18px 8px;
    }
    #gNav .gNavBtn a.sample
    {
        color: #2d2926;
        background-image: url(../img/common/btnMenu_sample.svg);
    }
}
@media only screen and (max-width: 992px)
{
    #gNav .gNavBtn a
    {
        font-size: 13px;
        font-size: 1.3rem; 

        padding: 15px 15px 15px 20px;

        background-size: 15px 5px;
    }
}
#gNav .gNavBtnClose
{
    display: none;
}
@media only screen and (max-width: 1024px)
{
    #gNav .gNavBtnClose
    {
        position: absolute;
        top: 0;
        right: 0; 

        display: block;
    }
    #gNav .gNavBtnClose a
    {
        display: block;

        box-sizing: content-box; 
        width: 16px;
        height: 16px;
        padding: 18px;

        background-image: url(../img/common/btnClose.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
    }
}
@media only screen and (max-width: 992px)
{
    #gNav .gNavBtnClose a
    {
        width: 12px;
        height: 12px; 
        padding: 15px;

        background-size: 12px 12px;
    }
}
#gNav .siteTitleSp
{
    display: none;
}
@media only screen and (max-width: 1024px)
{
    #gNav .siteTitleSp
    {
        position: absolute;
        top: 0; 

        display: block;
    }
    #gNav .siteTitleSp a
    {
        display: block;

        box-sizing: content-box; 
        width: 150px;
        padding: 20px 0 0 15px;
    }
}
@media only screen and (max-width: 992px)
{
    #gNav .siteTitleSp a
    {
        width: 90px;
        padding:  20px 0 0 15px;
    }
}
#gNav ul
{
    display: table;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul
    {
        display: block;

        padding: 60px 0 20px;
    }
}
@media only screen and (max-width: 992px)
{
    #gNav ul
    {
        padding-top: 50px;
    }
}
#gNav ul li
{
    display: table-cell;

    vertical-align: middle;
    letter-spacing: 1px;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul li
    {
        display: block;

        text-align: center;
    }
}
#gNav ul li.en
{
    font-family: 'jins_nextlight';
}
#gNav ul a
{
    font-size: 16px;
    font-size: 1.6rem;

    display: block;

    padding: 0 16px;

    text-decoration: none;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a
    {
        padding: 20px 10px;

        color: #332e2b;
    }
}
@media only screen and (max-width: 600px)
{
    #gNav ul a
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
#gNav ul a span
{
    position: relative;

    display: block;

    padding: 10px 0;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a span
    {
        padding: 0;
    }
}
#gNav ul a span::after
{
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 100%;

    height: 2px;

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

    background-color: #2d2926;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a span::after
    {
        display: none;
    }
}
#gNav ul a:hover
{
    opacity: 1;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a:hover
    {
        color: #00aec7;
    }
}
#gNav ul a:hover span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a:hover span::after
    {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    #home #gNav ul .home a
    {
        color: #00aec7;
    }
}
#home #gNav ul .home a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #home #gNav ul .home a span::after
    {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    #story #gNav ul .story a
    {
        color: #00aec7;
    }
}
#story #gNav ul .story a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #story #gNav ul .story a span::after
    {
        display: none;
    }
}

@media only screen and (max-width: 1024px)
{
    #service #gNav ul .service a
    {
        color: #00aec7;
    }
}
#service #gNav ul .service a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #service #gNav ul .service a span::after
    {
        display: none;
    }
}

@media only screen and (max-width: 1024px)
{
    #quality #gNav ul .quality a
    {
        color: #00aec7;
    }
}
#quality #gNav ul .quality a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #quality #gNav ul .quality a span::after
    {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    #review #gNav ul .review a
    {
        color: #00aec7;
    }
}
#review #gNav ul .review a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #review #gNav ul .review a span::after
    {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    #eyecare #gNav ul .eyecare a
    {
        color: #00aec7;
    }
}
#eyecare #gNav ul .eyecare a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #eyecare #gNav ul .eyecare a span::after
    {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    #safety #gNav ul .safety a
    {
        color: #00aec7;
    }
}
#safety #gNav ul .safety a span::after
{
    right: 0; 
    left: 0;
}
@media only screen and (max-width: 1024px)
{
    #safety #gNav ul .safety a span::after
    {
        display: none;
    }
}
#gNav .btnBuySp
{
    display: none;
}
@media only screen and (max-width: 1024px)
{
    #gNav .btnBuySp
    {
        display: block;

        max-width: 160px;
        margin: 0 auto;
    }
}
#gNav .btnBuySp a
{
    font-size: 13px;
    font-size: 1.3rem;

    display: block;

    padding: 13px 10px;

    text-align: center;
    text-decoration: none; 

    color: #00aec7;
    border: solid 1px #00aec7;
    border-radius: 3px;
}

/*
#styleguide
container

```
<div class="container">
左右にpadding15pxつきます
</div>
```
*/
.container
{
    margin-right: auto;
    margin-left: auto;
    padding-right: 30px;
    padding-left: 30px;
}

#footer
{
    padding: 60px 0;

    border-top: solid 1px #d3d6db;
}
@media only screen and (max-width: 1024px)
{
    #footer
    {
        padding: 50px 0 15px;
    }
}
#footer .head
{
    display: table;

    width: 100%;
    margin-bottom: 100px; 

    table-layout: fixed;
}
@media only screen and (max-width: 1024px)
{
    #footer .head
    {
        display: block;

        width: auto;
        margin-bottom: 40px;
    }
}
#footer .head .siteTitle,
#footer .head .nav
{
    display: table-cell;

    vertical-align: middle;
}
@media only screen and (max-width: 1024px)
{
    #footer .head .siteTitle,
    #footer .head .nav
    {
        display: block;
    }
}
#footer .head .siteTitle
{
    width: 380px;

    text-align: center;
}
#footer .head .siteTitle img
{
    width: 192px;
}
@media only screen and (max-width: 1024px)
{
    #footer .head .siteTitle img
    {
        width: auto;
    }
}
@media only screen and (max-width: 1024px)
{
    #footer .head .siteTitle
    {
        width: auto;
        max-width: 145px;
        margin: 0 auto 40px;
    }
}
#footer .head .nav li
{
    float: left;

    margin: 0 45px;

    letter-spacing: 1px;
}
@media only screen and (max-width: 1024px)
{
    #footer .head .nav li
    {
        float: none;

        margin: 0;
    }
}
#footer .head .nav li.en
{
    font-family: 'jins_nextlight';
}
#footer .head .nav a
{
    font-size: 16px;
    font-size: 1.6rem; 

    text-decoration: none;
}
@media only screen and (max-width: 1024px)
{
    #footer .head .nav a
    {
        font-size: 14px;
        font-size: 1.4rem; 

        display: block;

        padding: 20px 10px;

        text-align: center;
    }
}
#footer.coming .head .siteTitle
{
    text-align: left;
}
#footer .info
{
    font-size: 12px;
    font-size: 1.2rem; 

    margin-bottom: 36px;

    text-align: center;
}
@media only screen and (max-width: 600px)
{
    #footer .info
    {
        text-align: left;
    }
}
#footer .info li
{
    position: relative;

    display: inline-block;

    padding: 0 20px;
}
@media only screen and (max-width: 1024px)
{
    #footer .info li
    {
        margin-bottom: 5px; 
        padding: 0 15px;
    }
}
#footer .info li:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;
    height: 15px;
    margin: auto; 

    content: '';

    background-color: #d3d6db;
}
@media only screen and (max-width: 1024px)
{
    #footer .info li:before
    {
        display: none;
    }
}
#footer .info li:last-child:after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 1px;
    height: 15px;
    margin: auto; 

    content: '';

    background-color: #d3d6db;
}
@media only screen and (max-width: 1024px)
{
    #footer .info li:last-child:after
    {
        display: none;
    }
}
#footer .info a
{
    text-decoration: none;
}
#footer .copyright
{
    font-size: 12px;
    font-size: 1.2rem; 

    text-align: center;
}
@media only screen and (max-width: 600px)
{
    #footer .copyright
    {
        font-size: 10px;
        font-size: 1rem;
    }
}

/* CSS Document */
.container
{
    max-width: 1360px;
}

@media only screen and (max-width: 992px)
{
    .modPcOnly
    {
        display: none;
    }
}

.modSpOnly
{
    display: none;
}
@media only screen and (max-width: 992px)
{
    .modSpOnly
    {
        display: block;
    }
}

/*
#overview
modTitle
*/
/*
#styleguide
xxxxx

```
コード
```
*/
@-webkit-keyframes title01Line
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 86px;
    }
}
@keyframes title01Line
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 86px;
    }
}
@-webkit-keyframes title01LineSp
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 46px;
    }
}
@keyframes title01LineSp
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 46px;
    }
}
@-webkit-keyframes txtUp
{
    0%
    {
        -webkit-transform: translate(0, 1.1em);
                transform: translate(0, 1.1em);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);

        opacity: 1;
    }
}
@keyframes txtUp
{
    0%
    {
        -webkit-transform: translate(0, 1.1em);
                transform: translate(0, 1.1em);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);

        opacity: 1;
    }
}
@-webkit-keyframes title01Sub
{
    0%
    {
        bottom: -64px;
    }
    100%
    {
        bottom: 0;
    }
}
@keyframes title01Sub
{
    0%
    {
        bottom: -64px;
    }
    100%
    {
        bottom: 0;
    }
}
.modTitle01
{
    margin-bottom: 30px;
}
@media only screen and (max-width: 1024px)
{
    .modTitle01
    {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 992px)
{
    .modTitle01
    {
        padding-top: 0;
    }
}
@media only screen and (max-width: 600px)
{
    .modTitle01
    {
        margin-bottom: 20px;
    }
}
.modTitle01 .line
{
    width: 0;
    height: 4px;
    margin-bottom: 40px; 

    background-color: #00aec7;
}
@media only screen and (max-width: 992px)
{
    .modTitle01 .line
    {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 600px)
{
    .modTitle01 .line
    {
        height: 3px;
        margin-bottom: 20px;
    }
}
.ieUnder .modTitle01 .line
{
    width: 86px;
}
.modBlockMainvisual .modTitle01 .line
{
    -webkit-animation: title01Line;
            animation: title01Line;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual .modTitle01 .line
    {
        -webkit-animation: title01LineSp;
                animation: title01LineSp;
        -webkit-animation-duration: .6s;
                animation-duration: .6s;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-delay: 1s;
                animation-delay: 1s; 
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
.modTitle01.active .line
{
    -webkit-animation: title01Line;
            animation: title01Line;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 600px)
{
    .modTitle01.active .line
    {
        -webkit-animation: title01LineSp;
                animation: title01LineSp;
        -webkit-animation-duration: .6s;
                animation-duration: .6s;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-delay: 0;
                animation-delay: 0; 
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
.modTitle01 .title
{
    margin-bottom: 10px;
}
@media only screen and (max-width: 600px)
{
    .modTitle01 .title
    {
        margin-bottom: 5px;
    }
}
.modTitle01 .title.en
{
    font-family: 'jins_nextmedium';
}
.modTitle01 .title > .wrap
{
    display: block;
}
.modTitle01 .title > .wrap_inline
{
    display: inline;
}
.modTitle01 .title > span
{
    font-size: 64px;
    font-size: 6.4rem; 
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    overflow: hidden;

    width: 100%;
    height: 1.1em;

    letter-spacing: 7.29px;
}
@media only screen and (max-width: 992px)
{
    .modTitle01 .title > span
    {
        font-size: 60px;
        font-size: 6rem; 

        letter-spacing: 5.08px;
    }
}
@media only screen and (max-width: 600px)
{
    .modTitle01 .title > span
    {
        font-size: 30px;
        font-size: 3rem; 

        letter-spacing: 4.07px;
    }
}
.modTitle01 .title > span span
{
    display: inline-block;

    -webkit-transform: translate(0, 1.1em);
        -ms-transform: translate(0, 1.1em);
            transform: translate(0, 1.1em); 

    opacity: 0;
}
.ieUnder .modTitle01 .title > span span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.modTitle01 .title > span span.color
{
    color: #00aec7;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.05s;
            animation-delay: 1.05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.15s;
            animation-delay: 1.15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.25s;
            animation-delay: 1.25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.35s;
            animation-delay: 1.35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.45s;
            animation-delay: 1.45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.55s;
            animation-delay: 1.55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.65s;
            animation-delay: 1.65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.75s;
            animation-delay: 1.75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.85s;
            animation-delay: 1.85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.9s;
            animation-delay: 1.9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.95s;
            animation-delay: 1.95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .title > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2s;
            animation-delay: 2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .title > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01 .sub > span
{
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    overflow: hidden;

    width: 100%;
    height: 1.1em;

    letter-spacing: 1.5px; 

    color: #00aec7;
}
@media only screen and (max-width: 992px)
{
    .modTitle01 .sub > span
    {
        font-size: 18px;
        font-size: 1.8rem;
    }
}
@media only screen and (max-width: 600px)
{
    .modTitle01 .sub > span
    {
        font-size: 13px;
        font-size: 1.3rem; 

        letter-spacing: 1px;
    }
}
.modTitle01 .sub > span span
{
    display: inline-block;

    -webkit-transform: translate(0, 1.1em);
        -ms-transform: translate(0, 1.1em);
            transform: translate(0, 1.1em); 

    opacity: 0;
}
.ieUnder .modTitle01 .sub > span span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.45s;
            animation-delay: 1.45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.55s;
            animation-delay: 1.55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.65s;
            animation-delay: 1.65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.75s;
            animation-delay: 1.75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.85s;
            animation-delay: 1.85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.9s;
            animation-delay: 1.9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1.95s;
            animation-delay: 1.95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2s;
            animation-delay: 2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.05s;
            animation-delay: 2.05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.1s;
            animation-delay: 2.1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.15s;
            animation-delay: 2.15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.25s;
            animation-delay: 2.25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.3s;
            animation-delay: 2.3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.35s;
            animation-delay: 2.35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual .modTitle01 .sub > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 2.4s;
            animation-delay: 2.4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle01.active .sub > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

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

.modTitle02
{
    margin-bottom: 30px;
}
@media only screen and (max-width: 992px)
{
    .modTitle02
    {
        margin-bottom: 20px;
    }
}
.modTitle02 .line
{
    width: 0;
    height: 2px;
    margin-bottom: 26px; 

    background-color: #00aec7;
}
.ieUnder .modTitle02 .line
{
    width: 86px;
}
@media only screen and (max-width: 992px)
{
    .modTitle02 .line
    {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 600px)
{
    .modTitle02 .line
    {
        height: 3px;
        margin-bottom: 20px;
    }
}
.modTitle02.active .line
{
    -webkit-animation: title01Line;
            animation: title01Line;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 600px)
{
    .modTitle02.active .line
    {
        -webkit-animation: title01LineSp;
                animation: title01LineSp;
        -webkit-animation-duration: .6s;
                animation-duration: .6s;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-delay: 0;
                animation-delay: 0; 
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
.modTitle02 .title
{
    margin-bottom: 10px;
}
.modTitle02 .title.en
{
    font-family: 'jins_nextmedium';
}
.modTitle02 .title > span
{
    font-size: 30px;
    font-size: 3rem; 
    font-weight: bold;
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 1.1em;

    letter-spacing: .08em;
}
@media only screen and (max-width: 992px)
{
    .modTitle02 .title > span
    {
        font-size: 20px;
        font-size: 2rem;
    }
}
.modTitle02 .title > span.inline
{
    display: inline;
}
.modTitle02 .title > span span
{
    display: inline-block;

    -webkit-transform: translate(0, 1.1em);
        -ms-transform: translate(0, 1.1em);
            transform: translate(0, 1.1em); 

    opacity: 0;
}
.ieUnder .modTitle02 .title > span span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.modTitle02 .title > span span.color
{
    color: #00aec7;
}
.modTitle02.active .title > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .title > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .4s;
            animation-duration: .4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02 .sub > span
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600; 
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    overflow: hidden;

    width: 100%;
    height: 1.1em;

    color: #00aec7;
}
@media only screen and (max-width: 600px)
{
    .modTitle02 .sub > span
    {
        font-size: 16px;
        font-size: 1.6rem;
    }
}
.modTitle02 .sub > span span
{
    display: inline-block;

    -webkit-transform: translate(0, 1.1em);
        -ms-transform: translate(0, 1.1em);
            transform: translate(0, 1.1em); 

    opacity: 0;
}
.ieUnder .modTitle02 .sub > span span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.modTitle02.active .sub > span span:nth-child(1)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(2)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(3)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(4)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(5)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(6)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(7)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(8)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(9)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(10)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(11)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(12)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(13)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(14)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(15)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(16)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(17)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(18)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(19)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modTitle02.active .sub > span span:nth-child(20)
{
    -webkit-animation: txtUp;
            animation: txtUp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

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

/*
#overview
modTxt
*/
/*
#styleguide
xxxxx

```
コード
```
*/
/*
#overview
modBtn
*/
/*
#styleguide
xxxxx

```
コード
```
*/
.modBtn01
{
    position: relative;
    position: relative;

    display: block;

    padding: 15px 40px;

    text-align: center;
    text-decoration: none; 

    color: #00aec7;
    border: solid 1px #00aec7;
    border-radius: 3px;
    background-color: #fff;
}
@media only screen and (max-width: 992px)
{
    .modBtn01
    {
        padding: 15px 35px;
    }
}
@media only screen and (max-width: 600px)
{
    .modBtn01
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.modBtn01:hover
{
    opacity: 1;
    color: #fff;
}
@media only screen and (max-width: 992px)
{
    .modBtn01:hover
    {
        color: #00aec7;
    }
}
.modBtn01_small
{
    font-size: 13px;
    font-size: 1.3rem;
}
@media only screen and (max-width: 600px)
{
    .modBtn01_small
    {
        font-size: 12px;
        font-size: 1.2rem; 

        padding-top: 10px;
        padding-bottom: 10px;
    }
}
.modBtn01_xsmall
{
    padding-top: 10px;
    padding-bottom: 10px;
}
@media only screen and (max-width: 600px)
{
    .modBtn01_xsmall
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.modBtn01_inline
{
    display: inline-block;
}
.modBtn01_arrowNo
{
    padding-right: 25px;
    padding-left: 25px;
}
.modBtn01_color02
{
    color: #fff; 
    border-color: #fff;
    background-color: transparent;
}
.modBtn01_color02:hover
{
    color: #00aec7;
}
.modBtn01_color03
{
    color: #fff; 
    background-color: #00aec7;
}
.modBtn01_color03:hover
{
    color: #00aec7;
}
.modBtn01:after
{
    position: absolute;
    top: 0;
    right: 24px;
    bottom: 0;

    width: 8px;
    height: 16px;
    margin: auto; 

    content: '';

    background-image: url(../img/common/arrow01.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 16px 16px;
}
@media only screen and (max-width: 992px)
{
    .modBtn01:after
    {
        right: 15px;
    }
}
.modBtn01:hover:after
{
    background-position: -8px 0;
}
@media only screen and (max-width: 600px)
{
    .modBtn01:hover:after
    {
        background-position: 0 0;
    }
}
.modBtn01_arrowNo:after
{
    display: none;
}
.modBtn01_color03:after
{
    background-position: -8px 0;
}
.modBtn01_color03:hover:after
{
    background-position: 0 0;
}
@media only screen and (max-width: 600px)
{
    .modBtn01_color03:hover:after
    {
        background-position: -8px 0;
    }
}
.modBtn01_blank:after
{
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;

    width: 12px;
    height: 12px;
    margin: auto; 

    content: '';

    background-image: url(../img/common/iconBlank.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 24px auto;
}
@media only screen and (max-width: 992px)
{
    .modBtn01_blank:after
    {
        right: 15px;
    }
}
.modBtn01_blank:hover:after
{
    background-position: -12px 0;
}
@media only screen and (max-width: 600px)
{
    .modBtn01_blank:hover:after
    {
        background-position: -8px 0;
    }
}
.modBtn01:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0;

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

    opacity: .8;
    border-radius: 3px; 
    background-color: #00aec7;
}
@media only screen and (max-width: 992px)
{
    .modBtn01:before
    {
        display: none;
    }
}
.modBtn01:hover:before
{
    width: 100%;
}
.modBtn01_color02:before
{
    opacity: 1; 
    background-color: #fff;
}
.modBtn01_color03:before
{
    opacity: 1; 
    background-color: #fff;
}
.modBtn01 span
{
    position: relative;
}

.modBtn02
{
    font-weight: bold;
    line-height: 1.3; 

    position: relative;

    display: block;

    padding: 12px 40px;

    transition: all .2s ease;
    text-align: center;
    text-decoration: none;

    border: solid 1px #2c2825;
    border-radius: 3px;
}
@media only screen and (max-width: 600px)
{
    .modBtn02
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.modBtn02:hover
{
    opacity: 1;
    color: #fff; 
    border-color: #2d2926;
}
@media only screen and (max-width: 992px)
{
    .modBtn02:hover
    {
        color: #2c2825;
    }
}
.modBtn02:before
{
    position: absolute;
    z-index: 10; 
    top: 0;
    bottom: 0;
    left: 20px;

    width: 6px;
    height: 10px;
    margin: auto;

    content: '';

    background-image: url(../img/common/arrow02.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 12px 10px;
}
@media only screen and (max-width: 600px)
{
    .modBtn02:before
    {
        width: 5px;
        height: 9px; 

        background-size: 10px 9px;
    }
}
.modBtn02:hover:before
{
    background-position: -6px 0;
}
@media only screen and (max-width: 600px)
{
    .modBtn02:hover:before
    {
        background-position: 0 0;
    }
}
.modBtn02:after
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 0;

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

    opacity: .8;
    border-radius: 3px; 
    background-color: #2d2926;
}
@media only screen and (max-width: 992px)
{
    .modBtn02:after
    {
        display: none;
    }
}
.modBtn02:hover:after
{
    width: 100%;
}
.modBtn02_en
{
    font-family: 'jins_nextlight';
    font-weight: normal;
}
.modBtn02 span
{
    position: relative;
    z-index: 10;
}

.bnrSet, .bnrSetTop
{
    position: relative;
    z-index: 9999;

    width: 100%;
    max-width: 736px;
    margin: 0 auto;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;

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

.bnrSetTop
{
    margin-top: 6vh;
    padding-bottom: 0;
}

.bnrSet
{
    margin-top: -2vh;
    padding-bottom: 15vh;
}

@media only screen and (max-width: 1024px)
{
    .bnrSetTop
    {
        margin-top: 4vh;
    }
    .bnrSet
    {
        margin-top: -20vh;
    }
}
@media only screen and (max-width: 992px)
{
    .bnrSetTop
    {
        width: auto;
        max-width: 600px;
        margin-top: 24px;
        padding: 0 30px 100px 30px;
    }
    .bnrSet
    {
        width: auto;
        max-width: 600px;
        margin-top: 0;
        padding: 0 30px 100px 30px;
        z-index: 1;
    }
}
@media only screen and (max-width: 600px)
{
    .bnrSetTop
    {
        padding: 24px 30px 50px 30px;
    }
    .bnrSet
    {
        padding: 0 30px 50px 30px;
    }
}
.bnrSet.bnrSet02
{
    margin-top: 0;
    padding: 80px 0;
}
@media only screen and (max-width: 992px)
{
    .bnrSet.bnrSet02
    {
        padding: 50px 30px;
    }
}
.bnrSet.bnrFooter
{
    margin-top: 0;
    padding: 0 0 100px 0;
}
@media only screen and (max-width: 992px)
{
    .bnrSet.bnrFooter
    {
        padding: 50px 30px;
    }
}
.bnrSet.bnrFooter02
{
    margin-top: 0;
    padding: 100px 0;
}
@media only screen and (max-width: 992px)
{
    .bnrSet.bnrFooter02
    {
        padding: 50px 30px;
    }
}
.bnrSet a
{
    display: block;

    transition: .3s;
}
.bnrSet a:hover
{
    opacity: .8;
}
.bnrSet a > img.pc
{
    display: block;
}
@media only screen and (max-width: 600px)
{
    .bnrSet a > img.pc
    {
        display: none;
    }
}
.bnrSet a > img.sp
{
    display: none;
}
@media only screen and (max-width: 600px)
{
    .bnrSet a > img.sp
    {
        display: block;
    }
}

.btnArea
{
    position: relative;
    z-index: 10;

    text-align: center;
}
.btnArea.btnArea--belowHeader
{
    /*margin-top: -30vh;*/
    margin-top: 0vh;
    margin-bottom: 80px;
}

_:-ms-lang(x), .btnArea.btnArea--belowHeader
{
    margin-top: -30vh;
}

@media only screen and (max-width: 1024px)
{
    .btnArea.btnArea--belowHeader
    {
        margin-top: 0;
    }
}
.btnArea.btnArea--footer
{
    margin-top: 100px;
    margin-bottom: 100px;
}
@media only screen and (max-width: 1024px)
{
    .btnArea.btnArea--footer
    {
        margin-top: 70px;
        margin-bottom: 70px;
    }
}
.btnArea .btnBuy
{
    display: inline-block; 

    width: 290px;
}

/*
#overview
modBlock
*/
/*
#styleguide

```
コード
```
*/
@-webkit-keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@-webkit-keyframes mainvisualBg
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 60%;

        opacity: 1;
    }
}
@keyframes mainvisualBg
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 60%;

        opacity: 1;
    }
}
@-webkit-keyframes mainvisualBgTab
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 75%;

        opacity: 1;
    }
}
@keyframes mainvisualBgTab
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 75%;

        opacity: 1;
    }
}
@-webkit-keyframes mainvisualBgSp
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 66%;

        opacity: 1;
    }
}
@keyframes mainvisualBgSp
{
    0%
    {
        width: 0;

        opacity: 0;
    }
    100%
    {
        width: 66%;

        opacity: 1;
    }
}
@-webkit-keyframes mainvisualImage
{
    0%
    {
        right: -15%;

        opacity: 0;
    }
    100%
    {
        right: 0;

        opacity: 1;
    }
}
@keyframes mainvisualImage
{
    0%
    {
        right: -15%;

        opacity: 0;
    }
    100%
    {
        right: 0;

        opacity: 1;
    }
}
@-webkit-keyframes mainvisualImageSp
{
    0%
    {
        right: -10vw;

        opacity: 0;
    }
    100%
    {
        right: 0;

        opacity: 1;
    }
}
@keyframes mainvisualImageSp
{
    0%
    {
        right: -10vw;

        opacity: 0;
    }
    100%
    {
        right: 0;

        opacity: 1;
    }
}
.modBlockMainvisual
{
    position: relative;
    position: relative;
    z-index: 10; 

    min-height: 90vh;
    padding: 14vw 0 0;
}
@media only screen and (max-width: 1024px)
{
    .modBlockMainvisual
    {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 10vw 0 80px;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual
    {
        margin-bottom: 40px; 
        padding: 50px 0 0;
    }
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual
    {
        padding: 40px 0 0;
    }
}
.modBlockMainvisualFlag #header
{
    position: absolute;
    z-index: 1000; 
    top: 0;
    right: 0;
    left: 0;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;
    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.modBlockMainvisual:before
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8vh;

    width: 0;

    content: '';
    -webkit-animation: mainvisualBg;
            animation: mainvisualBg;
    -webkit-animation-duration: 2.2s;
            animation-duration: 2.2s;
    -webkit-animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
            animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;
    background-color: #00aec7;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual:before
    {
        bottom: 28vh; 

        -webkit-animation: mainvisualBgTab;
                animation: mainvisualBgTab;
        -webkit-animation-duration: 2.2s;
                animation-duration: 2.2s;
        -webkit-animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
                animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
        -webkit-animation-delay: 0;
                animation-delay: 0;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual:before
    {
        bottom: 30vh; 

        -webkit-animation: mainvisualBgSp;
                animation: mainvisualBgSp;
        -webkit-animation-duration: 2.2s;
                animation-duration: 2.2s;
        -webkit-animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
                animation-timing-function: cubic-bezier(.76, 0, .03, 1.01);
        -webkit-animation-delay: 0;
                animation-delay: 0;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual_review:before
    {
        bottom: 7vh;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual_safety:before
    {
        bottom: 7vh;
    }
}
.modBlockMainvisual .imageArea
{
    position: relative;

    padding-left: 30px;
}
.modBlockMainvisual .imageArea.quality_imageArea
{
    padding-left: 10px;
}
.modBlockMainvisual .container
{
    position: relative;
}
.modBlockMainvisual .modTitle01 .title > span
{
    font-size: 74px;
    font-size: 7.4rem;
}
@media only screen and (max-width: 1360px)
{
    .modBlockMainvisual .modTitle01 .title > span
    {
        font-size: 4.3vw;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .modTitle01 .title > span
    {
        font-size: 60px;
        font-size: 6rem;
    }
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual .modTitle01 .title > span
    {
        font-size: 30px;
        font-size: 3rem;
    }
}
.modBlockMainvisual .modTitle01 .sub > span
{
    font-size: 28px;
    font-size: 2.8rem;
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual .modTitle01 .sub > span
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.modBlockMainvisual .detail
{
    margin-bottom: 30vh;
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .detail
    {
        margin-top: -20%; 
        margin-bottom: 45px;
    }
}
.modBlockMainvisual .detail .leadTxt
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;

    margin-bottom: 40px;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .detail .leadTxt
    {
        margin-top: -15px;
    }
}
@media only screen and (max-width: 600px)
{
    .modBlockMainvisual .detail .leadTxt
    {
        font-size: 13px;
        font-size: 1.3rem; 
        line-height: 1.8;

        margin-bottom: 30px;
    }
}
.modBlockMainvisual .detail .leadTxt span
{
    display: block;
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .detail .leadTxt span
    {
        display: inline;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual_review .detail
    {
        margin-top: 0;
    }
}
.modBlockMainvisual .image
{
    position: absolute;
    top: -10vw;
    right: -15%;

    width: 70vw;
    padding: 0 0 0 10%; 

    -webkit-animation: mainvisualImage;
            animation: mainvisualImage;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 1280px)
{
    .modBlockMainvisual .image
    {
        padding: 0 0 0 4%;
    }
}
@media only screen and (max-width: 1024px)
{
    .modBlockMainvisual .image
    {
        width: 66vw; 
        margin-top: 2vw;
    }
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .image
    {
        position: relative;
        top: 0;
        right: -10vw;

        width: auto;
        margin-top: 0;
        padding-left: 0;

        -webkit-animation: mainvisualImageSp;
                animation: mainvisualImageSp;
        -webkit-animation-duration: 1s;
                animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-delay: .6s;
                animation-delay: .6s;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
        text-align: right; 

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
.modBlockMainvisual .btnSet
{
    width: 300px;
    max-width: 100%;
    margin: 0 auto;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 992px)
{
    .modBlockMainvisual .btnSet
    {
        width: auto;
        max-width: 280px;
    }
}

/*
#overview
modTable
*/
/*
#styleguide
xxxxx

```
コード
```
*/
/*
#overview
modList
*/
/*
#styleguide
modList　modIndent

```
<ul class="modListNormal">
    <li>リスト</li>
    <li>リスト</li>
</ul>
<ol class="modListNormal">
    <li>リスト</li>
    <li>リスト</li>
</ol>
<ul class="modIndent01">
    <li>※テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
    <li>※リスト</li>
</ul>
<ul class="modIndent02">
    <li>１.　テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
    <li>２.　リスト</li>
</ul>
<ul class="modList01">
    <li>Illustrator に原寸で配置したサイズでの解像度が350dpiになるようにしてください。</li>
    <li> 拡大縮小率70%〜141％を超えると画質が劣化するのでご注意ください。</li>
</ul>
```
*/
.modListNormal
{
    margin: 0 0 0 2em;
}

ul.modListNormal li:before
{
    display: inline-block;

    width: 2em;
    margin-left: -2em;

    content: '\0030fb';
    text-align: center;
}

ol.modListNormal li
{
    list-style: decimal;
}

/* indent */
.modIndent01 li
{
    margin: 0 0 0 1em; 

    text-indent: -1em;
}

.modIndent02 li
{
    margin: 0 0 0 2.5em; 

    text-indent: -2.5em;
}

/* フォーム
***************************************/
.modDlForm
{
    margin: 0 0 20px;
}
.modDlForm dt
{
    position: relative; 

    float: left;
    clear: both;

    width: 16em;
    padding: 33px 0 20px 63px;
}
@media only screen and (max-width: 992px)
{
    .modDlForm dt
    {
        float: none;

        width: auto;
        padding: 33px 0 0 63px;
    }
}
.modDlForm dt.required:before,
.modDlForm dt.any:before
{
    font-size: 11px;
    font-size: 1.1rem;

    position: absolute;
    top: 33px;
    left: 0;

    padding: 2px 10px; 

    color: #fff;
}
.modDlForm dt.required:before
{
    content: '必須';

    background: #e33e41;
}
.modDlForm dt.any:before
{
    content: '任意'; 

    background: #999;
}
.modDlForm dd
{
    padding: 10px 0;
    padding-left: 17em; 

    border-bottom: solid 1px #ccc;
}
@media only screen and (max-width: 992px)
{
    .modDlForm dd
    {
        padding: 10px 0;
    }
}
.modDlForm dd .parts
{
    padding: 10px 0;
}
.modDlForm dd .parts textarea,
.modDlForm dd .parts input[type='text'],
.modDlForm dd .parts input[type='email']
{
    width: 100%;
}
.modDlForm dd .parts.radio_inline > div,
.modDlForm dd .parts.check_inline > div
{
    display: inline-block;
}
.modDlForm dd .parts.name
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.modDlForm dd .parts.name > div
{
    width: 48.5%;
}
.modDlForm dd .parts.post,
.modDlForm dd .parts.tel
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.modDlForm dd .parts.post .hyphen,
.modDlForm dd .parts.tel .hyphen
{
    padding: 10px 10px 0 10px;
}
@media only screen and (max-width: 600px)
{
    .modDlForm dd .parts.post .hyphen,
    .modDlForm dd .parts.tel .hyphen
    {
        padding: 10px 5px 0 5px;
    }
}
.modDlForm dd .parts.password input
{
    width: 100%;
    max-width: 300px;
}
@media only screen and (max-width: 600px)
{
    .modDlForm dd .parts.password input
    {
        max-width: none;
    }
}
.modDlForm dd .parts.password .text
{
    padding: 10px 0;
}
.modDlForm .validationError
{
    color: #e33e41;
}

/*
#overview
other
*/
/*
#styleguide
xxxxx

```
コード
```
*/
@media only screen and (max-width: 600px)
{
    .modMoveImgPara img.pc,
    .modMove img.pc,
    .modBlockMainvisual img.pc
    {
        display: none;
    }
}
.modMoveImgPara img.sp,
.modMove img.sp,
.modBlockMainvisual img.sp
{
    display: none;
}
@media only screen and (max-width: 600px)
{
    .modMoveImgPara img.sp,
    .modMove img.sp,
    .modBlockMainvisual img.sp
    {
        display: block;
    }
}

/*
#overview
other
*/
/*
#styleguide
xxxxx

```
コード
```
*/
.modMoveImgPara
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
}
@media only screen and (max-width: 992px)
{
    .modMoveImgPara
    {
        -webkit-transform: translate(0, 0) !important;
            -ms-transform: translate(0, 0) !important;
                transform: translate(0, 0) !important;
    }
}

/* bnr_subscription 20191209 */
#bnr_subscription img{
    margin-top: 20px;
    width: 100%;
    height: auto;
}
@media only screen and (min-width: 770px){
#bnr_subscription img{
    width: 336px;
    height: auto;
    }
}

/* xhtmlに直接記述していたもの */
.u-price__small {
  font-size: 80%;
}

/*1day共通メニュー内容(nav_list_flex)の切り替え*/
  /*基本 → マイページ*/
  .nav_list_flex li.teikibinPage_1day {
    display: none;
   }

  /*例外2ページ → 定期便ページ*/
  #subscription .nav_list_flex li.myPage_1day,
  #wrapper.teiki .nav_list_flex li.myPage_1day {
    display: none;
  }

  #subscription .nav_list_flex li.teikibinPage_1day,
  #wrapper.teiki .nav_list_flex li.teikibinPage_1day {
    display: list-item;
 }