body {
      margin: 0;
      font-family: 'Helvetica Neue', sans-serif;
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
    }

    header {
      text-align: center;
      padding: 80px 0 40px;
    }

    header h1 {
      font-size: 2.8rem;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }

    header p {
      font-size: 1.2rem;
      color: #ccc;
    }

    .buttons {
      margin-top: 30px;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background-color: #00bcd4;
      color: #fff;
      padding: 14px 28px;
      border: none;
      border-radius: 30px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
      text-decoration: none;
    }

    .btn:hover {
      background-color: #0097a7;
    }

    section {
      max-width: 800px;
      margin: 60px auto;
      text-align: center;
    }

    section h2 {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }

    section p {
      font-size: 1rem;
      line-height: 1.6;
      color: #ddd;
    }

.suuna-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 10px;
}


#fmenu{
      margin: 60px auto 0px;
}

#questions{
 padding: 2em;
}

#questions h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#questions p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}

#questions a{
color:white;
}

#questions a:hover{
color:#00bcd4;
}


#about{
 padding: 2em;
}

#about h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#about p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}


#guide{
 padding: 1em;
}

#guide h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#guide h3{
font-size: 1.2em; text-align: left; margin-bottom: 0.5em;
}

#guide p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}

#guide span{
font-size: 1.1em; line-height: 1.8; text-align: left;margin-left: 1em;
}

#guide a{
color:white;
}

#guide a:hover{
color:#00bcd4;
}

#unei{
 padding: 2em;
}

#unei h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#unei img{
width:200px;
border-radius: 25%;
  float: left;
  max-width: 40%;
  height: auto;
  margin: 0.2em 1em 0.6em 0; /* 文字がくっつかないよう余白 */
}

#unei p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}


#kojin{
 padding: 2em;
}

#kojin h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#kojin p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}


#tokutei{
 padding: 2em;
}

#tokutei h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#tokutei p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}


#contact{
 padding: 2em;
}

#contact h2{
font-size: 1.8em; text-align: left; margin-bottom: 1em;
}

#contact p{
font-size: 1.2em; line-height: 1.8; text-align: left;
}

/*  */
table{
  border-collapse: collapse;
  width: 100%;
font-size:90%;
}
.tb01 th,
.tb01 td{
  padding: 10px;
  border: solid 1px #ccc;
  box-sizing:border-box;
}
.tb01 th {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
  text-align:center;
}

.tb01 td {
  background: #fff;
  color: #004d4d;
  text-align:left;
}

    .btn-mn {
      background-color: #00bcd4;
      color: #fff;
      padding: 7px 14px;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.3s ease;
      text-decoration: none;
    }

    .btn-mn:hover {
      background-color: #0097a7;
    }

    footer {
      font-size: 0.9rem;
      color: #fff;
      text-align: center;

  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 24px;
      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);

  border-top: 1px solid #ddd;
  line-height: 24px;
  z-index: 999;
    }


:root{
  --tabbar-h: 64px;                 /* 本体の高さ（テキスト2行でも44px以上を確保） */
  --bg: #ffffff;
  --ink: #223041;
  --muted: #6b7b8a;
  --brand: #2b7ec1;
  --border: rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f141a;
    --ink: #e6eef7;
    --muted: #a6b8c9;
    --brand: #5db2ff;
    --border: rgba(255,255,255,.12);
  }
}



/* 下部固定メニュー */
.tabbar {
  position: fixed;
  bottom: 24px; /* コピーライトの分、少し上に */
  left: 0; right: 0;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid #ddd;
  z-index: 1000;
}

.tabbar .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
}
.tabbar .tab svg {
  width: 24px; height: 24px;
  margin-bottom: 2px;
  fill: currentColor;
}
.tabbar .tab.is-active {
  color: #2b7ec1;
  font-weight: 600;
}


.has-sub{ position: relative; }

/* サブメニュー：ギャップ無し配置＋表示時だけスライド */
.submenu{
  position: absolute;
  left: 50%;
  bottom: 100%;                         /* ← タブ直上に配置（ギャップ無し） */
  transform: translateX(-50%) translateY(10px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  padding: 8px;
  display: grid; gap: 6px;
  opacity: 0; pointer-events: none; z-index: 1001;
  transition: opacity .18s ease, transform .18s ease;
}

/* “橋”となる不可視ヒットエリア（下方向に伸ばす） */
.submenu::before{
  content:"";
  position:absolute;
  left: -12px; right: -12px;            /* 少し左右にも余裕を持たせる */
  height: 12px;                         /* ← これが橋。値は8?14px程度でOK */
  bottom: -12px;                         /* サブメニューの外側に出す */
  pointer-events: auto;
}

/* 吹き出しの三角は見た目だけ（任意） */
.submenu::after{
  content:"";
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; background:#fff; border-left:1px solid var(--border);
  border-bottom:1px solid var(--border); rotate:45deg;
}

/* 表示条件：PCはhover、スマホ/キーボードはfocus-within */
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.submenu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:#223041; text-decoration:none;
}
.submenu a:hover{ background:#f2f8ff; color:var(--brand); }



@media screen and (max-width:480px) {
	/*　画面サイズが480px以下の場合ここの記述が適用される　*/

#questions{
 padding: 1em 0.5em;
}

#guide{
 padding: 1em 0.5em;
}

#about{
 padding: 1em 0.5em;
}


}




:root{
  /* 色は好みに合わせて調整（ベージュ基調に合う控えめトーン） */
  --c-text:#333;
  --c-sub:#666;
  --c-border:#e6e0d6;
  --c-badge:#eef3ff;
  --c-badge-text:#2b4fd0;
  --c-badge-update:#fff4e5;
  --c-badge-update-text:#8a4b00;
  --c-badge-event:#eaf7f0;
  --c-badge-event-text:#227a4b;
  --c-new:#d7263d;
}

.news-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--c-border);
}

.news-item{
  display:grid;
  grid-template-columns: 10ch 1fr auto; /* 日付 / タイトル / バッジ */
  gap:1rem;
  align-items:start;
  padding:0.9rem 0;
  border-bottom:1px solid var(--c-border);
  color:var(--c-text);
}

/* NEWマーク（直近などに使う任意装飾） */
.news-item.is-new .news-date::after{
  content:"NEW";
  margin-left:.5rem;
  font-size:.72rem;
  line-height:1;
  padding:.16rem .36rem;
  border-radius:.4rem;
  background:color-mix(in oklab, var(--c-new) 12%, white);
  color:var(--c-new);
  border:1px solid color-mix(in oklab, var(--c-new) 40%, white);
}

/* 日付 */
.news-date{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  color:var(--c-sub);
  line-height:1.4;
}

/* タイトル（2行省略） */
.news-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-decoration:underline;
  color:inherit;
  line-height:1.5;
}
.news-title:hover,
.news-title:focus{
  text-decoration:underline;
  outline: none;
}

/* カテゴリバッジ（任意） */
.news-tag{
  white-space:nowrap;
  align-self:center;
  font-size:.8rem;
  padding:.25rem .5rem;
  border-radius:999px;
  background:var(--c-badge);
  color:var(--c-badge-text);
  border:1px solid color-mix(in oklab, var(--c-badge-text) 25%, white);
}
.news-tag.is-update{
  background:var(--c-badge-update);
  color:var(--c-badge-update-text);
  border-color: color-mix(in oklab, var(--c-badge-update-text) 30%, white);
}
.news-tag.is-event{
  background:var(--c-badge-event);
  color:var(--c-badge-event-text);
  border-color: color-mix(in oklab, var(--c-badge-event-text) 30%, white);
}

/* スマホ（縦積み） */
@media (max-width: 640px){
  .news-item{
    grid-template-columns: 1fr;    /* 1カラム */
    gap:.4rem;
  }
  .news-date{
    order:1;
    font-size:.9rem;
  }
  .news-title{
    order:2;
  }
  .news-tag{
    order:3;
    justify-self:start;
  }
}

/* キーボード操作のフォーカス見やすく */
.news-title:focus-visible{
  outline:2px solid color-mix(in oklab, var(--c-badge-text) 60%, white);
  outline-offset:2px;
}