@charset "utf-8";
/**********************************/
/*フォント  					   */
/**********************************/

/* font-family */
#top .h3-2,
#top .h4-2,
#top .h4-1,
.btn1-c{
    font-family: 'BIZ UDMincho','BIZ UD明朝','Hiragino Mincho ProN','ヒラギノ明朝 ProN', 'Open Sans', sans-serif;
    color: #222;
    font-weight:bold;
    animation-delay: 0.3s;
}

/**********************************/
/*枠                  			   */
/**********************************/

/* 大枠 */
#contents .all-box {
    margin:3em auto;
    list-style: none; /* リストのスタイルを無効にする */
    max-width:900px;
}

@media screen and (max-width:900px) {
    #contents .all-box{
    width:90%;
    }
}

/* 大枠（FLEX仕様にする時） */
#contents .all-box-flex {
    display: flex;
    flex-wrap: wrap;
    margin:3em auto;
    list-style: none; /* リストのスタイルを無効にする */
}

/**********************************/
/*本文      					   */
/**********************************/

/* グレー枠 */
#contents .g-box {
    max-width: 900px;
    margin:1em auto;
    padding:1em;
    border:1px solid #222;
    background-color:#ccc;
    font-size:1rem;
}

/* 白枠 */
#contents .w-box {
    max-width: 900px;
    margin:1em auto;
    padding:1em;
    font-size:1rem;
}

/* 白枠２ */
#contents .w-box2 {
    max-width: 900px;
    padding:1em 1em 1em 2em;
    font-size:1rem;
}

/* 白枠中央 */
#contents .w-box-c {
    max-width: 900px;
    margin:2em auto;
    text-align:center;
}

/* 見出し（求人インデックス用） */
#contents h2.h2_i {
    position: relative;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 3em 0 2em 0;
    width: 100%;
}

/* 小見出し（求人インデックス用） */
#contents h3.h3_i{
    margin:1em 0 1em 0;
    font-weight:bold;
    position: relative;
    padding:0 1em;
}

/* 見出し */
#contents h2 {
    position: relative;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 3em 0 2em 0;
    width: 100%;
}

    #contents h2:before {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 30px);
        width: 60px;
        height: 5px;
        content: '';
        border-radius: 3px;
        background: #001850;
    }

/* 小見出し */
#contents h3.h3_s{
    margin:2em 1em 1em 1em;
    background-color:#ddd;
    font-weight: normal;
    position: relative;
    padding:0 1em;
}
    #contents h3.h3_s:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        content: '';
        -webkit-transition: all .3s;
        transition: all .3s;
        background: #001850;
    }

/* トップ画像下キャッチ文章 */
#contents h4.h4_r{
    background-color:#222;
    color:#fff;
    font-weight: normal;
    position: relative;
    padding:0 1em;
}

/*トピック*/
#contents .topics-all{
    display: flex;
    flex-wrap: wrap;
    margin:0.5em auto;
    list-style: none; /* リストのスタイルを無効にする */
}

#contents .topics{
    right:0px;
    width:auto;/*幅*/
    border-radius: 3px; /* ボックスの四つ角を丸くする */
    background:#001850;
    color:#fff;
    padding:0 1em;
    margin:0.5em;
    font-size: 0.8rem;
}

@media screen and (max-width:500px) {
    #contents h2 {
        text-align: center;
        margin: 2rem 0rem;
        font-size:1.3rem;
    }
    /* 小見出し */
    #contents h3.h3_s{
        margin:1rem 0.5rem;
        font-size:1.3rem;
    }

    /* グレー枠 */
    #contents .g-box {
        margin:0.5rem;
        padding:0.5rem;
        font-size:0.9rem;
    }

    /* 白枠 */
    #contents .w-box {
        margin:0rem;
        padding:0.5rem;
        font-size:0.9rem;
    }

    /* 白枠２ */
    #contents .w-box2 {
        padding:0.5rem;
        font-size:0.9rem;
    }

    /* 小見出し（求人インデックス用） */
    #contents h3.h3_i{
        margin:1em 0 1em 0;
        padding:0rem;
        font-size:1.3rem;
    }

    #contents .topics{
        font-size: 0.7rem;
    }
    /* トップ画像下キャッチ文章 */
    #contents h4.h4_r{
        font-size:0.9rem;
        font-weight:normal;
    }
}

/*トピック（ボタン４用　右寄せ）*/
#contents .topics-right{
    text-align:right;
    list-style: none; /* リストのスタイルを無効にする */
	position:relative;/*タイトルの親要素として*/
}

/* マーカー */
#contents .marker{
    text-shadow: 0 3px 5px rgba(255, 255, 100, .6);  /* 微妙ににじんだ感じを出すため（さほど明示的ではない） */
    line-height: normal;  /* このnormalの指定が、可変文字サイズ取得やクロスブラウザのために重要！ */
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(247, 247, 36, .5) 0);
}
#contents .marker::before, .marker::after {
    display: inline-block;  /* 高さを持たせるためにインラインブロックに */
    content: "\A";     /* 改行を入れて高さを発生させる */
    white-space: pre;  /* 改行を入れて高さを発生させる */
    width: 0.41em; /* この数字が出てくる理由は後述 */
    clip-path: inset(1px 0); /* はみ出し部分をトリミング */
    transform-origin: bottom left;  /* トランスフォームの起点を左下隅に。重要！ */
    transform: skewX(-20deg) translateX(-0.41em);  /* 「平行四辺形」の幅の分ずらす */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(247, 247, 36, .5) 0); /* 本要素と同じ指定 */
}
#contents .marker::after {
    filter: blur(.03em);  /* 終端のにじみの演出 */
    transform: skewX(-20deg); /* マーカー右端の平行四辺形の移動は不要 */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(247, 247, 36, .5) 0); /* 背景色の透明度を少し濃い目に */
}

/**********************************/
/*テーブル              			   */
/**********************************/

#table p {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 60px auto 40px;
}
#table table {
    margin: 20px auto;
}
#table .tbl-r02 th {
    background: #333;
    border: solid 1px #333;
    color: #fff;
    padding: 10px;
}
#table .tbl-r02 td {
    border: solid 1px #333;
    padding: 10px;
}

@media screen and (max-width: 640px) {
    #table .last td:last-child {
        border-bottom: solid 1px #333;
        width: 100%;
    }
    #table .tbl-r02 {
        width: 80%;
    }
    #table .tbl-r02 th,
    #table .tbl-r02 td {
        border-bottom: none;
        display: block;
        width: 100%;
    }
}

/**********************************/
/*画像              			   */
/**********************************/

/* 画像（ここを増やしていく） */
.img-90101{
    width:100%;
    height:60vh;
    background:url(../img/90101_img.jpg) no-repeat center;
    background-size:cover;
 }
 @media screen and (max-width: 640px) {
    .img-90101{
        width:100%;
        height:30vh;
        background-size:contain;
     }
}
.img-90102{
    width:100%;
    height:60vh;
    background:url(../img/90102_img.jpg) no-repeat center;
    background-size:cover;
}