@charset "UTF-8";
/*=========================================================
  レイアウト詳細

  １．前提条件
       (1) <section id="sec_1"> → width:770pxで設定。サブメニューの右側に使用。
       (2) <section id="sec_2～5"> → section分けに使用
       (2) <section id="sec_6"> → 一番最後のsectionに設定
       (3) section内には<div class="inner_1"></div>を必ず配置し、中のデザインは自由。

   ・編集箇所(html)
       (1) <title></title>
       (2) CSSの階層とファイル名（Common,Personal共に）
       (3) 必要に応じて、リンクと画像の階層
		   (3) メインメニューSelect時：ファイル名_s.png に変更
       (3) サブメニューSelect時：<a class="sLink_s">に変更
		   (4) panlist
		   (5) サブメニューの内容
           基本形：<div class=""><p>サブメニュー名</p></div>
            ●ドロップダウンリストにする場合
            　アイテム<div>クラス：ToggleItems　を指定
            　見出し<div>クラス：ToggleSwitch　を指定
            ●ドロップダウンリストにしない場合
            　見出し<div>クラス：ToggleList　を指定

  ２．共通部品のスタイル
       (1)<h2 class="title_2">リングローリングミル</h2>
           margin: 0 auto 1em;
           padding: 0.5em 0;
           font-size: 20px;
           border-bottom: #dcdcdc;
           text-align: center;

       (2)<h4 class="title_3">熱間自由鍛造プレス</h4>
           position: relative;
           margin: 0 auto 1em;
           padding: 0 0 0.5em 1em;
           font-size: 20px;
           border-bottom: 3px solid #ccc;
           &::after{
             content: ".";
             line-height: 0;
             display: block;
             overflow: hidden;
             position: absolute;
             bottom: -3px;
             left: 0;
             width: 300px;
             border: solid 2px #3366ff;

       (3)<p class="title_4">特長</p>
           margin: 0 auto 1em;
           padding: 0;
           font-weight: bold;
           font-size: 18px;
           &::before{
             font-family: "Font Awesome 5 Free";
             padding-right: 0.3em;
             content: "\f192";
             color: #3366ff;

       (4)<p class="title_5">オペレーター機能を有しないローリング入力値</p>
           margin: 0 auto 1em;
           padding: 0 0 0 1em;
           font-weight: bold;
           font-size: 15px;
           border-bottom: 3px solid $border_color05;
           &::before{
           font-family: "Font Awesome 5 Free";
           padding-right: 0.3em;
           content: "\f142";
           color: $fcolor03;

  ３．リンクの設定
       (1)メインメニュー：<a class="nLink"></a>
       (2)ベースリンク：<a class="bLink">
       (3)サブメニューリンク：<a class="sLink">
       (4)フッターリンク：<a class="fLink">
=========================================================*/
/*--------------------------------------------------
  recruit レイアウト
--------------------------------------------------*/
div.inner_4 {
		margin: 0 auto;
		padding: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: center;
}

div.inner_5 {
		margin: 0;
		padding: 0;
    width: 68%;
}

/*--------------------------------------------------
  左側メニュー レイアウト
--------------------------------------------------*/
.ToggleItem {
		/*display: none;*/
		margin-left: 1em;
}

.ToggleItem p:last-of-type {
		border-bottom: none;
}
/*--------------------------------------------------
  title レイアウト
--------------------------------------------------*/
.recruit_title{
		margin: 0 auto 3em 0;
		padding: 4em 0;
        background-image: url(../recruit/img/recruit01_01.png);
        background-repeat: no-repeat;
        text-align: right;
}

.title_6{
        font-family: 'Sawarabi Mincho', sans-serif;
        text-align: center;
        font-size: 26px;
        font-weight: normal;
        line-height: 1.7em;
        display: inline-block;
}

h5.title_7{
        position: relative;
        margin: 0 auto 0.8em;
        padding: 0.6em 0 0.2em 1.5em;
        font-size: 18px;
        color: #6dbe9e;
        border-bottom: 2px solid #dcdcdc;
}

h5.title_7::before{
        content: "";
        position: absolute;
        background: #6dbe9e !important;
        top: 45%;
        left: 0.5em;
        margin-top :-10px;
        height: 30px;
        width: 5px;
        border-radius: 5px;
}

.title_8_1,
.title_8_2,
.title_8_3 {
        font-family: 'M PLUS 1p', sans-serif;
        position: relative;
        padding: 1em 0;
        text-align: center;
        margin: 2em auto 1em;
        padding: 1em 0;
        font-size: 19px;
        width: 100%;
}

.title_8_1::before,
.title_8_1::after,
.title_8_2::before,
.title_8_2::after,
.title_8_3::before,
.title_8_3::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 6px;
        box-sizing: border-box;
}

.title_8_1::before {
        top: 0;
        border-top: 2px solid #f1c85a;
        border-bottom: 1px solid #f1c85a;
}

.title_8_1::after {
        bottom: 0;
        border-top: 1px solid #f1c85a;
        border-bottom: 2px solid #f1c85a;
}

.title_8_2::before {
        top: 0;
        border-top: 2px solid #4471d6;
        border-bottom: 1px solid #4471d6;
}

.title_8_2::after {
        bottom: 0;
        border-top: 1px solid #4471d6;
        border-bottom: 2px solid #4471d6;
}

.title_8_3::before {
        top: 0;
        border-top: 2px solid #6dbe9e;
        border-bottom: 1px solid #6dbe9e;
}

.title_8_3::after {
        bottom: 0;
        border-top: 1px solid #6dbe9e;
        border-bottom: 2px solid #6dbe9e;
}

.title_9 {
		font-family: 'M PLUS 1p', sans-serif;
		margin: 0;
		padding: 0;
		font-weight: bold;
		font-size: 18px;
    width: 100%;
}

.title_9::before {
		font-family: "Font Awesome 5 Free";
		padding-right: 0.3em;
		content: "\f192";
		color: #3366ff;
}

.recruit_title_2_1{
        width: 46%;
        text-align: center;
        background: #f2d992 !important;
        margin: 3em 1em 3em auto;
        padding: 0.5em;
        box-shadow: 0px 0px 0px 7px #f2d992;
        border: solid 2px #fff;
        font-weight: bold;
        color: #696969;
}

.recruit_title_2_2{
        width: 46%;
        text-align: center;
        background: #a1b7e7 !important;
        margin: 3em 1em 3em auto;
        padding: 0.5em;
        box-shadow: 0px 0px 0px 7px #a1b7e7;
        border: solid 2px #fff;
        font-weight: bold;
        color: #696969;
}

.recruit_title_2_3{
        width: 46%;
        text-align: center;
        background: #96d8b7 !important;
        margin: 3em 1em 3em auto;
        padding: 0.5em;
        box-shadow: 0px 0px 0px 7px #96d8b7;
        border: solid 2px #fff;
        font-weight: bold;
        color: #696969;
}

p.title_text_1{
        font-size: 27px;
        margin: 0 auto;
        padding: 2em 0 0.5em 0	;
}
p.title_text_2{
        font-size: 15px;
        margin: 0 auto;
        padding: 0 0 2.5em 0;
}

.title_10 {
		font-family: 'M PLUS 1p', sans-serif;
		position: relative;
		margin: 0 auto 1em;
		padding: 0 0 0 0.5em;
		font-size: 16px;
		border-bottom: 3px solid #ccc;
        color: #7a7272;
}

.title_10::after {
		content: ".";
		line-height: 0;
		display: block;
		overflow: hidden;
		position: absolute;
		bottom: -3px;
		left: 0;
		width: 300px;
		border: solid 2px #7a7272;
}

/*--------------------------------------------------
  リンク、写真、テキスト レイアウト
--------------------------------------------------*/
a.pLink:hover {
		opacity: 0.7;
}

.pic{
        margin: 0 auto;
        padding: 0;
        text-align: center;
}

.pic_1{
        margin: 0 auto;
        padding: 0;
        text-align: center;
        display: inline-block;
}

.pic_2{
        margin: 3em auto;
        padding: 0;
        text-align: center;
}

span.recruit_pic img{
    padding: 0.1em;
		border-radius: 8px;
		border: solid 1px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.text_1{
    margin: 0 1.5em;
		padding: 0 0 1em;
}

.text_2{
    margin: 0 1.5em;
		padding: 0 0 1em;
    width: 52%;
}

/*--------------------------------------------------
  募集要項 tableレイアウト
--------------------------------------------------*/
.table_1{
        margin: 3em auto 6em;
		padding: 0;
		width: 98%;
		border-spacing: 4px;
}

.table_1 th {
		text-align: left;
        vertical-align: top;
		padding: 1em;
		width: 25%;
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
}

.table_1 td {
		padding: 1em;
		border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
}

.table_1 td ol{
        padding: 0 1.3em;
}