:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#555;
  --line:#e8e8e8;

  --green:#bfe3b7;          /* ライトグリーン（お好みで調整） */
  --green-dark:#3b6d3b;

  --container: 980px;
  --radius: 999px;

  --header-h: 56px;

  --btn-radius: 12px; /* ← 角丸の強さ（8〜14くらいが自然） */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
  line-height:1.75;
}

/* ===== ヘッダー（任意） ===== */
.site-header{
  position: sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .85rem 1rem;
}
.brand{ 
  font-weight:700;
}
.brand img {
  height: 38px;
  width: auto;
  display: block;
}

.nav{
  display:flex;
  gap: .9rem;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color:var(--text);
  font-size:.9rem;
  opacity:.85;
}
.nav a:hover{ opacity:1; }

.nav-toggle{
  display:none;
  border:0;
  background:none;
  font-size:1.4rem;
}

/* ===== 共通 ===== */
.inner{
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto;
}

.section{
  padding: 4rem 0;
}

.content{
  margin-top: 1.2rem;
  font-weight: 500;
  color: black;
}

.content2{
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  color: green;
  width: 100%;                 /* ← title-underline と同じ右端にする */
  margin: 1.4rem 0 .6rem;     /* 余白はお好みで */
  display: flex;
  align-items: center;
  gap: .8rem;                 /* 文字と線の距離 */
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  color: var(--green-dark);   /* green系（今の green より馴染む） */
}

/* 右側の線 */
.content2::after{
  content: "";
  height: 2px;                /* 線の太さ */
  background: var(--green);   /* 線色：green */
  flex: 1;                    /* ←残り幅いっぱい伸ばす */
  border-radius: 999px;
}

/* ===== TOP ===== */
.hero{
  position: relative;
  height: calc(100vh - var(--header-h)); /* ←ヘッダー分だけ短く */
  overflow: hidden;
}
.hero-media{
  width: 100%;
  height: 100%;
  display: block;
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* トリミングして埋める */
  object-position: center;
  display: block;
}

/* 画像直下の概要テキスト */
.hero-bottom{
  padding: 2.2rem 0 0rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
.hero-summary{
  margin:0;
  color: var(--text);
  font-weight: 600;
  text-align: center;
}

/* ===== タイトル帯（背景あり・幅やや短い） ===== */
.title-band{
  width: 100%;
  margin: 0 auto;
  background: var(--green);
  color: darkgreen;
  text-align:center;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .9rem 1rem;
  border-radius: 10px;
}

/* ===== 下線タイトル（下線は幅やや短い） ===== */
.section-title{
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  text-align:left;
  color: green;
}
.title-underline{
  width: 100%;
  height: 6px;
  background: var(--green);
  border-radius: 999px;
  margin: .6rem 0 1.2rem;
}

/* ===== 項目と内容を“頭揃え”する dl ===== */
.info-list{
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

/* 1行＝2列（項目/内容） */
.info-row{
  display:grid;
  grid-template-columns: 9.5rem 1fr; /* 項目列の幅 */
  gap: 1rem;                         /* 項目と内容の隙間 */
  align-items:start;
}

.info-row dt{
  margin:0;
  font-weight: 800;
  color: green;
}
.info-row dd{
  margin:0;
  font-weight: 500;
  color: black;
}

.info-row a {
  color: seagreen;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.info-row a::after {
  background-color: seagreen; /* 下線の色 */
  bottom: -1px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 1.5px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}

/* リンクにホバーした際の下線の表示 */
.info-row a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

/* ===== ボタン ===== */
.btn-row{
  display:flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  justify-content: center; /* ←中央寄せ */
}
.btn-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.4rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: .9rem 1.2rem;
  border-radius: var(--btn-radius);
  font-weight: 800;
  border: 1px solid transparent;
  transition: transform .06s ease, opacity .2s ease, background-color .2s ease;
  white-space: nowrap;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: forestgreen;
  color:#fff;
}
.btn-primary:hover{
  transform: translateY(-3px);                 /* ←少し上がる */
  box-shadow: 0 10px 22px rgba(0,0,0,.12);     /* ←ふわっと浮く影 */
 }
 .btn-ghost {
  color: seagreen;
 }
 .btn-ghost:hover{
  transform: translateY(-3px);                 /* ←少し上がる */
  box-shadow: 0 10px 22px rgba(0,0,0,.12);     /* ←ふわっと浮く影 */
 }
 .btn:active{
  transform: translateY(-1px);                 /* 押した時ちょい戻る */
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

.btn-ghost{
  background:#fff;          /* グレーにしない */
  border-color:#111;
}
.btn-ghost:hover{
  background:#f5f5f5;
}

/* ===== 応募方法：インフォメーションボックス ===== */
.info-box{
  margin: 1.2rem auto 0;        /* ボタンとの間隔 */
  padding: 1rem 1.2rem;
  background: #fff3e6;          /* うすいオレンジ */
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 100%;             /* 横幅（お好みで） */
}

/* i アイコン */
.info-icon{
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #f28c38;          /* オレンジ */
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}

/* 縦線 */
.info-divider{
  width: 1px;
  background: #f28c38;
  align-self: stretch;          /* 高さいっぱい */
  opacity: .6;
}

/* テキスト */
.info-text{
  font-size: .95rem;
  line-height: 1.6;
  color: #333;
}
.info-text strong{
  font-weight: 800;
}


/* ===== フッター ===== */
.site-footer{
  border-top:1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
  text-align:center;
}

/* ===== レスポンシブ ===== */

/* タブレット以下：ボタン3つは2列に */
@media (max-width: 900px){
  .btn-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ：ナビを折りたたみ＆dlを縦並びに近づける */
@media (max-width: 768px){
  .nav{ display:none; }
  .nav.nav-open{
    display:flex;
    position:absolute;
    right: 1rem;
    top: 3.2rem;
    flex-direction:column;
    background: rgba(255,255,255,0.98);
    border:1px solid var(--line);
    border-radius: 12px;
    padding: .7rem;
    min-width: 210px;
  }
  .nav-toggle{ 
    display:block;
    color: black;
   }

  .title-band{ width: 100%; }
  .title-underline{ width: 100%; }

  .section-title{ text-align:left; }

  /* 項目/内容を狭い画面で読みやすく */
  .info-row{
    grid-template-columns: 7.5rem 1fr;
    gap: .75rem;
  }

  .btn-grid{
    grid-template-columns: 1fr;
  }
}