@charset 'UTF-8';
@font-face
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset','游ゴシック', YuGothic, sans-serif;

    font-display: swap;
}

.fade-up
{
    -webkit-transition: opacity 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-transition:         transform 1s;
       -moz-transition:         transform 1s;
         -o-transition:         transform 1s; 
            transition: opacity 1s;
            transition: -webkit-transform 1s;
            transition:         transform 1s;
            transition:         transform 1s, -webkit-transform 1s;
}

.fade-in
{
    -webkit-transition: opacity 1.5s;
       -moz-transition: opacity 1.5s;
         -o-transition: opacity 1.5s; 
            transition: opacity 1.5s;
}

/* ローディング
------------------------------------------ */
#loading
{
    position: absolute;
    top: 30%; 
    left: 50%;
}

#loader-bg
{
    position: fixed;
    z-index: 1; 
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #fffef0;
}

/* イントロ
========================================== */
#about_intro
{
    background: url(../sp/images/intro/bg.jpg) no-repeat #efecec;
    background-position: center 50px;
}
#about_intro .section__title
{
    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}

.second .intro__box
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif;

    display: none;

    padding: 340px 60px 0;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.second .intro__text
{
    font-size: 28px;
    line-height: 2;

    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}

.second .intro__bold01
{
    font-size: 40px;
    font-weight: bold;
}

.second .intro__bold02
{
    font-size: 35px;
    font-weight: bold; 
    line-height: 1;
}

.second .intro__catch
{
    font-size: 35px;
    font-weight: bold; 
    line-height: 2;

    padding: 20px 0;

    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}

/* ストーリー
========================================== */
#about_story .contents
{
    padding: 120px 0 0;
}

#about_story
{
    background: url(../sp/images/story/bg.jpg) no-repeat #000;
    background-attachment: fixed; 
    background-position: center 10px;
}
#about_story .section__title
{
    color: #fff100;
    text-shadow: 0 0 3px #000;
}
#about_story .section__title span
{
    color: #fff;
}

.second .story__box
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif;

    display: none;

    padding: 0 50px 0;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);
    text-align: center; 

    color: #fff;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.second .story__text
{
    font-size: 28px;
    font-weight: bold; 
    line-height: 1.8;

    text-shadow: 0 0 3px #000;
}
.second .story__text span
{
    font-size: 34px; 

    color: #fff100;
}

.second .story__catch
{
    padding: 40px 0 100px; 

    text-align: center;
}

#about_story .thumb
{
    width: 750px;
    height: 420px;
}
#about_story .thumb img
{
    width: 100%;
}

#about_story .anime01
{
    width: 750px !important;
    height: 420px;

    -webkit-animation: kunchan 2.5s steps(30) infinite;
            animation: kunchan 2.5s steps(30) infinite; 

    background: url(../sp/images/story/anime01.jpg) no-repeat;
}

@-webkit-keyframes kunchan
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 -12600px;
    }
}

@keyframes kunchan
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 -12600px;
    }
}

#about_story .anime02
{
    width: 750px !important;
    height: 420px;

    -webkit-animation: mirai 2.5s steps(18) infinite;
            animation: mirai 2.5s steps(18) infinite; 

    background: url(../sp/images/story/anime02.jpg) no-repeat;
}

@-webkit-keyframes mirai
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 -7560px;
    }
}

@keyframes mirai
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 -7560px;
    }
}

/* キャラクター
========================================== */
#about_character
{
    background: url(../sp/images/character/bg.jpg) center top repeat-y;
}
#about_character .section__title
{
    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}

#kun
{
    border-bottom: none; 
    background: none;
}

.character__box
{
    margin: 0 auto;
}

.character__items
{
    border-bottom: solid 2px #ddd;
    background: #fff;
}

.character__items a
{
    color: #5c5c5c;
}

.character__detail
{
    padding: 40px 30px 80px;

    background: #fff;
}

.character__text
{
    line-height: 1.5;

    padding: 0 0 20px;
}

.character__text--cast
{
    font-size: 14px;
    line-height: 1.5;

    position: relative; 

    vertical-align: top;
}

.character__text--castname
{
    font-weight: bold;
    line-height: 2; 

    text-align: center;

    color: #006bc7;
}
.character__text--castname span
{
    font-size: 18px;

    padding-left: 20px; 

    color: #a0a0a0;
}

.character__img
{
    width: 100%;

    vertical-align: bottom;
}

.character__img--cast
{
    margin: 20px 0 0;
}

/* grad-wrap */
.grad-wrap
{
    position: relative;
}

.grad-btn
{
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 340px;

    width: 13px;
    height: 46px;

    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.grad-btn:after
{
    position: absolute;
    z-index: 2;

    width: 13px;
    height: 46px;

    content: '';
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out; 

    background: url(../sp/images/character/arrow.png) no-repeat center top;
}

.grad-item
{
    position: relative;

    overflow: hidden;

    height: 180px;
    /*隠した状態の高さ*/
}

.grad-item:before
{
    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 80px;

    content: '';
    /*グラデーションで隠す高さ*/

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .9)), to(white));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 50%, white 100%);
}

.grad-trigger
{
    display: none;
    /*チェックボックスは常に非表示*/
}

.grad-trigger:checked ~ .grad-btn:after
{
    position: absolute;
    z-index: 2;
    bottom: -50px;

    width: 13px;
    height: 46px;

    content: '';
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out; 
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);

    background: url(../sp/images/character/arrow.png) no-repeat center top;
}

.grad-trigger:checked ~ .grad-item
{
    height: auto;
}

.grad-trigger:checked ~ .grad-item:before
{
    display: none;
}

/* スタッフ
========================================== */
#about_staff
{
    background: url(../sp/images/staff/bg.jpg) center top repeat-y;
}
#about_staff .section__title
{
    color: #fff100;
    text-shadow: 0 0 3px #000;
}
#about_staff .section__title span
{
    color: #fff;
}

.staff__list
{
    background: #fff;
}

.staff__about
{
    padding-top: 20px;
}

.staff__items
{
    padding: 40px;

    border-top: solid 8px #006bc7;
    border-bottom: solid 1px #ddd;
}

.staff__job
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif, sans-serif;

    padding-bottom: 10px; 

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);

    color: #006bc7;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.staff__name
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif, sans-serif;
    font-size: 40px;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);

    color: #5c5c5c;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}
.staff__name span
{
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;

    padding-left: 10px; 

    color: #a0a0a0;
}

.staff__text
{
    line-height: 1.5;

    padding: 20px 0 0;
}

/* コメント
========================================== */
.second .message__box
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif;

    padding: 0 60px 600px;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);

    background: url(../images/message/bg.jpg) no-repeat right bottom; 

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.second .message__text
{
    font-size: 28px;
    line-height: 2;

    text-shadow: #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}

.second .message__name
{
    font-size: 34px;

    padding: 60px 0 0; 

    color: #006bc7;
}

/* コラム
========================================== */
#about_column .contents
{
    padding: 120px 0 120px; 

    background: url(../sp/images/column/bg.jpg) no-repeat #0093cc;
    background-position: center bottom;
}

#about_column .section__title
{
    color: #fff100;
    text-shadow: 0 0 3px #000;
}
#about_column .section__title span
{
    color: #fff;
}

.second .column__list
{
    margin-bottom: 40px; 

    text-align: center;

    border: solid #fff 2px;
    border-radius: 10px;
}

.second .column__items
{
    display: inline-block;

    width: 50%;
}

.second .column__items a
{
    font-size: 22px;

    display: inline-block; 

    width: 100%;
    padding: 15px 0;

    color: #fff;
}

.second .column__items:first-child
{
    border-right: 2px solid #fff;
}

.second .column__active a,
.second .column__items a:hover
{
    font-weight: bold; 

    color: #006bc7;
    background: rgba(255, 255, 255, .8);
}

.second .column__items a:hover
{
    opacity: 1;

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

.second .column__box
{
    display: none;

    padding: 0 50px 0;

    color: #fff;
}

.second .column__subtitle01
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif, sans-serif;
    font-size: 40px;

    padding-bottom: 40px;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);
    text-align: center; 

    text-shadow: 0 0 3px #000;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.second .column__subtitle02
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif, sans-serif;
    font-size: 28px;
    line-height: 1.5;

    padding-bottom: 20px;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);
    text-align: center; 

    color: #fff100;
    text-shadow: 0 0 3px #000;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}

.second .column__text
{
    font-size: 28px;
    line-height: 1.8;

    text-shadow: 0 0 3px #000;
}

.second .column__name
{
    font-weight: bold;

    padding: 40px 0;

    text-align: right;

    text-shadow: 0 0 3px #000;
}

.second .column__btn
{
    margin: 40px 0 0; 

    text-align: center;
}

.second .column__btn a
{
    font-weight: bold;

    position: relative; 

    display: block;

    padding: 30px 0;

    text-align: center;

    color: #006bc7;
    border: solid 4px #fff;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
}

.second .column__btn a:after
{
    position: absolute;
    top: 42px;
    right: 25px;

    width: 15px;
    height: 15px;

    content: '';
    cursor: pointer; 
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);

    border-top: 3px solid #006bc7;
    border-right: 3px solid #006bc7;
}

.fs30
{
    font-size: 32px !important;
}

/* ヒストリー
========================================== */
#about_history
{
    background: url(../sp/images/history/bg.jpg) center top repeat-y #0b54a1;
}
#about_history .section__title
{
    color: #fff100;
    text-shadow: 0 0 3px #000;
}
#about_history .section__title span
{
    color: #fff;
}

.second .history
{
    font-family: 'Noto Sans Japanese', 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', '游ゴシック', YuGothic, sans-serif, sans-serif; 

    overflow: hidden;

    padding-bottom: 80px;
}
.second .history__box
{
    font-weight: bold;

    position: relative; 

    margin-bottom: 100px;

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);
    text-align: center;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}
.second .history__img
{
    margin: 40px 0 -40px;
}
.second .history__img img
{
    width: 450px;
}
.second .history__year
{
    position: relative; 

    -webkit-transform: rotate(.05deg);
        -ms-transform: rotate(.05deg);
            transform: rotate(.05deg);
    text-align: center;

    color: #fff;

    -webkit-font-smoothing: antialiased;
    font-display: swap;
}
.second .history__year:before,
.second .history__year:after
{
    position: absolute;
    top: 20px; 

    width: 320px;
    height: 2px;

    content: '';

    background: #fff;
}
.second .history__year:before
{
    left: 0;
}
.second .history__year:after
{
    right: 0;
}
.second .history__work
{
    font-size: 48px;
    line-height: 1.3; 

    margin-bottom: 40px;

    color: #fff;
    text-shadow: 0 0 10px #004f89;
}
.second .history__work span
{
    font-size: 30px;
}
.second .history__link a
{
    font-size: 36px;

    display: block;

    width: 560px;
    height: 90px;
    margin: 0 auto;
    padding: 15px;

    text-align: center;
    letter-spacing: .1em;

    color: #fff100;
    border: 3px solid #fff100;
    text-shadow: 0 0 10px #004f89;
}
.second .history__link a:after
{
    position: absolute;

    width: 55px;
    height: 16px; 
    margin: 18px 0 0 80px;

    content: '';

    background: url(../../images/history/link-arrow.png);
}
.second .history__chara
{
    position: absolute;
}
.second .history #mirai_chara
{
    top: -120px;
    left: 20px; 

    width: 204px;
    height: 213px;

    background: url(../sp/images/history/mirai_sp.png);
}
.second .history #bakemono_chara
{
    top: -130px; 
    right: 40px;

    width: 53px;
    height: 80px;

    background: url(../../images/history/chara_bakemono.png);
}
.second .history #ookami_chara01
{
    top: -130px; 
    left: 10px;

    width: 308px;
    height: 202px;

    background: url(../../images/history/chara_ookami01.png);
}
.second .history #ookami_chara02
{
    top: -100px; 
    right: -100px;

    width: 368px;
    height: 181px;

    background: url(../../images/history/chara_ookami02.png);
}
.second .history #summerwars_chara
{
    top: -100px; 
    left: 50px;

    width: 135px;
    height: 194px;

    background: url(../../images/history/chara_summerwars.png);
}
.second .history #tokikake_chara
{
    top: 850px; 
    right: 30px;

    width: 333px;
    height: 115px;

    background: url(../images/history/chara_tokikake.png);
}