@charset "utf-8";

/* common
------------------------------------------------------------------------- */

/* mainVisual ----------- */
#mainVisual{
	background-image: url(../images/accordiakids/visualMain.jpg);
}

#mainVisual .inner p{
	top: 90px;
	right: 40px;
}

#mainVisual .inner .btn{
	padding: 5px;
	background: url(../images/common/visualLoginBtnBg.png) repeat 0 0;
	position: absolute;
	top: 125px;
	right: 40px;
}

/* subVisual ------------ */
#subVisual{
	background-color: #fbfbfb;
	background-image: url(../images/accordiakids/visualSub.jpg);
}

#subVisual .inner{
	padding: 0;
	text-align: center;
	position: relative;
}

#subVisual .inner h1{
	padding: 0;
	text-align: center;
	font-size: 18px;
	line-height: 1.2em;
	position: absolute;
	top: 45px;
	right: 41px;
}
	.concept #subVisual .inner h1{ right: 28px;}

#subVisual .inner span{
	display: block;
}
	#subVisual .inner span.img{ margin: 0 0 15px 0;}

/* contNav -------------- */
.contNav{}
	.contNavT{ margin: 0 0 35px 0; }
	.contNavB{ margin: 50px 0 0 0; }

.contNav ul{
	overflow: hidden;
}

.contNav ul li{
	float: left;
	width: 238px;
	text-align: center;
	position: relative;
}
	.contNav ul li.back{ width: 48px;}
	.contNav ul li.last{ border-right: none;}
	.contNav ul li.active:before{
		content: ' ';
		width: 100%;
		height: 6px;
		background-position: center top;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
	}
	
	.contNavT ul li{padding: 0 0 6px 0;}
	.contNavT ul li.active:before{ background-image: url(../images/common/icon-triangle-arrowB-green.png); bottom: 0;}
	
	.contNavB ul li{padding: 6px 0 0 0;}
	.contNavB ul li.active:before{ background-image: url(../images/common/icon-triangle-arrowT-green.png); top: 0;}

.contNav ul li a{
	display: block;
	color: #ffffff !important;
	font-size: 14px;
	font-weight: bold;
	line-height: 50px;
	border-right: 1px solid #e2e2e2;
	background: #cccccc;
}
	.contNav ul li.back a{ padding: 15px 0;}
	.contNav ul li a:hover{text-decoration: none; background: #bbbbbb;}
	.contNav ul li.last a{ border-right: none;}
	.contNav ul li.active a{ background: #119936 url(../images/accordiakids/contNavBg.png) no-repeat 0 0;}

/* contTit -------------- */
.contTit{
	margin: 0 0 35px 0;
}

.contTit h2{
	text-align: center;
	font-size: 26px;
	line-height: 1.2em;
}

.contTit p.lead{
	padding: 30px 0 0 0;
	text-align: center;
	font-size: 16px;
}

.contTit p.lead span{
	color: #119934;
}


/* top
------------------------------------------------------------------------- */
.top{}

/* contList ------------- */
.top #contList{}

.top #contList h2{
	margin: 0 0 40px 0;
	text-align: center;
}

.top #contList ul.row2 li,
.top #contList ul.row4 li{
	margin-bottom: 40px;
}
	.top #contList ul.row2 li.con1{ margin-right: 20px;}

.top #contList .link{
	margin: 0 0 50px 0;
}

.top #contList h3{
	margin: 0 0 25px 0;
	text-align: center;
	font-size: 26px;
	line-height: 1.2em;
	font-weight: normal;
}

.top #contList .link ul li.iconNote a span span{
	padding: 0;
	font-size: 14px;
	line-height: 24px;
	vertical-align: middle;
	background: none;
}


/* mypage
------------------------------------------------------------------------- */
.mypage{}

/* block ---------------- */
.mypage .block{
	overflow: hidden;
}

.mypage .block1{
	margin: 0 0 60px 0;
}

.mypage .block2{
	padding: 30px 30px 0 30px;
	border: 1px solid #dddddd;
}

.mypage .block .btnArea{
	text-align: center;
}

/* loginArea ------------ */
.mypage .loginArea{
	float: left;
	padding: 20px;
	width: 600px;
	background: #f6f6f6 url(../images/common/dotsBg.png) repeat 0 0;
	position: relative;
	box-sizing: border-box;
}
	.mypage .loginArea:before{
		content: ' ';
		width: 15px;
		height: 15px;
		background: url(../images/common/triangleMark.png) no-repeat left top;
		position: absolute;
		top: 0;
		right: 0;
	}

.mypage .loginArea h2{
	margin: 0 0 10px 0;
	color: #119934;
	text-align: center;
	font-size: 26px;
	font-weight: normal;
	line-height: 1.2em;
}

.mypage .loginArea h2 span{
	font-size: 22px;
}

.mypage .loginArea p.lead{
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7em;
}

/* loginInner */
.mypage .loginArea .loginInner{
	padding: 30px 15px 30px 15px;
	background:#ffffff url(../images/common/newsBlockDec.png) no-repeat right bottom;
}

.mypage .loginArea dl{
	margin: 0 0 20px 0;
	overflow: hidden;
}
	#contents .loginArea dl.last{ margin-bottom: 25px !important;}

.mypage .loginArea dl dt,
.mypage .loginArea dl dd{
	font-size: 14px;
	line-height: 37px;
}

.mypage .loginArea dl dt{
	float: left;
	padding: 0 0 0 8px;
	width: 160px;
	background: #eeeeee;
	box-sizing: border-box;
}

.mypage .loginArea dl dd{
	float: right;
	width: 355px;
}

.mypage .loginArea .btn{
	text-align: center;
}

/* mypageArea ------------ */
.mypage .mypageArea{
	float: right;
	padding: 20px 12px 36px 12px;
	width: 380px;
	border: 10px solid #eeeeee;
	position: relative;
	box-sizing: border-box;
}
	.mypage .mypageArea:before{
		content: ' ';
		width: 15px;
		height: 15px;
		background: url(../images/common/triangleMark.png) no-repeat left top;
		position: absolute;
		top: -10px;
		right: -10px;
	}

.mypage .mypageArea h3{
	margin: 0 0 10px 0;
	text-align: center;
	font-size: 22px;
	font-weight: normal;
	line-height: 1.2em;
}

.mypage .mypageArea ul.list{
	padding: 5px 5px 0 5px;
	margin: 0 0 20px 0;
}

.mypage .mypageArea ul.list li{
	padding: 0 0 0 20px;
	font-size: 14px;
	line-height: 1.7em;
	background: url(../images/accordiakids/icon-check-green.png) no-repeat left center;
}

.mypage .mypageArea .mypageInner{
	padding: 20px 0 0 0;
	border-top: 1px solid #dddddd;
}

.mypage .mypageArea p{
	margin: 0 0 15px 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7em;
}

.mypage .mypageArea .attention{
	margin: 0 0 23px 0;
	text-align: center;
	font-size: 14px;
	line-height: 25px;
	font-weight: normal;
}

.mypage .mypageArea .attention span{
	display: inline;
	padding: 2px 10px;
	color: #ffffff;
	background: #ff0505;
}

/* block2 ---------------- */
.mypage .block2 .box{}

.mypage .block2 .box h3{
	margin: 0 0 30px 0;
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	line-height: 20px;
}

.mypage .block2 .box .txt{
	padding: 0 0 0 460px;
	background-position: 90px 0;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
	.mypage .block2 .box1 .txt{ padding-top: 5px; height: 150px; background-image: url(../images/accordiakids/card01.png);}
	.mypage .block2 .box2 .txt{ height: 130px;  background-image: url(../images/accordiakids/card02.png);}


.mypage .block2 .box .txt h4{
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.2em;
}

.mypage .block2 .box .txt p{
	text-align: left;
	font-size: 14px;
	line-height: 1.7em;
}

.mypage .block2 .box .txt p span{
	color: #FF0000;
}
	.mypage .block2 .box1 .txt p span{ display: block; margin: 8px 0 0 0;}

/* box1 */
.mypage .block2 .box1{
	padding: 25px;
	margin: 0 0 20px 0;
	background: #f6f6f6 url(../images/common/dotsBg.png) repeat 0 0;
	position: relative;
}
	.mypage .block2 .box1:before{
		content: ' ';
		width: 50px;
		height: 50px;
		background: url(../images/common/icon-check.png) no-repeat left top;
		position: absolute;
		top: 0;
		right: 0;
	}

.mypage .block2 .box1 h3 span{
	padding: 0 0 0 30px;
	background: url(../images/common/icon-attention.png) no-repeat left center;
}

/* box2 */
.mypage .block2 .box2{
	padding: 25px;
}


/* concept
------------------------------------------------------------------------- */
.concept{}

.concept .conceptInner{
	padding: 50px 0 0 290px;
	margin: 0 0 50px 0;
	height: 640px;
	background: url(../images/accordiakids/conceptBg.jpg) no-repeat 0 0;
	box-sizing: border-box;
}

.concept .box{
	margin: 0 0 60px 0;
}

.concept .box h3{
	margin: 0 0 30px 0;
	font-size: 26px;
	font-weight: normal;
	line-height: 1.2em;
}

.concept .box h3 > span{
	color: #119935;
}

.concept .box p{
	margin: 0 0 25px 0;
	font-size: 14px;
	line-height: 1.9em;
}

.concept .bannerArea{
}

.concept .btnArea{
	margin: 0 0 50px 0;
	text-align: center;
}


/* register
------------------------------------------------------------------------- */
.register{}

/* contNav -------------- */

.register .contNavB{
	margin: 15px 0 0 0;
}

/* registerNav ---------- */
.register .registerNav{
}
	.register .registerNavT{ margin: 0 0 40px 0;}

.register .registerNav ul{
	margin: 0 auto;
	width: 331px;
	overflow: hidden;
}

.register .registerNav ul li{
	float: left;
}

.register .registerNav ul li a{
	display: block;
	padding: 15px 10px;
	text-align: center;
	color: #777777 !important;
	font-size: 14px;
	line-height: 1.2em;
}

.register .registerNav ul li a:hover{
	text-decoration: none;
	background: #f3f3f3;
}

.register .registerNav ul li.active a{
	background: #eeeeee;
}


/* about
------------------------------------------------------------------------- */
.about{}

/* contTit -------------- */
.about .contTit{
	margin: 0 0 30px 0;
}

/* aboutInner ----------- */
.about .aboutInner{
	margin: 0 0 50px 0;
}

/* block ---------------- */
.about .block{
	margin: 0 0 40px 0;
}

.about .block h3{
	margin: 0 0 30px 0;
	text-align: center;
	font-size: 26px;
	font-weight: normal;
	line-height: 1.2em;
}

.about .block .blockInner{
	padding: 20px;
	border: 1px solid #bbbbbb;
	font-size: 14px;
	line-height: 1.9em;
}
	.about .block .tableLayout{ padding: 0; border: none;}

.about .block p{
	margin: 0 0 1em 0;
}

.about .block table th,
.about .block table td{
	font-size: 14px !important;
	line-height: 1.9em !important;
}
	.about .block table th{ width: 210px;  vertical-align: middle;}

.about .block table .link{
	width: 250px;
	text-align: right;
	vertical-align: middle;
}

.about .block table .link a{
	padding: 0 0 0 20px;
	background: url(../images/common/icon-externalLink.png) no-repeat left center;
}

.about .block em{
	color: #FF0505;
	font-style: normal;
}

.about .block ul{}

.about .block ul li{
	padding: 0 0 0 30px;
	position: relative;
}

.about .block ul li span{
	position: absolute;
	top: 0;
	left: 0;
}

.about .block span.notes{
	color: #535353;
	position: static;
}

/* btnArea -------------- */
.about .btnArea{
	margin: 0 0 50px 0;
	text-align: center;
}


/* rule
------------------------------------------------------------------------- */
.rule{}

.rule .contTit h2{
	line-height: 1.5em;
}

.rule .contTit h2 span{
	font-size: 20px;
	font-weight: normal;
}

/* ruleInner ------------ */
.rule .ruleInner{
	padding: 20px;
	margin: 0 0 50px 0;
	border: 10px solid #eeeeee;
	position: relative;
}
	.rule .ruleInner:before{
		content: ' ';
		width: 15px;
		height: 15px;
		background: url(../images/common/triangleMark.png) no-repeat left top;
		position: absolute;
		top: -10px;
		right: -10px;
	}

/* block ---------------- */
.rule .block{
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
	font-size: 16px;
	line-height: 1.7em;
	border-bottom: 1px solid #dddddd;
}
	.rule .lastBlock{
		padding: 0;
		margin: 0;
		border: none;
}

.rule .block h3{
	margin: 0 0 20px 0;
	font-size: 22px;
	font-weight: normal;
	line-height: 1.2em;
}

.rule .block ul{
	margin: 0 0 -10px 0;
}

.rule .block ul li{
	padding: 0 0 0 35px;
	margin: 0 0 10px 0;
	position: relative;
}

.rule .block ul li span{
	position: absolute;
	top: 0;
	left: 0;
}

.rule .block ul li > ul{
	padding: 10px 0 0 0;
}

.rule .block ul li > ul li{
	padding: 0 0 0 1.5em;
}

/* btnArea -------------- */
.rule .btnArea{
	margin: 0 0 50px 0;
	text-align: center;
}


/* memberForm
------------------------------------------------------------------------- */
.memberForm{}

/* contTit -------------- */
.memberForm .contTit p{
	font-size: 16px;
	line-height: 20px;
}

.memberForm .contTit p.attention{
	padding: 18px 0;
	margin: 0 0 20px 0;
	color: #FF0000;
	text-align: center;
	font-weight: normal;
	border: 1px solid #e0e0e0;
}

.memberForm .contTit p.attention span{
	padding: 0 0 0 30px;
	background: url(../images/common/icon-attention.png) no-repeat left center;
}

.memberForm .contTit p.txtArea{
	margin: 0 auto;
	width: 625px;
	overflow: hidden;
}

.memberForm .contTit p.txtArea span{
	float: left;
}
	.form .contTit p.txtArea span.txt{margin: 0 10px 0 0;}
	.form .contTit p.txtArea span.mandatory{margin: 0 10px 0 0;}

/* block ---------------- */
.memberForm .block{
	margin: 0 0 30px 0;
}

.memberForm .block h3{
	margin: 0 0 25px 0;
	height: 40px;
	text-align: center;
}

.memberForm .block h3 span{
	display: inline-block;
	padding: 0 0 0 90px;
	font-size: 26px;
	font-weight: normal;
	line-height: 40px;
	background-position: left center;
	background-repeat: no-repeat;
}
	.memberForm .step1 h3 span{ background-image: url(../images/common/step1-green.png);}
	.memberForm .step2 h3 span{ background-image: url(../images/common/step2-green.png);}

/* table ---------------- */
.memberForm .formArea .step1 table{
	margin: 0;
}

.memberForm .formArea .step2 table{
	margin: 0 0 15px 0;
}

/* em */
.memberForm .formArea td em{
	display: block;
	margin: 0 0 0.5em 0;
	color: #FF0000;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	line-height: 1.4em;
}

/* notes */
.memberForm .formArea .notes,
.memberForm .formArea ul.notes li{
	color: #535353;
	font-size: 12px;
}
	.memberForm .formArea .notes{ line-height: 1.4em;}
	.memberForm .formArea ul.notes li{ margin-bottom: 5px; line-height: 1.7em;}

/* link */
.memberForm .formArea a.link{
	padding: 0 0 0 20px;
	background: url(../images/common/icon-externalLink.png) no-repeat left center;
}

.memberForm .formArea a.pdf{
	padding: 0 0 0 25px;
	background: url(../images/common/icon-pdf.png) no-repeat left center;
}

/* formInput ------------ */
.memberForm .formInput{}

/* contTit */
.memberForm .formInput .contTit{
	margin: 0 0 40px 0;
}

/* formArea */
.memberForm .formInput .formArea{}

/* ul li */
.memberForm .formInput .formArea ul{
}

.memberForm .formInput .formArea ul li{
	margin: 0 0 0 20px;
	line-height: 2em;
}

.memberForm .formInput .formArea ul li span{
	padding: 0 7px 0 0;
	margin: 0 0 0 -20px;
}

/* table */
.memberForm .formInput .step2 th{
	background-color: #E4F5EB !important;
}

/* sideList */
.memberForm .formInput .formArea td.sideList{}

.memberForm .formInput .formArea td.sideList span,
.memberForm .formInput .formArea td.sideList input{
	display: block;
	float: left;
}

.memberForm .formInput .formArea td.sideList span.tit,
.memberForm .formInput .formArea td.sideList span.spec{
	line-height: 37px;
}
	.memberForm .formInput .formArea td.sideList span.tit{width: 40px;}

.memberForm .formInput .formArea td.sideList input{
	width: 180px;
	box-sizing: border-box;
}
	.memberForm .formInput .formArea td.sideList input.txt1{margin: 0 35px 0 0;}
	.memberForm .formInput .formArea td.sideList input.txt2{margin: 0 10px 0 0;}

/* rowList */
.memberForm .formInput .formArea td.rowList{}

.memberForm .formInput .formArea td.rowList span{
	display: block;
	margin: 0 0 1em 0;
}

/* mailArea */
.memberForm .formInput .formArea td.mailArea{}

.memberForm .formInput .formArea td.mailArea .txtArea{
	padding: 1em 0 0 0;
	overflow: hidden;
}

.memberForm .formInput .formArea td.mailArea span,
.memberForm .formInput .formArea td.mailArea input{
	display: block;
	float: left;
}

.memberForm .formInput .formArea td.mailArea span.tit,
.memberForm .formInput .formArea td.mailArea span.spec{
	line-height: 37px;
}
	.memberForm .formInput .formArea td.mailArea span.tit{width: 150px;}

.memberForm .formInput .formArea td.mailArea input{
	width: 470px;
	box-sizing: border-box;
}

/* formConf ------------- */
.memberForm .formConf{}

.memberForm .formConf table th{
	width: 260px;
	box-sizing: border-box;
}


/* mmForm
------------------------------------------------------------------------- */
.mmForm{}

/* formArea ------------- */
.mmForm .formArea .name{
	font-size: 18px;
	color: #119934;
}

/* contTit -------------- */
.mmForm .contTit p{
	text-align: center;
	font-size: 16px;
	line-height: 1.7em;
}

.mmForm .contTit p span{
	color: #119934;
}

/* block ---------------- */
.mmForm .block{
	margin: 0 0 30px 0;
}

.mmForm .blockInner{
	padding: 30px;
	border: 10px solid #eeeeee;
	position: relative;
}
	.mmForm .blockInner:before{
		content: ' ';
		width: 15px;
		height: 15px;
		background: url(../images/common/triangleMark-pink.png) no-repeat left top;
		position: absolute;
		top: -10px;
		right: -10px;
	}

.mmForm .block h3{
	margin: 0 0 25px 0;
	height: 40px;
	text-align: center;
}

.mmForm .block h3 span{
	display: inline-block;
	padding: 0 0 0 90px;
	font-size: 26px;
	font-weight: normal;
	line-height: 40px;
	background-position: left center;
	background-repeat: no-repeat;
}
	.mmForm .step1 h3 span{ background-image: url(../images/common/step1-green.png);}
	.mmForm .step2 h3 span{ background-image: url(../images/common/step2-green.png);}

.mmForm .block p{
	font-size: 16px;
	line-height: 1.7em;
}
	.mmForm .step1 p{ margin: 0 0 30px 0; text-align: center;}

/* formInput ------------ */
.mmForm .formInput{}

.mmForm .formInput td.nameArea input{
	width: 160px;
}

/* contTit */
.mmForm .formInput .contTit{
	margin: 0 0 35px 0;
}

/* step1 */
.mmForm .step1 table{
	margin: 0 0 20px 0;
}

.mmForm .step1 .btn input{
	text-indent: -9999px;
	width: 286px;
	height: 50px;
	border: none !important;
	background: transparent url(../images/accordiakids/mmBtn.png) no-repeat 0 0;
	cursor: pointer;
}

/* step2 - box1 */
.mmForm .step2 .box1 p.txt{
	padding: 10px 0;
	margin: 0 auto;
	width: 700px;
}

/* step2 - box2 */
.mmForm .step2 .box2{
	padding: 25px;
	background: #f6f6f6 url(../images/common/dotsBg.png) repeat 0 0;
	position: relative;
}
	.mmForm .step2 .box2:before{
		content: ' ';
		width: 50px;
		height: 50px;
		background: url(../images/common/icon-check.png) no-repeat left top;
		position: absolute;
		top: 0;
		right: 0;
	}

.mmForm .step2 .box2 ul{
	margin: 0 0 20px 0;
}

.mmForm .step2 .box2 ul li{
	margin: 0 0 15px 0;
	font-size: 16px;
	line-height: 1.2em;
}

.mmForm .step2 .box2 p{
	margin: 0 0 1em 0;
}

.mmForm .step2 .box2 p.notes{
	color: #545454;
}


/* kittycard
------------------------------------------------------------------------- */
.kittycard{}

/* formArea ------------- */
.kittycard .formArea .name{
	color: #FF5259;
}

/* contTit -------------- */
.kittycard .contTit h2{
	color: #F26666;
}

.kittycard .contTit p{
	margin: 0 0 1em 0;
}

.kittycard .contTit .link{
	text-align: center;
}

.kittycard .contTit .link a{
	padding: 0 0 0 20px;
	font-size: 16px;
	line-height: 20px;
	background: url(../images/common/icon-circle-arrowL-green.png) no-repeat left center;
}

/* block ---------------- */
.kittycard .step1 h3 span{ background-image: url(../images/common/step1-pink.png);}
.kittycard .step2 h3 span{ background-image: url(../images/common/step2-pink.png);}

/* formInput ------------ */
/* step1 */
.kittycard .step1 .btn input{
	text-indent: -9999px;
	width: 286px;
	height: 50px;
	border: none !important;
	background: transparent url(../images/accordiakids/kittycardBtn.png) no-repeat 0 0;
	cursor: pointer;
}

/* step2 - box1 */
.kittycard .step2 .box1 p.txt{
	padding: 0;
	margin: 0 auto 25px auto;
	width: 800px;
}

/* step2 - box2 */
.kittycard .step2 .box2{
	margin: 0 0 20px 0;
}

.kittycard .step2 .box2 p a{
	text-decoration: underline;
}

.kittycard .step2 .box2 p.notes{
	color: #FF5259;
	text-align: center;
	
}

/* notice */
.kittycard .notice{
	padding: 25px;
	text-align: left;
	background: #f6f6f6 url(../images/common/dotsBg.png) repeat 0 0;
}

.kittycard .notice h4{
	padding: 0 0 0 50px;
	margin: 0 0 5px 0;
	color: #FF0000;
	font-size: 18px;
	line-height: 40px;
	background: transparent url(../images/accordiakids/icon-attention.png) no-repeat 0 0;
}

.kittycard .notice p{
	padding: 0 0 0 50px;
}

.kittycard .notice p.txt{
	margin: 0 0 5px 0;
	width: auto;
}
.kittycard .notice p.notes{
	font-size: 14px;
	color: #535353;
}

/* formComp ------------- */
.kittycard .formComp .formArea h3{
	color: #F26666;
}

.kittycard .formComp .formArea .link{
	margin: 0 0 40px 0;
}

.mypage .loginArea .loginInner input[name="card_no"]{width:280px;}
.mypage .loginArea .loginInner input[name="kana1"]{width:120px;}
.mypage .loginArea .loginInner input[name="kana2"]{width:120px;}
.mypage .loginArea .loginInner input[name="year"]{width:60px;}
.mypage .loginArea .loginInner input[name="month"]{width:50px;}
.mypage .loginArea .loginInner input[name="day"]{width:50px;}
/* responsive */
@media screen and (max-width: 1200px) {
body#accordiakids.resp,.resp #contents{min-width: auto;}
.resp #contents .inner{width: 100%;}
.resp #contentsInner{width:90%;}
.resp .contNav ul li.back {width:4%;}
.resp .contNav ul li {width:24%;}

.resp #contList .link ul.row2 li{margin-left: auto !important;margin-right: auto !important;}
.resp #contList .link ul.row2 li.link01,.resp #contList .link ul.row2 li.link02{width:100%;border: none;}
.resp #contList ul li{float:none;margin-left: auto !important;margin-right: auto !important;}

.resp .mypage .loginArea{width: 60%;}
.resp .mypage .mypageArea{width: 38%;}
.resp .mypage .loginArea dl dd{width:100%;}
.resp .mypage .loginArea .loginInner input[name="card_no"]{width:100%;}
.resp .mypage .loginArea .loginInner input[name="kana1"]{width:100%;}
.resp .mypage .loginArea .loginInner input[name="kana2"]{width:100%;}
.resp .mypage .loginArea .btn{width:90%;}
.resp .mypage .loginArea .btn input[name="login"]{width:100%;}

.resp .mypage .block2 .box .txt{height: auto;padding: 0 0 0 350px;text-align: center;background-position: left top;}

}
@media screen and (max-width: 820px) {
	.resp .contNav ul li.back {display: none;}
	.resp .contNav ul li {width:50%;}
	.resp .contNav ul li a{font-size: 13px;}
    
    .resp #contList ul li{width:100%;}
    .resp .top #contList ul li a span img{width:100%;}
    .resp .top #contList ul li a span.img{height:auto;}
    .resp .top #mainVisual{height: 300px;}
    .resp .top #mainVisual .inner h1{top: 34px;left:auto;right:6vw;width: 37%;}
    .resp .top #mainVisual .inner p{top: 148px; right: 17vw;padding-left: 10px;}
    .resp .top #mainVisual .inner .btn{top: 203px;right: 0;left: 0;width: 100%;max-width: 280px;margin: auto;}
    .resp .concept .conceptInner{padding: 0;height: auto;background-size: cover;background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url(/assets/images/accordiakids/conceptBg.jpg) no-repeat 0 0;background-size: cover;}
    .resp .about .block table th,.resp .about .block table td{width:100%;display: block;}
    .resp .about .block table th{text-align: center;}
    .resp .mypage .loginArea{width: 100%;float: none;margin-bottom: 5%;}
    .resp .mypage .mypageArea{width: 100%;float: none;}
    .resp .mypage .block2 .box .txt{padding: 27vw 0 0;margin: 0 5vw;background-size: contain;}
    
    .resp .mypage #contents table{border:none;}
    .resp .mypage #contents table th{display:none;}
    .resp .mypage #contents table td{display: block;width: 100%;border-right: none;padding: 10px;}
    .resp .mypage #contents table td:before{content: attr(data-label);display: block;color: #00A850;font-weight: bold;text-align: center;margin: 0 0 5%;font-size: 1.1rem;}
    .resp .mypage #contents table td:last-child{padding-bottom:50px;border-bottom: none;}

}