/*---------------------------------------------------リセット--*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
margin:0; padding:0;
}
table{
border-collapse:collapse; border-spacing:0;
}
fieldset, img{
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var{
font-style:normal; font-weight:normal;
}
ol, ul{
list-style:none;
}
caption, th{
text-align:left;
}
h1, h2, h3, h4, h5, h6{
font-size:100%; font-weight:normal;
}
q:before, q:after{
content:"";
}
abbr, acronym{
border:0;
}
a {
text-decoration: none;
color:#0000EE;
}
a:visited {

}
strong {
font-weight:bold;
}
/*--------------------------------------------------/リセット--*/
html {
    background-color:#f1f4f8;
    width:100%;
    height:100%;
}
body {
    font-size:14px;
    width:800px;
    height: 100%;
    margin:0 auto;
    padding:0 50px;
    background:#fff;
    font-family:"Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    color:#333;
}
table, tr, th, td {border-collapse: collapse;}
.error, .caution{color:#ff0000;}
input.error,
textarea.error {
	border: 1px dotted red;
}
.clearfix {}
.clearfix:after{
    content: "";
    display: block;
    clear: both;}
.center {
text-align:center;}
.left {
text-align:left;}

#contents {
    margin: 30px 0 20px 0;
}
#container {
min-height: 100%;
_height: 100%;
}
#content{
padding-bottom: 60px;
}
#footer {
    height:50px;
    margin-top: -8em;
    text-align:center;
    color:#888;
    font-size:10px;
    border: 1px solid #e5e5e5;
    border-width: 1px 0 0 0;
    padding-bottom: 3em;
}
#footer .content {
padding-top:10px;
}
.panel{
background-color:#fff;
padding:20px;;
position:relative;
border: 8px solid #f4f4f4;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #aaa 0px 1px 5px;
-moz-box-shadow: #aaa 0px 1px 5px;
box-shadow: #aaa 0px 1px 5px;
behavior: url(css/PIE/PIE.htc);
}
.panel a:hover{
text-decoration:underline;
}
.panel input[type="button"],
.panel input[type="submit"] {
height:30px;
}
.panel h1 {
padding:5px 0 20px 0;
font-weight:bold;
font-size:18px;
}
.panel h2 {
font-size: 14px;
font-weight: bold;
margin: 5px 0 20px 0;
}
.panel p {
padding-bottom:1em;
}
.decimal {
list-style-type: decimal !important;
}
.underline {
text-decoration: underline;
}
blockquote{
margin-left:1em;
padding:10px 10px 10px 20px;
border:none;
border-left:5px solid #4e95dc;
}
/* login ------------------------------------> */
.header {
text-align:center;
padding:15px 0 5px 0;
border-bottom:1px solid #e5e5e5;
}
.header img {
    width:100%;
}
.login {
max-width:350px;
margin:80px auto 40px;
}
.login li {
padding:5px 0;
}
.login input.mail,
.login input.pw{
font-size:22px;
width:100%;
}
.login .login_btn {
margin:10px 0;
text-align:center;
}
.login_btn input[type="submit"] {
    width: 100%;
    padding: 0 .5em;
    font-size: 1.2em;
}
.login .pw_remind {
text-align:right;
}
.login .pw_remind a{
font-size:12px;
}
.login .error {
text-align:center;
}
/* <------------------------------------login  */

/* pwremind ------------------------------------> */
.pwremind {
width:350px;
margin:100px auto;
}
.pwremind input[type="text"]{
font-size:22px;
width:100%;
}
.pwremind .btn {
margin-top:20px;
text-align:center;
}
/* <------------------------------------pwremind  */

/* userdata ------------------------------------> */
.userData {
margin:20px 0;
}
.userData li{
padding:5px 0;
}
.userData table {
margin-bottom:15px;
}
.userData p{
padding-bottom:15px;
}
.accountDelete {
margin:20px 0;
padding:20px 40px;
}
.accountDelete h1{
font-size: 18px;
}
.accountDelete .wish {
margin-top:20px;
padding-bottom:40px;
}
.accountDelete .wish p {
padding-bottom:1em;
line-height: 1.8em;
}
.accountDelete .reason {
border-top:1px solid #ccc;
}
.accountDelete .reason h2{
padding: 1em 0 0;
}
.accountDelete .reason textarea {
width:400px;
height:10em;
}
.accountDelete .btn {
margin:20px 0;
}
.accountDelete .label {
font-size: 12px;
padding-left: 10px;
color: #999;
}
.required {
font-size:14px;
padding:0 8px;
color:#ff2b2b;
}

.userConf {
margin:20px 0;
padding:20px;
}
.userConf .conf_block {
margin-bottom:20px;
}
.userConf .conf_block h2 {
border-bottom:2px solid #de3c3c;
}
.userConf .conf_block h3 {
position: relative;
font-weight: bold;
font-size: 14px;
margin: 8px 0 6px 0;
padding-left: 5px;
border-left: solid 5px #ccc;
line-height: 120%;
}

.userConf .conf_block h3,
.userConf .conf_block p,
.userConf .conf_block table,
.userConf .conf_block ul {
    margin-left:0;
}
.userConf .conf_block .label {
font-size:12px;
padding-left:10px;
color:#999;
}
.userConf .conf_block .description {
font-size:14px;
margin:15px 0;
}
.userConf .conf_block .description p {
padding-bottom:.5em;
line-height: 1.4em;
}
.userConf .btn,
.resetCard .btn{
margin:30px 0 40px 0;
}
.resetCard {
margin:20px 0;
padding:20px 40px;
}
.resetCard .description {
margin-bottom:20px;
}
.resetCard .description p {
padding-bottom:1em;
line-height: 1.2em;
}
#henko_btn_jumper {
    position: fixed;
    bottom:10%;
    right:0;
    z-index: 2;
    background-color: #fff;
    padding: .8em 2em;
    margin-right:2em;
    border: solid 3px #de3c3c;
    border-radius: 10px;
    transition: all 1s;
}
.fade {
    opacity: 0;
}

/* <------------------------------------ userdata */

/* menu ------------------------------------> */

#menu {
    display: block;
    width:100%;
    margin: 5px 0;
background: #666666;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiM2NjY2NjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #666666 10%, #444444 50%, #666666 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#666666), color-stop(50%,#444444), color-stop(100%,#666666));
background: -webkit-linear-gradient(top,  #666666 10%,#444444 50%,#666666 100%);
background: -o-linear-gradient(top,  #666666 10%,#444444 50%,#666666 100%);
background: -ms-linear-gradient(top,  #666666 10%,#444444 50%,#666666 100%);
background: linear-gradient(to bottom,  #666666 10%,#444444 50%,#666666 100%);
-pie-background: linear-gradient(to bottom,  #666666 10%,#444444 50%,#666666 100%);
    border-radius: 5px;
position:relative;
behavior: url(css/PIE/PIE.htc);
}
#menu ul {
    letter-spacing: -.40em;
}
#menu a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: 10px 20px;
    border-radius: 3px;
position:relative;
behavior: url(css/PIE/PIE.htc);
}
#menu a:hover {
    background-color:#4d4d4d;
}
#menu a:active {
    box-shadow: 0 0 5px 5px rgba(10,10,10,0.4) inset;
position:relative;
behavior: url(css/PIE/PIE.htc);
}
#menu ul {
}
#menu li {
    display: inline;
    float:left;
    border-right: 1px solid #999;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .4);
    border-width: 1px;
    font-size: 14px;
    letter-spacing: normal;
    width: 132px;
    overflow:hidden;
    text-align: center;
	position:relative;
	behavior: url(css/PIE/PIE.htc);
}
#menu li:last-child {
	border-right:0;
}
#header {
    display: block;
    padding-top:15px;
    margin-bottom:5px;
    text-align:right;
    font-size:12px;
    background-image:url("../img/head_s2.png");
    background-repeat:no-repeat;
    height:15px;
	background-position-y: 2px;
}
#header a {
color:#333;
margin-left:1em;
}
#header a:hover {
text-decoration:underline;
}
/* menu <------------------------------------ */


/* main.php ---------------------------------> */
.mode01, .mode02 {
margin-bottom:20px;
}
.mode01 h2, .mode02 h2 {
padding:5px 10px;
margin-bottom:10px;
font-size:14px;
font-weight:bold;
background-color: #eee;
border-radius: 3px;
border: 1px solid #ccc;
text-shadow: 1px 1px 1px #f1f1f1;
position:relative;
behavior: url(css/PIE/PIE.htc);
}
.mode01 ul,
.mode02 ul {
    overflow: hidden;
}
.mode01 li{
border:none;
box-shadow: 0 8px 3px -5px rgba(0,0,0,.2);
border-radius: 100% / 33px;
position:relative;
behavior: url(css/PIE/PIE.htc);
width:100%;
margin-bottom:1%;
}
.mode01 li:hover{
box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
behavior: url(css/PIE/PIE.htc);
}
.mode02 li .shadow {
width:390px;
}
.mode01 li .shadow,
.mode02 li .shadow {
height:115px;
padding:10px 0;
border:1px solid #ccc;
background-color:#fff;
border-radius: 3px;
}
.mode02 li .noshadow:hover{
background:#fff;
}
/*.mode01 li:first-child{
    margin-right:2%;
}*/
.mode01 .step{
padding: 0 0 6px 20px;
font-size:13px;
color:#FF5555;
font-weight:bold;
}
.mode01 .media-block {
overflow: hidden;
}
.mode01 .media-block .media {
display:inline-block;
vertical-align:top;
float:left;
padding: 0 30px;
}
.mode01 .media-block .media img {
width:78px;
height:78px;
}
.mode01 .media-block .content {
vertical-align:top;
padding-right:14px;
}
.media-block .content h3 {
font-size:18px;
font-weight:bold;
padding: 0 0 5px;
}
.media-block .content .description {
font-size:13px;
}

.mode01 li a.box,
.mode02 li a.box {
display:block;
color:#333;
}
.mode02 ul{
margin-top:10px;
}
.mode02 li{
border:none;
float:left;
box-shadow: 0 8px 3px -5px rgba(0,0,0,.2);
border-radius: 100% / 33px;
position:relative;
margin: 0 2% 2% 0;
behavior: url(css/PIE/PIE.htc);
}
.mode02 li:nth-child(3n) {
    margin-right: 0;
}
.mode02 li:hover{
box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
}
.mode02 li .shadow{
height:238px;
width:254px;
}
.mode02 li.firstchild{
}
.mode02 li.secondchild,
.mode02 li.thirdchild{
margin-left:16px;
}
.mode02 .step{
padding: 0 0 6px 20px;
font-size:13px;
color:#FF5555;
font-weight:bold;
}
.mode02 .label .premium {
display:table-cell;
text-align:right;
}
.mode01 .premium_s {
background-image:url("../img/premium_s.gif");
background-repeat:no-repeat;
background-position:307px 5px;
}
.mode02 .premium_s {
background-image:url("../img/premium_s.gif");
background-repeat:no-repeat;
background-position:171px 5px;
}

.mode02 .media-block {
}
.mode02 .media-block .media {
text-align:center;
}
.mode02 .media-block .media img{
width:89px;
height:89px;
}
.mode02 .media-block .content {
padding:0 20px;
}
.mode02 .media-block .content h3 {
padding:15px 0 5px 0;
text-align:center;
}

/* main.php <--------------------------------- */

.welcome_message {
    font-size:12px;
    display:table;
    vertical-align:top;
    width:100%;
}
.welcome_message b {
padding:0 3px;
}
.welcome_message div {
    display:table-cell;
}
.trial_info {
    width:200px;
    text-align:right;
}

#content_left {
    width: 620px;
    float:left;
}
#content_right {
    width: 160px;
    vertical-align: top;
    padding: 0 0 0 20px;
    float:right;
}

.side_menu {
    width: 160px;
}
.side_menu .report {
    margin: 0 0 12px 0;
}
.side_menu .box {
    border:solid 1px #ccc;
    margin: 10px 0;
}
.side_menu .box h2 {
    padding:3px 10px;
background: #cccccc;
background: -moz-linear-gradient(top,  #cccccc 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top,  #cccccc 0%,#e5e5e5 100%);
background: -o-linear-gradient(top,  #cccccc 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top,  #cccccc 0%,#e5e5e5 100%);
background: linear-gradient(to bottom,  #cccccc 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#e5e5e5',GradientType=0 );
    border-bottom:solid 1px #ccc;
}
.side_menu .box h2 span {
    color:#fff;
    font-size:12px;
    font-weight:bold;
    text-shadow: 1px 1px 1px #747474;
    -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#747474,offx=1,offy=1)";
    display:block;
}
.side_menu .links ul {
  list-style-image: url("../img/mark.gif");
  padding:5px 0 10px 25px;
}
.side_menu .links li {
    padding:8px 0;
}
.side_menu .box a:hover {
    text-decoration:underline;
}
.side_menu .operation ul {
  padding:5px 0 10px 10px;
}
.side_menu .operation li {
    padding:8px 0;
    font-size:12px;
}
.side_menu .operation li span {
    padding:0 0 0 5px;
}
.side_menu .operation li img {
    vertical-align:-0.2em;
}
.side_menu .operation li .keyimg {
border: 1px solid #ccc;
padding: 2px 4px;
background-color: #ddd;
border-radius: 2px;
box-shadow: 1px 1px 1px;
margin-right:2px;
}
.side_menu .box a {
    color: #333;
}



/* cards.php --------------------------------> */

.desk {
	background-image: url("../img/bg.gif");
	background-repeat: repeat;
	border-radius: 15px;
    z-index:1;
    position:relative;
    box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.5);
}
.card_area {
    position:relative;
}
#cardContainer {
    height:254px;
    background-image:url("../img/cardarea.gif");
    background-repeat:no-repeat;
    padding: 48px 96px;
    background-size: 100%;
}

#card {
    background-image: url(../img/flashcard.png);
    background-repeat: no-repeat;
    background-size: 431px 264px;
    background-position: top center;
}

.frontPanel {
    padding: 25px 30px 25px 25px;
    height: 220px;
    position:relative;
}
.backPanel {
    padding: 25px 30px 25px 25px;
    height: 220px;
    position:relative;
}
.drop_box {
    border: 1px solid black;
    text-align: center;
    padding: 10px;
    margin: 10px;
}
.frontPanel .word {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.backPanel .word {
    font-size: 30px;
    text-align: center;
    padding: 0 0 5px 0;
    margin: 0;
    font-weight: bold;
}
.w_s .word {
font-size:26px;!important;}
.w_ss .word {
font-size:22px;!important;}
.w_sss .word {
font-size:20px;!important;}
.w_ssss .word {
font-size:18px;!important;}
.ej .frontPanel .word,
.idej .frontPanel .word {
    margin-top:21px;
}
.pron .frontPanel .word {
    margin-top:65px;
}
.je .backPanel .word {
    font-size: 24px;
    font-weight: normal;
    margin-top: 8px;
}
.spk .backPanel .word {
    font-size: 24px;
    font-weight: normal;
}
.pronunciation {
    font-size: 18px;
    text-align: center;
    font-family: "Lucida Sans Unicode","Lucida Grande";
}

.pron .backPanel .pronunciation {
    font-size:26px;
    margin: 0;
}

/*ｄに近いｔ*/
.vt {
    text-decoration: underline;
}
/*かぎ括弧*/
.bt {
	font-size: small;
	vertical-align: top;
}
/*発音したりしなかったりするtとd*/
.i4t {
    letter-spacing: 0;
    font-style: oblique;
}
.memo {
    font-size: 10px;
    color: #444444;
    padding: 5px 0;
    text-align: center;
}
.idje_japanese, .idej_japanese {
    text-align: center;
    font-size: 16px;
    padding: 10px 0;
}
.example {
    font-size: 12px;
    padding-top: 2px;
}
.example b {
color:#a52a2a;}
.hint {
    font-size: 16px;
    text-align: center;
    color: #444444;
    padding: 5px 0;
}
.je .hint span {
    font-weight:bold;
}
.short_jpn {
    font-size: 18px;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
}
.je .short_jpn {
    font-weight: bold;
    font-size:26px;
}
.je .frontPanel .short_jpn {
    margin-top:68px;
}
.je .backPanel .short_jpn {
    margin-top:11px;
}
.spk2 .short_jpn {
    margin-top: 2em;
}
.spk .situation {
    text-align:center;
}
.spk .frontPanel .situation {
    margin-top:35px;
}
.pron .backPanel .short_jpn {
    font-size:12px;
    font-weight: normal;
    margin: 6px 0 0 0;
}
.ej .backPanel .short_jpn .word_class {
    font-size:12px;
    font-weight: normal;
}
.word_stem,
.com_word_stem,
.short_jpn_note {
    font-size: 12px;
    color: #444444;
    margin: 4px 0;
    text-align: center;
    line-height:140%;
}
.card_icons {
    overflow: hidden;
    height:35px;
}
.sound {
    width:32px;
    float:right;
    margin-right: 5%
}
.mic_status {
    margin: auto;
    padding: 0;
    position: absolute;
    top: 34px;
    left: 312px;
    width: 30px;
}
.mic_status img {
	width:30px;
	height:26px;
}
.timer_status {
    margin: auto;
    padding: 0;
    position: absolute;
    top: 80px;
    left: 374px;
    width: 30px;
}
#card .extra-card p {
	text-align: center;
	margin-top: 3em;
}
/* 点滅 */
.blinking{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    50% {opacity:0.5;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    50% {opacity:0.5;}
    100% {opacity:1;}
}
@keyframes blink{
    50% {opacity:0.5;}
    100% {opacity:1;}
}
.jp-single-player {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 350px;
}

.speech_text {
    margin: 1em 0;
    text-align: center;
}
#info {
    width:620px;
    background-color: #555;
}
#info .title {
width:25%;
font-size: 26px;
text-align: center;
line-height: 180%;
color: #fff;
}
#info .info_right {
    width:75%;
    border-top: 3px solid #555;
    border-bottom: 3px solid #555;
}
#info .info_right td {
width: 33%;
background-color: #6a6a6a;
border-right: 3px solid #555;
color: #fff;
}
#info .label {
 font-size: 12px;
 color:#fff;
 text-align: center;
 font-weight: bold;
 letter-spacing:1px;
}
#info .card_num_area {
text-align: right;
padding-right: 1em;
border-top: 3px solid #555;
font-size: 14px;
padding-top: 3px;
}
#info .card_num {
    font-size:18px;
    font-weight:bold;
}

.selectedBox {
    border-bottom: 2px solid #ffa500;
}

.card_area .save_btn {
    width:115px;
    position:absolute;
    top:100%;
    left:100%;
    margin-top:-31px;
    margin-left:-118px;
    background-image:url("../img/save_btn.gif");
    background-repeat:no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.card_area .save_btn:hover,
.card_area .save_btn:active {
    background-image:url("../img/save_btn_a.gif");
    background-repeat:no-repeat;
}
.card_area .save_btn a {
    display:block;
    height:30px;
}
.overlay {
    top:0;
    left:0;
    background:#e9e9e9;
    opacity:0.5;
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    zoom:1;
}

.overlay02 {
    top:0;
    left:0;
    background:#d5eaff;
    opacity:0.4;
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    zoom:1;
}

.overlay03 {
    top:0;
    left:0;
    background:#000;
    opacity:0;
    width:100%;
    height:100%;
    position:absolute;
    z-index:99;
    zoom:1;
    transition: .3s linear;
    visibility: hidden;
}
.overlay03.is-open {
    opacity: 0.5;
    visibility: visible;
}

.d_wrapper .dialogue {
    position:absolute;
    background-color:#fff;
    border:solid 1px;
    border-radius:10px;
    width:250px;
    height:150px;
    overflow: hidden;
    top:50%;
    left:50%;
    margin-top:-85px;
    margin-left:-125px;
    z-index:98;
behavior: url(css/PIE/PIE.htc);
}
.d_wrapper .dialogue .head {
    background-color:#555;
    color:#fff;
    font-weight:bold;
    font-size:12px;
    padding:3px 12px;
    border-radius:6px 6px 0 0;
behavior: url(css/PIE/PIE.htc);
}
.d_wrapper .dialogue .message {
    text-align:center;
    padding:30px 10px 0 10px;
    max-height: 55px;
}
.d_wrapper .dialogue .btn_area {
    padding:20px 0;
    margin: 0 auto;
/*    width:170px;*/
    text-align: center;
/*    position: absolute;
    top: 55%;
    left: 17%;*/
}
.d_wrapper .dialogue .btn_area a {
    padding:5px 10px;
    margin:0 10px;
    background-color:#efefef;
    color:#4e95dc;
    font-weight:bold;
    border:solid 1px #bfbfbf;
    border-radius:5px;
    font-size:12px;
position:relative;
behavior: url(css/PIE/PIE.htc);
}
.d_wrapper .dialogue .btn_area a:hover {
    background-color:#dfdfdf;
}

.advice_wrapper {
    max-width:428px;
    height:270px;
    margin: 0 auto;
}
.advice_wrapper .dialogue {
    width:auto 0;
}
.advice_wrapper .dialogue .head {
    margin: 20px 0;
    font-size:16px;
    text-align: center;
}
.advice_wrapper .dialogue .title {
    padding: 22px 20px 0;
    font-size:14px;
}
.advice_wrapper .dialogue .body {
    text-align:center;
    margin:1.5em 50px;
    font-size:14px;
}

.finmsg {
width:396px;
height:224px;
background-color:#fff;
border-radius:5px;
position:absolute;
top:50%;
left:50%;
margin-top:-124px;
margin-left:-202px;
border:2px solid #d52b2b;
z-index:98;
box-shadow: 1px 1px 3px}

.finmsg .title {
padding:10px 40px;
text-align: center;
font-size:18px;}

.finmsg .body {
padding:2em 60px 10px 40px;
}

.finmsg .body p {
line-height:120%;
margin-bottom:.5em;}

.finmsg .body p a {
cursor:pointer;}

.finmsg .body p.tomorrow {
margin-top:1em;}
.card_review_btn {
text-align: center;
font-size:16px;
}

.cards_login_form {
width:340px;
height:300px;
background-color:#fff;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin-top:-170px;
margin-left:-150px;
border:5px solid #FF9900;
z-index:1000;}

.cards_login_form .inner_wrap {
    padding:2em 1em;
}

.cards_login_form ul {
    margin:2em 0;
}

.cards_login_form .inner_wrap .mail,
.cards_login_form .inner_wrap .pw {
    font-size:16px;
    width: 96%;
}
.cards_login_form .inner_wrap button {
    cursor: pointer;
    border-radius: 3px;
    width: 96%;
    height: 2.5em;
    background-color: #eee;
}

.card_review_btn a {
display: block;
background-color: #eee;
color: #5D98CF;
border: 1px #aaa solid;
padding: 3px;
border-radius: 3px;
box-shadow: 1px 1px #ccc;
}
.card_review_btn a:hover {
background-color: #ddd;
}
.card_review_btn a:active
 {
background-color: #ddd;
-ms-transform: translateY(3px);
-webkit-transform: translateY(3px);
transform: translateY(3px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}

#r_wrapper {
background-color: #fff;
-webkit-box-shadow: 3px 3px 2px #6a6a6a;
position: absolute;
top: 15px;
left: 15px;
z-index: 98;}

#r_wrapper iframe {
width:590px;
height:390px;}

#r_wrapper .close_btn {
display:block;
position: absolute;
top: 2px;
right: 2px;
background-image:url("../img/rp/rp_close_btn.gif");
background-repeat:no-repeat;
width:25px;
height:25px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;}

.margin_under_card {
    margin-bottom:50px;
    clear: both;
}
/* cards.php <-------------------------------- */

/* accountRegist.php ------------------------> */
#registForm {
    margin:20px 0;
}
#registForm table,
#registForm table tr,
#registForm table th,
#registForm table td {
    border: 1px solid #ffa500;
}
#registForm table {
    width: 420px;
    font-size: 12px;
    border-width: 2px;
}
#registForm table tr {
    height: 30px;
}
#registForm table td {
    padding-left:10px;
}

#registForm {
    margin:20px 0;
}
#mailRegistForm table,
#mailRegistForm table tr,
#mailRegistForm table th,
#mailRegistForm table td {
    border: 1px solid #ffa500;
}
#mailRegistForm table {
    width: 420px;
    font-size: 12px;
    border-width: 2px;
}
#mailRegistForm table tr {
    height: 30px;
}
#mailRegistForm table td {
    padding-left:10px;
}

/* accountRegist.php <------------------------ */

#total_play_word_count {
	font-size: 24px;
}

/* movie.php ------------------------> */
.movie_area {
}
.movie_area h2 {
margin:10px 0px 20px 0;
padding:0 6px;
font-size: 18px;
font-weight: bold;
border-left:5px solid #ccc;
}
.movie_area .movie iframe {
width: 800px;
height: 490px;
}
.movie_area .menu {
vertical-align: top;
margin-bottom:30px;
overflow: hidden;
}
.movie_area .menu h3 {
font-weight:bold;
padding-bottom:10px;
}
.movie_area .menu ul {
float: left;
padding-left: 15px;
padding-right: 30px;
}
.movie_area .menu li {
padding:5px 0;
width:300px;
}
.movie_area .menu li a:hover {
text-decoration:underline;
}
#movie {
    padding-bottom: 20px;
}
#movie .dummy {
    height:150px;
}
/* movie.php <------------------------ */

/* kotsu.php ------------------------> */
.kotsu_area {
}
.kotsu_area h2 {
margin:10px 5px;
padding:0 8px;
font-size: 18px;
font-weight: bold;
border-left:5px solid #ccc;
}
.kotsu_area ul {
margin-left:40px;
padding:10px 0;
list-style-image: url("../img/mark.gif");
}
.kotsu_area li {
padding:.5em 0;
font-weight: bold;
font-size: 16px;
}
.kotsu_area li a {
color:#333;
}
.kotsu_area li a:hover {
text-decoration:underline;
}
.kotsu_article {
width:600px;
margin:0 auto 50px auto;
padding:20px;
}
.kotsu_article h1 {
margin: 10px 5px 30px 0px;
padding: 0 8px;
font-size: 18px;
font-weight: bold;
border-left: 6px solid #725538;
border-bottom: 1px dotted #725538;
}
.kotsu_article  h2 {
margin: 30px 0;
font-size: 16px;
font-weight: bold;
border-bottom: 1px dotted #725538;
}
.kotsu_article  h3 {
margin: 25px 0;
font-size: 14px;
font-weight: bold;
border-bottom: 1px dotted #d5bfaa;
padding: 12px 0 2px 0;
}

.kotsu_article .entry-content p {
margin-bottom:1.7em;
line-height: 1.714285714;
}
.kotsu_subindex {
width:500px;
margin:0 auto 30px auto;
}
.kotsu_subindex ul {
margin-left:40px;
padding:10px 0;
list-style-image: url("../img/mark.gif");
}
.kotsu_subindex li {
padding:.2em 0;
font-size:12px;
}
/* kotsu.php <------------------------ */

.pan_navi {
font-size:12px;
padding:5px 0;
}
.pan_navi a {
color:#333;
text-decoration:underline;
}

/* inquiry.php ------------------------> */
.inquiry .label {
font-weight:bold;
font-size:12px;
}
.inquiry input {
margin-bottom:20px;
}
.inquiry input[type=text],
.inquiry input[type=tel] {
width:200px;
}
.inquiry textarea {
width:400px;
height:300px;
}
.inquiry p {
line-height: 1.4em;
}
/* inquiry.php <------------------------ */
/* skypeSupport.php ------------------------> */
.skypesupport .label {
font-weight:bold;
font-size:12px;
margin-top:20px;
}
.skypesupport input[type=text] {
width:200px;
}
.skypesupport textarea {
width:400px;
height:150px;
}
.skypesupport p {
line-height: 1.4em;
}
.skypesupport table,
.skypesupport tr {
border:1px solid #aaa;
}
.skypesupport th {
padding:.3em 3em;
}
.skypesupport td {
padding:.5em 3em;
}
.skypesupport th {
color:#fff;
background-color:#aaa;
font-weight:bold;
text-align:center;
}
/* skypeSupport.php <------------------------ */
.premium {
width:600px;
margin:0 auto;
}
.premium .title {
background-image:url("../img/premium_title.png");
background-repeat:no-repeat;
margin-bottom:2em;
}
.premium h1 {
padding:62px 0;
font-size:32px;
font-weight:bold;
color:#333;
text-align:center;
line-height: 38px;
}
.premium h2 {
font-size:18px;
font-weight:bold;
padding:2px 0 2px 5px;
margin-bottom:1.4em;
border-left:6px solid #cc0000;
border-bottom:1px solid #cc0000;
}
.premium p {
padding-left:2em;
line-height: 1.4em;
margin-bottom:1em;
}
.premium ul {
padding-left:2em;
list-style-type:none;
}
.premium li {
padding-bottom:1em;
line-height: 1.4em;
background-image:url("../img/mark_p.gif");
background-repeat:no-repeat;
background-position:0px 4px;
padding-left:16px;
}
.premium table {
width:400px;
margin-left:2em;
border:1px dotted #ccc;
}
.premium td {
padding:1em 1.5em;
border-bottom:1px dotted #ccc;
}
.browserAlert {
border:3px double #cc0000;
padding:.3em 1em;
margin-top:1em;
background-color:#ffcccc;
font-weight:bold;
font-size:12px;
}
.browserAlertCards {
font-size:12px;
color:#888;
text-align:right;
width:620px;
margin-top:-1em;
}
.casec-offer-alert {
padding:.3em 1em;
margin-top:1em;
background-color:#ffbf80;
font-weight:bold;
font-size:12px;
border-radius: 5px;
}
.casec-offer-alert a {
    text-decoration: underline;
}
.ini-hidden {
    display: none;
}
.guide h1 {
text-align:center;
font-size:2em;
margin-bottom:30px;
padding:10px 0;
border-top:3px solid #cc0000;
border-bottom:3px solid #cc0000;
}
.guide h2 {
font-size:1.4em;
padding-bottom:2px;
border-bottom:1px dotted #aaa;
}
.guide h3 {
font-weight: bold;
margin-bottom:4px;
}
.guide p {
padding-bottom:1em;
line-height:1.4em;
margin-left: 2em;
}
.guide ul {
padding-left:2em;
}
.guide ul.qa {
padding-left: 0;
}
.guide .qa li.question {
padding: 3px .5em;
background-color: #eee;
}
.guide .qa li.answer {
padding: 0 2em;
margin-bottom: 2em;
}
.guide li {
margin-bottom:1em;
}
.guide table.pron_table {
margin-left:2em;
text-align:center;
border:1px solid #aaa;
}
.guide table.pron_table td,
.guide table.pron_table th {
padding:.3em .5em;
}
.guide table.pron_table td {
font-size:20px;
}
.guide table.pron_table th {
background-color:#eaf4ff;
}

.caution_before li {
font-size:1.2em;
font-weight:bold;
list-style-type:square;
}

hr.hr2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.double-line-through {
background-image:url(../img/double_line_through.gif);
background-repeat:repeat-x;
background-position: center;
}

.info_block {
padding-bottom:2em;
}
.info_block .title {
font-weight: bold;
padding: 0.4em 0;
background-color: #eee;
margin-bottom: 0.5em;
}
.info_block .body {
margin-left:2em;
padding:0.2em 0;
}
a.info_new {
font-weight:bold;
}
a.info_new:before {
content:url(../img/new01-022.gif);
}

.faq .index .cate_block {
margin-bottom:1em;
margin-left:2em;
}

.faq .index .cate_block ul {
list-style-type: square;
margin-left:2em;
padding-left:1em;
}

.faq .index .cate_block li {
line-height:130%;
}
.faq .index .cate_block h2 {
margin-bottom:.5em;
}

.faq .answer .cate_block li {
margin-bottom:3em;
}
.faq .answer .cate_block h2 {
padding: 0.3em;
margin: 0px 0px .5em 0px;
font-weight: bold;
font-size: 16px;
border-bottom: 1px dotted #ccc;
border-left: 12px double #ccc;
}

.faq .answer .cate_block h3 {
color: inherit;
background-color: #efefef;
padding: .3em;
margin: 0px 0px 1em 0px;
font-weight: bold;
}
.faq .answer .cate_block .answer_detail {
margin-left:2em;
}

.accuracy table {
margin-bottom:2em;
table-layout: fixed;
width: 100%;
}
.accuracy table,
.accuracy table th,
.accuracy table td {
border-collapse:collapse;
border:1px solid #eee;
}
.accuracy table th {
padding:.4em 1em;
background-color:#eee;
}
.accuracy table td {
padding: .5em 2em;
font-size: 20px;
font-weight: bold;
text-align: right;
}
.accuracy p {
padding-bottom:1em;
line-height:1.6em;
margin-left:1em;
}
.accuracy h2 {
font-size:16px;
padding:2px 0 2px 6px;
background-color:#eee;
border-left:5px solid #aaa;
}
.accuracy ul {
margin-left: 2em;
padding-left: 1em;
margin-bottom: 2em;
}
.accuracy li {
list-style-type: square;
line-height:1.4em;
margin-top:.5em;
}
.accuracy li.indent {
list-style-type: circle;
margin-left:3em;
margin-top:0;
}
table.play_summary th {
    text-align: center;
}
table.play_summary td {
    font-weight: normal;
    font-size: 14px;
}

.weak_words p {
line-height: 1.4em;
}
.weak_words table,
.weak_words tr {
border:1px solid #aaa;
}
.weak_words th {
padding:.3em 2em;
}
.weak_words td {
padding:.5em 2em;
}
.weak_words th {
color:#fff;
background-color:#aaa;
font-weight:bold;
text-align:center;
}
.weak_words input[type=button] {
height:auto;
}

table.weak_words_mail,
table.weak_words_mail tr {
border:0;
}
table.weak_words_mail td {
padding:.5em 1em .5em 0;
}
#hamburger {
    display: none;
}
#card_navi {
    display: none;
}

@media screen and (max-width: 768px) {
    html {
        background-color: #fff;
    }
    body {
        margin: 0;
        padding: 0;
        width: auto;
    }
    #header, #menu {
        display: none;
    }
    /* ハンバーガー ---> */
    #hamburger {
      display: block;
      padding:10px;
      background: dimgrey;
      color: white;
      overflow: hidden;
    }
    /* main ---> */
     ul.secondrow {
        margin-top:0;
    }
     .mode01 li,
     .mode02 li,
     .mode01 li:hover,
     .mode02 li:hover {
        box-shadow: none;
    }
     .mode01 .step,
     .mode02 .step {
        padding: 0 0 0 3px;
    }
     .media-block .content h3 {
        font-size: 16px;
    }
     .mode01 li,
     .mode02 li {
        width:100%;
        border-radius: 0;
        border-bottom: 2px dotted #ccc;
    }
    .mode02 li:nth-child(3n) {
        margin-right: 3%;
    }
     .mode01 li .shadow,
     .mode02 li .shadow {
        height:auto;
        width: 100%;
        padding:5px 0;
        border:0;
    }

     .mode01 .media-block .media,
     .mode02 .media-block .media {
        display: inline-block;
        vertical-align: top;
        float: left;
        padding: 6px 14px 6px 0;
    }
     .mode01 .media-block .media img,
     .mode02 .media-block .media img {
        width: 60px;
        height: 60px;
    }
     .mode01 .media-block .content,
     .mode02 .media-block .content {
        vertical-align: top;
        padding: 0 14px 10px 0;
        min-height: 70px;
    }
     .mode02 .media-block .content h3 {
        text-align: left;
        padding: 0 0 5px;
    }
     .mode02 li.secondchild,
     .mode02 li.thirdchild {
        margin-left: 0;
    }
    /* <--- main */
    #movie video {
        width: 92%;
        padding: 0 1em;
    }
    .guide p {
        margin-left:0;
    }
    .guide .qa li.answer {
        padding: 0 .5em;
    }
}

@media screen and (max-width: 425px) {
    .panel {
        padding: 10px;
    }
    .panel select {
        max-width: 100%;
    }
    .mode02 li {
        height: auto;
        margin: 0;
    }
    .mode02 li:nth-child(3n) {
        margin-right: 0;
    }
    .accuracy table th {
        font-size: 12px;
    }
    .accuracy table td {
        font-size:16px;
        padding: .5em 1em .5em 0;
    }
    table.play_summary td {
        font-size: 10px;
    }
    #r_wrapper {
        top:0;
        left:0;
        width:100%;
    }
    #r_wrapper iframe {
        width:100%;
    }
    .userConf input[type=button] {
        width: 100%;
    }
    #henko_btn_jumper {
        font-size: 12px;
    }
    /* inquiry.php ------------------------> */
    .inquiry .label {
    font-weight:bold;
    font-size:12px;
    }
    input[type=submit],
    .inquiry input[type=text],
    .inquiry input[type=tel],
    .inquiry textarea {
    width:100%;
    }
    .inquiry textarea {
        height: 200px;
    }
    .inquiry p {
    line-height: 1.4em;
    }
    /* inquiry.php <------------------------ */

    .info_block .body {
        margin-left: 0;
    }
    .contract select {
        display: block;
    }
    input[type="file"],
    input[type="text"],
    textarea,
    .accountDelete .reason textarea {
        width: 100%;
    }
    .userData input[type=button],
    .contract input[type=button],
    .accountDelete input[type=button] {
        width: 100%;
    }

    .cards_login_form {
        left:40%;
    }
    .advice_wrapper .dialogue .body {
        margin: 1.5em 1em 1.5em 0.5em;
    }
}

/* モバイル用デザイン */
body.mb {
    margin: 0;
    padding: 0;
    width: auto;
}
.mb #header, .mb #menu {
    display: none;
}
/* ハンバーガー ---> */
.mb #hamburger {
  display: block;
  padding:10px 10px 8px 10px;
  background: dimgrey;
  color: white;
  overflow: hidden;
}
#hamburger .sitename {
    float: right;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 1px;
    font-weight: bold;
}
#nav-drawer {
  position: relative;
  float:left;
}
#nav-drawer span.nav-new {
    position: absolute;
    width: 24px;
    height: 24px;
}
#nav-drawer span.nav-new:after {
    position: absolute;
    font-size: 10px;
    content: '！';
    color: #fff;
    background: #C00000;
    bottom: -5px;
    right: -5px;
    border-radius: 50%;
    padding-right: .2em;
    padding-left: .2em;
}
.nav-unshown {
  display:none;
}

#nav-open {
    display: inline-block;
    vertical-align: middle;
}

#nav-open span.nav-border,
#nav-open-c span {
    position: absolute;
    background-image: url(/img/burger.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 24px;
    width: 24px;
    cursor: pointer;
}
/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 70%;
    max-width: 330px;
    height: 100%;
    background: #eee;
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content li {
    border-bottom: 1px solid #ccc;
}
#nav-content li a {
    display: block;
    padding: 1em;
    color: #333;
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.mb #hamburger-c {
  margin: 0 62px 0 0;
  color: white;
}
#nav-drawer-c {
  position: relative;
  float:right;
}
#nav-open-c {
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*閉じる用の薄黒カバー*/
#nav-close-c {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

#nav-content-c {
    overflow: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 70%;
    max-width: 330px;
    height: 60%;
    background: #eee;
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content-c li {
    border-bottom: 1px solid #ccc;
}
#nav-content-c li a {
    display: block;
    padding: 1em;
    color: #333;
    font-weight: normal;
}
/*チェックが入ったらもろもろ表示*/
#nav-input-c:checked ~ #nav-close-c {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input-c:checked ~ #nav-content-c {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* <--- ハンバーガー */

.mb #contents {
    margin:14px 0 20px 0;
}

/* card ---> */
.mb .browserAlertCards {
    width:100%;
}
.mb .welcome_message {
    display: none;
}
.mb #content_left {
    width:100%;
}
.mb #info {
    width:100%;
}
.mb #info .title {
    font-size:14px;
}
.mb #info .label {
    font-size: 10px;
    padding: 0 .6em;
    line-height: 1em;
}
.mb #info .card_num {
    font-size: 14px;
}
.mb #info .card_num_area {
    font-size: 10px;
}
.mb #cardContainer {
    width: 100%;
    padding:20px 0;
    height:340px;
    background-size:cover;
}
.mb #card {
    background-size:100% 240px;
}
.mb #content_right {
    display: none;
}
.mb #card_navi {
    display: block;
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    background-color: #eee;
    padding: 4px 4px 0 4px;
    border-top: 1px solid #ccc;
}
.mb #card_navi .nav-btn-area {
    max-width: 350px;
}
.mb #card_navi ul.card_nav_list > li {
    float: left;
    min-width: 90px;
    max-width: 102px;
    width: 33.3%;
    min-height: 45px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    background-color: #555;
    margin: 0 2px 6px 0;
}
.mb #card_navi ul.card_nav_list li.dummy {
    box-shadow: none;
    background-color: transparent;
}
.mb #card_navi ul.card_nav_list li.menu {
    background-color: #888;
}
.mb #card_navi ul.card_nav_list > li > a,
#nav-drawer-c {
    display: block;
    text-align: center;
    padding: 12px 0;
    font-weight: bold;
    color: #fff;
    user-select:none;
    -webkit-user-select: none;
}
.mb .save_btn {
    display: none;
}

.mb .frontPanel,
.mb .backPanel {
    padding: 20px 30px 25px 25px;
}
.mb .margin_under_card {
    margin-bottom:0;
}
.mb #footer {
    display:none;
}

@media screen and (min-width: 768px) {
    .mb #content_left {
        width:620px;
        margin:0 auto;
        float:none;
    }
    .mb #card {
        background-size: 431px 264px;
    }
    .mb .frontPanel,
    .mb .backPanel {
        padding:20px 114px 25px 100px;
    }
}

/* <--- card*/

.cancel{
  display: inline-block;
  position: relative;
  margin: 0 20px 0 7px;
  padding: 0;
  width: 4px;
  height: 20px;
  background: #333;
  transform: rotate(45deg);
}
.cancel:before{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: #333;
}

@media print{
    .no_print{
        display: none;
    }
}