@charset "utf-8";

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tangerine&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=M+PLUS+1p:wght@400;500;700;800;900&display=swap");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/*keyframes.cssの読み込み
---------------------------------------------------------------------------*/
@import url("keyframes.css");

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
  margin: 0px;
  padding: 0px;
  color: #303336;
  /*全体の文字色*/
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
  /*フォント種類*/
  font-size: 16px;
  /*文字サイズ*/
  line-height: 1.5;
  /*行間*/
  background: #f3f1e7;
  /*背景色*/
  -webkit-text-size-adjust: none;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
form {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style-type: none;
}

ol {
  padding-left: 40px;
  padding-bottom: 15px;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  font-size: 100%;
  border-spacing: 0;
}

video {
  max-width: 100%;
}

iframe {
  width: 100%;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
  color: #303336;
  /*リンクテキストの色*/
  transition: 0.2s;
  /*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
  text-decoration: dotted underline;
  /* dot下線を出す */
}

a:hover {
  color: #b8860b;
  /* マウスオン時の文字色 */
  text-decoration: underline solid;
}

/* アクセシビリティのための必須設定*/
a:focus {
  color: #b8860b;
  outline: 1px dotted #778899;
  /* アクセシビリティのため必須 */
  outline-offset: 2px;
}

a:active {
  color: #9c6c08;
  transform: scale(0.98);
  opacity: 0.8;
}

/*inner
---------------------------------------------------------------------------*/
.inner {
  max-width: 1400px;
  /*サイトの最大幅*/
  margin: 0 auto;
  padding-left: 2%;
  padding-right: 2%;
}

/*ヘッダー
------------------------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  position: relative;
  padding: 10px;
  /*ヘッダー内の余白*/
}

/*ヘッダーブロック（トップページへの追加設定）*/
.home header {
  padding: 0px;
  /*余白をなしに*/
  display: none;
  /*スライドショーの邪魔なので非表示に*/
}

/*ロゴ画像*/
header #logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

header #logo img {
  height: 60px;
  object-fit: contain;
}

/* ヘッダー部プロジェクトタイトルエリア*/
.titlearea {
  color: #fff;
  width: 100%;
  font-size: 110%;
  font-family: "BIZ UDPGothic", sans-serif;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 1rem 4rem;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.8);
  background-image: radial-gradient(
    circle,
    rgba(170, 125, 11, 0.8),
    rgba(183, 140, 19, 0.8) 26%,
    rgba(224, 185, 57, 0.8) 68%,
    rgba(227, 197, 97, 0.8) 82%,
    rgba(255, 255, 255, 0)
  );
  text-decoration: none;
}

.sp-br{
deisplay:none;
}


/*メインメニューのブロック
-----------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
  position: relative;
  z-index: 10;
  text-align: center;
  /*文字を中央に*/
  background: #fff;
  /*背景色*/
  border-top: 1px solid #ccc;
  /*上の線の幅、線種、色*/
  border-bottom: 1px solid #ccc;
  /*下の線の幅、線種、色*/
  font-family: "Questrial", sans-serif;
  /*冒頭で読み込んだGoogle Fontsを適用する指定*/
  height: 75px;
  /*高さ。「#menubar ul li a」や「fixmenu」とも連動するので変更の際は注意。説明はこの下の「#menubar ul li a」で書いています。*/
}

/* メニュー */
#menubar ul.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 100%;
  line-height: 2;
}

/* メニュー１個あたりの設定 */
#menubar ul.inner li {
  flex: 1;
  text-align: center;
  font-size: 18px;
  position: relative;
}

#menubar ul.inner li a {
  display: block;
  position: relative;
  text-decoration: none;
  height: 65px;
  /*メニューブロックの高さ。ここの「75」と、下の行の「10」を合計した「85」の数字と、上の「#menubar」の「height」および下のfixmenu設定に２箇所ある「margin-top」の数字を合わせて下さい。*/
  padding-top: 10px;
  /*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。※変更の際は、上の行の注意書きもしっかり読んで下さい。*/
  text-align: center;
}

/*メニュー下の飾り文字*/
#menubar ul li span {
  display: block;
  font-size: 11px;
  /*文字サイズ*/
  color: #303336;
  /*文字色*/
  letter-spacing: 0.1em;
  /*文字間隔を少し広くとる設定*/
  text-align: center;
}

#menubar li.has-submenu > a {
  display: flex;
  padding-left: 0;
  text-indent: 0;
  cursor: pointer;
  /* クリック可能に見せる */
  align-items: center;
  /* ← 縦方向中央揃え */
  justify-content: center;
}

#menubar li.has-submenu > a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f103";
  /* または ▸ ▼ ▾ などでもOK */
  margin-right: 0.5em;
  /* ← これで矢印とテキストの隙間を明示的に調整 */
  font-size: 0.8em;
  font-weight: 900;
  color: #999;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
  /* 必要に応じて微調整 */
  line-height: 1;
}

/* 開いたときの矢印（上向き） */
#menubar li.has-submenu.open > a::before {
  content: "\f102";
  /* ▲ 上向き矢印（fa-chevron-up） */
  transform: translateY(-1px);
  /* 必要に応じて微調整 */
}

/*スマホ用メニューを表示させない*/
#menubar-s,
#menubar-s2,
#menubar-s3 {
  display: none;
}

/*３本バーアイコンを表示させない*/
#menubar_hdr {
  display: none;
}

/*ドロップダウンメニューの親メニュー*/
#menubar a.cursor-default {
  cursor: default;
  /*マウスオーバー時に通常のカーソルになるように*/
  color: #999;
  /*文字色*/
}

/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/

#menubar ul.ddmenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  /* 縦に縮めて隠す */
  transform-origin: top center;
  /* 上端を基準にする */
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  visibility: hidden;
  z-index: 1000;
  width: auto;
  min-width: 250px;
  /* ← 極端に小さくならないように保険 */
  max-width: 90vw;
  /* ← はみ出し防止 */
  padding: 3px;
  background: rgba(120, 117, 100, 0.9);
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* ▼クリック式メニューで必要なスタイル */
#menubar li.open > ul.ddmenu {
  display: block !important;
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  /* 縦に広がる（カーテン降り） */
  visibility: visible;
}

/*メニュー１個あたりの設定*/
#menubar ul.ddmenu li {
  width: auto;
  display: block;
  white-space: nowrap;
  font-size: 75%;
  /*文字サイズ*/
}

#menubar ul.ddmenu li a {
  display: block !important;
  padding: 0.8em 1em;
  /*メニューテキスト同士の余白*/
  color: #fff;
  /*文字色*/
  font-weight: 600;
  opacity: 0.8;
  /*透明度。80%色がついた状態。*/
  transition: background 0.3s ease, opacity 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.4 !important;
  height: auto !important;
}

#menubar ul.ddmenu li:last-child a {
  border-bottom: none;
  /* 最後だけ下線なし */
}

#menubar ul.ddmenu li a:hover {
  background: rgba(120, 117, 100, 1);
}

/* サブメニューの indent 専用 */
#menubar ul.ddmenu li.indent1 a {
  text-align: left !important;
  /* 左寄せ */
  padding-left: 25px !important;
  /* インデント */
}

#menubar ul.ddmenu li.indent2 a {
  text-align: left !important;
  /* 左寄せ */
  padding-left: 40px !important;
  /* インデント */
  padding-right: 25px !important;
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos {
  position: fixed;
  width: 100%;
  top: 0px;
  height: 60px;
  /*メニューの高さを少し狭くする*/
}

body.is-fixed-menu #contents {
  margin-top: 85px;
  /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}

/*※以下の２ブロックのスタイルの「中身」は、上の２ブロックのスタイルと単純に合わせておいて下さい。*/
body.is-fixed #menubar.nav-fix-pos {
  position: fixed;
  width: 100%;
  top: 0px;
}

body.is-fixed #contents {
  margin-top: 105px;
  /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}

/*装飾文字を非表示にする*/
body.is-fixed-menu #menubar ul li span {
  display: none;
}

/*メニューテキストの上下バランスを調整しなおす。２つの数字の合計と、「body.is-fixed-menu #menubar.nav-fix-pos」の「height: 60px;」の数字が合うようにして下さい。*/
body.is-fixed-menu #menubar ul li a {
  height: 50px;
  padding-top: 10px;
}

/*ドロップダウンメニューへの再設定*/
body.is-fixed-menu #menubar ul.ddmenu li a {
  padding: 0.8em 1em;
  height: auto;
}

#container {
  margin: 0;
  padding: 0;
  border-top: 1px solid transparent;
}

#contents > *:first-child {
  margin-top: 0;
  /* contentsの最初の子要素の上マージンをリセット */
}

/*コンテンツ
----------------------------------------------------------------------------------------------------*/
#contents {
  padding: 50px 0 30px;
  /*上、左右、下へのコンテンツ内の余白*/
  position: relative;
  animation-name: opa2;
  /*keyframes.cssで使う@keyframesの指定*/
  animation-duration: 0.5s;
  /*アニメーションの実行時間*/
  animation-delay: 0.5s;
  /*出現するタイミング（秒後）*/
  animation-fill-mode: both;
}

/*h2タグ*/
#contents h2 {
  clear: both;
  margin-bottom: 60px;
  font-size: 200%;
  /*文字サイズ*/
  text-align: center;
  /*文字をセンタリング*/
  letter-spacing: 0.1em;
  /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
  color: #303336;
  /*文字色*/
  font-weight: 700;
}

/*h2タグ内のspanタグ（装飾文字）*/
#contents h2 span {
  display: block;
  font-size: 50%;
  /*文字サイズ*/
  letter-spacing: -0.05em;
}

/*h3タグ*/
#contents h3 {
  clear: both;
  margin-bottom: 10px;
  font-size: 140%;
  /*文字サイズ*/
  border-bottom: 1px dashed #999;
  /*下線の幅、線種、色*/
  padding-left: 3%;
  /*左側に空ける余白*/
  letter-spacing: 0.1em;
  /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
}

/*段落タグ*/
#contents p {
  padding: 0 3% 0.5em;
  /*上、左右、下への余白*/
}

#contents h2 + p,
#contents h3 + p {
  margin-top: -5px;
}

#contents p + p {
  margin-top: -10px;
}

#contents section + section {
  margin-top: 100px;
}

#contents section:last-of-type {
  margin-bottom: 50px;
  /* 必要に応じて調整 */
}

#contents {
  min-height: 100vh;
}

/*リード文
-------------------------------------------------------------------------------------------------------*/
.leadarea {
  margin: 0 auto;
  width: 80%;
  font-size: 110%;
  line-height: 1.5;
}

.leadarea p {
  margin-bottom: 0.5em;
}
/*list（成果ページで使っている横長ブロック）
-------------------------------------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list {
  position: relative;
  border-radius: 5px;
  /*角丸の指定。ほんの少し角が丸くなります。*/
  overflow: hidden;
  /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
  display: flex;
  align-items: center;
  /*中のブロックの縦並びの揃え方*/
  background: #b4b096;
  /*背景色*/
  color: #fff;
  /*文字色*/
  margin: 0 3% 30px;
  /*ボックスの下に空けるスペース。上、左右、下への順番。*/
}

/*リンクテキストの文字色*/
#contents .list a {
  color: #fff;
}

/*ボックス内のh4（見出し）タグ*/
#contents .list h4 {
  margin-bottom: 20px;
  /*下のテキストとの間に空けるスペース*/
  font-size: 1.4rem;
  /*文字サイズ*/
}

/*ボックス内のp（段落）タグ*/
#contents .list p {
  padding: 0;
  /*余白のリセット*/
}

/*ボックス内のfigure画像*/
#contents .list figure {
  width: 50%;
  /*画像の幅*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list .text {
  width: 40%;
  /*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
  padding: 2% 5%;
  /*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
#contents .list:nth-of-type(even) .text {
  order: 1;
}

/* 背景に置く装飾文字 */
#contents .list::before {
  content: "";
  /* 個別に上書き */
  font-size: clamp(50px, 15vw, 130px);
  /* 装飾文字のフォントサイズ
 - clamp() で可変サイズを設定
 - 画面幅に応じて伸縮するが、最小60px・最大150pxに制限*/
  line-height: 1;
  position: absolute;
  top: 45px;
  color: rgba(243, 241, 231, 0.3);
  font-family: "Great Vibes", cursive;
  font-weight: 500;
  pointer-events: none;
  z-index: 0;
  /* テキストより奥に */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 左右切り替えに応じた装飾位置 */
#contents .list.left::before {
  right: 30px;
  left: unset;
}

#contents .list.right::before {
  left: 10px;
  right: unset;
}

/* 装飾文字の種類 */
#contents .list.sub1::before {
  content: "Thema1";
}

#contents .list.sub2::before {
  content: "Thema2";
}

#contents .list.sub1a::before {
  content: "Sub1 a";
}

#contents .list.sub1b::before {
  content: "Sub1 b";
}

#contents .list.sub1c::before {
  content: "Sub1 c";
}

#contents .list.sub2a::before {
  content: "Sub2 a";
}

#contents .list.sub2b::before {
  content: "Sub2 b";
}

/*ボックス内のボタン（もっとみるボタン）*/
.btn1 a {
  display: block;
  text-decoration: none;
  border: 1px solid #fff;
  /*枠線の幅、線種、色*/
  color: #fff;
  text-align: center;
  /*テキストをセンタリング*/
  padding: 10px 30px;
  /*上下、左右へのボタン内の余白*/
  margin: 60px auto 0;
  /*上、左右、下へのボックスの外側への余白*/
}

/*ボタンのマウスオン時（共通）*/
.btn1 a:hover {
  background: #fff;
  /*背景色*/
  color: #b4b096 !important;
  /*文字色*/
}

/* 課題紹介ページおよびサブ課題ページの設定
---------------------------------------------------------------------------------------------------*/
/* ===================================
 共通設定
=================================== */

.subtheme {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
}

.subtheme h3 {
  margin: 0;
  padding: 0;
}

/* サブ課題ごとの背景付きカード */
.card {
  position: relative;
  /* 装飾文字用 */
  background: #b4b096;
  color: #303336;
  border-radius: 8px;
  padding: 40px 20px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.card h4 {
  margin-bottom: 25px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #303336;
  text-align: center;
}

.card h5 {
  font-size: 1.2rem;
  font-weight: bold;
}

.card p {
  margin: 10px 0 !important;
  padding:  0 5px !important;
}

/* 横並びにするコンテンツ */
.card-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 0;
}

.card-content > * {
  margin: 0;
  /* 子要素の余白リセット */
  padding: 0;
}

.card.left .card-content {
  /* 左右切り替え */
  flex-direction: row;
}

.card.right .card-content {
  flex-direction: row-reverse;
}

/* 課題紹介内card枠外の説明画像エリア */
.image-area {
  text-align: center;
  margin: 10px auto;
}

.image-area img {
  text-align: center;
  max-width: 100%;
  height: auto;
  margin-bottom: 80px;
}

.image-area-100,
.image-area-80 {
  text-align: center !important;
  margin: 30px auto;
}

.image-area-100 img {
  text-align: center !important;
  max-width: 100%;
  height: auto;
  margin-bottom: 60px;
}

.image-area-80 img {
  text-align: center !important;
  width: 80%;
  margin-top: 20px;
}

/* ===================================
 画像＋boss-areaをまとめたブロック共通設定
=================================== */
.img-boss,
/* レイアウト用のコンテナ */
.img-sub-boss {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  /* はみ出し防止 */
}

.img-boss {
  width: 20%;
}

.img-sub-boss {
  width: 20%;
}

.img-boss figure,
.img-sub-boss figure {
  margin: 0;
  margin-bottom: 10px;
  max-width: 100%;
  width: 65%;
}

.img-boss img,
.img-sub-boss img {
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  padding: 3px;
  border-radius: 5px;
  background-color: #dcdcdc;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* 名前と所属のボックス全体 */
.boss-area {
  width: 90%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  /* 長い単語は強制的に折り返す */
  word-break: break-word;
  /* ブラウザによってはこちらも効く */
  box-sizing: border-box;
  /* padding込みで幅計算 */
  text-align: center;
  color: #303336;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 20px 5px;
  background-color: rgba(255, 255, 255, 0.2);
}

.boss-name {
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
  padding-bottom: 5px;
}

.boss-org {
  margin: 0;
  font-size: 0.85rem;
  text-align: center;
}

.card .card-content .boss-area p {
  margin: 0;
  /* 上下の余白を強制リセット */
  padding: 0 !important;
  /* 念のため内側の余白もゼロ */
  line-height: 1.5;
  /* 行間 */
  display: block;
  /* インラインなどに変化してないか明示 */
}

.card-content .text-area {
  flex: 1;
  padding: 30px 20px 0;
  box-sizing: border-box;
  min-width: 0;
}

/* fieldsetのカスタマイズ */

fieldset {
  border: 1px dashed #f5f5f5;
  /* 線の太さ・色 */
  border-radius: 8px;
  /* 角を丸く */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1em;
  margin-bottom: 30px;
}

legend {
  font-weight: bold;
  color: #4a493c;
  padding: 0 0.5em;
}

/* 概要下のボックス */
.box-obj {
  margin: 40px auto 60px;
  padding: 20px;
  font-size: 120%;
  border-radius: 10px;
  width: 90%;
}

.box-obj.sub1 {
  background-color: #ef833a;
}

.box-obj.sub2 {
  background-color: #1da54e;
}

.box-obj p {
  padding: 10px !important;
  margin: 0 !important;
}

.box-obj h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 150%;
}

.box-obj img {
  margin: 0 !important;
  padding: 0 !important;
}

/* アウトプットアウトカムのボックス */
.diagram {
  display: flex;
  width: 90%;
  margin: 30px auto;
  align-items: stretch;
  gap: 10px;
  /* 矢印との間隔 */
}

.output {
  flex: 50;
  min-width: 0;
  position: relative;
}

.outcome {
  flex: 45;
  min-width: 0;
  position: relative;
}

.arrow {
  flex: 5;
  /* 真ん中5％ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.outbox {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: 10px 5px 10px 5px;
  list-style: none;
  margin: 20px 0;
  box-sizing: border-box;
}

.outbox.sub1 {
  border: 5px solid #ef833a;
  border-radius: 5px;
}

.outbox.sub2 {
  border: 5px solid #1da54e;
  border-radius: 5px;
}

.outbox-title {
  position: absolute;
  top: -15px;
  /* 枠の上に乗せる */
  left: 10px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 3px;
}

.outbox-title.sub1 {
  background-color: #ef833a;
}

.outbox-title.sub2 {
  background-color: #1da54e;
}

ul.square,
ul.circle {
  flex: 1;
  margin-top: 20px;
}

.arrow.sub1::before {
  content: "";
  display: block;
  width: 40px;
  /* 棒の長さ */
  height: 20px;
  /* 棒の太さ */
  background: #ef833a;
  position: relative;
}

.arrow.sub1::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #ef833a;
}

.arrow.sub2::before {
  content: "";
  display: block;
  width: 40px;
  /* 棒の長さ */
  height: 20px;
  /* 棒の太さ */
  background: #1da54e;
  position: relative;
}

.arrow.sub2::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #1da54e;
}

/* 「サブ課題」ボタンを置くエリア */
.button-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 「サブ課題1a~2b」ボタン */
.sub-button {
  display: flex;
  flex-direction: row;
  margin: 20px 10px;
}

.sub-button a {
  padding: 12px 20px;
  font-size: 1.05em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3em;
  background: linear-gradient(135deg, #6c6a58, #4a493c);
  /* グラデーションで立体感 */
  border-radius: 10px;
  /* 丸みを強調 */
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.sub-button a:hover {
  background: linear-gradient(135deg, #7d7b66, #555344);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* 「研究成果」ボタン */
.btn2 {
  margin-top: 80px !important;
  text-align: center;
}

.btn2 a {
  padding: 12px 30px;
  font-size: 1.05em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3em;
  background: linear-gradient(135deg, #6c6a58, #4a493c);
  /* グラデーションで立体感 */
  border-radius: 10px;
  /* 丸みを強調 */
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.btn2 a:hover {
  background: linear-gradient(135deg, #7d7b66, #555344);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ===================================
 背景に置く装飾文字
=================================== */
.card::before {
  content: "";
  /* 個別に上書き */
  font-size: clamp(40px, 15vw, 150px);
  /* 装飾文字のフォントサイズ
 - clamp() で可変サイズを設定
 - 画面幅に応じて伸縮するが、最小40px・最大120pxに制限*/
  line-height: 1;
  position: absolute;
  top: 45px;
  color: rgba(243, 241, 231, 0.3);
  font-family: "Great Vibes", cursive;
  font-weight: 500;
  pointer-events: none;
  z-index: 0;
  /* テキストより奥に */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 左右切り替えに応じた装飾位置 */
.card.left::before {
  right: 30px;
  left: unset;
}

.card.right::before {
  left: 10px;
  right: unset;
}

/* 装飾文字の種類 */
.card.project::before {
  content: "Project";
}

.card.sub1::before {
  content: "Thema1";
}

.card.sub2::before {
  content: "Thema2";
}

.card.sub1a::before {
  content: "Sub1 a";
}

.card.sub1b::before {
  content: "Sub1 b";
}

.card.sub1c::before {
  content: "Sub1 c";
}

.card.sub2a::before {
  content: "Sub2 a";
}

.card.sub2b::before {
  content: "Sub2 b";
}

/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
#contents .list-column-container {
  display: flex;
  justify-content: space-between;
  /*中のブロックの横並びの揃え方*/
  flex-wrap: wrap;
  /*中のブロックを自動で折り返す*/
  margin: 0 3%;
}

/*１カラムあたりの設定*/
#contents .list-column {
  display: flex;
  flex-direction: column;
  /*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
  width: 32%;
  /*ブロック幅*/
  margin-bottom: 20px;
  /*ブロックの下に空ける余白*/
  background: #b4b096;
  /*背景色*/
  color: #fff;
  /*文字色*/
  border-radius: 5px;
  /*角丸の指定。ほんの少し角が丸くなります。*/
  overflow: hidden;
  /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
}

/*リンクテキストの文字色*/
#contents .list-column a {
  color: #fff;
}

/*ボックス内のh4（見出し）タグ*/
#contents .list-column h4 {
  margin-bottom: 20px;
  /*下のテキストとの間に空けるスペース*/
  font-size: 1.4rem;
  /*文字サイズ*/
}

/*ボックス内のp（段落）タグ*/
#contents .list-column p {
  padding: 0;
  /*余白のリセット*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-column .text {
  padding: 5%;
  /*ブロック内の余白*/
  flex: 1 0 auto;
}

/*IEバグ対応*/
#contents .list-column figure {
  min-height: 0%;
}

/*資料（data）ページの設定
---------------------------------------------------------------------------------------------------------------*/
#data .brochure {
  margin: 10px 10px 80px 80px;
  width: 80%;
}

#data .brochure img {
  width: 100px;
  height: auto;
}

/*イベント（シンポジウム）ページの設定
---------------------------------------------------------------------------------------------------------------*/
.sympo #container {
  overflow: hidden;
}

.sympo #contents {
  background-image:url("../images/event/backimage-top.png"),
url("../images/event/backimage-down.png");
  background-repeat:repeat-x;
  background-color: #007e9f;
  background-position:top left;
  background-size:100% auto;
  min-height: 100vh;
  position: relative;
}

.background-down-img {
  /* 要素の下に固定するために絶対配置を設定 */
  position: absolute;
  /* 左下に配置 */
  left: 0;
  bottom: 0;

  /* 歪みを防ぎ、横幅いっぱいにする */
  width: 100%;
  height: auto;

  /* オプション: 下端から浮かせるための調整 */
  margin-bottom: -10px; /* 例: 下端から10px下にずらす */

  /* z-indexで他のコンテンツより手前に表示 */
  z-index: 10;
}


.sympo h1,
.sympo h2,
.sympo h3 {
  color: #fff;
}

.sympo  h3 {
  border-bottom: 1px dashed #fff;
}

.sympo-title .main-visual-title {
    font-size: 350%;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    line-height: 1.3; /* 行の高さを調整 */
    color: #fff;
    margin-top: 40px;
     text-align: center;
}

.sympo-title  h1{
  font-size: 280%;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  white-space: pre-line; /* 必要に応じて、ソースコード上の改行をブラウザに反映させる */
  text-align: center;
  margin-top: 0;
  margin-bottom: 100px;
}

.kickoff{
  font-size:150%;
  color:fff100;
}

.free-admission {
    width: 15%;
    max-width: 200px; /* 画像の最大幅を制限（大きくなりすぎないように） */
    min-width: 120px; /* 画像の最小幅を制限（小さくなりすぎないように） */
    margin: 0 auto;
    margin-bottom: 30px;
 }

.free-admission img {
    max-width: 100%; /* 親要素の幅（15%）を超えないようにする */
    height: auto;
    display: block; /* 予期せぬ余白を防ぐ */
}

.caution{
  color:#eb4444;
   font-weight: 800;

}
.lead {
  width: 85%;
  margin: 0 auto;
  margin-bottom: 50px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

.infobox {
  display: flex;
  justify-content: center;
}

.topic {
  margin-left: 20px;
}

.ask-open-btn {
  background: url("../images/event/btn_signin_1.jpg") no-repeat;
}

.ask-open-btn a {
  margin: 10px 0 10px 0;
  display: block;
  width: 200px;
  height: 35px;
  background: url("../images/event/btn_signin_1.jpg") no-repeat;
  text-indent: -9999px;
}

.ask-open-btn a:hover {
  background: url("../images/event/btn_signin_2.jpg") no-repeat;
}

.ask-close-btn {
  background: url("../images/event/btn_signin_3.jpg") no-repeat;
  width: 200px;
  height: 35px;
  display: block;
  margin: 10px 0 10px 0;
}

table.event_info {
  font-size: 100%;
  width: 70%;
  margin: 30px 0 0 0;
  background-color: rgba(255, 255, 255, 0.7);
  line-height: 1.3em;
  border-collapse: collapse; /* 罫線を1本化してにじみ防止 */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

table.event_info tr td {
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 70%;
  vertical-align: top;
  font-weight: normal;
}

table.event_info tr th {
  padding: 10px 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 14%;
  font-weight: bold;
  font-size: 100%;
}

table.program {
  margin: 20px auto;
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.7);
}

table.program tr td {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-collapse: collapse;
}

table.program tr th {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-collapse: collapse;
  width: 13%;
}

table.program tr td.line1 {
  padding: 10px 10px 0px 10px;
  border: none;
}

table.program tr td.line2 {
  padding: 0px 10px 10px 10px;
  border: none;
}

#contents table.program p.panel {
  margin: 0;
  margin-left: 1em;
  padding: 0.3em 0;
}

/*フッター設定
--------------------------------------------------------------------------------------------------------*/
footer {
  font-size: 0.85rem;
  /*文字サイズ*/
  background: rgba(0, 0, 0, 0.45);
  color: #f5f5f5;
  /*文字色*/
  text-align: center;
}

footer a {
  color: #f5f5f5;
}

footer a:hover {
  color: #fff;
}

footer .pr {
  display: block;
  font-size: 80%;
}

#footer {
  margin: 0;
  padding: 0;
}

#include-footer {
  margin: 0;
  padding: 0;
}

/*-------------------------------------------
フッターメニュー
-------------------------------------------*/
#footermenu {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 60px 80px;
  width: 85%;
  max-width: none;
  margin: 0px auto;
  padding: 50px 0;
  align-items: start;
}

/*リンク設定*/
#footermenu a {
  color: inherit;
  text-decoration: none;
}

#footermenu a:hover {
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.45);
}

/* 各カラム */
#footermenu .left {
  min-width: 350px;
  /* left の最小幅を大きくすることで、left が優先的に幅を確保するように誘導する */
}

#footermenu .center,
#footermenu .right {
  min-width: 280px;
  /* 既存の設定 (または 250px など、小さめに設定) */
  /* min-width を小さくすることで、 left の min-width: 350px が相対的に広くなる */
}

/* center と right の max-width は残しておきます。*/
/* セルは均等でも、コンテンツが制限され、視覚的には left が広く見えます */
#footermenu > .center {
  max-width: 380px;
}

#footermenu > .right {
  max-width: 370px;
}

/* 左カラム（Overview + Thema） */
#footermenu > .left {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom: 50px;
}

/* 中央カラム（成果・活動報告・資料） */
#footermenu > .center {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

#footermenu > .right {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: stretch;
  justify-content: space-between;
  /* 上部と下部に分ける */
}

/* リンクロゴ欄 */

#footermenu .jam-link,
#footermenu .other-link {
  display: flex;
  flex-direction: column;
  /* ← 縦並びにする！ */
  align-items: flex-start;
  /* ← 横方向の左寄せ */
  justify-content: flex-start;
  padding: 20px 10px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  color: #303336;
  background: #fff;
}

#footermenu .jam-link img,
#footermenu .other-link img {
  display: block;
  height: auto;
  width: auto;
  max-width: 70%;
  object-fit: contain;
}

#footermenu .jam-link img {
  margin-top: 10px;
  padding-left: 10px;
}

/* contact（問い合わせ欄） */
#footermenu .contact {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.45);
  color: rgba(0, 0, 0, 0.6);
  text-align: left;
  padding: 20px 12px;
  margin-top: 30px;
  border-radius: 4px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#footermenu .contact p.indent {
  margin: 0 !important;
  padding-left: 1em !important;
}

/* contact内のロゴ */
footer #logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0px 20px 0px;
}

footer #logo img {
  height: 40px;
  object-fit: contain;
}

/*ロゴ横に並べるプロジェクト名*/
.pj-titlebox {
  text-align: left;
  font-weight: bold;
  font-size: 0.9em;
}

/* policy（サイトポリシーリンク） */
#footermenu .policy {
  margin: 10px;
  width: max-content;
  align-self: flex-start;
}

#footermenu .policy p {
  margin: 0;
  font-size: 1em;
}

#footermenu .policy p::before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  font-weight: 900;
  margin-right: 0.3em;
  color: rgba(255, 255, 255, 0.5);
}

/*-------------------------------------------
リスト構造
-------------------------------------------*/
#footermenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 通常のリスト項目 */
#footermenu li {
  padding: 6px 1em;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

/* タイトル行（リンクなし） */
#footermenu li.title {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  border-bottom: none;
}

#footermenu .jam-link ul {
  margin: 10px 0 0 0;
  padding: 0;
}

#footermenu .jam-link ul li,
#footermenu .other-link ul li {
  border-bottom: none;
  line-height: 1;
}

#footermenu .jam-link ul li ::before,
#footermenu .other-link ul li ::before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  font-weight: 900;
  margin-right: 0.3em;
  color: rgba(0, 0, 0, 0.3);
}

/* タイトル行（リンクあり） */
#footermenu li.title-link ::before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  font-weight: 900;
  margin-right: 0.3em;
  color: rgba(0, 0, 0, 0.3);
}

#footermenu li.title-link a:hover {
  color: rgba(0, 0, 0, 0.45);
  text-decoration: underline;
}

/* サブ項目（インデント付き） */
#footermenu li.indent {
  padding-left: 2em !important;
  font-size: 0.85rem;
}

/*コピーライト
---------------------------------------------------------------------------------------------------------*/
#copyright {
  clear: both;
  text-align: center;
  background: #bba26c;
  /*背景色*/
  padding: 20px 0;
  /*上下、左右へのボックス内の余白*/
}

#copyright a {
  text-decoration: none;
}

/*トップページ内「更新情報・お知らせ」ブロック
----------------------------------------------------------------------------------------------------*/
/* セクション全体 */
#new {
  margin: 2em 0;
  padding: 1em 1.5em;
  background: #fafafa;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 見出し */
#new h2 {
  margin-bottom: 0.8em;
  padding-bottom: 0.4em;
  border-bottom: none;
  /* デフォルトの線は消す */
  position: relative;
}

#new h2::after {
  content: "";
  display: block;
  height: 1px;
  background-image: linear-gradient(to right, transparent, #aaa, transparent);
  margin-top: 0.4em;
}

/* 日付と本文 */
#new dl {
  margin: 0;
  padding: 0;
}

#new dt {
  float: left;
  clear: left;
  width: 7em;
  font-size: 0.9em;
  color: #555;
  margin-left: 3em;
}

#new dd {
  margin: 0 0 0.8em 0;
  padding-left: calc(3em + 7.5em);
  /* dtの内側 + dt幅 + 余白 */
  line-height: 1.6;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 0.4em;
  overflow-wrap: break-word;
}

#new .r a {
  display: inline-block;
  margin-top: 30px;
  padding: 0.4em 0.8em;
  /* ボタン内の余白 */
  background-color: #bba26c;
  color: #fff;
  font-weight: 600;
  font-size: 0.85em;
  border-radius: 5px;
  /* 丸みで柔らかく */
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* ほんのり影 */
}

#new .r a:hover {
  background-color: #b8860b;
  /* ホバーで少し濃く */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  /* 軽く浮かせる */
}

/* ----------------------------------------------------------------------*/
/* トップページ下の実施機関のリンクエリア									 */
/* ---------------------------------------------------------------------*/

#link-agency {
  margin: 40px auto;
  width: 90%;
}

.agency {
  display: flex;
  flex-wrap: wrap;
}

.agency li {
  width: calc(100% / 4);
  /*←画像を横に4つ並べる場合*/
  padding: 5px 10px;
  /*←画像の上下左右の余白*/
  box-sizing: border-box;
}

.agency li img {
  max-width: 100%;
  /*画像のはみだしを防ぐ*/
  height: auto;
  /*画像の縦横比を維持 */
  border: solid 1px #ccc;
  /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

.agency li a img {
  transition: 0.3s;
  /* 変化をなめらかに */
}

.agency li a img:hover {
  opacity: 0.9;
  transform: scale(1.03);
  border-color: #fff;
}

/* テーブル設定
----------------------------------------------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption,
.ta2 caption {
  border: none;
  /*テーブルの枠線の幅、線種、色*/
  text-align: left;
  /*文字を左寄せ*/
  font-weight: bold;
  /*太字に*/
  font-size: 110%;
  padding: 10px;
  /*ボックス内の余白*/
}

/*ta1テーブル*/
.ta1 {
  width: 80%;
 }

 /* ta2テーブル */
.ta2{
  width:100%;
}

/* 共通の装飾設定 */
.ta1,
.ta2 { /* ta1とta2の両方に共通の装飾を適用 */
  margin: 20px auto 80px;
  background: #fff;
}

.ta1,
.ta2,
.ta1 td,
.ta2 td,
.ta1 th,
.ta2 th {
  border: 1px solid #ccc;
  padding: 10px;
  word-break: break-all;
}

.ta1 th,
.ta2 th {
  background: #eeece4;
  font-size: 110%;
  font-weight: bold;
  text-align: left;
}




/*左側ボックス*/
.left-s {
  width: 20%;
  /*幅*/
  padding: 0;
  text-align: center;
}

/* NEWアイコン（最初は非表示） */
.newicon {
  display: none;
}

/* 表示する時だけ点滅 */
@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.2;
  }
}

.newicon.active {
  display: inline-block;
  margin-right: 0.5em;
  /* 文章との間にスペース */
  padding: 0.1em 0.4em;
  background: #ff0000;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 4px;
  animation: blink 1.2s infinite alternate;
}

/*ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link {
  display: block;
  margin-top: -120px;
  padding-top: 120px;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
  display: none;
}

/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  width: 50px;
  /*幅*/
  line-height: 50px;
  /*高さ*/
  z-index: 1;
  position: fixed;
  bottom: 20px;
  /*下から20pxの場所に配置*/
  right: 3%;
  /*右から3%の場所に配置*/
  background: #666;
  /*背景色（古いブラウザ用）*/
  background: rgba(0, 0, 0, 0.6);
  /*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
  color: #fff;
  /*文字色*/
  border: 1px solid #fff;
  /*枠線の幅、線種、色*/
  animation-name: opa1;
  /*keyframes.cssで使う@keyframesの指定*/
  animation-duration: 1s;
  /*アニメーションの実行時間*/
  animation-fill-mode: both;
  /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}

/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
  background: #999;
  /*背景色*/
}

/*ul.disc,olタグ
---------------------------------------------------------------------------------------------------------*/
ul.disc {
  list-style: disc;
  padding: 0 1em 20px 2em;
}

ol {
  padding: 0 3% 20px 2em;
}

ul.square {
  list-style: square;
  padding: 0 1em 20px 2em;
}

ul.circle {
  list-style: circle;
  padding: 0 1em 20px 2em;
}

/* カレント表示
--------------------------------------------------------------------------------------------------------*/

/* PC用メニュー：通常カレント */

#menubar li.current-parent > a {
  background: #bba26c;
  color: #fff !important;
  font-weight: bold;
}

#menubar li.current-parent span {
  background: #bba26c;
  color: #fff !important;
  font-weight: bold;
}

/* カレント表示された親メニュー（背景色変更）に合わせて矢印も白く */
#menubar li.has-submenu.current-parent > a::before,
#menubar li.has-submenu.open > a.current::before {
  color: #fff;
}

#menubar ul.ddmenu li.current > a {
  background: #bba26c !important;
  color: #fff !important;
  font-weight: bold;
  display: block;
}

#menubar a.current span {
  color: #fff !important;
}

/* PC用ドロップダウン内のカレントリンク */
#menubar ul.ddmenu a.current {
  background: #bba26c !important;
  color: #fff !important;
}

/* スマホ用のカレント （IDを分けているので@media screenは不要*/

#menubar-s a.current {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: bold;
  padding-left: 1em;
  /* 内側余白を調整 */
}

#menubar-s a.current span {
  color: #fff;
  font-weight: bold;
}

#menubar-s li.current-parent {
  background-color: rgba(255, 255, 255, 0.2);
  border-left: 10px solid #bba26c;
  box-sizing: border-box;
  font-weight: bold;
}

#menubar-s li.current-parent span {
  color: #fff;
  font-weight: bold;
}

/* noscriptの設定
----------------------------------------------------------------------------------------------------------------*/
.noscript-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f00;
  color: #fff;
  text-align: center;
  padding: 0.8em;
  z-index: 1000;
  font-size: 0.9rem;
}

/* 水平線 （グラデーションバージョン）-----------------------------------------------------------------*/
.line {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, transparent, #8c8b8b, transparent);
  margin: 0 0 3em 0;
}

/* Englishボタン（PC用）
----------------------------------------------------------------------------------------------------*/
#menubar ul.inner li.lang-link {
  display: flex !important;
  /* li を flex化 */
  align-items: center !important;
  /* 中身を上下中央に */
  justify-content: center;
  /* 水平方向中央 */
}

#menubar ul.inner li.lang-link a {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 15px;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #000;
  color: #fff !important;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.4;
  transition: all 0.3s ease;
}

/* Englishボタン（スマホ用） ※IDを分けているためメディアクエリ不要*/
#menubar-s li.lang-link {
  text-align: center;
  margin: 20px auto;
}

#menubar-s li.lang-link a {
  display: inline-block !important;
  padding: 4px 10px !important;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #000;
  color: #fff !important;
  font-weight: bold;
  line-height: 1.2;
  transition: all 0.3s ease;
  font-size: 12px;
}

/* hover時 */
#menubar ul.inner li.lang-link a:hover,
#menubar-s li.lang-link a:hover {
  background: #bba26c;
  /* 金色背景 */
  color: #fff !important;
  /* 白文字 */
  border-color: #bba26c;
  /* 枠線も金色に */
}

/* ピンチアウトで拡大させたい画像の設定
----------------------------------------------------------------------------------------------------*/
.responsive-img {
  width: auto;
  height: auto;
  max-width: 90%;
  /* 画面幅を超えないようにする */
  display: block;
  margin: 0 auto;
  /* 中央揃え */
}

/*その他
---------------------------------------------------------------------------*/
.look {
  background: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 0px 10px !important;
  border-radius: 4px;
}

p.look {
  margin: 0 3%;
}

.mb15,
.mb1em {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.pt0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pl1em {
  padding-left: 1em;
}

.clear {
  clear: both;
}

.color1,
.color1 a {
  color: #b4b096 !important;
}

.pr {
  font-size: 10px;
}

.wl {
  width: 96%;
}

.ws {
  width: 50%;
}

.c {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.l {
  text-align: left !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.big1 {
  font-size: 30px;
}

.mini1 {
  font-size: 11px;
  display: inline-block;
  line-height: 1.5;
}
.mini80 {
  font-size: 80%;
  display: inline-block;
  line-height: 1.6;
}

.mini70 {
  font-size: 70%;
  display: inline-block;
  line-height: 1.5;
}

.mini60 {
  font-size: 60%;
  display: inline-block;
  line-height: 1.5;
}

.sh {
  display: none;
}

.l-indent {
  padding-left: 1em;
}

.content-box1 {
  margin: 20px 40px;
}

.icon {
  padding: 0 0.3em;
  font-size: 0.9em;
}

/* ここは、フッター1列表示用メディアクエリ（835px以下）
              =================================================== */
@media screen and (max-width: 835px) {
  #footermenu {
    grid-template-columns: 1fr;
    /* 1列にする */
    width: 100%;
    padding: 30px 40px;
    gap: 30px 0;
  }

  /* 左・中央・右のカラム幅の制限を解除 */
  #footermenu > .left,
  #footermenu > .center,
  #footermenu > .right {
    min-width: auto;
    /* 最小幅制限を解除 */
    max-width: none;
    /* 最大幅制限も解除 */
  }

  #footermenu > .right {
    /* 子要素の中央揃えを有効にするために align-items を変更 */
    align-items: center;
    /* 1列表示になったとき、contactとlink-logoを画面中央に配置するために必要 */
    width: 100%;
    max-width: none;
  }

  #footermenu .contact {
    margin: 40px auto 30px;
    box-sizing: border-box;
    width: 90%;
  }

  #footermenu .jam-link img {
    width: 50%;
    height: auto;
  }

  #footermenu .jam-link,
  #footermenu .other-link {
    margin: 40px auto 30px;
    box-sizing: border-box;
    width: 100%;
  }

  #footermenu ul {
    padding: 10px;
  }

  /*ロゴ横に並べるプロジェクト名*/
  .pj-titlebox {
    text-align: left;
    font-weight: bold;
    font-size: 1em;
  }
}

/*ここからは、共通の画面幅800px以下の設定
                        --------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 800px) {
  /*全体の設定
                        ---------------------------------------------------------------------------*/
  body {
    font-size: clamp(14px, 2vw, 18px);
    /*文字サイズ*/
  }

  /*ヘッダー
                        ---------------------------------------------------------------------------*/
  /*ヘッダーブロック*/
  header {
    border-bottom: 1px solid #ccc;
  }

  /*ヘッダーブロック（トップページへの追加設定）*/
  .home header {
    border: none;
  }

  .titlearea {
    padding: 1rem 3rem 1rem 1rem;
    text-align: left;
  }

  .titlearea h1{
    font-size: 30%;
  }

  .sp-br{
    display: inline;
  }

.leadarea{
  width:90%;
}

  /*メインメニュー
                        ---------------------------------------------------------------------------*/
  /*スマホ用メニューブロック全体*/
  #menubar-s {
    overflow: auto;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0px;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    /*背景色*/
    border-top: 1px solid #fff;
    /*上の線の幅、線種、色*/
    animation-name: frame1;
    /*冒頭のkeyframesの名前*/
    animation-duration: 0.5s;
    /*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both;
    /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
    font-size: 16px;
    /*文字サイズ*/
  }

  #menubar-s li span {
    margin-left: 20px;
    font-size: 80%;
  }

  /*メニュー１個あたりの設定と、子メニューの見出し。*/
  #menubar-s ul li a,
  #menubar_hdr1,
  #menubar_hdr2,
  #menubar_hdr3 {
    display: block;
    text-decoration: none;
    padding: 30px 20px 30px 60px;
    border-bottom: 1px solid #fff;
    /*下の線の幅、線種、色*/
    color: #fff;
    /*文字色*/
  }

  /*PC用メニューを非表示にする*/
  #menubar {
    display: none;
  }

  /*子メニュー
                        ---------------------------------------------------------------------------*/
  /*子メニューの見出しの追加。基本は上のブロックで設定しています。*/
  #menubar_hdr1,
  #menubar_hdr2,
  #menubar_hdr3 {
    padding-left: 60px;
    /*上にある「メニュー１個あたりの設定と、子メニューの見出し」の最後の数字（４つ目）に合わせる。*/
  }

  /*子メニューメニューブロック全体*/
  #menubar-s1,
  #menubar-s2,
  #menubar-s3 {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.4);
  }

  #menubar-s1 {
    display: none ;
  }

  #menubar-s li.open #menubar-s1 {
  display: block;
  }

  /* 「＞」アイコン + 透過白背景 */
  #menubar_hdr1.close,
  #menubar_hdr2.close,
  #menubar_hdr3.close {
    background-color: rgba(0, 0, 0, 0.4);
    /* 透過黒背景 */
    background-image: url(../images/arrow2.png);
    /* 矢印画像 */
    background-repeat: no-repeat;
    background-position: 20px 35px;
    background-size: 18px;
  }

  /* 「＾」アイコン + 透過白背景 */
  #menubar_hdr1.open,
  #menubar_hdr2.open,
  #menubar_hdr3.open {
    background-color: rgba(0, 0, 0, 0.5);
    /* 透過黒背景 */
    background-image: url(../images/arrow3.png);
    /* 開いたときの矢印 */
    background-repeat: no-repeat;
    background-position: 20px 35px;
    background-size: auto 18px;
  }

  /*子メニュー１個あたりの設定*/
  /* 共通の a 要素のスタイル */
  #menubar-s1 li a,
  #menubar-s2 li a,
  #menubar-s3 li a {
    border-bottom: 1px solid #ccc !important;
    padding: 10px 20px !important;
    line-height: 1.3;
    font-size: 14px;
  }

  /* 共通の :last-child の a 要素だけ border-bottom を無効化 */
  #menubar-s1 li:last-child a,
  #menubar-s2 li:last-child a,
  #menubar-s3 li:last-child a {
    border-bottom: none !important;
  }

  /* サブメニューの indent 専用 */
  #menubar-s1 li.indent2 a,
  #menubar-s2 li.indent2 a,
  #menubar-s3 li.indent2 a {
    padding-left: 40px !important;
    /* インデント */
  }

  /*３本バーアイコン設定
                        ---------------------------------------------------------------------------*/
  /*３本バーブロック*/
  #menubar_hdr {
    display: block;
    position: fixed;
    z-index: 100;
    top: 20px;
    /*上からの配置場所*/
    right: 2%;
    /*右からの配置場所*/
  }

  /*アイコン共通設定*/
  #menubar_hdr.close,
  #menubar_hdr.open {
    width: 50px;
    /*幅*/
    height: 50px;
    /*高さ*/
    border: 1px solid #fff;
  }

  /*三本バーアイコン*/
  #menubar_hdr.close {
    background: #000 url(../images/icon_menu.png) no-repeat center top/50px;
    /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
  }

  /*閉じるアイコン*/
  #menubar_hdr.open {
    background: #000 url(../images/icon_menu.png) no-repeat center bottom/50px;
    /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
  }

  /*fixmenu設定（メニューが画面上部に到達した際のスタイル）
    ---------------------------------------------------------------------------*/
  /*fixmenuから折りたたみメニューになるのでリセット。*/
  body.is-fixed-menu #contents {
    margin-top: 0px;
  }

  body.is-fixed #contents {
    margin-top: 0px;
  }

  /*コンテンツ
    ---------------------------------------------------------------------------*/
  #contents {
    padding: 50px 0 10px 0;
    /*上下、左右へのコンテンツ内の余白*/
  }

  /*h2タグ*/
  #contents h2 {
    margin-bottom: 20px;
  }

  /*list-column（トップページで使っている３列ブロック）
    ---------------------------------------------------------------------------*/
  /*ボックス内のh4（見出し）タグ*/
  #contents .list-column h4 {
    margin-bottom: 0px;
    font-size: 1.2rem;
  }

  #contents .list h4 {
    font-size: 1.2rem;
  }

  /* ===================================
                        課題紹介のページ
    =================================== */
  .card {
    padding: 20px 5px;
  }

  .card h4 {
    font-size: 1.2rem;
  }

  .card p {
    padding: 3px; 0;
  }

  .card-content {
    flex-direction: column !important;
    align-items: center;
    /* ブロック自体は中央 */
    gap: 15px;
    /* 上下の間隔を少し詰める */
    padding: 0;
    margin: 0;
  }

  /* 画像＋boss-areaをまとめたセット */
  .img-boss,
  .img-sub-boss {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto 10px;
    padding: 0;
  }

  .img-boss figure,
  .img-sub-boss figure {
    margin: 0;
    width: 70%;
  }

  .img-boss img,
  .img-sub-boss img {
    width: 70%;
    height: auto;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #dcdcdc;
    padding: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
    display: block;
  }

  .card.no-photo .boss-area {
    margin-top: 10px;
  }

  .boss-area {
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
    margin: 8 auto 0;
    padding: 10px 0 !important;
    width: 80%;
  }

  .boss-name {
    font-size: 1.2rem;
  }

  .text-area {
    width: auto;
    text-align: left;
    line-height: 1.6;
    /* 行間を広めに */
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0.5em;
  }

  .text-area p,
  .text-area li {
    line-break: anywhere;
  }


  .diagram {
    flex-direction: column;
    /* 縦並びに変更 */
    align-items: center;
    /* 中央寄せ */
  }

  .output {
    width: 100%;
  }

  .outcome {
    width: 100%;
  }

  .image-area-80 ,
  .image-area-100{
    margin:0;
  }

  .arrow {
    transform: rotate(90deg);
    /* → を ↓ にする */
    margin: 10px 0;
    /* 上下の余白 */
  }

  .arrow::before {
    width: 20px;
    /* 棒の太さ */
    height: 40px;
    /* 棒の長さ */
    background: #c85;
  }

  .arrow::after {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #c85;
    /* 下向き三角 */
    border-bottom: none;
  }

  /* ボタン */
  .btn1 {
    text-align: center;
    margin: 10px auto;
    width: 60%;
  }

  .btn1 a {
    display: block;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 60%;
  }

  .button-container {
    display: block;
    /* flex解除 */
    text-align: center;
    /* スマホでは中央寄せ */
  }

  .sub-button {
    flex-direction: column;
    margin: 15px auto;
    width: 60%;
    gap: 15px;
    /* 縦並びの間隔 */
  }

  .btn2 {
    margin-top: 50px !important;
  }

  /* 装飾文字は右上に統一 */
  .card.left::before,
  .card.right::before {
    left: unset;
    right: 30px;
    top: 20px;
  }

 /*Sympoページの設定
                        ---------------------------------------------------------------------------*/
.sympo-title .main-visual-title {
        font-size: 200%;
        margin-bottom: 10px;
}

.sympo-title h1 {
        font-size: 160%;
        line-height: 1.4;
        margin-bottom: 30px;
    }
.free-admission {
        width: 40%;
        min-width: 150px;
    }

table.event_info,
table.program{
  width:95%;
}


  /*ヘッダーメニューが固定されなくなるので、再設定。
                        ---------------------------------------------------------------------------*/
  .link {
    margin-top: -30px;
    padding-top: 30px;
  }

  /*その他
                        ---------------------------------------------------------------------------*/
  body.s-n .sub,
  body.s-n #footermenu {
    display: none;
  }

  .big1 {
    font-size: 20px;
  }

  /*テーブル
                        ---------------------------------------------------------------------------*/
  .ta1 {
    width: 96%;
  }

  /*New
                        ---------------------------------------------------------------------------*/
  #new dt {
    margin-left: 0;
  }

  #new dd {
    padding-left: calc(7.5em);
  }

  /* カレントの親メニューをホバーなしでも展開 */
  #menubar li.current-parent > .ddmenu {
    display: block;
  }

  /* ▼スマホ用メニュー：開いた状態で中のulを表示させる */
  #menubar-s li.open > ul {
    display: block !important;
  }

  /* スマホ用：小さい画面では画像を画面幅いっぱいに */
  .responsive-img {
    width: 100%;
    /* 幅を画面いっぱいに */
    height: auto;
    /* 高さは自動 */
  }
}

/*800px以下のmediaクエリ閉じタグ


                        /* フッター1列表示用メディアクエリ（550px以下）
                        =========================================== */
@media screen and (max-width: 550px) {
  .pj-titlebox {
    font-size: 0.8em;
  }
}

/*mediaクエリ閉じタグ

                        /*共通の画面幅480px以下の設定
                        ----------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  /*全体の設定
                        ---------------------------------------------------------------------------*/
  body {
    font-size: clamp(13px, 3vw, 16px);
  }

  /*コンテンツ
                        ---------------------------------------------------------------------------*/
  /*h2タグ*/
  #contents h2 {
    margin-bottom: 30px;
  }

  /*h3タグ*/
  #contents h3 {
    margin-bottom: 20px;
  }

  #contents section + section {
    margin-top: 20px;
  }

  /*実施機関のバナーの並び*/
  .agency li {
    width: calc(100% / 2);
  }

  footer #logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0px 20px 0px;
  }

  footer #logo img {
    object-fit: contain;
  }

  #footermenu .contact {
    width: 100%;
  }

  #footermenu .contact p {
    font-size: 0.9em;
  }

  .logo-pj {
    height: 40px;
  }

  /*list（worksページで使っている横長ブロック）
                        ---------------------------------------------------------------------------*/
  /*ボックス内のボタン（共通）*/
  .btn1 a {
    padding: 10px;
    /*上下、左右へのボタン内の余白*/
    width: 80%;
  }

  .list h4 {
    font-size: 1.2rem !important;
  }

  /*テーブル（ta1）
                        ---------------------------------------------------------------------------*/
  /*ta1設定*/
  .ta1,
  .ta1 td,
  .ta1 th {
    padding: 5px;
    /*ボックス内の余白*/
  }

  /*ta1の左側ボックス*/
  .ta1 th {
    width: 100px;
  }

  /*その他
                        ---------------------------------------------------------------------------*/
  .ws,
  .wl {
    width: 94%;
  }

  .fl {
    float: none;
  }

  .fr {
    float: none;
  }

  .big1 {
    font-size: 16px;
  }

  .sh {
    display: block;
  }

  .pc {
    display: none;
  }
}

/*メディアクエリ480px以下の閉じタグ*/