/* --------共通スタイル---------------*/

/*------CSS変数-------*/
:root {
  --main-color: #28870f;
  --second-color: #f08278;
  --mainbk-color: 250, 210, 230;
  --subbk-color: 217, 238, 205; /*.table td.firstの設定は、適宜変更（※main-colorと同系色に）*/
  --accent-color: #426af7; /*青系統に（色覚異常に加えて視覚過敏の人への配慮）*/
}
/*---------------------*/

/* CSS Document */
/* ================================
文字・段落設定
================================*/
html {
    font-family: "Noto Sans JP", serif;
}
.section_sponsor_en, .section_news_en, .section_info_en, .section_outline_en, .section_access_en, .section_particpation_en, .section_program_en, .section_registration_en, .section_greeting_en {
  font-family: "Noto Sans", serif;
}

h2.section_title {
  font-size: 21px;
  line-height: 150%;  letter-spacing: 0.02em;
  color: var(--main-color);
  text-align: center;
  background: rgba(var(--mainbk-color), 1);
  padding: 6px 0px;
  box-shadow: 3px 3px 3px #aaa;
  margin-bottom: 50px;
}
h3.sub_head {
  font-size: 20px;
  line-height: 150%;  letter-spacing: 0.02em;
  color: var(--main-color);
  text-align: left;
  border-bottom: solid 1.8px var(--main-color);
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 5px;
}
h4{
  font-size: 18px;
  line-height: 160%;  letter-spacing: 0.02em;
  color: var(--main-color);
}
h4.sub_head {
  background: rgba(var(--mainbk-color), 1);
  text-align: left;
  max-width: 100%;
  margin: 20px 0 15px;
  padding: 3px 8px 3px 40px;
  text-indent: -32px;
}
h4.sub_head_icon {
  margin: 20px 0 5px;
  padding-left: 20px;
  text-indent: -20px;
}
h4.sub_head_icon::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f192";
  margin-right: 5px; /* テキストの間にスペースを追加 */
  font-weight:500;
}
h5{
  font-size: 17px;
  line-height: 165%;  letter-spacing: 0.02em;
  color: var(--main-color);
}
h5.sub_head {
  margin: 15px 0 5px;
}
h5.sub_head_icon {
  margin: 15px 0 5px;
  padding-left: 20px;
  text-indent: -20px;
}
h5.sub_head_icon::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f06c";
  margin-right: 5px; /* テキストの間にスペースを追加 */
  font-weight: 700;
  color: var(--second-color);
}
p {
	font-size: 16px;
	line-height: 170%;
	font-weight: 400;
	letter-spacing:2%;
	margin-bottom: 10px;
}
address {
	font-size: 16px;
	line-height: 170%;
	font-weight: 400;
	letter-spacing:2%;
	margin-bottom: 20px;
	font-style: normal;
}
dl, dt, dd, ol, ul, li,
tr, th, td, label {
	font-size: 16px;
	line-height: 160%;
	font-weight: 400;
	letter-spacing:2%;
}
.hover_p a, .hover_span {
  color: var(--main-color);
  font-weight: 600;
  overflow-wrap: break-word;
}
p.hover_p{
  padding-left: 24px;
  text-indent: -24px;
  margin-top: 10px;
}
.hover_p a:hover, .hover_span:hover {
  opacity: 0.6;
}
.hover_p a::before {
  font-family: 'Font Awesome 6 Free';
  content: "\f35d";
  margin-right: 8px; /* テキストの間にスペースを追加 */
  color: var(--second-color);
}
a.icon_pdf::before {
  font-family: 'Font Awesome 6 Free';
  content: '\f1c1';
  margin: 0 3px 0 5px; /* テキストの間にスペースを追加 */
  color: var(--second-color);
  font-weight: 500;
}
a.icon_word::before {
  font-family: 'Font Awesome 6 Free';
  content: '\f1c2';
  margin: 0 3px 0 5px; /* テキストの間にスペースを追加 */
  color: var(--second-color);
  font-weight: 500;
}
a.icon_excel::before {
  font-family: 'Font Awesome 6 Free';
  content: '\f1c3';
  margin: 0 3px 0 5px; /* テキストの間にスペースを追加 */
  color: var(--second-color);
  font-weight: 500;
}

.one-indent{
	padding-left: 16px;
	text-indent: -16px;
}
.left_one-indent{
	padding-left: 16px;
}
.en-indent{
	padding-left: 8px;
	text-indent: -8px;
}

p.right {
  text-align: right;
}
p.left {
  text-align: left;
}
p.justify {
	  text-align: justify;
}
.maincolor{
	color: var(--main-color);
	font-size: 1em;
}
.bold {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.normal{
	font-size: 1em;
	font-weight: 400;
	color: inherit;
}
.word_small{
	font-size: 14px;
}
.border {
  text-decoration: underline;
  font-size: 1em;
}
.del_border {
text-decoration:line-through;
text-decoration-style:double;/*線のスタイルを指定*/
}
strong {
	font-weight: 550;
	font-size: 1em;
	color: var(--accent-color);
	background: rgba(var(--subbk-color), 1);
}

/* CSS layout */
/* ================================
調整（表示非表示・余白）
================================*/
.pc {
  display: none;
}
@media (max-width:900px) {
 .pc {
    display: block;
  }
}

.top_10px{
  margin-top: 10px;
}
.bottom_10px {
  margin-bottom: 10px;
}
.margin_top_bottom{
	margin: 20px auto 30px;
}

/* ================================
ヘッダー
================================*/
header {
  width: 100vw;
  border-bottom: solid 2px var(--main-color);
  position: sticky;
  top:0;
  left:0;
  z-index: 3;
  background: #fff;
}
.head_wrap {
  display: flex;
  flex-direction: column;
  max-width: 1320px;
  margin: 0 auto;
}
.accent {
  color: var(--accent-color);
  font-weight: 700;
}
span.accent {
 font-size:1em;
}
.img_wrap {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
}
.img_inner {
  display: flex;
  justify-content: space-between;
}
.head_wrap img {
  width: auto;
  height: 51px;
  margin: 5px 0;
  object-fit: contain;
}
.lang {
  width: 25px;
  height: 23px;
  background: var(--second-color);
  border-radius: 1.5px;
  text-align: center;
  padding: 7px 4px 0;
  margin-left: 20px;
  margin-top: 7px;
}
.lang a {
  color: #fff;
  font-size: 13px;
  display: block;
}
.for_mobile {
  display: none;
}

@media(max-width:1280px) {
.img_wrap {
  margin-left: 7px;
  margin-right: 7px;
}
  .head_wrap img {
	width: calc(100% - 48px);
 /*   height: 45px;  コンテナの高さに合わせる */
    object-fit: contain; /* 画像は縦横比を維持したまま、表示領域にフィットするように拡大縮小 */
    margin: 5px auto;
  }
}

@media(max-width:900px) {
  .for_mobile {
    display: block;
  }
  .for_pc {
    display: none;
  }
.img_wrap {
    display: block;
	margin: 2px 4px;
  }
.img_wrap .for_mobile{
	margin-top: 4px;
	}
  .img_inner {
/*    flex-direction: column;
    justify-content: flex-start;
    width: 87%;*/
    margin-left: 3px;
  }
.head_wrap img {
	width: auto; /* コンテナの幅に合わせる */
    object-fit: contain; /* 画像は縦横比を維持したまま、表示領域にフィットするように拡大縮小 */
    height: 48px; /* コンテナの高さに合わせる */
    margin: 0;
    object-position: left;
  }
.img_inner img {
    width: auto; /* コンテナの幅に合わせる */
    object-fit: contain; /* 画像は縦横比を維持したまま、表示領域にフィットするように拡大縮小 */
    height: 37px; /* コンテナの高さに合わせる */ 
  }
  .lang {
    display: block;
    position: fixed;
    top: 45px;
    right: 5px;
    margin: 0;
    width: 40px;
    height: 40px;
    padding: 0px;
    background: #fff;
  }
  .lang a {
    font-size: 15px;
    padding-top: 17px;
	color: var(--main-color);
  }
}
@media(max-width:385px) {
	.head_wrap img {
	width: calc(100% - 48px);
	}
}

/* ================================
ナビゲーションメニュー
 ================================*/
nav {
  max-width: 1320px;
  /*margin: 0 auto;*/
}
nav ul {
  display: flex;
}
nav ul li {
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 20px;
  display: flex;
  margin: 0;
}
nav ul li a {
  display: flex;
  /*追加*/ justify-content: center;
  /*追加*/ align-items: center;
  /*追加*/ text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-top: 2px solid #d2d2d2;
  position: relative;
}
nav ul li a:hover {
  color: var(--second-color);
  font-weight:600;
}
nav li a::before {
  background: var(--second-color);
  content: '';
  width: 100%;
  height: 2.5px;
  position: absolute;
  left: 0;
  top: -1px;
  margin: auto;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
nav li a:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}
/*ナビゲーションの自動色変更*/
a.current {
  color: var(--second-color);
  border-top: 3px solid var(--second-color);
  font-weight:600;
}
/*---------------------------------【ナビゲーションの文字数が多い場合指定】*/
@media(max-width:980px) {
nav ul li {
  font-size: 13px;
}
	}

/* ================================
hamburger(ハンバーガーアイコン)
=================================== */
@media(max-width:900px) {
  nav ul {
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 90px;
  }
  nav ul li {
    height: 62px;
	font-size: 16px;
	line-height: 165%;
  }
  nav ul li:last-child {
    border-bottom: solid 2px var(--main-color);
  }
  .hamburger {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: var(--main-color);
    z-index: 300;
	border-radius: 50%;
  }
  .hamburger__line {
    position: absolute;
    width: 24px;
    height: 2px;
    right: 8px;
    background-color: #fff;
    border-radius: 7px;
    transition: all 0.5s;
  }
  .hamburger__line--1 {
    top: 11px;
  }
  .hamburger__line--2 {
    top: 19px;
  }
  .hamburger__line--3 {
    top: 27px;
  }
  /*ハンバーガーがクリックされたら*/
  .open .hamburger__line--1 {
    transform: rotate(-45deg);
    top: 19px;
  }
  .open .hamburger__line--2 {
    opacity: 0;
  }
  .open .hamburger__line--3 {
    transform: rotate(45deg);
    top: 19px;
  }
	
/* ================================ 
　navigation(ナビ)
=================================== */
  .sp-nav {
    position: fixed;
    right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
    top: 0;
    width: 70%; /* 出てくるスライドメニューの幅 */
    max-height: 100vh;
    background-color: #fff;
    border-bootom: solid 2px var(--main-color);
    box-shadow: -2px 2px 5px #222;
    transition: all 0.5s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  /*ハンバーガーがクリックされたら右からスライド*/
  .open .sp-nav {
    right: 0;
  }
	
 /* ================================ 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
  .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
  }
  /*ハンバーガーメニューが開いたら表示*/
  .open .black-bg {
    opacity: 0.3;
    visibility: visible;
  }
}
	
 /* ================================ 
メイン
=================================== */
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 30px;
  max-width: 1260px;
  margin: 50px auto;
}
article.main_flex {
	flex:4;
}
section {
  margin: 0 auto;
  max-width: 980px;
  padding-bottom: 30px;
  border-bottom: 1px var(--second-color) solid;
}
@media(max-width:1280px) {
main {
    margin-left: 10px;
	margin-right: 10px;
    max-width: 100%;
  }
}

@media(max-width:900px) {
main {
    margin: 30px 0;
    max-width: 100%;
    flex-direction: column;
  }
article.main_flex {
	width:100%;
}
section {
    margin: 0 15px;
    min-height: 380px;
    max-width: 100%
  }
}
/* ================================
　右サイド（PC版）　スポンサー企業など
 ================================*/
aside {
  flex: 1;
}
.section_sponsor ul {
  max-width: 230px;
  margin: 0 auto 20px;
  border-bottom: 1px var(--second-color) solid;
}
.section_sponsor ul li {
  height: auto;
  margin-bottom: 10px;
}
.section_sponsor ul li:last-child {
    margin-bottom: 15px;
  }
.section_sponsor ul li a {
  cursor: pointer;
  overflow: hidden;
}
.section_sponsor ul li img {
  width: 100%;
  transition: transform .5s ease;
}
.section_sponsor ul li img:hover {
  transform: scale(1.2);
}

@media(max-width:900px) {
aside {
  margin: 0;
  width: 100%;
　margin: 40px 20px;
}
.section_sponsor ul {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  margin: 20px;
  border-bottom: 1px var(--second-color) solid;
  max-width: 95%;
  left:0;
}

.section_sponsor ul li img {
  width: 230px;
}
}

@media(max-width:600px) {
  .section_sponsor ul {
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
  .section_sponsor ul li {
    margin-bottom: 8px;
  }
}

/* ================================
複数ページに使用しているスタイル
================================*/
/*--表---*/
.table {
  margin: 15px auto;
  display: block;
}
.table th {
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  background-color: var(--main-color);
  border: #000 solid 1px;
  padding: 5px 10px;
  vertical-align:middle;
}
.table td {
  border: #000 solid 1px;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}
.table td.first{
  text-align: left;
  background: rgba(var(--subbk-color), 1);
  color: var(--main-color);
  font-weight: 700;
}
@media(max-width:900px) {
.table {
  max-width:100%;
}
  .table td {
    padding: 5px 10px;
    vertical-align: middle;
    text-align: center;
  }
  .en_table th, .en_table td {
    padding: 5px 8px;
  }
}
@media(max-width:430px) {
/*----------------------------【テーブル幅が広すぎる場合に設定】
.table {
  overflow-x: scroll;
}
-----------------------------*/
 .en_table th, .en_table td {
    padding: 5px;
  }
}

/*--囲み枠（背景あり）---*/
.main_topics {
  max-width: 100%;
  background: rgba(var(--subbk-color), 1);
  border-radius: 5px;
  margin: 20px auto;
  padding:20px 20px 10px 20px;
}
/*--しるしリスト---*/
.normal_list {
  list-style: initial;
  list-style-position: inside;
  margin: 0 auto;
}
.normal_list li {
  text-align: justify;
  margin-left: 24px;
  text-indent: -24px;
  margin-bottom: 10px;
}
/*-------------------------------------------【英語のリストは左揃えに】*/
.section_registration_en .normal_list li,
.section_info_en .normal_list li{
  text-align: left;
}

/*--数字リスト---*/
.num_list {
    list-style:  none;          /* デフォルトのアイコンを消す */
    margin:  15px auto;                 /* デフォルト指定上書き */
    padding: 0;                 /* デフォルト指定上書き */
    counter-reset: li_count;    /* カウンタをセット */
}

.num_list li {
/*     padding: 0;             余白指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
	padding-left: 18px;
	text-indent: -18px;
}

.num_list li::before  {
  counter-increment: li_count;  /* カウンタの値を計算していく */
  content: counter(li_count)"."; /* 数字出力 */
  color: var(--main-color);               /* 文字色指定 */
  margin-right: 5px;            /* 余白指定 */
}

/*--日時の強調---*/
.attend_time_list {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  flex-direction: column;
}

p.attend_time {
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  line-height: 160%;
}
.attend_time time {
  font-size: 18px;
}


/* ================================ 
topへもどるボタン
 ================================ */
  .top_button {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    background: var(--main-color);
    border-radius: 50%;
    font-weight: 700;
    opacity: 100;
    transition: all 1s ease;
  }
  .top_button a {
    position: absolute;
    top: 11px;
    right: 8px;
    color: #fff;
    font-size: 13px;
  }
  .top_button a i {
    position: absolute;
    top: 0px;
    right: 2px;
    color: #fff;
    font-size: 2rem;
	text-align: center;
  }
  #page_top.show {
    display: block;
    opacity: 100;
    transform: none;
  }


/* ================================ 
　フッター
 ================================ */
footer {
  border-top: solid 2px var(--main-color);
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 60px;
}
footer img {
  width: 260px;
  margin: 5px auto;
}
#footer small {
  font-size: 1.0rem;
  font-weight: 300;
  color: #808080;
  text-align: center;
}

/* ================================ 
　公開後消す
 ================================ */
.coming {
  height: 700px;
  font-size: 16px;
  line-height: 175%;
  text-align: center;
}