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

.pcHidden{ display:none;}


/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body {margin:0; padding:0; font-size:90%}
#wrap{ width:950px; margin:0 auto;}


/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea { padding:2.5% 0;}
#headerAreaLogo { float:left; width:50%;}
#headerArea h1{}
#headerLink { float:right; width:50%;}
#headerLink ul{text-align:right;}
#headerLink li{ display:inline; margin:0 0 0 10px;}


/*----------------------------------------------------------------------------
 ***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#gnavi{ padding-bottom:2%;}
#gnavi li{width:192px; float:left;}
#gnavi li.lastCh{ width:182px;}
#gnavi li a{
	display:block;
	width:130px;
	padding:4px 0 0 50px;
	border:#DDDDDD solid 1px;
	height:51px;
	line-height:50px;
	font-size:14px;
	font-weight:bold; color:#333;
	background:url(../../img/app/ico03.png) 20px 17px no-repeat;
}
#gnavi li.lastCh a{ width:130px;}
#gnavi li a:hover{ background-color:#FFE6F4;}


/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea { }
#contentsAreaInner{}


/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection {}
.mainSectionInner {}



/*----------------------------------------------------------------------------
 ***                                                              rightsection
----------------------------------------------------------------------------*/
.rightSection {}
.rightSectionInner {}


/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea { padding:1% 0; border-top:#DBDBDB 16px solid;}
#footerAreaInner {  margin:0 auto;}
#footerAreaLogo { float:left; width:15%;}
#footerAreaLogo img{ padding-top:3%;}
#footerAreaLink1 { float:left; width:23%;}
#footerAreaLink2 { float:left; width: 17%;}
#footerAreaLink2 ul{ padding:1em 0;}
#footerAreaLink2 li{ background:url(../../img/app/icon_main06.png) left 50% no-repeat; padding:1% 0 1% 10%; font-size:80%; line-height:1.5em;}
#footerAreaLink2 li.imgLi{ background:none; padding:0; float:left;}
#footerCopyright{ float:right; width:34%;}
#footerCopyright p{font-size:75%; text-align:right; padding-top:5%;}


/*----------------------------------------------------------------------------
 ***                                                              ページトップ
----------------------------------------------------------------------------*/
.pagetop {}

/*----------------------------------------------------------------------------
 ***                                                                   section
----------------------------------------------------------------------------*/
.section {}
.sectionInner {}



/*----------------------------------------------------------------------------
 ***                                                                 下層共通
----------------------------------------------------------------------------*/
.memberSec{
	border-top:2px solid #179FA6;
	padding:5rem 0;
	background-image:url(../../img/app/back_contents02.png),url(../..//img/app/back_contents02.png);
	background-position:left top 1rem,left bottom 1rem;
	background-repeat:no-repeat;
	background-size:100%;
}
.memberSec h2{ text-align:center; font-size:200%; margin:0 auto 0.5em; font-weight:500; color:#179FA6;}
.memberSec .messageBox{ width:520px; margin:0 auto 2em; border:1px dashed #179FA6; padding:1em; font-size:87.5%; color:#179FA6;}
.memberSec form{ width:500px; margin:0 auto; padding:2em 0 5em;}
.memberSec form li{ margin:0 0 1.5em;}
.memberSec form dt{ float:left; clear:both; margin:0 1em 0 0; font-size:87.5%; line-height:1.4em;}
.memberSec form dd{ float:left;}
.memberSec input.tw100{ width:calc(100% - 1em); padding:0.5em; border-radius:5px; border:1px solid #999;}
.memberSec .commonBtn{ width:200px; display:block; margin:1em auto; color:#fff; text-align:center; border-radius:5px; padding:0.5em 0 0.4em; font-size:125%; border:none; cursor:pointer; transition:all .3s;}
.memberSec .nextBtn{ background-color:#179FA6;}
.memberSec .backBtn{ background-color:#999;}
.memberSec .commonBtn2{ background-color:#F25794;}
.memberSec .nextBtn:hover{ background-color:#06BAB5;}
.memberSec .commonBtn:hover{ opacity:0.6; text-decoration:none;}
.memberSec .btnList{ width:460px; margin:0 auto; border:none !important;}
.memberSec .btnList li{ float:left; margin:0 1em;}

.novaUsagi #conBox{
	padding:3rem 0;
	background-image:url(/images/img_contents02.png);
	background-position:right 2rem bottom 1rem;
	background-repeat:no-repeat;
	background-size:10rem;
}

/*----------------------------------------------------------------------------
 ***                                                                 ログイン
----------------------------------------------------------------------------*/
#login #userLogin{ width:530px; margin:0 auto;}
#login #userLogin dt{ color:#179FA6; width:35%;}
#login #userLogin dd{ width:calc(65% - 1em);}
#login #userLogin p{ text-align:center;}
#login #userLogin .checkbox{ position:relative;}

/* 参考ページ仕様チェックボックス */
#login #userLogin .character-checkbox{
    width:25px;
    height:25px;
    cursor:pointer;
    border-radius:3px;
    border:1px solid #ccc;
    vertical-align:middle;
    display:inline-block;
}
.checkbox .label{ color:#6d6d6d; font-size:13px; font-weight:normal; cursor:pointer;}
#login #userLogin .checkbox.show:before{
	content:'\e013';
    color:#17a1a8;
    font-size:17px;
    margin:1px 0 0 3px;
    position: absolute;
    pointer-events:none;
	font-family: 'Glyphicons Halflings';
}

/* 別仕様チェックボックス */
#passwordCheck{ display:none;}
.icon_checkbox{ position:relative; cursor:pointer;}
.icon_checkbox:before{
	content:"";
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:1.5rem;
    height:1.5rem;
    border-radius:3px;
    background-color:#fff;
    border:1px solid #ccc;
}
.active .icon_checkbox:after{
	content:"";
    display:block;
    position: absolute;
    top:0;
    left:0.5rem;
    width:0.5rem;
    height:1rem;
    transform:rotate(40deg);
    border-bottom:5px solid #179FA6;
    border-right:5px solid #179FA6;
}
.show_checkbox{ vertical-align:sub; padding:0 0 0 2rem; cursor:pointer;}

#login #userLogin .showPassword{ margin:1em 0;}


#forget{
	padding:0 0 0 0.5em;
	background-image:url(../../img/app/ico02.png);
	background-position:left center;
	background-repeat:no-repeat;
	background-size:0.5em;
}



/*----------------------------------------------------------------------------
 ***                                                            新規会員登録
----------------------------------------------------------------------------*/
#newMember h2{ color:#F25794;}
#newMember .messageBox{ width:620px; border:none; border-bottom:1px solid #F25794 !important; color:#333;}
#newMember .messageBox span{ color:#F25794;}
#newMember #entranceInfo{ width:600px; margin:1em auto 3em;}
#newMember .myroomLogin{ margin:0 auto 3em;}
#newMember .myroomLogin p{ font-size:160%; font-weight:bold; text-align:center; line-height:1.2em; padding:0; margin:0 auto 1em;}
#newMember .myroomLogin p span{ font-size:75%; font-weight:bold;}
#newMember .myroomLogin p a{
	display:block;
	width:12rem;
	margin:0 auto;
	padding:0.5em 1em 0.3em;
	background-color:#179FA6;
	color:#fff;
	text-align:center;
	font-size:87.5%;
	font-weight:bold;
	border-radius:5px;
	/*box-shadow:2px 2px 6px #999;*/
	transition:all .4s;
}
#newMember .myroomLogin p a:hover{ text-decoration:none; background-color:#06BAB5;}
#newMember .entranceBox{ position:relative; margin:0 auto; padding:2em;}
#newMember .entranceBox h3{ font-size:137.5%; text-align:center;}
#newMember .entranceBox h3 span{ font-size:75%;}
#newMember .entranceBox p{ font-size:75%; margin:1em 0;}
#newMember .entranceBox form{ width:auto; padding:0;}
#newMember .entranceBox form dt{ width:26%; line-height:3em;}
#newMember .entranceBox form dd{ width:70%;}
#newMember .entranceBox input[type=checkbox]{ width:auto; margin:0.4em 0.4em 0.4em 0;}
#newMember .entranceBox .subBtn{ width:150px; display:block; text-align:center; margin:0 auto;}
#newMember #studentForm{ background-color:#FEF0FF;}
#newMember #studentForm h3{ color:#F25794;}
#newMember #externalForm{ background-color:#eee;}
#newMember #externalForm h3{ color:#069;}


/*----------------------------------------------------------------------------
 ***                                                            会員登録画面
----------------------------------------------------------------------------*/
#sapuriMember{}
#sapuriMember form{}
#sapuriMember form dt{ width:26%; line-height:3em; color:#179FA6;}
#sapuriMember form dd{ width:70%;}
#sapuriMember form dd input{ margin:0 0.5em 0.5em;}
#sapuriMember form dd input.tw35{ padding:0.5em; border-radius:5px; border:1px solid #999;}
#sapuriMember form dd span{ font-size:75%; line-height:3em;}
#sapuriMember ul{ border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding:2em 0 0; margin:0 auto 1em;}


/*----------------------------------------------------------------------------
 ***                                                            登録内容画面
----------------------------------------------------------------------------*/
#sapuriMember .confirmBox ul{ width:460px; margin:0 auto; padding:2em 1em;}
#sapuriMember .confirmBox li{ margin:0 0 0.5em;}
#sapuriMember .confirmBox li:last-child{ margin:0;}
#sapuriMember .confirmBox li dt{ float:left; width:25%;}
#sapuriMember .confirmBox li dd{ float:left; width:70%;}


/*----------------------------------------------------------------------------
 ***                                                  　　　　　リスサプ購入
----------------------------------------------------------------------------*/
#listeningSapuriBuy{}
#listeningSapuriBuy form{ width:460px;}
#listeningSapuriBuy #formBox dt{ margin:0 auto 0.5em; text-align:center;}
#listeningSapuriBuy #formBox dd{ width:100%;}
#listeningSapuriBuy .btnList{ margin:3em auto 0;}

.memberSec dl.messageBox{ margin:0 auto;}
.memberSec .inputInfo{}
.memberSec .inputInfo li { margin:1.4em 0 0; padding:0 0 1em; border-bottom:1px dashed #ccc;}
.memberSec .inputInfo li dt{ width:30%; font-size:100%;}
.memberSec .inputInfo li dt span{ font-size:75%; color:#F25794;}
.memberSec .inputInfo li dd{ font-size:125%; line-height:1em;}
.memberSec .inputInfo li dd select{ font-size:100%; padding:0.2em 0.5em 0.5em; margin:0 0.5em 0 0; border-radius:5px;}

.memberSec .inputInfo .hikiotoshiBox{ width:80%; padding:1.5em; margin:2em auto; border:none; background:rgba(175,232,229,0.5); border-radius:10px;}
.memberSec .inputInfo .hikiotoshiBox table{ width:100%; margin:0; padding:1em;}
.memberSec .inputInfo .hikiotoshiBox th{ border-bottom:2px solid #fff !important;}
.memberSec .inputInfo .hikiotoshiBox th,
.memberSec .inputInfo .hikiotoshiBox td{ border:none; text-align:center;}

.memberSec .inputInfo .sapuriTerms{ padding:0; margin:3em 0; border:none;}
.memberSec .inputInfo .sapuriTerms p{ text-align:center; font-size:125%; padding:0; margin:0 0 1em; line-height:1em;}
.memberSec .inputInfo .sapuriTerms p input{ margin:0 0.5em 0 0;}

/*----------------------------------------------------------------------------
 ***                                                  　　　　決済内容の確認
----------------------------------------------------------------------------*/
#settlementSec #conBox{ padding:2em; background-color:#eee; margin:0 auto 5em;}
#settlementSec #conBox .section{ width:760px; margin:0 auto; padding:3em; background-color:#fff; border-radius:10px;}
#settlementSec #conBox .section h3{ margin:0 0 0.5em;}
#settlementSec #conBox .section h3 strong{ color:#FF7F00; font-size:150%; margin:0;}
#settlementSec #conBox .section table{ width:100%;}
#settlementSec #conBox .section table th,
#settlementSec #conBox .section table td{ border:none; border-bottom:1px  solid #ccc; line-height:1.4em; padding:0.5em;}
#settlementSec #conBox .section td span{ font-size:87.5%;}
#settlementSec #conBox .section .priceTd{ vertical-align:middle;}
#settlementSec #conBox .section .infoTd{ vertical-align:middle;}
#settlementSec .paypalBox{ width:580px; margin:3em auto;}
#settlementSec .paypalBox dt{ margin:0 10px 0 0; padding:1em 0 0; line-height:2em;}
#settlementSec .paypalBox dt,
#settlementSec .paypalBox dd{ float:left;}
#settlementSec .sapuriTerms p{ text-align:center;}
#settlementSec .sapuriTerms p a{ display:block; margin:0 auto 1em;}
#settlementSec form{ width:100%; padding:2em 0 0;}
#settlementSec form input{ margin:0.4em 0.4em 0.4em 0;}
#settlementSec form p{ font-size:125%;}


#settlementSec .selectStartMonth{ padding:1.5em 0 1em 1em; margin:0 auto 2em;}
#settlementSec .selectStartMonth dt{ font-size:125%; line-height:1.2em;}
#settlementSec .selectStartMonth dt span{ font-size:67.5%; color:#F25794;}
#settlementSec .selectStartMonth dd select{ font-size:125%; padding:0.2em 0.5em 0.5em; border-radius:5px;}
#settlementSec .selectStartMonth dd{ float:none; margin:0 0 0.5em;}


.memberSec .messageBox dt{ font-size:125%;}
.memberSec .messageBox dd{ color:#333;}

/*----------------------------------------------------------------------------
 ***                                                  　　　　申し込み完了
----------------------------------------------------------------------------*/
#thanksSec .btnList{ width:100%; text-align:center; margin:0 auto 3em;}
#thanksSec .btnList li{ display:inline-block; justify-content:center; align-items:center; float:none;}


/*----------------------------------------------------------------------------
 ***                                                 　　パスワード再発行窓口
----------------------------------------------------------------------------*/
#passwoardSec{ width:840px; margin:2em auto; padding:0 0 3em;}
#passwoardSec .reissueSec{ float:left; width:380px; margin:0 20px;}
#passwoardSec .reissueSec h3,
#passwoardSec .reissueSec p{ text-align:center;}
#passwoardSec .reissueSec .reissueBox{ padding:1.5em; border-radius:10px; margin:0.5em 0 0;}
#passwoardSec #studentPass{ background:rgba(175,232,229,1);}
#passwoardSec #externalPass{ background:rgba(255,222,235,1);}


/*----------------------------------------------------------------------------
 ***                                              　　パスワード再発行・変更
----------------------------------------------------------------------------*/
.reissueSec .forgetReq form dt{ width:25%; font-size:100%; line-height:2.4em;}
.reissueSec .forgetReq form dd{ width:70%;}
.reissueSec .forgetReq form .commonBtn{ font-size:125%;}
.reissueSec h2{ line-height:1.5em;}
.reissueSec h2 span{ font-size:50%; font-weight:bold; color:#333;}
.reissueSec .forgetReq .tac{ width:500px; margin:0 auto; padding:1em 0; border-top:1px dashed #999; border-bottom:1px dashed #999; line-height:1.5em;}
.reissueSec .forgetReq strong{ color:#179FA6; font-size:80%; font-weight:500; display:block; margin:0.3em 0 0;}
.reissueSec .forgetReq .showPassword{ margin:1em 0 0;}



.grayLayer {
	display : none;
	position : fixed;
	background-color : rgba(0,0,0,0.75);
	width : 100%;
	height : 100%;
}

.grayLayer #canvas_loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}