/* PC・スマホ共通スタイル */
*{
    box-sizing: border-box;
}

p{
    font-size: 18px;
}

body{
    max-width: 1200px;
    margin: auto;
    font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN","Meiryo","Arial","sans-serif";
}

header{
    display:flex;
    justify-content:space-between;
    width: 100%;
    margin:0 auto 0 auto;
    align-items: center;
}

#logo{
    width: 50%;
    height:50%;
}

#nav-pc{
    font-size: 14px;
    align-items: end;
}

#nav-pc ul{
    display: flex;

}

#nav-pc li{
    list-style: none;
}

/* ナビゲーションのリンクの装飾設定 */
#nav-pc a{
    text-decoration: none;
    margin-left: 20px;
    color: black;
}

#nav-pc a:hover{
    text-decoration: underline;
}

/* スマホ用ナビを非表示 */
#nav-sp,
#menu-sp {
  display: none;
}

/* メインビジュアル */
 #main-visual {
    position: relative;
  }

  #main-message {
    position: absolute;
    top: 20px;
    left: 0;
    color: white;
    max-width: 100%;
    height: 100%;
    width: 100%;
    z-index: 11;
  }

  #main-message > h1 {
    font-size:    60px;
    padding-left: 0px;
  }
  #main-message > p { 
    font-size: 35px;
    max-width: 90%;
  }

/* 見出し */

.index-h2{
    position: relative;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 0.2em;
    border-bottom: 5px solid #ccc;
    
  }
  
.index-h2::before {
    content: " ";
    position: absolute;
    display: inlihe-block;
    border-bottom: solid 5px #3a86ff;
    bottom: -5px;
    width: 25%;
  }
   /* 応募要項 */
 .table_headline {
    background-image: url(../image/kodai_background.png);
  }
   .table_description {
    background-color:whitesmoke;
  }

   .table_description2 {
    padding: 0 0 0 10px;
  }

  /* 応募用紙 */
   .form_logo {
    margin: 0 auto;
    text-align: center; /* a要素をインライン要素として中央寄せ */
  }

  .form_logo > a img {
    max-width: 100%;
    top: auto;
    bottom: 0;
    display: block;      /* 画像をブロック要素化 */
    margin: 0 auto;      /* ブロック要素に対して中央寄せ */
    height: auto;
  }

   /* ミッション */
 #information {
    margin: 40px auto 40px auto;
  }
 
 #mission-flex {
    display: flex; 
  }

  #mission-flex > div {
    width: 50%;
    margin: 20px;
  }

  #mission-photo {
    width: 100%; 
  }

  #mission-photo2 { 
    width: 100%;
  }

  #btn {
    font-size: 14px;
    border: 1px solid black;
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
    font-family: 'Meiryo', serif;
  }
  
  #btn a {
    color:black;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  /* 会社概要 */
 #company {
  margin: 80px auto 80px auto;
  }

  #company-table {
    width: 100%;
  }

  .tableheader {
    text-align: left;
    padding: 20px;
    border-bottom-color: #3a86ff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    width: 100px;
  }

  .tableheader-first {
    border-top-color: #3a86ff;
    border-top-width: 1px;
    border-top-style: solid;
  }

  .cell {
    padding: 30px;
    border-bottom-color: #ececec;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  
  .cell-first {
    border-top-color: #ececec;
    border-top-width: 1px;
    border-top-style: solid;
  }

  #company-flex {
    display: flex;
    width: 100%;
  }

  #company > iframe {
    width: 100%;
    height: 368px;
  }

/*会社概要*/
#company {
  margin: 0 20px 0 20px;
}

#company > h3 {
  margin-bottom: 20px;
}

.tableheader {
  width: 50px;
}

.cell {
  padding: 20px;
}

.company-iframe {
  width: 100%;
}

/* 申込みフォーム */
#contact img {
  max-width: 100%;
  display: block;
}

/* フッター */
footer {
  background-color:black;
  text-align: center;
  padding: 40px 80px 40px 80px;
}

#footer-logo {
  margin-bottom: 30px;
  color: white;
}

#footer-link {
  margin-bottom: 50px;
}

#footer-link > a {
  text-decoration: none;
  margin: 10px;
  color: white;
}

#footer-link > a:hover {
  text-decoration: underline;
}

#copyright {
  color: white;
}


/* 画面幅が768px以上のとき */
@media screen and (min-width: 768px) {
  /* PC用のスタイルを指定する */
  /* SP用ナビゲーション非表示 */
  #nav-sp {
    display: none;}
  #menu-sp {
    display: none;
  }

  .company-pc {
  width: 50%;
  padding: 10px;
  }

}


/* 画面幅が767px以下のとき */
@media screen and (max-width: 767px) {
  /* スマートフォン用のスタイルを指定する */
  /* PC用ナビゲーション非表示 */
  #nav-pc {
    display: none;
}

/* メインビジュアルスマホ対応 */
  #main-message > h1,

  #main-visual h1 {
    font-size: 20px;
    margin: 0px 0px 0px 0px;
  }
  
  #main-visual > div > p {
    font-size: 14px;
    max-width: 90%;
  }
  
/* ミッションスマホ対応 */
  #mission-flex #require {
    display: block;
  }

  #mission-flex > div {
    width: 100%;
    margin: 10px 0;
  }
 
 /* ハンバーガーメニュー */
 #menu-sp {
  display: block;
  background-color: transparent;
  float: right;
  padding: 0;
  border: none;
}

/* スマホ用ナビゲーションの表示切替*/
/* 初期状態、レイアウトと非表示設定 */

#nav-sp {
  background-color:rgba(0,0,0,0.9);
  position: fixed;
  left:30%;
  top: 10px;
  height:  80%;
  width:   70%;
  display: none;
  z-index: 100;
}

/* フッター部分スマホ用 */
footer {
  padding: 20px;
}

}

 /* ×ボタン */
 #close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
  border: none;
}

#nav-sp nav ul {
  padding-left: 0;
}

#nav-sp nav li {
  list-style: none;
}

/* ナビゲーションメニュー用ロゴ */
#logo-sp {
  margin: 80px 0 30px 20px;
} 

 /* ナビゲーションのリンクの装飾設定 */
 #nav-sp nav a {
  display: block;
  color: #ffffff;
}

#nav-sp nav a:hover {
   text-decoration: underline;
 }

 #nav-sp .menu {
   text-decoration: none;
   margin: 0 20px 0 20px;
   height: 44px;
   font-size: 16px;
   background-image: url("image/arrow.png");
   background-repeat: no-repeat;
   background-position: right top;
 }

 #sns {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

#sns > a {
  margin-right: 30px;
}

 /* メインビジュアル */
#main-visual {
  position: relative;
  /* height: 400px; */
}

#main-visual > div {
  text-align: left;
  height: 280px;
  padding:0 0 0 20px;
}

#main-visual > img {
  width: 100%;
  top: auto;
  bottom: 0;
}