@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                      */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/


/* ========================================================

　nav（モバイルとPC共通）

=========================================================== */

#mainNav ul,
#mainNav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 標準キャレット（▼）を非表示に */
#mainNav .dropdown-toggle::after {
    display: none;
}

/*　検索ボックスエリア
----------------------------------------------------------- */
#mainNav .search form {
    position: relative;
}

#mainNav .search input {
    position: absolute;
    top: 0;
    margin-top: 0.25rem;
    border: none;
    font-weight: 300;
}

#mainNav .search form input:first-child {
    left: 0;
    max-width: 20.0rem;
    height: 4.0rem;
    padding-left: 4.0rem;
    background: rgba(255, 255, 255, 1.00) url("../images/icon_search.png") left 0.5rem center no-repeat;
}

#mainNav .search form input:last-child {
    left: 22.0rem;
    width: 8.0rem;
    height: 4.0rem;
    background-color: rgba(245, 130, 40, 1.00);
    color: rgba(255, 255, 255, 1.00);
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#mainNav .search form input:last-child:hover {
    background-color: rgba(245, 130, 40, 0.70);
}

@media only screen and (min-width: 992px) {

    #mainNav .search form {
        margin-left: 1.0rem;
        margin-right: 1.0rem;
    }

    #mainNav .search form input:first-child {
        width: 100%;
        max-width: 100%;
    }

    #mainNav .search form input:last-child {
        top: 4.25rem;
        left: inherit;
        right: 0;
        height: 3.0rem;
    }

}


/* ========================================================

　nav（モバイル）

=========================================================== */
.considering #mainNav #navbar-nav {
    display: none;
}

.considering #mainNav a {
    pointer-events: none;
}

@media only screen and (max-width: 991px) {

    #mainNav {
        padding: 0; /* 余白リセット */
    }

    /* ヘッド部分にだけ有効な背景色を設定する */
    #mainNav .wrap {
        width: 100%;
        height: 6.0rem; /* 指定しないとスクロール時に高さが変わってしまう */
        padding: 0.5rem 1.0rem;
        background-color: rgba(0, 0, 0, 0.50); /* 背景色：ブラック50％ */
        -webkit-transition: background-color 0.3s ease-in-out;
        -o-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
    }

    /* スクロールした時の処理 */
    #mainNav.navbar-shrink .wrap {
        background-color: rgba(245, 130, 40, 0.90); /* 背景色：ブランドカラー90％ */
    }

    /*　ブランドマーク
    ----------------------------------------------------------- */
    #mainNav .navbar-brand {
        width: 16.0rem;
        height: auto;
        -webkit-transition: background 0.3s ease-in-out;
        -o-transition: background 0.3s ease-in-out;
        transition: background 0.3s ease-in-out;
    }

    /* ブランドマークフルサイズ表示 */
    #mainNav .navbar-brand img {
        width: 100%;
        height: auto;
    }

    /* 通常時はブランドマーク（白）非表示 */
    #mainNav .navbar-brand img:nth-of-type(2) {
        display: none;
    }

    /* PC用ブランドマーク非表示 */
    #mainNav .navbar-brand img:nth-of-type(3) {
        display: none;
    }

    /* スクロール時はブランドマーク（カラー）非表示 */
    #mainNav.navbar-shrink .navbar-brand img:nth-of-type(1) {
        display: none;
    }

    /* スクロール時はブランドマーク（白）表示 */
    #mainNav.navbar-shrink .navbar-brand img:nth-of-type(2) {
        display: block;
    }

    /*　ハンバーガーボタン
    ----------------------------------------------------------- */
    #mainNav .navbar-toggler {
        float: right; /* 右寄せ */
        width: 5.0rem;
        height: 5.0rem;
        border: 0.2rem solid rgba(255, 255, 255, 1.00);
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.50);
        outline: none; /* タップ時のハイライト表示（枠）を非表示に */
        -webkit-transition: background-color 0.3s ease-in-out;
        -o-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
    }

    /* メニュークローズ時のアイコン「三」 */
    #mainNav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1.00)' stroke-width='3' stroke-linecap='square' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* メニューオープン時の背景色 */
    #mainNav .navbar-toggler[aria-expanded="true"] {
        background-color: rgba(250, 126, 36, 1.00);
    }

    /* メニューオープン時のアイコン「✕」 */
    #mainNav .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.00)' stroke-width='3' stroke-linecap='square' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
    }

    /*　メニューエリア
    ----------------------------------------------------------- */
    #mainNav .navbar-collapse {
        clear: both; /* ハンバーガーボタンの右寄せを念のためリセット */
        max-height: 100vh; /* フルスクリーン表示 */
        background-color: rgba(0, 0, 0, 0.70); /* 背景色：ブラック70％ */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* 惰性付きスクロール */
    }

    /*　メニューリストエリア
    ----------------------------------------------------------- */
    #mainNav #navbar-nav {
        min-height: 100vh; /* フルスクリーン表示 */
        margin: 0 1.0rem;
    }

    /* Bootstrapデフォルトの背景処理をリセット */
    #mainNav #navbar-nav .nav-item {
        background: none;
    }

    /* 最後のメニューまで見やすくするための余白（Facebookバナーのひとつ上のタグに適用） */
    #mainNav #navbar-nav > li:last-child {
        margin-bottom: 20.0rem;
    }

    /* リンク部分 */
    #mainNav #navbar-nav > li {
        margin-bottom: 0.1rem;
    }

    #mainNav .nav-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-height: 4.0rem; /* 最小高さ */
        padding: 0.5rem 3.0rem 0.5rem 2.0rem;
        background: rgba(0, 0, 0, 0.50) url("../images/caret_right.png") right 1.3rem center no-repeat; /* 背景色とキャレット */
        color: rgba(255, 255, 255, 1.00);
        line-height: 1.8rem; /* メニュー名が複数行になる場合の行間調整 */
    }

    /* リンク部分（カレント時） */
    #mainNav .nav-link.active,
    #mainNav .nav-link.current {
        background-color: rgba(250, 126, 36, 1.00);
    }

    /*　ドロップダウントグル
    ----------------------------------------------------------- */

    /* 第１階層クローズ時 */
    #mainNav .toggle[aria-expanded="false"] {
        background: rgba(0, 0, 0, 0.50) url("../images/caret_down.png") right 1.0rem center scroll no-repeat; /* 背景色とキャレット */
    }

    /* 第１階層オープン時 */
    #mainNav .toggle[aria-expanded="true"] {
        background: rgba(245, 130, 40, 1.00) url("../images/caret_down_k.png") right 1.0rem center scroll no-repeat; /* 背景色とキャレット */
        color: rgba(0, 0, 0, 1.00); /* フォントカラー変更 */
    }

    /* 第２階層オープン時 */
    #mainNav a[id*="child"].toggle[aria-expanded="true"] {
        border-bottom: 0.1rem solid rgba(245, 130, 40, 0.25); /* メニューの下にボーダーライン */
    }

    /*　ドロップダウンメニューエリア
    ----------------------------------------------------------- */

    /* Bootstrapデフォルトのボーダーラインをリセット */
    #mainNav ul.collapse {
        border: none;
    }

    /* リンク部分 */
    #mainNav ul.collapse .nav-link {
        margin-left: 1.6rem;
        font-size: 1.6rem;
    }

    /* メニューの上にボーダーライン追加 */
    #mainNav ul.collapse > li:nth-of-type(n+2) .nav-link {
        border-top: 0.1rem solid rgba(245, 130, 40, 0.25);
    }

    /* 第３階層メニューが１つだった場合はメニューの上のボーダーラインをカット */
    #mainNav ul[id*="level03"].collapse > li:first-child .nav-link {
        border-top: none;
    }

    /* クローズ時 */
    #mainNav ul.collapse .toggle[aria-expanded="false"] {
        background: rgba(0, 0, 0, 0.50) url("../images/caret_down.png") right 1.0rem center no-repeat; /* 背景色とキャレット */
    }

    /* オープン時 */
    #mainNav ul.collapse .toggle[aria-expanded="true"] {
        background: rgba(255, 255, 255, 1.00) url("../images/caret_down.png") right 1.0rem center no-repeat; /* 背景色とキャレット */
        color: rgba(250, 126, 36, 1.00);
    }

    #mainNav ul[id^="level03"] > li .nav-link {
        padding-left: 3.6rem;
        background: rgba(255, 255, 255, 0.90) url("../images/caret_right_k.png") right 1.3rem center no-repeat; /* 背景色とキャレット */
        color: rgba(68, 68, 68, 1.00); /* フォントカラー変更 */
    }

    #mainNav ul[id^="level03"] .toggle {
        background: rgba(255, 255, 255, 0.90) url("../images/caret_down.png") right 1.0rem center no-repeat !important; /* 背景色とキャレット */
    }

    #mainNav ul[id^="level03"] .toggle[aria-expanded="true"] {
        background: rgba(255, 255, 255, 1.00) url("../images/caret_down.png") right 1.0rem center no-repeat !important; /* 背景色とキャレット */
    }

    #mainNav ul[id^="level04"] > li .nav-link {
        padding-left: 5.2rem;
        background: rgba(255, 255, 255, 0.80) url("../images/caret_right_k.png") right 1.3rem center no-repeat; /* 背景色とキャレット */
    }

    /* リンク部分（カレント時） */
    #mainNav ul[id^="level03"] > li .nav-link.active,
    #mainNav ul[id^="level03"] > li .nav-link.current {
        background-color: rgba(250, 126, 36, 1.00);
    }

    /* Facebookバナー */
    #mainNav .bnr-fb {
        display: none; /* モバイル時はFacebookバナー非表示 */
    }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* ヘッド部分にだけ有効な背景色を設定する部分リセット */
    #mainNav .wrap {
        height: 8.0rem;
    }

    /*　ブランドマーク
    ----------------------------------------------------------- */
    #mainNav .navbar-brand {
        width: 24.0rem;
    }

    /*　ハンバーガーボタン
    ----------------------------------------------------------- */
    #mainNav .navbar-toggler {
        margin-top: 1.0rem;
    }

}


/* ========================================================

　nav（PC）

=========================================================== */
@media only screen and (min-width: 992px) {

    #mainNav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 20.0rem; /* 横幅 */
        height: 100vh; /* 高さ（画面に対して100％） */
        padding: 0; /* 上下左右をフィックスさせるため必須 */
        background-color: rgba(230, 230, 230, 1.00); /* 背景色 */
    }

    /* ヘッド部分にだけ有効な背景色を設定する部分リセット */
    #mainNav .wrap {
        padding: 0; /* 余白カット*/
    }

    /*　ブランドマーク
    ----------------------------------------------------------- */
    #mainNav .navbar-brand {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        width: 100%;
        height: 8.6rem;
        margin: 0; /* 上下左右をフックスさせるため必須 */
        padding: 0; /* 上下左右をフィックスさせるため必須 */
        overflow: hidden;
        -webkit-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    /* ブランドマークフルサイズ表示 */
    #mainNav .navbar-brand img {
        width: 100%;
        height: auto;
    }

    /* モバイル用ブランドマーク非表示 */
    #mainNav .navbar-brand img:nth-of-type(1),
    #mainNav .navbar-brand img:nth-of-type(2) {
        display: none;
    }

    /* PC用ブランドマーク表示 */
    #mainNav .navbar-brand img:nth-of-type(3) {
        display: block;
    }

    /*　ナビゲーションエリア
    ----------------------------------------------------------- */
    #mainNav .navbar-collapse {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        width: 100%; /* 上下左右をフィックスさせるため必須 */
        height: 100vh; /* 上下左右をフィックスさせるため必須 */
        -webkit-overflow-scrolling: touch; /* 惰性付きスクロール */
        overflow: hidden; /* これが無いと、タブレットのランドスケープのときにメニューが横揺れする */
        overflow-y: scroll;
        -ms-overflow-style: none; /* スクロールバー非表示（IE, Edge） */
        scrollbar-width: none; /* スクロールバー非表示（Firefox）※CSSバリデートでエラーとなるが影響ないのでスルー */
    }

    /* スクロールバー非表示 */
    #mainNav .navbar-collapse::-webkit-scrollbar {
        display: none;
    }

    /* メニュー部分 */
    #mainNav #navbar-nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%; /* 左右をフィックスさせるため必須 */
    }

    /* メニューを縦並びに */
    #mainNav .nav-item {
        display: block;
    }

    /* 最後のメニューまで見やすくするための余白 */
    #mainNav #navbar-nav > li:last-child {
        margin-bottom: 15.0rem;
    }


    /* リンク部分 */
    #mainNav .nav-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%; /* 横幅100％ */
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
        background: url("../images/caret_right.png") right 0.5rem center no-repeat; /* キャレット */
        color: rgba(68, 68, 68, 1.00); /* 基準フォントカラーと同じ */
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    /* 第１階層２番目以降のメニューの上にボーダーライン */
    #mainNav #navbar-nav > li:nth-of-type(n+2) > .nav-link {
        border-top: 0.1rem solid rgba(165, 165, 165, 1.00);
    }

    /* 第１階層最後のメニューの下にボーダーライン（Facebookバナーと検索ボックスがあるので、下から３番目（nth-last-child(3)）に設定） */
    #mainNav #navbar-nav > li:nth-last-child(3) > .nav-link {
        border-bottom: 0.1rem solid rgba(230, 230, 230, 1.00);
    }

    /* 第１階層最後のメニューオープン時 */
    #mainNav #navbar-nav > li:nth-last-child(3) .toggle[aria-expanded="true"].nav-link {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00);
    }

    /* 第１階層最後のメニューの第２階層 */
    #mainNav #navbar-nav > li:nth-last-child(3) .collapse .nav-link {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00);
    }

    /* マウスオーバー時（ドロップダウンではないメニュー） */
    #mainNav .nav-link:hover {
        color: rgba(250, 126, 36, 1.00); /* 基準リンクカラーと同じ */
    }

    /* リンク部分（カレント時） */
    #mainNav .nav-link.active,
    #mainNav .nav-link.current,
    #mainNav .nav-link.active:hover,
    #mainNav .nav-link.current:hover {
        color: rgba(250, 126, 36, 1.00); /* 基準リンクカラーと同じ */
        pointer-events: none;
    }

    /*　ドロップダウントグル
    ----------------------------------------------------------- */

    /* １階層目クローズ時 */
    #mainNav a[id*="dropdown"].toggle[aria-expanded="false"] {
        border-bottom: 0.1rem solid rgba(230, 230, 230, 1.00); /* メニューの下にボーダーライン追加（見えない） */
        background: url("../images/caret_down.png") right 0.3rem center no-repeat; /* キャレット（下向き）*/
    }

    /* １階層目マウスオーバー時 */
    #mainNav a[id*="dropdown"].toggle[aria-expanded="false"]:hover {
        border-bottom: 0.1rem solid rgba(255, 255, 255, 1.00); /* メニューの下にボーダーライン追加（見えない） */
        background-color: rgba(255, 255, 255, 1.00); /* 背景色 */
    }

    /* １階層目オープン時 */
    #mainNav a[id*="dropdown"].toggle[aria-expanded="true"] {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00); /* メニューの下にボーダーライン追加（見える） */
        background: rgba(255, 255, 255, 1.00) url("../images/caret_down.png") right 0.3rem center no-repeat; /* 背景色とキャレット */
        color: rgba(250, 126, 36, 1.00); /* 基準リンクカラーと同じ */
    }

    /* ２階層目クローズ時 */
    #mainNav a[id*="child"].toggle[aria-expanded="false"] {
        border-bottom: 0.1rem solid rgba(255, 255, 255, 1.00); /* メニューの下にボーダーライン追加（見えない） */
    }

    /* ２階層目オープン時 */
    #mainNav a[id*="child"].toggle[aria-expanded="true"] {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00); /* メニューの下にボーダーライン追加（見える） */
    }

    /* ３階層目クローズ時 */
    #mainNav a[id*="grand"].toggle[aria-expanded="false"] {
        border-bottom: 0.1rem solid rgba(255, 255, 255, 1.00); /* メニューの下にボーダーライン追加（見えない） */
    }

    /* ３階層目マウスオーバー時 */
    #mainNav a[id*="grand"].toggle:hover {
        background: url("../images/caret_down.png") right 1.0rem center no-repeat !important; /* キャレット（下向き）*/
    }

    /* ３階層目オープン時 */
    #mainNav a[id*="grand"].toggle[aria-expanded="true"] {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00); /* メニューの下にボーダーライン追加（見える） */
    }

    /*　ドロップダウンメニューエリア
    ----------------------------------------------------------- */
    #mainNav ul.collapse {
        position: relative;
        top: 0;
        height: auto;
        margin: 0; /* 上下左右をフィックスさせるため必須 */
        padding: 0; /* 上下左右をフィックスさせるため必須 */
        border: none; /* Bootstrapデフォルトのボーダーをリセット */
        border-radius: 0; /* Bootstrapデフォルトの角丸をリセット */
        background-color: rgba(255, 255, 255, 1.00);
        /* 左からスライドインさせるアニメーションの設定 */
        -webkit-animation: slideMenu 0.35s ease-in-out; /* 左からスライドイン */
        animation: slideMenu 0.35s ease-in-out;
    }

    /* Bootstrapデフォルトのcollapse開閉速度をリセット */
    #mainNav .collapsing {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    /* メニュー部分 */
    #mainNav ul.collapse .nav-item {
        margin-left: 0.75rem;
    }

    /* リンク部分 */
    #mainNav ul.collapse .nav-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.75rem 2.0rem 0.5rem 0;
        background: url("../images/caret_right.png") right 0.5rem center no-repeat; /* キャレット */
        font-size: 1.45rem; /* Bootstrapのデフォルトのフォントサイズをリセット */
        line-height: 1.8rem;
        letter-spacing: 0;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    /* メニューの上にボーダーライン追加 */
    #mainNav ul.collapse > li:nth-of-type(n+2) .nav-link {
        border-top: 0.1rem solid rgba(210, 210, 210, 1.00);
    }

    /* 最後のメニューの下にボーダーライン追加 */
    #mainNav #navbar-nav > li:last-child ul.collapse > li:last-child .nav-link {
        border-bottom: 0.1rem solid rgba(210, 210, 210, 1.00);
    }

    /* 第３階層メニューが１つだった場合はメニューの上のボーダーラインをカット */
    #mainNav ul[id*="level03"].collapse > li:first-child .nav-link {
        border-top: none;
    }

    /* 第２階層マウスオーバー時 */
    #mainNav ul.collapse .nav-link:hover {
        background: url("../images/caret_right.png") right 0.5rem center no-repeat; /* キャレット */
    }

    /* 第２階層クローズ時 */
    #mainNav ul.collapse .toggle[aria-expanded="false"] {
        background: url("../images/caret_down.png") right 0.3rem center no-repeat; /* キャレット */
    }

    /* 第２階層オープン時 */
    #mainNav ul.collapse .toggle[aria-expanded="true"] {
        background: url("../images/caret_down.png") right 0.3rem center no-repeat; /* キャレット */
        color: rgba(250, 126, 36, 1.00);
    }

    /* 第３階層メニュー */
    #mainNav ul[id^="level03"] > li .nav-link {
        background: rgba(255, 255, 255, 0.90) url("../images/caret_right_k.png") right 0.5rem center no-repeat; /* 背景色とキャレット */
    }

    /* 第３階層マウスオーバー時 */
    #mainNav ul[id^="level03"] > li .nav-link:hover {
        background: rgba(255, 255, 255, 1.00) url("../images/caret_right.png") right 0.5rem center no-repeat; /* 背景色とキャレット（右に10px移動） */
    }

    /* 第３階層カレント時 */
    #mainNav ul[id^="level03"] > li .nav-link.active,
    #mainNav ul[id^="level03"] > li .nav-link.current {
        background: rgba(255, 255, 255, 1.00) url("../images/caret_right.png") right 0.5rem center no-repeat; /* 背景色とキャレット（右に10px移動） */
    }

    /* 第４階層メニュー */
    #mainNav ul[id^="level04"] > li:first-child .nav-link {
        border-top: none;
    }

    /* Facebookバナー */
    #mainNav .bnr-fb {
        width: 18.0rem;
        height: auto;
        margin: 1.0rem auto;
        overflow: hidden;
    }

    #mainNav .bnr-fb img {
        width: 100%;
        height: auto;
    }

    /* カレント時にトグルメニューをオープンのままにする */
    #mainNav ul.collapse.open {
        display: block;
    }

}

/* スライドインメニューのアニメーション */
@-webkit-keyframes slideMenu {

    0% {
        opacity: 0;
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

}

@keyframes slideMenu {

    0% {
        opacity: 0;
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        opacity: 1.0;
        -webkit-transform: translateX(0);
        transform: translateX(0);


    }

}



/* ---- End of file --------------------------------------- */