@charset "UTF-8";
/* リセットCSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    line-height: 1.8;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/**********************会社概要共通パーツ**********************/

.section-top {
  margin-top: 4em;
}

.company_info-tabArea {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin: 10em 0 5em 0;
    }

.company_info-tab {
position: relative;
overflow: hidden;
font-family: "Noto Sans JP", 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
font-size: 1em;
padding: 20px 80px;
text-decoration: none;
color: #333;
border: 0.5px #9CA3AF solid;

transition: background-color 0.3s ease;
}

.company_info-tab:hover {
background-color: #19679A;
color: #fff;
border: #19679A 1px solid;
}

.company_info-tab-selected {
color: #fff;
border: 0.5px #19679A solid;
background-color: #19679A;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}



/* 会社情報セクションのスタイル */
.company-info-section {
    background-color: #fff; /* 背景色 */
    padding: 30px; /* 内側のパディング */

    /*width: 100%; /* コンテンツの幅 */
    max-width: 1280px; /* 最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

.company-info-section .button-group {
    display: flex; /* ボタンを横並びに */
    justify-content: center; /* 中央寄せ */
    margin-bottom: 30px; /* 下のマージン */
}

.company-info-section .button-group button {
    background-color: #eee; /* ボタンの背景色 */
    border: 1px solid #ccc; /* ボタンの枠線 */
    padding: 10px 20px; /* ボタンの内側のパディング */
    margin: 0 5px; /* ボタン間のマージン */
    cursor: pointer; /* カーソルをポインターに */
    font-size: 1em; /* フォントサイズ */
    transition: background-color 0.3s ease; /* ホバー時の変化を滑らかに */
}

.company-info-section .button-group button:hover {
    background-color: #ddd; /* ホバー時の背景色 */
}

.company-info-section .button-group button.active {
    background-color: #007bff; /* アクティブなボタンの背景色 */
    color: #fff; /* アクティブなボタンの文字色 */
    border-color: #007bff; /* アクティブなボタンの枠線色 */
}

.company-info-section h2::before {
  content: '';
  display: inline-block;
  width: 25px;  /* 画像サイズ */
  height: 7px;
  margin-right: 8px;  /* 文字との間隔 */
  vertical-align: middle;
  background-image: url('images/title-en-before.svg'); /* 画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
}

hr {
  border: none;
  border-top: 0.5px solid #d6d6d6;
}

.company-info-section h2 {
  text-align: center; /* 見出しを中央寄せ */
  margin-bottom: 30px; /* 下のマージン */
  color: #333; /* 見出しの色 */
  font-family: "Zen Old Mincho", 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  font-size: 2em;
  font-weight: 550;
  letter-spacing: 0.05em;
}

.back-topArea {
  display: flex;
  justify-content: center;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  width: 160px;
  padding: 12px 24px;
  margin: 5em;

  background-color: #26516D; /* ダークネイビー系 */
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  border: #26516D 1px solid;
}

.btn:hover {
  background-color: #fff;
  color:#26516D;
  border: #26516D 1px solid;
}

/**********************会社概要共通パーツここまで**********************/

/*
* {
  outline: 1px solid red;
}
*/

@media (max-width: 1400px) {
  html {
      font-size: 0.8rem;
  }

  .company_info-tab {
    padding: 15px 60px;
    }
}

@media (max-width: 1100px) {
  html {
    font-size: 0.75rem;
  }

  .section-title {
      margin-bottom: 0.5em;
  }
}

@media (max-width: 840px) {

}

@media (max-width: 768px) {
  html {
    font-size: 0.65rem;
  }

  .company_info-tabArea {
    gap: 0px;
  }

  .company_info-tab {
    font-size: 1.2em;
    gap: 0px;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 630px) {
  .company_info-tab {
    font-size: 1.1em;
    padding: 10px 40px;
    }
  

}

@media (max-width: 445px) {
  .company_info-tab {
    font-size: 1.1em;
    padding: 10px 20px;
    }
  
  .company_info-tabArea {
    margin: 10em 0 2em 0;

  }
}