@charset "utf-8";

body{background-color: #f2f2f2;}
a{color: #0071bc;}
a:hover,a img:hover,input[type="submit"]:hover,input[type="button"]:hover{opacity:.8;text-decoration: none;}

#head .hdwrap,
#main .content,.wrap,
#foot .copy{max-width: 800px;margin: 0 auto;padding: 0 5%;}

@media (min-width:801px){
    .pc_none{display: none;}
}
@media (max-width:800px){
    .sp_none{display: none;}
}

/* ---------------------------------------------
	共通パーツ
--------------------------------------------- */
/* ステータスバー */
.status{background: #4050a1;}
.status p{color: #fff;display: block;max-width: 800px;margin: 0 auto;padding: 0.5em 5%;}

/* パンくずリスト */
.thumb_wrap{margin-bottom: 1em;}
.thumb{height: 30px;line-height: 30px;}
.thumb li{display:inline-block;font-size: 0.875em;}
.thumb li a{display:inline-block;}
.thumb li:after{content: "";display: inline-block;margin: 0 8px;height: 6px;border-top: 1px solid #999999;border-right: 1px solid #999999;-webkit-transform: rotate(45deg);transform: rotate(45deg);vertical-align: middle;width: 6px;}
.thumb li:last-child:after{display:none;}

/* エラーテキスト */
.error{padding: 0.2em 0;color: #d30000;}

/* 強調 */
.mf_b{color: #d30000;font-size: 1.25em;font-weight: bold;}

/* 必須マーク */
.required{position: relative;}
.required::after{content: "*";color: #d30000;position: absolute;top: 0;right: -0.8em;}

/* 削除ボタン */
.dell{color: #0071bc;text-decoration: underline;}

/* ボックス */
.box1{background-color: #fff;border: 1px solid #ccc;padding: 1em;margin: 1em 0;}
.box2{background-color: #ccc;padding: 1em;margin: 1em 0;}

/* 罫線 */
hr {margin: 1em 0;border-width: 1px 0 0 0;border-style: solid;border-color: #ccc;}

/* ---------------------------------------------
	見出し
--------------------------------------------- */
.heading1{margin: 2em 0 0.5em;color: #fff;font-size: 1em;padding: 0.5em 0.8em;margin-bottom: 0.5em;background : linear-gradient(90deg, rgba(74, 157, 215, 1) 0%, rgba(7, 107, 175, 1) 100%);}

.heading1.news_ver span{background:url(../img/icon_news.png) no-repeat top left / contain;padding-left: 2em;}

.title{font-weight: bold;border-left: 4px solid;padding-left: 0.5em;margin: 2em 0 0.5em;}

.title2{background: #ccc;font-size: 1em;max-width: 800px;padding: 0.5em 0.8em;margin: 2em auto 1em;}

.heading2{margin: 2em 0 0.5em;color: #fff;font-size: 1em;padding: 0.5em 0.8em;margin-bottom: 0.5em;background : linear-gradient(90deg, rgb(74, 215, 122) 0%, rgb(7, 175, 136) 100%);}

/* ---------------------------------------------
	ボタン
--------------------------------------------- */
/* button */
.button,input[type="submit"].button,input[type="button"].button{
	background-color:#fff;border-radius:6px;border:1px solid #a0a0a0;min-width: 250px;box-sizing: border-box;
	display:inline-block;color:#555;padding:0.5em 3em;text-decoration:none;}
.button:hover,input[type="submit"].button:hover,input[type="button"].button:hover{background-color:#dfdfdf;opacity: 1;}

.button.red,input[type="submit"].button.red,input[type="button"].button.red{color: #d30000;border-color: #d30000;}

.button.return,input[type="submit"].button.return,input[type="button"].button.return{background-color: #e6f2ff;}
.button.return:hover,input[type="submit"].button.return:hover,input[type="button"].button.return:hover{background-color:#dfdfdf;opacity: 1;}

/* button2 */
.button2,input[type="submit"].button2,input[type="button"].button2{
	background : linear-gradient(179.08deg, rgba(240, 170, 63, 1) 0%, rgba(228, 88, 39, 1) 100%);border-radius : 50px;
    display:inline-block;color:#fff;font-weight: bold;padding:0.5em 3em;text-decoration:none;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.button2:hover,input[type="submit"].button2:hover,input[type="button"].button2:hover{opacity: .8;}

/* button3 */
.button3,input[type="submit"].button3,input[type="button"].button3{
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ededed 5%, #bfbfbf 100%);
	background-color:#ededed;border-radius:6px;border:1px solid #a0a0a0;
	display:inline-block;color:#555;font-size:1em;font-weight:bold;
	padding:0.5em 3em;text-decoration:none;text-shadow:0px 1px 0px #fff;}
.button3:hover,input[type="submit"].button3:hover,input[type="button"].button3:hover{background:linear-gradient(to bottom, #bfbfbf 5%, #ededed 100%);background-color:#dfdfdf;opacity: 1;}
.button3:active,input[type="submit"].button3:active,input[type="button"].button3:active{position:relative;top:1px;}

/* button_contact */
.button_contact{display: block;color: #fff;text-decoration: none;font-weight: bold;padding: 1em 0.5em;border-radius: 14px;text-align: center;background :#666;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
.button_contact span{display: inline-block;background: url(../img/icon_mail.png) no-repeat top left / contain;padding-left: 2.7em;}


/* ---------------------------------------------
	ヘッダー
--------------------------------------------- */
#main{padding-top: 70px;}
#head{width: 100%;box-sizing: border-box;background-color: #3fa2ea;position: fixed;top: 0;left: 0;z-index: 998;}
#head .hdwrap{height: 70px;display: flex;justify-content: space-between;align-items: center;}
#head h1{display: flex;align-items: center;margin-right: 1em;}
#head h1 img{max-height: 46px;vertical-align: middle;}
#head a{text-decoration: none;}

/******ハンバーガーメニュー******/
#head .navi{margin: 0;position: fixed;overflow-y: auto;top: 70px;left: 0;width: 100%;z-index: 999;background-color: #fff;text-align: center;box-shadow: 0 2px 3px rgba(0,0,0,0.1);font-weight: bold;}
#head .navi ul{display: block;}
#head .navi ul li{border-bottom: 1px solid #ccc;text-align: center;width: 100%;}
#head .navi ul li a{padding: 1em;display: block;}
#head .navi ul li.hdbutton a{font-size: 1em; color: #fff;padding: 0.5em 1em;display: inline-block;}

/******ハンバーガーメニューボタン******/
#navi_button{cursor: pointer;}
#navi_button .cp_bar,
#navi_button:before,
#navi_button:after {
    display: block;width: 30px;height: 5px;content: '';-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;border-radius: 5px;background-color: #fff;}
#navi_button .cp_bar{position: relative;margin: 5px 0;}
#navi_button.cp_bar_on .cp_bar {transform: scale(0);}
#navi_button.cp_bar_on:before {transform: translateY(10px) rotate(135deg);}
#navi_button.cp_bar_on:after {transform: translateY(-10px) rotate(-135deg);}

/* ---------------------------------------------
	フッター
--------------------------------------------- */
#foot{color: #888;padding: 0.2em;margin-top: 2em;}
#foot .copy{font-size: 0.75em;text-align: center;}


/* ---------------------------------------------
	入力フォーム
--------------------------------------------- */
/* 基本スタイル */
input,textarea,select{font-size: 16px;color: #4d4d4d;font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
input[type="button"],input[type="submit"]{padding: 0.1em 0.5em;font-size: 1em;}
label{cursor: pointer;}
form .auto{width: auto;}
form .short{width: 5em;}
form .middle{width: 50%;}
form .long{width: 100%;}

/* チェックボックス */
.checkbox input[type="checkbox"]{display: none;}
.checkbox label{display:inline-block;line-height: 2;}
.checkbox label span{padding-left: 20px;position:relative;margin-right: 0.5px;}
.checkbox label span::before{
    content: "";display: block;position: absolute;top: 2px;left: 0;
    width: 15px;height: 15px;border: 1px solid #999;border-radius: 4px;}
.checkbox input[type="checkbox"]:checked + span{color: #0171bd;}
.checkbox input[type="checkbox"]:checked + span::after{
    content: "";display: block;position: absolute;top: -3px;left: 5px;
    width: 7px;height: 14px;transform: rotate(40deg);border-bottom: 3px solid #0171bd;border-right: 3px solid #0171bd;}

/* チェックボックス・ラジオボタン ボタン表示ver */
.check_button{font-size: 1em;}
.check_button>p{display: inline;}
.check_button input[type="checkbox"],.check_button input[type="radio"]{display: none;}
.check_button label{display:inline-block;margin-bottom: 1em;margin-right: 0.5em;}
.check_button label span{position:relative;display: inline-block;padding: 1em;}
.check_button label span::before{
    content: "";display: block;position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;border: 1px solid #999;border-radius: 4px;}
.check_button input[type="checkbox"]:checked + span,
.check_button input[type="radio"]:checked + span{color: #0171bd;background: #fff;}
.check_button input[type="checkbox"]:checked + span::before,
.check_button input[type="radio"]:checked + span::before{border: 1px solid #0171bd;}
@media (max-width:800px){
    .check_button{font-size: 0.75em;}
}

.check_c{position:relative;display: inline-block;padding: 1em;color: #0171bd;background: #fff;}


/* ラジオボタン */
.r_box input[type="radio"]{display: none;}
.r_box label{display:inline-block;line-height: 2;}
.r_box label span{padding-left: 20px;position:relative;margin-right: 0.5px;}
.r_box label span::before{content: "";display: block;position: absolute;top: 2px;left: 0;width: 15px;height: 15px;border: 1px solid #999;border-radius: 50%;}
.r_box input[type="radio"]:checked + span{color: #0171bd;}
.r_box input[type="radio"]:checked + span::after{content: "";display: block;position: absolute;top: 5px;left: 3px;width: 11px;height: 11px;background: #0171bd;border-radius: 50%;}

/* チェックボックス（ラジオボタン）横並び */
.check_row{margin: 1em 0;}
.check_row p{display: inline;}
.check_row label{margin-right: 1em;}

/* チェックボックス（ラジオボタン）縦並び */
.check_column{margin: 1em 0;}
.check_column p{margin-bottom: 0.5em;}
.check_column label{margin-right: 1em;}

/* テキストフォーム flex */
.f_list{margin: 1em 0;}
.f_list>li{padding: 0.5em 0;display: flex;}
.f_list li>p{flex-basis: 7.5em;flex-shrink: 0;display: flex;align-items: center;}
.f_list li>p span{border-left: 4px solid;padding-left: 0.5em;font-weight: bold;}
.f_list li>div{flex-grow: 1}

/* テキストフォーム 縦並び */
.f_list_c{margin: 1em 0;}
.f_list_c>li{padding: 0.5em 0;}
.f_list_c li>p{margin-bottom: 0.3em;font-weight: bold;}
.f_list_c li>p span{border-left: 4px solid;padding-left: 0.5em;}

/* テキストフォーム　box */
.f_box{margin: 1em 0;}
.f_box>div{margin-bottom: 1em;}

/* テキスト・チェックボックス混合 アコーディオンメニュー */
/*
.ct_wrap dt{background: #c6dce4 url(../img/dt_back1.png) no-repeat center right 0.5em / 18px;padding: 0.2em 0.5em;margin-top: 0.5em;line-height: 2;}
.ct_wrap dt.open{background-image: url(../img/dt_back2.png);}
.ct_wrap dt label{display: block;}
.ct_wrap dd{padding: 0 0.5em 0.5em;}
.ct_wrap .f_list li>p{flex-basis: 4.5em;margin: 0;}
.ct_wrap .f_list li>p span{border-color: #aaa;font-weight: normal;}
*/

/* インデント */
.r_indent{padding-left: 2em;}
.r_indent.check_row,.r_indent.check_column,.r_indent.f_list{margin: 0.8em 0;}

/* ---------------------------------------------
	生徒リスト等
--------------------------------------------- */
/* 横並びリスト */
.m_list{background-color: #fff;border: 1px solid #ccc;padding: 0.5em 1em;}
.m_list li{display: flex;justify-content: space-between;padding: 0.5em 0;border-bottom: 1px solid #cbcbcb;transition: .2s;}
.m_list li:last-child{border: none;}

/* 横並びリスト（スマホでカラム落ち） */
.r_list{background-color: #fff;border: 1px solid #ccc;padding: 0.5em 1em;}
.r_list li{display: flex;justify-content: space-between;padding: 0.5em 0;border-bottom: 1px solid #cbcbcb;}
.r_list li:last-child{border: none;}
.r_list li p:first-child span{width: 6.5em;display: inline-block;}
@media (max-width:800px){
    .r_list li{display: block;}
    .r_list li p:last-child{text-align: right;}
    .r_list li>span.dell{display: block;width: 3em;margin: 0 0 0 auto;}
}

/* 学習結果リスト横並びリスト（スマホでカラム落ち） */
.rs_list{background-color: #fff;border: 1px solid #ccc;padding: 0.5em 1em;}
.rs_list li{justify-content: space-between;padding: 0.5em 0;border-bottom: 1px solid #cbcbcb;}
.rs_list li:last-child{border: none;}
.rs_list li p:first-child span{width: 6.5em;display: inline-block;}
@media (max-width:800px){
    .rs_list li{display: block;}
    .rs_list li p:last-child{text-align: right;}
    .rs_list li>span.dell{display: block;width: 3em;margin: 0 0 0 auto;}
}

/* 背景色 */
.r_list li.li_new,.m_list li.li_new,.rs_list li.li_new,{background: #ffe4c4;}

/* ---------------------------------------------
	メニューボタン
--------------------------------------------- */
.menu1 li{margin-bottom: 1em;}
.menu1 a{display: block;color: #fff;text-decoration: none;font-weight: bold;background: #ccc;padding: 0.5em;border-radius: 14px;font-size: 1.2em;}
.menu1 a p{border: 1px solid rgba(255,255,255,0.5);padding: 0.5em;border-radius: 10px;text-align: center;}
.menu1 a span{display: inline-block;background: no-repeat top left / contain;padding: 0.5em 0;}
.menu1 a.m_report{background : linear-gradient(179.08deg, rgba(240, 170, 63, 1) 0%, rgba(228, 88, 39, 1) 100%);}
.menu1 a.m_report span{background-image: url(../img/icon_report.png);padding-left: 3.3em;}
.menu1 a.m_bbs{background : linear-gradient(179.08deg, rgba(74, 157, 215, 1) 0%, rgba(7, 107, 175, 1) 100%);}
.menu1 a.m_bbs span{background-image: url(../img/icon_todo.png);padding-left: 2em;}

.menu2 li{margin-bottom: 1em;}
.menu2 a{display: block;background: #fff;padding: 1em 0.5em 0.5em;text-align: center;color: #4d4d4d;text-decoration: none;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
.menu2 a p{margin-bottom: 0.5em;}
.menu2 a.m_view img{width: 64px;}
.menu2 a.m_attendance img{width: 67px;}

.menu3 li{padding: 0.5em 0;border-bottom: 1px solid #cbcbcb;}
.menu3 li:first-child{border-top: 1px solid #cbcbcb;}
.menu3 a{text-decoration: none;color: #4d4d4d;background: no-repeat top left / contain;padding-left: 2.2em;}
.menu3 a:hover{text-decoration: underline;}
.menu3 a.m_staff{background-image: url(../img/icon_staff.png);}
.menu3 a.m_guest{background-image: url(../img/icon_guest.png);background-position: top left 0.2em;}
.menu3 a.m_account{background-image: url(../img/icon_account.png);}

.menu4 li{margin-bottom: 1em;}
.menu4 a{display: block;color: #7b7b7b;text-decoration: none;font-weight: bold;background: #fff;padding: 1em;border-radius: 14px;font-size: 1.2em;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
.menu4 a span{display: inline-block;background: no-repeat top left / contain;padding: 0.5em 0;}
.menu4 a.m_news span{background-image: url(../img/icon_edit.png);padding-left: 3.5em;}
.menu4 a.m_img span{background-image: url(../img/icon_img.png);padding-left: 3.5em;}
.menu4 a.m_list span{background-image: url(../img/icon_view3.png);background-position: top left 0.25em;padding-left: 3.5em;}

.menu5{display: flex;justify-content: space-between;}
.menu5 li{margin-bottom: 1em;flex-basis: calc(50% - 0.5em);font-size: 0.875em;}
.menu5 a{display: block;background: #fff;padding: 1em 0.5em 0.5em;text-align: center;color: #4d4d4d;font-weight: bold;text-decoration: none;border-radius: 14px;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
.menu5 a p{margin-bottom: 0.5em;}
.menu5 a.m_view2 img{width: 75px;}
.menu5 a.m_clip img{width: 62px;}
.menu5 a.m_edit img{width: 62px;}
.menu5 a.m_image p{padding: 3px 0 2px 0;}.menu5 a.m_image img{width: 69px;}


/* ---------------------------------------------
	end_alert.js
--------------------------------------------- */
.end_alert_wrap{background: rgba(0,0,0,0.5);width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 1000;padding: 1em;box-sizing: border-box;cursor: pointer;}
.end_alert{background: #fff;padding: 1em;border-radius: 14px;box-shadow: 0 0 3px rgba(0,0,0,0.3);position: relative;}
.end_alert::after{content: "閉じる";color: #fff;background: #000;display: inline-block;border-radius: 12px;width: 100%;text-align: center;font-size: 1em;position: absolute;bottom: -2.3em;right: 0;padding: 0.2em 0;}

.room-logo-wrap {
  text-align: center;
  margin: 24px auto 20px;
}

.room-logo {
  display: block;
  width: 70%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .room-logo-wrap {
    margin: 20px auto 16px;
    padding: 0 20px;
  }

  .room-logo {
    width: 100%;
    max-width: 380px;
  }
}