/*
Theme Name:手帳コーチ養成講座サイト
Theme URI: http://lagrange-point.jp
Description: 一般社団法人日本手帳マネージメント協会のサイトです。
Version: 1.0
Author: Tsutom Yamano
Author URI:
*/
/* =Reset default browser CSS. Based on work by Eric Meyer.
-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Londrina+Sketch&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption,tfoot, thead{
   border: 0;
   font-family: "Yuji Mai", serif;
   font-size: 100%;
   font-style: inherit;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;
   list-style:none;
   text-decoration:none;
}
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}
p,a,h1,h2,h3,h4,h5{color:black}
p{line-height:200%}
button,
input[type='submit'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: 0;
   border: none;
   outline: none;
   background: transparent;
cursor: pointer;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
.sp{
    display: none;
}
.pc{
    display: block;
}

/*　ログインページ start ----------------- */
.my_form .newRegi{
	margin:5px 0 0 0;
}
.my_form .newRegi a{
	color:red;
}
#memberRagi form .flex{
    display: flex;
    justify-content: space-between;
	flex-wrap:wrap;
}
#memberRagi form .flex .inputBody{
	width:45%;
}

#memberRagi{
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    position: relative;
	padding:120px 20px 10px 20px;
}
#memberRagi form{
    width: 600px;
    padding: 30px;
    background: #fffffff5;
    border-radius: 10px;
    margin: 0 auto;
}
#memberRagi form .logo{
    position: absolute;
    width: 46px;
}
#memberRagi form h2{
    padding: 0 0 0 60px;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    margin:0 0 20px 0;
}
#memberRagi form h2 em{
    display: block;
    font-size:15px;
}
#memberRagi form label{
    display:block;
}
#memberRagi form input,#memberRagi form textarea,#memberRagi form select{
    width: 100%;
    padding: 10px;
    border: 1px solid #7f7d7d;
    border-radius: 10px;
    margin: 5px 0 0 0;
}
#memberRagi form .inputBody{
    margin:0 0 20px 0;
}
#memberRagi form .inputBody p{
    font-size:13px;
    color:red;
}
#memberRagi form .cv{
    text-align: center;
}
#memberRagi form .cv button{
    padding:10px 30px;
    border-radius: 10px;
    background:black;
    color:white;
    border:1px solid black;
    transition: .3s;;
}
#memberRagi form .cv button:hover{
    background:white;
    color:black;
}
#errorPage{
    text-align: center;
	min-height: 100vh;
    padding: 120px 20px;
}
#errorPage #lottie{
    width: 300px;
    margin: 0 auto 30px auto;
}
#errorPage a{
    display: inline-block;
    margin: 10px 0 0 0;
    background: black;
    border-radius: 10px;
    padding: 10px 20px;
    color:white;
}

#setting{
    width: 100%;
    height:auto;
    background-size: cover;
    padding:120px 20px;
}

#setting .introBody{
    padding: 0 0 0 150px;
}

#setting .userImgBody{
    padding: 20px 0px 0 0;
    text-align: center;
    background: linear-gradient(-90deg, #37C2E1, #3D416C);
    clip-path: ellipse(50% 100% at 50% 0%);
    width: 500px;
    height: 230px;
    margin: 0 auto;
}

#setting img{
    width: 150px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -80px);
    background: white;
}
#setting #lottie{
    position: absolute;
    width: 180px;
    top: 55px;
    left: 7px;
}
#setting .imgBox{
    background:#fcfcfc;
    border-radius: 10px;
    text-align: center;
    padding: 30px;
    margin: 0 0 30px 0;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#setting .userImgBody a{
    padding: 5px 10px;
    border-radius: 10px;
    background: #ffffff;
    border: 2px solid black;
    display: inline-block;
    margin: 5px 0 0 0;
}
#setting form{
    width: 550px;
    background: #14b1be;
    margin: 30px auto;
    border-radius: 10px;
    padding: 80px 30px 30px 30px;
    position: relative;
}
#setting form h2{
    font-size: 20px;
    margin: 0 0 10px 0;
    color:white;
}
#setting form .introBody p{
    font-size:13px;
    color:white;
}
#setting form .inputBody{
    margin:0 0 10px 0;
	position:relative;
}
#setting form .myPage{
    padding: 20px;
    background: white;
    border-radius: 10px;
    margin: 30px 0 10px 0;
}
#setting #rolesContainer label{
	background: #ececec;
    display: inline;
    padding: 1px 6px;
    border-radius: 6px;
    position: absolute;
    top: 7px;
    left: 5px;
    font-size: 13px;
    color: #7f7f7f;
}
#setting #rolesContainer .role-item input{
    padding: 10px 10px 10px 50px;
}
#setting #rolesContainer .role-item textarea{
	padding: 35px 10px 10px 10px;
}
#setting form .myPage .inputBody label{
	color:black;
}
#setting form .myPage p{
	font-size:13px;
}
#setting form .inputBody label{
    display: block;
    color:white;
    margin:0 0 5px 0;
}
#setting .forminner{
    margin:20px 0 0 0;
}
#setting .forminner .addDetail{
    text-align: center;
    color: white;
    cursor: pointer;
}
#setting .forminner .detailBody{
	height:0;
	transition:.3s;
	overflow:hidden;
}
#setting .forminner .detailBody .flex{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
	flex-wrap:wrap;
}
#setting .forminner .detailBody .flex i{
	margin:0 5px 0 0;
}
#setting .forminner .detailBody .flex .inputBody{
	width:45%;
}
#setting .forminner .detailBody.on{
	height:auto;
}
#setting input,#setting textarea,#setting select{
    width:100%;
    padding:10px;
    border-radius: 10px;
    border:1px solid black;
}
#setting .cv{
    text-align: center;
    margin:20px 0 0 0;
}
#setting .cv button{
    padding: 5px 10px;
    border-radius: 10px;
    background: black;
    color: white;
    width: 100px;
    border: 1px solid black;
    transition: .3s;
}
#setting .cv button:hover{
    background:white;
    color:black;
}
.menberTopModaal h4{
	font-size:18px;
	margin:0 0 10px 0;
}
.m_menberBody.menberTopModaal table{
    width: 50%;
    margin: 30px auto;
    border: 1px solid #ece7e7;
}
.m_menberBody.menberTopModaal table th{
    padding: 10px;
    background: #f6f6f6;
    text-align: center;
}
.m_menberBody.menberTopModaal table td{
    padding:10px;
    border-bottom: 1px solid #ece7e7;
    text-align: center;
}
.m_menberBody.menberTopModaal table tr:nth-last-child(1) td{
    border-bottom: unset;
}
.menberTopModaal .inner{
	font-size:13px;
	margin:0 0 20px 0;
}
.myImgBody .flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	align-items:flex-end;
	width: 100%;
    padding: 0 20px 20px 20px;
    margin: 20px 0 0 0;
}
.myImgBody .flex .rightBox{
    width: 400px;
	position:relative;
	text-align:center;
}
.myImgBody .flex .leftBox canvas{
	width:296px;
	height:296px;
	border-radius:50%;
	border:2px solid black;
}
.myImgModaal .modaal-container{
	min-width:900px;
}
.myImgBody .flex .leftBox{
    width: 300px;
	height:300px;
	margin: 0 0 42px 60px;
	position:relative;
}
.myImgBody.menberTopModaal .result{
	margin:0;
}
.myImgBody .flex .leftBox form{
    position: absolute;
    bottom: -61px;
    left: 50%;
    transform: translate(-50%,0);
	text-align:center;
}
.myImgBody.menberTopModaal input[type="submit"]{
	height:31px;
}
.myImgBody #trimingbutton{
    padding: 5px 20px;
    border-radius: 50px;
    background: #dadada;
    color: white;
    margin: 10px 0 0 0;
    border: 1px solid #dadada;
	transition:.3s;
}
.myImgBody #trimingbutton.on{
	background:#cd4444;
}
.myImgBody #trimingbutton.on:hover{
	background:white;
	color:#cd4444;
}
.myImgBody .flex .rightBox .defoImgBox{
    margin: 20px 0  0;
    background: #efefef;
    height: 300px;
	overflow:hidden;
	border: 2px solid #535353;
    border-radius: 5px;
}
.myImgBody .flex .rightBox .defoImgBox canvas{
	width:100%;
}
.myImgBody .flex .rightBox .defoImgBox img{
	width:100%;
}
.menberTopModaal input[type="submit"]:hover{
    color: red;
    background:white;
}
.menberTopModaal input[type="submit"]:active {
    letter-spacing: 2px;
}
.menberTopModaal input[type="submit"]:after {
    content: "送信";
}
.menberTopModaal .result{
    font-size: 13px;
    margin: 10px 0 0 0;
    height: 20px;
    color: #a72020;
    width:200px;
}
.menberTopModaal input[type="submit"].on{
    outline: none;
    height: 40px;
    text-align: center;
    width: 130px;
    border-radius: 40px;
    background: #fff;
    border: 2px solid red;
    color: white;
    letter-spacing: 1px;
    text-shadow: 0;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.25s ease;
    background:red;
	margin:30px 0 0 0;
}
.menberTopModaal input[type="submit"].onclic:hover {
    color: #1ECD97;
    background: white;
}
.menberTopModaal input[type="submit"].validate {
    font-size: 13px;
    color: white;
    background: red;
	cursor:unset;
}
.menberTopModaal input[type="submit"].validate:after {
    font-family: 'FontAwesome';
    content: "\f00c";
    font-size: 20px;
    position: relative;
    top: 1px;
}
.menberTopModaal input[type="submit"].onclic {
    width: 40px;
    border-color: #bbbbbb;
    border-width: 3px;
    font-size: 0;
    border-left-color: red;
    animation: rotating 2s 0.25s linear infinite;
    background:white;
}
.myImgBody.menberTopModaal input[type="submit"].onclic{
	width:31px;
}
/* profile top　start -----------------------*/

#proList{
    width:100%;
    position: relative;
	height:100vh;
	overflow:hidden;
}
#changeProfile button{
	cursor:pointer;
}
#changeProfile button i{
	margin:0 5px 0 0;
}
#changeProfile #sucsess{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#proList.on{
	min-height: 100vh;
	height:auto;
}
#proList ul.menberList{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	margin:40px 30px;
	position:relative;
}
#proList ul.menberList .leftBox{
    padding: 20px;
    text-align: center;
	width:170px;
	position:relative;
	z-index:2;
}
#proList ul.menberList .leftBox .class{
	position:absolute;
	font-size:13px;
    background:white;
    border-radius:50%;
	top:10px;
	left:10px;
	width: 20px;
    height: 20px;
    text-align: center;
}
#proList ul.menberList .link a{
	margin:0 5px;
}
#proList ul.menberList .link a.no{
	pointer-events: none;
    color:#c6c6c6;
    text-decoration: none;
}
#proList ul.menberList .link{
	margin:10px 0 0 0;
}
#changeProfile{
    position: absolute;
    z-index:11;
    width: 100%;
    height: 100%;
    background: #ffffffe3;
    text-align: center;
    padding: 120px 20px;
}
#changeProfile h2{
	margin:0 0 20px 0;
}
#proList .menberList li{
	margin:10px;
	background: white;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	transition:.3s;
	padding:0 0 30px 0;
	position:relative;
}
#proList .menberList li .fa-star{
	position: absolute;
    top: 9px;
    left: 35px;
    z-index: 1;
    color: #ffe941;
    font-size: 20px;
}
#proList #lottie{
    position: absolute;
    width: 300px;
    top: 46px;
    right: 30px;
	z-index:1;
}
#proList #lottie em{
    padding: 10px;
    border-radius: 50%;
    background: black;
    color: white;
    font-size: 16px;
    position: relative;
	top: 36px;
    left: 6px;
	z-index:3;
	cursor:pointer;
}
#proList #lottie em:after{
	    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #000000;
    position: absolute;
    right: -1px;
    transform: rotate(307deg);
    bottom: 1px;
}
#proList .menberList li.on{
	transform:unset !important;
}
#proList .menberList li .leftBox img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
}
#proList .menberList li h3{
    font-size: 13px;
    font-family: 'Lato', sans-serif;
}
#proList .menberList li h5{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 30px;
    color: #e2e2e2;
}
#proList .menberList li:before{
	content:"";
	display:block;
	position:absolute;
	width: 170px;
  height: 85px; /* 高さは幅の半分 */
  background-color: #3498db;
  clip-path: ellipse(50% 100% at 50% 0%);
	z-index:1;
}
#proList .menberList li.standard:before{
	background-color:#71c8d4;
}
#proList .menberList li h3 em{
    display: block;
    font-size: 12px;
}
#proList .menberList li i.detail{
	position:absolute;
	top:12px;
	right:10px;
}
#proList .menberList li h4{
	position:absolute;
	top: 91px;
    right: 33px;
}
#proList .menberList li h4 em{
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 10px;
    background: white;
	color:#6a6969;
}
#proList:after{
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:30%;
    height:100%;
    background:#e6dace;
	z-index:0;
	min-width: 350px;
}
#proList .logo{
    width: 76px;
    position: absolute;
    top: 28px;
    left: 20px;
}
#proList .titleBody{
	padding: 0 0 0 100px;
}
#proList .titleBody a{
	padding:10px 0 0 0;
	font-size: 13px;
    display: inline-block;
	font-family: 'Lato', sans-serif;
    font-weight: bold;
}
#proList .titleBody a:hover i{
	right:-3px;
}
#proList .titleBody a i{
	margin:0 5px 0 0;
	transition:.3s;
	position:relative;
	right:0;
}
#proList h2{
    font-size: 20px;
	font-family: 'Lato', sans-serif;
}
#proList h2 em{
    display: block;
    font-size: 15px;
}
#proList .wrapper{
	position:relative;
	z-index:1;
	padding:27px 20px;
	min-width:1000px;
}
#proList .searchMember{
    margin: 10px 0;
	width:27%;
	text-align:center;
}
#proList .searchMember .error{
	height:20px;
	margin: 0 0 5px 0;
    color: red;
}
#proList #nothing{
    position: absolute;
    top: 50%;
    width: 300px;
    transform: translate(0,50%);
}
#proList .searchMember button{
	display:inline-block;
	margin:10px 0 0 0;
	padding:5px 20px;
	border-radius:10px;
	background:black;
	border:1px solid black;
	color:white;
	transition:.3s;
}
#proList .searchMember button:hover{
	background:white;
	color:black;
}
#proList .searchMember select{
	border-radius:10px;
	padding:10px;
	width:47%;
}
#proList .searchMember .flex{
	display:flex;
	justify-content:space-between;
}
#proList .searchMember button i{
	margin:0 5px 0 0;
}
#proList .searchMember .now{
    display: inline-block;
    margin: 10px 10px 0 0;
}
.parsonalModaal .modaal-content-container{
	position:relative;
	padding:0;
	background:#188fd8;
}
.parsonalModaal #mLoading{
	width:300px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.parsonalModaal .leftBox{
    width:300px;
    background:#e6dace;
    padding: 30px 20px;
	position:relative;
	max-height:600px;
	overflow:scroll;
}
.parsonalModaal .modaal-container{
	max-width:1100px;
}
.parsonalModaal .imgBox{
    width:200px;
	margin:0 auto 15px auto;
	position:relative;
}
.parsonalModaal .imgBox .course{
    position: absolute;
    bottom: 0px;
    transform: translate(-50%, 6%);
    left: 50%;
    font-weight: bold;
    color: #d4c8bd;
    letter-spacing: 5px;
	font-family: "Anton", serif;
  font-weight: 400;
  font-style: normal;
	font-size:60px;
}
.parsonalModaal .otherBox.roleBox{
	width: 400px;
    background: #fffaf2;
	padding:30px;
	max-height:600px;
	overflow:scroll;
}
.parsonalModaal .rightBox{
    width:400px;
    background: #f8f1e6;
	padding:30px;
	max-height:600px;
}
.parsonalModaal .bottomBox p.no{
	display:none;
}
.parsonalModaal #noReazon{
	width:60%;
	margin:0 auto;
}
.parsonalModaal #noReazon.no{
	display:none;
}
.parsonalModaal .rightBox h3 em,.parsonalModaal .otherBox.roleBox h3 em{
	border-radius: 50px;
    background: #c4b19f;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    display: inline-block;
}
.parsonalModaal .rightBox h3{
	margin:0 0 20px 0;
}
.parsonalModaal .rightBox .introBox{
	margin:0 0 30px 0;
}
.parsonalModaal .rightBox .resonBody{
    background: white;
    padding: 10px;
    font-size: 13px;
    text-align: justify;
    height: 150px;
    overflow: scroll;
}
.parsonalModaal .imgBox em{
	position:absolute;
	padding:10px;
	font-size:13px;
}
.parsonalModaal .imgBox .sns{
	text-align:center;
	position:relative;
	z-index:5;
}
.parsonalModaal .imgBox .sns a{
	margin:0 5px;
}
.parsonalModaal .flex.mainFlex{
	flex-wrap:unset;
}
.parsonalModaal .imgBox .sns a.no{
	pointer-events: none;
    color: #c6c6c6;
    text-decoration: none;
}
.parsonalModaal .bottomBox p em{
    background: white;
    padding: 1px 10px;
    color: #c4b19f;
    font-weight: bold;
    letter-spacing: 2px;
	display:inline-block;
	margin:5px;
	font-size:13px;
	border-radius:10px;
}
.parsonalModaal .bottomBox h2{
	font-size:20px;
	font-weight:bold;
	margin:0 0 15px 0;
	text-align:center;
	font-family: 'Lato', sans-serif;
    font-weight: bold;
}
.parsonalModaal .bottomBox h2 em{
	font-size:15px;
	margin:0 0 0 5px;
	display:block;
}
.parsonalModaal .imgBox em.class{
	left: -30px;
    top: 0px;
    border-radius: 50%;
    background:white;
    width: 35px;
    height: 35px;
    line-height: 17px;
    text-align: center;
    color: #c0ac99;
    font-weight: bold;
    font-family: "Lato", serif;
    font-weight: 900;
}
.parsonalModaal .flex{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}
.parsonalModaal .imgBox em.add{
	right:-12px;
	bottom:13px;
	border:3px solid black;
	background:white;
	border-radius:10px;
}
.parsonalModaal img{
    width: 100%;
    border-radius: 50%;
    border: 3px solid white;
	position:relative;
}
.parsonalModaal .loadingBody{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:white;
	z-index:6;
}
#changeProfile img{
    width:500px;
    display: block;
    margin: 30px auto;
}
#proList .classLine{
	display:none;
}
#pro_attendBody{
    position: absolute;
    top: 80px;
    width: 500px;
    z-index: 2;
    left: 50%;
    transform: translate(-50%,0);
    background:white;
    padding: 30px;
    border-radius: 30px;
	border:3px solid black;
}
#pro_attendBody h5{
    font-size: 20px;
	font-family: "Lato", serif;
	margin:0 0 10px 0;
}
#pro_attendBody h5 em{
    margin: 0 10px 0 0;
}
#pro_attendBody .intro p{
    text-align: justify;
}
#pro_attendBody .intro{
	margin:0 0 10px 0;
}
#pro_attendBody a{
	margin:0 10px;
	border-radius:10px;
	padding:3px 20px;
	color:white;
	transition:.3s;
}
#pro_attendBody a.attCv{
	background:#225291;
	border:1px solid #225291;
}
#pro_attendBody .cv{
	text-align:center;
	margin:20px 0 0 0;
}
#pro_attendBody a.attCv:hover{
	background:white;
	color:#225291;
}
#pro_attendBody a.attenInfo{
	background:black;
	border:1px solid black;
}
#pro_attendBody a.attenInfo:hover{
	background:white;
	color:black;
}
#memberRagi form .userInfoInput{
    padding: 20px;
    background: #fff6ed;
    margin: 0 0 30px 0;
}
#memberRagi form .classInfoInput{
    margin: 0 0 30px 0;
    background: #fdf1ed;
    padding: 20px;
    border-radius: 10px;
}
@media screen and ( max-width:800px ){
	.parsonalModaal .otherBox.roleBox{
		width:100%;
	}
	.parsonalModaal .flex.mainFlex{
		flex-wrap:wrap;
	}
	#proList .menberList li .fa-star{
		position: absolute;
		top: 12px;
		left:unset;
		right: 2px;
		z-index: 3;
		color: #ffc25f;
		font-size: 19px;
	}
	#memberRagi form .userInfoInput,#memberRagi form .classInfoInput{
		padding: 10px;
	}
    .sp{
        display:block;
    }
    .pc{
        display:none;
    }
	#changeProfile img{
		width:100%;
	}
    #memberRagi form{
        width:100%;
		padding: 30px 15px;
    }
    #memberRagi form h2{
        font-size:15px;
    }
    #memberRagi form h2 em{
        font-size:13px;
    }
    #memberRagi form label{
        font-size:13px;
    }
    #memberRagi form .inputBody p{
        font-size:10px;
    }
	#setting form{
		width:100%;
		padding:60px 10px;
	}
	#setting #lottie{
		width: 140px;
		top: -145px;
		left: -10px;
	}
	#setting img{
		width:100px;
		top:30px;
	}
	#setting .introBody{
		padding:0;
	}
	#setting form h2{
		font-size: 16px;
		text-align: center;
	}
	#setting .imgBox{
		padding: 10px;
		font-size: 15px;
	}
	#setting form .inputBody label{
		font-size:13px;
	}
	#setting .forminner .detailBody .flex .inputBody{
		width:100%;
	}
	#proList:after{
		display:none;
	}
	#proList .titleBody{
		padding: 20px 0 0 70px;
	}
	#proList h2,#proList .titleBody a{
		font-size:10px;
	}
	#proList h2 em{
		font-size:13px;
	}
	#proList .logo{
		width: 60px;
    position: absolute;
    top: 28px;
    left: 11px;
	}
	#proList #lottie{
		width: 150px;
        top: 28px;
        right: -32px;
	}
	#proList #lottie em{
		    padding: 6px;
    border-radius: 50%;
    background: black;
    color: white;
    font-size: 12px;
    position: relative;
    top: 17px;
    left: 0px;
    z-index: 3;
    cursor: pointer;
	}
	#proList .searchMember label[for="now"]{
		font-size:10px;
	}
	#proList ul.menberList {
		margin: 0 0 30px 0px;
		justify-content: space-between;
	}
	#proList li h5{
		display:none;
	}
	#proList ul.menberList li{
		width: 21%;
        margin: 0;
		position:relative;
		padding:0;
		background: unset;
        box-shadow: unset;
	}
	#proList ul.menberList .leftBox{
		width:100%;
		padding:0;
	}
	#proList ul.menberList .leftBox .class{
		    background: #3478c6;
		top: 13px;
    	left: 0px;
	}
	#proList .searchMember .error{
		height:10px;
		font-size:10px;
	}
	#proList ul.menberList li.standard .leftBox .class{
		background:#71c8d4;
	}
	#proList .menberList li:before{
		display:none;
	}
	#proList .menberList li.standard .leftBox img{
		border: 5px solid #71c8d4;
	}
	#proList .menberList li .leftBox img{
		width: 100%;
    border: 5px solid #3378c6;
    aspect-ratio: 1 / 1;
		height:auto;
		margin: 13px 0 0 0;
	}
	#proList .menberList li i.detail{
		display:none;
	}
	#proList .menberList li h3,#proList li h3 em{
		font-size:10px;
	}
	#proList .menberList li h3 em{
		display:none;
	}
	#proList ul.menberList .link{
		display:none;
	}
	#proList .menberList li h4{
		display:none;
	}
	#proList .menberList li h4 em{
		background:unset;
		padding:unset;
	}
	#proList .wrapper{
		padding:10px 10px 27px 10px;
		min-width:unset;
	}
	#proList .searchMember{
		width:60%;
	}
	#proList .searchMember select{
		font-size: 10px;
		padding:5px;
	}
	#proList .searchMember button{
		font-size:10px;
		background:black;
		color:white;
	}
	#proList .searchMember button:hover{
		background:white;
		color:black;
	}
	#proList{
		overflow:hidden;
	}
	.parsonalModaal .leftBox,.parsonalModaal .rightBox{
		width:100%;
		padding:20px;
	}
	.parsonalModaal .bottomBox p em{
		font-size:12px;
	}
	.parsonalModaal #noReazon{
		width:100%;
	}
	#changeProfile h2{
		font-size:25px;
	}
	.myImgBody .flex .rightBox,.myImgBody .flex .leftBox{
		width:100%;
		height:auto;
	}
	.myImgBody .flex .leftBox{
		margin:30px 0 0 0;
	}
	.myImgBody{
		padding:0 0 80px 0;
	}
	.myImgBody .flex .leftBox form{
		bottom:-100px;
	}
	#proList .classLine{
		padding:0px 0 0 27px;
		margin: 30px 0 0 0;
		display:block;
	}
	#proList .classLine em{
		font-size:13px;
		position:relative;
	}
	#proList .classLine em:after{
		content:"";
		display:block;
		width:20px;
		height:5px;
		position:absolute;
	}
	#proList .classLine em.s:after{
		background: #71c8d4;
        top: 9px;
        left: -26px;
	}
	#proList .classLine em.b{
    	margin: 0 0 0 50px;
	}
	#proList .classLine em.b:after{
		background: #3478c6;
        top: 8px;
        left: -27px;
	}
	.myImgBody .flex .rightBox .defoImgBox,.myImgBody .flex .leftBox canvas{
		height:auto;
		width:100%;
		aspect-ratio: 1 / 1;
	}
}
/* document start ---------------------*/
#documentTop{
	min-height:100vh;
	padding:0 10px 60px 10px;
}
#documentTop .userImg{
    text-align: center;
    padding: 100px 10px 30px 10px;
}
#documentTop .userImg img{
    width: 100px;
    border-radius: 50%;
    border: 5px solid #365eac;
	position:relative;
}
#documentTop .documentBody{
    width: 500px;
    margin: 0 auto;
    background: white;
    padding:30px;
    border-radius:10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
#documentTop .documentBody h2{
    font-size: 20px;
	font-family: 'Lato', sans-serif;
	font-weight:bold;
}
#documentTop .documentBody h2 em{
    display: block;
    font-size: 13px;
}
#documentTop .documentBody table th{
	font-family: 'Lato', sans-serif;
	font-weight:bold;
	font-size:15px;
}
#documentTop .documentBody table{
    width: 100%;
    margin: 30px 0 0 0;
	border-collapse: collapse;
}
#documentTop .documentBody table td{
	text-align:center;
	padding:10px;
}
#documentTop .documentBody table tr:hover td{
	background:#f8f8f8;
}
#documentTop .documentBody table td.noData i{
	color:#e2e2e2;
}
#documentTop .documentBody table td i{
	color:#365eac;
}
#documentTop #lottie{
    position: absolute;
    width: 300px;
    right: 0;
    top: 75px;
}
#documentTop #lottie em{
    font-size: 13px;
    position: absolute;
    width: 305px;
    left: -197px;
    padding: 10px 20px;
    border-radius: 25px;
    top: 0px;
	border: 3px solid #c3c3c3;
	background:white;
}
#documentTop #lottie em a{
    background:#c3c3c3;
    border-radius: 10px;
    padding: 1px 10px;
    display: inline-block;
    margin: 10px 0 0 0;
	color:white;
}
#documentTop #lottie2{
    width: 300px;
    position: absolute;
    left: 0px;
    top: 250px;
}
#documentTop #lottie2 em{
    position: absolute;
    background: #f0f0f0;
    border: 3px solid #dadada;
    border-radius: 20px;
    padding: 10px;
    font-size: 13px;
    right: -100px;
}
#documentModal h3{
	font-size:20px;
	font-family: 'Lato', sans-serif;
	font-weight:bold;
	margin:0 0 30px 0;
}
#documentModal h3 em{
	display:block;
	font-size:14px;
}
#documentModal table{
	width:100%;
	border-collapse: collapse;
}
#documentModal table th{
	text-align:center;
}
#documentModal table th:nth-child(2),#documentModal table td:nth-child(2){
	text-align:left;
}
#documentModal table td{
	padding:10px;
	vertical-align:middle;
	text-align:center;
}
#documentModal table td.noData i{
	color:#c8c8c8;
}

#documentModal table tr:hover td{
	background:#f8f8f8;
}
#documentModal table td .sp{
	display:none;
}
@media screen and ( max-width:800px ){
	#documentTop{
		padding: 0 10px 250px 10px;
		position:relative;
		z-index:0;
	}
	#documentTop #lottie{
		width: 150px;
    	right: 0px;
    	top: 263px;
	}
	#documentTop #lottie em{
		    font-size: 11px;
		position: absolute;
		width: 270px;
		left: -197px;
		padding: 5px 10px;
		border-radius: 25px;
		top: -11px;
		border: 2px solid #c3c3c3;
		background: white;
	}
	#documentTop .userImg{
		padding:100px 10px;
	}
	#documentTop #lottie2{
		width: 150px;
    	left: 0px;
    	bottom: 80px;
		top:unset;
	}
	#documentTop #lottie2 em{
		border: 2px solid #dadada;
		border-radius: 20px;
		padding: 5px 10px;
		right: -128px;
		font-size: 11px;
	}
	#documentTop .documentBody{
		width: 100%;
		padding: 10px;
	}
	#documentModal table td .sp{
		display:block;
	}
	#documentTop .documentBody table th,#documentTop .documentBody table td{
		font-size:12px;
	}
	#documentTop .documentBody table td{
		padding:5px;
	}
	#documentModal table th,#documentModal table td{
		font-size:12px;
	}
	#documentModal table td{
		padding:5px;
	}
}
/* document end   ---------------------*/
/* menuBar start ----------------------*/
header .menuBar{
    position: fixed;
    width: 100%;
    top: 20px;
    padding: 0 30px;
	z-index:10;
}
header .menuBar ul{
    display: flex;
    width: 100%;
    justify-content: end;
}
header .menuBar ul li{
	font-family: 'Lato', sans-serif;
	font-weight:bold;
	text-align:center;
	position:relative;
	height:25px;
	overflow:hidden;
	margin:0 20px;
}
header .menuBar ul li a{
	font-family: 'Lato', sans-serif;
	font-weight:bold;
}
header .menuBar ul li em{
	display:block;
}
header .menuBar ul li .siftBox{
	position:relative;
	top:0;
	transition:.3s;
}
header .menuBar ul li .siftBox:hover{
	top:-23px;
}
body.on{
	height:100lvh;
	overflow:hidden;
}
@media screen and ( max-width:800px ){
	header.on .menuBar{
		right:0;
		z-index:11
	}
	header .menuBar{
		top: 0;
		height: 100dvh;
		background: #000000d9;
		padding: 80px 20px;
		z-index:1;
		right:-100%;
		transition:.3s;
	}
	header .menuBar ul{
		display:block;
	}
	header .menuBar ul li{
		margin:0 0 30px 0;
	}
	header .menuBar ul li a{
		color:white;
	}
	header .menuBarBox{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 12;
}
	header .menuBarBox span{
		display:block;
		width: 30px;
		height: 3px;
		background: black;
		margin:0 0 5px 0;
		transition:.3s;
	}
	header.on .menuBarBox span{
		background:white;
		width:23px;
	}
	header.on .menuBarBox span:nth-child(1){
		transform: rotate(45deg);
		transform-origin: left;
	}
	header.on .menuBarBox span:nth-child(3){
		transform: rotate(315deg);
		transform-origin: left;
	}
	header.on .menuBarBox span:nth-child(2){
		background:#ffffff00;
	}
}
/* menuBar end   ----------------------*/
/* course chagne start ----------------*/

#courseChange{
	min-height: 100vh;
    padding: 180px 20px 120px 20px;
}
#courseChange .formBody{
    width: 500px;
    background: white;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding: 30px;
    position: relative;
}
#courseChange h4{
	font-family: 'Lato', sans-serif;
    font-size: 25px;
    font-weight: bold;
	margin:0 0 0 71px;
}
#courseChange h4 em{
    font-size: 15px;
    display: block;
	margin:3px 0 0 0;
}
#courseChange .userImg{
    position: absolute;
    top: 30px;
    left: 30px;
    width: 60px;
}
#courseChange .userImg img{
    width: 100%;
    border-radius: 50%;
    border: 3px solid #566ea0;
}
#courseChange form{
    margin: 30px 0 0 0;
    text-align: justify;
}
#courseChange form p{
	font-size:13px;
}
#courseChange form p.atention{
	color:#bf3b3b;
}
#courseChange form .cv{
	margin:20px 0 0 0;
	text-align:center;
}
#courseChange form button{
    padding: 5px 20px;
    border-radius: 10px;
    background: #2050bc;
    color: white;
    transition: .3s;
    border: 1px solid #2050bc;
}
#courseChange form button i{
	margin:0 5px 0 0;
}
#courseChange form button:hover{
	background:white;
	color:#2050bc;
}
@media screen and ( max-width:800px ){
	#courseChange .formBody{
		width:100%;
	}
}
/* course chagne end.  ----------------*/
/* sucsess start       ----------------*/
#sucsess{
	padding:30px 20px 120px;
	min-height:100vh;
}
#sucsess #lottie{
	margin:0 auto;
	width:300px;
}
#sucsess .mainBody{
    width: 500px;
    margin: -60px auto 0 auto;
    border-radius: 10px;
    background: white;
    border: 2px solid black;
}
#sucsess .mainBody .inner{
	padding:30px;
}
#sucsess .mainBody h2{
    font-size: 25px;
    margin: 0 0 20px 0;
	font-family: 'Lato', sans-serif;
	font-weight:bold;
}
#sucsess .mainBody h2 em{
    display: block;
    font-size: 19px;
}
#sucsess .mainBody h3{
    font-size: 18px;
    font-weight: bold;
	margin:0 0 10px 0;
}
#sucsess .mainBody p{
	font-size:16px;
	text-align:justify;
}

.parallax > use {
	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}
.waves{
    vertical-align: bottom;
    border-radius: 0 0 10px 10px;
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% { 
		transform: translate3d(85px,0,0);
	}
}
@media screen and ( max-width:800px ){
	#sucsess #lottie{
		width:250px;
	}
	#sucsess .mainBody{
		width:100%;
		margin:-40px auto 0 auto;
	}
	#sucsess .mainBody .inner{
		padding:20px;
	}
	#sucsess .mainBody h2{
		font-size:20px;
	}
	#sucsess .mainBody h2 em{
		font-size:15px;
	}
	#sucsess .mainBody h3{
		font-size:15px;
	}
}
/* sucsess end.        ----------------*/
/* confirmation start -----------------*/
#confirm{
	min-height: 100vh;
    padding: 120px 20px;
}
#confirm form{
    width: 500px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 10px;
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    position: relative;
}
#confirm h2{
    font-size: 25px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
	margin:0 0 20px 0;
	padding:0 0 0 75px;
}
#confirm h2 em{
    display: block;
    font-size: 15px;
	margin: 8px 0 0 0;
}
#confirm .userImg{
    position: absolute;
    top: 30px;
    left: 30px;
}
#confirm .userImg img{
    width: 60px;
    border-radius: 50%;
    border: 3px solid #314188;
}
#confirm .thisDate{
    padding: 10px;
    border-radius: 10px;
    background: #f5f3f3;
    text-align: center;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    margin: 0 0 10px 0;
}
#confirm .intro{
    margin: 0 0 10px 0;
}
#confirm .intro p{
	line-height: 150%;
    font-size: 13px;
    text-align: justify;
}
#confirm .priceBox ul{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#confirm .priceBox ul li{
    font-size: 13px;
    margin: 10px;
}
#confirm .formBox{
    padding: 20px;
    border-radius: 10px;
    background: #fff8f2;
    margin: 10px 0 0 0;
}
#confirm .formBox label{
	display:block;
	font-size:15px;
	margin:0 0 5px 0;
}
#confirm .formBox .flex{
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px 0;
}
#confirm .formBox select{
	width:100%;
	padding:10px;
	border-radius:10px;
	border:1px solid #f5f3f3;
}
#confirm .formBox .leftBox,#confirm .formBox .rightBox{
	width:45%;
}
#confirm .formBox .cv{
	text-align:center;
	margin:10px 0 0 0;
}
#confirm .formBox .cv button{
    padding: 5px 20px;
    border-radius: 10px;
    background: #96581e;
    color: white;
    border: 1px solid #96581e;
    transition: .3s;
}
#confirm .formBox .cv button i{
	margin:0 5px 0 0;
}
#confirm .formBox .cv button:hover{
	background:white;
	color:#96581e;
}
#confirm .specialBox{
	position:absolute;
}
#confirm .asamiBox{
	left:80px;
}
#confirm .shinaBox{
	right:80px;
	top:200px;
}
#confirm .specialBox img{
	width:100px;
	border-radius:50%;
	border:3px solid #903838;
}
#confirm .formBox textarea{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #f5f3f3;
}
#confirm #lottie{
    width: 200px;
    margin: -50px auto 0 auto;
}
#confirm #lottie.newAttend{
	width:500px;
	margin:-180px auto -100px auto;
}
#confirm .voice{
    position: relative;
    width: 200px;
    padding: 5px 20px;
    background: #8d5a45;
    border-radius: 50px;
    color: white;
}
#confirm .asamiBox .voice{
    right: -100px;
}
#confirm .shinaBox .voice{
	left:-200px;
	top:-10px;
}
@media screen and ( max-width:800px ){
	#confirm #lottie{
		width:150px;
	}
	#confirm form{
    width: 100%;
    padding: 30px 20px;
}
	#confirm h2{
		font-size:17px;
		padding:0 0 0 72px;
	}
	#confirm h2 em{
		margin:0;
	}
	#confirm .userImg img{
		width:45px;
	}
	#confirm .priceBox ul{
    display: block;
    text-align: center;
    margin: 20px 0;
}
	#confirm .formBox .flex{
		display:block;
	}
	#confirm .formBox .leftBox{
		margin:0 0 20px 0;
	}
	#confirm .formBox .leftBox, #confirm .formBox .rightBox{
		width:100%;
	}
	#confirm .formBox select{
		width:100%;
	}
	#confirm .specialBox{
		display:none;
	}
	#confirm #lottie.newAttend{
		width: 100%;
    	margin: -120px auto -50px auto;
	}
}
/* confirmation end.  -----------------*/
/* attendenceBox start ----------------*/

#attendenceBox{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10;
    background: #000000d9;
	padding:120px 20px;
}
#attendenceBox h2{
    color: white;
    font-size: 30px;
    margin: 0 0 20px 0;
	text-align:center;
}
#proList #attendenceBox h2 em{
	font-size:30px;
}
#attendenceBox .inner{
    width: 550px;
    margin: 0 auto;
}
#attendenceBox .inner p{
	color:white;
	font-size:15px;
}
#attendenceBox .inner p.limit{
	text-align:center;
	margin:10px 0 60px 0;
}
#attendenceBox .inner p.limit em{
    font-size: 18px;
    padding: 5px 10px;
    background: white;
    color: black;
    border-radius: 10px;
    text-align: center;
    margin: 10px 0;
}
#attendenceBox .cv{
	text-align:center;
}
#attendenceBox .cv a{
    padding: 10px 35px;
    border-radius: 10px;
    background: #2858ed;
    color: white;
	border:1px solid #2858ed;
	transition:.3s;
}
#attendenceBox .cv a:hover{
	background:white;
	color:#2858ed;
}
#attendenceBox em.close{
    position: absolute;
    top: 100px;
    right: 30%;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

#attendenceBox .button-1 {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 30px 0 60px 0;
}

#attendenceBox .button-1-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

#attendenceBox .button-1-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(340deg 100% 16%) 0%,
    hsl(340deg 100% 32%) 8%,
    hsl(340deg 100% 32%) 92%,
    hsl(340deg 100% 16%) 100%
  );
}

#attendenceBox .button-1-front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

#attendenceBox .button-1:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

#attendenceBox .button-1:hover .button-1-front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

#attendenceBox .button-1:active .button-1-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

#attendenceBox .button-1:hover .button-1-shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

#attendenceBox .button-1:active .button-1-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

#attendenceBox .button-1:focus:not(:focus-visible) {
  outline: none;
}
#attendenceBox .buttonBox{
	position:relative;
	height:150px;
}
#attendenceBox .buttonBox button{
	position:absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
#attendenceBox #appendSucsess{
		position: absolute;
		width: 200px;
		top: -45px;
		left: 50%;
		transform: translate(-50%,0);
	}
#proList #appendSucsess2{
    position: absolute;
    left: 50%;
    transform: translate(-50%,100px);
}
#proList #appendSucsess2 em{
    color: white;
    width: 60px;
    height: 60px;
    background: #ce1818;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    font-family: 'Lato', sans-serif;
	position:relative;
	margin:0 auto 30px auto;
}
#proList #appendSucsess2 p{
	color:#b61818;
}
#proList #appendSucsess2 em:before{
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 3px solid #da2b35;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    animation: wave 2s infinite;
}
@keyframes wave {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(2.5);
      opacity: 0;
    }
  }
#attendenceBox.typeB{
	width:unset;
    height: auto;
    border-radius: 10px;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0px);
    padding: 20px;
}
#attendenceBox .tableNo{
    text-align: center;
    color: white;
    margin: -10px 0 15px 0;
}
#proList #attendenceBox.typeB h2{
    font-size: 15px;
    text-align: left;
    color:white;
}
#proList #attendenceBox.typeB h2 em{
    display: inline;
    font-size: 15px;
    margin: 0 0 0 10px;
}
#attendenceBox.typeB h2 span{
	padding: 0px 20px;
    border-radius: 10px;
    color: #447fd9;
    font-size: 15px;
    margin: 0 0 0 20px;
    border: 1px solid #447fd9;
}
#attendenceBox.typeB h2 span.on{
	padding: 15px 3px;
    border-radius: 50%;
    color: white;
    font-size: 15px;
    margin: 0 0 0 20px;
    border: 2px solid #d94444;
    background: #d94444;
    font-weight: bold;
}
#attendenceBox.typeB .cv a{
	border-radius: 10px;
    background: #2858ed;
    color: white;
    border: 1px solid #2858ed;
    transition: .3s;
    font-size: 13px;
    padding: 5px 10px;
    margin: 0 20px;
}
#attenInfoModaal h2{
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 20px 0;
	font-family: 'Lato', sans-serif;
}
#attenInfoModaal table{
	margin:10px 0 0 0;
}
#attenInfoModaal table th{
	padding:10px;
}
#attenInfoModaal table th em{
	padding:2px 10px;
	color:white;
	border-radius:10px;
	background:#949292;
}
@media screen and ( max-width:800px ){
	#attenInfoModaal p,#attenInfoModaal table th,#attenInfoModaal table td{
		font-size:13px;
	}
	#proList #attendenceBox.typeB h2,#proList #attendenceBox.typeB h2 em,#proList #attendenceBox.typeB h2 span{
		font-size:13px;
		text-align:center;
	}
	#attendenceBox.typeB .cv a{
		font-size:12px;
		padding:3px 10px;
	}
	#attendenceBox.typeB{
	width: 95%;
    height: auto;
    top: 225px;
    padding: 20px 10px;
	position: absolute;
	}
	#proList #appendSucsess2{
		transform: translate(-50%, 240px);
	}
	#proList #appendSucsess2 p{
		font-size:13px;
	}
	#proList .classLine.on{
		margin:200px 0 0 0;
	}
	#attendenceBox .button-1-front {
		font-size: 1.25rem;
		padding: 12px 42px;
  	}
	#attendenceBox .inner{
		width:100%;
	}
	#attendenceBox .inner p.limit{
		margin:20px 0 60px 0;
	}
	#attendenceBox em.close{
		top: 50px;
		right: 30px;
		color: white;
		font-size: 50px;
		cursor: pointer;
	}
}
/* attendenceBox end.  ----------------*/
/* attendenceList start ---------------*/

#appendenceList .control .tableNoRest{
    margin: 0 10px;
    background: #a01717;
    padding: 5px 20px;
    border-radius: 10px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
#appendenceList .control .controlButton{
    margin: 0 10px;
    background:#259ae0;
    padding: 5px 20px;
    border-radius: 10px;
    color: white;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
#appendenceList{
	padding:120px 20px;
	min-height:100vh;
	text-align:center;
}
#appendenceList h2{
    font-size: 25px;
    margin: 0 0 30px 0;
}
#appendenceList h2 em{
    display: block;
    font-size: 18px;
}
#appendenceList a.totalModal i{
	margin:0 5px 0 0;
}
#appendenceList a.totalModal{
    padding: 3px 20px;
    border-radius: 20px;
    background: #b20f0f;
    color: white;
    border: 1px solid #b20f0f;
    transition: .3s;
}
#appendenceList a.totalModal:hover{
	background:white;
	color:#b20f0f;
}
.attendListTotalModaal{
    width: 550px;
    padding: 30px;
    border-radius: 10px;
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.attendListTotalModaal table{
	width:100%;
	border-collapse:collapse;
}
.attendListTotalModaal table tr.row:hover td{
	background:#f1f1f1;
}
.total .modaal-content-container h2{
    font-size: 20px;
    color: white;
    font-weight: bold;
    margin: 0 0 20px 0;
}
.total .modaal-content-container h2 em{
	display:block;
	font-size:15px;
}
.total .modaal-content-container #totalLottie{
    position: absolute;
    width: 300px;
    right: 50px;
}
.total .modaal-content-container{
    background: #2b7ea1;
	position:relative;
}
.attendListTotalModaal table th.left{
	text-align:left;
}
.attendListTotalModaal table th{
	text-align:center;
	padding:10px;
	font-size:15px;
}
.attendListTotalModaal table td:nth-child(1){
	text-align:left;
}
.attendListTotalModaal table td{
	text-align:center;
	padding:10px;
	font-size:15px;
}
#appendenceList .ditail{
	background:white;
    margin: 30px auto;
    width: 1000px;
	border-radius:10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	padding:20px;
}
#appendenceList .ditail table{
	width:100%;
}
#appendenceList .ditail table .a_type{
	position:relative;
}
#appendenceList .ditail table .a_type em:before{
	content:"";
	display:block;
	position:absolute;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#c6c6c6;
	top:15px;
	left:15px;
}
#appendenceList .ditail table .a_type em.t:before{
	background:red;
}
#appendenceList .ditail table .a_type em.z:before{
	background:#ffc5ba;
}
#appendenceList .ditail table .a_type em.o:before{
	background:#547ce8;
}
#appendenceList .ditail table tr:hover td{
	background:#e2e2e2;
}
#appendenceList .ditail table th{
	background: #f5f5f5;
    border-radius: 10px;
}
#appendenceList .ditail table th,#appendenceList .ditail table td{
	padding:5px;
	font-size:15px;
}
#appendenceList .toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#appendenceList .toggle-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #d4d4d4;
  border-radius: 30px;
  background-color: #fff;
  transition: all 0.3s ease;
position:relative;
}

#appendenceList .toggle-button[data-type="on"]{
	border: 2px solid #0f70ca;
}
#appendenceList .errorBox{
    height: 30px;
    color: red;
    font-size: 20px;
}
#appendenceList .toggle-button[data-type="on"]:after{
	background:#0f70ca;
	left:21px;
}
#appendenceList .toggle-button:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    background: #d4d4d4;
    border-radius: 50%;
    top: 1.9px;
    left: 5px;
	transition:.3s;
}
#a_notModal p{
		font-size:15px;
	}
#appendenceList .ditail table td.uName{
	text-align:left;
}
#appendenceList .ditail table td.uName i{
	color:#959595;
}
/* attendenceList end.  ---------------*/
@media screen and ( max-width:800px ){
	#a_notModal p{
		font-size:13px;
	}
	#appendenceList{
		padding:120px 5px;
	}
	#appendenceList .filter-controls,#appendenceList .desk-count-summary{
		width:100%;
	}
	#appendenceList .desk-count-item{
		padding:5px;
	}
	#appendenceList .desk-count-item .desk-number,#appendenceList .desk-count-item .count{
		font-size:13px;
	}
	#appendenceList .ditail{
		width:100%;
		padding:5px;
		overflow:scroll;
	}
	#appendenceList .ditail table th, #appendenceList .ditail table td{
		font-size:10px;
		padding:5px 2px
	}
	#appendenceList .ditail table th:nth-child(4),#appendenceList .ditail table td:nth-child(4){
		display:none;
	}
	#appendenceList .ditail table .a_type em:before{
		left:0px;
	}
	.attendListTotalModaal{
		width:100%;
		margin: 180px 0 0 0;
		padding:10px;
	}
	.total .modaal-content-container #totalLottie{
    width: 200px;
    right: 50%;
    transform: translate(50%, -20px);
}
	.attendListTotalModaal table th,.attendListTotalModaal table td{
		padding:5px;
		font-size:10px;
	}
	.total .modaal-content-container{
		padding:10px;
	}
}
/* top event card start ------------------*/
#proList .infoBox{
    display: flex;
}
#proList .infoBox .leftBox{
	width:28%;
}
#proList .infoBox .rightBox{
	width:50%;
}
#proList .infoBox .leftBox .searchMember{
	width:100%;
}
#proList .eventBox{
    margin:0 auto 30px auto;
    width: 80%;
}
#proList .eventBox .eventCard{
	 width: 100%;
    background-size: cover;
    margin: 30px 0;
    padding: 15px;
}
#proList .eventBox .eventCard a{
    display:inline-block;
	padding:5px 20px;
	border-radius:10px;
	background:black;
	color:white;
	transition:.3s;
	border:2px solid white;
}
#proList .eventBox .eventCard a:hover{
	background:white;
	color:black;
}
#proList .eventBox .eventCard h2{
    font-size: 18px;
    font-weight: bold;
}
#proList .eventBox .eventCard .inner{
    font-size: 13px;
}
#proList .eventBox .eventCard .inner .cv{
    text-align: right;
    margin: 10px 0 0 0;
}
.modaalEventBody .ditail{
    padding: 15px;
    background: #f8f8f8;
    border-radius: 10px;
    height: 300px;
    overflow: scroll;
	font-size:15px;
}
.modaalEventBody .flex{
	display:flex;
	justify-content:space-between
}
.modaalEventBody .flex .rightBox{
	padding:15px;
	width:45%;
}
.modaalEventBody .eventTitle{
    border-radius: 10px;
    margin: 0 0 20px 0;
	width:80%;
}
.modaalEventBody .eventTitle ul{
    font-size: 13px;
    margin: 10px 0 0 0;
}
.modaalEventBody .eventTitle ul li{
	color:white;
}
.eventModaal .modaal-container{
    background: #349991;
}
.modaalEventBody .eventTitle h4{
    font-size: 20px;
    font-weight: bold;
	color:white;
}
.modaalEventBody #lottiEvent{
	width:150px;
}
.modaalEventBody .flex img{
    width: 100px;
	height:100px;
    border-radius: 50%;
    margin: 0 30px 0 0;
    border: 2px solid white;
}
@media screen and ( max-width:800px ){
	#proList .infoBox{
		flex-wrap:wrap;
	}
	#proList .infoBox .leftBox{
		width:70%;
	}
	#proList .infoBox .rightBox{
		width:100%;
	}
	#proList .eventBox{
		margin: 0 auto 30px auto;
    	box-shadow: 10px 10px 11px #d6d6d6;
		width:100%;
	}
	#proList .eventBox .eventCard h2{
		font-size:15px;
	}
	#proList .eventBox .eventCard .inner{
		font-size:12px;
	}
	.modaalEventBody .flex img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: 0 10px 0 0;
	}
	.modaalEventBody #lottiEvent{
		display:none;
	}
	.modaalEventBody .eventTitle h4{
		font-size:18px;
	}
}
/* top start ---------------------------*/

body#main{
    min-width: 1000px;
}

body.home{
    width:100%;
    height:100vh;
    overflow: hidden;
}
body.home.on{
    height:auto;
    overflow: unset;
}
#loading{
    width:100%;
    height:100vh;
    background:white;
    position: absolute;
    top:0;
    left:0;
    z-index: 100;
}
#loading .title{
    position: absolute;
    top:43%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 20px;
    width:100%;
}
#loading .title .up{
    margin:0 0 10px 0;
}
#loading .title h1{
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size:20px;
    margin:30px 0 0 0;
    font-weight: bold;
}
#loading .title img{
    width:70px;
    margin:10px 0 0 0;
}
#loading .logo{
    visibility: hidden;
}
#loading .logo.visible{
    visibility: visible;
}
#loading .title .up,#loading .title .down{
    letter-spacing: 2px;

}
#loading .title span{
    visibility: hidden;
}
#loading .title span.visible{
    visibility: visible;
}
.home header{
    width:100%;
    height:100vh;
    position: relative;
    background-size:cover;
    background-position: center center;
}
.home header h2{
    position: absolute;
    bottom: 34.6%;
    right: 150px;
    font-size: 22px;
    transform: rotate(3deg);
    filter: blur(1.3px);
    color: #000000d4;
}
.home header h2:hover{
    transition:.3s;
    color:white;
}
.topNavi{
    padding:20px 30px;
    position: fixed;
    top:0;
    width:100%;
    left:0;
    display:flex;
    justify-content: space-between;
    z-index: 2;
    align-items: center;
}
.topNavi .log img{
    width:250px;
}
.topNavi ul{
    display:flex;
    justify-content: space-around;
}
.topNavi ul li{
    margin:0 10px;
    font-size:13px;
    text-align: center;
    height: 20px;
    overflow: hidden;
}
.topNavi ul li span{
    display: block;
}
.topNavi ul li .inner{
    transition:.3s;
    position: relative;
}
.topNavi ul li:hover .inner{
    transform:translate(0,-18px);
}
#top section{
    padding:120px 0px;
}
#top .voice .leftBox{
    width:50%;
}
#top .voice .rightBox{
    height:100vh;
    background-size:cover;
    background-repeat: no-repeat;
    width:50%;
}
#top .voice .flex.voiceBox{
    margin:120px 0;
}
#top .voice .flex.voiceBox.imgLeft{
    flex-direction: row-reverse;
}
#top .voice .flex.voiceBox.imgLeft .leftBox{
    justify-content: left;
}
#top .voice .flex.voiceBox.imgLeft .leftBox h4{
    margin:0 0 0 120px;
}
#top .voice .flex h4{
    font-size:35px;
    text-align:left;
    margin:0 0 30px 0;
}
#top .voice .flex h4 em{
    margin:0 10px 0 0;
    font-size:25px;
}
#top .voice .flex h4 span{
    text-combine-upright: all;
}
#top .voice .voiceTopBox{
    height:400vh
}
#top .voice .leftBox{
    padding:120px 30px 60px 60px;
    height:100vh;
    position: relative;
}
#top .voice .leftBox a{
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 15px 40px;
    color: white;
    background: #1978c2;
    font-size: 20px;
    border: 1px solid #1978c2;
    transition: .3s;
}
#top .voice .leftBox a:hover{
    background:white;
    color:#1978c2;
}
#top .voice .flex .rightBox img{
    width:100%;
    vertical-align: bottom;
    height: 100vh;
    object-fit: cover;
}
#top .voice .voiceTopBox p{
    font-size:25px;
    margin:0 0 10px 0;
    position: relative;
}
#top .voice .voiceTopBox .inner{
    width:80%;
}
#top .voice .voiceTopBox p span.gray{
    position: absolute;
    top:0;
    left:0;
    clip-path:inset(0 0 100% 0);
    transition: clip-path 0.1s linear;
}
#top .voice .voiceTopBox p span.gray{
    color:#d6d6d6;
}
#top .voice .voiceTopBox .stckyBox{
    position: sticky;
    top:0;
}
#top h2,#aboutCourse h2{
    font-size:30px;
    margin:0 0px 10px 0;
    text-align: center;
}
#top h3,#aboutCourse h3{
    text-align: center;
    font-size:20px;
}
#top h2 em,#aboutCourse h2 em{
    padding:0 0 5px 45px;
    border-bottom:2px solid black;
    position: relative;
}
#top h2 em:after,#aboutCourse h2 em:after{
    content:"";
    display: block;
    background-image:url("/wp-content/uploads/2025/08/title.png");
    position: absolute;
    left: 0px;
    top: -1px;
    width: 30px;
    height: 30px;
    background-size: cover;
}
#top .subTitle,#aboutCourse .subTitle{
    font-family: "Caveat", cursive;
  font-optical-sizing: auto;
}
#top .flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#top .recruitment .flex .leftBox{
    width:30%;
    position: relative;
    padding:0 120px 0 0;
}
#top .recruitment .flex .rightBox{
    width:70%;
}
#top .recruitment .flex .rightBox img{
    width:100%;
}
#top .recruitment .leftBox h3{
    writing-mode: vertical-rl;
    font-size:30px;
    width:100%;
}
#top .recruitment .leftBox div{
    position: absolute;
    bottom:30px;
    right:120px;
}
#top .recruitment .leftBox h3 em{
    display: block;
}
#top .recruitment .leftBox h3 span{
    text-combine-upright: all;
}
#top .recruitment .leftBox a{
    padding: 15px 50px;
    font-size: 20px;
    background: #faf170;
    border:1px solid #faf170;
    transition: .3s;
}
#top .recruitment .leftBox a:hover{
    background:white;
    color:#faf170;
}
#top .otherVoide .rightBox{
    width:40%;
    padding:30px 60px;
    position: relative;
}
#top .otherVoide .rightBox h3{
    font-size: 25px;
    text-align: left;
    margin: 0 0 30px 0;
}
#top .otherVoide .rightBox .cv{
    position: absolute;
    bottom: 30px;
    right: 60px;
}
#top .aboutCourse .cv{
    margin:180px 0 0 0;
    text-align: center;
}
#top .cv a{
    padding: 15px 40px;
    color: white;
    background: #1978c2;
    font-size: 20px;
    border: 1px solid #1978c2;
    transition: .3s;
}
#top .cv a:hover{
    color:#1978c2;
    background:white;
}
#top .otherVoide .leftBox{
    width:60%;
    position: relative;
    right: -8%;
}
#top .otherVoide .leftBox li{
    width:30%;
    padding:10px;
    overflow: hidden;
    position: relative;
    transition: .3s;
    transform: translate(0,0px);
}
#top .otherVoide .leftBox li .innerBody{
    position: relative;
    overflow: hidden;
}
#top .otherVoide .leftBox li img{
    width:100%;
    height: 500px;
    object-fit: cover;
}
#top .otherVoide .leftBox li.odd{
    position: relative;
    top:50px;
}
#top .multiple-items .inner{
    position: absolute;
    bottom:0;
    padding:20px;
    background:#000000a8;
    color:white;
    width:100%;
}
#top .multiple-items .inner em{
    margin:0 10px 0 0; 
    font-size:20px;
}
#top .otherVoide .leftBox li:nth-child(even) .inner{
    bottom:40px;
}
#top .multiple-items .inner h3{
    color:white;
    text-align: left;
}
#top .multiple-items .inner h4{
    color:white;
    text-align: left;
}
#top section.otherVoide{
    padding:0 0 120px 0;
    overflow: hidden;
}
#top .aboutCourse .inner{
    padding:200px 0 0 0;
    text-align: center;
}
#top .aboutCourse .inner h4{
    font-size:25px;
    margin:0 0 40px 0;
}
#top .aboutCourse .inner h4 em{
    font-size:20px;
    margin:0 10px;
    
}
#top .aboutCourse .inner p{
    font-size:20px;
}
#top .aboutCourse .imgBox{
    margin:120px 0 0 0;
}
#top .aboutCourse .imgBox img{
    width:33.33%;
}
#top .getAbout .inner{
    margin:200px 0 0 0;
}
#top .getAbout .flex{
    margin:100px 0 0 0;
}
#top .getAbout .flex:nth-child(even){
    flex-direction: row-reverse;
}
#top .getAbout .flex img{
    width:45%;
}
#top .getAbout .flex .leftBox{
    width:55%;
    padding: 80px 60px 0 60px;
}
#top .getAbout .flex .leftBox .flex{
    justify-content: left;
    align-items: center;
}
#top .getAbout .flex .leftBox .flex .hLeft{
    width:15%;
}
#top .getAbout .flex .leftBox .flex .hRight{
    width:85%;
}
#top .getAbout .flex .leftBox h3{
    text-align: left;
    font-size: 25px;
    margin: 0 0 10px 0;
    font-weight: bold;
    position: relative;
}
#top .getAbout .flex .leftBox h3 em{
    font-size: 100px;
    margin: 0 10px 0 0;
    font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
  position: relative;
    top: -16px;
}
#top .teacher .leftBox{
    width:45%;
}
#top .teacher .leftBox img{
    width:100%;
}
#top .teacher .rightBox{
    width:55%;
    padding:120px 100px;
}
#top .teacher .rightBox .innerBox{
    position: sticky;
    top: 60px;
}
#top .teacher .rightBox h4{
    font-size: 50px;;
}
#top .teacher .flex{
    margin:0 0 120px 0;
}
#top .teacher .flex:nth-child(even){
    flex-direction: row-reverse;
}
#top .teacher .rightBox .sub{
    font-size: 25px;
    margin: 0 0 0 150px;
}
#top .teacher .rightBox h5{
    margin:20px 0 50px 0;
    font-size:20px;

}
#top .teacher .rightBox p{
    font-size:20px;
    margin:0 0 30px 0;
}
#top .teacher .innerBody{
    margin:200px 0 0 0;
}
#top .applicate h4{
    text-align: center;
    margin: 200px 0 120px 0;
    font-size: 25px;
}
#top .applicate .flex img{
    width:45%;
    object-fit: cover;
}
#top .applicate .flex .rightBox{
    width:55%;
    padding:60px 60px 0 60px;
}
#top .applicate .flex .rightBox h5{
    font-size:25px;
    margin:0 0 60px 0;
    font-weight: bold;
}
#top .applicate .flex:nth-child(even){
    flex-direction: row-reverse;
    margin:100px 0 0 0;
}
#top .applicate .flex .rightBox p{
    font-size:20px;
    margin:0 0 30px 0;
}
#top .applicate .cv{
    text-align: center;
    width: 100%;
    margin: 200px 0 120px 0;
}
footer{
    padding:100px 100px 30px 100px;
    position: relative;
}
footer:after{
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#416da2ab;
}
footer img{
    width:100px;
    margin:0 30px 0 0;
}
footer .leftBox p{
    color:white;
    font-weight: bold;
    font-size:20px;
}
footer .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
footer .flex .rightBox{
    width:500px;
}
footer .flex .rightBox a{
    color:white;
}
footer .copy{
    text-align:center;
    color:white;
    margin:100px 0 0 0;
    position: relative;
    z-index: 1;
}
header.sub{
    position: relative;
}
header.sub img{
    width:100%;
    vertical-align: bottom;
}
header.sub:after{
    content:"";
    display: block;
    position: absolute;
    top:0;
    right:100%;
    width:120%;
    height:100%;
    background:#ffffffb5;
    animation: coverTo10 0.8s cubic-bezier(0.35, 0.26, 0.01, 0.96) forwards;
}
@keyframes coverTo10{
  0%{ width: 120%;}
  50%{width:100%;right:0}
  100%{ width: 500px;right:0;} /* 中心に寄せたいなら left を調整 */
}
header.sub .inner{
    position: absolute;
    top:0;
    right:0;
    width:500px;
    height: 100%;
    padding:120px 60px 30px 30px;
    z-index: 1;
}
header.sub .inner.animate__animated.animate__fadeIn{
  --animate-duration: 2s;
}
#main header.sub .inner .flex{
    display: flex;
    justify-content: flex-end;
}
#voiceDetail #top section.otherVoide{
    margin:120px 0 0 0;
}
#main header.sub .inner .h{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size:25px;
}
#main header.sub .inner .w{
    writing-mode: vertical-rl;
    font-size: 35px;
    letter-spacing: 5px;
}
#teacher .intro{
    background-size: cover;
    padding:120px 20px;
    text-align: center;
}
#teacher .intro h2{
    font-size: 30px;
    letter-spacing: 7px;
    line-height: 200%;
}
#teacher .intro .inner{
    width: 1000px;
    margin: 60px auto 0 auto;
    text-align: justify;
    font-size: 18px;
}
#teacher .intro .inner p{
    margin:0 0 30px 0;
}
#teacher .sepa img{
    width: 100%;
    vertical-align: bottom;
}
#teacher .sepa{
    margin:0 0 200px 0;
}
#teacher .aboutTeacher .flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#teacher .aboutTeacher .flex .leftBox{
    width:50%;
}
#teacher .aboutTeacher .flex .leftBox img{
    width:100%;
    vertical-align: bottom;
}
#teacher .aboutTeacher .flex .rightBox{
    width:50%;
    padding:120px 80px;
}
#teacher .aboutTeacher .flex .rightBox h3{
    font-size: 45px;
    margin: 0 0 45px 0;
    width: 620px;
    padding: 0 0 55px 0;
    border-bottom: 1px solid black;
    font-family: "Yuji Mai", serif;
    font-weight: 700;
    font-style: normal;
}
#teacher .aboutTeacher .flex .rightBox h3 em{
    font-size: 25px;
    position: relative;
    top: 41px;
    left: -20px;
    letter-spacing: 8px;
}
#teacher .aboutTeacher .flex .rightBox h4{
    font-size:25px;
    margin:0 0 45px 0;
}
#teacher .aboutTeacher .flex .rightBox p{
    font-size:20px;
    margin:0 0 30px 0;
}
#teacher .aboutTeacher .aboutBody .flex:nth-child(even){
    flex-direction: row-reverse;
}
#teacher .aboutTeacher .aboutBody{
    margin:0 0 200px 0;
}
#voice .intro{
    padding:120px 20px;
    text-align: center;
}
#voice .intro p{
    font-size:30px;
}
#voice .flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
}
#voice .flex li{
    width:30%;
    position: relative;

}
#voice .flex li:hover img{
    filter: brightness(0.5);
}
#voice .flex li .white{
    color:#ffffff00;
    transition: .3s;
}
#voice .flex li:hover .white{
    color:white;
}
#voice .flex li .ditail{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
    padding:30px;
}
#voice .flex li img{
    width:100%;
    transition: .3s;
}
#voice .flex li h5 em{
    margin:0 10px 0 0;
}
#voice .flex li h5{
    margin:0 0 30px 0;
}
#voice .flex li h3{
    font-size:30px;
    text-align: justify;
}
#voice .listBody{
    margin:0 0 120px 0;
}
.footerCv{
    background:#e7eef7;
    text-align: center;
    padding:120px 20px;
}
.footerCv img{
    width:100px;
}
.footerCv h4{
    font-weight: bold;
}
.footerCv .logBox{
    margin:0 0 60px 0;
}
.footerCv h5{
    font-size:25px;
    margin:0 0 60px 0;
}
.footerCv .cv a{
    padding:20px 50px;
    background:#eeeb6e;
}
.footerCv .cv a img{
    width: 18px;
    vertical-align: bottom;
    margin:0 15px 0 0;
    position: relative;
    transition: .3s;
    left:0;

}
.footerCv .cv a:hover img{
    left:5px;
}
#main .error{
    padding:120px 20px;
    text-align: center;
    min-height: 100vh;
}
#main .error h2{
    font-size:30px;
}
#voiceDetail header .flex{
    display: flex;
}
#voiceDetail header .flex .leftBox{
    width:40%;
    padding:60px 30px;
}
#voiceDetail header .flex .rightBox{
    width:60%;
}
#voiceDetail header .userName{
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 5px;
    margin: 0 30px 0 0;
    font-size: 25px;
}
#voiceDetail header .userName em{
    font-size:30px;
    font-weight: bold;
    margin:10px 0;
}
#voiceDetail .title{
    padding: 200px 20px;
    text-align: center;
}
#voiceDetail .title p{
    font-size: 25px;
    width: 60%;
    margin: 0 auto;
}
#voiceDetail .article .flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#voiceDetail .article .flex:nth-of-type(even){
    flex-direction: row-reverse;
}
#voiceDetail .article .flex .leftBox{
    width:40%;
}
#voiceDetail .article .flex .leftBox .imgBox{
    position:sticky;
    top:0;
    height: 100vh;
}
#voiceDetail .article .flex .leftBox img{
    width:100%;
    height: 100%;
    object-fit: cover;
	object-position: top;
}
#voiceDetail .article .flex .rightBox{
    width:60%;
    padding:120px 60px;
}
#voiceDetail .article .flex .rightBox h4{
    font-size:20px;
}
#voiceDetail .article .flex .rightBox .inner p{
    font-size:18px;
    margin:0 0 30px 0;
}
#voiceDetail .article .flex .rightBox .inner h2{
    font-size: 35px;
    font-weight: bold;
    margin: 0 0 30px 0;
}
#top .voice .voiceTopBox2{
    height: 400vh;
}
#top .voice .voiceTopBox2 .stckyBox{
    position: sticky;
    top: 0;
}
#top .voice .voiceTopBox2 .voiceBox{
    flex-direction: row-reverse;
}
#voiceDetail .article .flex .rightBox .inner h3{
    font-size: 20px;
    margin: 0 0 60px 0;
}
#voiceDetail .article .flex .rightBox .inner h2:nth-of-type(2){
    margin:120px 0 30px 0;
}
#top .voice .voiceTopBox2 p{
    font-size: 25px;
    margin: 0 0 10px 0;
    position: relative;
}
#top .voice .voiceTopBox2 p span.gray{
    color: #d6d6d6;
}
#top .voice .voiceTopBox2 p span.gray{
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.1s linear;
}
#aboutCourse .intro{
    padding: 200px 20px;
    text-align: center;
}
#aboutCourse .intro h4{
    margin:0 0 60px 0;
}
#aboutCourse .intro h4 span{
    font-size:30px;
}
#aboutCourse .intro h4 em{
    margin:0 10px;
}
#aboutCourse .sepa{
    text-align: center;
    position: relative;
}
#aboutCourse .sepa img:nth-of-type(1){
    position: absolute;
    clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 0% 100%);
    left:0;
}
#aboutCourse .sepa img:nth-of-type(3){
    position: absolute;
    clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 0% 100%);
    right:0;
}
#aboutCourse p{
    font-size:20px;
}
#aboutCourse .target h3{
    font-size:30px;
    text-align: center;
    padding:150px 0;
}
#aboutCourse .listBox{
    padding:120px 20px;
    background-size: cover;
}

#aboutCourse .listBox ul{
    color: white;
    width:700px;
    margin:0 auto;
}
#aboutCourse .listBox ul li{
    font-size:30px;
    list-style: disc;
    margin:30px 0;
}
#aboutCourse .about{
    padding:120px 0 0 0;
}
#aboutCourse .about h4{
    margin: 100px 0 30px 0;
    font-size:30px;
    text-align: center;
}
#aboutCourse .about h4 em{
    font-size: 100px;
    margin: 0 10px 0 0;
    font-family: "Charm", cursive;
    font-weight: 400;
    font-style: normal;
    position: relative;
    top: 2px;
    color: #202a75;
}
#aboutCourse .about .inner{
    width: 700px;
    margin: 0 auto 100px auto;
    text-align: justify;
}
#aboutCourse .about .sepa{
    width:100%;
    margin:0 0 120px 0;
}
#aboutCourse .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#aboutCourse .about ul{
    margin:0 0 120px 0;
}
#aboutCourse .flex li{
    width:25%;
}
#aboutCourse .flex li p{
    text-align: center;
}
#aboutCourse .flex li img{
    width:100%;
}
#aboutCourse .about .leftBox{
    width:40%;
}
#aboutCourse .about .leftBox img{
    width:100%;
}
#aboutCourse .about .flex{
    justify-content: space-around;
}
#aboutCourse .about .rightBox{
    width:50%;
    padding:0 60px;
}
#aboutCourse .about .rightBox h3{
    text-align: justify;
    font-size: 25px;
    padding: 0 0 25px 0;
    border-bottom: 1px solid black;
    margin: 0 0 30px 0;
}
#aboutCourse .cv{
    text-align: center;
    padding: 120px 20px;
    background: #f9f9f9;
	display: flex;
	justify-content: center;
}
#aboutCourse .cv .cvBody{
	margin:0 20px;
}
#aboutCourse .cv .cvBody.s8 a{
	background: #1065d5;
    border: 1px solid #92baee;
    color: white;
}
#aboutCourse .cv .cvBody.s8 a:hover{
	background:white;
	color:#1065d5;
}
#aboutCourse .cv a{
    padding:20px 30px 20px 50px;
    background:#eeeb6e;
    font-size:25px;
    border:1px solid #eeeb6e;
    transition: .3s;
}
#aboutCourse .cv a:hover img{
    transform: translate(10px,0);
}
#aboutCourse .cv a:hover{
    color:#9d9618;
}
#aboutCourse .cv a img{
    position: relative;
    top: 8px;
    left: -20px;
    transition: .3s;
}
#aboutCourse .about .flex .rightBox li{
    width:100%;
    font-size: 20px;
    margin: 0 0 20px 0;
    list-style: disc;
    list-style-position: inside;
}
#trial .intro{
    padding:160px 20px;
    text-align: center;
}
#trial .special .flex{
    display: flex;
    flex-wrap: wrap;
    margin: 120px 0;
}
#trial .special .flex .leftBox{
    width:50%;
}
#trial .special .flex .leftBox img{
    width:100%;
    height: 100%;
    object-fit: cover;
}
#trial .special .flex .rightBox{
    width:50%;
    padding:100px 60px;
}
#trial .special .flex:nth-of-type(2){
    flex-direction: row-reverse;
}
#trial .special .flex .rightBox h3{
    font-size: 30px;
    margin: 0 0 30px 0;
}
#trial .special .flex .rightBox p{
    font-size:20px;
    margin:0 0 30px 0;
    text-align: justify;
}
#trial .special2{
    padding: 160px 20px;
    background: #e4edf9;
}
#trial .special2 h4{
    font-size:25px;
    margin: 0 0 20px 0;
    text-align: center;
}
#trial .special2 .flex .sImg{
    width:100%
}
#trial .special2 .flex li{
    width:25%;
}
#trial .price .flex{
    display: flex;
    justify-content: center;
}
#trial .form table{
    width:100%;
    margin:30px 0 0 0;
}
#trial .form table th{
    text-align: left;
    vertical-align:middle;
}
#trial .form p{
    text-align: justify;
}
#trial .form table td{
    padding:15px 0;
}
#trial .form table input,#trial .form table select{
    width: 100%;
    font-size: 16px;
    height: 40px;
    padding: 0 10px;
}
#trial .form{
    padding: 200px 20px;
    background: #f5f5f5;
}
#trial .form h3{
    text-align: center;
    font-size: 30px;
    margin: 0 0 30px 0;
}
#trial .form .formBody{
    width: 500px;
    margin: 0 auto;
}
#trial .price .flex .priceBox{
    margin:30px 60px;
    width:25%;
}
#trial .price h3{
    font-size: 30px;
    margin: 0 0 60px 0;
}
#trial .price h4{
    font-size: 20px;
}
#trial .price h4 em{
    margin: 0 10px 0 0;
    font-family: "Charm", cursive;
    font-weight: 400;
    font-style: normal;
}
#trial .price h3 em{
    padding: 0 10px 10px 10px;
    border-bottom: 2px solid #26538f;
}
#trial .price{
    padding: 0 20px 120px 20px;
    text-align: center;
}
#trial .special2 .flex li p{
    margin: 20px 0 0 0;
    font-size: 20px;
}
#trial .sepa2{
    margin:120px 0;
}
#trial .sepa2 img{
    width:100%;
}
#trial .special2 h4 img{
    vertical-align: middle;
    margin:0 20px 0 0;
}
#trial .special2 .flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
#trial .special2 h3{
    text-align: center;
    font-size: 30px;
    margin: 0 0 60px 0;
}
#trial .intro p{
    font-size: 30px;
}
#trial .about{
    padding: 120px 20% 180px 20%;
    background-size: cover;
}
#trial .about h2{
    text-align: center;
    font-size: 30px;
    margin: 0 0 60px 0;
}
#main #error #lottie{
    width:20%;
    margin:60px auto
}
#trial .about p{
    font-size: 20px;
    margin:0 0 30px 0;
}
#trial form .cv{
    text-align: center;
    margin: 30px 0 0 0;
}
#trial form .cv button{
    padding: 15px 50px;
    font-size: 20px;
    background: #2559b0;
    width: 100%;
    color: white;
    border: 1px solid #2559b0;
    transition: .3s;
}
#trial form .cv button:hover{
    background:white;
    color:#2559b0;
}
#main #error{
    height: 100vh;
    text-align: center;
    padding: 200px 20px;
    font-size: 20px;
}
#teacher #aboutCourse .sepa img{
    width:unset;
}
#top.semnarApp form .off {
display: none;
}
@media screen and ( max-width:800px ){
	#aboutCourse .cv{
		display:block;
	}
	#aboutCourse .cv a{
		width:90%;
		display:inline-block;
		margin:0 0 20px 0;
		padding:10px 20px 20px 40px
	}
    #voiceDetail #top section.otherVoide{
        margin:0;
    }
    #aboutCourse .flex li p{
        padding:0;
        font-size:16px;
        text-align:justify;
    }
    header.sub .inner .flex{
        justify-content: flex-end !important;
    }
    #teacher .aboutTeacher .aboutBody{
        margin:0;
    }
    #teacher .aboutTeacher .flex .rightBox p{
        font-size:16px;
        margin:0 0 20px 0;
        text-align: justify;
    }
    #teacher .aboutTeacher .flex .rightBox h4{
        font-size:20px;
        display: block;
    }
    #teacher .aboutTeacher .flex .rightBox h3 em{
        font-size: 20px;
        left: unset;
        display: block;
        top:0;
    }
    #teacher .aboutTeacher .flex .rightBox h3{
        font-size: 30px;
        width:100%;
        padding: 0 0 10px 0;
    }
    #teacher .aboutTeacher .flex .rightBox{
        padding:60px 20px;
    }
    #teacher .aboutTeacher .flex .leftBox img:nth-of-type(2){
        display: none;
    }
    #teacher #aboutCourse .sepa img,#teacher .aboutTeacher .flex .leftBox,#teacher .aboutTeacher .flex .rightBox{
        width:100%;
    }
    #main #error{
        padding:120px 20px;
    }
    #main #error #lottie{
        width:50%;
    }
    #trial .form p{
        font-size:16px;
    }
    #trial .form h3{
        font-size:20px;
    }
    #trial .form .formBody{
        width:100%;
    }
    #trial .form{
        padding:100px 20px;
    }
    #trial .price h4{
        font-size:16px;
    }
    #trial .price h3 em{
        font-size:20px;
    }
    #trial .price .flex .priceBox{
        width: 45%;
        margin: 0 10px;
    }
    #trial .price{
        padding: 0 20px 100px 20px;
    }
    #trial .sepa2{
        margin:80px 0;
    }
    #trial .special2 .flex li p{
        font-size: 16px;
        text-align: center;
    }
    #trial .special2 h4{
        font-size:20px;
    }
    #trial .special2 .flex li{
        width:100%;
        margin: 0 0 100px 0;
    }
    #trial .special2 h3{
        font-size:20px;
    }
    #trial .special2{
        padding:100px 20px 0 20px;
    }
    #trial .special .flex .rightBox h3{
        font-size:20px;
        text-align:center;
    }
    #trial .special .flex .rightBox p{
        font-size: 16px;
        margin:0 0 20px 0;
    }
    #trial .special .flex{
        margin:120px 0 0 0;
    }
    #trial .special .flex:nth-of-type(2){
        margin:0;
    }
    #trial .special .flex .rightBox{
        width:100%;
        padding:60px 20px;
    }
    #trial .special .flex .leftBox{
        width:100%;
    }
    #trial .about p{
        font-size:16px;
        margin:0 0 20px 0;
    }
    #trial .intro,#trial .about{
        padding:100px 20px;
    }
    #trial .intro p,#trial .about h2{
        font-size:20px;
    }
    #voice .flex li.on img{
        filter: brightness(0.5);
    }
    #voice .flex li.on .white{
        color:white;
    }
    body#main{
        min-width: unset;
    }
    #main header.sub img{
        aspect-ratio: 1 / 0.8;
        object-fit: cover;
    }
    #main header.sub .inner .h{
        font-size:20px;
    }
    #main header.sub .inner{
        width:40%;
        padding:70px 10px 0 0;
    }
    @keyframes coverTo10{
        0%{ width: 120%;}
        50%{width:100%;right:0}
        100%{ width:40%;right:0;} /* 中心に寄せたいなら left を調整 */
    }
    #main header.sub .inner .w{
        font-size:30px;
    }
    .topNavi{
        width: 100%;
        height: 100vh;
        background: white;
        display: block;
        text-align: center;
        padding: 60px 20px;
        left:unset;
        right:-100%;
        transition: .3s;
    }
    .topNavi.is-open{
        right:0;
    }
    .topNavi ul{
        display: block;
    }
    .topNavi ul li{
        margin: 60px 10px 30px 10px;
        font-size: 15px;
    }
    .topNavi ul li:hover .inner{
        transform: translate(0, -24px);
    }
    /* 位置とタップ領域（画面 30px / 30px） */
    .hamburger {
    position: fixed;
    top: 14px;
    right: 28px;
    width: 44px;              /* タップ領域 */
    height: 44px;             /* タップ領域 */
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 99;
    }

    /* 三本線のベース（中央の線） */
    .hamburger__bar,
    .hamburger__bar::before,
    .hamburger__bar::after {
    display: block;
    position: absolute;
    left: 50%;
    width: 30px;             /* 指定どおり幅30px */
    height: 3px;             /* 指定どおり高さ5px */
    background: #111;
    border-radius: 3px;
    transform: translateX(-50%);
    transition: transform 0.22s ease, opacity 0.18s ease, background-color 0.22s ease;
    }

    /* ボタン内の中央に配置 */
    .hamburger__bar {
    top: 50%;
    transform: translate(-50%, -50%);
    }

    /* 上下の線は疑似要素で */
    .hamburger__bar::before,
    .hamburger__bar::after {
    content: "";
    }

    /* 上の線は中央線から上にオフセット（線の高さ5px + 余白5px = 10px） */
    .hamburger__bar::before {
    top: -10px;
    }

    /* 下の線は中央線から下にオフセット */
    .hamburger__bar::after {
    top: 10px;
    }

    /* アクティブ状態：X へ変形 */
    .hamburger.is-active .hamburger__bar {
    background: transparent;         /* 真ん中の線を消す */
    }

    .hamburger.is-active .hamburger__bar::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
    }

    .hamburger.is-active .hamburger__bar::after {
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
    }

    /* （任意）背景色切替したい場合のダーク背景対応例 */
    .hamburger--light .hamburger__bar,
    .hamburger--light .hamburger__bar::before,
    .hamburger--light .hamburger__bar::after {
    background: #fff;
    }
    #voice .intro{
        padding:80px 20px;
    }
    #voice .intro p{
        font-size:20px;
    }
    #voice .flex li{
        width:100%;
    }
    #voice .flex li h3{
        font-size:20px;
    }
    .footerCv{
        padding:80px 20px;
    }
    .footerCv img{
        width:60px;
    }
    .footerCv h5{
    font-size: 13px;
    margin: 0 0 60px 0;
    }
    .footerCv .cv a{
        padding: 20px;
        font-size: 13px;
    }
    .footerCv .logBox{
        margin:0 0 20px 0;
    }
    footer{
        padding: 60px 20px;
    }
    footer .flex{
        display: block;
    }
    footer .leftBox .flex{
        display: flex;
        justify-content: center;
    }
    footer .rightBox .flex{
        display: flex;
    }
    footer .rightBox .flex li{
        font-size:13px
    }
    footer .leftBox p{
        font-size: 15px;
    }
    footer .flex .rightBox{
        width:100%;
        margin:30px 0 0 0;
    }
    footer .copy{
        margin: 60px 0 0 0;
        font-size: 10px;
    }
    #top h2{
        font-size:25px;
        bottom:70% !important;
        right:unset;
        left:30px;
        transform:unset;
    }
    #top .flex{
        flex-direction: column-reverse;
    }
    #top .recruitment .flex .leftBox{
        width:100%;
        padding:60px 20px;
    }
    #top .recruitment .flex .rightBox{
        width:100%;
    }
    #top section{
        padding:60px 0;
    }
    #top .recruitment .leftBox h3{
        writing-mode: unset;
        font-size: 25px;
        text-align: center;
        margin: 0 0 60px 0;
    }
    #top .recruitment .leftBox div {
        position: absolute;
        left: 50%;
        right:unset;
        transform: translate(-50%, 0);
        width: 300px;
        text-align: center;
    }
    #top .voice .rightBox{
        width: 100%;
        height:45vh;
    }
    #top .voice .leftBox{
        width: 100%;
        padding: 30px 20px;
        height: auto;
        height:50vh;
    }
    #top .voice .voiceTopBox .inner,#top .voice .voiceTopBox2 .inner{
        width:100%;
        height:55vh;
    }
    #top .voice .flex h4{
        font-size: 25px;
        text-align: center;
    }
    #top .voice .voiceTopBox p,#top .voice .voiceTopBox2 p{
        font-size:18px;
    }
    #top .voice .leftBox a{
        bottom: 30px;
        font-size: 16px;
        width: 75%;
        text-align: center;
    }
    #top .voice .flex.voiceBox{
        margin:0;
        flex-direction: column-reverse;
    }
    #top .otherVoide .flex{
        display: block;
    }
    #top .otherVoide .rightBox{
        width: 100%;
        padding: 0 20px 120px 20px;
        margin: 0 0 30px 0;
    }
    #top .otherVoide .rightBox h3{
        font-size:20px;
        text-align: center;
    }
    #top .otherVoide .rightBox p{
        font-size:15px;
        text-align:justify;
    }
    #top .otherVoide .rightBox .cv{
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 75%;
        text-align: center;
    }
    #top .cv a{
        font-size: 16px;
        display: inline-block;
        width:100%;
    }
    #top .voice .voiceTopBox{
        margin:30px 0 0 0;
    }
    #top .otherVoide .leftBox{
        width:100%;
        right:unset;
    }
    #top .otherVoide .leftBox li{
        width:50%;
    }
    #top .otherVoide .leftBox li img{
        height:300px;
    }
    #top .multiple-items .inner{
        padding:10px;
    }
    #top .multiple-items .inner h3{
        font-size:13px;
    }
    #top .multiple-items .inner em{
        font-size:16px;
        margin:0;
    }
    #top .otherVoide .leftBox li.odd{
        top:0;
    }
    #top .otherVoide .leftBox li:nth-child(even) .inner{
        bottom:0;
    }
    #top .multiple-items .inner h4{
        font-size:13px;
    }
    #top .slick-dots{
        display: flex;
        width: 80%;
        left: 50%;
        transform: translate(-50%, 0px);
        justify-content: center;
    }
    #top .otherVoide .leftBox .slick-dots li{
        width:0;
    }
    #top section.otherVoide{
        padding:0 0 60px 0;
    }
    #top .aboutCourse .inner{
        padding:60px 0 0 0;
    }
    #top .aboutCourse .inner h4{
        font-size:20px;
    }
    #top .aboutCourse .inner h4 em{
        display: block;
    }
    #top .aboutCourse .inner p{
        font-size: 16px;
        padding: 0 20px;
    }
    #top .aboutCourse .imgBox img:nth-of-type(2),#top .aboutCourse .imgBox img:nth-of-type(3){
        display: none;
    }
    #top .aboutCourse .imgBox img{
        width:100%;
    }
    #top .aboutCourse .cv{
        width: 75%;
        margin: 60px auto 0 auto;
    }
    #top .getAbout .flex{
        margin:60px 0 0 0;
    }
    #top .getAbout .flex .leftBox{
        padding:0 20px;
        width:100%;
        position: relative;
        margin: 0 0 20px 0;
    }
    #top .getAbout .flex .rightBox,#top .getAbout .flex .leftBox .flex .hRight{
        width:100%;
    }
    #top .getAbout .flex img{
        width:100%;
    }
    #top .getAbout .inner{
        margin:0;
    }
    #top .getAbout .flex .leftBox .hRight h3{
        font-size:23px;
        padding:0 0 0 100px;
        text-align: justify;
    }
    #top .getAbout .flex .leftBox .flex .hLeft{
        position: absolute;
        top: 30px;
        left: 20px;
    }
    #top .getAbout .flex .leftBox h3 em{
        font-size: 84px;
        color: #8a8a8a;
    }
    #top section.getAbout{
        padding:100px 0 60px 0;
    }
    #top .getAbout .flex .leftBox .text{
        margin:20px 0 0 0;
        text-align: justify;
    }
    #top .getAbout .flex:nth-child(even){
        flex-direction: column-reverse;
    }
    #top .teacher .leftBox{
        width:100%;
    }
    #top .teacher .rightBox{
        width:100%;
        padding: 0 20px;
    }
    #top .teacher .flex{
        flex-direction: unset;
    }
    #top section.teacher{
        padding:100px 0 60px 0;
    }
    #top .teacher .innerBody{
        margin:100px 0 0 0;
    }
    #top .teacher .leftBox img{
        vertical-align: bottom;
        margin:0 0 30px 0;
    }
    #top .teacher .rightBox h4{
        font-size:35px;
    }
    #top .teacher .rightBox .sub{
        font-size: 20px;
        margin: 0 0 0 0;
    }
    #top .teacher .rightBox p{
        font-size:16px;
        text-align:justify;
    }
    #top .applicate h4{
        margin: 100px 0 30px 0;
        font-size: 20px;
    }
    #top .applicate .flex .rightBox{
        width:100%;
        padding:20px;
    }
    #top .applicate .flex{
        flex-direction: unset;
    }
    #top .applicate .flex img{
        width: 100%;
        margin: 30px 0;
    }
    #top .applicate .flex .rightBox h5{
        font-size:20px;
        text-align: center;
        margin: 0 0 40px 0;
    }
    #top .applicate .flex .rightBox p{
        font-size:16px;
        text-align:justify;
    }
    #top .applicate .flex:nth-child(even){
        margin:0;
    }
    #top .applicate .cv{
        width: 75%;
        margin: 00px auto 20px auto;
    }
    #top section.applicate{
        padding: 0 0 60px 0;
    }
    header.sub img{
        width:100% !important;
    }
    #voiceDetail header.sub img{
        object-position: left;
    }
    #voiceDetail header.sub .inner .w{
        font-size:20px;
    }
    #voiceDetail header.sub .inner .h{
        position: relative;
        left:5px;
    }
    #voiceDetail header .userName{
        font-size:20px;
        margin:0;
    }
    #voiceDetail header .userName{
        font-size:16px;
    }
    #voiceDetail header .userName em{
        font-size:20px;
    }
    #voiceDetail header .userName span{
        display: none;
    }
    #voiceDetail .title{
        padding:100px 20px;
    }
    #voiceDetail .title p{
        width: 100%;
        font-size: 20px;
    }
    #voiceDetail .article .flex .leftBox{
        width:100%;
    }
    #voiceDetail .article .flex .leftBox .imgBox{
        height:50vh;
    }
    #voiceDetail .article .flex .rightBox{
        width:100%;
        padding:100px 20px;
    }
    #voiceDetail .article .flex .rightBox .inner h2{
        font-size:30px;
        text-align: justify;
    }
    #voiceDetail .article .flex .rightBox .inner p{
        font-size:16px;
        text-align: justify;
    }
    #aboutCourse .intro{
        padding:100px 20px;
    }
    #aboutCourse .intro h4 span{
        font-size:25px;
    }
    #aboutCourse .intro h4 em{
        display: block;
    }
    #aboutCourse p{
        font-size:17px;
    }
    #aboutCourse .sepa img:nth-of-type(1),#aboutCourse .sepa img:nth-of-type(3){
        display: none;
    }
    #aboutCourse .sepa img{
        width:100%;
		display:none;
    }
    #aboutCourse .target h3{
    padding: 100px 20px;
    font-size: 20px;
}
#aboutCourse .listBox ul{
    width:85%;
}
#aboutCourse .listBox ul li{
    font-size: 20px;
    list-style-position: outside;
    text-align: justify;
}
#aboutCourse .about h4{
    line-height: 46px;
    text-align: justify;
    padding: 0 20px 0 100px;
    position: relative;
    font-size:25px;
    font-weight: bold;
}
#aboutCourse .about h4 em{
    position: absolute;
    font-size: 70px;
    top: -10px;
    left: 22px;
}
#aboutCourse .about .inner{
    width:100%;
    margin:0 auto 60px auto
}
#aboutCourse .about p{
    padding:0 20px;
}
#aboutCourse .about .flex{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
#aboutCourse .about .sepa{
    margin: 0 0 60px 0;
}
#aboutCourse .about li{
    width: 100%;
    margin: 0 0 60px 0;
}
#aboutCourse .about li h4{
    line-height: unset;
        text-align: center;
        padding: 0;
        position: relative;
        font-size: 25px;
        margin: 0 0 20px 0;
}
#aboutCourse .about .leftBox{
    width:100%;
}
#aboutCourse .about .rightBox{
    width:100%;
}
#aboutCourse .about .ditail .rightBox{
    padding:0;
}
#aboutCourse .about .ditail .rightBox h3{
    font-size:20px;
}
#aboutCourse .about .ditail ul{
    padding: 0 16px;
}
#aboutCourse .about .ditail.flex .rightBox li{
    width: 100%;
    margin: 0 0 20px 0;
    list-style: disc;
    list-style-position: outside;
    text-align: justify;
    font-size: 16px;
}
#aboutCourse .about .ditail.flex{
    flex-direction: column-reverse;
}
#aboutCourse .cv{
    padding:80px 0;
}
#aboutCourse .cv a{
    font-size: 13px;
}
#aboutCourse .cv a img{
    width:20px;
}
#teacher .intro h2{
    font-size: 20px;
}
#teacher .under1,#teacher .under2{
    display: none;
}
#teacher .intro{
    padding:100px 20px;
}
#teacher .intro .inner{
    width: 100%;
    font-size: 16px;
}
	.home header h2{
		filter:unset;
	}
	#teacher #aboutCourse .sepa img{
		display:none;
	}
	#main #voice header.sub img{
		object-position: -59px;
	}
}

/* top end.  ---------------------------*/
/* seminar_app start --------------------*/

#top.semnarApp .intro .inner{
    width: 70%;
    margin: 100px 0 0 auto;
}
#top.semnarApp .intro img{
    width:50%;
}
#top.semnarApp .intro .innerBox{
    padding: 0 100px 0 0;
    font-size: 20px;
    text-align: justify;
}
#top.semnarApp .intro .innerBox p{
    margin:0 0 30px 0;
}

#top.semnarApp .intro .imgBox{
    margin:0 0 60px 0;
}
#top.semnarApp .course p{
    font-size: 20px;
    margin: 100px 0 80px 0;
    text-align: center;
}
#top.semnarApp .course .courseImg{
	text-align:center;
}
#top.semnarApp .teacher .innerBox{
    margin: 100px 0 0 0;
}
#top.semnarApp .teacher .innerBox img{
    width: 45%;
    object-fit: cover;
    object-position: top;
	clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 0% 100%);
	max-height:600px;
}
#top.semnarApp section.support p.sub,#top.semnarApp .special h4{
	margin: 100px 0 80px 0;
	text-align: center;
	font-size: 20px;
}
#top.semnarApp .special .flex{
	width:90%;
	margin:0 auto;
}
#top.semnarApp .special .flex .inner{
	margin:10px 0 0 0;
}
#top.semnarApp .sche{
	text-align:center;
}
#top.semnarApp .sche img{
	margin:100px 0 0 0;
	width:60%;
}
#top.semnarApp .price .atten{
	width:1000px;
	margin:20px auto 0 auto;
}
#top.semnarApp .price table{
    width: 1000px;
    margin: 0 auto;
	border: 1px solid #000; /* 表全体に外枠 */
  	border-collapse: collapse !important;
}
#top.semnarApp .qa .inner{
	width:1000px;
	margin:100px auto 0 auto;
}
#top.semnarApp .qa .inner p{
    padding: 0 0 0 50px;
    font-size: 20px;
}
#top.semnarApp .qa .inner .mark{
		position:relative;
}
#top.semnarApp .qa .inner .q.mark{
	margin:0 0 20px 0;
}
#top.semnarApp .qa .inner .q.mark em{
	color:#cc20b4;
}
#top.semnarApp .qa .inner li{
	margin:0 0 50px 0;
}
#top.semnarApp .qa .inner li em{
	position:absolute;
	top: -15px;
    left: 0;
    font-size: 40px;
}
#top.semnarApp .price table td p.false{
	text-decoration: line-through;
	color:#a8a8a8;
}
#top.semnarApp .price table td .other p.false:after{
	width: 430px;
}
#top.semnarApp .price table th{
	border:1px solid black;
}
#top.semnarApp .price table th:nth-child(1){
	padding: 20px;
    font-size: 30px;
    background: #bbddf1;
}
#top.semnarApp .price table th:nth-child(2){
	padding: 20px;
    font-size: 30px;
    background: #70a7e5;
}
#top.semnarApp .price table td{
	padding:20px;
	border:1px solid black;
}
#top.semnarApp .price table td .one{
	margin:0 0 20px 0;
}
#top.semnarApp .price table td p{
	font-size:20px;
}
#top.semnarApp .price table td h5{
	font-size:25px;
	margin:0 0 20px 0;
}
#top.semnarApp .price h4{
	text-align: center;
    margin: 100px 0 80px 0;
    font-size: 30px;
	color: #940d0d;
    font-weight: bold;
}
#top.semnarApp .price h4 em{
	display:block;
	font-size:20px;
	margin:10px 0 0 0;
	color:black;
}
#top.semnarApp .place .flex{
	width:90%;
	margin:100px auto 0 auto;
}
#top.semnarApp .place .flex li{
	width:30%;
	text-align:center;
}
#top.semnarApp .place .flex li h4{
	font-size:30px;
	margin:10px 0;
}
#top.semnarApp .place .flex li img{
	width:100%;
	aspect-ratio: 1 / 1;
	object-fit:cover;
}
#top.semnarApp .special .flex .head{
	position:absolute;
	bottom:0;
	left: 0;
    padding: 30px;
    background: #313131bf;
    width: 100%;
    font-size: 20px;
	color:white;
}
#top.semnarApp .form h4{
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 20px;
    color: #d23838;
    font-weight: bold;
}
#top.semnarApp .special li .imgBox{
	position:relative;
}
#top.semnarApp .special li{
	width:30%;
	margin: 0 0 60px 0;
}
#top.semnarApp .special li img{
	width:100%;
	vertical-align:bottom;
}
#top.semnarApp section.support li{
	width:20%;
}
#top.semnarApp section.support li p{
	font-size:20px;
	text-align:center;
}
#top.semnarApp section.support li h4{
    font-size: 30px;
    text-align: center;
    margin: 30px 0 0 0;
}
#top.semnarApp section.support li img{
	width:100%;
	aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
}
#top.semnarApp section.support{
	padding:0 0 120px 0;
}
#top.semnarApp .teacher .innerBox .rightBox{
	padding:60px;
}
#top.semnarApp .teacher .rightBox p{
	font-size:15px;
	margin:0 0 10px 0;
}
#top.semnarApp .teacher .rightBox h4{
	font-size:30px;
	margin:0 0 20px 0;
}
#top.semnarApp .teacher .rightBox h4 em{
	font-size:20px;
	margin:0 0 0 20px;
}
#top.semnarApp .course .courseImg img{
	width:60%;
}
#top.semnarApp .course .flex{
	width:90%;
	margin:0 auto 100px auto;
}
#top.semnarApp .inner

#top.semnarApp form .off{
    display:none;
}
#top.semnarApp .sum h4{
    margin: 100px 0 80px 0;
    text-align: center;
    font-size: 20px;
}
#top.semnarApp .sum .sto{
    width: 90%;
    margin: 0 auto 60px auto;
}
#top.semnarApp .sum .sto li{
	padding:0 0 0 70px;
	position:relative;
	width:30%;
	border-radius:10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#top.semnarApp .sum .sto li .stoTitle{
	position:absolute;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size:20px;
	left: 20px;
    top: 20px;
    color: white;
}
#top section.sum{
	padding:80px 0;
}
#top section.sum .detailBox{
    width:800px;
    margin: 0 auto 60px auto;
    border-radius: 20px 20px 0 0;
}
#top section.sum .detailBox li{
	font-size:20px;
	list-style-type: disc;
	list-style-position: inside;
}
#top section.sum .detailBox p{
    text-align: center;
    color: white;
    padding: 20px;
    font-size: 30px;
    border-radius: 10px 10px 0 0;
}
#top section.sum .detailBox .inner{
    padding: 40px 60px;
}
#top section.sum .detailBox .inner h5{
    font-size: 20px;
    padding: 0 0 20px 0;
    margin: 0 0 30px 0;
}
#top section.sum .detailBox:nth-child(1) h5{
	border-bottom: 2px solid #99c235;
}
#top section.sum .detailBox:nth-child(2) h5{
	border-bottom: 2px solid #e987ac;
}
#top section.sum .detailBox:nth-child(3) h5{
	border-bottom: 2px solid #234d86;
}
#top section.sum .detailBox:nth-child(1) p{
	background: #99c235;
}
#top section.sum .detailBox:nth-child(2) p{
	background: #e987ac;
}
#top section.sum .detailBox:nth-child(3) p{
	background: #234d86;
}
#top section.sum .detailBox:nth-child(1){
	border: 8px solid #99c235;
}
#top section.sum .detailBox:nth-child(2){
	border: 8px solid #e987ac;
}
#top section.sum .detailBox:nth-child(3){
	border: 8px solid #234d86;
}
#top.semnarApp .sum .sto li .stoTitle em{
	margin:0 10px 0 0;
	text-orientation: upright;
}
#top.semnarApp .sum .sto li .inner{
	padding:20px;
	background:white;
	height:100%;
}
#top.semnarApp .sum .sto li img{
	width:100%;
}
#top.semnarApp .sum .sto li:nth-child(1){
	background:#99c235;
}
#top.semnarApp .sum .sto li:nth-child(2){
	background:#e987ac;
}
#top.semnarApp .sum .sto li:nth-child(3){
	background:#234d86;
}
#top.semnarApp .role a{
    color: white;
    display: inline-block;
    background: black;
    border-radius: 10px;
    padding: 5px 30px;
    border: 2px solid black;
    margin: 0 0 20px 0;
    transition: .3s;
}
#top.semnarApp .role a:hover{
	color:black;
	background:white;
}
#top.semnarApp .finalPrice{
    margin: 30px auto;
    background: white;
    border-radius: 10px;
    padding: 30px;
}
#top.semnarApp .true{
	font-weight:bold;
}
#top.semnarApp .finalPrice p{
    text-align:center;
    font-size: 20px;
}
#top.semnarApp .finalPrice p em{
    display: block;
    font-size: 15px;
}
#apFinal{
    padding:120px 20px;
}
#apFinal h2{
    font-size:25px;
    text-align: center;
}
#apFinal h2 em{
    display: block;
}

#apFinal h3{
    margin:0 0 10px 0;
}
#apFinal h3 em{
    font-size: 20px;
    margin: 0 10px 0 0;
}

#apFinal #lottie{
    width: 25%;
    margin: 0 auto;
    position: relative;
    height: 200px;
}
#apFinal #lottie svg{
    position: absolute;
    top: 0;
    left: 0;
}
#apFinal .inner{
    width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    border: 2px solid black;
    background: white;
    padding: 60px 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#apFinal .attention{
    padding: 30px;
    background: #f1f1f1;
    margin: 40px 0 0 0;
}
#apFinal .attention p{
    text-align:justify;
}
#apFinal .attention p.email{
    text-align: center;
    margin:30px 0 0 0;
    font-weight: bold;
}
.seminarAppError .detail{
    width:500px;
    margin: 30px auto;
    padding: 20px;
    background: #ececec;
    text-align: justify;
}
.seminarAppError .inner{
    text-align: center;
    margin:0 0 30px 0;
}
@media screen and ( max-width:800px ){
	#top.semnarApp .qa .inner li em{
		position: absolute;
		top: -10px;
		left: 8px;
		font-size: 30px;
	}
	#top.semnarApp .qa .inner p{
		font-size:16px;
		text-align:justify;
	}
	#top.semnarApp .qa .inner{
		width:90%;
		margin:60px auto;
	}
	#top.semnarApp form .off{
		display:none;
	}
	#main #top.semnarApp .special .flex{
		flex-direction:unset;
	}
	#main #top.semnarApp header.sub .inner .w{
		font-size:20px;
	}
	#main #top.semnarApp header .flex{
		flex-direction:unset;
	}
	#main #top.semnarApp header.sub .inner .h{
		font-size:18px;
	}
	#top.semnarApp .price .atten{
		width: 90%;
		margin: 30px auto 40px auto;
		font-size: 13px;
	}
	#top.semnarApp .price .atten p{
		margin:0 0 20px 0;
	}
	#top.semnarApp .price table td .one{
		margin:0 0 60px 0;
	}
	#top.semnarApp .price table td{
		padding:15px;
	}
	#top.semnarApp .price table td p{
		font-size:16px;
		text-align:center;
	}
	#top.semnarApp .price table td h5{
		font-size:18px;
		text-align:center;
	}
	#top.semnarApp .price table th:nth-child(1),#top.semnarApp .price table th:nth-child(2){
		padding:10px;
		font-size:20px;
	}
	#top.semnarApp .price table{
		width:95%;
	}
	#top.semnarApp .price h4{
		margin:60px auto;
		font-size:20px;
	}
	#top.semnarApp .place .flex li h4{
		font-size:25px;
	}
	#top.semnarApp .place .flex{
		flex-direction:unset;
	}
	#top.semnarApp .place .flex li{
		width:100%;
		margin:0 0 60px 0;
	}
	#top.semnarApp .sche img{
		margin:60px auto 0 auto;
		width:95%;
	}
	#top.semnarApp .special .flex .head{
		padding:15px;
	}
	#top.semnarApp .special li{
		width:100%;
	}
	#top.semnarApp section.support .flex{
		flex-direction:unset;
	}
	#top.semnarApp section.support .flex li{
		width:100%;
		margin:0 0 60px 0;;
	}
	#top.semnarApp section.support p.sub, #top.semnarApp .special h4{
    width: 90%;
    margin: 60px auto;
    font-size: 20px;
}
	#top.semnarApp .teacher .innerBox .rightBox{
		padding:30px;
	}
	#top.semnarApp .teacher .innerBox img{
		width:100%;
		clip-path:unset;
	}
	#top.semnarApp .course .courseImg img{
		width:90%;
	}
	#top.semnarApp .course .flex{
		margin:0 auto 60px auto;
	}
	#top.semnarApp .course .flex img{
		width:100%;
		margin:0 0 30px 0;
	}
	#top.semnarApp .course p{
    width: 90%;
    margin: 60px auto;
}
	#top section.sum .detailBox li{
		font-size:13px;
	}
	#top section.sum .detailBox .inner h5{
		font-size:15px;
	}
	#top section.sum .detailBox .inner{
		padding:20px 30px;
	}
	#top section.sum .detailBox p{
		padding:15px;
		font-size:20px;
	}
	#top section.sum .detailBox{
		width:100%;
	}
	#top.semnarApp .sum .detail{
    width: 90%;
    margin: 0 auto;
}
	#top.semnarApp .sum .sto,#top.semnarApp .course .flex{
		flex-direction:unset;
	}
	#top.semnarApp .sum .sto li{
		width:100%;
		margin:0 0 30px 0;
	}
	#top.semnarApp .sum h4{
		margin:60px auto;
		width:90%;
	}
	#top.semnarApp section.intro{
    	padding: 120px 0 30px 0;
	}
	#top.semnarApp .intro .innerBox{
		padding: 0;
    	font-size: 15px;
	}
	#top.semnarApp .intro .inner{
		width:90%;
		margin: 60px auto;
	}
	#top.semnarApp .intro img:nth-child(2){
		display:none;
	}
	#top.semnarApp .intro img{
		width:100%;
	}
    .seminarAppError .detail{
        width:95%;
        font-size:13px;
    }
    .seminarAppError .inner{
        text-align: justify;
        font-size:13px;
    }
    #apFinal #lottie{
        width:100%;
    }
    #apFinal .inner{
        width: 100%;
        padding: 30px 20px;
    }
    #apFinal .inner h3{
        margin:0 0 20px 0;
    }
    #apFinal .inner p{
        font-size:13px;
    }
    #apFinal .attention{
        padding:20px;
    }
}
/* seminar_app end   --------------------*/
/* re_ragi start ------------------------*/
#confirm.re_ragi .userImg img{
	transform: translate(0px, 5px);
}
#confirm.re_ragi .formBox .cv{
	margin:0;
}
/* qr_scan start -------------------------*/

#qrScanPage{
	height: 100vh;
    padding: 150px 20px;
}
#qrScanPage #lottie-success{
		height:200px;
	}
.tableNoRestBody h3,.controlButtonBody h3{
    font-size: 20px;
    margin: 0 0 20px 0;
}
.tableNoRestBody select{
    display: block;
    padding: 10px;
    width: 100%;
    margin: 10px 0;
    height: 40px;
    border: 2px solid black;
    border-radius: 10px;
}
.controlButtonBody select{
	display: block;
    padding: 10px;
    width:100%;
    margin: 10px 0;
    height: 40px;
    border: 2px solid black;
    border-radius: 10px;
	
}
.tableNoRestBody button{
	width:100%;
    padding: 5px 10px;
    border-radius: 10px;
    background: #c63939;
    color: white;
    transition: .3s;
    border: 1px solid #c63939;
}
.controlButtonBody button{
	width:100%;
	padding: 5px 10px;
    border-radius: 10px;
    background: #3d91d9;
    color: white;
    transition: .3s;
    border: 1px solid #3d91d9;
}
.controlButtonBody button:hover{
	background:white;
	color:#3d91d9;
}
.tableNoRestBody button:hover{
	background:white;
	color:#c63939;
}
.modaal-inline.tableControl .modaal-container{
	width:300px;
}
@media screen and ( max-width:800px ){
	#qrScanPage{
    padding:30px 20px;
		height:auto;
}
	.qr-result-container{
		margin:0 auto 100px auto;
	}
	#qrScanPage #lottie-success{
		height:200px;
	}
	#qrScanPage .qr-result-header{
		margin-bottom: -50px;
	}
	#qrScanPage .attendance-card{
		margin-top:-30px;
	}
}