/* Global styles */

	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}

	html {
		font-size: 62.5%;
		scroll-behavior: smooth;
	}

    body {
        background-size: cover;
        background-color: #efefef;
    	color: #545454;
    	font-family: 'Noto Sans JP', sans-serif;
    	font-weight:400;
    	letter-spacing:1%;
    }
    h1{
        color:#545454;
    	font-size: 1.8rem;
    	font-weight:500;
    	text-align:left;
    	margin:10px 0 0 10px;
    	padding:0;
    }
    h2{
    	display:inline-block;
    	font-size: 4rem;
    	font-weight:400;
    	margin:20px 0 20px 50px;
    	float:left;
    }
    h3{
        font-size: 2.4rem;
        font-weight: 500;
    }
    h4{
    	font-size: 1.8rem;
    	font-weight: 500;
    }
    p{
    	text-align:center;
    }
    img{
    	pointer-events: none;
    }
    a{
    	color:#db9439;
    	font-size:16px;
    	font-weight:400;
    	text-decoration:none;
    	transition: color 0.3s ease;
    	position: relative;
    }
    a:hover{
    	color: #bc6101;
    	text-decoration: none;
    }
    a::after {
    	content: "";
    	position: absolute;
    	left: 0;
    	bottom: -1.5px;
    	width: 100%;
    	height: 1.1px;
    	background: currentColor;
    	opacity: 1;
    	transition: opacity 0.3s ease;
    }
    a:hover::after {
    	opacity: 0;
    }
    i{
    	margin:0;
    	padding:0;
    }
    .sm{
    	display:none;
    }
    #main{
    	height:100vh;
    }
    #content{
    	width:calc(100%-220px);
    	padding-top:90px;
    	padding-left:220px;
    	transition: 0.5s ease;
    }
    #content.short{
    	width:calc(100%-30px);
    	padding-left:30px;
    }
    .clear-div{
    	clear:both;
    }
    button, input[type="button"], input[type="submit"]{
        cursor:pointer;
        padding:12px 30px;
        margin-bottom:15px;
        border-radius:20px;
        border:none;
        color:#ffffff;
        background-color:#efa84c;
        font-size:15px;
        font-weight:500;
        letter-spacing: -1, 5%;
        transition: background-color 0.3s ease-out;
    }
    button:hover, input[type="button"]:hover, input[type="submit"]:hover{
        background-color: #bc6101;
        transition: background-color 0.3s ease-out;
        
    }
    input[type="checkbox"]{
    	margin:5px;
        width:18px;
        height:18px;
    }
    
    input[type="text"], input[type="password"], input[type="number"], input[type="time"]{
    	border:none;
    	border-radius:6px;
    	/*background-color:#fcfcfc;*/
    	background-color:#ffffff;
    	box-shadow:5px 5px 5px #c0c0c0;
    	padding:8px 3px;
    	text-align:left;
    }
    input::placeholder{
    	color: #b2b2b2;
    }
    textarea{
    	vertical-align:top;
    	border-radius:10px;
    	border:none;
    	/*background-color:#fcfcfc;*/
    	background-color:#ffffff;
    	box-shadow:5px 5px 5px #c0c0c0;
    	padding:4px 2px;
    	resize: none;
    }
    
    select{
    	border-radius:6px;
    	border:none;
    	background-color:#ffffff;
    	box-shadow:5px 5px 5px #c0c0c0;
    	font-size:16px;
    	padding:8px 2px;
    	margin:0 2px;
    }
    
    table{
        border-radius: 16px;
    }
    table tr:first-child>*:first-child{
        border-radius: 16px 0 0 0;
    }
    table tr:first-child>*:last-child{
    	border-radius:0 16px 0 0;
    }
    table tr:last-child>*:first-child{
    	border-radius:0 0 0 16px;
    }
    table tr:last-child>*:last-child{
    	border-radius:0 0 16px 0;
    }
    th{
    	text-align:center;
    }
    td{
    	text-align:left;
    	overflow-wrap: break-word;
    }
    
	.form-div{
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin:20px auto;
		font-size: 1.4rem;
	}
	.form-div form{
		display: flex;
		flex-direction: column;
		aling-items: center;
		gap: 20px;
	}
	.form-div p{
		margin:20px 0;
		font-size:18px;
		text-align:left;
		line-height:40px;
	}
	
	.form-div input{
		font-size:18px;
		padding:12px;
	}
	
	#login-left{
		float:left;
		width: 48vw;
	}
	#login-right{
		float:right;
		width: 50vw;
		height:100vh;
		background-size:cover;
		background-position:center;
		background-repeat: no-repeat;
	}

    .message{
    	font-size:18px;
    	text-align:center;
        line-height:1.5em;
    	margin:1em;
    	clear:both;
    }
    .title-span{
    	font-size:110%;
    	color:#6666bb;
    	font-weight:700;
    }
    
    .small-span{
    	font-size:80%;
    	font-weight:400;
    }
    
    #header{
    	margin:10px;
    	padding:0;
    	position:fixed;
    	transition: ease 0.5s;
    }
    #header img{
    	display:block;
    	width:200px;
    }
	.col70{
		width:70%;
		float:left;
	}
	.col30{
		width:30%;
		float:left;
		justify-content: center;
	}
    
	.s-table, .a-table, .b-table{
		width:94%;
		min-width:600px;
		margin:30px 20px;
		background-color:#ffffff;
		border-collapse: collapse;
		font-size:18px;
		padding:0;
		box-shadow:5px 5px 5px #c0c0c0;
	}
	.s-table tr:nth-child(even), .u-table tr:nth-child(even), .a-table td:nth-child(odd){
		background-color:#fbfbfb;
	}
	.s-table tr:nth-child(odd), .u-table tr:nth-child(odd){
		background-color:#eff2f2;
	}
	
	.s-table th, .a-table th, .b-table th{
		/*background:linear-gradient(135deg, #dbefc3,#c9dab4);*/
		background-color:#dbefc3;
		text-align:center; 
		padding:20px 0px;
		font-weight:400;
	}
	
	.s-table .th-title{
		font-size:18px;
		font-weight:500;
		background:#fbfbfb;
		border-radius:20px 20px 0 0;
	}
	
	.s-table td, .a-table td{
		text-align:left;
		padding:10px 0px 10px 8px;
		border-top:1px solid #efefef;
		font-size:16px;
	}
	.s-table td:first-child, .a-table td:first-child{
		text-align:right;
	}
	.s-table input[type="text"], a-table input[type="text"]{
		width:90%;
		margin:12px auto;
		padding:8px 2px;
	}
	.s-table .center td{
		text-align:center;
	}
	.s-table .day-th{
		line-height:1.1em;
		background-color: #e5f4d2;
		font-size:90%;
	}
	.divider{
		border-left:1px solid #efefef;
	}
	.b-table{
		table-layout:fixed;
	}
	.b-table td{
		font-size:14px;
		text-align:left;
		padding:10px 6px 12px 6px;
		border:solid 1px #efefef;
		vertical-align: top;
	}
	
	.th-icon{
		width:180px;
		margin:0 auto;
	}	
	.th-icon img{
		width:40px;
		float:left;
	}
	.th-icon p{
		margin:0;
		padding-top:6px;
	}
	.calendar-div{
		margin:30px 10px;
		float:left;
		background-color:#fff;
		border-radius:20px;
	}
	
	.c-table{
		width:320px;
	    margin:10px auto;
	    padding:8px 20px;
	    table-layout:fixed;
	    background-color:#fff;
		border:none;
		border-collapse:separate;
		border-spacing: 2px 15px;
	}
	.c-table b{
		font-weight:500;
	}
		
	.c-table tr th{
		padding-top:0px;
		height:20px;
		font-size:16px;
		font-weight:500;
		text-align:left;
		text-indent:20px;
	}
	
	.c-table tr td{
		position:relative;
		padding:6px;
		text-align:center;
		font-size:14px;
		border-radius:50%;
	}
	
	.week-tr{
		color:#a0a0a0;
	}
	.c-table td a{
		display:block;
		color:#545454;
		text-decoration:none;
	}
	.ya{
		font-weight:500;
		font-size:1.1em;
		color:#545454;
	}
	
	.c-table td a:hover{
		color:#a0a0a0;
		text-decoration:underline;
	}
	
    .t5n{
        border-bottom: 2px solid #a0a6b2;
	}
    .tback{
    	background: #e6e9f3;
	}
    .highlights, .a-table .highlights td{
    	background-color: #add8e6;
    }
    .r3border tr td:nth-of-type(3){
    	border-right: 2px solid #a0a6b2;
    }
    .d-table{
    	display:inline-block;
    	width:480px;
    	table-layout:fixed;
    	text-align:center;
    	margin:10px 20px;
    	padding:20px 10px 0 20px;
    	font-size:18px;
	}
	.d-table td{
		padding:2px 18px;
	}
	
	.d-table td b{
		color:#545454;
		font-weight:500;
	}
	.d-table td a{
		font-size:18px;
	}
	.p-table{
		display:inline-block;
		margin:35px 24px;
		border:none;
		float:left;
		font-size:20px;
	}
	.p-table td{
		padding:2px 20px;
	}
	.u-table{
		margin:20px auto;
		background-color:#fbfbfb;
		border-collapse: collapse;
		font-size:16px;
	}
	.u-table th{
		background-color: #dbefc3;
		color:#fff;
		text-align:center;
		padding:10px 24px;
	}
	.u-table td{
		padding:10px 18px;
	}
	.u-table td:first-child{
		background:#efefef
		font-weight:500;
	}	
	
	.a-table .t-table td{
		background:transparent;
	}
	
	.a-table textarea{
		width:92%;
		text-align:left;
		text-indent:0.5em;
	}
	.disp-none textarea{
		display:none;
	}
	
	.t-table{
		width:100%;
		text-align:left;
		border:none;
		background:transparent;
		margin:0;
		padding:0;
	}
	
	.t-table td{
		border:none;
	}
	
	.attend-p{
		font-size:80%;
		text-align:left;
		margin:0;
		padding:0;
	}
	
	.sun{
		color:#e96969;
	}
	.sat{
		color:#6969e9;
	}
	
	.block{
		position:flex;
		display:inline-block;
		width:20px;
		height:20px;
		margin:0;
		border-radius:4px;
	}
	
	.tsu{
		background:linear-gradient(135deg, #f0fbff 10%, #cee3ef);
	}
	.zai{
		background:linear-gradient(135deg, #fac2d2, #fda4bd);
	}
	.jishu{
		background:linear-gradient(135deg, #ffffc2, #ffdbad);
	}
	.kena{
		background:linear-gradient(135deg, #f9f9f9, #a0a0a0);
	}
	.nashi{
		background:linear-gradient(135deg, #ffffff, #ffffff);
	}
	
	.blue-button, .pink-button, .gray-button{
		display:inline-block;
		margin:10px;
		padding:10px 20px;
		color:#fff;
		text-align:center;
		border:none;
		border-radius:20px;
	}
	.blue-button{
		background:linear-gradient(135deg, #d0ebff 10%, #b3d0e1);
	}
	.blue-button:hover{
		background:#87a3c4;
	}
	.pink-button{
		background:linear-gradient(135deg, #fac2d2,#fda4bd);
	}
	.pink-button:hover{
		background:#cf8399;
	}
	.gray-button{
		background:linear-gradient(135deg, #d9d9d9,#c0c0c0);
	}
	.gray-button:hover{
		background:#a3a3a3;
	}
	
	.caution{
		color:#b91919;
	}
	.dcol{
		text-align:center;
	}
	.detail{
		text-align:left;
		font-size:80%;
		color:#545454;
		white-space: pre-wrap;
		margin:0 0.5em;
	}
    .mbr{
	    display:none;
	}
	.disp-none{
		display:none;
	}
	#user-wrapper{
		width:100%;
	    margin:30px;
	    clear:both;
	}
	.user-div{
		position:relative;
		display:inline-block;
		width:130px;
		margin:20px;
		padding:0 10px 20px 10px;
		background-color:#fbfbfb;
		color:#545454;
		text-decoration:none;
		text-align:center;
		line-height:2em;
		border-radius:20px;
		box-shadow:5px 5px 5px #c0c0c0;
	}
	
	.user-div:hover{
		background: linear-gradient(135deg, #c4eeb8, #ffffc2);
		cursor:pointer;
	}
	
	.circle-icon{
		position:relative;
		width:64px;
		height:64px;
		font-size:36px;
		text-align:center;
		border-radius:42px;
		top:-24px;
		left:22%;
		padding:10px;
		background-color:#fefefe;
		box-shadow:0 0 5px #c0c0c0;
		z-index:5;
	}
	.middle-icon{
		position:absolute;
		left:46%;
		top:-24px;"
	}
	
	.info-dl{
		width:90%;
		max-width:900px;
		margin:30px 30px 60px 30px;
		font-weight:400;
		clear:both;
	}
	
	.info-dl dt{
		position:relative;
		padding:42px 0 12px 0;
		font-size:18px;
		background: linear-gradient(135deg, #c4eeb8, #ffffc2);
		color:#545454;
		text-align:center;
		border-radius:20px 20px 0 0;
		z-index:5;
	}
	.info-dl dd{
		background:#fbfbfb;
		margin:0;
		padding:10px 10px;
		font-size:20px;
		border-radius:0 0 20px 20px;
	}
	.info-dl dd p{
		margin:10px 12px;
		font-size:16px;
		text-align:left;
	}

	.info-dl dd .gray-p{
		margin:12px 10px;
		padding:8px 10px;
		background:#efefef;
		font-size:14px;
		border-radius:10px;
		text-align:left;
	}
	
	.info-dl dd button{
		display:block;
		margin:10px auto;
	}
	
	#line-container{
		display:flex;
		flex-wrap:wrap;
	}
	
	#line-container .info-dl{
		width:480px;
	}
	
	#line-container .info-dl dt{
		padding:18px 0;
		font-size:20px;
	}
	
	.gray-p{
		margin:8px 10px;
		padding:6px 10px;
		background-color:#efefef;
		font-size:14px;
		border-radius:10px;
		text-align:left;
	}

	.orange-p{
		margin:8px 20px 8px 6px;
		padding:8px 10px;
		background-color:#ffe9d3;
		color:#9d5100;
		font-size:14px;
		text-align:left;
		border-radius:10px;
	}
	.orange-text{
		color:#9d5100;
		font-weight:500;
		text-align:left;
	}
	
	.info-dl dd .gray-text, .gray-text{
		color:#a0a0a0;
		font-size:14px;
		font-weight:300;
		text-align:left;
	}
	
	.info-dl img{
		width:30px;
		padding:2px;
		float:left;
	}
	
	.t-table img{
		width:24px;
		padding:2px;
		float:left;
	}
	.state-wrapper{
		display:flex;
		align-items:center;
		min-height:4em;
		min-width:600px;
		margin:30px 50px 30px 20px;
		padding:24px 50px;
		border-radius:20px;
		background-color:#fbfbfb;
		box-shadow:5px 5px 5px #c0c0c0;	
		text-align:left;
		font-size:16px;
	}
	
	.state-wrapper2{
		display:flex;
		align-items:center;
		height:40px;
		margin:0px 20px 30px 20px;
		padding:8px 10px;
		border-radius:20px;
		background-color:#eff2f2;
		text-align:left;
		font-size:14px;
	}

	.button-wrapper{
		position:relative;
		margin:20px 60px;
		float:right;
	}

	.button-wrapper button .button-wrapper input[type="button"]{
		display:block;
		margin-left:auto;
	}
	
	.button-p{
		width:84%;
		max-width:360px;
		margin-left:30px;
	}
	
	.search-div{
		max-width:480px;
		margin:30px 40px;
	}
	
	.search-div p{
		margin:30px 0;
		font-size:18px;
		text-align:left;
		line-height:30px;
	}
	.schedule-container, .create-container{
		margin:6px 2px;
		display:flex;
		align-items:center;
		text-align:left;
	}
	
	.attend-container{
		margin:0px 2px;
		display:flex;
		align-items:center;
		text-align:left;
	}
	
	.schedule-item:nth-child(1){
		width:20px;
		margin:6px 8px;
	}
	.schedule-item:nth-child(2){
		max-width:20%;
		width:70px;
	}
	.schedule-item:nth-child(3){
		width:20px;
		margin:8px 4px;
	}
	.schedule-item:nth-child(4){
		margin-left:6px;
	}
	.schedule-item:nth-child(5){
		margin-left:auto;
		margin-right:10px;
		width:24px;
	}
	.schedule-item:nth-child(6){
		margin-right:6px;
		font-size:16px;
	}

	.create-item:nth-child(1){
		width:20%;
		max-width:80px;
		margin-right:10px;
	}
	.create-item:nth-child(2){
		width:80%;
	}
	.note{
		margin:10px 4px;
		font-size:80%;
	}
	.lecture-container{
		margin:6px 2px;
		display:flex;
		align-items: center;
		text-align:left;
	}
	.lecture-item:nth-child(1){
		padding-right:6px;
	}
	.lecture-item:nth-child(2){
		width:36px;
		margin-left:auto;
	}
	.lecture-item:nth-child(3){
		width:110px;
		padding-left:5px;
	}
	.lecture-detail{
		text-align:left;
		font-size:14px;
		padding:6px;
	}
	.url{
		font-size:12px;
		margin-left:1em;
	}

	.parent-td{
		position:relative;
		border-left:1px dashed #efefef;
		cursor:pointer;
	}
	.parent-td .color-block{
		position:absolute;
		top:50%;
		transform: translate(0, -50%);
		left:8%;
		max-width:20px;
		width:84%;
	}
	
	.click-tips{
		position:absolute;
		display:block;
		top:-80px;
		left:-30px;
		width:150px;
		padding:10px;
		background-color:#fbfbfb;
		text-align:left;
		font-size:14px;
		border-radius:10px;
		box-shadow:5px 5px 5px #c0c0c0;	
		z-index:20;
	}
	.hide{
		display:none;
	}
	.name-p{
		font-size:16px;
		font-weight:500;
		text-align:left;
		text-indent:5px;
	}
	.time-p{
		text-align:left;
		text-indent:5px;
	}
	
	.cancel-button{
		position:absolute;
		top:4px;
		left:120px;
		width:24px;
		height:24px;
		font-size:14px;
		font-weight:500;
		text-align:center;
		padding:2px;
		background-color:#eff2f2;
		border-radius:3px;
		z-index:30;
		cursor:pointer;
	}
	.cancel-button:hover{
		opacity:0.7;
	}
	
	.changeTd{
		text-decoration-line: underline;
		text-decoration-color:#ffd970;
		text-underline-offset:2px;
		text-decoration-thickness:3px;
	}
	
	.container{
		display:flex;
		align-items:center;
	}
	
	.address-div{
		background-color:#ffffff;
		border-radius:30px;
		margin:30px 20px;
		padding:30px;
		text-align:left;
		font-size:18px;
		line-height:1.6em;
	}
	
	#g_navi{
		background: #6a6a6a;
		top:90px;
		width:200px;
		min-height:calc(100vh-90px);
		border-radius:0 30px 30px 0;
		position:fixed;
		white-space:nowrap;
		overflow-x:hidden;
		z-index:10;
		transition: ease 0.5s;
    }
    
    #g_navi img, #h_navi img{
		width:24px;
		height:24px;
		padding-right:5px;
		vertical-align:top;
    }
    
    #g_navi ul{
		margin:0 auto;
		padding:10px 16px 10px 0;
		list-style-type: none;
		font-size:16px;
		color: #fff;
    }
	#g_navi ul li span{
		display:block;
		padding:12px 0px 12px 24px;
		text-align: left;
		font-weight:300;
	}

	#g_navi ul li a{
		display: block;
		padding: 12px 0px 12px 24px;
		color: #fff;
		font-weight:300;
		text-align: left;
		text-decoration: none;
	}
	#g_navi ul li a:hover {
		color: #707070;
		background-color: #fefefe;
		border-radius:0 30px 30px 0;
	}
	#g_navi p{
		padding:10px;
		color: #fff;
		font-size:10px;
		text-align:center;
	}
	
	#header.short{
		opacity:0;
	}
	
	#g_navi.short{
    	width:25px;
    }

	#menu-button{
		display:block;
		position:fixed;
		width:20px;
		height:90px;
		background-color:#969696;
		border-radius:30px 0 0 30px;
		top:420px;
		left:180px;
		z-index:15;
		cursor:pointer;
		transition: ease 0.5s;
	}
	#menu-button:hover{
		background-color:#cccccc;
	}
	
	#menu-button.short{
		left:5px;
	}
	.arrow{
		position:relative;
		display:inline-block;
		width:20px;
		height:40px;
	}
	.arrow::before, .arrow::after{
		content:"";
		position: absolute;
		top:40px;
		left:8px;
		width:12px;
		height:2px;
		border-radius: 9999px;
		background-color: #fff;
		transform-origin: 0px 50%;
		z-index:20;
	}
	.arrow::before{
		transform: rotate(45deg);
	}
	.arrow::after{
		transform: rotate(-45deg);
	}
	
	#menu-button.short .arrow::before, #menu-button.short .arrow::after{
		left:18px;
	}
	
	#menu-button.short .arrow::before{
		transform: rotate(-135deg);
	}
	#menu-button.short .arrow::after{
		transform: rotate(135deg);
	}
	
	#h_navi{
		position:absolute;
		top:0;
		width:100%;
		height:60px;
		background: #4c4c4c;
		border-radius:0 0 20px 0;
		z-index:10;
	}
	#h_navi ul{
		display:none;
		width:220px;
		margin-top:60px;
		padding:10px 16px 10px 0;
		list-style-type: none;
		background: #6a6a6a;
		border-radius:0 20px 20px 0;
		font-size:16px;
    }
	#h_navi ul li a{
		display: block;
		padding: 10px;
		color: #fff;
		font-weight:300;
		text-align: left;
		text-decoration: none;
	}
	#h_navi ul li a:hover {
		color: #707070;
		background-color: #fefefe;
		border-radius:0 30px 30px 0;
	}
	#h_navi ul span{
		display:block;
		color: #fff;
		padding:14px 0px 14px 24px;
		text-align: left;
		font-weight:300;
	}
	
	.ham{
		position:absolute;
		width:60px;
		height:60px;
		margin:0 0 0 auto;
		background: #6a6a6a;
		border-radius:0 0 20px 0;
		cursor:pointer;
	}
	
	.ham span{
		position:absolute;
		left:15px;
		width:30px;
		height:4px;
		background:#fcfcfc;
		border-radius:10px;
		transition: ease 0.5s;
	}
	
	.ham span:nth-of-type(1){
		top:16px;
	}
	.ham span:nth-of-type(2){
		top:28px;
	}
	.ham span:nth-of-type(3){
		bottom:16px;
	}
	.close span:nth-of-type(1){
		transform: rotate(45deg);
		top: 28px;
	}
	.close span:nth-of-type(2){
		opacity: 0;
	}
	.close span:nth-of-type(3){
		transform: rotate(-45deg);
		top: 28px;
	}
	
	#g_navi ul li a::after, #h_navi ul li a::after, #user-wrapper a::after, .c-table a::after{
		display:none;
	}
	
	
	@media screen and (max-width:768px) {
		#content{
    		width:100%;
    		padding-left:0;
    		padding-top:60px;
    	}
    	#menu-button{
    		display:none;
    	}
		.pc{
			display:none;
		}
		.sm{
			display:block;
		}
		#login-left{
			width:100%;
		}
		#login-right{
			display:none;
		}
		.form-div{
			width:98%;
		}
		.col70{
			width:100%;
		}
		.col30{
			width:100%;
		}
		.mbr{
			display:block;
		}
		.s-table td:first-child{
			text-align:center;
			padding:0
		}
		.detail{
			display:none;
		}
		.s-table{
			font-size: 16px;
		}
		.s-manual li{
			margin-left:12px;
		}
		.state-wrapper{
			margin:30px 10px 30px 10px;
			padding:24px 10px;
		}
		.dcol{
			font-size:80%;
		}
	}
}