
/* 公開側 CSS */


@charset "utf-8";

/* ------------------------------------------------ */
/* 基本・汎用
/* ------------------------------------------------ */

    html {
        height:    100%;
        font-size: calc(14px + 0.20vw);
    }

    body {
        height:      100%;
        /* モノスペースフォント *
        font-family: Consolas, 'Courier New', Courier, Monaco, monospace; /**/
        /* プロポーショナルフォント */
        font-family: Verdana, Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; /**/
        font-size:   1rem;
        /* フォントのエイリアスを調整 */
        -webkit-font-smoothing:  antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .sentence {
        display:     inline-block;
        white-space: nowrap;
    }

    .pink   { color: #E8446D; }
    .orange { color: #FF7F00; }

    .bg-beige  { background-color: #F9FFC9; }
    .bg-green  { background-color: #93C646; }
    .bg-orange { background-color: #EE7C1A; }


  /* CSSアニメーション */
    .mt-fadein-up {
        opacity:   0.0;
        transform: translate(0, 15px);
    }

    .mt-fadein-left {
        opacity:   0.0;
        transform: translate(-30px, 0);
    }

    .mt-fadein-right {
        opacity:   0.0;
        transform: translate(30px, 0);
    }

    .mt-fadein-up,
    .mt-fadein-left,
    .mt-fadein-right {
        /* property, duration, delay, timing-function */
        transition:         all 0.6s 0.4s ease;
        -webkit-transition: all 0.6s 0.4s ease;
        -moz-transition:    all 0.6s 0.4s ease;
        -ms-transition:     all 0.6s 0.4s ease;
        -o-transition:      all 0.6s 0.4s ease;
    }

    .delay {
        transition:         all 0.6s 0.8s ease;
        -webkit-transition: all 0.6s 0.8s ease;
        -moz-transition:    all 0.6s 0.8s ease;
        -ms-transition:     all 0.6s 0.8s ease;
        -o-transition:      all 0.6s 0.8s ease;
    }

    .run {
        opacity:   1.0             !important;
        transform: translate(0, 0) !important;
    }


/* ------------------------------------------------ */
/* ラッパ
/* ------------------------------------------------ */

    div#wrapper {
        height: 100%;
    }


/* ------------------------------------------------ */
/* ヘッダ
/* ------------------------------------------------ */

    div#header {
    }

  /* ナビゲーションバー */

    .navbar {
        background: rgba(255, 255, 255, 0.7);
    }

    .navbar-brand {
        height:  60px;
        margin:  4px 0;
        padding: 0px;
    }

    .navbar-brand img {
        height: 100%;
    }

    ul.navbar-nav {
        width: 100%;
    }

    ul.navbar-nav li {
        display:        table-cell;
        width:          1%;
        padding:        4px;
        color:          #333333;
        text-align:     center;
        vertical-align: middle;
        cursor:         pointer;
    }

    .nav>li>a {
        padding:   10px 2px;
        color:     #666666;
        font-size: 0.9rem;
    }

    .nav>li>a:focus,
    .nav>li>a:hover {
        text-decoration:  none;
        background-color: #F0F0F0;
    }

    .fix-links a {
        display:          inline-block;
        width:            180px;
        margin:           15px 4px 20px;
        padding:          2px;
        background-color: #E57B2F;
        color:            #FFFFFF;
        font-size:        0.9rem;
        text-align:       center;
    }


/* ------------------------------------------------ */
/* フッタ
/* ------------------------------------------------ */

    div#footer {
    }

    .copyright {
        padding:    15px;
        color:      #666666;
        font-size:  0.75rem;
        text-align: center;
    }

/* ------------------------------------------------ */
/* コンテンツ
/* ------------------------------------------------ */

    div#contents {
        min-height:     calc(100% - 90px);
        padding-top:    0px;
        padding-bottom: 20px;
    }

  /* メインビジュアル */
    .main-visual {
        width:      100%;
        max-height: 800px;
        overflow:   hidden;
    }

    .main-visual img {
        width: 100%;
    }


/* ------------------------------------------------ */
/* レスポンシブ対応
/* ------------------------------------------------ */

    /* 横幅 991px以下 */
    @media screen and (max-width: 991px) {
        html {
            padding-top: 49px;
        }

        div#contents {
            min-height: calc(100% - 303px);
        }

        .navbar-brand {
            height:  40px;
        }

        .navbar-toggle {
            margin-right: 0;
            padding:      9px 5px;
            border:       none;
        }

        .navbar-toggle .icon-bar {
            background-color: #666666;
        }

        .navbar-fixed-top {
            border-color: #CCCCCC;
        }

        .navbar-collapse {
            padding-left:  0;
            padding-right: 0;
            border-color:  #D0D0D0;
        }
    }

    /* 横幅 768px以下 */
    @media screen and (max-width: 768px) {
    }

    /* 横幅 425px以下 */
    @media screen and (max-width: 425px) {
    }

    /* 横幅 320px以下 */
    @media screen and (max-width: 320px) {
    }


/* ------------------------------------------------ */
/* フィルタ
/* ------------------------------------------------ */

    div#filter {
        display:    none;
        position:   fixed;
        top:        0;
        left:       0;
        z-index:    9999;
        width:      100%;
        height:     100%;
        background: rgba(0, 0, 0, 0.2);
    }


/* ------------------------------------------------ */
/* スピナー
/* ------------------------------------------------ */

    .spinner {
        position:          absolute;
        top:               50%;
        left:              50%;
        width:             1em;
        height:            1em;
        margin:            -0.5em auto;
        border-radius:     50%;
        font-size:         10px;
        text-indent:       -9999em;
        animation:         spinner 1.0s infinite ease;
        -webkit-animation: spinner 1.0s infinite ease;
        transform:         translateZ(0);
        -webkit-transform: translateZ(0);
        -ms-transform:     translateZ(0);
    }

    @-webkit-keyframes spinner {
        0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }
        12.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); }
        25%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        37.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        50%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        62.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        75%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        87.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; }
    }

    @keyframes spinner {
        0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }
        12.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); }
        25%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        37.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        50%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        62.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        75%      { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
        87.5%    { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; }
    }
