/* ======================================= */
/* =========Indexページ用================= */
/* ======================================= */
:root{
  --myblue:#1D60B0; /* var(--myblue) */
  --myorange:#ffb000; /* var(--myorange) */
  --mybg:#f6f6f6; /* var(--mybg) */
}

.section h2 {font-size:20px; font-weight:500;}


.menu-link{
  font-size:100%;
  color: var(--myblue);
  display: block;          /* 背景を文字幅にするため */
  text-decoration: none;          /* 下線なし */
  padding:0;
  margin:0;
  background:#fff;
  border-radius:8px;
  border:1px solid #1D60B0;
  position: relative; /* ←これ重要 */
  transition: transform 0.2s ease, background-color 0.2s ease;      /* なめらか変化 */
 }

.menu-link a{
  text-decoration:none;
  color: var(--myblue);
  display: block; /* クリック領域拡張 */  
  padding: 2px 10px;  /* ←ここに集約 */
  transition: all 0.2s ease;
  
}

.menu-link a:visited { 
  color: var(--myblue);

}

.menu-link a:hover {
  text-decoration: none;
  font-weight:500;
  text-underline-offset: 4px;
  text-decoration-color: var(--myblue);
}


.menu-link:hover {
  transform: translateY(-1px); 
 background-color:#eaeaea;
}

.nav-menu{
  display: flex;
  flex-wrap:wrap;
  line-height:1.8;
  background:var(--mybg);
  padding:5px 32px;
  padding-bottom:14px;
   border-bottom:1px solid rgba(0,0,0,0.1);
}

.nav-menu ul {
 justify-content: flex-start;
  display: flex;
  list-style: none;
  gap: 10px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.top-text{
  font-size:125%;
  font-weight:bold;
  line-height:1.8;
  padding:2em;
}
.hero{
max-width:1600px;
 background-color:var(--mybg);
  position:relative;
  padding: 0;
 overflow: hidden;
  border-radius: 3px;
  margin:0 auto;
 display:flex;
  justify-content:center;
 }
.hero-caption{
  position:absolute;
  bottom:7%;
  left:7%;
  padding:7px;
  font-size:85%;
  border-radius:10px;
  background:rgba(200,200,200,0.5);
}
 
.hero-img {
  border: 1px solid #ddd;
  border-radius: 0px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  width:100%;
  max-width:100%;
  height: auto; 
  display: block;
}

 
.update{  
  font-size:18px;
   max-width:1600px;
 color:#333;
  background:var(--mybg);
  padding-top:36px;
  padding-bottom:0px;
  display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:0 auto;
}

.update2{  
  font-size:18px;
   max-width:1600px;
 color:#333;
  background:var(--mybg);
 padding:5px 48px;
  padding-top:0px; 
   display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.intro{
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 60px;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  text-align: left;
  background-color:var(--mybg);
}

.intro h2{
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* ===== ○○とは？ ===== */

.kaisetsu600{
 max-width:1600px;
 font-size:16px;
 color:#444;
  background:var(--mybg);
  padding:0px 48px;
  display:flex;
  justify-content:center;
  text-align:left;
  line-height:1.8;
  margin:0 auto;
}

.kaisetsu600 p{
  max-width:600px;
  margin-top: 0;
  display: block;
}


/*--- h2の解説文用（全体中央寄せ、h2中央寄せ、本文左寄せ） ---*/
.kaisetsu{
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 48px;
  background: var(--mybg);
  text-align: center; /* ← 外側を中央寄せ */
}

/* 内側ラッパー（これが重要） */
.kaisetsu-inner{
  max-width: 600px;
  margin: 0 auto;     /* ← 中央に配置 */
  text-align: left;   /* ← 中は左揃え */
}

/* 見出し*/
.kaisetsu-inner h2{
  text-align: center;
    font-size: 22px;
  font-weight: 500;
  margin-bottom: 16px;
  position: relative;
}

/* 下に細いライン */
.kaisetsu-inner h2::after{
  content: "";
  display: block;
  width: 65%;
  height: 2px;
  background-color:var(--myblue);
  margin: 4px auto 0;
  opacity: 0.6;
   transition: 0.3s;
}

.kaisetsu-inner h2:hover::after {
  width: 100%;
}


/* 本文 */
.kaisetsu p{
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  margin: 0;
}

.kaisetsu-inner h2 a {
  display: block;   /* ←これを追加 */
  color: var(--myblue);
  text-decoration: none;
  transition: all 0.2s ease;
}

.kaisetsu-inner h2 a:hover {
    text-decoration: none;
  transform: translateY(-1px);
  text-underline-offset: 6px;
  background-color:#F2FFF7;
}



.counter{
 max-width:1600px;
 display:flex;
  flex-direction:column;   /* ← 縦並び これが必須 */
  align-items:center;
 font-size:80%;
 color:#333;
  background:var(--mybg);
  text-align:center;
  line-height:1.8;
  padding-top:10px;
  padding-left:10px;
  margin: 0 auto;
}