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


}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align: middle;
}
img{
    max-width: 100%;
}
:root {
}
/*===================================================================
------------------
Table Of Contents
------------------
    01) box
    02) text
    03) margin
===================================================================*/
/*-------------------------------------------------------------------
 01) box
-------------------------------------------------------------------*/
.pc-none{
    display: none;
}
.hv{
    transition: opacity .3s ease;
}
.hv:hover{
    opacity: .7;


}
.cf:before, .cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
.grid {
    *zoom:1;
}
.grid > *{
    float: left;
    box-sizing: border-box;


}
.grid:after, .grid:before {
    content: "";
    display: table;
    clear: both;


}
.grid__col01 {
    width: 4.16666666667%;


}
.grid__col02 {
    width: 8.33333333333%;


}
.grid__col03 {
    width:12.5%;


}
.grid__col04 {
    width: 16.6666666667%;


}
.grid__col05 {
    width: 20.8333333333%;


}
.grid__col06 {
    width: 25%;


}
.grid__col07 {
    width: 29.1666666667%;


}
.grid__col08 {
    width: 33.3333333333%;


}
.grid__col09 {
    width: 37.5%;


}
.grid__col10 {
    width: 41.6666666667%;


}
.grid__col11 {
    width: 45.8333333333%;


}
.grid__col12 {
    width: 50%;


}
.grid__col13 {
    width: 54.1666666667%;


}
.grid__col14 {
    width: 58.3333333333%;


}
.grid__col15 {
    width: 62.5%;


}
.grid__col16 {
    width: 66.6666666667%;


}
.grid__col17 {
    width: 70.8333333333%;


}
.grid__col18 {
    width: 75%;


}
.grid__col19 {
    width: 79.1666666667%;


}
.grid__col20 {
    width: 83.3333333333%;


}
.grid__col21 {
    width: 87.5%;


}
.grid__col22 {
    width: 91.6666666667%;


}
.grid__col23 {
    width: 95.8333333333%;


}
.grid__col24 {
    width: 100%;


}
.grid--gutter{
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;


}
.grid--gutter > *{
    padding-left:   10px;
    padding-right:  10px;
    margin-bottom: 10px;


}
.grid--gutter-w{
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;


}
.grid--gutter-w > *{
    padding-left:   20px;
    padding-right:  20px;


}
.yt-wrap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
.yt-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


}
/*-------------------------------------------------------------------
 02) text
-------------------------------------------------------------------*/
.bold{ font-weight: bold;}
.normal{ font-weight: normal}
.txtc{ text-align: center; }
.txtl{ text-align: left; }
.txtr{ text-align: right; }
.txtj{ text-align: justify;}
.left{ float: left}
.right{ float: right}
.fs12{ font-size: 1.2rem;}
.fs14{ font-size: 1.4rem;}
.fs16{ font-size: 1.6rem;}
.fs18{ font-size: 1.8rem;}
.fs20{ font-size: 2rem;}
.fs24{ font-size: 2.4rem;}
.fs26{ font-size: 2.6rem;}
/*-------------------------------------------------------------------
 03) margin
-------------------------------------------------------------------*/
.mb0{ margin-bottom: 0 !important;}
.mb05{ margin-bottom: 5px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}
.mb50{ margin-bottom: 50px !important;}
.mb60{ margin-bottom: 60px !important;}
@media only screen and (max-width: 767px){

.pc-none{
    display: block;
}
.sp-none{
    display: none;
}

}
/*===================================================================
------------------
Table Of Contents
------------------
    01) base
    02) header
    03) footer
===================================================================*/
/*-------------------------------------------------------------------
 01) base
-------------------------------------------------------------------*/
html{
    font-size: 62.5%;
}
body{
    font-family:  "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #555;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
    color: #E97069;
}
#wrapper{
    overflow: hidden;
    position: relative;
    min-width: 1020px;
    background: rgb(182,248,255);
    background: linear-gradient(to bottom, rgba(182,248,255,1) 0%,rgba(213,251,255,1) 22%,rgba(244,254,255,1) 50%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6f8ff', endColorstr='#ffffff',GradientType=0 );
}
.wrapper-top{
    background: linear-gradient(to bottom, rgba(182,248,255,1) 0%, rgba(255,255,255,1) 500px) !important;
}
#main{
    display: block;
    position: relative;
    padding-bottom: 60px;
}
.loading-screen{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
}
.loading-screen__chr{
    visibility: hidden;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210px;
    height: 200px;
    margin: -100px 0 0 -105px;
    background: url(../img/common/chr_loading.svg) 0 0 no-repeat;
    background-size: 1890px 200px;
    -webkit-animation: loading 3s steps(8) 0s infinite;
            animation: loading 3s steps(8) 0s infinite;


}
@-webkit-keyframes loading {
    0% { background-position: 0 0; }
  100% { background-position: -1689px 0; }
}
@keyframes loading {
    0% { background-position: 0 0; }
  100% { background-position: -1689px 0; }
}
/*-------------------------------------------------------------------
 02) header
-------------------------------------------------------------------*/
.hd{
    display: block;
    position: relative;
    z-index: 100;
    width: 100%;
    padding: 20px 0;
    background: url(../img/common/bg_header.png) center 0 repeat-x;
}
.hd__inr{
    overflow: hidden;
    position: relative;
    max-width: 960px;
    margin: 0 auto;


}
.hd__ttl{
    position: relative;
    z-index: 2;
    width: 500px;
    height: 67px;
    margin: 0 auto 20px;


}
.hd__ttl a{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 500px;
    height: 67px;
    background: url(../img/common/logo.svg) 0 0 no-repeat;
    background-size: 500px 67px;


}
.gnav{
    width: 730px;
    margin: 0 auto;

}
.gnav__inr li{
    position: relative;
    float: left;
    width: 115px;
    margin-left: 38px;


}
.gnav__inr li.current:after{
    content: url(../img/common/nav_current.png);
    position: absolute;
    bottom: -30px;
    left: -40px;


}
.gnav__inr svg .bkg{
    transition: all .3s ease;


}
.gnav__inr svg a:hover .bkg{
    fill: #FFF !important;


}
.gnav__history{
    margin-left: 0!important;


}
.gnav__diagnosis{
    margin-top: 9px;


}
.gnav__bonus{
    margin-top: 9px;


}
.gnav__manga{
    margin-top: 9px;


}
.gnav__salon{
    margin-top: 9px;


}
.gnav-sp{
    display: none;
}
.menu{
    display: none;
}
/*-------------------------------------------------------------------
 03) footer
-------------------------------------------------------------------*/
.ft{
    display: block;
    position: relative;
    z-index: 10;
}
.ft__top{
    padding: 100px 0 70px;
    margin-top: -70px;
    background: url(../img/common/bg_footer01.png) center 0 repeat-x;


}
.ft__sns{
    overflow: hidden;
    position: relative;
    width: 608px;
    margin: 0 auto;


}
.ft__sns li{
    float: left;
    width: 274px;
    height: 74px;
    margin: 0 15px;


}
.ft__sns a{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 274px;
    height: 74px;
    background: 0 0 no-repeat;


}
.ft__sns a:active{
    background-position: 0 -74px;


}
.ft__sns .tw a{
    background-image: url(../img/common/btn_tw.png);


}
.ft__sns .fb a{
    background-image: url(../img/common/btn_fb.png);


}
.ft__sns .ln{
    display: none;


}
.ft__middle{
    padding: 100px 0 20px;
    margin-top: -70px;
    background: url(../img/common/bg_footer02.png) center 0 repeat-x;


}
.ft__bottom{
    padding: 50px 0 20px;
    margin-top: -20px;
    background: url(../img/common/bg_footer03.png) center 0 repeat-x;


}
.ft__copyright{
    overflow: hidden;
    width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px 0 20px;


}
.ft__copyright .ft-logo{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    float: left;
    width: 120px;
    height: 50px;
    background: url(../img/common/logo_ft.png) 0 0 no-repeat;
    background-size: 120px 50px;


}
.ft__copyright p{
    margin-top: 5px;
    margin-left: 140px;
    font-size: .9rem;


}
.ft__copyright .copyright{
    display: block;
    margin-left: 140px;
    font-size: .9rem;


}
.scroll-top{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    position: absolute;
    top: -10px;
    right: 20px;
    width: 100px;
    height: 100px;
    background: url(../img/common/btn_scrolltop.png) 0 0 no-repeat;
}
.scroll-top:active{
    background-position: 0 -100px;


}
.scroll-top:hover{
    -webkit-animation: jump .5s steps(2) 0s ;
            animation: jump .5s steps(2) 0s ;


}
@-webkit-keyframes jump {
    0% { background-position: 0 0; }
  100% { background-position: 0 -200px; }
}
@keyframes jump {
    0% { background-position: 0 0; }
  100% { background-position: 0 -200px; }
}
.btn-back{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    position: relative;
    z-index: 10;
    width: 290px;
    height: 84px;
    margin: 0 auto 30px;
    background: url(../img/common/btn_back.png) 0 0 no-repeat;
 }
.btn-back:hover{
    background-position: 0 -84px;


}
/*===================================================================
------------------
Table Of Contents
------------------
    01) common
    02) page : top
    03) page : history
    04) page : intro
    05) page : diagnosis
===================================================================*/
/*-------------------------------------------------------------------
 01) common
-------------------------------------------------------------------*/
input[type=checkbox] {
    display: inline-block;
}
input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
}
@media (min-width: 1px) {
    input[type=checkbox] {
        display: none;
        margin: 0;
    }
    input[type=checkbox] + label{
        padding: 0 20px 0 56px;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;


    }
    input[type=checkbox] + label:before{
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 0;
        width: 35px;
        height: 35px;
        margin-top: -18px;
        background: #FFF;
        border: 1px solid #555;
        border-radius: 4px;


    }
    input[type=checkbox]:checked + label:after{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 15px;
        height: 10px;
        margin-top: -10px;
        margin-left: 7px;
        border-left: 4px solid #f8688a;
        border-bottom: 4px solid #f8688a;
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);


    }
}
.sect{
    position: relative;
    padding-bottom: 60px;
}
.sect__inr{
    width: 960px;
    padding: 0 20px;
    margin: 0 auto;


}
.sect__inr2{
    padding: 0 30px;
    margin: 0 auto;
    text-align: center;


}
.sect__ttl{
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 40px;


}
.sect__ttl img{
    vertical-align: bottom;


}
.modal-area{
    display: none;
    visibility: hidden;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal-area__bg{
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(224, 216, 202, 0.8);


}
.modal{
    visibility: hidden;
    position: absolute;
    z-index: 2;
    width: 100%;
    border-style: solid;
    border-width: 6px;
    border-image: url(../img/common/bg_modal.png) 6 fill repeat;
    -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
            transform: scale(0.1);
}
.modal__close{
    display: block;
    position: absolute;
    top: -40px;
    right: -40px;
    width: 70px;
    height: 70px;
    background: #E6E6E6;
    border: 2px solid #000;
    border-radius: 50%;
    cursor: pointer;


}
.modal__close:after, .modal__close:before{
    content: "";
    position: absolute;
    top: 33px;
    left: 10px;
    width: 50px;
    height: 4px;
    background: #000;
    border-radius: 3px;
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
    transition:-webkit-transform .3s  ease;
    transition:transform .3s  ease;
    transition: transform .3s  ease, -webkit-transform .3s  ease;


}
.modal__close:after{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);


}
.modal__close:before{
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);


}
/*-------------------------------------------------------------------
 02) page : top
-------------------------------------------------------------------*/
.hero{
    position: relative;
    max-width: 980px;
    padding: 0 20px 80px;
    margin: 0 auto;
}
.hero__chr{
    width: 280px;
    margin-left: 100px;


}
.hero__chr img{
    width: 100%;


}
.hero__txt{
    position: absolute;
    top: 80px;
    left: 420px;
    width: 500px;


}
.hero__txt span{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 500px;
    height: 60px;
    background: center 0 no-repeat;


}
.hero__txt .txt01{
    background-image: url(../img/top/txt_hero01.svg);


}
.hero__txt .txt02{
    background-image: url(../img/top/txt_hero02.svg);


}
.hero__txt .txt03{
    background-image: url(../img/top/txt_hero03.svg);


}
.sect-news{
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 0;
    background: #fff4f6;
}
.sect-news:before{
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(../img/common/bg01.png) center 0 repeat-x;


}
.sect-news .sect__inr{
    height: 660px;
    background: url(../img/top/bg_news.png) center 0 no-repeat;


}
.news{
    overflow: hidden;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    width: 460px;
    height: 150px;
    margin: 0 auto;
}
.news p{
    font-size: 2.1rem;


}
.sect-main{
    margin-top: 20px;
    margin-bottom: -100px;
    padding-top: 0px;
    padding-bottom: 140px;
    background: url(../img/top/bg_tw02.png) center 0 repeat;
}
.sect-main:before{
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(../img/top/bg_tw01.png) center 0 repeat-x;


}
.yt-block{
    max-width: 560px;
    margin: 0 auto 150px;
}
.yt-block .yt-wrap{
    border: 3px solid #b2b2b2;


}
.tw-wrap{
    padding: 20px;
    width: 520px;
    margin: 0 auto 30px;
    background: #FFF;
    border: 3px solid #b2b2b2;
    border-radius: 10px;
}
.tw-wrap__ttl{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 452px;
    height: 133px;
    margin: -120px auto 30px;
    background: url(../img/top/ttl_tw.png) 0 0 no-repeat;


}
.tw-wrap__timeline{
}
.btn-more{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 303px;
    height: 70px;
    margin: 0 auto;
    background: url(../img/top/btn_more.png) 0 0 no-repeat;
}
.btn-more:active{
    background-position: 0 -70px;


}
/*-------------------------------------------------------------------
 04) page : intro
-------------------------------------------------------------------*/
.profile{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 27.08333%;
    background: url(../img/introduce/fig_profile.png) 0 0 no-repeat;
    background-size: 100%;
}
.organization{
    position: relative;
    max-width: 850px;
    height: 0;
    margin: 0 auto;
    padding-top: 1000px;
}
.organization__bg{
    position: absolute;
    top: 0;
    left: 0.47059%;
    margin-top: 19.64706%;
    width: 99.05882%;
    padding-top: 86.70588%;


}
.organization__bg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;


}
.chr{
    position: absolute;
    top: 0;
    height: 0;
}
.chr__loading{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


}
.chr__loading:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 4px solid #C3F9FF;
    border-right-color: transparent;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;


}
.chr__loading + a{
    opacity: .5


}
.chr img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;


}
.chr a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;


}
.chr a:hover, .chr a.hover{
    -webkit-animation: chr .3s 1 backwards;
            animation: chr .3s 1 backwards;


}
.chr a:focus{
    outline: none;


}
.chr--deppa{
    left: 54.11765%;
    margin-top: 0;
    width: 23.05882%;
    padding-top: 18.82353%;


}
.chr--ohaguro{
    left: 30%;
    margin-top: 0.58824%;
    width: 14.35294%;
    padding-top: 16.94118%;


}
.chr--yaeba{
    left: 81.41176%;
    margin-top: 12.94118%;
    width: 14.82353%;
    padding-top: 19.88235%;


}
.chr--okuba{
    left: 2.94118%;
    margin-top: 10.58824%;
    width: 20.23529%;
    padding-top: 22.11765%;


}
.chr--kinba{
    left: 77.64706%;
    margin-top: 44.70588%;
    width: 19.88235%;
    padding-top: 20.70588%;


}
.chr--plaque{
    left: 4.70588%;
    margin-top: 45.88235%;
    width: 13.64706%;
    padding-top: 19.17647%;


}
.chr--ginba{
    left: 82.35294%;
    margin-top: 80%;
    width: 17.64706%;
    padding-top: 19.64706%;


}
.chr--implant{
    left: 1.17647%;
    margin-top: 77.05882%;
    width: 24%;
    padding-top: 22.58824%;


}
.chr--zombie{
    left: 42.82353%;
    margin-top: 97.64706%;
    width: 14.94118%;
    padding-top: 20.58824%;


}
@-webkit-keyframes spin{
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);   opacity: 0.2; }
    50%  { -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1.0; }
    100%   { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.2; }

}
@keyframes spin{
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);   opacity: 0.2; }
    50%  { -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 1.0; }
    100%   { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.2; }

}
@-webkit-keyframes chr{
    0%{
        -webkit-transform: scale(1) rotate(0deg);
                transform: scale(1) rotate(0deg);
    }
    10%{
        -webkit-transform: scale(1.01) rotate(2deg);
                transform: scale(1.01) rotate(2deg);

    }
    20%{
        -webkit-transform: scale(1.02) rotate(0deg);
                transform: scale(1.02) rotate(0deg);

    }
    30%{
        -webkit-transform: scale(1.03) rotate(-2deg);
                transform: scale(1.03) rotate(-2deg);
    }
    40%{
        -webkit-transform: scale(1.04) rotate(0);
                transform: scale(1.04) rotate(0);
    }
    50%{
        -webkit-transform: scale(1.05) rotate(2deg);
                transform: scale(1.05) rotate(2deg);
    }
    60%{
        -webkit-transform: scale(1.06) rotate(0);
                transform: scale(1.06) rotate(0);
    }
    100%{
        -webkit-transform: scale(1.06) rotate(0);
                transform: scale(1.06) rotate(0);
    }
}
@keyframes chr{
    0%{
        -webkit-transform: scale(1) rotate(0deg);
                transform: scale(1) rotate(0deg);
    }
    10%{
        -webkit-transform: scale(1.01) rotate(2deg);
                transform: scale(1.01) rotate(2deg);

    }
    20%{
        -webkit-transform: scale(1.02) rotate(0deg);
                transform: scale(1.02) rotate(0deg);

    }
    30%{
        -webkit-transform: scale(1.03) rotate(-2deg);
                transform: scale(1.03) rotate(-2deg);
    }
    40%{
        -webkit-transform: scale(1.04) rotate(0);
                transform: scale(1.04) rotate(0);
    }
    50%{
        -webkit-transform: scale(1.05) rotate(2deg);
                transform: scale(1.05) rotate(2deg);
    }
    60%{
        -webkit-transform: scale(1.06) rotate(0);
                transform: scale(1.06) rotate(0);
    }
    100%{
        -webkit-transform: scale(1.06) rotate(0);
                transform: scale(1.06) rotate(0);
    }
}
/*-------------------------------------------------------------------
 05) page : diagnosis
-------------------------------------------------------------------*/
.diagnosis-wrap .lead{
    margin-bottom: 40px;
    font-size: 2.6rem;
    text-align: center;


}
.diagnosis{
    position: relative;
    padding: 50px;
    margin-bottom: 40px;
    background: #FFF;
    border: 1px solid #555;
}
.diagnosis:before{
    content: url(../img/diagnosis/chr01.png) ;
    position: absolute;
    right: 40px;
    top: 50px;


}
.diagnosis:after{
    content: url(../img/diagnosis/chr02.png) ;
    position: absolute;
    right: 40px;
    bottom: 50px;


}
.diagnosis__list{
    font-size: 2.0rem;


}
.diagnosis__list li{
    margin-top: 20px;


}
.diagnosis__list li:first-child{
    margin-top: 0;


}
.btn-diag{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    visibility: hidden;
    width: 303px;
    height: 86px;
    margin: 0 auto;
    padding: 0;
    background: url(../img/diagnosis/btn_diagnosis.png) 0 0 no-repeat;
    border: 0;
    cursor: pointer;
}
.btn-diag:active{
    background-position: 0 -86px;


}
.btn-diag:focus{
    outline: 0;


}
.during{
    display: none;
    max-width: 640px;
    margin: 0 auto;
}
.during__fig{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 640;
    height: 305px;
    background: url(../img/diagnosis/fig_during.png) 0 0 no-repeat;
    background-size: 640px 610px;
    -webkit-animation: during 2s steps(2) 0s infinite;
            animation: during 2s steps(2) 0s infinite;


}
@-webkit-keyframes during {
    0% { background-position: 0 0; }
  100% { background-position: 0 -610px}
}
@keyframes during {
    0% { background-position: 0 0; }
  100% { background-position: 0 -610px}
}
.result{
    display: none;
    margin-bottom: -230px;

}
.result .sect__inr{
    width: auto;


}
.result__ttl{
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 50px;


}
.result__inr{
    position: relative;
    z-index: 0;
    margin: 20px -20px 0;
    padding-top: 20px;
    padding-bottom: 250px;
    background: url(../img/diagnosis/bg_result02.png) center 0 repeat;
    text-align: center;


}
.result__inr:before{
    content: "";
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 150px;
    background: url(../img/diagnosis/bg_result01.png) center 0 repeat-x;


}
.result__inr .level{
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;


}
.result__inr .level span{
    font-size: 4rem;
    color: #f8688a;


}
.result__inr .txt{
    margin-bottom: 40px;
    font-size: 2.6rem;


}
.result__inr figure{
    max-width: 540px;
    margin: 0 auto 40px;
    background: #FFF;
    border: 2px solid #AFAFAF;
    border-radius:30px;


}
.btn-download{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 323px;
    height: 70px;
    margin: 0 auto 60px;
    padding: 0;
    background: url(../img/common/btn_dl.png) 0 0 no-repeat;
    border: 0;
    cursor: pointer;
}
.btn-download:active{
    background-position: 0 -70px;


}
.btn-retry{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    position: relative;
    z-index: 10;
    width: 270px;
    height: 80px;
    margin: 0 auto;
    background: url(../img/diagnosis/btn_retry.png) 0 0 no-repeat;
 }
.btn-retry:hover{
    background-position: 0 -80px;


}
/*-------------------------------------------------------------------
 06) page : bonus
-------------------------------------------------------------------*/
.bonus__lead{
    text-align: center;
    margin-bottom: 40px;


}
.dl-wrap{
    margin-bottom: 30px;
}
.dl-wrap dt{
    margin-bottom: 10px;


}
.dl-wrap dd{
}
.dl-wrap ul{
    overflow: hidden;


}
.dl-wrap li{
    float: left;
    width: 273px;
    margin-left: 70px;
    text-align: center;


}
.dl-wrap li:first-child{
    margin-left: 0;


}
.dl-wrap li span{
    display: block;
    margin-top: 5px;
    font-size: 1.6rem;


}
[class^=btn-bonus]{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 273px;
    height: 70px;
    margin: 0 auto;
    padding: 0;
    background: url(../img/bonus/btn_bonus.png) 0 0 no-repeat;
    border: 0;
    cursor: pointer;
}
.btn-bonus01:active{
    background-position: 0 -70px;


}
.btn-bonus02{
    background-position: -273px 0;
}
.btn-bonus02:active{
    background-position: -273px -70px;


}
.btn-bonus03{
    background-position: -546px 0;
}
.btn-bonus03:active{
    background-position: -546px -70px;


}
.btn-bonus04{
    background-position: -819px 0;
}
.btn-bonus04:active{
    background-position: -819px -70px;


}
.btn-bonus05{
    background-position: -1092px 0;
}
.btn-bonus05:active{
    background-position: -1092px -70px;


}
/*===================================================================
------------------
Table Of Contents
------------------
    01) sp base
    02) sp header
    03) sp footer
===================================================================*/
@media only screen and (max-width: 767px){
/*-------------------------------------------------------------------
 01) sp base
-------------------------------------------------------------------*/
#wrapper{
    min-width: 320px;
}
.wrapper-top{
    background: linear-gradient(to bottom, rgba(182,248,255,1) 0%, rgba(255,255,255,1) 25%) !important;
}

#main{
    padding-bottom: 80px;
}

/*-------------------------------------------------------------------
 02) sp header
-------------------------------------------------------------------*/
.hd{
    position: relative;
    padding: 10px 0;
    background: url(../img/common/bg_header_sp.png) center bottom repeat-x;
    background-size: 100%;
}
.hd__ttl{
        width: 71.875%;
        height: 0;
        padding-top: 9.6875%;
        margin: 3.125% 10px 6.25%;


    }
.hd__ttl a{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 100%;


    }

.gnav{
    width: auto;
    padding: 0 20px;
    margin: 0 auto;

}

.gnav__inr{
        display: none;


    }

.gnav__inr li{
        position: relative;
        width: 18%;
        height: 0;
        margin-left: 0;
        padding: 19.16667% 1% 0;


    }

.gnav__inr__diagnosis{
        margin-top: 3px;


    }

.gnav__inr__bonus{
        margin-top: 3px;


    }

.gnav__inr svg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;


    }

.gnav__inr svg .hover .bkg{
        fill: #ffe4e4 !important;


    }

.menu{
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
    width: 16.12903%;
    height: 0;
    padding: 20.16129% 0 0 0;
}

.menu a{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/common/btn_menu.svg) 0 0 no-repeat;
        background-size: 100%;


    }

.gnav-sp{
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    width: 100%;
    margin: 0 -20px;

}

.gnav-sp:before{
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 31.25%;
        background: url(../img/common/ttl_menu.png) 0 0 no-repeat;
        background-size: 100%;


    }

.gnav-sp__inr{
        padding: 32.8125% 0 6.25%;
        background: url(../img/common/bg_menu.png) 0 0 repeat;
        background-size: 33px 35px;


    }

.gnav-sp__inr li{
        border-bottom: 2px solid #91ecf4;


    }

.gnav-sp__inr li a, .gnav-sp__inr li span{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        height: 0;
        padding-top: 17.1875%;
        background: 0 center #FFF no-repeat;
        background-size: 100%;


    }

.gnav-sp__top {
        border-top: 2px solid #91ecf4;


    }

.gnav-sp__top a{
        background-image: url(../img/common/nav_top_sp.png) !important;


    }

.gnav-sp__history a{
        background-image: url(../img/common/nav_history_sp.png) !important;


    }

.gnav-sp__introduce a{
        background-image: url(../img/common/nav_intro_sp.png) !important;


    }

.gnav-sp__diagnosis a{
        background-image: url(../img/common/nav_diagnosis_sp.png) !important;


    }

.gnav-sp__bonus a{
        background-image: url(../img/common/nav_bonus_sp.png) !important;


    }

.gnav-sp__manga a{
        background-image: url(../img/common/nav_manga_sp.png) !important;


    }

.gnav-sp__close{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        position: absolute;
        z-index: 11;
        top: 15px;
        right: 10px;
        width: 13.125%;
        height: 0;
        padding-top: 13.125%;
        background: url(../img/common/ico_close.png) 0 0 no-repeat;
        background-size: 100%;
        cursor: pointer;


    }

.wrapper-top .hd{
        background-position: center 0 ;


    }

.wrapper-top .hd__ttl{
        margin: 4.6875% auto 4.6875%;


    }

.wrapper-top .gnav__inr{
        display: block;


    }

.wrapper-top .menu{
        display: none;


    }

.filter{
    display: none;
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
/*-------------------------------------------------------------------
 03) sp footer
-------------------------------------------------------------------*/
.ft__top{
        padding: 50px 0 50px;
        margin-top: -50px;
        background-size: 600px;


    }
.ft__middle{
        padding: 50px 0 20px;
        margin-top: -50px;
        background-size: 600px;


    }
.ft__sns{
        overflow: hidden;
        position: relative;
        width: 318px;
        margin: 0 auto;


    }
.ft__sns li{
        width: 98px;
        height: 28px;
        margin: 0 4px;


    }
.ft__sns a{
        width: 98px;
        height: 28px;
        background: url(../img/common/btn_sns_sp.png) 0 0 no-repeat;
        background-size: 307px 56px;


    }
.ft__sns a:active, .ft__sns a.hover{
        background-position-y: -28px!important;


    }
.ft__sns .fb a{
        background: url(../img/common/btn_sns_sp.png) 0 0 no-repeat;
        background-size: 307px 56px;


    }
.ft__sns .tw a{
        background: url(../img/common/btn_sns_sp.png) -105px 0 no-repeat;
        background-size: 307px 56px;


    }
.ft__sns .ln{
        display: block;


    }
.ft__sns .ln a{
        background-position: -210px 0 ;


    }
.ft__bottom{
        padding: 30px 0 20px;
        margin-top: -20px;
        background-size: 600px;


    }
.ft__copyright{
        width: auto;
        text-align: center;
        padding: 0;


    }
.ft__copyright .ft-logo{
        float: none;
        margin: 0 auto 10px;
        width: 60px;
        height: 25px;
        background-color: #FFF;
        background-size: 60px 25px;


    }
.ft__copyright p{
        margin: 0;
        font-size: .9rem;


    }
.ft__copyright .copyright{
        margin: 0;
        font-size: .9rem;


    }

.scroll-top{
    top: -20px;
    right: 0px;
    width: 60px;
    height: 60px;
    background: url(../img/common/btn_scrolltop_sp.png) 0 0 no-repeat;
    background-size: 60px 120px;
}

.scroll-top:active{
        background-position: 0 -60px;


    }

.scroll-top:hover{
        -webkit-animation: none;
                animation: none;


    }

.btn-back{
    width: 145px;
    height: 42px;
    margin: 0 auto 20px;
    background-size: 145px 84px;
}

.btn-back:hover, .btn-back.hover{
        background-position: 0 -42px;


    }


}
/*===================================================================
------------------
Table Of Contents
------------------
    01) sp common
    02) sp page : top
    03) sp page : history
    04) sp page : intro
===================================================================*/
@media only screen and (max-width: 767px){
/*-------------------------------------------------------------------
 01) sp common
-------------------------------------------------------------------*/
input[type=checkbox] + label {
    line-height: 30px;
}
input[type=checkbox] + label{
        padding: 0 0 0 36px;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;


    }
input[type=checkbox] + label:before{
        width: 20px;
        height: 20px;
        margin-top: -10px;


    }
input[type=checkbox]:checked + label:after{
        width: 10px;
        height: 5px;
        margin-top: -6px;
        margin-left: 3px;
        border-left: 3px solid #f8688a;
        border-bottom: 3px solid #f8688a;


    }

.sect{
    padding-bottom: 30px;
}

.sect__inr{
        width: auto;
        padding: 0 10px;


    }

/*-------------------------------------------------------------------
 02) sp page : top
-------------------------------------------------------------------*/
.hero{
    position: relative;
    padding: 0 10px 40px;
    width: auto;
}
.hero__chr{
        width: 29.03226%;
        margin-left: 0;


    }
.hero__txt{
        position: absolute;
        top: 20px;
        left: 33.87097%;
        width: 62.90323%;


    }
.hero__txt span{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        width: 100%;
        height: 0;
        padding-top: 14%;
        background-size: 100%;


    }

.sect-news{
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
    background: #fff4f6;
}

.sect-news:before{
        content: "";
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        height: 50px;
        background-size: 600px 50px;


    }

.sect-news .sect__inr{
        height: auto;
        padding-top: 106.25%;
        background: url(../img/top/bg_news_sp.png) center 0 no-repeat;
        background-size: 100%;


    }

.news{
    top: 4.6875%;
    left: 0;
    right: 0;
    width: 62.5%;
    height: 70px;
    margin: 0 auto;
}

.news p{
        font-size: 1.4rem;


    }

.sect-main{
    margin-top: -12px;
    margin-bottom: -70px;
    padding: 0px 10px 100px;
    background-size: 25px 25px;
}

.sect-main:before{
        top: -50px;
        width: 100%;
        height: 50px;
        background-size: 600px 50px;


    }

.yt-block{
    max-width: 560px;
    margin: 0 auto 31.25%;
}

.tw-wrap{
    padding: 20px 5px 5px;
    width: auto;
    max-width: 520px;
    margin: 0 auto 20px;
    background: #FFF;
    border: 3px solid #b2b2b2;
    border-radius: 10px;
}

.tw-wrap__ttl{
        width: 100%;
        height: 0;
        padding-top: 29.64602%;
        margin: -26.54867% auto 15px;
        background-size: 100%;


    }

.tw-wrap__timeline{
}

.btn-more{
    position: relative;
    z-index: 2;
    width: 152px;
    height: 35px;
    background-size: 152px 70px;
}

.btn-more:active, .btn-more.hover{
        background-position: 0 -35px;


    }

/*-------------------------------------------------------------------
 04) sp page : intro
-------------------------------------------------------------------*/
.profile{
    padding-top: 76.16667%;
    background: url(../img/introduce/fig_profile_sp.png) 0 0 no-repeat;
    background-size: 100%;
}
.organization{
    padding-top: 117.64706%;
}

/*-------------------------------------------------------------------
 05) sp page : diagnosis
-------------------------------------------------------------------*/
.diagnosis-wrap .lead{
        margin-bottom: 20px;
        font-size: 1.4rem;


    }
.diagnosis{
    padding: 150px 15px;
    margin-bottom: 20px;
}
.diagnosis:before{
        content: "";
        position: absolute;
        top: 15px;
        left: 50%;
        margin-left: -65px;
        width: 132px;
        height: 120px;
        background: url(../img/diagnosis/chr01.png) 0 0 no-repeat;
        background-size: 132px 120px;


    }
.diagnosis:after{
        content: "";
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -65px;
        width: 106px;
        height: 112px;
        background: url(../img/diagnosis/chr02.png) 0 0 no-repeat;
        background-size: 106px 112px;


    }
.diagnosis__list{
        font-size: 1.6rem;


    }
.diagnosis__list li{
        margin-top: 10px;


    }
.diagnosis__list li:first-child{
        margin-top: 0;


    }
.btn-diag{
    width: 152px;
    height: 43px;
    background-size: 152px 86px;
}
.btn-diag:active, .btn-diag.hover{
        background-position: 0 -43px;


    }
.during{
    width: 300px;
}
.during__fig{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        width: 300;
        height: 143px;
        background-size: 300px 286px;
        -webkit-animation: duringSp 2s steps(2) 0s infinite;
                animation: duringSp 2s steps(2) 0s infinite;


    }
@-webkit-keyframes duringSp {
    0% { background-position: 0 0; }
  100% { background-position: 0 -286px}
}
@keyframes duringSp {
    0% { background-position: 0 0; }
  100% { background-position: 0 -286px}
}

.result{
    margin-bottom: -230px;

}

.result .sect__inr{
        padding: 0 20px;


    }

.result__ttl{
        margin-bottom: 0px;


    }

.result__inr{
        position: relative;
        z-index: 0;
        margin: 20px -20px 0;
        padding: 20px 10px 250px;
        background-size: 25px 25px;


    }

.result__inr:before{
        top: -75px;
        height: 75px;
        background-size: 600px 75px;


    }

.result__inr .level{
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.4;


    }

.result__inr .level span{
        font-size: 4rem;
        color: #f8688a;


    }

.result__inr .txt{
        margin-bottom: 20px;
        font-size: 1.4rem;


    }

.result__inr figure{
        margin: 0 40px 20px;
        border-radius: 20px;


    }

.btn-download{
    width: 162px;
    height: 35px;
    margin-bottom: 30px;
    background-size: 162px 70px;
}

.btn-download:active, .btn-download.hover{
        background-position: 0 -35px;


    }
.btn-retry{
    width: 135px;
    height: 40px;
    background-size: 135px 80px;
 }
.btn-retry:hover, .btn-retry.hover{
        background-position: 0 -40px;


    }

/*-------------------------------------------------------------------
 06) sp page : bonus
-------------------------------------------------------------------*/
.bonus__lead{
        display:block;
        overflow:hidden;
        text-indent:200%;
        white-space:nowrap;
        width: 90%;
        height: 0;
        padding-top: 50.32787%;
        margin: 0 auto 20px;
        background: url(../img/bonus/txt01_sp.png) 0 0 no-repeat;
        background-size: 100%;


    }

.dl-wrap{
    margin-bottom: 10px;
}

.dl-wrap dt img{
        width: 150px;


    }

.dl-wrap li{
        float: none;
        width: 182px;
        margin: 0 auto 10px;
        text-align: center;


    }

.dl-wrap li:first-child{
        margin-left: auto;


    }

.dl-wrap li span{
        font-size: 1.2rem;


    }

[class^=btn-bonus]{
    display:block;
    overflow:hidden;
    text-indent:200%;
    white-space:nowrap;
    width: 182px;
    height: 46.6px;
    background-size: 910px 93px;
}
.btn-bonus01:active{
        background-position: 0 -46.6px;


    }
.btn-bonus02{
    background-position: -182px 0;
}
.btn-bonus02:active{
        background-position: -182px -46.6px;


    }
.btn-bonus03{
    background-position: -364px 0;
}
.btn-bonus03:active{
        background-position: -364px -46.6px;


    }
.btn-bonus04{
    background-position: -546px 0;
}
.btn-bonus04:active{
        background-position: -546px -46.6px;


    }
.btn-bonus05{
    background-position: -728px 0;
}
.btn-bonus05:active{
        background-position: -728px -46.6px;


    }


}