@charset "utf-8";
/* スマートフォン対応CSS */

/* メニューが開いている時はbody固定 */
.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
}
#logosp, #topsp, .jp_sp{ display: none;}

/*** スマホ用ボタン ***/
.check_btn, #check_input, .hbgcl, .hbgmn{
    display: none;
}
#menu_sub1, #menu_sub2, #menu_sub3, #menu_sub4, #menu_sub1j, #menu_smph{
    display: none;
}

/*** ウィンドウ幅が最大479pxまでの場合に適用 ***/
@media screen and (max-width: 580px) {
  body{ line-height: 1.6;}

#logopc, #toppc, .jp_pc{ display: none;}
#logosp, #topsp, .jp_sp{ display: block;}
.br-pc { display: none; }

	header{
		padding-top: 0;
    background-color:transparent;
	}
	#headtop, #zentai{
		width: 100%;
	}
	#headtop{
		background-color: #FFFFFF;
		display: flex;
		flex-flow: wrap;
    border-bottom: solid 2px #003C14;
	}
	#headlogo{
		height: 50px;
		width: 60%;
	}
	#headlogo img{
		width: 100%;
		height: auto;
    margin: 0;
	}
  #headbutton{
    margin-right: 0px;
    width: 100%;
  }
  #headbutton ul{
    justify-content: right;
  }
  #headbutton ul li{
    margin: 0 8px 5px 0;
  }
 .jp_sp{
    display: block;
    background-color: #003C14;
    border-radius: 20px;
    padding: 1px;
  }
  .jp_sp:link{
    text-decoration: none;
  }
  .jp_sp:visited{
    text-decoration: none;
  }
  .jp_sp:hover{
    text-decoration: none;
    background-color: #006421;
  }

/*** menu ***/
 .hbgmn{
		display: block;
	}
	#kotei {
		height: 95px;
	}
	#main{
		padding-top: 95px;
	}

	.hbgmn{
    position: fixed;
    top: 0px;
    right: 0px;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
	}
	.hbgmn img, .hbgcl img{
    height: 60px;
    width: 60px;
	}

	/*** menu ***/
	#menu{
		display: none;
	}
	/*チェックがついたら表示させる*/
	#check_input:checked ~ #menu{
		display: block;
	}
	#check_input:checked ~ .hbgmn{
		display: none;
	}
	#check_input:checked ~ .hbgcl{
		display: block;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
	}

  nav{
		overflow-y: auto;
		overflow-x: hidden;
    width: 85%;
    margin: 0 0 0 auto;
	}
	#menu{
		width: 100%;
    height: auto;
}
	#menu ul{
		flex-direction:column;
		border-right: none;
		border-left: none;
	}
	#menu li{
		border-bottom: solid 1px #FFFFFF;
		border-right: none;
		position: relative;
		text-align: left;
	}
	#menu .mnbdrt{
		border-right: none;
	}
	#menu li a {
		padding: 18px 20px;
    justify-content:flex-start;
	}
	#menu li label{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	#menu li:hover > .submenu {
   display: none;
}

	#menu_sub1, #menu_sub2, #menu_sub3, #menu_sub4, #menu_sub1j{
		display: none;
	}
	.plusicon {
		 box-sizing: border-box;
		 position: relative;
		 display: inline-block;
		 width: 32px;
/*		 width: 52px;*/
		 height: 32px;
		 transform: scale(var(--ggs,1));
		 vertical-align: middle;
	}
	.plusicon::after,
	.plusicon::before {
		 content: "";
		 display: block;
		 box-sizing: border-box;
		 position: absolute;
		 width: 18px;
		 height: 2px;
		 background: #666666;
		 top: 14px;
		 right: 6px
	}
	.plusicon::after {
		 width: 2px;
		 height: 18px;
		 top: 6px;
		 right: 14px
	}
	.plusicon.open::after { /* ＋の縦線を見えなくしてーにする */
		opacity: 0;
		transform: rotate(90deg);
}

	#menu_sub1:checked ~ #sub1{	display: block;}
	#menu_sub2:checked ~ #sub2{	display: block;}
	#menu_sub3:checked ~ #sub3{	display: block;}
	#menu_sub4:checked ~ #sub4{	display: block;}
	#menu_sub1j:checked ~ #sub1j{	display: block;}

	#menu .submenu{
		width: 100%;
		background-color: rgba(238,238,238,1.00);
		padding: 5px 5px 0 5px;
		position: static;
	}
	#menu .submenu li{
		width: 100%;
	}
  #menu .submenu li a{
    padding: 13px 10px;
  }
  #menu .submenu .w15{	width: auto;}
  .m_down { display: none;}

  #topimg{
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  #topyama{ width: 90%; margin: 0 auto 10px auto;}
  .topmigi{padding-left: 0px;width: 90%;}
  .toptxt1{ font-size: 20px; padding: 10px;}
  #phy8{ width: 100%; margin: 0 auto;}

	#container{
  width: 100%;
  padding: 20px 10px;
  margin: 0;
}
  #sita{
    flex-wrap:wrap;
  }
  .banner{
    width: 100%; padding: 0px 10px;
  }
  .banner a, .banner img{
    width: 100%;
  }
  #whats{
    width: 100%;
    padding-right: 0px;
  }
  #jimu{
    width: 100%;
    padding-left: 0px;
  }
	/*** フッター ***/
	.foottxt{
		width: 100%;
	}
	footer .ftcopy{
		font-size: 0.8rem;
	}
  /*** top ***/
	.top_photo{ width: 50%; float: none; margin: 0 auto 15px auto;}

	/*** sub page ***/
  h2{ font-size: 24px;}
  h3{ font-size: 22px;}
  .txtbox1, .txtbox2{ padding: 10px 10px 30px 10px; }
  .ovwrp{ overflow-wrap: anywhere;}
  /*** list ***/
  .list1, list2{ margin-left: 20px;}
  /*** botan ***/
  .botan1{ width: 70%;}
  .botan1b{ width: 100%;}
  .botan2{width: 80%; font-size: 16px; margin: 10px auto;}
  .botan2b{width: 9em; font-size: 16px; padding: 10px 10px;}
  /*** about ***/
  .table_k, .table_kj { width: 100%; margin-bottom: 15px;}
  .table_k th, .table_k td { padding: 5px 3px;}
  .table_kj th, .table_kj td { padding: 5px 0;}
  .yokobox{ flex-wrap: wrap;}
  .circularimg{ width: 80%; margin: 0 auto;}
  /*** Registration ***/
  .table1 th, .table1 td{ padding: 5px 5px; white-space: normal;}
  .ml5_5{ margin-left: 5px;}
  /*** fisp ***/
  .fsipbox{ padding-right: 0px;}
  .fispimg{ margin: 10px;}
  /*** Committee ***/
  .commibox{ flex-wrap: wrap; justify-content:center;}
  .commibox img{ width: 70%;}
  .commibox div{ padding: 10px;}
  .commibox p{ margin-bottom: 10px;}
  .commibox2{ flex-wrap: wrap; justify-content:center;}
  .commibox2 img{ width: 70%;}
  .commibox2 div{ padding: 10px;}
  /*** Venue  ***/
  .map1{ width: 90%; height: 300px;}
  /*** award ***/
  .awphoto1{width: 90%;  border-radius: 50px;}
  .awphoto2{width: 90%;  border-radius: 50px;}
  /*** Concept of the Logo ***/
  #logo_a{ width: 50%;}

  /*** 日本語サイト ***/
  .koubo{ justify-content: flex-start; flex-wrap: wrap;}
  .table2 th, .table2 td{ padding: 5px 5px;}
  .table2 th{ white-space: normal;}
  .table2 .tml5{ margin-left: 20px;}
}