@charset "UTF-8";
body{background:#F5F5F3;color:#3d3d3d;}
article{
position: relative;
width:1000px;
margin:0 auto;
background:#fff;

}

.Main{
  position:relative;
  top:0;
  left: 50%;
  transform: translateX( -50%);
  width:800px;
  height:100%;
  padding:0;

}
.Main a ,.Main a:visited, .Main a:active{
  color:#008AF0;
  text-decoration:underline;
}




.Main h1{
 clear:both;
 position: relative;
 font-size:20px;
 text-align: center;
 background:#fff;
 margin:0 0 30px 0;
 padding:30px 0 10px 0;
 font-weight:bold;

}
.Main h1:before {
 position: absolute;
 bottom: -5px;
 left: calc(50% - 50px);
 width: 100px;
 height: 5px;
 content: '';
 border-radius: 3px;
 background: #1E90FF;
}

.Main h2{
  clear:both;
  position: relative;
 font-size:30px;
 text-align: center;

 background:#fff;
 margin:50px 0 0 0;
 padding:30px 0 0 0;
}
.Main h2:before {
 position: absolute;
 bottom: -5px;
 left: calc(50% - 50px);
 width: 100px;
 height: 5px;
 content: '';
 border-radius: 3px;
 background: #1E90FF;
}










.PotalBox{
  position:relative;
  left:-100px;
  display:flex;
  justify-content: space-around;
  align-items: center;

  box-sizing: border-box;
  margin:0 0 100px 0;
  width:1000px;
  height:200px;

}
.PotalBox div{

  width:180px;
  height:100px;
}




.FooterBoxMain_LP{
  position: relative;
  width:100%;
  height:80px;
  margin:0 auto;
  padding:0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  background:#555;

}

footer ul {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 0 10px 0 ;
  margin:0;
  width:29%;
  font-size:13px;
  display:flex;
  justify-content: center;
  align-items: center;
}
footer li {
  color:#fff;
  line-height:1.7;
  margin:0 0 0 0;
}
footer li:nth-child(1),footer li:nth-child(2),footer li:nth-child(3){
  margin:0 30px 0 0;
}


#flagmentMsg{
	position: fixed;
	z-index: 9999;
	top: 10px;
	left: calc(50% - 210px);
	width: 420px;
	padding: 10px 0;
	text-align: center;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 5px;
	color: #fff;
  display:none;
  user-select: none;
}



/***********トップ***********/

.TopImg{
	background-image:url('/src/image/bg/mypage/top800x180.png');
	background-size: contain;
	position:relative;
	left:0;
	width: 800px;
	height:180px;
}


.ScheduleBox li {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	text-align: center;
	text-overflow: ellipsis;
	color: #fff;
  flex: 1;
}
.ScheduleBox li:after {
  z-index: 1;
	position: absolute;
	display: block;
	content: '';

  top:-10px;
  right:-7px;
  width: 25px;
  height: 25px;

  border: 15px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
}


.ScheduleBox li:nth-child(1)::before{
  z-index: 1;
	position: absolute;
	display: block;
	content: '';
  top:0;
  left:-22px;
  width: 5px;
  height: 5px;
  border: 15px solid;
  border-color: #fff #fff transparent transparent;
  transform: rotate(45deg);
}

	/* StepAll */
	.si5{
		background:#c0c0c0;
		color:#fff;
	}
	.si5 li::before{

  }



  
.ScheduleBox{
	position:relative;
	padding:15px 10px;
	margin:0 0 0 0;
	background:#f0f0f0;
	box-sizing: border-box;
}
.ScheduleBox .UserBox{

	background:#fff;
	margin:0 0 10px 0;
	padding:10px 20px;

}
.ScheduleBox div:nth-child(1){
	margin:5px 0 10px 0;
	padding:10px 20px;
}

.ScheduleBox ul{
	display:flex;
  width:90%;
	margin:10px auto 30px auto;
}

.UserBox p{
  width:90%;
	margin:25px auto 30px auto;
}



.cautionBox{
	background:#f5f5f5;
	border-radius:5px;
	font-size:12px;
}
	/* MEMO: scriptCreateNode = .cautionBox:hover{background-color:#64F9C1; color:#000;} */

.cautionBox p{
	line-height:50px;
	vertical-align:middle;
}
.cautionBox p img{
	width:24px;
	height:24px;
	vertical-align:middle;
	padding: 0 5px 4px 10px;
}

#zoomBox{
	position: relative;
	background:#003399; color:#fff;
	border-radius:10px;
	width:300px;
	height:120px;
	padding:20px;
	font-size:12px;
	margin:20px auto 0 auto;
}

#zoomBox img{
	width:60px;
	height:60px;
	object-fit:contain;
	border-radius:10px;
	float:left;
	margin:0 20px 0 0;
}
#zoomBox p{
	position: relative;
	top:10px;
	left:0;
}
#zoomBox .Button_1{
	position: relative;
	top:30px;
	left:0;
}






/***********カレンダー***********/
.Calendar{
width:100%;
height:100%;
position: relative;
bottom:15px;
}
.Calendar .YM{

  font-size:26px;
  margin:0 auto;
  text-align: center;


}
.Calendar .YM span{font-size:40px;}

.Calendar table{
  width: 100%;
  border:1px  solid #555;
}

.Calendar th{}


.Calendar td{
  border:1px solid #999;
  width:10px;
  height:75px;
  padding:3px 5px;
  background: linear-gradient(#fff, 90%, #F5FFFA);
  color:#888;
  box-sizing: border-box;
  font-size: 14px;
}

.Calendar br{
  display: block;
  content: "";
  margin:2px 0;
  padding:0;
}


  .Calendar th{position:relative;height:30px; vertical-align:middle;background:#fafafa;color:#888;border-right:1px solid#999;}

  .Calendar td.in span.day,.Calendar td.out span.day{display:inline-block;margin:0 20px 5px 0;width:50px;}
  .Calendar td.in span.val{display:inline-block;}
  .Calendar td.out{color:#c0c0c0;background:#f5f5f5;}
  .Calendar td.now span.day{background:#E6FFE9;}
  .Calendar td.now a{color:#eee;}
/*  .Calendar td.in .try,.Calendar td.out .try{color:#555 !important;background:#FFFF00;border:1px solid #fbff00;}*/
  .Calendar td.in .try,.Calendar td.out .try{color:#333 !important;background:#F9F99E;border:1px solid #fbff00;}

  .Calendar td a{
    display:block;
    background:#5AAC11;
    color:#fff !important;
    text-decoration: none;
    font-weight:bold;
    font-size:10px;
    border-radius: 5px;
    padding:2px 5px;
    margin:0 0 0 0;
    box-shadow:6px 0 25px rgba(0,0,0,.15);
    text-align: center;
  }
  
  
  .Calendar td.now{
    background:#E6FFE9;
    color:#006400;
    border:2px solid #32CD32;
    font-weight:bold;
    box-sizing: border-box;
    
  }
  .Calendar td.now span.day{background:#E6FFE9;}
  .Calendar td.now a{color:#eee;}

  .Calendar th:nth-child(2)::before{content:"日";color:#ff83b1;}
  .Calendar th:nth-child(3)::before{content:"月";}
  .Calendar th:nth-child(4)::before{content:"火";}
  .Calendar th:nth-child(5)::before{content:"水";}
  .Calendar th:nth-child(6)::before{content:"木";}
  .Calendar th:nth-child(7)::before{content:"金";}
  .Calendar th:nth-child(8)::before{content:"土";color:#72a3f8;}

  .Calendar td.out{color:#c0c0c0;background:#f5f5f5;}

/* Next-Back CSS */
.Calendar th.goto{
  border:1px 0 1px 0 solid #999;
  width:40px; background-color:#999;
  position: relative;
  
}
  .Calendar th.goto a{
    position: relative;
    width:100%; height:100%;
    display:block;
    color:#008AF0;
  }

/*border-left:5px double #c0c0c0;*/
/*
  .Calendar th.prev{border-right:7px double #c0c0c0;background: linear-gradient(to left, #ddd, #eee 50%, #fff 65%);}
  .Calendar th.next{border-left:7px double #c0c0c0;background: linear-gradient(to right, #ddd, #eee 50%, #fff 65%);}
*/
.Calendar th.prev,.Calendar th.next{background:#fff;}



  .Calendar th.prev a::before{
    position: absolute;
    top:50%;
    left:5px;
    content:"<";
  }
  .Calendar th.next a::before{
    position: absolute;
    top:50%;
    right:5px;
    content:">";
  }


  .Calendar th.prev span,.Calendar th.next span{
    position: absolute;top:50%;width:100px;
  }
  .Calendar th.prev span{
    right:-35px; 
    transform: rotate(90deg);
  }

  .Calendar th.next span{
    left:-35px; 
    transform: rotate(90deg);
  }
  .Calendar th.goto a:hover{
    background-color:#008AF0;
    color:#fff;
    opacity: 0.5;
  }

  /*
  .Calendar th.next span{
    display:inline-block;
    transform: rotate(-90deg);
  }
*/





.FormBox {
  position: relative;
  margin: 2em auto;
  padding: 5px;
  width: 100%;
  color: #333; /* 文字色 */
  background-color: #fff;
  border: 1px solid #c0c0c0; /* 枠線の太さ・色 */
  border-radius: 5px;
  box-sizing: border-box;
 }
 .FormBox label{
  margin:0;
  padding:0 0.5em;
  position: absolute;
  left: 10px;
  top: -10px;
  font-size:12px;
  background-color:#fff; /* タイトル背景色 */
  color: #777; /* タイトル文字色 */
}
/* Default Input */
.FormBox input[type='text'],
.FormBox input[type='number'],
.FormBox input[type='password']{
  width:100%;
  border:none;
  outline:none;
  font-size: 1.3em;
  text-indent:10px;
}
.FormBox input[type='number']::-webkit-outer-spin-button,
.FormBox input[type='number']::-webkit-inner-spin-button{
  -webkit-appearance: none;
}
.FormBox textarea{
  display:block;
  box-sizing:border-box;
  padding-left:10px;
  width: 100%;
  border:none;
  outline:none;
  resize:none;
  font-size: 1.3em;
}


.checkbox-input{
  display: none;
}
.checkbox-text{
  padding-left: 20px;
  position:relative;
}
.checkbox-text::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}

.checkbox-input:checked + .checkbox-text{
  color:#333;
  text-decoration: underline;
}
.checkbox-input:checked + .checkbox-text::after{
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #4285f4;
  border-right: 3px solid #4285f4;
}


 /* TEL 1-3 */
 .FormBox div.TelBox{
  display:flex; justify-content:center; align-items:center; position:relative; width:100%;
 }
.FormBox div.TelBox input{
  margin:0; padding:0;
  text-align:center;
  flex-grow: 1;
}
 .FormBox div.TelBox p{
  margin:0; padding:0; font-weight:bold;
 }





/* --------- USER EDIT --------- */
.user_edit {
  width: 100%;
}
/*
.user_edit input[type='text'],.user_edit input[type='password'] {
  background: #fff;
  color: #333;
  width:100%;
  height: 30px;
  border: none;
  outline: none;
  width:100%;
}
.user_edit textarea{
  background: #fff;
  color: #666;
  width: 100%;
  border: none;
  outline: none;
}
.user_edit input[type='checkbox']{
  background: #fff;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-size: 16px;
  height: 30px;
  width: 30px;
  transition: border-color 0.3s;
}
*/




.Birthday {
position: relative;
}

.Birthday input[type='number']{
  width:220px;
}
#BIRETH_T_JPN{
  display:inline;
  font-size:14px;
}



.Sex {
  position: relative;
  text-align:left;
  display:flex;
  justify-content: space-around;
  vertical-align: middle;
  align-items: center;
}
@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 100px;
		height: 100px;
		margin-top: -35px;
		margin-left: -35px;
		opacity: 0;
	}
}

.Sex .option-input {
	position: relative;
	top: 10px;
	left: 0;
	width: 30px;
	height: 30px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #d7cbcb;
	-webkit-appearance: none;
	        appearance: none;
}
.Sex .option-input:hover {
	background: #c0c0c0;
}

.Sex .option-input:checked::before {
	content: '\2714';
  font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
  color:#fff;
	text-align: center;
}
.Sex .option-input:checked::after {
	content: '';
  position: relative;
	display: block;
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;

}

.Sex .Male:checked:nth-child(odd)::after{
	background: #1E90FF;
}
.Sex .Male:checked:nth-child(odd) {
	background: #1E90FF;
}
.Sex .Female:checked:nth-child(1)::after{
	background: #ff2299;
}
.Sex .Female:checked:nth-child(1) {
	background: #ff2299;
}
.Sex .option-input.radio {
	border-radius: 50%;
}
.Sex .option-input.radio::after {
	border-radius: 50%;
}


.Sex p {
display:inline;
position:relative;
top:0;
left:0;
padding-bottom:10px;
}


/* table? */
.user_edit table{
width: 100%;
border-collapse: separate;
border-spacing: 0px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin:30px auto 40px auto;
box-sizing: border-box;
}

.user_edit th{
width:200px;
padding:10px;
text-align: left;
vertical-align: middle;
color: #444;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-right: 1px solid #fafafa;
border-bottom: 1px solid #ccc;
}
.user_edit td{
width:600px;
padding:10px;
background-color: #fafafa;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display:flex;
justify-content: space-around;
vertical-align: middle;
align-items: center;
}

.msgBox{
  position: relative;
  padding:10px;
  border:1px #32CD32 solid;
  text-indent:30px;
  background:#F0FFF0;
}
.msgBox::before{
  position: absolute;
  top:10px;
  left:15px;
  content: '';
  width: 15px;
  height: 10px;
  border-left: 4px solid #25AF01;
  border-bottom: 4px solid #25AF01;
  transform: rotate(-45deg);
}



.AgreeMes{
  text-align:center;
  clear:both;
}

.Button_1 {
  padding:10px 40px;
  border:0;
  border-radius: 5px;
  background:#4285f4;
  color:#fff !important;
  letter-spacing:2px;
  font-size:14px;
  text-decoration:none !important;
  clear:both;
  display:inline-block;
  margin:0 auto;
  text-align:center;
}
input.Button_1 {
  display:block;
}
.Button_1:hover{	background-color:#3b77d6;}

/* Admin */
.Button_2 {
  padding: 8px 38px;
  border:2px solid #4285f4;
  border-radius: 5px;
  background:#fff;
  color:#4285f4 !important;
  letter-spacing:2px;
  font-size:14px;
  text-decoration:none !important;
  clear:both;
  display:inline-block;
  margin:0 auto;
  text-align:center;
}




.cancel{
  background:#c0c0c0;
  color:#fff;

}
/*
.A2{
  background: -webkit-gradient(linear, left top, left bottom, from(#31a6f3), to(#32A1EB));
  background: -webkit-linear-gradient(top, #31a6f3 0%, #32A1EB 100%);
  background: linear-gradient(to bottom, #31a6f3 0%, #32A1EB 100%);
  color:#fff;
  border: 0;
}

.A2:hover{
  background: -webkit-gradient(linear, left top, left bottom, from(#3486bd), to(#3597d8));
  background: -webkit-linear-gradient(top, #3486bd 0%, #3597d8 100%);
  background: linear-gradient(to bottom, #3486bd 0%, #3597d8 100%);
  border: 0;
}
*/

.A3{
  background: -webkit-gradient(linear, left top, left bottom, from(#f33131), to(#eb3232));
  background: -webkit-linear-gradient(top, #f33131 0%, #eb3232 100%);
  background: linear-gradient(to bottom, #f33131 0%, #eb3232 100%);
  color:#fff;
  border: 0;
}

.A3:hover{
  background: -webkit-gradient(linear, left top, left bottom, from(#bd3434), to(#d83535));
  background: -webkit-linear-gradient(top, #bd3434 0%, #d83535 100%);
  background: linear-gradient(to bottom, #bd3434 0%, #d83535 100%);
  border: 0;
}

.accBox{

  width:500px;
  height:350px;
  margin:0 auto;



}



/***********payment***********/
#payment{
  padding:50px ;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  color: #252525;
  text-decoration: none;
  height:100%;
}

#payment table{
  width:100%;
  font-size:14px;
  color:#555;

}



#payment th{
  color:#888;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
}
#payment td{

  padding:15px 15px;
}

#payment table tr td:nth-child(3),#payment table tr th:nth-child(3){
  text-align: right;
}

#payment table thead{
  border-bottom:1px solid #c0c0c0;
}

#payment table tbody tr{
  border-bottom:1px dotted #c0c0c0;
}
#payment table tbody tr:last-child{
  border:0;

}


/*
#payment tr:hover{background-color:rgb(187, 219, 255); cursor: pointer;}
#payment thead tr:hover{background-color:transparent;}
#payment td a{color:#000; text-decoration:underline;}
*/

/***********payment v***********/
.Details{
  padding:50px;
    background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  color: #252525;
  text-decoration: none;
  height:100%;
}
.Details p:nth-child(1){

  font-size:26px;
  text-align:center;
  margin:0 0 50px 0;


}
.Details p:nth-child(n+2):nth-child(-n+4){
  padding:5px 0;

}

.Details hr{
  margin:20px 0;
  background:#f5f5f5;
  
}

.Details table{

  width:100%;
  font-size:14px;
  color:#555;

}
.Details table th{

  font-weight: 400;
  text-align:left;
}

.Details table tr td:nth-child(3){

 text-align: right;

}
.Details table th,.Details table td{
  border-bottom:1px dotted #c0c0c0;
}

.Details table th,.Details table td{
  padding:10px 0;
  vertical-align: bottom;
}

.Details table tr:last-child ,.Details table .Col{
  border:0;

}

.Details td .TotalPrice{

  font-size:18px;
  font-weight: bold;

}

/***********user_token***********/
.User_ID{
  background:#f5f5cc;padding:10px 0;
}

.User_ID p:nth-child(1){
  font-size:12px;text-align:center;
}
.User_ID p:nth-child(2){
  font-size:12px;text-align:center;color:#666;
}

.User_Family hr , .User_Cooperation hr{
  background:#555;
  border:0;

}
.User_Cooperation p:nth-child(1) , .User_Family p:nth-child(1){
  margin:0 0 20px 0;
  padding:0 0 10px 0;

}
.User_Family a , .User_Cooperation a{

  font-size:14px;
  
}
.User_Family span , .User_Cooperation span{
  display: block;
  font-size:12px;
}


.User_Cooperation{
  padding:50px ;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  color: #252525;
  text-decoration: none;
  height:100%;
}



.User_Cooperation table{
  width:100%;
  font-size:14px;
  color:#555;
  border-bottom:1px solid #555;
}



.User_Cooperation th{
  color:#888;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
}
.User_Cooperation td{

  padding:15px 15px;
}

.User_Cooperation table tr td:nth-child(3),.User_Cooperation table tr th:nth-child(3){
  text-align: left;
}

.User_Cooperation table thead{
  border-bottom:1px solid #c0c0c0;
}

.User_Cooperation table tbody tr{
  border-bottom:1px dotted #c0c0c0;
}
.User_Cooperation table tbody tr:last-child{
  border:0;

}



.User_Family{
  padding:50px ;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  color: #252525;
  text-decoration: none;
  height:100%;
}

.User_Family table{
  width:100%;
  font-size:14px;
  color:#555;
  border-bottom:1px solid #555;
}



.User_Family th{
  color:#888;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
}
.User_Family td{

  padding:15px 15px;
}

.User_Family table tr td:nth-child(3),.User_Family table tr th:nth-child(3){
  text-align: left;
}

.User_Family table thead{
  border-bottom:1px solid #c0c0c0;
}

.User_Family table tbody tr{
  border-bottom:1px dotted #c0c0c0;
}
.User_Family table tbody tr:last-child{
  border:0;

}

/***********user_invite***********/

.Invite{
  position: relative;
  margin-top:20px;
}

.Invite input[type='text'] {
 position: relative;
 width:80%;
 font-size:30px;

}

.Invite a#cpy{
 position: relative;
 bottom:5px;
 padding:15px 30px;
 margin:0 0 10px 0;
 background-color:#4285f4;
 border-radius: 5px;
 color:#fff;
 font-size:14px;
 font-weight: bold;
 text-decoration:none;

}

.Invite #MSG{
  clear:both;
  display: inline-block;
  padding-left: 10px;
  font-size:16px;
  color:#fff;
  background:#ff2299;/*#0066ff*/
}
.Invite p{

}


/*********** user_token_pass ***********/
.user_pass_wrap{
  box-sizing: border-box;
  padding:30px;
  margin:10px 0 30px 0;
  border:1px solid #c0c0c0;
  border-radius: 5px;

}

.user_pass_p{
  color:#666;
}

/*********** payment_edit ***********/
.payment_edit_wrap{

  box-sizing: border-box;
  padding:30px 20px;
  margin:10px 0 30px 0;
  border:1px solid #c0c0c0;
  border-radius: 5px;

}

.payment_edit_wrap p:nth-child(1){
  margin:0 0 20px 0;
  padding:10px 0 10px 30px;

}


.sq {
  border-top:1px solid #c0c0c0;
  margin:40px 0 0 0;
  padding:20px 0 0 30px;

}


.payment_edit_wrap table{
  width:80%;
  font-size:14px;
  color:#555;
  margin:0 0 0 50px;
}



.payment_edit_wrap th{
  color:#888;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
}
.payment_edit_wrap td{

  padding:15px 15px;
}

.payment_edit_wrap table tr td:nth-child(3),.payment_edit_wrap table tr th:nth-child(3){
  text-align: right;
}


/*********** payment_edit_card ***********/

.payment_edit_card_mes{
  margin:0 auto 10px auto;
  padding:10px;
  font-size:14px;
  background:#f5f5f5;
  text-align:center;
}


.link_Box:hover{
  background-color:#f0f0f0;
}

.link_Box{
  cursor: pointer;
}


.radBox,.radBox_card{
  border:1px #c0c0c0 solid;
  width:100%;
  border-radius:8px;
  box-sizing: border-box;

}
.radBox_card{
  height:300px;
}


.radBox table{
  width:80%;
  font-size:14px;
  color:#555;
  margin:0 0 0 50px;

}



.radBox th{
  color:#888;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
  vertical-align: middle;
}
.radBox td{

  padding:15px 15px;
}

.radBox table tr td:nth-child(3),.radBox table tr th:nth-child(3){
  text-align: right;
}

/*********** lesson ***********/
.lesson table{
  width:100%;
  border:1px #c0c0c0 solid;
  border-radius:8px;
  font-size:14px;
  color:#555;
  margin:0 auto;
  box-sizing: border-box;
}



.lesson th{
  color:#333;
  padding:15px 8px 15px 15px;
  font-weight:400;
  text-align:left;
  vertical-align: middle;
  white-space: nowrap;
}
.lesson td{
  padding:15px;
}


/*********** lesson_request ***********/

.lesson_request_mes{
  font-size:14px;color:#555;
}

.User_Family hr , .lesson_request hr{
  background:#555;
  border:0;

}
.lesson_request p:nth-child(1) , .User_Family p:nth-child(1){
  margin:0 0 20px 0;
  padding:0 0 10px 0;

}
.User_Family a , .lesson_request a{

  font-size:14px;
  
}
.User_Family span , .lesson_request span{
  display: block;
  font-size:12px;
}


.lesson_request{
  padding:50px ;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  color: #252525;
  text-decoration: none;
  height:100%;
}



.lesson_request table{
  width:100%;
  font-size:14px;
  color:#555;
  border-bottom:1px solid #555;
}



.lesson_request th{
  color:#333;
  padding:15px 15px;
  font-weight:400;
  text-align:left;
}
.lesson_request td{

  padding:15px 15px;
}

.lesson_request table tr td:nth-child(3),.lesson_request table tr th:nth-child(3){
  text-align: left;
}

.lesson_request table thead{
  border-bottom:1px solid #c0c0c0;
}

.lesson_request table tbody tr{
  border-bottom:1px dotted #c0c0c0;
}
.lesson_request table tbody tr:last-child{
  border:0;

}




.lesson_request .lesson-date table tr td{

  border:0;

}


.lesson_request .lesson-date{

  padding:8px;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content: space-around;
  background: #fafafa;
}
.lesson_request .lesson-date p{

  font-size:12px;
  color:#444;
  margin:15px 0 0 0;
}
.lesson_request .lesson-date table{

  padding:0 10px 0 0;
  border-bottom:1px dotted #c0c0c0;
}
.lesson_request .lesson-date table th,.lesson_request .lesson-date table td{
  
  min-width:80px;

}

.d_title0,.d_title1{

  display:block;
  color:#222;

}

.Box_bottom_link{
  padding:10px 0;
  text-align:left;
  margin:0 0 0 65px;
  font-size:14px;
}

.bottom_mes{
  padding:8px 40px;
  background:#fafafa;
  font-size:12px;

}








/*********** モーダルCSS ***********/
.modalArea {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100vw;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
  /*全画面に*/
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */

/*#openModal {

  display:block;
  margin:0 auto;
  position:relative;
  padding: 10px;
  background-color: #FEF7E0;
  border: 1px solid #f8f8f8;
  color:#333;
  border-radius: 2px;
  cursor: pointer;
  width: 100%;

}
*/
.modalContents h1{
  margin:10px 0 15px 0;
  display:inline-block;

}
.modalContents a{
  margin:25px 0 0 0;
  display:inline-block;
  float:right;
  color:blue;
}
*/
/***********ナビゲーション***********/
#nav-content nav{
  position: relative;
  background:#fff;
  padding:10px;
  font-size:;
  font-weight: 400;
  margin:0 0 30px 0;
}
#nav-content dl{
position: relative;
top:0;
left:0;
background-size:contain;
}

#nav-content dt{
  position: relative;
  font-weight:bold;
  margin:0 0 0 0;
  padding:0 0 0 60px;
  font-size:16px;

}
#nav-content dd{
  padding:0 0 0 60px;
  font-size:14px;
}
#nav-content ul{
  margin:10px 0 0 0;
}

#nav-content li a{
  position: relative;
  font-size:14px;
  margin:10px 0 0 0;
  text-indent:60px;
  display:inline-block;
  color:#005FFF;
  font-weight:bold;
  top: 0;
  left: 0;

}

#nav-content li a::before{

  content:"→";
  position: absolute;
  top:0;
  left:-40px;
  width: 20px;
  height: 20px;
  color: #555;
}



.Menu1 dl{background:url("../image/bg/mypage/menu1.png") no-repeat #fff;}
.Menu2 dl{background:url("../image/bg/mypage/menu2.png") no-repeat #fff;}
.Menu3 dl{background:url("../image/bg/mypage/menu3.png") no-repeat #fff;}



.LogoutButton{
  font-weight:300;
  border-radius: 5px;
  border:1px solid #333;
  margin:0 auto;
  background:#fff;
  color:#333;
  text-align:center;
  padding:10px;
}
/***********バーガーメニュー***********/
#nav-close,.nav-unshown{display:none}
#nav-close,#nav-content{position:fixed;top:0;right:0;height:100%;transition: .2s ease-in-out;}
#nav-drawer{order:1;position:absolute;top:30px;right:30px}
#nav-open{display:inline-block;width:30px;height:22px;}
#nav-open span,#nav-open span:after,#nav-open span:before{position:absolute;height:3px;width:25px;border-radius:3px;background:#fff;display:block;content:"";}
#nav-open span:before{bottom:-8px}
#nav-open span:after{bottom:-16px}
#nav-close{z-index:99;width:100vw;min-height:100vh;background:#000;opacity:0}
#nav-content{min-height:100vh;padding:10px;overflow:auto;z-index:9999;width:80%;max-width:330px;color:#000;background:#f5f5f5;-webkit-transform:translateY(100%);transform:translateX(100%)}
#nav-content ul{margin:0;padding:5px;list-style:none}
#nav-content li a{margin:3px 0 0 10px;font-weight:500;background:#fff}
#nav-content h2{margin:0;text-align:center}
#nav-input:checked~#nav-close{display:block;opacity:.5}
#nav-input:checked~#nav-content{-webkit-transform:translateX(0);transform:translateX(0);box-shadow:6px 0 25px rgba(0,0,0,.15);min-height:100vh;}
.CateListNav1 ul li,.CateListNav2 ul li,.CateListNav3 ul li{height:40px}
.CateListNav1 a,.CateListNav2 a,.CateListNav3 a{display:flex;align-items:center;margin:0;color:#333}
.CateListNav1 a img,.CateListNav2 a img,.CateListNav3 a img{width:25px;height:25px;margin:0 10px 10px 0}
.CateListNav1 p,.CateListNav2 p,.CateListNav3 p{margin:0}
.CateListNav1,.CateListNav2,.CateListNav3,{position:relative}
#nav-open{
  border:1px solid #333;border-radius: 5px;padding:5px;
  background:#3584BB;
}

.logoutLink{
  position: absolute;top:13px;right:100px;z-index: 3;background:#666;width:50px;height:51px;text-align:center;border-radius:10px 10px 0 0
}

.logoutLink span:nth-child(1) {
  order:4;
  position:absolute;top:6px;left:26px;
  display:inline-block;
  width: 16px;
  height: 20px;
  border: 2px solid;
  color:#fff;
  transform: scale(var(--ggs,1));
  border-right: 0;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  margin-left: -10px;
}
.logoutLink span:nth-child(1)::after,
.logoutLink span:nth-child(1)::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute
}
.logoutLink span:nth-child(1)::after {
  border-top: 2px solid;
  border-left: 2px solid;
  transform: rotate(-45deg);
  width: 8px;
  height: 8px;
  left: 4px;
  bottom: 6px
}
.logoutLink span:nth-child(1)::before {
  border-radius: 3px;
  width: 10px;
  height: 2px;
  background: currentColor;
  left: 5px;
  bottom: 9px
}

.logoutLink span:nth-child(2){
  border:0;color:#eee;font-size:9px;font-weight:700;
  position: relative;top:27px;left:0px;
}



.Unsubscribe{
  
}
.Unsubscribe div{
  text-align:center;
  margin:0 0 20px 0;
}
.Unsubscribe div p{
  margin:0 auto;
}


.Unsubscribe h3{

  margin:0 0 20px 0 ;
  
}

.Unsubscribe ul{

  margin:0 0 15px 30px;
  padding:10px;
}
.Unsubscribe ul li{

  margin:0 0 10px 0;
  list-style:square;

}


.Unsubscribe label{
  display:block;
  margin:0 0 15px 15px;
}

.Unsubscribe .Button{
  margin-top:20px;
  background-color:#ccc;
}
/*
#login-close,.login-unshown{display:none;}
#login-close,#login-content{position:absolute;top:40px;right:-100px;height:100%;}
#login-drawer{position: absolute;top:27px;right:100px;z-index: 3;}
#login-open{display:inline-block;width:30px;height:22px;}
#login-open{
  border:1px solid #333;border-radius: 5px;padding:5px;
  background:;
}
#nav-open{
  border:1px solid #333;border-radius: 5px;padding:5px;
  background:#3584BB;
}

#login-open span{
  color: #3584BB;
  position: absolute;
  margin-left: 3px;
  margin-top: 11px;
  width: 16px;
  height: 8px;
  border-left: solid 3px currentColor;
  border-right: solid 3px currentColor;
  border-top: solid 3px currentColor;
  border-bottom: solid 3px transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

#login-open span:before {
  content: '';
  position: absolute;
  left: 0px;
  top: -17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: solid 3px currentColor;
}
#login-input:checked~#login-open span{
  background: #3584BB;
}
#login-input:checked~#login-open span:before{
  background: #3584BB;
}


#login-close{z-index:99;width:100vw;min-height:100vh;opacity:0}
#login-content{
  max-width:330px;
  min-height:300px;max-height:300px;padding:10px;
  overflow:auto;z-index:9999;width:80%;
  color:#000;background:#f5f5f5;display:none;

}

#login-content ul{margin:0;padding:5px;list-style:none}
#login-content li a{margin:3px 0 0 10px;font-weight:500;background:#fff}
#login-content h2{margin:0;text-align:center}
#login-input:checked~#login-close{display:block;opacity:.5}
#login-input:checked~#login-content{
  display:block;
  box-shadow:6px 0 25px rgba(0,0,0,.15);
  min-height:200px;
  width:300px;
}
*/