@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------------------------
?@?@?^?O ?v???p?e?B??????
------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,dt,dd, pre, blockquote, form, input, select, textarea{
	font-weight: normal;
	margin: 0;
	padding:0;
} 
ul{	list-style:none; }
h1 {
	margin-bottom: 10px;
}
h2 {
	font-weight: bold;
}
img	{
	border-style:none;
}
a:link{
	color:#0099FF;
}
a:visited, a:hover{
	color:#FF6600;
}
/*------------------------------------------------------------------------------
------------------------------------------------------------------------------*/

#wrap {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	  font-weight: bold;
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-size: 80%;
	line-height: 1.7em;
	color: #333333;
}
#wrap2 {
	font-size: 0.8em;
	line-height: 1.5;
	font-weight: bold;
	background-color: #FFFFFF;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 85px;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	position:relative;
/*	background-image: url(img/header.png);
	background-repeat: no-repeat;
	
*/}
#header_a {
	height: 85px;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	display:block;
	background-image: url(img/header.png);
	background-repeat: no-repeat;
}
#header_a span{ visibility: hidden; } 


#header a.judo{
	position:absolute;
	top:0;
	right:0;
	height:75px;
}
#header a.judo img{
	height:75px;
	display:block;
}
#search {
	background-color: #FFFFFF;
	font-size: 90%;
	margin: 0px;
	padding: 0 10px 10px;
	border: 1px solid black;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}


#contents {
	padding-top: 10px;
}

#left {
	float: left;
	width: 250px;
}
#pickupWrap {
	margin-top: 10px;
	margin-bottom: 10px;
}

#pickupWrap > :not(img) {
	border-left: 1px solid black;
	border-right: 1px solid black;
}

#pickupWrap > :nth-child(2) {
	border-top: 1px solid black;
}

#pickupWrap > :last-child {
	border-bottom: 1px solid black;
	border-radius: 0 0 10px 10px;
}

.pickup {
	height: 90px;
	background-color: #CCCCCC;
	padding: 5px;
	font-size: 90%;
}
.pickup2 {
	height: 90px;
	background-color: #EEEEEE;
	padding: 5px;
	font-size: 90%;
}



#main {
	float: left;
	width: 678px;
	padding-right: 0px;
	padding-left: 20px;
}
#tenpoMenu li {
	float: left;
	width: 329px;
}
#tenpoMenu img {
	float: left;
}
#tenpoMenu h2 {
	float: left;
	padding-top: 10px;
	width: 175px;
	padding-bottom: 5px;
	font-size: 1.2em;
}
.menuOrange {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CC9933;
}
.menuRed {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FF0000;
}
.menuGreen {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #009900;
}
.menuBlue {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #0033FF;
}
.menuSkyblue {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #00CCFF;
}






#footer {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
#copyright {
	float: right;
	margin-top: 100px;
}

#footer_wrap {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	margin-top: 10px;
	font-size: 80%;
	color: #333333;
	line-height: 1.4em;
}

#menu_wrap {
	height: 34px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FF0000;
	background-image: url(img/menu_bg.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

#menu {
	height: 34px;
	width: 950px;
	margin-right: auto;
	margin-left: auto;
}
#menu  li {
	float: left;
}
.menu01	{
	text-decoration:none;
	display:block;
	width: 170px;
	height: 34px;
	background-image: url(img/menu.png);
}
.menu01:hover	{
	background-image: url(img/menu.png);
	background-position: 0px -34px;
}
.menu02	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -170px 0px;
	background-repeat: no-repeat;
}
.menu02:hover	{
	background-image: url(img/menu.png);
	background-position: -170px -34px;
}
.menu03	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -300px 0px;
	background-repeat: no-repeat;
}
.menu03:hover	{
	background-image: url(img/menu.png);
	background-position: -300px -34px;
}
.menu04	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -430px 0px;
	background-repeat: no-repeat;
}
.menu04:hover	{
	background-image: url(img/menu.png);
	background-position: -430px -34px;
}
.menu05	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -560px 0px;
	background-repeat: no-repeat;
}
.menu05:hover	{
	background-image: url(img/menu.png);
	background-position: -560px -34px;
}
.menu06	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -690px 0px;
	background-repeat: no-repeat;
}
.menu06:hover	{
	background-image: url(img/menu.png);
	background-position: -690px -34px;
}
.menu07	{
	text-decoration:none;
	display:block;
	width: 130px;
	height: 34px;
	background-image: url(img/menu.png);
	background-position: -820px 0px;
	background-repeat: no-repeat;
}
.menu07:hover	{
	background-image: url(img/menu.png);
	background-position: -820px -34px;
}


#tmenu {
	height: 40px;
	width: 678px;
	background-image: url(img/tmenu_bg.png);
	background-repeat: repeat-x;
}

#inform {
	background-color: #EEEEEE;
	margin-bottom: 10px;
}
#tenpo_map {
	height: 300px;
}

#tmenu  li {
	float: left;
}
#error {
	margin-top: 10px;
	height: 500px;
}
.tenpo_nopic {
	height: 256px;
	width: 338px;
	float: left;
	background-image: url(img/nophoto.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.tenpo_pic {
	width: 338px;
	float: left;
}
.tmenu01_1	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu_this.png);
}
.tmenu01	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu.png);
}
.tmenu01:hover	{
	background-image: url(img/tmenu.png);
	background-position: 0px -40px;
}
.tmenu02_1	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu_this.png);
	background-position: -100px 0px;
	background-repeat: no-repeat;
}
.tmenu02	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu.png);
	background-position: -100px 0px;
	background-repeat: no-repeat;
}
.tmenu02:hover	{
	background-image: url(img/tmenu.png);
	background-position: -100px -40px;
}
.tmenu03_1	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu_this.png);
	background-position: -200px 0px;
	background-repeat: no-repeat;
}
.tmenu03	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu.png);
	background-position: -200px 0px;
	background-repeat: no-repeat;
}
.tmenu03:hover	{
	background-image: url(img/tmenu.png);
	background-position: -200px -40px;
}
.tmenu04_1	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu_this.png);
	background-position: -300px 0px;
	background-repeat: no-repeat;
}
.tmenu04	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu.png);
	background-position: -300px 0px;
	background-repeat: no-repeat;
}
.tmenu04:hover	{
	background-image: url(img/tmenu.png);
	background-position: -300px -40px;
}
.tmenu05_1	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu_this.png);
	background-position: -400px 0px;
	background-repeat: no-repeat;
}
.tmenu05	{
	text-decoration:none;
	display:block;
	width: 100px;
	height: 40px;
	background-image: url(img/tmenu.png);
	background-position: -400px 0px;
	background-repeat: no-repeat;
}
.tmenu05:hover	{
	background-image: url(img/tmenu.png);
	background-position: -400px -40px;
}


.clearboth {
	clear: both;
}
.news {
	font-size:0.9em;
	width: 329px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
}
.news td{
	border-bottom:dashed 1px #CCCCCC;
	padding:10px 0;
}
.rss {
	float: right;
	padding-right: 5px;
}

.oshirase  {
	background-image: url(img/sub001.png);
	background-repeat: no-repeat;
	width: 329px;
	height: 40px;

}
.tenpoOshirase {
	background-image: url(img/sub002.png);
	background-repeat: no-repeat;
	height: 40px;
	width: 329px;
}

.newssubfont {
	font-size: 80%;
}


.event {
	margin-top: 10px;
}
.event h2 {
	background-color: #FF0000;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 2;
	color: #FFFFFF;
	padding-left: 10px;
}
.whith_bold {
	font-weight: bold;
	color: #FFFFFF;
}
.black_bold {
	font-size: 1.5em;
	font-weight: bold;
}
.orange_bold {
	font-weight: bold;
	color: #CC9900;
}
.green {
	color: #339966;
}

.search_result {
	margin-top: 10px;
}
.redbold {
	color: #FF0000;
	font-weight: bold;
}
.red{
	color:#ff0000;
}

h1 {
	font-size: 1.5em;
	line-height: 43px;
	font-weight: bold;
	background-color: #FFFFFF;
	border: 2px grey solid;
	padding-left: 20px;
}
.leftimage {
	padding-bottom: 10px;
}
.leftimage img {
	border:none;
}
.pad{
	padding-bottom:15px;
}
/****************************************************************/
/*							リスト								*/
/****************************************************************/
.number_list ul{
	margin-left:2em;
	list-style-type: decimal;
}
/****************************************************************/
/*							kome								*/
/****************************************************************/
.kome_a{
	text-align:right;
	color:red;
	text-decoration:underline;
}
.kome_b{
	color:#999999;
}
/****************************************************************/
/*							subtitle							*/
/****************************************************************/
.subtitle_a{
	margin:10px 0;
	padding:5px;
	background-color:#0066CC;
	color:#FFFF00;
}
/****************************************************************/
/*							テーブル							*/
/****************************************************************/
.table_a table{
	margin-top:10px;
	width:100%;
}
.table_a td, .table_a th{
	padding:10px;
	border-bottom:dashed 1px #CCCCCC;
}
.table_b table{
	margin-top:10px;
    border: 1px #999999 solid;
    border-collapse: collapse;
    border-spacing: 0;
}
.table_b td{
    padding: 10px;
    border: 1px #999999 solid;
    border-width: 0 0 1px 1px;
}
.table_b th{
    padding: 10px;
    border: #999999 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
.table_no_border{
	border:none;
}
.grid-2-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.grid-2-col div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
@media screen and (max-width: 700px) {
	.grid-2-col {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}
#branch_list td{
	border-bottom:dashed 1px #CCCCCC;
	padding:10px 0;
} 
/****************************************************************/
/*							月例大会							*/
/****************************************************************/
#getsurei_kekka h2,#getsurei_result h2{
	line-height:1.2em;
	font-size:1.2em;
	border-left:1.2em solid #F00;
	margin:0 0 10px 0;
	padding-left:5px;
}
#getsurei_result table{
	width:100%;
	margin-bottom:40px;
	border-collapse:collapse;
	border:1px solid #CCC;
}
#getsurei_result td, #getsurei_result th{
	text-align:center;
	padding:5px 2px;
	border:1px solid #CCC;
}
#getsurei_result th{
	background-color:#69C;
	color:#FFF;
}
#getsurei_kekka table{
	width:100%;
	margin-bottom:40px;
	border-collapse:collapse;
	border:1px solid #CCC;
}
#getsurei_kekka td, #getsurei_kekka th{
	padding:5px;
	border:1px solid #CCC;
}
#getsurei_kekka th{
	width:25px;
	background-color:#69C;
	color:#FFF;
}
#getsurei_kekka .title{
	width:70px;
	text-align:center;
	font-weight:bold;
	background-color:#69C;
	color:#FFF;
}
#getsurei_kekka .score{
	width:20px;
	font-size:0.8em;
}
#getsurei_kekka .gray{
	background-color:#EEE;
}
.bt_border{
	border: 1px solid #Fd0;
	background: #ff0;
}

.getsurei_gaiyou{
	
	font-family: Meiryo;
    font-weight:bold;
	font-size:24px;
	background-color:#19E7E7;
	color:#E7E719;
	width: 80px;
	text-align:center;
}


/****************************************************************/
/*							個人成績							*/
/****************************************************************/

.first-letter {
  font-weight:bold;
  font-size:32px;
}

.personal{
	width:20px;
	font-size:0.8em;
/*	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
    font: italic normal bold  150% "ＭＳ Ｐゴシック",sans-serif;
}

.stp0 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-position: 0 -100%;
  background-image: url(img/anm_stamp_0.png);
} 

.stp1 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-image: url(img/anm_stamp_1.png);
} 

.stp2 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-image: url(img/anm_stamp_1.png);
} 

.stp3 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-image: url(img/anm_stamp_1.png);
} 
 
.stp4 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-image: url(img/anm_stamp_1.png);
} 

.stp5 {width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #ff0000;
  background-size: 100% 200%;
  background-image: url(img/anm_stamp_1.png);
} 



.kainName{
	display:inline;
	font-family: Meiryo;
    font-weight:bold;
	font-size:40px;
	}

.kainSentence{
	display:inline;
	font-family: Meiryo;
	font-size:20px;
	}

.kainStrong{
	display:inline;
	font-family: Meiryo;
    font-weight:bold;
	font-size:28px;
	}

.kainRank{
    font-weight:bold;
	font-size:20px;
	}

.defaultlist,.defaultlist li{
	padding:0px;
	margin:0px;
}
 
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list1 li{
	position:relative;
	padding-left:20px;
}
 
.list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:3px; 
	left:2px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #aaa;
}

table.type09 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	table-layout:fixed;
	width:650px;
	height:700px;
	font-size:20px;

}
table.type09 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #369;
	border-bottom: 3px solid #ff0000;
}
table.type09 tbody th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #f3f6f7;
}
table.type09 td {
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}

table.type09 .even{
	background: #FFEEFF;
}

table.type09 th:first-child {
	width: 50px;
	border-radius: 5px 0 0 0;
}

.top-nav {
	max-height: 120px;
}
.h-100 {
	height: 100%;
}
#left-menu-toggle {
    display: none;
}
.left-toggler, #menu-toggle {
    display: none;
    font-size: 1rem;
}

.teachers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	line-height: 2.2;
}

.teachers__item {
	display: grid;
	grid-template-areas: 'image name' 'image name_kana' 'image regist_no' 'image qualification';
	grid-template-columns: 1fr 2fr;
	column-gap: 0.5rem;
	border: 2px solid #bfbfbf;
	
	.teacher__group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.teacher__badge {
			background-color: #F8CA1F;
			border: 2px solid black;
			border-radius: 5px;
			padding: 0 8px; 
			span {
				color: #464646;
			}
		}
	}
}
.teachers a {
    text-decoration: none;
    color: #333;
}

.teachers__image {
	grid-area: image;
	max-width: 100%;
	margin: 10px 0 0 10px;
}
.teachers__image img {
	width: 100%;
}
.teachers__name {
	grid-area: name;
}
.teachers__name-kana {
	grid-area: name_kana;
}
.teachers__regist_no {
	margin-top: 0.5em;
	grid-area: regist_no;
}
.teachers__qualification {
	margin-top: 0.5em;
	grid-area: qualification;
}
.teacher {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.teacher__profile {
    display: grid;
    grid-template-areas: "image name" "image name_kana";
    grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.teacher__image {
	width: 100%;
    grid-area: image;
}
.teacher__name {
    grid-area: name;
    display: flex;
    align-items: center;
	font-size: 1.5rem;
	text-align: center;
}
.teacher__name-kana {
    grid-area: name_kana;
    display: flex;
    align-items: center;
	font-size: 1.2rem;
	text-align: center;
}
.teacher__label {
}
.teacher__regist_no, .teacher__qualification, .teacher__profession, .teacher__comment, .teacher__performance {
    padding-left: 15px;
    padding-right: 15px;
	font-weight: normal;
}
.box-sizing-border {
    box-sizing: border-box;
}

.teacher.box-sizing-border {
	position: relative;
	.teacher__badge{
		position: absolute;
		background-color: #F8CA1F;
		border: 2px solid black;
		border-radius: 5px;
		padding: 0 8px;
		right: 0;
		span {
			color: #464646;
		}
	}
	
}
.box-sizing-border * {
    box-sizing: border-box;
}
.teachers-table {
	border-collapse: collapse;
	width: 100%;
}

.teachers-table td, .teachers-table th {
	border: 1px solid #ddd;
	padding: 8px;
}

.teachers-table tr:nth-child(even){background-color: #f2f2f2;}

.teachers-table tr:hover {background-color: #ddd;}

.teachers-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #04AA6D;
	color: white;
}
h1 {
	transform: translate(0%, -50%);
	opacity: 0;
	transition: all 2s;
}
h1.faded-in {
	transform: translate(0, 0);
	opacity: 1;
}

.actions-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.actions-top button {
	width: 130px;
	height: 40px;
}

.form-add-teacher {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-add-teacher__form-group {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 4fr;
}

.form-add-teacher__form-group label {
	height: 2rem;
}

.form-add-teacher__form-group input:not([type="checkbox"]) {
	font-size: 1rem;
	padding-left: 5px;
	padding-right: 5px;
	width: 100%;
}

.form-add-teacher__form-group input:not([type="file"]) {
	height: 1.5em;
	border: 1px solid #bfbfbf;
}

.form-add-teacher__form-textarea {
	height: 100px;
	margin-bottom: 60px;
}

.error-message {
	color: red;
	font-size: 0.8rem;    
	margin-top: 5px;
	display: inline-block;
}

.contact-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    font-size: 1rem;
}

.contact__label {
    padding-top: 1rem;
    text-align: left;
}

.contact-grid textarea, .contact-grid input {
    width: 400px;
    border: 1px solid #858585;
    resize: none;
}

.contact__footer {
    margin-top: 2rem;
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

#previewModal {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	font-weight: bold;
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 80%;
	line-height: 1.7em;
	color: #333333;
}

#previewModal .teacher {
	width: 678px;
	margin-right: auto;
	margin-left: auto;
}

.search-teachers {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	margin-top: 20px;
	margin-bottom: 10px;
	
	* {
		box-sizing: border-box;
	}
	
	.search-teachers__input, .search-teachers__select {
		height: 30px;
		font-size: 1rem;
		text-align: left;
		padding-left: 5px;
		padding-right: 5px;
		border: black 2px solid;
	}
	
	.search-teachers__input {
		width: 200px;
	}
	.search-teachers__input:placeholder-shown {
		text-align: center;
	}
	
	.search-teachers__select {
		width: 100px;
	}
	
	.search-teachers__button {
		width: 100px;
		height: 30px;
		font-size: 1rem;
		border: black 2px solid;
	}
	
	.search-teachers__keyword, .search-teachers__order {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}
}

@media screen and (min-width: 701px) {
	.menu {
		width: 950px;
		height: 34px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #FF0000;
		background-image: url(img/menu_bg.png);
		background-repeat: repeat-x;
		background-position: bottom;
		padding-left: calc(50% - 475px);
		padding-right: calc(50% - 475px);
		font-size: 0.8rem;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-self: center;
	}

	.menu > li {
		display: flex;
		align-items: center;
		height: 100%;
		border-left: 1px solid #333;
		padding-left: 10px;
	}
	.menu > li:last-child {
		border-right: 1px solid #333;
	}

	.menu a {
		text-decoration: none;
		color: #333;
		font-weight: 550;
	}
	.menu a:hover {
		color: #FF0000;
	}
	.top-nav__logo {
		margin-left: calc(50% - 475px);
	}
}

/* mobile css */
@media screen and (max-width: 700px) {
	#header {
		display: none;
	}
	#menu_wrap {
		display: none;
	}
	#wrap {
		width: 100%;
		background-image: none;
	}
    #contents {
        padding-top: 0;
    }
    #main {
    }
    
	#left {
		height: 0;
		position: fixed;
		top: calc(51px + 3rem);
		overflow: auto;
		background: red;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
		z-index: 2;
	}
	#main {
		max-width: 100%;
		padding: 10px 0 0 0;
	}
	#main * {
		max-width: 100%;
		height: auto;
		word-wrap: break-word;
	}
	#footer_wrap {
		width: 100%;
	}
	#footer {
		width: 100%;
	}
	
	.left-toggler {
		width: 100%;
        height: 3em;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 50px;
        background: white;
        border: 1px solid #ccc;
		z-index: 3;
	}
	
	.top-nav * {
		box-sizing: border-box;
	}
	
	.top-nav {
		background: #fff;
		display: flex;
		position: sticky;
		top: 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		width: 100%;
		padding-right: 10px;
		z-index: 4;
	}

	.menu {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.menu > li {
		margin: 0 1rem;
		overflow: hidden;
		align-items: center;
	}

	.menu-button-container {
		display: none;
		height: 100%;
		width: 30px;
		cursor: pointer;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#menu-toggle {
		display: none;
	}

	.menu-button,
	.menu-button::before,
	.menu-button::after {
		display: block;
		background-color: #000;
		position: absolute;
		height: 4px;
		width: 30px;
		transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
		border-radius: 2px;
	}

	.menu-button::before {
		content: '';
		margin-top: -8px;
	}

	.menu-button::after {
		content: '';
		margin-top: 8px;
	}

	#menu-toggle:checked + .menu-button-container .menu-button::before {
		margin-top: 0px;
		transform: rotate(405deg);
	}

	#menu-toggle:checked + .menu-button-container .menu-button {
		background: rgba(255, 255, 255, 0);
	}

	#menu-toggle:checked + .menu-button-container .menu-button::after {
		margin-top: 0px;
		transform: rotate(-405deg);
	}

	.menu-button-container {
		display: flex;
	}

	.menu {
		position: absolute;
		top: 0;
		margin-top: 50px;
		left: 0;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	#menu-toggle ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#menu-toggle:checked ~ .menu li {
		border: 1px solid #222;
		height: 3.5em;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	.menu > li {
		display: flex;
		justify-content: center;
		margin: 0;
		width: 100%;
		color: #222;
		background-color: #fff;
	}

	.menu > li:not(:last-child) {
		border-bottom: 1px solid #222;
	}
	
	.menu > li > a {
		color: #222;
		text-decoration: none;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	h1 {
		background-size:100% 100%;
	}

	.form-add-teacher {
		grid-template-columns: 1fr;
	}
	
	.h-100--sp {
		height: 100%;
	}
    
    .contact-grid {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }
    
    .contact__label {
        padding-top: 2rem;
    }
    
    .contact-grid textarea, .contact-grid input {
        width: 100%;
    }
    
    .contact__footer {
        grid-column: 1 / 2;
    }

	.search-teachers {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		gap: 10px;

		* {
			box-sizing: border-box;
		}

		.search-teachers__keyword, .search-teachers__order {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
			width: 300px;
		}

		.search-teachers__input, .search-teachers__select {
			height: 30px!important;
			font-size: 1rem;
			text-align: left;
			padding-left: 5px;
			padding-right: 5px;
			border: black 2px solid;
		}

		.search-teachers__input {
			width: 100%;
		}

		.search-teachers__select {
			width: 100%;
		}

		.search-teachers__button {
			width: 150px;
			height: 30px;
			font-size: 1rem;
			border: black 2px solid;
		}
	}
}