/* 全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ボディ全体の設定 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
}

/* ヘッダー */
header {
  background: linear-gradient(45deg, #FFFFFF 50%,#000000 100%);
  color:rgba(0,0,0,.4); /*文字を透過色に*/
  text-shadow: 1px 1px 2px #ccc, 0 0 #000;
  padding: 1rem;
  text-align: center;
}

header .header-content h1 {
  margin: 0;
  font-size: 1.8rem;
}

/* ナビゲーション(左メニューの設定) */
nav {
  background-color: #444;
  padding: 0.5rem;
  border-radius: 6px;
}

nav ul {
  list-style: none;
}

nav ul li a {
  margin: 0.25rem;
  padding: 0 0.5rem;
  border-radius: 4px;
  display: block;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

nav ul li a:hover {
  background-color: #dedede; /* ホバー時の背景色を設定 */
  color: black;  /* ホバー時の文字色を設定 */
}


/************* メインコンテンツ *************/
#container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0 1rem;
}

#nav {
  flex: 0 0 14rem;
  background-color: #eaeaea;
  padding: 1rem;
}

#main {
  flex: 1;
  min-width: 300px;
  background-color: white;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#main h3 {
  padding: 0em 1rem;/*文字の上下 左右の余白*/
  color: #333;/*文字色*/
  background: #FFFAFA;/*背景色*/
  box-shadow: 1px 1px #605649, 2px 2px #605649, 3px 3px #605649, 4px 4px #605649;
  text-shadow: -1px -1px white;
/*  border-left: solid 5px #7db4e6;左線*/
/*  border-right: solid 3px #B67B03;右線*/
/*  border-bottom: solid 3px #B67B03;下線*/
}

#main h4 {
  padding: 1rem 1rem 0 1rem;/*文字の上下 左右の余白*/
}

#main p {
  margin: 1em;
}

#main .indent_4 {
  text-indent: -4em;
  padding-left: 4em;
}
#main .indent_1 {
  text-indent: 1em;
  padding-bottom: 0.5em;
}

#main ul {
  margin: 0.5rem 0.5rem 0.5rem 3rem;
}

#main ol {
  margin: 0.5rem 0.5rem 0.5rem 3rem;
}

#main strong {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 150%;
  color: red;
}

#main s {
  font-weight: normal;
  color: black;
}

#main em {
  font-weight: bold;
}

#main table {    /* 表の設定 */
  margin: 3% 0;
}

#main table.str_table {
  margin: auto;
  border: 1px solid;
}

#main table.str_table th{
  background-color: #444;
  color: white;
  border: 1px solid black;

}

#main table.str_table td{
  border: 1px solid;
  padding: 5px 5px;  /* 表内の余白設定 */
}

#main .extended {
  color: red;
}

/* ツールチップの設定 */
#main .tooltip {
  position: relative; /* ツールチップの位置の基準に */
  cursor: pointer; /* カーソルを当てたときにポインターに */
}

#main .tooltip-text {
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute; /* 絶対配置 */
  left: 50%; /* 親に対して中央配置 */
  transform: translateX(-50%); /* 親に対して中央配置 */
  bottom: -60px; /* 親要素下からの位置 */
  display: inline-block;
  padding: 10px 20px; /* 余白 */
  white-space: nowrap; /* テキストを折り返さない */
/*   font-size: 1rem; フォントサイズ */
/*   line-height: 1.3; 行間 */
  background: #fff; /* 背景色 */
  color: #000; /* 文字色 */
  border-radius: 3px; /* 角丸 */
  transition: opacity 1s ease-in, visibility 1s ease-in; /* 出現を早く */
}

#main .tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out; /* 終了をゆっくり */
}
/* ツールチップの設定end */

/* ボタン */
#main a.btn-solid {
display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 64px;
  padding: 8px 24px;
  font-family: sans-serif;
  font-size: 24px; /* ボタン内の文字サイズ */
  color: #fff; /* 文字色 */
  text-align: center;
  overflow-wrap: anywhere;
  background-color: #525252; /* 背景色指定 */
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
}

/* ボタンのホバースタイル */
#main a.btn-solid:hover {
   .buttonRound {
    transition: background-color 0.2s;
  }

  .buttonRound:hover {
    background-color: #525252;
  }
}

/* ボタンを中央に配置 */
.center-button {
  display: block; /* ブロック要素化 */
  margin: 2rem auto; /* 上下余白と中央揃え */
  width: fit-content; /* ボタン幅を内容に合わせる */
}

/************* フッター *************/
footer {
  background: linear-gradient(45deg, #FFFFFF 50%, #000000 100%);
  color: black;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}

footer a {
  color: #0078d4;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}