@charset "UTF-8";
/* CSS Document */
/*共通*/
html {
  font-size: 62.5%; /* 16px x 0.625 = 10px(=1rem) */
  scroll-behavior: smooth;
}
body {
	  /* 
    calc + vwの計算式
    画面幅1200pxの時 font-size: 17px
    画面幅320pxの時 font-size: 15px
*/
  font-size: calc(15px + 2 * (100vw - 320px)/880);  
  /*font-size: 1.5rem; 15px */
  font-family: 'Noto Sans JP', serif;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  letter-spacing: 2px;
  line-height: 1.5;
	list-style: none;
	overflow-wrap: break-word;
	word-break: keep-all;
	color: #333333;
}

p {
	overflow-wrap: break-word;
	word-break: keep-all;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, body {
    font-feature-settings: "pkna";
  }
}
*, *::before, *::after {
  box-sizing: border-box;
}
/*Link Color [
----------------------------------------------------------- */
a:link {
  color: #4B4B4B;
  text-decoration: none;
}
a:visited {
  color:#4B4B4B;
  text-decoration: none;
}
a:hover {
	color: #B10505;
  text-decoration: none;
  transition: 0.5s;
}
a:active {
  color: #000;
}
/*====================
{{スマホを基本設計にする}}
 - 〜320px：SP縦
 - 480px〜599px：SP横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/
/* 〜320px：SP縦
------------------------------ */
.fw-b{
	font-weight: bold;
}

.flex-base{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.fs-m{
	font-size: calc((100vw - 320px) / 500 + 16px);
}

.fs-l{
	font-size: calc((100vw - 320px) / 300 + 20px); 
}

.titel-l{
		  /* 
    calc + vwの計算式
    画面幅1200pxの時 font-size: 36px
    画面幅320pxの時 font-size: 26px
*/
  font-size: calc(26px + 10 * (100vw - 320px)/880);  
	padding: 0 10px 10px 10px;
	text-align: center;
}

.titel-m{
		  /* 
    calc + vwの計算式
    画面幅1200pxの時 font-size: 25px
    画面幅320pxの時 font-size: 20px
*/
  font-size: calc(20px + 5 * (100vw - 320px)/880);  
	color: #B10505;
	text-align: center;
	font-weight: bold;
	letter-spacing: 10px;
	width: 89%;
	margin: 0 auto;
}

.titel-m::after{
	content: "";
	border-bottom: solid 1px #B10505;
	display: block;
	margin: 20px;
	margin: 10px auto;
	max-width: 1200px;
}

/*吹き出しタイトル*/
.em-titel{
	position: relative;
	display:block;
    padding: 0 30px;
    margin-bottom: 36px;
	width: 80%;
	max-width: 800px;
	margin: 0 auto 30px;;
}

.em-titel:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 2px;
    height: 100%;
    background: #B10505;
    border-radius: 3px;
    transform: rotate(-10deg);
}

.em-titel:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #B10505;
    border-radius: 3px;
    transform: rotate(10deg);
}

.base_color{
	color: #B10505;
}


header{
position: fixed;
  left: 0;
  top: 0;
  width: 100%;
	z-index: 90;
}

.nav-list{
	display: none;
}

nav{
	position: relative;
}

/*ハンバーガーメニュー*/
.menu-btn {
	position: fixed;
  display: flex;
	top: 0;
	right: 0;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #333030;
}
.menu-btn p {
  color: #FFF;
}
.menu-btn span, .menu-btn span:before, .menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
	top: 12px;
}

.menu-btn span:before {
  bottom:15px;
}
.menu-btn span:after {
  top:25px;
}
/*バツ*/
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 12px;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 12px;
  transform: rotate(-45deg);
}
#menu-btn-check {
  display: none;
}
/*メニュー内*/
.menu-content{
	& ul{
	width: 70%;
	padding:20px 0;
	text-align: right;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 0 auto;
	text-align:left;
}
	& li{
		padding:10px;
	}
}

.menu-content {
width:50%;
  height: 100vh;
  position: fixed;
	top:0px;
  right:-100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: rgba(46, 46, 46, 0.7);
  transition: all 0.5s; /*アニメーション設定*/
}

.menu-content a:hover{
	color: #B10505;
}

.menu-content ul li a {
  color: #ffffff;
}

#menu-btn-check:checked ~ .menu-content {
  right: 0px; /*メニューを画面内へ*/
}


/*ヘッダー スクロール */
.is-fixed-nav{
  position:fixed;
  top: 20;
  left: 0;
  z-index:10;
  width: 100%;
	padding: 0;
  background-color: rgba(255,255,255,0.9);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 60px;
}

.is-fixed-nav .nav-list-pc li a{
  color: #534741;
}

.is-fixed-nav .nav-list-pc li a:hover{
  color:#B10505;
}


.nav-left{
	display: flex;
}

.nav-left li:first-child{/*文部科学省認可*/
	background:#333030;
	width: 100px;
	height: 60px;
	padding: 10px 10px 20px;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
	z-index: 91;
	line-height: 1.2;
}

.nav-left li:nth-child(2){/*支部名*/
	padding: 5px;
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.0rem;
	color: #000;
	line-height: 1.2;
	width: 50%;
}


.nav-list ul{
	display: flex;
	flex-wrap: wrap;
	width: 200px;
	color: #000;
	text-align: center;
	justify-content: space-between;
	margin: 5px auto;
	font-size: 1.4rem;
}

/*.nav-list li:nth-child(even){
	flex-basis: 50%;
}

.nav-list li:nth-child(odd){
	flex-basis: 50%;
}*/

.nav-list li a{
	color: #000;
}

.nav-list li a:hover{
	color:#B10505 ;
}

.nav-con{
  position:fixed;
 top:0px;
  left: 0;
  width: 100%;
	padding: 0;
  background-color: rgba(255,255,255,1);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 60px;
}

.is-fixed .nav-list li a{
  color: #000;
}

.is-fixed .nav-list li a:hover{
  color: #00B1D5;
}

.is-fixed .nav-left li:nth-child(2){
	color: #000;
}

.annotation{
	font-size: 1.2rem;
}


.ft-copy{
	position: relative;
	bottom: 70px;
	display: block;
	text-align: center;
	font-size: 1.0rem;
	color: #000;
	padding: 10px;
	width: 100%;
}

/*ファイヤーフォックス　カラム落ち用*/
.form-ffox{
	 letter-spacing: -0.5rem;
}

.form-ffox td,.form-ffox th{
	letter-spacing: 0.1rem;
}

/*.ex-text{
	font-size: calc((100vw - 320px) / 400 + 14px);
}*/


/* 320px〜599px：SP横
------------------------------ */
@media screen and (min-width:320px) {
	
.nav-list ul{
	width: 98%;
	margin: 10px auto;
}
	
	.is-fixed{
  height: 100px;
}
 
}


/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:800px)  {
	.br-pc{
		display: block;
	}
	
.is-fixed{
  height: 55px;
}
	
.nav-left li:first-child{/*文部科学省認可*/
	width: 180px;
	padding: 20px 10px 20px;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
	z-index: 91;
	line-height: 1.2;
}
	
.nav-left li:nth-child(2){
	width: 500px;
	padding: 15px 0 0 5px;
}

.nav-list ul{
	justify-content:space-around;
	margin: 10px auto;
}
	
.em-titel:before {
    transform: rotate(-25deg);
}

.em-titel:after {
    transform: rotate(25deg);
}
	
.menu-content {/*ハンバーガーメニュー内*/

}
	
}
/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) {
	.hamburger-menu{
		display: none;
	}
	
	.nav-list{
		display: block;
	}
	
	.nav-con{
		display: flex;
		justify-content: space-between;
		height: 55px;
	}
	
	.nav-list,.nav-left{
		width: 50%;
		max-width: 700px;
	}

.is-fixed{
  height: 55px;
}

}

/*    font-size
---------------------------------------------------- */
.fz12 {
  font-size: 12px;
  font-size: 1.2rem;
}
.fz16 {
  font-size: 16px;
  font-size: 1.6rem;
}
.fz18 {
  font-size: 18px;
  font-size: 1.8rem;
}
.fz22 {
  font-size: 22px;
  font-size: 2.2rem;
}
.fz25 {
  font-size: 25px;
  font-size: 2.5rem;
}
.fz28 {
  font-size: 28px;
  font-size: 2.8rem;
}
.fz64 {
  font-size: 64px;
  font-size: 6.4rem;
}
/*   clerfix
---------------------------------------------------- */
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/*   text
---------------------------------------------------- */
.ac {
  text-align: center !important;
}
.ar {
  text-align: right !important;
}
.al {
  text-align: left !important;
}
/*    float
---------------------------------------------------- */
.fr {
  float: right !important;
}
.fl {
  float: left !important;
}
.clear {
  clear: both;
}
.oh {
  overflow: hidden;
}
/*    margin
---------------------------------------------------- */
.mt00 {
  margin-top: 0px;
}
.mt05 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt13 {
  margin-top: 13px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mt35 {
  margin-top: 35px;
}
.mt40 {
  margin-top: 40px;
}
.mr00 {
  margin-right: 0px;
}
.mr05 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr25 {
  margin-right: 25px;
}
.mr30 {
  margin-right: 30px;
}
.mr35 {
  margin-right: 35px;
}
.mr40 {
  margin-right: 40px;
}
.mb00 {
  margin-bottom: 0px;
}
.mb05 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb35 {
  margin-bottom: 35px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb60 {
  margin-bottom: 60px;
}
.ml00 {
  margin-left: 0px;
}
.ml05 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml25 {
  margin-left: 25px;
}
.ml30 {
  margin-left: 30px;
}
.ml35 {
  margin-left: 35px;
}
.ml40 {
  margin-left: 40px;
}
/*    padding
---------------------------------------------------- */
.pt00 {
  padding-top: 0px;
}
.pt05 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt25 {
  padding-top: 25px;
}
.pt30 {
  padding-top: 30px;
}
.pt35 {
  padding-top: 35px;
}
.pt40 {
  padding-top: 40px;
}
.pr00 {
  padding-right: 0px;
}
.pr05 {
  padding-right: 5px;
}
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pr25 {
  padding-right: 25px;
}
.pr30 {
  padding-right: 30px;
}
.pr35 {
  padding-right: 35px;
}
.pr40 {
  padding-right: 40px;
}
.pb00 {
  padding-bottom: 0px;
}
.pb05 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb25 {
  padding-bottom: 25px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb35 {
  padding-bottom: 35px;
}
.pb40 {
  padding-bottom: 40px;
}
.pb80{
	padding-bottom: 80px;
}

.pl00 {
  padding-left: 0px;
}
.pl05 {
  padding-left: 5px;
}
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pl25 {
  padding-left: 25px;
}
.pl30 {
  padding-left: 30px;
}
.pl35 {
  padding-left: 35px;
}
.pl40 {
  padding-left: 40px;
}