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

body{-webkit-text-size-adjust:100%;}
img{ width:100%; height:auto;}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.pcHidden{ display:block;}
.spHidden{ display:none;}
/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
#wrap{ margin:0 2.5%; width:auto;}

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea { height:auto; width:100%; margin:0 auto 0 auto;}
#headerAreaLogo { width:25%; float:none; margin:0 auto;}
#headerLink{ overflow:hidden;}
#headerLink li{ width:47%; float:right; margin:0; margin-left:3%;}

/*----------------------------------------------------------------------------
 ***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#gnavi{ width:100%; height:auto; margin-bottom:4%; border-bottom:#eee solid 5px; padding-bottom:1.5%;}
#gnavi li,
#gnavi li.lastCh{width:32%; margin:0 0.66% 1.3% 0.66%;}
#gnavi li a,
#gnavi li.lastCh a{ width:100%; line-height:1.1em; height:auto; padding:10% 1% 10% 15%; text-align:left; background:url(../images/ico03.png) 4% 50% no-repeat; background-size:8% auto; font-size:70%;}




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


/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection { width:100%;}
.mainSectionInner {}


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


/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/

#footerArea { padding:4% 0; border-top:#DBDBDB 16px solid;}
#footerAreaLogo { float:left; width:25%;}
#footerAreaLogo img{ padding:0 0 15% 10%;}
#footerAreaLink1 { float:right; width:22%;}
#footerAreaLink2 { width:75%; padding:0 0 0 7%;}
#footerAreaLink2 ul{ padding:0;}
#footerAreaLink2 li{ background:url(../images/icon_main06.png) left 50% no-repeat; padding:0 0 0 3%; font-size:80%; width:100%; line-height:1.5em;}
#footerAreaLink2 li a{ display:block; padding:3% 0;}
#footerAreaLink2 li+li{ width:45%;}
#footerAreaLink2 li+li+li{ width:25%;}
#footerAreaLink2 li.imgLi{ background:none; padding:0; float:left;}
#footerCopyright{ float:none;  width:100%; clear:both; border-top:1px dotted #ccc;}
#footerCopyright p{font-size:80%; text-align:center; padding-top:2%;}


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


/*----------------------------------------------------------------------------
 ***                                                                   section
----------------------------------------------------------------------------*/
.section { margin-bottom:5%;}
.sectionInner {}




/*----------------------------------------------------------------------------
 ***                                                                 下層共通
----------------------------------------------------------------------------*/
.memberSec{ padding:3em 0; margin:0 auto;}
.memberSec h2{ font-size:150%; line-height:1.2em;}
.memberSec .messageBox{ width:90%; margin:0 auto 1em; font-size:75%;}
.memberSec form{ width:100%; padding:2em 0;}
.memberSec form dt{ font-size:75%; margin:0 0 0.5em;}
.memberSec form dt,
.memberSec form dd{ width:100%; float:none;}
.memberSec input.tw100{ width:100%;}
.memberSec .commonBtn{ width:70%;}
.memberSec .btnList{ width:100%;}
.memberSec .btnList li{ width:46%; margin:0 2%;}
.memberSec .btnList li .commonBtn{ width:100%;}

.novaUsagi #conBox{ background:none; padding:0;}


/*----------------------------------------------------------------------------
 ***                                                                 ログイン
----------------------------------------------------------------------------*/
#login #userLogin{ width:90%;}
#login #userLogin dt,
#login #userLogin dd{ width:100%;}


/*----------------------------------------------------------------------------
 ***                                                            新規会員登録
----------------------------------------------------------------------------*/
#newMember .messageBox{ width:80%; margin:0 auto 3em;}
#newMember .myroomLogin p span{ font-size:67.5%;}
#newMember #entranceInfo{ width:94%; margin:0 auto;}
#newMember .entranceBox{ width:100%; height:100%; float:none; margin:0 0 2rem; padding:2em;}
#newMember .entranceBox form dt{ width:100%; line-height:1.5em;}
#newMember .entranceBox form dd{ width:100%;}
#newMember .entranceBox .subBtn{ position:static; width:60%;}


/*----------------------------------------------------------------------------
 ***                                                            会員登録画面
----------------------------------------------------------------------------*/
#sapuriMember form ul{ width:90%;}
#sapuriMember form dt{ width:100%; line-height:1.5em;}
#sapuriMember form dd{ width:100%;}
#sapuriMember form dd span{ line-height:1.5em;}
#sapuriMember form dd input{ margin:0 0 0.5em;}
#sapuriMember form dd input.tw35{ margin:0 0.5em; vertical-align:middle;}


/*----------------------------------------------------------------------------
 ***                                                            登録内容画面
----------------------------------------------------------------------------*/
#sapuriMember .confirmBox ul{ width:90%; padding:1em 0.5em;}
#sapuriMember .confirmBox li dt,
#sapuriMember .confirmBox li dd{ font-size:87.5%;}
#sapuriMember .confirmBox li dd{ padding:0 0 0 0.5em;}


/*----------------------------------------------------------------------------
 ***                                                  　　　　　リスサプ購入
----------------------------------------------------------------------------*/
#listeningSapuriBuy form{ width:90%; padding:1em 0;}

.memberSec .inputInfo{ width:90%; margin:0 auto;}
.memberSec .inputInfo li {}
.memberSec .inputInfo li dt{ float:left; font-size:87.5%; margin:0 1em 0 0;}
.memberSec .inputInfo li dt span{ line-height:1.2em; display:block; margin:0.5em 0 0;}
.memberSec .inputInfo li dd{ float:left; width:60%; line-height:1.2em;}
.memberSec .inputInfo li dd select{}


/*----------------------------------------------------------------------------
 ***                                                  　　　　決済内容の確認
----------------------------------------------------------------------------*/
#settlementSec #conBox{ padding:1em; margin:0 auto 3em;}
#settlementSec #conBox .section{ width:100%; padding:1em;}
#settlementSec #conBox .section h3{ font-size:100%;}
#settlementSec #conBox .section h3 strong{ font-size:120%;}
#settlementSec #conBox .section table{ width:100%;}
#settlementSec #conBox .section th,
#settlementSec #conBox .section td{ font-size:87.5%;}
#settlementSec #conBox .section th{ width:4rem;}
#settlementSec #conBox .section td span{ font-size:75%;}
#settlementSec #conBox .section .priceTd{ width:7rem; line-height:1.2em;}
#settlementSec #conBox .section .infoTd{ font-size:75%;}
#settlementSec .sapuriTerms p{ width:80%; margin:0 auto; font-size:100%;}
#settlementSec .paypalBox{ width:100%; margin:2em auto 1em;}
#settlementSec .paypalBox dt,
#settlementSec .paypalBox dd{ width:100%; margin:0 auto 1em; line-height:1.5em; text-align:center;}

#settlementSec .selectStartMonth{ padding:1.5em 0 1.5em 0; margin:0 auto;}
#settlementSec .selectStartMonth dt{ float:left; width:60%}
#settlementSec .selectStartMonth dt span{ font-size:60%;}
#settlementSec .selectStartMonth dd{ float:left; width:30%}

.memberSec .inputInfo .sapuriTerms p{ font-size:112.5%; line-height:1.2em; width:90%; margin:0 auto 1em;}

.memberSec .inputInfo .hikiotoshiBox{ width:100%; padding:1em;}

/*----------------------------------------------------------------------------
 ***                                                  　　　　申し込み完了
----------------------------------------------------------------------------*/
#thanksSec .btnList{ margin:0 auto;}
#thanksSec .btnList li{ width:50%; margin:0 auto 1em;}


/*----------------------------------------------------------------------------
 ***                                                 　　パスワード再発行窓口
----------------------------------------------------------------------------*/
#passwoardSec{ width:90%; padding:0;}
#passwoardSec .reissueSec{ float:none; width:100%; margin:0 auto;}
#passwoardSec .reissueSec h3,
#passwoardSec .reissueSec p{ line-height:1.2em; margin:0 0 0.5em; padding:0;}
#passwoardSec .reissueSec .reissueBox{ padding:1.5em; border-radius:10px; margin:0.5em 0 0;}
#passwoardSec #studentPass{ margin:0 0 3em;}
#passwoardSec #externalPass{ margin:0;}


/*----------------------------------------------------------------------------
 ***                                              　　パスワード再発行・変更
----------------------------------------------------------------------------*/
.reissueSec .forgetReq{ width:80%; margin:0 auto;}
.reissueSec .forgetReq .tac{ width:100%;}
.reissueSec .forgetReq form dt,
.reissueSec .forgetReq form dd{ width:100%;}
.reissueSec .forgetReq form dt{ font-size:100%; line-height:1em;}
.reissueSec .forgetReq p{ width:90%;}
.reissueSec .forgetReq strong{ font-size:80%; line-height:1.5em; margin:1em 0;}
.reissueSec .forgetReq .showPassword{ margin:1em 0 0;}
.reissueSec .forgetReq .mgt30{ margin:30px auto 0;}





/**/