@charset "utf-8";

@import url("/css/common.css");

/*:not(.list-group-item-action) → リンクのある要素は除外し、リンクのないものだけスタイル適用*/
.list-group-item:not(.list-group-item-action) {
    color: #6c757d; /* グレーの文字色 */
    background-color: #c7d5e4; /* 明るいグレーの背景 */
    pointer-events: none; /* クリック不可 */
    opacity: 0.6; /* 半透明に */
    font-style: italic; /* 斜体にする */
}



/* 画像のレイアウト。headerロゴと画面右下のpagetop用の矢印(Class=".w-50")とfooter画像(.mw-100)は適用から外す*/
 img:not(.w-50):not(.mw-100):not([src="/img/logo_a_s.png"])  {
    display: block; /* ブロック要素にする（余白が反映しやすくなる） */
    margin-bottom: 20px; /* 画像の下に20pxの余白を作る */
    border: solid 1px #777777; /* 画像の枠線をグレー */
}

#accordion-content {
    display: none;
  }
  
  #accordion-trigger:checked + label + #accordion-content {
    display: block;
  }

  
/* 問合せ先Box */
.contact-box{
  padding: 2em 2em;
  border: double 5px var(--science-blue);
  display:inline-block;
  font-size: 90%;
}

h4 {
font-size: 20px;

}

.button-01 a {

  font-size: 20px;
  letter-spacing: 0.1em;/*文字と文字の間隔を少し広げて、読みやすく*/
  color: #fff;
  background: var(--science-blue);
  border: solid 1px var(--science-blue);
  font-weight: 700;
  border-radius: 10px;/*ボタンの角を丸くする*/
  display: block;/*リンクをブロックレベル要素として扱う*/
  box-sizing: border-box;/*指定したwidthを超えない*/
  max-width: 200px;
  text-align: center; /*ボタン内のテキストを中央揃え*/
  padding: 16px 64px;/*ボタン内側の余白*/
  margin: 24px;/*ボタン外側の余白*/
  margin-inline: auto;/*親要素の中でボタンが中央に配置*/
  text-decoration: none; /*リンクしたの下線を消す*/
  cursor: pointer;/*ウスカーソルがボタンの上に乗ったときに、指の形（ポインター）に*/
}

.button-01 a:hover {
  color: #333;
  border: solid 1px #333;
  background: initial;
}

.button-02 {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-02 a {

  font-size: 18px;
  letter-spacing: 0.1em;/*文字と文字の間隔を少し広げて、読みやすく*/
  color: #fff;
  background: var(--science-blue);
  border: solid 1px var(--science-blue);
  font-weight: 700;
  border-radius: 10px;/*ボタンの角を丸くする*/
  display:inline-block;/*ボタンを横に並べる*/
  box-sizing: border-box;/*指定したwidthを超えない*/
  max-width: 250px;
  text-align: center; /*ボタン内のテキストを中央揃え*/
  padding: 16px 32px;/*ボタン内側の余白*/
  margin-inline: auto;/*親要素の中でボタンが中央に配置*/
  margin: 24px;/*ボタン外側の余白*/
  text-decoration: none; /*リンクしたの下線を消す*/
  cursor: pointer;/*ウスカーソルがボタンの上に乗ったときに、指の形（ポインター）に*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-02 a:hover {
  color: #333;
  border: solid 1px #333;
  background: initial;
}

.button-03 a {

  font-size: 20px;
  letter-spacing: 0.1em;/*文字と文字の間隔を少し広げて、読みやすく*/
  color: #fff;
  background: var(--science-blue);
  border: solid 1px var(--science-blue);
  font-weight: 700;
  border-radius: 999px;/*ボタンの角を丸くする*/
  display: block;/*リンクをブロックレベル要素として扱う*/
  box-sizing: border-box;/*指定したwidthを超えない*/
  max-width: 450px;
  text-align: center; /*ボタン内のテキストを中央揃え*/
  padding: 16px 64px;/*ボタン内側の余白*/
  margin: 24px;/*ボタン外側の余白*/
  margin-inline: auto;/*親要素の中でボタンが中央に配置*/
  text-decoration: none; /*リンクしたの下線を消す*/
  cursor: pointer;/*ウスカーソルがボタンの上に乗ったときに、指の形（ポインター）に*/
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:  100%
}