/*-----------------------------------------------------
 キービジュアル
 ------------------------------------------------------*/

/* キービジュアル */
.key-visual {
  height: 500px;
}

#key-visual-comment {
  position: absolute; color: white; top: 37%; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; width: 100%;
}

.sp-disp {
  display: none;
}

.key-visual-container .key-visual-comment {
  font-family: 'Roboto', 'Noto Serif JP', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  line-height: 3rem;
  letter-spacing: .25rem;
}

.key-visual-container .shade {
  position: absolute;
  top: -13%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0,0,0,.4);
  height: 200px;
  width: 756px;
}

.key-visual-comment {
  
}

/* キービジュアルのコンテンツ画像 */
.key-visual .content {
  min-width: 1280px;
}

/* キービジュアル下にあるメッセージ */
.key-visual-message {
  position: absolute;
  bottom: 0;
  z-index: 20;
  width: 100%;
  text-align: right;
  color: white;
  font-size: .8rem;
  padding: 2px 0 2px 0;
}

/* キービジュアル下にあるメッセージの文字部分 */
.key-visual-message p {
  padding-right: 8px;
}

/*-----------------------------------------------------
 アバウトメッセージ（私たちについて）
 ------------------------------------------------------*/

/* アバウトメッセージ本体 */
.message {
  padding-top: 45px;
  padding-bottom: 45px;
  width: 63%;
  min-width: 680px;
  margin: 0 auto;
}

/* アバウトメッセージのタイトル */
.message-title {
  margin-bottom: 50px;
}

/* アバウトメッセージのテキスト */
.message-text {
  line-height: 1.8rem;
  text-align: left;
}

/*-----------------------------------------------------
 会社名の説明
 ------------------------------------------------------*/


.company-name-container {
  padding: 45px 0 45px 0;
  width: 96%;
}

.message-title.origin {
  margin-bottom: 40px;
}

.company-name-image {
  width: 100%;
  padding-bottom: 25px;
  vertical-align: middle;
}

.company-name-image img {
  width: 160px;
}

.logo-description {
  vertical-align: middle;
  font-size: 0.95rem;
  padding-left: 10px;
}

.logo-description .content {
  margin: 0 auto;
}

/* 会社名の説明セクション */
.company-name {
  display: table;
  width: 100%;
}

/* 一行 */
.company-name .row {
  display: table-row;
}

/* 言葉 */
.company-name .term {
  display: table-cell;
  line-height: 1.2rem;
  text-align: left;
  width: 155px;
}

/* 説明 */
.company-name .description {
  display: table-cell;
  line-height: 1.2rem;
  text-align: left;
}

/*-----------------------------------------------------
 カテゴリー
 ------------------------------------------------------*/

/* カテゴリーのコンテナ */
.category-container {
  display: flex;
  column-gap: 45px;
  padding-top: 45px;
  padding-bottom: 15px;
}

/* 各カテゴリー */
.category {
  flex-grow: 1;
  max-width: 50%;
}

/* 各カテゴリーのタイトル */
.category-title {
  margin-bottom: 45px;
}

/* 画像ボックス */
.image-box {

}

/* 画像ボックスの行 */
.image-box-row {
  display: flex;
  column-gap: 5px;
  margin-bottom: 30px;
}

/* 画像ボックスの列 */
.image-box-column {
  flex-grow: 1;
  flex-basis: 50%;
}

/*-----------------------------------------------------
 インフォメーション（新着情報）
 ------------------------------------------------------*/

/* インフォメーションのセクション */
.topics-section {
  padding-top: 45px;
  padding-bottom: 90px;
}

/* インフォメーションのタイトル */
.topics-title {
  padding-bottom: 50px;
  letter-spacing: .18rem;
}

/* インフォメーションのコンテナ */
.topics-container {
  padding-top: 15px;
  padding-bottom: 15px;
  height: 300px;
  overflow: hidden;
  overflow-y: scroll;
}

/* インフォメーションの本体 */
.topics-item {
  padding: 15px 15px 15px 0;
}

/* インフォメーションの年月日 */
.topics-time {
  line-height: .9rem;
  margin-bottom: .4rem;
  font-size: .9rem;
}

/* インフォメーションの年月日のアクセント */
.topics-time-accent {
  background-color: #df0000;
  height: .9rem;
  display: inline-block;
  vertical-align: top;
  width: 6px;
  margin-right: 8px;
}


@media only screen and (min-width: 1281px) {
  .key-visual-container {
    position: relative;
  }

  .key-visual {
    height: auto;
    padding-top: 39%;
  }
  
  .top-image {
    height: auto;
    padding-top: 25%;
  }

  .key-visual-container .shade {
    top: -9%;
  }
  
  #key-visual-comment {
    top: 38%;
  }
}

.yousetsu .board {
  top: 200px;
}

.yunbo .board {
  top: 200px;
}

.md120 .board {
  top: 200px;
}

@media only screen and (max-width: 767px) {

  .circle-humberger {
    height: 0;
  }

  /* キービジュアル */
  .key-visual {
    height: 300px;
  }

  .company-name-container {
    width: 98%;
  }

  .key-visual .content {
    min-width: 768px;
  }

/* アバウトメッセージ本体 */
.message {
  padding-top: 25px;
  padding-bottom: 5px;
  width: 97%;
  min-width:auto;
  margin: 0 auto;
}

/* アバウトメッセージのタイトル */
.message-title {
  margin-bottom: 20px;
}

.nav-set {
  display: block;
}
  

/* メッセージのテキスト */
.message-text {
  line-height: 1.4rem;
}


  /* ページナビゲーション */
.page-nav {
  padding-bottom: 30px;
  margin-bottom: 35px;
}

/* リンク用イメージ画像 */
.page-nav-image {
  background-color: black;
  height: 240px;
  margin-bottom: 15px;
}

.page-nav-image .content {
  min-width: 322px;
}

.header-mark {
  width: 1.2rem;
  vertical-align: bottom;
  margin-right: 5px;
}

.header-mark2 {
  width: 2.8rem;
  vertical-align: bottom;
  margin-left: 35px;
}


  /* ページナビゲーションのタイトル */
  .page-nav-title {
    padding-top: 25px;
    margin-bottom: 25px;
    letter-spacing: .18rem;
  }

  /* ページナビゲーションのテキスト */
  .page-nav-text {
    margin-bottom: 35px;
    line-height: 1.4rem;
  }

  .logo-description {
    margin-top: 20px;
    font-size: inherit;
  }

  .company-name-container {
    padding: 15px 0 15px 0;
  }

  .company-name-section {
  
  }


  .company-name-image img {
    width: 120px;
  }

  /* ページナビゲーションボタン */
.page-nav-button {
  width: 180px;
  margin: 0 auto;
}

/* ページナビゲーションボタンの動作リンク */
.page-nav a {
  display: inline-block;
  line-height: 1.8rem;
  width: 100%;
  text-align: center;
  font-size: .8rem;
  border: 1px solid #1D2087;
  color: #1D2087;
}

.page-nav-button .button-title {
  padding-right: 8px;
}

.page-nav-button .arrow {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.page-nav a:hover {
  background-color: #1D2087;
  color: #ffffff;
}

.company-name-container {
  width: 97%;
}


.category-container {
  display: block;
}

.category {
  flex-grow: unset;
  max-width: 95%;
  margin: 0 auto;
}

/* お知らせのセクション */
.topics-section {
  margin-bottom: 15px;
}

/* お知らせのコンテナ */
.topics-container {
  padding-top: 10px;
  padding-bottom: 20px;
  min-height: 300px;
}

/* お知らせのタイトル */
.topics-title {
  padding-top: 25px;
  padding-bottom: 30px;
  letter-spacing: .18rem;
}

/* お知らせの本体 */
.topics-item {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.4rem;
}

/* お知らせの年月日 */
.topics-time {
  line-height: .8rem;
  margin-bottom: .6rem;
}

/* お知らせの年月日のアクセント */
.topics-time-accent {
  background-color: #df0000;
  height: .8rem;
  display: inline-block;
  vertical-align: top;
  width: 6px;
  margin-right: 8px;
}

.sp-none-br {
  display: none;
}

/* インフォメーションのセクション */
.topics-section {
  padding-top: 5px;
  padding-bottom: 45px;
}


.company-name-container {
  display: block;
}

.company-name-image {
  display: block;
  text-align: center;
  width: 100%;
  padding-bottom: 20px;
}

.company-name-image img {
  width: 160px;
}

.logo-description {
  display: block;
}

.message-title.origin {
  margin-bottom: 10px;
}

.key-visual-container .shade {
  position: absolute;
  top: -34%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0,0,0,.4);
  height: 160px;
  width: 330px;
}

.key-visual-container .key-visual-comment {
  font-family: 'Roboto', 'Noto Serif JP', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: .1rem;
}
.sp-disp {
  display: block;
}

#key-visual-comment {
  top: 26%;
}

/* キービジュアル下にあるメッセージ */
.key-visual-message {
  font-size: .5rem;
  line-height: 1rem;
  padding: 2px 0 2px 0;
}

.key-visual-message p {
  padding-right: 5px;
}

}