@charset "utf-8";

/*各cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*日本地図用css（list_chintai.html用）*/
/*@import url(map.css);*/

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html, body, .containerJ {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    color: #2a3439; /*全体の文字色*/
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
    font-size: 16px; /*文字サイズ*/
    line-height: 2; /*行間*/
    background: #fff; /*背景色*/
    -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form, figure, form {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    font-weight: normal;
}

ul {
    list-style-type: none;
}

ol {
    padding-left: 40px;
    padding-bottom: 15px;
}

img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    font-size: 100%;
    border-spacing: 0;
}

video {
    max-width: 100%;
}

iframe {
    width: 100%;
}

.containerJ {
    margin-left: 2%;
    margin-right: 2%;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
    color: #2a3439; /*リンクテキストの色*/
    transition: 0.2s; /*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}

    a:hover {
        color: #5bae88; /*マウスオン時の文字色*/
        text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
    }

/*inner
---------------------------------------------------------------------------*/
.inner {
    max-width: 1200px; /*サイトの最大幅*/
    margin: 0 auto;
    padding-left: 1% !important;
    padding-right: 1% !important;
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    height: 70px;
    background: #5bae88;
    position: relative;
}
/*トップページのヘッダーと、スライドショーブロック共通設定。他の端末サイズでの再設定が複数あるので変更する際は注意。*/
#top header, #mainimg {
    height: 700px; /*スライドショー表示領域の高さの設定。*/
}
/*ロゴ画像（※トップページ以外）*/
header #logo {
    width: 200px;
    padding-top: 15px;
}
/*トップページのロゴ画像*/
#top #logo img {
    position: fixed; /*スクロールしても固定表示させる設定。*/
    left: 10%; /*左から10%の場所に配置。*/
    top: 50px; /*上から50pxの場所に配置。*/
    z-index: 1;
    width: 250px; /*画像の幅*/
}

/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
/*.dropdown:hover .dropdown-menu {
	display: block;
}*/

#nav_menu_main .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    background-color: greenyellow;
    color: #333;
}

.navbar-custom .navbar-brand {
    color: #333;
}

#menubar {
    position: relative;
    z-index: 10;
    text-align: center; /*文字を中央に*/
    background: #fff; /*背景色*/
    border-bottom: 1px solid #2a3439; /*下線の幅、線種、色*/
}

#nav_menu > ul {
    overflow: hidden;
}
/*メニュー１個あたりの設定*/
#menubar ul li {
    float: left; /*左に回り込み*/
    width: 20%; /*幅。今回は５個メニューがあるので100÷5=20*/
}

#nav_menu ul li a {
    text-decoration: none;
    display: block;
    height: 63px; /*メニューブロックの高さ*/
    padding-top: 12px; /*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。*/
}

/*飾り文字*/
#nav_menu ul li span {
    display: block;
    font-size: 10px; /*文字サイズ*/
    color: #999; /*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s {
    display: none;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
    display: none;
}

/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#nav_menu ul.ddmenu {
    position: absolute;
    visibility: hidden;
    padding: 0;
    height: auto;
    white-space: nowrap;
    /*width: 400px;*/ /*ブロックの幅*/
    border-radius: 10px; /*角丸のサイズ*/
    background: #5bae88; /*背景色*/
    padding: 10px; /*ブロック内の余白*/
    font-size: 13px; /*文字サイズ*/
    text-align: left; /*文字を左よせ*/
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事。0.2は20%透明度。*/
}

    #nav_menu ul.ddmenu::before {
        content: "▲";
        font-size: 15px;
        color: #5bae88;
        position: absolute;
        top: -18px;
        left: 27%;
    }
    /*メニュー１個あたりの設定*/
    #nav_menu ul.ddmenu li {
        /*width: 50%;*/ /*幅。２列なので50%。*/
        float: left; /*左に回り込み*/
    }

        #nav_menu ul.ddmenu li a {
            transition: 0s;
            background: none;
            height: auto;
            width: 100%;
            /*color: #fff;*/ /*文字色*/
            opacity: 0.7; /*透明度70%*/
            padding: 0px 5px; /*上下、左右への余白*/
        }
            /*マウスオン時*/
            #nav_menu ul.ddmenu li a:hover {
                opacity: 1; /*100%表示にする*/
            }

/*ドロップダウンメニュー用


----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu_right {
    position: absolute;
    visibility: hidden;
    padding: 0;
    height: auto;
    width: 400px; /*ブロックの幅*/
    border-radius: 10px; /*角丸のサイズ*/
    background: #5bae88; /*背景色*/
    padding: 10px; /*ブロック内の余白*/
    font-size: 13px; /*文字サイズ*/
    text-align: left; /*文字を左よせ*/
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事。0.2は20%透明度。*/
}

    #menubar ul.ddmenu_right::before {
        content: "▲";
        font-size: 15px;
        color: #5bae88;
        position: absolute;
        top: -18px;
        left: 27%;
    }
    /*メニュー１個あたりの設定*/
    #menubar ul.ddmenu_right li {
        width: 50%; /*幅。２列なので50%。*/
        float: left; /*左に回り込み*/
    }

        #menubar ul.ddmenu_right li a {
            transition: 0s;
            background: none;
            height: auto;
            width: 100%;
            color: #fff; /*文字色*/
            opacity: 0.7; /*透明度70%*/
            padding: 0px 5px; /*上下、左右への余白*/
        }
            /*マウスオン時*/
            #menubar ul.ddmenu_right li a:hover {
                opacity: 1; /*100%表示にする*/
            }

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos {
    position: fixed;
    width: 100%;
    top: 0px;
    background: #fff; /*背景色（古いブラウザ用）*/
    background: rgba(255,255,255,0.95); /*背景色。255,255,255は白の事で0.95は透明度。*/
}

body.is-fixed-menu #contents {
    margin-top: 75px;
}
/*※以下の２ブロックのスタイルの中身は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed #menubar.nav-fix-pos {
    position: fixed;
    width: 100%;
    top: 0px;
    background: #fff; /*背景色（古いブラウザ用）*/
    background: rgba(255,255,255,0.95); /*背景色。255,255,255は白の事で0.95は透明度。*/
}

body.is-fixed #contents {
    margin-top: 75px;
}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #fff; /*背景色*/
    padding: 40px 0px; /*上下、左右へのブロック内の余白*/
}
    /*contentsの中にあるinner*/
    #contents .inner {
        padding: 40px 0px; /*上下、左右へのブロック内の余白*/
    }
/*h2タグ*/
/*#contents h2 {
	clear: both;
	margin-bottom: 20px;
	line-height: 1.5;
	font-size: 40px;	/*文字サイズ*/
text-align: center; /*文字をセンタリング*/
}

*/
/*h2タグにclass="type1"を指定した場合*/
#contents h2.type1 {
    background: #b0dcfa; /*背景色（古いブラウザ用）*/
    background: url(../images/midashi2.jpg) no-repeat center center/cover; /*背景画像の読み込み*/
    padding: 10px 0px; /*上下、左右へのボックス内の余白*/
    font-weight: bold;
    color: #fff;
    -webkit-text-stroke-color: #666;
    -webkit-text-stroke-width: 1px;
    /*font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';*/
}
/*h2タグのspan（装飾用）タグ*/
#contents h2 span {
    display: block;
    font-size: 14px; /*文字サイズ*/
    color: #999; /*文字色*/
    letter-spacing: 0.3em; /*文字間隔を広くとる設定*/
}
/*h3タグ*/
#contents h3 {
    clear: both;
    margin-bottom: 20px;
    font-size: 20px; /*文字サイズ*/
    border-bottom: 1px solid #ccc;
}
    /*h3タグの１文字目*/
    #contents h3::first-letter {
        border-left: 3px solid #5bae88; /*左側の線の幅、線種、色*/
        padding-left: 20px; /*線と文字との余白*/
    }
/*段落タグ*/
#contents p {
    padding: 0 20px 20px;
}

#contents h2 + p,
#contents h3 + p {
    margin-top: -10px;
}
/*section同士の余白*/
/*#contents section + section {
	margin-top: 40px;
}*/

/*mainコンテンツ
---------------------------------------------------------------------------*/
/*mainブロック*/
.main {
    float: left; /*左に回り込み*/
    /*width: 75%;*/ /*メインコンテンツの幅*/
}

/*求人一覧ページの各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list {
    position: relative;
    overflow: hidden;
    padding: 30px; /*ボックス内の余白*/
    padding-bottom: 5px; /*ボックス内の余白*/
    border: 1px solid #999; /*枠線の幅、線種、色*/
    margin-bottom: 50px; /*ボックス間の余白*/
    box-shadow: 2px 2px 10px rgba(0,0,0,0.15); /*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.15は透明度15%の事。*/
}



    /*ボックス内のh4タグ設定*/
    .list h4 {
        font-size: 28px; /*文字サイズ*/
        color: #5bae88; /*文字色*/
    }

        .list h4 a {
            color: #5bae88; /*リンクテキストの文字色*/
        }
    /*ボックス内のp(段落)タグ設定*/
    .list p {
        padding: 0px 0px 10px !important; /*上、左右、下への余白*/
    }


/*求人一覧ページの「詳細を見る・応募する」ボタン
---------------------------------------------------------------------------*/
a.btn {
    display: block;
    text-decoration: none;
    background: #5bae88; /*背景色（古いブラウザ用）*/
    background: linear-gradient(#72dbab, #5bae88); /*グラデーション*/
    color: #fff; /*文字色*/
    font-size: 20px; /*文字サイズ*/
    text-align: center; /*文字をセンタリング*/
    padding: 10px; /*ボタン内の余白*/
    border-radius: 4px; /*角丸のサイズ*/
    letter-spacing: 0.2em; /*文字間隔を広くとる設定*/
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /*ボックスの影。右に、下に、広げる幅、0,0,0は黒の事で0.3は色が30%ついた状態。*/
    border: 1px solid #5bae88; /*枠線の幅、線種、色*/
}
/*マウスオン時*/
a:hover.btn {
    box-shadow: none;
    background: #fff; /*背景色*/
    color: #5bae88; /*文字色*/
}

/*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
/*ボックス全体を囲むulタグへの設定*/
.list2 {
    padding-bottom: 50px;
    overflow: hidden;
}
    /*各ボックスの設定*/
    .list2 li {
        float: left; /*左に回り込み*/
        width: 24%; /*幅*/
        margin: 10px 0.5%; /*上下、左右へのボックスの外側へ空けるスペース*/
        line-height: 1.5; /*行間*/
        position: relative;
    }

    /*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
    .list2 .img {
        height: 100%; /*高さ*/
        background: #fff; /*背景色*/
        float: right; /*右に回り込み*/
        border-radius: 3px; /*角丸のサイズ*/
    }
    /*件数のテキスト。※list2内でspanタグで囲った場合。*/
    .list2 span {
        font-size: 12px; /*文字サイズ*/
        position: absolute;
        bottom: 15px; /*下から15pxの場所に配置*/
        right: 110px; /*右から110pxの場所に配置*/
    }

/*subコンテンツ
---------------------------------------------------------------------------*/
/*subブロック*/
.sub {
    float: right; /*右に回り込み*/
    /*width: 22%;*/ /*サブコンテンツの幅*/
}
    /*subコンテンツ内のh2タグ設定*/
    .sub h2 {
        margin-bottom: 0 !important;
        font-size: 16px !important; /*文字サイズ*/
        padding: 10px; /*ボックス内の余白*/
        border: 1px solid #dcdcdc; /*メニューの線の幅、線種、色*/
        color: #333 !important;
    }
    /*subコンテンツ内の段落タグ設定*/
    .sub p {
        margin: 0 !important;
        padding: 10px !important;
    }

    /*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/
    /*メニュー全体の設定*/
    .sub ul.submenu {
        margin-bottom: 20px; /*メニューブロックの下に空けるスペース*/
        border-top: solid 1px #dcdcdc; /*上の線の線種、幅、色*/
    }
        /*メニュー１個ごとの設定*/
        .sub ul.submenu li a {
            text-decoration: none;
            display: block;
            padding: 5px 10px; /*メニュー内の余白。上下、左右への設定。*/
            border-bottom: solid 1px #dcdcdc; /*下の線の線種、幅、色*/
            border-left: solid 1px #dcdcdc; /*左の線の線種、幅、色*/
            border-right: solid 1px #dcdcdc; /*右の線の線種、幅、色*/
        }
            /*マウスオン時の背景色*/
            .sub ul.submenu li a:hover {
                background: #f4f4f4; /*背景色*/
            }
    /*h2直下にsubmenuが続いた場合のみ、submenuの上の線を消す設定*/
    .sub h2 + ul.submenu {
        border-top: none;
    }

    /*subコンテンツ内のbox1
---------------------------------------------------------------------------*/
    .sub .boxsearch {
        overflow: hidden;
        padding: 10px; /*ボックス内の余白*/
        margin-bottom: 20px; /*ボックスの下に空けるスペース*/
        border: solid 1px #dcdcdc; /*線の線種、幅、色*/
        box-shadow: 0px 0px 20px rgba(0,0,0,0.1) inset; /*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒の事で0.1は透明度10%の事。insetは内側への影、という意味。*/
    }
    /*h2直下にbox1が続いた場合のみ、box1の上の線を消す設定*/
    .sub h2 + .box1 {
        border-top: none;
    }
    /*box1内のサブメニュー*/
    .sub ul.submenu {
        margin-bottom: 0;
    }

    /*subコンテンツ内のlist-subボックス
---------------------------------------------------------------------------*/
    /*ボックス１個あたりの設定*/
    .sub .list-sub {
        position: relative;
        overflow: hidden;
        border-left: 1px solid #dcdcdc; /*左の線の線種、幅、色*/
        border-right: 1px solid #dcdcdc; /*右の線の線種、幅、色*/
        border-bottom: 1px solid #dcdcdc; /*下の線の線種、幅、色*/
        line-height: 1.5; /*行間を少し狭くする。基本となる値は一番上のbodyにあります。*/
        font-size: 12px; /*文字サイズ*/
    }

        .sub .list-sub a {
            display: block;
            text-decoration: none;
            overflow: hidden;
            padding: 5px; /*ボックス内の余白*/
        }
            /*マウスオン時のボックス*/
            .sub .list-sub a:hover {
                background: #f4f4f4; /*背景色*/
            }
            /*h4タグ*/
            .sub .list-sub a h4 {
                font-weight: bold; /*太字にする設定*/
                font-size: 16px; /*文字サイズ*/
            }
        /*段落(p)タグ*/
        .sub .list-sub p {
            padding: 0 !important;
        }
        /*画像*/
        .sub .list-sub figure {
            width: 30%; /*画像の幅*/
            float: left; /*左に回り込み*/
            margin-right: 5px; /*画像右側に空ける余白*/
        }

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option3、と、newアイコン共通*/
.option1, .option2, .option3, .iconNew {
    font-size: 12px; /*文字サイズ*/
    text-align: center;
    display: block;
    width: 80px; /*幅*/
    line-height: 30px; /*高さ*/
    /*position: absolute;
	right: 40px;*/ /*右から40pxの場所に配置*/
    /*top: 0px;*/ /*上から0pxの場所に配置*/
    float: right;
}
/*subコンテンツ内で使う場合の追加（変更）設定*/
.sub .option1, .sub .option2, .sub .option3, .sub .iconNew {
    font-size: 10px; /*文字サイズ*/
    line-height: 16px; /*行間*/
    right: 0px; /*右から0pxの場所に配置*/
    transform: rotate(45deg) translate(22px,-10px); /*45度回転、右へ,下へ(マイナス設定なので上へ向けての指定)の移動距離*/
}
/*option1*/
.option1 {
    color: #FFF; /*文字色*/
    background: #f83d72; /*背景色*/
}
/*option2*/
.option2 {
    color: #000; /*文字色*/
    background: #ffd200; /*背景色*/
}
/*option3*/
.option3 {
    color: #FFF; /*文字色*/
    background: #999; /*背景色*/
}
/*new*/
.iconNew {
    color: #FFF; /*文字色*/
    background: #F00; /*背景色*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
    clear: both;
    /*position: relative;
	z-index: 1;*/
    font-size: 12px;
    background: #39ADB4;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

    footer a {
        color: #fff;
    }

        footer a:hover {
            color: #fff;
        }

    footer .pr {
        display: block;
        font-size: 80%;
    }

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
    color: black;
    overflow: hidden;
    padding: 20px 0; /*上下、左右へのボックス内の余白*/
    /*background: url(images/footer_logo.png) no-repeat 98% center/18%;*/
}

    #footermenu a {
        text-decoration: none;
        opacity: 0.7; /*透明度。70%の色がついた状態。*/
    }

        #footermenu a:hover {
            opacity: 1;
        }
    /*１行分の設定*/
    #footermenu ul {
        float: left; /*左に回り込み*/
        width: 18%; /*幅*/
        padding-right: 1%;
        padding-left: 1%;
        text-align: left;
        line-height: 1.7;
    }
    /*見出し*/
    #footermenu li.title, #footermenu li.title a {
        opacity: 1; /*透明度。100%色がついた状態。*/
        font-size: 14px; /*文字サイズ*/
    }

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
    clear: both;
    text-align: center;
    background: #666; /*背景色*/
}

    #copyright a {
        text-decoration: none;
    }

        #copyright a:hover {
            color: #666;
        }

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック*/
#new dl {
    background: #eee; /*背景色*/
    padding: 20px; /*ブロック内の余白*/
    border-radius: 4px; /*角丸のサイズ*/
}
/*日付設定*/
#new dt {
    float: left;
    width: 9em; /*幅*/
    color: #5bae88; /*文字色*/
    letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
    padding-left: 9em;
}

/*tbllayout設定
---------------------------------------------------------------------------*/
/*tbllayoutテーブル*/
.tbllayout {
    width: 100%;
    margin: 0 0 20px;
}

    .tbllayout tbody {
        border-color: blue;
    }

    .tbllayout .fig {
        width: 30%;
    }




.tblicon {
    width: 100%;
    height: auto;
}




/*よく頂く質問
---------------------------------------------------------------------------*/
/*外側ブロック*/
.faq {
    padding: 0px 20px; /*上下、左右への余白*/
}
    /*質問*/
    .faq dt {
        color: #5bae88; /*文字色*/
        font-weight: bold; /*太字にする設定*/
        background: url(../images/faq_q.png) no-repeat left center; /*背景アイコン*/
        padding-left: 30px; /*背景アイコンに重ならないよう左に余白を作る*/
    }
    /*回答*/
    .faq dd {
        background: url(../images/faq_a.png) no-repeat left top; /*背景アイコン*/
        padding-left: 30px; /*背景アイコンに重ならないよう左に余白を作る*/
        border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
        margin-bottom: 20px; /*ボックスの下側（外側）に空けるスペース*/
        padding-bottom: 20px; /*ボックス内の下側に空けるスペース*/
    }

/*inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
    padding: 5px 10px; /*上下、左右へのボックス内の余白*/
    border: 1px solid #ccc; /*枠線の幅、線種、色*/
    font-size: 20px; /*文字サイズ*/
    border-radius: 3px; /*角丸のサイズ*/
    background: #eee; /*背景色*/
}
    /*マウスオン時の設定*/
    #contents input[type="submit"].btn:hover,
    #contents input[type="button"].btn:hover,
    #contents input[type="reset"].btn:hover {
        border: 1px solid #999; /*枠線の幅、線種、色*/
        background: #fff; /*背景色*/
    }

/*NEWアイコン
---------------------------------------------------------------------------*/
.newicon {
    background: #F00; /*背景色*/
    color: #FFF; /*文字色*/
    font-size: 70%; /*文字サイズ*/
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align: text-top;
}

/*UPアイコン
---------------------------------------------------------------------------*/
.upicon {
    background: #0072ff; /*背景色*/
    color: #FFF; /*文字色*/
    font-size: 70%;
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align: text-top;
}

/*ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link {
    display: block;
    margin-top: -100px;
    padding-top: 100px;
}

/*ページの上部へボタン「↑」設定
---------------------------------------------------------------------------*/
@keyframes scroll {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body .nav-fix-pos-pagetop a {
    display: none;
}

body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    width: 50px; /*幅*/
    line-height: 50px; /*高さ*/
    z-index: 1;
    position: fixed;
    bottom: 20px; /*下から20pxの場所に配置*/
    right: 3%; /*右から3%の場所に配置*/
    background: #666; /*背景色（古いブラウザ用）*/
    background: rgba(0,0,0,0.6); /*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
    color: #fff; /*文字色*/
    border: 1px solid #fff; /*枠線の幅、線種、色*/
    animation-name: scroll; /*上のアニメーションで指定しているkeyframesの名前（scroll）*/
    animation-duration: 1S; /*アニメーションの実行時間*/
    animation-fill-mode: forwards; /*アニメーションの完了後、最後のキーフレームを維持する*/
}
    /*マウスオン時*/
    body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
        background: #999; /*背景色*/
    }

/*その他
---------------------------------------------------------------------------*/
.look {
    background: #ccc;
    padding: 5px 10px;
    border-radius: 4px;
}

.mb15, .mb1em {
    margin-bottom: 15px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.p0 {
    padding: 0 !important;
}

.clear {
    clear: both;
}

ul.disc {
    padding: 0em 25px 15px;
    list-style: disc;
}

.color1, .color1 a {
    color: #5bae88 !important;
}

.pr {
    font-size: 10px;
}

.wl {
    width: 96%;
}

.ws {
    width: 50%;
}

.c {
    text-align: center !important;
}

.r {
    text-align: right !important;
}

.l {
    text-align: left !important;
}

.w50 {
    overflow: hidden;
    width: 50%;
}

.fl {
    float: left;
}

img.fl {
    float: left;
    width: 30%;
    margin-right: 20px;
    margin-bottom: 20px;
}

.fr {
    float: right;
}

img.fr {
    float: right;
    width: 30%;
    margin-left: 20px;
    margin-bottom: 20px;
}

.photo {
    padding: 10px;
    background: #fff;
    border: 5px solid #fff;
    box-shadow: 2px 4px 5px rgba(0,0,0,0.2);
}

.big1 {
    font-size: 22px;
}

.sub .big1 {
    font-size: 12px;
}

.mini1 {
    font-size: 11px;
    display: inline-block;
    line-height: 1.5;
}

.sh {
    display: none;
}

.date {
    text-align: right;
    color: #999;
    font-size: 11px;
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------
※ここから数ブロック（420px以下環境まで）は、スライドショー表示領域の高さとロゴサイズの再設定です。
面倒ですができるだけ綺麗に表示できるよう細かく設定して下さい。
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*画面幅1500px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1500px) {

    #top header, #mainimg {
        height: 900px;
    }
}

/*画面幅2000px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:2000px) {

    #top header, #mainimg {
        height: 1200px;
    }
}

/*画面幅1200px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {

    #top header, #mainimg {
        height: 600px;
    }
}

/*画面幅1000px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {

    #top header, #mainimg {
        height: 470px;
    }

    #top #logo img {
        left: 1%;
        top: 20px;
        width: 200px;
    }
}

/*画面幅800px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px) {

    #top header, #mainimg {
        height: 380px;
    }
}

/*画面幅620px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:620px) {

    #top header, #mainimg {
        height: 300px;
    }

    #top #logo img {
        left: 1%;
        top: 10px;
        width: 120px;
    }
}

/*画面幅500px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px) {

    #top header, #mainimg {
        height: 240px;
    }
}

/*画面幅420px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px) {

    #top header, #mainimg {
        height: 190px;
    }

    #top #logo img {
        left: 1%;
        top: 10px;
        width: 90px;
    }
}



/*画面幅1000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {

    /*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
    /*各ボックスの設定*/
    .list2 li {
        width: 49%; /*幅*/
        margin: 10px 0.5%; /*上下、左右へのボックスの外側へ空けるスペース*/
    }
}



/*画面を横向きにした場合の高さが500px以下の場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px) {

    /*メインメニュー
---------------------------------------------------------------------------*/
    /*メニュー１個あたりの設定*/
    #menubar-s ul li a {
        padding: 10px; /*メニュー内の余白*/
        float: left; /*左に回り込み*/
        width: 40%; /*幅*/
        margin-left: 4%; /*メニューの左側に空けるスペース*/
    }
}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px) {

    /*メインメニュー
---------------------------------------------------------------------------*/
    /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
    @keyframes menu1 {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
    /*スマホ用メニューブロック*/
    #menubar-s {
        display: block;
        overflow: hidden;
        position: fixed;
        z-index: 100;
        top: 0px;
        width: 100%;
        background: rgba(0,0,0,0.8); /*背景色*/
        border-top: 1px solid #fff; /*上の線の幅、線種、色*/
        animation-name: menu1; /*上のkeyframesの名前*/
        animation-duration: 0.5s; /*アニメーションの実行時間。0.5秒。*/
        animation-fill-mode: both; /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
    }
        /*メニュー１個あたりの設定*/
        #menubar-s ul li a {
            display: block;
            text-decoration: none;
            padding: 10px 15px; /*上下、左右へのメニュー内の余白*/
            border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/
            color: #fff; /*文字色*/
            font-size: 16px; /*文字サイズ*/
        }
        /*飾り文字*/
        #menubar-s ul li span {
            display: block;
            font-size: 10px; /*文字サイズ*/
            color: #999; /*文字色*/
        }
    /*PC用メニューを非表示にする*/
    #menubar {
        display: none;
    }

    /*３本バーアイコン設定
---------------------------------------------------------------------------*/
    /*３本バーブロック*/
    #menubar_hdr {
        display: block;
        position: fixed;
        z-index: 100;
        top: 8px; /*上から8pxの場所に配置*/
        right: 10px; /*右から10pxの場所に配置*/
        border-radius: 50%; /*円形にする*/
        border: 1px solid #fff;
    }
        /*アイコン共通設定*/
        #menubar_hdr.close,
        #menubar_hdr.open {
            width: 50px; /*幅*/
            height: 50px; /*高さ*/
        }
        /*三本バーアイコン*/
        #menubar_hdr.close {
            background: #5bae88 url(../images/icon_menu.png) no-repeat center top/50px; /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
        }
        /*閉じるアイコン*/
        #menubar_hdr.open {
            background: #5bae88 url(../images/icon_menu.png) no-repeat center bottom/50px; /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
        }

    /*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
    /*fixmenuから折りたたみメニューになるのでリセット。*/
    body.is-fixed-menu #contents {
        margin-top: 0px;
    }

    /*main,subコンテンツ
---------------------------------------------------------------------------*/
    .main, .sub {
        float: none;
        width: auto;
    }

    .sub {
        clear: both;
    }

    /*その他
---------------------------------------------------------------------------*/
    body.s-n .sub, body.s-n #footermenu {
        display: none;
    }

    .big1 {
        font-size: 20px;
    }

    .w50 {
        overflow: hidden;
        width: auto;
    }

    .fl {
        float: none;
    }

    .fr {
        float: none;
    }
}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {

    /*全体の設定
---------------------------------------------------------------------------*/
    body {
        font-size: 12px; /*文字サイズ*/
        line-height: 1.5; /*行間*/
    }

    /*inner
---------------------------------------------------------------------------*/
    .inner {
        padding-left: 2% !important;
        padding-right: 2% !important;
    }

    /*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
    #contents {
        padding: 20px 0px; /*上下、左右へのブロック内の余白*/
    }
        /*contentsの中にあるinner*/
        #contents .inner {
            padding: 20px 0px; /*上下、左右へのブロック内の余白*/
        }
        /*h2,h3タグ*/
        #contents h2 {
            font-size: 20px; /*文字サイズ*/
        }
            /*h2タグのspan（装飾用）タグ*/
            #contents h2 span {
                font-size: 10px; /*文字サイズ*/
                letter-spacing: 0.2em; /*文字間隔を広くとる設定*/
            }
        /*h3タグ*/
        #contents h3 {
            font-size: 20px; /*文字サイズ*/
            padding-left: 10px;
        }
            /*h3タグの１文字目*/
            #contents h3::first-letter {
                padding-left: 10px; /*線と文字との余白*/
            }
        /*段落タグ*/
        #contents p {
            padding: 0 10px 20px;
        }

    /*求人一覧ページの各ブロック
---------------------------------------------------------------------------*/
    /*各ボックスの設定*/
    .list {
        padding: 10px; /*ボックス内の余白*/
        margin-bottom: 20px; /*ボックス間の余白*/
    }
        /*ボックス内のh4タグ設定*/
        .list h4 {
            font-size: 20px; /*文字サイズ*/
        }

    /*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
    /*各ボックスの設定*/
    .list2 li {
        width: auto; /*幅*/
        margin: 0 0 10px; /*上、左右、下へのボックスの外側へ空けるスペース*/
    }

    .list2 a {
        height: auto; /*ボックスの高さ*/
        padding: 10px; /*ボックス内の余白*/
    }
    /*ボックス内の画像。※imgタグにclass="img"をつけた場合。*/
    .list2 .img {
        height: auto;
        width: 10%;
    }
    /*件数のテキスト。※list2内でspanタグで囲った場合。*/
    .list2 span {
        font-size: 10px; /*文字サイズ*/
        right: 20%; /*右から20%の場所に配置*/
        bottom: 6px; /*下から6pxの場所に配置*/
    }

    /*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
    /*option1〜option3、と、newアイコン共通*/
    .option1, .option2, .option3, .new {
        font-size: 10px; /*文字サイズ*/
        width: 50px; /*幅*/
        line-height: 20px; /*高さ*/
        right: 10px; /*右から10pxの場所に配置*/
    }

    /*フッターメニュー
---------------------------------------------------------------------------*/
    /*ボックス全体*/
    #footermenu {
        display: none; /*画面領域が狭いので非表示に。*/
    }

    /*テーブル（ta1）
---------------------------------------------------------------------------*/
    /*ta1設定*/
    .ta1, .ta1 td, .ta1 th {
        padding: 5px; /*ボックス内の余白*/
    }
        /*ta1の左側ボックス*/
        .ta1 th {
            width: 100px;
        }

    /*その他
---------------------------------------------------------------------------*/
    .photo {
        padding: 5px;
        border: 2px solid #fff;
    }

    .ws, .wl {
        width: 94%;
    }

    .fl {
        float: none;
    }

    img.fl {
        float: none;
        display: block;
        width: 90%;
        margin: 0 auto 20px;
    }

    .fr {
        float: none;
    }

    img.fr {
        float: none;
        display: block;
        width: 90%;
        margin: 0 auto 20px;
    }

    .big1 {
        font-size: 16px;
    }

    .sh {
        display: block;
    }

    .pc {
        display: none;
    }

    .fontsize-title-smartphone {
        font-size: 25px !important;
    }
}



/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px) {

    /*ta1設定
---------------------------------------------------------------------------*/
    /*labelタグを2列から1列表示にする（CMS用）*/
    .ta1.cms td label {
        float: none;
        width: 100%;
    }
}





.cs_checkbox {
    display: none;
}

    .cs_checkbox + .checkbox-icon {
        position: relative;
        vertical-align: middle;
        cursor: pointer;
    }

        .cs_checkbox + .checkbox-icon:before {
            content: "\f372";
            font-family: "Ionicons";
            color: #ccc;
            font-size: 1.25em;
            vertical-align: middle;
        }

    .cs_checkbox:checked + .checkbox-icon:before {
        content: "\f374";
        color: #17bcdf;
    }

.cs_radio {
    display: none;
}

    .cs_radio + .radio-icon:before {
        content: "\f3a6";
        font-family: "Ionicons";
        color: #ccc;
        font-size: 1.25em;
        vertical-align: middle;
    }

    .cs_radio:checked + .radio-icon:before {
        content: "\f3a7";
        color: #17bcdf;
    }

.text-center {
    text-align: center
}

.is-tr-checked {
    background-color: #d9edf7
}

.btn-edit-kengen > a {
    padding: 5px 15px !important;
    background: #e8e8e8;
    text-decoration: none
}

.col-search-input {
    width: 340px;
    float: left;
}

#kengenForm input::placeholder {
    font-size: 12px;
}

@media screen and (max-width: 576px) {
    .col-search-input {
        width: 270px;
        float: left;
    }
}


.switchArea {
    line-height: 30px;
    letter-spacing: 0;
    text-align: center;
    font-size: 15px;
    position: relative;
    margin: 20px 0px;
    width: 95px;
    background: #fff;
}

    .switchArea input[type="checkbox"] {
        display: none;
    }

    .switchArea label {
        display: block;
        box-sizing: border-box;
        height: 30px;
        border: 2px solid #999999;
        border-radius: 30px;
    }

    /* === チェックボックスのラベル（ONのとき） ================ */
    .switchArea input[type="checkbox"]:checked + label {
        border-color: #20B2AA;
    }

    /* === 表示する文字（標準） ================================ */
    .switchArea label span:after {
        content: "オフ";
        padding: 0 0 0 17px;
        color: #999999;
    }

    /* === 表示する文字（ONのとき） ============================ */
    .switchArea input[type="checkbox"]:checked + label span:after {
        content: "オン";
        padding: 0 36px 0 0;
        color: #20B2AA;
    }

    /* === 丸部分のSTYLE（標準） =============================== */
    .switchArea #swImg {
        position: absolute;
        width: 22px;
        height: 22px;
        background: #999999;
        top: 4px;
        left: 4px;
        border-radius: 26px;
        transition: .2s;
    }

    /* === 丸部分のSTYLE（ONのとき） =========================== */
    .switchArea input[type="checkbox"]:checked ~ #swImg {
        transform: translateX(60px);
        background: #20B2AA;
    }
/* ===QRボタン=========================== */
.qr-css {
    display: flex !important;
    justify-content: center !important;
}

    .qr-css button {
        margin-left: 5px !important;
    }

/* ===JoySupporterWeb共通デザイン===============*/

.header-margin {
    margin: 0px 20px 0px 20px;
}

.fontcolour-gray {
    color: gray
}

.span-term-mark {
    text-align: center;
    line-height: 34px;
}

/*.listbox-margin {
    margin-left: 15px;
}*/

.line-height-middle {
    line-height: 33px;
}

.header-search-button {
    position: relative;
    height: 35px;
    width: 35px;
    outline: none;
    cursor: pointer;
}

.header-search-img {
    /*position: absolute;*/
    /*	top: 0;
	left: 0;*/
    max-width: 75%;
    max-height: 75%;
    width: 36px;
    height: 36px;
}

.commonBox {
    margin: 5px auto 10px auto;
    padding: 5px 5px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.commonBox-half {
    margin: 5px auto 10px auto;
    padding: 5px 5px;
    box-sizing: border-box;
    width: 50%;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.commonBox-width-30 {
    margin: 5px auto 10px 0px;
    padding: 5px 5px;
    box-sizing: border-box;
    width: 30%;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.commonBox-width-40 {
    margin: 5px auto 10px 0px;
    padding: 5px 5px;
    box-sizing: border-box;
    width: 40%;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.commonBox-width-60 {
    margin: 5px auto 10px 0px;
    padding: 5px 5px;
    box-sizing: border-box;
    width: 60%;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.commonBox-width-free {
    margin: 5px auto 10px 0;
    padding: 5px 5px;
    box-sizing: border-box;
    height: auto;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0px 4px 4px 0px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-basis {
    flex-basis: auto;
    margin: 15px 0px 25px 30px;
}

.flex-modal-link-area {
    flex-basis: auto;
    margin-right: 15px;
}

.listbox-margin {
    margin: 15px 0px 0px 30px;
}

.listbox-margin-narrow {
    margin: 15px 0px 0px 10px;
}

.listbox-margin-auto {
    margin: 15px 0px 0px 10px;
    resize: none;
    overflow-y: hidden;
    height: auto;
    min-height: 60px; /* テキストエリアの最小の高さ */
    max-height: 800px; /* テキストエリアの最大の高さ */
}

.table-margin {
    margin-left: 30px;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.font-bold {
    font-weight: bold;
}

.listbox-width-big {
    /*	min-width : 400px;
	max-width : auto;*/
    width: 300px;
}

.listbox-width-small {
    width: 100px;
}

.listbox-height {
    height: 34px;
}

.borderBox {
    border-bottom: 1px solid #dedede;
    margin: 5px 0px 5px 0px;
}

.commonBox-bottom-row {
    margin: 10px 0px 10px 30px;
}

.border-bottomo-row {
    border-bottom: 1px solid #ccc;
    margin: 20px 0px 20px 0px;
}

.display-inline {
    vertical-align: middle;
}

.flg_private {
    color: red;
    font: bold;
}

.flg_open {
    color: black;
}

.modal-title-color {
    color: cornflowerblue;
    font-size: 16px;
}

.modal-dialog-fluid {
    max-width: inherit;
    width: 98%;
    margin-left: 15px;
}

.modal-dialog-flex {
    max-width: inherit;
    width: 95%;
}

.modal-margin-top {
    margin-top: 15px !important;
}

.volume {
    --line: #fff;
    --line-width: 6px;
    --duration: .5s;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .volume input {
        display: none;
    }

        .volume input + svg {
            display: block;
            fill: none;
            stroke: var(--line);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: var(--line-width);
            width: 98px;
            height: 32px;
        }

            .volume input + svg path {
                -webkit-animation: var(--name) var(--duration) ease forwards;
                animation: var(--name) var(--duration) ease forwards;
            }

                .volume input + svg path:nth-child(2) {
                    stroke-dashoffset: 1px;
                }

                .volume input + svg path:nth-child(3) {
                    stroke-dashoffset: 1px;
                }

        .volume input:checked + svg path:nth-child(1) {
            --name: shape-r;
        }

        .volume input:checked + svg path:nth-child(2) {
            --name: small-r;
        }

        .volume input:checked + svg path:nth-child(3) {
            --name: large-r;
        }

        .volume input:not(:checked) + svg path:nth-child(1) {
            --name: shape;
        }

        .volume input:not(:checked) + svg path:nth-child(2) {
            --name: small;
        }

        .volume input:not(:checked) + svg path:nth-child(3) {
            --name: large;
        }

/* .button-css input:checked + svg path:nth-child(1) {
  
  --name: shape-r;
}
.button-css input:checked + svg path:nth-child(2) {
  --name: small-r;
  
}
.button-css input:checked + svg path:nth-child(3) {
  
  --name: large-r;
}
.button-css input:not(:checked) + svg path:nth-child(1) {
  --name: shape;
}
.button-css input:not(:checked) + svg path:nth-child(2) {
  --name: small;
}
.button-css input:not(:checked) + svg path:nth-child(3) {
  --name: large;
} */


@-webkit-keyframes small {
    0%, 30% {
        stroke-dasharray: 0 0 30px 64px;
    }

    40% {
        stroke-dashoffset: 16px;
    }

    80%, 100% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dasharray: 0 43px 30px 64px;
    }

    100% {
        stroke-dasharray: 0 39px 30px 64px;
    }
}

@keyframes small {
    0%, 30% {
        stroke-dasharray: 0 0 30px 64px;
    }

    40% {
        stroke-dashoffset: 16px;
    }

    80%, 100% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dasharray: 0 43px 30px 64px;
    }

    100% {
        stroke-dasharray: 0 39px 30px 64px;
    }
}

@-webkit-keyframes small-r {
    0% {
        stroke-dasharray: 0 39px 30px 64px;
    }

    0%, 40% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dashoffset: 16px;
    }

    70%, 100% {
        stroke-dasharray: 0 0 30px 64px;
    }
}

@keyframes small-r {
    0% {
        stroke-dasharray: 0 39px 30px 64px;
    }

    0%, 40% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dashoffset: 16px;
    }

    70%, 100% {
        stroke-dasharray: 0 0 30px 64px;
    }
}

@-webkit-keyframes large {
    0%, 30% {
        stroke-dasharray: 0 0 50px 84px;
    }

    40% {
        stroke-dashoffset: 16px;
    }

    80%, 100% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dasharray: 0 82px 32px 84px;
    }

    100% {
        stroke-dasharray: 0 78px 32px 84px;
    }
}

@keyframes large {
    0%, 30% {
        stroke-dasharray: 0 0 50px 84px;
    }

    40% {
        stroke-dashoffset: 16px;
    }

    80%, 100% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dasharray: 0 82px 32px 84px;
    }

    100% {
        stroke-dasharray: 0 78px 32px 84px;
    }
}

@-webkit-keyframes large-r {
    0% {
        stroke-dasharray: 0 78px 32px 84px;
    }

    0%, 40% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dashoffset: 16px;
    }

    70%, 100% {
        stroke-dasharray: 0 0 50px 84px;
    }
}

@keyframes large-r {
    0% {
        stroke-dasharray: 0 78px 32px 84px;
    }

    0%, 40% {
        stroke-dashoffset: 1px;
    }

    70% {
        stroke-dashoffset: 16px;
    }

    70%, 100% {
        stroke-dasharray: 0 0 50px 84px;
    }
}

@-webkit-keyframes shape {
    0% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }

    70% {
        stroke-dasharray: 63px 51px 184px;
        stroke-dashoffset: 21px;
    }

    100% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }
}

@keyframes shape {
    0% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }

    70% {
        stroke-dasharray: 63px 51px 184px;
        stroke-dashoffset: 21px;
    }

    100% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }
}

@-webkit-keyframes shape-r {
    0% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }

    100% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }
}

@keyframes shape-r {
    0% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }

    100% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
}

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

.button-css {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ea1d24;
}

    .button-css .dribbble {
        position: fixed;
        display: block;
        right: 24px;
        bottom: 24px;
    }

        .button-css .dribbble img {
            display: block;
            width: 20px;
        }

.button-css {
    webkit-appearance display: inline-block;
    /* padding: 6px 12px; */
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    border-color: #777777;
}

.back-link {
    background: #efefef;
    width: 100px !important;
    height: 45px !important;
    margin-right: 5px !important;
}

.chart-container {
    width: 100% !important;
    height: 100% !important;
}

.pointer {
    cursor: pointer;
}

.shelter-normal-btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #C9C9C9;
    color: #0C0C0C;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

    .shelter-normal-btn:hover {
        background-color: #E6E6E6;
    }

.shelter-normal-btn-mini {
    width: auto;
    height: 30px;
    line-height: 30px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #C9C9C9;
    color: #0C0C0C;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 7px;
    padding-right: 7px;
    padding-left: 7px;
}

    .shelter-normal-btn-mini:hover {
        background-color: #E6E6E6;
    }

.shelter-normal-btn-mini-disabled {
    width: auto;
    height: 30px;
    line-height: 30px;
    background-color: #999;
    text-align: center;
    border: 1px solid #000;
    color: #000;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 7px;
    padding-right: 7px;
    padding-left: 7px;
}

.shelter-upsert-btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #4169e1;
    color: #4169e1;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

    .shelter-upsert-btn:hover {
        background-color: #E6E6E6;
    }

.shelter-upsert-btn-mini {
    width: auto;
    height: 30px;
    line-height: 30px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #4169e1;
    color: #4169e1;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 7px;
    padding-right: 7px;
    padding-left: 7px;
}

    .shelter-upsert-btn-mini:hover {
        background-color: #E6E6E6;
    }

.shelter-upsert-btn-disabled {
    width: auto;
    height: 40px;
    line-height: 40px;
    background-color: #999;
    text-align: center;
    border: 1px solid #000;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.shelter-delete-btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    background-color: #FFFFFF;
    text-align: center;
    border: 1px solid #a52a2a;
    color: #a52a2a;
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

    .shelter-delete-btn:hover {
        background-color: #E6E6E6;
    }

.lightskyblue {
    color: white !important;
    background-color: #87ceeb !important;
}

.min-width-125 {
    min-width: 125px !important;
}

.chart-margin-top {
    margin-top: 60px;
}

.piechart-label {
    margin-left: 100px;
    font-size: 20px;
    font: bold;
}

.disabled-btn {
    border: 1px solid #ddd;
    border-radius: 3px;
    color: black;
    padding: 5px 15px;
    transition: all 0.3s ease;
    background-color: gray;
}

.text-area-margin {
    margin-left: 30px;
}

.flex-container {
    display: flex;
    flex-direction: column;
}

    .flex-container .flexbox {
        width: 100%;
    }

.container-between {
    display: flex;
    justify-content: space-between;
}

    .container-between .element-right {
        width: 55%;
    }

    .container-between .element-left {
        width: 43%;
    }

        .container-between .element-left .show-hidden-image {
            width: 25px !important;
            margin-top: 2px !important;
        }

.margin-elm {
    margin-top: 5px;
    margin-left: 5px;
}

.modal_link_title {
    float: left;
    height: 24.75px;
    width: 275px;
}

.modal_link_url {
    float: left;
    height: 24.75px;
    width: 610px;
}

.modal_information_title {
    float: left;
    height: 24.75px;
    width: 1690px;
    margin-bottom: 5px;
}

.header-box-margin {
    margin: 5px 20px 0px 20px;
}

.flexbox-margin {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.maps-box {
    display: flex;
}

    .maps-box .maps-box-element {
        margin: 10px;
        padding: 20px;
        width: 800px !important;
    }

.maps-box1 {
    /*display: flex;*/
}

    .maps-box1 .maps-box-element {
        margin: 10px;
        padding: 20px;
        /*width: 600px !important;*/
    }

.maps-margin-left {
    margin-left: 5px !important;
}

.maps-margin-top {
    margin-top: 15px !important;
}

.irai-margin-top {
    margin-top: 10px !important;
}

.btn-margin-left {
    margin-left: 20px !important;
}

.icon-trash {
    color: #a52a2a;
    font-size: 22px !important;
}

.footer-css-box {
    padding: 5px !important;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.comfirm-input {
    background-color: #fbfbfb !important
}

.div-column {
    background-color: #fbfbfb;
    border: 2px solid #cccccc;
    border-radius: 5px;
    padding: 5px;
    min-height: 34px !important;
}

.flex-wrap-needs {
    display: flex;
    flex-wrap: wrap;
}

    .flex-wrap-needs > div {
        width: 200px !important;
        min-height: 34px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

.need-question {
    color: blue !important;
    font-weight: bold !important;
    margin-top: 15px !important;
    margin-left: 30px !important;
    /*margin-bottom: -14px !important;*/
}

.map-button-cf {
    color: #4169e1 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
}

.flex-wrap-common {
    display: flex;
    flex-wrap: wrap;
}

    .flex-wrap-common > div {
        width: 200px !important;
        min-height: 34px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

.margin-txt {
    margin-top: 8px !important;
    margin-left: 8px !important;
}

.question-box {
    margin-left: 28px;
}

#kyotsu {
    margin-left: 0px !important;
}

.rounded-corner-box {
    height: 150px;
    padding: 5px;
    border: 2px solid #000;
    border-radius: 20px;
    margin-left: 30px;
    margin-right: 30px;
}

.child-modal-margin {
    margin-top: 200px;
}

.child-modal-dialog-fluid {
    max-width: inherit;
    width: 50%;
}

.sentakushi-margin {
    margin-top: 2px;
    margin-left: 160px;
}

.shitsumon-torokusha-margin {
    margin-top: 30px;
    margin-left: 160px;
}

.shitsumon-koshinsya-margin {
    margin-top: 30px;
    margin-left: 30px;
}

.group-award-torokusha-margin {
    margin-top: 90px;
    margin-left: 30px;
    margin-right: 39px;
}

.group-award-koshinsha-margin {
    margin-top: 90px;
    margin-right: 30px;
}

.group-activity-margin-middle {
    margin-top: 40px;
    margin-left: 30px;
}

.group-activity-margin-big {
    margin-top: 80px;
    margin-left: 30px;
}

.group-activity-torokusha-margin {
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 39px;
}

.group-activity-koshinsha-margin {
    margin-top: 40px;
    margin-right: 30px;
}

.groupmaster-member-table-margin {
    margin-top: 40px;
    margin-left: 50px;
}

.groupmaster-common-table-margin {
    margin-top: 15px;
    margin-left: 50px;
}

.iphone-se {
    margin: 10px;
    width: 375px;
    height: 667px;
    border: 1px solid #000;
    text-align: center;
}

.iphone-se-min {
    margin: 10px;
    width: 375px;
    height: 567px;
    border: 1px solid #000;
    text-align: center;
}

.radio_check_button_big {
    transform: scale(3.0);
}

.radio_button_height {
    height: 50px;
}

.radio_check_button_table {
    margin: auto;
}

.image_half {
    height: 50%;
    width: 50%;
}

.pin-margin {
    margin-top: 1px;
    margin-left: 50px;
}

.header-font-syle {
    color: #2A3435 !important;
    font-weight: normal;
}

.index {
    font-size: 16px;
    font-weight: 600;
    padding: 0.25em 0.4em;
    background: transparent;
    margin-left: 20px;
    margin-top: 15px;
    border-left: solid 10px #c3e6e8;
}

.signature {
    border: 1px solid #000; /* 枠線 */
    border-radius: 0.67em; /* 角丸 */
    padding: 0.5em; /* 内側の余白量 */
    font-size: 1em; /* 文字サイズ */
    line-height: 1.2; /* 行の高さ */
}

.iransha-bubun {
    display: none;
}

.iransha-bubun-display {
    display: block;
}
/*.flex-container-shikizai {
    display: flex;
    flex-wrap: wrap;
}

    .flex-container-shikizai > div {
        width: 500px;
        margin: 10px;
    }*/

.disabled-dropdown {
    color: #666; /* 無効な状態の文字色 */
    background-color: #eee; /* 無効な状態の背景色 */
    border: 1px solid #ccc; /* 枠線の色 */
    /* その他のスタイルを必要に応じて追加 */
    height: 34px;
    font-size: 14px;
    width: 120px
}

.disabled-dropdown-long {
    color: #666; /* 無効な状態の文字色 */
    background-color: #eee; /* 無効な状態の背景色 */
    border: 1px solid #ccc; /* 枠線の色 */
    /* その他のスタイルを必要に応じて追加 */
    height: 34px;
    font-size: 14px;
    width: 400px
}

.width_date {
    min-width: 80px;
    width: 100px;
}

.width_UpdateButton {
    min-width: 140px;
    width: 140px;
}

.width_mail {
    min-width: 150px;
    width: 200px;
}



/* カーソルを重ねる要素 */
.tooltip2 {
    position: absolute; /* ツールチップの位置の基準に */
    display: inline-block; /* インライン要素に */
    cursor: pointer; /* カーソルを当てたときにポインターに */
    top: 0; /* 適切な位置に調整 */
    left: 0; /* 適切な位置に調整 */
}

/* ツールチップのテキスト */
.tooltip-text2 {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 90px;
    transform: translateX(-50%);
    /*   bottom: 100%;*/ /* 親要素上からの位置を 100% に変更 */
    top: 30px;
    display: inline-block;
    padding: 5px;
    /*white-space: normal;*/
    font-size: 1.2rem;
    line-height: 1.3;
    background: #333;
    color: #fff;
    border-radius: 3px;
    transition: 0.3s ease-in;
    max-width: 1000px;
    width: 200px;
    z-index: 999;
}

    /* 矢印のスタイル */
    .tooltip-text2:before {
        content: '';
        position: absolute;
        top: -18px;
        left: 20px;
        margin-left: -7px;
        border: 7px solid transparent;
        border-bottom: 15px solid #333; /* 上向きの矢印に変更 */
    }

/* ホバー時にツールチップの非表示を解除 */
.tooltip2:hover .tooltip-text2 {
    opacity: 1;
    visibility: visible;
    height: auto; /* ホバー時に高さを自動に設定 */
}


/* カーソルを重ねる要素 */
.tooltip3 {
    position: absolute; /* ツールチップの位置の基準に */
    display: inline-block; /* インライン要素に */
    cursor: pointer; /* カーソルを当てたときにポインターに */
    top: 0; /* 適切な位置に調整 */
    left: 0; /* 適切な位置に調整 */
}

/* ツールチップのテキスト */
.tooltip-text3 {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 10px;
    transform: translateX(-50%);
    /*   bottom: 100%;*/ /* 親要素上からの位置を 100% に変更 */
    top: 30px;
    display: inline-block;
    padding: 5px;
    /*white-space: normal;*/
    font-size: 0.9rem;
    line-height: 1.3;
    background: #999;
    color: #fff;
    border-radius: 3px;
    transition: 0.3s ease-in;
    max-width: 30px;
    width: 30px;
    z-index: 999;
}

    /* 矢印のスタイル */
    .tooltip-text3:before {
        content: '';
        position: absolute;
        top: -18px;
        left: 20px;
        margin-left: -7px;
        border: 7px solid transparent;
        border-bottom: 15px solid #999; /* 上向きの矢印に変更 */
    }

/* ホバー時にツールチップの非表示を解除 */
.tooltip3:hover .tooltip-text3 {
    opacity: 1;
    visibility: visible;
    height: auto; /* ホバー時に高さを自動に設定 */
}


/* 親要素に相対的な位置付けを設定 */
.parent-container {
    position: relative;
}

/* 画像のスタイル */
.tooltip2 img {
    width: 60%; /* 画像を80%にする */
    height: auto; /* アスペクト比を維持 */
}


/* 画像のスタイル */
.droptext {
    height: 34px;
    width: 300px;
    border: 1px solid #CCCCCC;
    color: #555555;
    border-radius: 4px;
    font-size: 14px;
}