/* clearfix */

.clear {
clear:both; 
font-size:1px;
color:#ffffff;
}
.clearfix { display: inline-block; zoom: 1; }
.clearfix { display: block; }
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
line-height:0;
font-size: 0;
visibility: hidden;
}

* { margin: 0; padding: 0; }

.clearfix {
    zoom: 1; /* for IE6/7 */
}

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

html{
background-color:#FFFFFF;
margin: 0 auto;
}

body{
margin: 0 auto;
background-color: #FFF;
}

/* header */

header{
max-width: 1000px;
margin: 0 auto;
margin-bottom: 20px;
border-bottom: 25px solid #610B0B;
}

.mail-form{
float:right;
width:40%;
height: 30px;
text-align: right; 
justify-content:
flex-end; margin:10px;
display: flex;
}

.mail-font{
font-size:80%;
text-align: right;
}

.mail-font img{
vertical-align: middle;
}

.logo{
float: left;
width:40%;
height: 30px;
margin:10px;
}

.logo-font{
font-size:70%;
color:#848484;
}

.logo-font img{
vertical-align: middle;
}


.h1-a  {
  color: #000000;/*文字色*/
  padding: 1.5em 0;/*上下の余白*/
  border-top: solid 3px #800000;/*上線*/
  border-bottom: solid 3px #800000;/*下線*/
  margin:10px;
  font-weight: bold;
}

.flex-box {
    background-color: #FFFFFF;     /* 背景色指定 */
    margin-bottom: 10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
}
 
.flex-box img{
    max-width: 100%;
} 
 
.flex-item {
    color:  #000000;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
}


.cap-1{
   font-size: 70%;
   text-valign: top;
 }
 
 
.cap-pro-theme {
  padding: .5em .75em;
  background-color: #800000;
  color: #FFFFFF;
  margin-bottom: 10px;
}

 
.flex_cap_profile-item {
    
   margin-bottom:  15px;              /* 外側の余白 */
    border-radius: 10px;        /* 角丸指定 */
}

.cap-pro-theme-font {
 font-size: 85%;
 color:  #000000;

 }




/*業務中写真*/


.flex_photo-box {
    margin-bottom: 20px;
    display: flex;              /* フレックスボックスにする */
    flex-wrap: wrap;            /* 折り返し指定 */
    align-content:stretch;      /* 折り返し時の配置指定 */
}
 
.flex_photo-item {
    padding: 5px;
    color:  #000000;               /* 文字色 */
    font-size:  70%;           /* 文字サイズ */
    width: 210px;               /* 幅指定 */
    text-align:  left;        /* 文字左揃え */
}

.flex_photo-item img {
   width: 100%;
   margin-bottom: 5px;
   margin-right: 10px;
   }
   
   
   
   
/*=== 専務の年表 ================================= */
   
   .timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    
    margin-bottom: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #D0D3CF solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #393A39;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}

/*=== プロフィール・略歴 ================================= */

.cap_profile {
  color: #800000;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #800000;
  margin-bottom:5px;
  font-weight:bold;
}

/*=== 社員の声ページ ================================= */

.box001 {
    position: relative;
    margin: 2em 0;
    padding: 8px;
    border: solid 3px #800000;
    display: flex;
}
.box001 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    background: #800000;
    color: #ffffff;
    border-radius: 5px 5px 0 0;
}


.flex-photo{
    margin:  5px;
    width:150px;
}

.flex-photo img{
  max-width: 100%;
}

.flex-profile {
 margin:5px;
 font-size: 60%;
 padding-top: 5px;
}


.flex-voice{
    margin:  5px;
    width: 80%;
    font-size: 80%;
    padding-left:5px;
    
}

.flex-voice-title {
  color: black;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #d3d3d3;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  margin:5px;
}

.flex-voice-title:before {
  content: '●';
  color: white;
  margin-right: 3px;
}




/*=== 画像の表示エリア ================================= */
.slide0{
  max-width      : 1000px;
  height     : 666px;
  margin     : 0 auto;
}

.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  max-width      : 1000px;
  height     : 666px;
  margin     : 0 auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}

.slide00{
  width      : 100vw;
  height     : 400px;
  margin     : 0 auto;
}

.slide2 {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100vw;
  height     : 400px;
  margin     : 0 auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}


/*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  max-width  : 1000px;
  height     : 666px;
  left       : -100%;
  animation  : slideAnime 25s ease infinite;
  }
 
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
.slide img:nth-of-type(4) { animation-delay: 18s }

 
/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { transform: translateX(-100%); opacity:0.5; }/*フレームイン開始 */
   7% { transform: translateX(100%); opacity:1; }/*フレームイン終了 */
  25% { transform: translateX(100%); opacity:1; }/*ここまで停止して、フレームアウト開始（b = 100 / スライド数） */
  32% { transform: translateX(200%); opacity:0.5; }/*フレームアウト終了（c = a） */
 100% { transform: translateX(200%); opacity:0; }/*待機 */
}

/*タイトル*/
.menu{
font-size:100%;
font-weight: 600;
margin:3px auto;
border-bottom:solid 4px;
border-color:#610B21 ;
width:95%
padding: 10px;
}

/*バナー*/
.content {
  margin: 0;
}

.content2 {
margin:5px;
}
.content2 ul{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content2 li{
width: calc(90%/4);
font-size: 80%;
margin: 5px;
background-color: #333;
transition:0.3s linear;
border: 3px double #CCC;
}
.content2 li:hover{
opacity:0.7;
transition:0.3s linear;
}
.content2 li a{
text-decoration: none;
display: block;
padding: 10px;
color: #FFF;
}

/* content */

section{
max-width: 1000px;
margin: 0 auto;
}

/* sec-all */
.sec-all{
display: block;
}

.sec-all h2{
font-size: 100%;
border-bottom: 1px solid #610B0B;
padding: 5px;
margin: 5px;
}

.top-img{
margin: 40px;
text-align: center;
}

/*切り替え表示設定*/
section .tab_item{
cursor: pointer;
font-size: 75%;
padding: 5px;
margin: 5px;
font-weight: bold;
width: calc(380px/2);
border: 1px solid #CCC;
transition: all 0.3s ease;
text-align: center;
float: right;
}
section .tab_item img{
max-width: 100%;
height: auto;
}

section .tab_item:hover {
opacity:0.5;
transition:0.3s linear;
}

.tab_c{
/* floatを解除 */
clear: both;
}

/*タブ切り替えの中身のスタイル*/
section .tab_content {
display: none;
overflow: hidden;
padding: 10px;
margin: 0 auto;
}
section .tab_content iframe{
margin: 0 auto!important;
}

/*ラジオボタンを全て消す*/
section input[name="tab_item"] {
  display: none;
}

/*選択されているタブのコンテンツのみを表示*/
section #sec1:checked ~ #sec1_content,
section #sec2:checked ~ #sec2_content,
section #sec3:checked ~ #sec3_content,
section #sec4:checked ~ #sec4_content,
section #sec5:checked ~ #sec5_content,
section #sec6:checked ~ #sec6_content,
section #sec7:checked ~ #sec7_content,
section #sec8:checked ~ #sec8_content,
section #sec9:checked ~ #sec9_content,
section #sec10:checked ~ #sec10_content,
section #sec11:checked ~ #sec11_content,
section #sec12:checked ~ #sec12_content,
section #sec13:checked ~ #sec13_content,
section #sec14:checked ~ #sec14_content,
section #sec15:checked ~ #sec15_content,
section #sec16:checked ~ #sec16_content,
section #sec17:checked ~ #sec17_content,
section #sec18:checked ~ #sec18_content,
section #sec19:checked ~ #sec19_content,
section #sec20:checked ~ #sec20_content,
section #sec21:checked ~ #sec21_content,
section #sec22:checked ~ #sec22_content,
section #sec23:checked ~ #sec23_content,
section #sec24:checked ~ #sec24_content,
section #sec25:checked ~ #sec25_content,
section #sec26:checked ~ #sec26_content,
section #sec27:checked ~ #sec27_content,
section #sec28:checked ~ #sec28_content,
section #sec29:checked ~ #sec29_content,
section #sec30:checked ~ #sec30_content
section #sec31:checked ~ #sec31_content,
section #sec32:checked ~ #sec32_content,
section #sec33:checked ~ #sec33_content,
section #sec34:checked ~ #sec34_content,
section #sec35:checked ~ #sec35_content,
section #sec36:checked ~ #sec36_content,
section #sec37:checked ~ #sec37_content,
section #sec38:checked ~ #sec38_content,
section #sec39:checked ~ #sec39_content,
section #sec40:checked ~ #sec40_content
{ display: block; }

/*選択されているタブのスタイルを変える*/
section input:checked + .tab_item {
  background-color: #CCC;
}

/*リスト用*/
#list_content{
display: flex;
}
.left_content{
width: 700px;
padding: 10px;
}
.list_in{
padding: 10px;
}
.list_in table{
width: 100%;
margin-bottom: 20px;
}
.list_in table td{
font-size: 80%;
padding: 10px;
line-height: 180%;
}
.list_in table td td{
border-bottom: 1px dotted #CCC; 
}
.rec-1{
background-color: #CCC;
width: 25%;
padding: 10px;
text-align: center;
}
.rec-2{
width: 70%;
padding: 5px;
border-bottom: 1px dotted #848484;
}
.right_content{
width: 250px;
padding: 10px;
}
.right_content ul{
list-style: none;
}
.right_content ul li{
font-size: 80%;
margin: 5px;
background-color: #333;
transition:0.3s linear;
border: 3px double #CCC;
}
.right_content ul li:hover{
opacity:0.7;
transition:0.3s linear;
}
.right_content ul li a{
text-decoration: none;
display: block;
padding: 10px;
color: #FFF;
}

/*各課見出し*/

.flex-1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

}

.flex-1 > *{
  max-width: 100%;
  text-align: center;
}

.flex-white:hover{
 opacity:0.5;
 transition:0.3s linear;
}

.hover-a a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/pv_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
  border: 1px solid #000000;
  box-sizing: border-box;
}

.hover-a a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/pv_icon2.jpg");
transition:0.3s linear;
  border: 1px solid #000000;
  box-sizing: border-box;

}

.hover-b a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/captain_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover-b a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/captain_icon2.jpg");
transition:0.3s linear;
  border: 1px solid #000000;
  box-sizing: border-box;

}

.hover5 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/gaisyo1_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;
}

.hover5 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/gaisyo1_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover6 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/gaisyo2_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover6 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/gaisyo2_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover7 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/gaisyojimu_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover7 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/gaisyojimu_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover8 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/logistics_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover8 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/logistics_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover9 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/kaihatsu_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover9 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/kaihatsu_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover10 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/kaihatsu2_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover10 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/kaihatsu2_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover11 a {
    width: 500px;
    background: url("https://www.ok-depot.jp/img/recruit/web_icon.jpg") no-repeat;
    display: block;
    text-indent: -9999px;
    border: 1px solid #000000;
    box-sizing: border-box;

}

.hover11 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/web_icon2.jpg");
transition:0.3s linear;
    border: 1px solid #000000;
    box-sizing: border-box;
}

/*アクティビティー*/

.flex-2{
  margin: 20px;
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-2 > *{
  max-width: 50%;
  text-align: center;
}

.hover1 a {
    width: 230px;
    background: url("https://www.ok-depot.jp/img/recruit/activity_recreation.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.hover1 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/activity_recreation2.png");
transition:0.3s linear;
}

.hover2 a {
    width: 230px;
    background: url("https://www.ok-depot.jp/img/recruit/activity_event.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.hover2 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/activity_event2.png");
transition:0.3s linear;
}

.hover3 a {
    width: 230px;
    background: url("https://www.ok-depot.jp/img/recruit/activity_sports.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.hover3 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/activity_sports2.png");
transition:0.3s linear;
}

.hover4 a {
    width: 230px;
    background: url("https://www.ok-depot.jp/img/recruit/activity_work.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.hover4 a:hover {
background-image:url("https://www.ok-depot.jp/img/recruit/activity_work2.png");
transition:0.3s linear;
}


.flex-3{
  margin: 20px;
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* footer */
footer {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 5px;
  color: #FFF;
  background-color: #610B0B;
  text-align: right;
  font-size: 70%;
}

/* line-list */
.line-list h3 { border-bottom: 1px solid brown; font-size: 100%; margin-bottom: 5px; }
.line-list h4 { border-bottom: 1px solid #ce4400; font-size: 100%; }
.line-list ul { list-style: none; display: flex; flex-wrap: wrap; }
.line-list li { margin: 5px; padding: 5px; background-color: #ffc4a7; }
.line-list ul li:hover { background-color: #ff6f29; }
.line-list a  { text-decoration: none; font-weight: bold; color: #000; }
.line-pdf div { border-radius: 10px; margin: 10px; padding: 5px; }
.line-pdf a   { font-size: 90%; display: block; margin: 10px; border-left: 5px solid #ffe670; padding-left: 10px; background-color: #fffbe9;}
.line-pdf a:hover  { background-color: #d0ffd0;}
.line-pdf iframe  { margin: 10px auto; width: 98%; padding: 5px;}
.line-pdf dt { list-style: none; font-size: 90%; display: block; margin: 10px; border-left: 5px solid #ffe670; padding-left: 10px; background-color: none!important; font-weight: bold; }
.line-pdf dd { list-style: none; font-size: 90%; display: block; margin: 10px; #ffe670; padding-left: 10px; background-color: none!important; }
.shime { color: brown; }

/* form */

.form img {
max-width: 100%!important;
height: auto;
width /***/:auto;
}
.form .newsBox{
margin: 10px;
border: 1px solid brown;
padding: 10px;
font-size: 90%;
}
.form .companydata {
    width: 99%;
    margin-right: 20px;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 100%;
    line-height: 240%;
}
.form td.t1{
padding:10px; margin: 5px;
text-align:left;
font-weight:bold;
background-color:#e9e9e9;
}
.form td.t2{
padding:10px; margin: 5px;
border:none;
text-align:left;
border:1px solid #ccc;
}
.form input[type="image"]{ margin: 10px auto; display: block; }
.low { height: 200px; overflow-y: scroll ; margin: 10px; padding: 5px; border: 1px solid #CCC; font-size: 80%; }
.low ul { list-style: none!important; }


/*レスポンシブデザイン*/

@media screen and (max-width:840px){
img{
max-width: 100%!important;
height: auto;
width /***/:auto;
}

header{ width: 100%!important; margin: 0px!important; }
.logo-font span{ display: none!important; }
.mail-font span{ display: none!important; }
.slide0{ width: 100%!important; height: 250px!important; }
.slide { width: 100%!important; height: 250px!important; }
.slide img{ width: 100%!important; height: auto!important; }
section{ width: 100%!important; }
section .tab_item{ width: calc(86%/2)!important; }
section .tab_item img{ display: none!important; }
section .tab_content { float: none!important; width: 100%!important; padding: 0px!important; }
section .tab_content iframe { max-width: 100%!important; }
.flex-1 { width: width: 100%!important; }
.hover-a a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover-b a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover1 a {
width: 40vw!important;
margin: 10px!important;
background-size:100% auto!important;
background-image:url("https://www.ok-depot.jp/img/recruit/activity_recreation2.png");
}
.hover2 a {
width: 40vw!important;
margin: 10px!important;
background-size:100% auto!important;
background-image:url("https://www.ok-depot.jp/img/recruit/activity_event2.png");

}
.hover3 a {
width: 40vw!important;
margin: 10px!important;
background-size:100% auto!important;
background-image:url("https://www.ok-depot.jp/img/recruit/activity_sports2.png");
}
.hover4 a {
width: 40vw!important;
margin: 10px!important;
background-size:100% auto!important;
background-image:url("https://www.ok-depot.jp/img/recruit/activity_work2.png");
}
.hover5 a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover6 a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover7 a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover8 a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover9 a {
    width: 100vw!important;
    background-size: 100%!important;
}
.hover10 a {
    width: 100vw!important;
    background-size: 100%!important;
}

.hover11 a {
    width: 100vw!important;
    background-size: 100%!important;
}

.flex-2 {
width: 100%!important;
margin: 0px!important;
padding: 0px!important;
}
.flex-2 > *{
  max-width: 100%!important;
  text-align: center;
}
.flex-3 {
width: width: 100%!important;
margin: 0!important;
padding: 0!important;
}
.flex-3 div { margin: 5px!important; }
.flex-3 .content { width: calc(90%/2)!important; }

.flex_photo-item {
width: 100vw!important;
}

footer{ width: 96%!important; }

#list_content{ display: block; }
.left_content{ width: 100%!important; padding: 0px!important; margin-bottom: 20px; }
.right_content{ width: 100%!important; padding: 0px!important; }
.right_content ul { display: flex!important; justify-content:center; flex-wrap: wrap; }
.right_content ul li{ width: calc(86%/2)!important; }

.flex-box{ display: block!important; width: 100%!important;}
.flex-white{ display: block!important; }

.rec-1{ padding: 5px!important; display: block!important; width: 98%; }
.rec-2{ padding: 5px!important; display: block!important; width: 98%; }

.content2 ul{ justify-content:flex-start!important; }
.content2 li{ width: calc(90%/2)!important; }
.timeline li{ margin-bottom: 10px!important;}

.line-pdf iframe  { margin: 10px auto; width: 98%; height: auto!important; padding: 5px; }

.form td.t1{ display: block!important; width: 90%!important; }
.form td.t2{ display: block!important; width: 90%!important; }

}