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

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


/* ===== ヘッダー ===== */
header {
  background: #ffffff;
  text-align: center;
  padding: 20px 16px 18px;
  position: relative;

  /* 軽い区切り */
  /* border-bottom: 1px solid #e6eaf0; */
}

/* ===== タイトル ===== */
header .header-content h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #222;
}

/* 強調（コンファレンス部分） */
header .header-content h1 span {
  color: #005bac;
  font-weight: 800;
}

/* ===== サブ情報 ===== */
header .header-content p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #555;
  letter-spacing: 0.02em;
}

/* ナビゲーション(左メニューの設定) */
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;  /* ホバー時の文字色を設定 */
}

nav ul li a.active {
  background: #1f66a6;
  color: #fff;
}

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

#nav {
  flex: 0 0 17rem;
  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 h2 {
  margin-bottom: 1.5rem;
}

#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 {
  width: 70%;
  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;
}

/* ===== 原稿執筆要領・原稿提出ページ向けの調整 ===== */

#main h2 {
  margin-bottom: 2rem;
}

#main h3 {
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

#main p {
  margin: 0.8rem 1rem 1rem 1rem;
  line-height: 1.9;
}

#main ul,
#main ol {
  margin: 0.8rem 1rem 1.2rem 2.2rem;
  line-height: 1.8;
}

#main ul li,
#main ol li {
  margin-bottom: 0.6rem;
}

#main ul li:last-child,
#main ol li:last-child {
  margin-bottom: 0;
}

#main strong {
  display: inline;
  text-align: inherit;
  font-size: inherit;
  color: inherit;
}

#main .extended {
  color: red;
  font-weight: bold;
}

#main a {
  word-break: break-word;
}

/* 原稿書き方の改善 */

.writing-rules {
  margin: 1rem 1rem 1.5rem 2rem;
  line-height: 1.9;
}

.writing-rules li {
  margin-bottom: 1rem;
}

.highlight {
  color: red;
  font-weight: bold;
}

.format-box {
  background: #f9f9f9;
  border-left: 4px solid #ccc;
  padding: 1rem;
  margin: 1.5rem 1rem;
}

.format-title {
  font-weight: bold;
  font-size: 1.1rem;
  border-left: 4px solid #444;
  padding-left: 0.6rem;
  margin-bottom: 0.5rem;
}

.format-box ul {
  margin-left: 1.5rem;
  line-height: 1.8;
}

.center-link {
  display: block;
  text-align: center;
  margin: 1rem 0;
}

#main a.btn-solid {
  width: auto;
  white-space: nowrap;
  overflow-wrap: normal;
}

.center-button {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.btn-simple {
  display: inline-block;
  padding: 0.5rem 2rem;
  background: #525252;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 1rem;
}

#main h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;

  background: #f7f7f7;
  border-left: 5px solid #888;

  font-weight: bold;
  color: #333;

  box-shadow: none; /* ←消す */
}

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

/* ===============================
   全体
================================ */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

/* ===============================
   ヘッダー
================================ */
/* header {
  background: #ffffff;
  color: #222;
  padding: 1.2rem 1rem;
  text-align: center;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-bottom: 1px solid #e5e5e5;
}

header .header-content h1 {
  font-size: 1.8rem;
  font-weight: 600;
} */

/* ===============================
   レイアウト
================================ */
#container {
  display: flex;
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  gap: 1rem;
}

/* ===============================
   ナビ
================================ */
#nav {
  flex: 0 0 19rem;
  background: transparent;
}

nav {
  background: #ffffff;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

nav ul {
  list-style: none;
}

nav ul li + li {
  margin-top: 0.4rem;
}

nav ul li a {
  display: block;
  padding: 0.7rem 0.9rem;

  border-radius: 10px;
  text-decoration: none;

  color: #333;
  font-weight: 600;

  transition: 0.2s;
}

/* nav ul li a:hover {
  background: #f3f5f7;
  transform: translateX(2px);
} */

/* nav ul li a.active {
  background: #4f46e5;
  color: #fff;
} */

/* ===============================
   メイン
================================ */
#main {
  flex: 1;
  background: white;
  padding: 1.5rem;

  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===============================
   見出し
================================ */
#main h2 {
  margin-bottom: 2rem;
}

#main h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;

  padding: 0.6rem 0.8rem;

  background: #f7f7f7;
  border-left: 5px solid #1f66a6;

  font-weight: bold;
}

#main h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* ===============================
   本文
================================ */
#main p {
  margin: 0.8rem 1rem;
  line-height: 1.9;
}

/* ===============================
   リスト
================================ */
#main ul,
#main ol {
  margin: 0.8rem 1rem 1.2rem 2.2rem;
}

#main li {
  margin-bottom: 0.5rem;
}

/* ===============================
   リンク
================================ */
#main a {
  color: #0066cc;
  text-decoration: none;
}

#main a:hover {
  text-decoration: underline;
}

/* ===============================
   強調
================================ */
#main .extended,
.highlight {
  color: #c0392b;
  font-weight: bold;
}

/* ===============================
   カード（書式）
================================ */
.format-box {
  background: #ffffff;
  border: 1px solid #e5e5e5;

  border-radius: 10px;
  padding: 1rem;
  margin: 1.5rem 1rem;

  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.format-title {
  font-weight: bold;
  font-size: 1.1rem;

  border-left: 4px solid #888;
  padding-left: 0.6rem;

  margin-bottom: 0.5rem;
}

/* ===============================
   表
================================ */
#main table.str_table {
  width: 70%;
  margin: 1.5rem auto;
  border-collapse: collapse;
}

#main table.str_table th {
  background-color: #444;
  color: white;
}

#main table.str_table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #ccc;
}

/* ===============================
   ボタン
================================ */
.btn-simple {
  display: inline-block;
  padding: 0.6rem 1.6rem;

  background: #555;
  color: #fff;

  border-radius: 999px;
  text-decoration: none;

  transition: 0.2s;
}

.btn-simple:hover {
  background: #333;
}

.center-button {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

/* ===============================
   フッター
================================ */
footer {
  background: #222;
  color: #ddd;

  text-align: center;
  padding: 1.5rem 1rem;
  margin-top: 3rem;
}

footer a {
  color: #66aaff;
}

/* ===============================
   レスポンシブ
================================ */
@media (max-width: 768px) {
  #container {
    flex-direction: column;
  }

  #nav {
    width: 100%;
  }

  #main {
    padding: 1rem;
  }

  #main table.str_table {
    width: 100%;
  }
}

/* body.preload {
    visibility: hidden;
} */

.banner {
    width: 100%;
}

.banner img {
    width: 100%;
    height: auto;
}

.section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.section .text {
    flex: 1;
}

.section .image {
    width: 250px;
}

.section .image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.btn-apply {
  display: inline-block;
  padding: 16px 40px;

  background: #005bac;  
  color: #ffffff;      

  font-size: 20px;
  font-weight: 600;
  text-decoration: none;

  border-radius: 40px;
  transition: 0.2s;
}

/* ホバー */
.btn-apply:hover {
  background: #004999; 
}

.btn-apply {
  color: #fff !important;   
  text-decoration: none;
}

nav ul li a.limited-link {
  margin-top: 0.8rem;
  background: #fff7e6;
  color: #8a4b00;
  border: 1px solid #f0c36d;
  font-weight: 700;
}

nav ul li a.limited-link::before {
  content: "🔒 ";
}

nav ul li a.limited-link:hover {
  background: #ffe8b3;
  color: #6f3c00;
}

#header {
  min-height: 92px;
  background: #fff;
}

html {
  overflow-y: scroll;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* 左（日本機械学会） */
.title::after {
  content: "";
  width: 1px;
  height: 1.2em;
  background: #ccc;
}

/* 右（青タイトル） */
.title span {
  color: #005bac;
  font-weight: 800;
}

.banner {
  position: relative;
}

.photo-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.7rem;
  opacity: 0.9;
}

.photo-credit a {
  color: white !important;
  text-decoration: none;

  /* 黒縁 */
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.9),
   -1px 1px 2px rgba(0,0,0,0.9),
    1px -1px 2px rgba(0,0,0,0.9),
   -1px -1px 2px rgba(0,0,0,0.9);
}