@charset "UTF-8";

html {
    height: 100%;
    height: 100vh;
}

body {
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    background: #E3E3E3;
    color: #000;
    height: 100%;
    height: 100vh;
    line-height: 1.6;
}

/* default */

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    word-break: break-all;
    font-size: inherit;
    width: 100%;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

li {
    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;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input,
textarea,
select {
    *font-size: 100%;
}

legend {
    color: #000;
}

select,
input,
button,
textarea {
    font: 99% arial, helvetica, clean, sans-serif;
}

pre,
code,
kbd,
samp,
tt {
    font-family: monospace;
    *font-size: 108%;
    line-height: 100%;
}

.aligncenter {
    text-align: center;
}

img {
    vertical-align: bottom;
    line-height: 1;
}

a {
    color: #E8595F;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    text-decoration: none;
}

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

.clearfix:after,
.inner:after,
.wrapper:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.overlay {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 1500;
    cursor: pointer;
}

.wrapper {
    padding: 10px 0 0px 0;
    width: 730px;
    margin: 0 auto;
}

.fixed .wrapper {
    margin-top: 50px;
}

.fixed2 .wrapper {
    margin-top: 40px;
}

.hasFixedFooter .wrapper {
    padding-bottom: 80px;
}

.wrapper-report {
    margin-bottom: 15px;
}

.inner {
    margin: 0 auto;
}

#openMenu {
    display: block;
    text-indent: -99em;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 15px;
    background: url(../images/common/menu.svg) no-repeat left top;
    background-size: 38px;
    width: 38px;
    height: 26px;
}


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

header {
    background: #fff;
    position: relative;
}

.headerLogoChallengetouch {
    background: url(../images/common/logo_challengetouch.png) no-repeat left top;
    background-size: 100%;
    width: 151px;
    height: 11px;
    position: absolute;
    left: 10px;
    top: 7px;
    text-indent: -99em;
    overflow: hidden;
}

.headerLogoBenesse {
    width: 76px;
    position: absolute;
    left: 20px;
    top: 0px;
}

.headerLogoBenesse img {
    width: 100%;
}

.headerStudentName {
    position: absolute;
    width: 100%;
    text-align: right;
    line-height: 1.0;
    font-size: 18px;
}

.headerTextChallengetouch {
    position: absolute;
    left: 10px;
    top: 7px;
    font-size: 12px;
    line-height: 1;
}

.headerLogoOuennet {
    background: url(../images/common/logo_ouennet.png) no-repeat left top;
    background-size: 100%;
    position: absolute;
    left: 0px;
    bottom: 0;
    text-indent: -99em;
    overflow: hidden;
}

.headerLogoKodomochallenge {
    background: url(../images/common/logo_kodomochallenge.svg) no-repeat left top;
    background-size: 100%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, -50%);
    text-indent: -99em;
    overflow: hidden;
    width: 139px;
    height: 25px;
}

.headerMenu {
    position: absolute;
    right: 10px;
    top: 10px;
    line-height: 1;
    text-align: right;
}

.headerMenu li {
    display: inline-block;
    margin-left: 20px;
    font-size: 13px;
}

.headerMenu li a {
    display: block;
    position: relative;
    color: #0070CB;
    text-decoration: underline;
}

.headerMenu li a:hover {
    text-decoration: none;
}

.headerMenu li a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    background: url('../images/common/arrow_headermenu.svg') 0 0 no-repeat;
    background-size: 100%;
    width: 10px;
    height: 11px;
}

/* header type1（通常） ---------------------------------------*/

.headerType1 {
    height: 83px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.headerType1 .headerLogoOuennet {
    width: 232px;
    height: 58px;
}

.headerType1 .headerStudentGrade {
    position: absolute;
    right: 68px;
    top: 22px;
    line-height: 1.0;
    font-size: 13px;
}

.headerType1 .headerStudentName {
    right: 20px;
    top: 55px;
}


/* header type2（メッセージタイプ） ---------------------------------------*/

.headerType2 {
    height: 60px;
    border-bottom: 1px solid #ccc;
}

.headerType2 .headerTextChallengetouch {
    top: 5px;
}

.headerType2 .headerLogoOuennet {
    width: 172px;
    height: 41px;
    left: 10px;
    bottom: 0;
}

/* header type3（ログイン） ---------------------------------------*/

.headerType3 {
    height: 110px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.headerType3 .headerLogoOuennet {
    left: 15px;
    width: 258px;
    height: 60px;
}

.headerType3 .headerTextChallengetouch {
    left: 20px;
    top: 32px;
    font-size: 13px;
}

/* header type4（設定） ---------------------------------------*/

.headerType4 {
    height: 170px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.headerType4 .headerLogoOuennet {
    left: 15px;
    width: 258px;
    height: 60px;
}

.headerType4 .headerTextChallengetouch {
    left: 20px;
    top: 95px;
    font-size: 13px;
}

.headerSupportMenu {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    line-height: 1;
}

.headerSupportMenu>li {
    text-align: center;
    width: 100%;
    font-size: 16px;
}

.headerSupportMenu>li:not(:first-child) {
    border-left: 1px solid #eee;
}

.headerSupportMenu>li a {
    display: block;
    padding: 12px 0;
    color: #4A4A4A;
    position: relative;
}

.headerSupportMenu__support a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: url('../images/common/icon_fav.svg') center center no-repeat;
    background-size: 100%;
    width: 22px;
    height: 20px;
}

.headerSupportMenu__faq a::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: url('../images/common/icon_faq.svg') center center no-repeat;
    background-size: 100%;
    width: 34px;
    height: 25px;
}

.headerLogoutMenu {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0px;
}

.headerLogoutMenu li {
    display: inline-block;
    margin-left: 10px;
}

.headerLogoutMenu li a {
    display: block;
    width: 150px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 35%);
    background-image: linear-gradient(to bottom, #F3797D, #fc9292, #fa8c8d 6%, #ef6c70 19%, #e8595f);
    max-width: 100%;
    height: 40px;
    line-height: 40px;
    display: block;
    color: #fff !important;
    text-align: center;
    font-family: HiraginoSans-W6;
    font-size: 16px;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 auto;
}


/* header type5 こどもちゃれんじ ---------------------------------------*/

.headerType5 {
    height: 53px;
    border-bottom: 1px solid #ccc;
}


/* global nav common ---------------------------------------*/

.gnav {
    background: #fff;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}

.gnav ul {
    font-size: 0;
    text-align: center;
}

.gnav ul li {
    display: inline-block;
    font-size: 15px;
    line-height: 1.3;
}

.gnav ul li a {
    display: block;
    text-decoration: none;
}

.fixed .gnav,
.fixed2 .gnav {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 1000;
}


/* global nav top ---------------------------------------*/

.gnav-top ul li {
    width: 33.33333%;
}

.gnav-top ul li a {
    height: 45px;
    line-height: 45px;
    border-bottom: 4px solid #fff;
    color: #E8595F;
}

.gnav-top ul li.current a,
.gnav-top ul li a:hover {
    border-color: #E8595F;
    font-weight: bold;
}


/* global nav subject ---------------------------------------*/

.gnav-subject ul li {
    width: 20%;
}

.gnav-subject ul.class_5column li {
    width: 20%;
}

.gnav-subject ul.class_4column li {
    width: 25%;
}

.gnav-subject ul.class_3column li {
    width: 33.3333%;
}

.gnav-subject ul.class_2column li {
    width: 50%;
}

.gnav-subject ul.class_1column li {
    width: 100%;
}

.gnav-subject ul li a {
    height: 27px;
    padding-top: 10px;
    border-bottom: 4px solid #fff;
    color: #434343;
}

.gnav-subject ul li a.current,
.gnav-subject ul li a:hover {
    border-color: #434343;
    font-weight: bold;
}

.gnav-subject ul li.kokugo a.current,
.gnav-subject ul li.kokugo a:hover {
    border-color: #e65a78;
    color: #e65a78;
}

.gnav-subject ul li.sansu a.current,
.gnav-subject ul li.sansu a:hover {
    border-color: #3264CD;
    color: #3264CD;
}

.gnav-subject ul li.rika a.current,
.gnav-subject ul li.rika a:hover {
    border-color: #009664;
    color: #009664;
}

.gnav-subject ul li.syakai a.current,
.gnav-subject ul li.syakai a:hover {
    border-color: #f08c00;
    color: #f08c00;
}

.gnav-subject ul li.eigo a.current,
.gnav-subject ul li.eigo a:hover {
    border-color: #7323af;
    color: #7323af;
}


/* slide menu ---------------------------------------*/

#slideMenu {
    position: fixed;
    right: -350px;
    top: 0px;
    width: 348px;
    max-width: 100%;
    background: #EAEAEA;
    box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.8);
    z-index: 2000;
    overflow: auto;
}

.slideMenu__head {
    background: #fff;
    padding: 18px 15px;
    overflow: hidden;
}

#closeMenu {
    background: url(../images/common/menu_close.png) no-repeat left top;
    background-size: 23px;
    width: 23px;
    height: 23px;
    display: block;
    text-indent: -99em;
    overflow: hidden;
    float: right;
}

.slideMenu__changegrade {
    padding: 13px 15px;
    overflow: hidden;
}

.slideMenu__changegrade p {
    float: left;
    width: 50%;
    line-height: 1.0;
    padding-top: 10px;
    font-size: 15px;
}

.slideMenu__changegrade select {
    float: right;
    width: 100px;
    padding: 5px 10px;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    background: url(../images/common/icon_select.png) 97% 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #fff 50%, #eee 100%);
    background: url(../images/common/icon_select.png) 97% 50% no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eee 100%);
    background-size: 15px 35px;
    border-radius: 5px;
}

select::-ms-expand {
    display: none;
}

.slideMenu__nav ul li {
    margin-bottom: 2px;
    font-size: 15px;
}

.slideMenu__nav ul li.slideMenu__support,
.slideMenu__nav ul li.slideMenu__findpotential {
    margin-top: 12px;
}

.slideMenu__nav ul li a,
.slideMenu__logout a {
    display: block;
    background: #fff;
    padding: 15px;
    line-height: 1.2;
    color: #434343;
    position: relative;
    font-size: 15px;
}

.slideMenu__nav ul li a:after {
    display: block;
    content: '';
    background: url(../images/common/icon_slidemenu.png) no-repeat left top;
    background-size: 100%;
    width: 5.5px;
    height: 9.5px;
    position: absolute;
    right: 10px;
    top: 40%;
}

.slideMenu__nav ul li.slideMenu__edit a:after {
    top: 15px;
}

.slideMenu__nav ul li.slideMenu__edit a div,
.slideMenu__nav ul li.slideMenu__support a div,
.slideMenu__nav ul li.slideMenu__edit a div,
.slideMenu__nav ul li.slideMenu__findpotential a div {
    margin-bottom: 7px;
}

.slideMenu__nav ul li.slideMenu__edit a p,
.slideMenu__nav ul li.slideMenu__support a p,
.slideMenu__nav ul li.slideMenu__edit a p,
.slideMenu__nav ul li.slideMenu__findpotential a p {
    font-size: 13px;
    line-height: 1.2;
    margin-top: 2px;
}

.slideMenu__logout a:after {
    display: inline-block;
    content: '';
    background: url(../images/common/icon_logout.png) no-repeat left top;
    background-size: 100%;
    width: 14.5px;
    height: 17.5px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    margin-left: 5px;
}

.slideMenu__logout {
    padding: 10px 0 12px;
}

.slideMenu__nav-sub ul li {
    margin-bottom: 1px;
}

.slideMenu__nav-sub ul li a {
    padding: 12px 15px;
    font-size: 13px;
}

.slideMenu__copyright {
    text-align: center;
    display: block;
    padding: 25px;
    font-size: 12px;
}

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

.footerBnr {
    padding: 20px 0px 10px;
    width: 730px;
    margin: 0 auto;
}

.footerBnr a {
    font-size: 12px;
    text-decoration: none;
    line-height: 1.5;
}

.footerBnrPoint {
    float: left;
    width: 357px;
}

.footerBnrPoint a {
    display: block;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 auto 10px;
    color: #6E422E;
    background: url(../images/common/icon_bnr_point.png) no-repeat 10px center #FEF8D0;
    background-size: 82px;
    padding: 15px 10px 10px 105px;
    width: 242px;
}

.footerBnrPoint a h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 5px;
    font-weight: bold;
}

.footerBnrGuardian {
    float: right;
    width: 360px;
}

.footerBnrGuardian a {
    display: block;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 auto 10px;
    padding-bottom: 10px;
    color: #4A4A4A;
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f9ff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f9ff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #f2f9ff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f9ff', GradientType=0);
    /* IE6-9 */
    overflow: hidden;
}

.footerBnrGuardian a h3 {
    line-height: 1;
    margin-bottom: 5px;
    background: url(../images/common/title_bnr_guardian.png) no-repeat center center #1B67C1;
    background-size: 152px;
    text-align: left;
    text-indent: -999em;
    height: 55px;
}

.footerBnrGuardian a p {
    padding: 5px 5px 10px 15px;
    line-height: 1.7;
    font-weight: bold;
}

.footerBnrGuardian a .footerBnrGuardian__btn {
    float: right;
    margin-right: 15px;
    background: url(../images/common/btn_guardianbnr.png) no-repeat left top;
    background-size: 100%;
    width: 216px;
    height: 18px;
    text-align: left;
    text-indent: -999em;
}


.footerBnrSoudanshitsu {
    text-align: center;
    margin-bottom: 10px;
    float: left;
    position: relative;
    left: -2px;
}

.footerBnrSoudanshitsu img {
    width: 360px;
}

.footerBnrSub {
    float: right;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.footerBnrSub-center {
    float: none;
}

.footerBnrSub ul {
    overflow: hidden;
    font-size: 0;
}

.footerBnrSub ul li {
    display: inline-block;
    width: 49.5%;
}

.footerBnrSub ul li a {
    display: block;
}

.footerBnrSub ul li img {
    max-width: 180px;
    width: 100%;
}

.footerBnrSub ul li:first-child {
    margin-right: 1%;
}


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

footer {
    background: #fff;
    text-align: center;
    overflow: hidden;
}

.withFixedFooter {
    padding-bottom: 80px;
}

.footerLogoShinkenzemi {
    line-height: 1;
    padding: 48px 0;
    border-bottom: 1px solid #DFDFDF;
}

.footerLogoShinkenzemi a img {
    width: 213.5px;
}

.footerLogoBenesse {
    padding: 24px 0 30px;
}

.footerLogoBenesse a img {
    width: 115px;
}

footer nav {
    border-top: 1px solid #DFDFDF;
    padding: 10px 0 0 0;
    text-align: left;
}

footer nav ul {
    font-size: 0;
    padding-left: 20px;
    float: left;
    width: 50%;
}

footer nav ul li {
    font-size: 11px;
    margin: 0 15px 5px 0;
    display: inline-block;
}

footer nav ul li:first-child {
    display: block;
}

footer nav ul li a {
    text-decoration: none;
    color: #1365C4;
    padding: 0 0 0 12px;
    background: url(../images/common/icon_footernav.png) no-repeat left center;
    background-size: 8px;
}

footer .copyright {
    float: right;
    text-align: right;
    font-size: 12px;
    padding: 25px 20px 0 0;
}

.footerType2 {
    box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
    padding-bottom: 20px;
}

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

.messageFooter {
    position: fixed;
    left: 0%;
    bottom: 0;
    width: 100%;
    margin: 0 0 0 0px;
    background: #fff;
    box-shadow: 0px -2px 1px rgba(0, 0, 0, 0.3);
    font-size: 0px;
    z-index: 100;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.messageFooter__home {
    display: inline-block;
    text-align: center;
    border-right: 1px solid #EEE;
}

.messageFooter__home a {
    display: block;
    width: 65px;
    height: 60px;
    line-height: 1;
}

.messageFooter__home img {
    width: 28px;
}

.messageFooter__send {
    display: inline-block;
    text-align: center;
    border-right: 1px solid #EEE;
}

.messageFooter__send a {
    display: block;
    width: 385px;
    line-height: 1;
    height: 60px;
    box-sizing: border-box;
    padding-top: 15px;
}

.messageFooter__send img {
    width: 310px;
}

.messageFooter__soudanshitsu {
    display: inline-block;
    text-align: center;
}

.messageFooter__soudanshitsu a {
    display: block;
    width: 270px;
    line-height: 1;
    font-size: 16px;
    box-sizing: border-box;
    padding: 9px 0;
    line-height: 1.3;
}

.messageFooter__soudanshitsu img {
    width: 180px;
}


/* message page title ---------------------------------------*/

.messagePageTitle {
    padding: 10px;
    background: #fff;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.messagePageTitle h1 {
    font-size: 20px;
    line-height: 1.2;
}

/* subject page title ---------------------------------------*/

.subjectPageTitle {
    padding: 10px 10px 15px 10px;
    background: #fff;
    text-align: center;
    position: relative;
}

.subjectPageTitle h1 {
    font-size: 18px;
    line-height: 1.2;
    padding-left: 15px;
}

.subjectPageTitle__btn {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 65px;
    line-height: 1.0;
    font-size: 15px;
    padding: 0 0 0 20px;
    background: url(../images/common/icon_header_back.png) no-repeat left center;
    background-size: 15.5px;
    text-align: left;
    white-space: nowrap;
}


/* icon Info ---------------------------------------*/

.iconInfo {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.iconInfo img {
    vertical-align: baseline;
    position: relative;
}

.hasIconInfo {
    position: relative;
    padding-right: 20px;
    display: inline-block;
}

.dateAward__title.hasIconInfo {
    padding-left: 25px;
    padding-right: 25px;

}

/* modal ---------------------------------------*/

.modal {
    font-size: 22px;
    line-height: 1.7;
    background: #fff;
    height: 100%;
    overflow: auto;
    border-radius: 5px;
}

.modalInner {
    padding: 20px;
}

.modal h2 {
    background: #DFDFDF;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.modal strong {
    font-weight: bold;
}

.modalInner a {
    text-decoration: underline;
}

.confirmModal {
    background: #fff;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.confirmModal__inner {
    padding: 15px 10px;
}

.confirmModal__title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.confirmModal__notice {
    font-size: 12px;
    line-height: 1.4;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.confirmModal__notice::before {
    display: block;
    content: '';
    background: url('../images/common/icon_warning.svg') no-repeat left top;
    background-size: 100%;
    width: 14px;
    height: 13px;
    position: absolute;
    left: 0px;
    top: 2px;
}

.confirmModal__btnList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 10px;
}

.confirmModal__btnList a,
.confirmModal__btnList span {
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(to bottom, #fefefe, #f5f5f5);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 13px 0;
    width: calc(50% - 8px);
    display: inline-block;
    cursor: pointer;
}

.confirmModal__btnList .confirmModal__btn__y {
    background-image: linear-gradient(to bottom, #F3797D, #fc9292, #fa8c8d 6%, #ef6c70 19%, #e8595f);
    color: #fff !important;
}

.confirmModal__btnList .confirmModal__btn__n {
    color: #444 !important;
    border: solid 1px #bcbcbc;
}

.confirmModal__title {}

.stampModal {
    padding: 30px 20px;
    width: 660px;
    overflow: auto;
}

.stampModalList {
    font-size: 0;
}

.stampModalList li {
    width: 640px;
    max-width: 100%;
    text-align: center;
    margin: 0 0 20px 0;
    cursor: pointer;
}

.stampModalList li img {
    max-width: 100%;
}

.offer {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.8;
    background: #fff;
    color: #ff0000;
}

/* notice message ---------------------------------------*/

.noticeMessage {
    background: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.noticeMessage .noticeMessage__icon-ouen {
    font-size: 18px;
    background: url(../images/common/icon_ouen.png) no-repeat left 5px;
    background-size: 28px;
    padding-left: 35px;
}

.noticeMessage .noticeMessage__icon-alert {
    font-size: 18px;
    background: url(../images/common/icon_alert.png) no-repeat left 5px;
    background-size: 28px;
    padding-left: 35px;
}


/* notice list ---------------------------------------*/

.noticeList {
    font-size: 14px;
    margin-bottom: 20px;
}

.noticeList li {
    text-indent: -1.3em;
    margin-left: 1.3em;
    line-height: 1.4;
    margin-bottom: 5px;
}


/* contents block ---------------------------------------*/

.contentsBlock {
    background: #fff;
    border-radius: 5px;
    padding: 20px 0 0;
    margin-bottom: 20px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

.contentsBlock:last-of-type {
    margin-bottom: 0;
}

.contentsBlock-left {
    width: 358px;
    float: left;
    padding: 20px 0 10px;
}

.contentsBlock-right {
    width: 360px;
    float: right;
    padding: 20px 0 10px;
}

.contentsBlock__inner {
    padding: 15px;
}

.contentsBlock__inner-bottomLine {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.contentsBlock__inner-notop {
    padding-top: 0px;
}

.contentsBlock-left .contentsBlock__inner,
.contentsBlock-right .contentsBlock__inner {
    text-align: center;
}

.contentsBlock__title {
    line-height: 1.3;
    padding: 0 10px 0 15px;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    color: #4a4a4a;
}

.contentsBlock__title::before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #FC9292;
    width: 5px;
    height: 22px;
}

.contentsBlock__grayBox {
    background: #F2F2F2;
    padding: 15px;
    line-height: 1.4;
    font-size: 16px;
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.tabBox .contentsBlock {
    border-radius: 0px 0px 5px 5px;
}


/* tab ---------------------------------------*/

.tabBtn ul {
    font-size: 0px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}

.tabBtn ul li {
    display: inline-block;
    width: 50%;
    font-size: 16px;
    line-height: 1.0;
}

.tabBtn ul li a {
    display: block;
    padding: 15px 0;
    text-align: center;
    background: #F0F0F0;
}

.tabBtn ul li a.current {
    background: #fff;
    font-weight: bold;
}

.tabWrapper {
    position: relative;
}

.tabBox {
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    left: 0;
}

.tabBox.open {
    visibility: visible;
    position: static;
}

.tabBox .contentsBlock {
    margin-bottom: 0;
}


/* トップの左右グラフ ---------------------------------------*/

#dateTabDisplay {
    position: relative;
    overflow: hidden;
}

.dateTabDisplay__inner {
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
}

#dateTabDisplay.open .dateTabDisplay__inner {
    visibility: visible;
    position: static;
    padding-top: 5px;
}


/* トップ 今日のデータ サマリー ---------------------------------------*/

.dateDataSummery__title {
    text-align: center;
    position: relative;
    margin-bottom: 0px;
}

.dateDataSummery__title.open {
    background: #F5F5F5;
    /*box-shadow:0px 3px 3px rgba(0,0,0,0.3) inset;*/
}

.dateDataSummery__title h2 {
    font-size: 22px;
    font-weight: bold;
}

.dateDataSummery__title .previous {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50px;
    line-height: 1.0;
    text-align: left;
    font-size: 15px;
    background: url(../images/common/arrow_date_left.png) no-repeat left center;
    background-size: 8px;
    padding-left: 15px;
}

.dateDataSummery__title .next {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    line-height: 1.0;
    text-align: right;
    font-size: 15px;
    background: url(../images/common/arrow_date_right.png) no-repeat right center;
    background-size: 8px;
    padding-right: 15px;
}

.dateDataSummery__title span.previous {
    background-image: url(../images/common/arrow_date_black_left.png);
    color: #888;
}

.dateDataSummery__title span.next {
    background-image: url(../images/common/arrow_date_black_right.png);
    color: #888;
}

.dateDataSummery__viewCalender {
    color: #E8595F;
    cursor: pointer;
    display: inline-block;
}

.dateDataSummery__viewCalender:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
    background: url(../images/common/icon_calender.png) 0 0 no-repeat;
    background-size: 16px;
    width: 16px;
    height: 17px;
    position: relative;
    top: -1px;
}

.dateDataSummery {
    background: #FCF9F9;
}

.dateDataSummery__calender {
    text-align: center;
    background: #f5f5f5;
    padding: 0 130px;
}

.dateDataSummery__dataArea {
    overflow: hidden;
    border: 1px solid #9b9b9b;
    border-radius: 5px;
    text-align: center;
}

.dateDataSummery__studyTime {
    padding: 20px 0 20px;
    box-sizing: border-box;
}

.dateDataSummery__studyTime h3,
.dateDataSummery__detail h3,
.dateDataSummery__app h3 {
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.0;
}

.dateDataSummery__studyTime .data {
    font-size: 50px;
    line-height: 1.0;
}

.dateDataSummery__studyTime .data small {
    font-size: 30px;
}

.dateDataSummery__detail {
    clear: both;
    border-top: 1px solid #9b9b9b;
    padding: 30px 15px;
}

.dateDataSummery__detail ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dateDataSummery__detail ul li {
    background: #fff;
    width: calc(50% - 10px);
    margin-top: 9px;
    font-size: 15px;
    border: 1px solid #9B9B9B;
    border-radius: 10px;
    padding: 5px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.dateDataSummery__detail ul li .subjectIcon {
    width: 48px;
    height: 48px;
}

.dateDataSummery__detail ul li .subjectIcon img {
    width: 100%;
}

.dateDataSummery__detail ul li .subjectName {
    width: calc(100% - 130px);
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding: 0 10px;
    box-sizing: border-box;
}

.subjectName__chiiku {
    color: #1D8697;
}

.subjectName__science {
    color: #5CA707;
}

.subjectName__social {
    color: #FA555E;
}

.subjectName__rulemanner {
    color: #E57402;
}

.subjectName__artmusic {
    color: #D069CC;
}

.subjectName__english {
    color: #856EC6;
}

.subjectName__development {
    color: #6488ca;
}

.subjectName__gray {
    color: #909090;
}

.dateDataSummery__detail ul li .data {
    width: 80px;
}

.dateDataSummery__detail ul li .data div {
    line-height: 1.0;
    padding: 6px 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.dateDataSummery__detail ul li .data div:first-child {
    border-bottom: 1px solid #9b9b9b;
}

.dateDataSummery__detail ul li .data .nodata {
    content: '';
    display: inline-block;
    width: 13px;
    height: 2px;
    background: #4a4a4a;
    line-height: 1;
    vertical-align: middle;
}

.dateAward {
    background: url('../images/common/studentflame.png') no-repeat center top;
    background-size: 100%;
    width: 350px;
    height: 245px;
    margin: 0 auto 15px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    padding: 13px 0 0 0;
}

.dateAward__title {
    line-height: 1.3;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
}

.dateAward__ribbon {
    position: absolute;
    left: 20px;
    top: 20px;
}

.dateAward__photo {
    max-width: 80%;
}

.dateDataSummery__app {
    clear: both;
    border-top: 1px solid #9b9b9b;
    padding: 30px 15px;
}

.dateDataSummery__app ul {}

.dateDataSummery__app ul li {
    background: #fff;
    margin-top: 20px;
    font-size: 15px;
    border: 1px solid #9B9B9B;
    border-radius: 10px;
    padding: 5px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: #000;
}

.dateDataSummery__app ul li .subjectIcon {
    width: 48px;
    height: 48px;
}

.dateDataSummery__app ul li .subjectName {
    width: calc(100% - 130px);
    text-align: left;
    font-size: 16px;
    padding: 0 10px;
    box-sizing: border-box;
}

.dateDataSummery__app ul li .data {
    width: 80px;
    font-weight: bold;
    text-align: right;
}


/* トップ 今日の取組内容 ---------------------------------------*/

#todayActivity,
#monthleyMainLesson,
#monthleySeikairitsu {
    margin-top: -60px;
    padding-top: 60px;
}

.dateDataDone {
    position: relative;
}

.dateDataDone__list {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.dateDataDone__list>li {
    border: 1px solid #ccc;
    border-bottom: none;
    overflow: hidden;
}


.dateDataDone__list>li:first-child {
    border-radius: 5px 5px 0 0;
}

.dateDataDone__list>li:last-child {
    border-radius: 0 0 5px 5px;
}

.dateDataDone__title {
    background: #fefefe;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fefefe 0%, #f5f5f5 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fefefe 0%, #f5f5f5 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fefefe 0%, #f5f5f5 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#f5f5f5', GradientType=0);
    /* IE6-9 */
    position: relative;
}

.dateDataDone__title-clickarea {
    display: block;
    padding: 0 0 0 35px;
    /* width:550px; */
    line-height: 50px;
    position: relative;
    /*z-index:5;*/
}

.dateDataDone__title.open {
    border-bottom: 1px solid #ccc;
}

.dateDataDone__title:before {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    top: 50%;
    margin: -9px 0 0 0;
    background: url(../images/common/btn_plus.svg) 0 0 no-repeat;
    background-size: 100%;
    width: 18px;
    height: 18px;
}

.dateDataDone__title.open:before {
    background-image: url(../images/common/btn_minus.svg );
    background-size: 100%;
}

.dateDataDone__time {
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    color: #000;
}

.dateDataDone__subjectWrapper {
    display: inline-block;
    vertical-align: middle;
    font-size: 0px;
}

.dateDataDone__subject {
    display: block;
    vertical-align: middle;
}

.dateDataDone__subject li {
    display: inline-block;
    margin-right: 3px;
    font-size: 12px;
    text-align: center;
    width: 22px;
    height: 22px;
    line-height: 23px;
    color: #fff;
    background: #ccc;
    border-radius: 100%;
    vertical-align: middle;
}

.dateDataDone__subject li.dateDataDone__icon-chiiku {
    background-color: #1D8697;
}

.dateDataDone__subject li.dateDataDone__icon-science {
    background-color: #5CA707;
}

.dateDataDone__subject li.dateDataDone__icon-social {
    background-color: #FA555E;
}

.dateDataDone__subject li.dateDataDone__icon-rulemanner {
    background-color: #E57402;
}

.dateDataDone__subject li.dateDataDone__icon-artmusic {
    background-color: #D069CC;
}

.dateDataDone__subject li.dateDataDone__icon-english {
    background-color: #856EC6;
}

.dateDataDone__subject li.dateDataDone__icon-development {
    background: linear-gradient(135deg, #B1C3E3 33.79%, #D3DFEA 52.2%, #B1C3E3 65.98%);
}

.dateDataDone__title .sendMessage {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 110px;
    height: 100%;
    background: #FC9292;
    /* Old browsers */
    background: -moz-linear-gradient(top, #FC9292 0%, #E8595F 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #FC9292 0%, #E8595F 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #FC9292 0%, #E8595F 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FC9292', endColorstr='#E8595F', GradientType=0);
    /* IE6-9 */
    line-height: 1.2;
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    padding: 5px 0 0 35px;
}

.dateDataDone__title .sendMessage:before {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    background: url(../images/common/icon_btn_message1.png) 10px center no-repeat;
    background-size: 15px;
    width: 25px;
    height: 100%;
}

.dateDataDone__title .sendMessage.sendMessage-sent1,
.dateDataDone__title .sendMessage.sendMessage-sent2 {
    background: #f7f7f7;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f7f7f7 20%, #d3d3d3 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f7f7f7 20%, #d3d3d3 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f7f7f7 20%, #d3d3d3 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#d3d3d3', GradientType=0);
    /* IE6-9 */
    color: #E8595F;
}

.dateDataDone__title .sendMessage.sendMessage-sent1:before {
    background: url(../images/common/icon_btn_message2.png) 10px center no-repeat;
    background-size: 15px;
}

.dateDataDone__title .sendMessage.sendMessage-sent2:before {
    background: url(../images/common/icon_btn_message3.png) 10px center no-repeat;
    background-size: 15px;
}

.dateDataDone__detail {
    padding: 5px 20px 20px;
    background: #F2F6F8;
    box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.1) inset;
}

.dateDataDone__detailTitle {
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    margin: 25px 0 10px;
}

.dateDataDone__detailSubject {
    border: 1px solid #BCBCBC;
    border-top: 8px solid #85BBFC;
    background: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #000;
}

.dateDataDone__detailSubject-try {
    border: 1px solid #BCBCBC;
    border-top: 8px solid #aaa;
    padding: 10px 15px;
    background: #fff;
    text-align: center;
    margin-top: 20px;
    color: #000;
}

.dateDataDone__detailSubject a {
    color: #000;
}

.dateDataDone__detailSubject-chiiku {
    border-top-color: #1D8697;
}

.dateDataDone__detailSubject-science {
    border-top-color: #5CA707;
}

.dateDataDone__detailSubject-social {
    border-top-color: #FA555E;
}

.dateDataDone__detailSubject-rulemanner {
    border-top-color: #E57402;
}

.dateDataDone__detailSubject-artmusic {
    border-top-color: #D069CC;
}

.dateDataDone__detailSubject-english {
    border-top-color: #856EC6;
}

.dateDataDone__detailSubject-development {
    border-top-color: #6488ca;
}


.dateDataDone__icon {
    width: 48px;
    height: 48px;
}

.dateDataDone__icon img {
    width: 100%;
}

.dateDataDone__text {
    font-size: 16px;
    line-height: 1.5;
    width: calc(100% - 130px);
    padding: 0 15px;
    box-sizing: border-box;
}

.dateDataDone__tag {
    display: inline-block;
    color: #FFF;
    border-radius: 3px;
    font-weight: bold;
    padding: 0px 3px;
    margin-right: 2px;
    font-size: 14px;
}

.dateDataDone__tag.tab_hop {
    background-color: #00afec;
}

.dateDataDone__tag.tab_step {
    background-color: #00A73C;
}

.dateDataDone__tag.tab_jump {
    background-color: #006FBC;
}

.dateDataDone__text small {
    font-size: 16px;
}

.dateDataDone__text b {
    font-size: 18px;
}

.dateDataDone__detailTime {
    width: 80px;
    font-size: 16px;
    text-align: right;
}

.dateDataDone__detailSubject-try p {
    font-size: 16px;
    line-height: 1.7;
}

.dateDataDone__image {
    max-width: 80%;
    display: block;
    margin: 15px auto;
}

.dateDataDone__image img {
    max-width: 100%;
}

.dateDataDone__image.image2col img {
    max-width: 49%;
}

.dateDataDone__nodata {
    text-align: center;
    font-size: 16px;
    padding: 20px 0;
}

.dateDataDone__nodata small {
    display: block;
    font-size: 12px;
    padding-top: 20px;
}


/* トップ 月号のデータ　メインの取組状況 ---------------------------------------*/

.monthleyNumber__title {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}

.monthleyNumber__title h2 {
    font-size: 22px;
    font-weight: bold;
    color: #4a4a4a;
}

.monthleyNumber__title .previous {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 50px;
    line-height: 1.0;
    text-align: left;
    font-size: 15px;
    background: url(../images/common/arrow_date_left.png) no-repeat left center;
    background-size: 8px;
    padding-left: 15px;
}

.monthleyNumber__title .next {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    line-height: 1.0;
    text-align: right;
    font-size: 15px;
    background: url(../images/common/arrow_date_right.png) no-repeat right center;
    background-size: 8px;
    padding-right: 15px;
}

.monthleyNumber__title span.previous {
    background-image: url(../images/common/arrow_date_black_left.png);
    color: #888888;
}

.monthleyNumber__title span.next {
    background-image: url(../images/common/arrow_date_black_right.png);
    color: #888888;
}

.topChildLevel {
    border: 1px solid #9B9B9B;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 20px;
    text-align: center;
}

.topChildLevel__checkWrapper {
    padding: 5px 0 0px;
    margin: 0 auto;
}

.topChildLevel__flag {
    padding-top: 15px;
}

.topChildLevel__flag img {
    width: 325px;
}

.topChildLevel__checkWrapper h3 {
    text-align: center;
}

.topChildLevel__checkWrapper h3 strong {
    font-size: 30px;
    margin: 0 2px;
}

.topChildLevel__checkInner {}

.topChildLevel__checkSubject {
    border-bottom: 1px solid #9b9b9b;
    overflow: hidden;
    padding: 8px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.topChildLevel__checkSubject:last-of-type {
    border-bottom: none;
}

.topChildLevel__checkSubject-icon {
    font-size: 18px;
    text-align: center;
    width: 48px;
    height: 48px;
}

.topChildLevel__checkSubject-icon img {
    width: 100%;
}

.topChildLevel__checkSubject-title {
    font-size: 16px;
    width: 80px;
    line-height: 1.2;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 5px 0 10px;
    text-align: left;
}

.topChildLevel__checkSubject-title-chiiku {
    color: #1D8697;
}

.topChildLevel__checkSubject-title-science {
    color: #5CA707;
}

.topChildLevel__checkSubject-title-social {
    color: #FA555E;
}

.topChildLevel__checkSubject-title-rulemanner {
    color: #E57402;
}

.topChildLevel__checkSubject-title-artmusic {
    color: #D069CC;
}

.topChildLevel__checkSubject-title-english {
    color: #856EC6;
}

.topChildLevel__checkSubject-title-development {
    color: #6488ca;
}


.topChildLevel__checkSubject-title-app {
    width: calc(100% - 125px);
}

.topChildLevel__checkSubject-time {
    width: 70px;
    font-weight: bold;
    text-align: right;
}

.topChildLevel__checkSubject ul {
    width: calc(100% - 128px);
}

.topChildLevel__checkSubject ul li {
    float: left;
    width: 24px;
    margin: 0 3px;
}

.topChildLevel__checkSubject ul li>span {
    display: block;
    text-align: center;
    line-height: 1.0;
    font-size: 14px;
    margin-bottom: 5px;
}

.topChildLevel__checkSubject ul li>div {
    content: '';
    background: url(../images/common/levelcheck_nodata.png) no-repeat center center;
    background-size: 24px;
    width: 24px;
    height: 24px;
}

.topChildLevel__checkSubject ul li>div.clear {
    background: url(../images/common/levelcheck_clear.png) no-repeat center center;
    background-size: 24px;
}

.topChildLevel__checkSubject-subtitle {
    width: calc(100% - 128px);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    box-sizing: border-box;
    padding-left: 5px;
    text-align: left;
}

.topChildLevel__checkSubject-detail {
    width: 100%;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
    padding-top: 10px;
}


/* info  ---------------------------------------*/

.contentsBlock-info .contentsBlock__inner {
    padding-top: 0;
}


/* login ---------------------------------------*/

.contentsBlock-login {
    padding-top: 0;
}

.contentsBlock__title-login {
    padding: 15px 20px;
    line-height: 1.0;
    color: #E95B61;
    border-bottom: 1px solid #E95B61;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 25px;
}

.contentsBlock__title-error {
    padding: 20px 20px 10px;
    line-height: 1.0;
    color: #FF0000;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.login a {
    color: #0a74d1;
    text-decoration: underline;
}

.login a:hover {
    text-decoration: none;
}

.login__lead {
    text-align: center;
    margin-bottom: 20px;
}

.login__inner {
    max-width: 335px;
    margin: 0 auto;
}

.login__helplink {
    text-align: right;
    font-size: 14px;
    margin-bottom: 7px;
}

.login__number {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login__number__form {
    width: calc(100% - 45px);
}

.login__number__select {
    width: 40px;
}

.login__notice {
    font-size: 14px;
    line-height: 1.1;
    padding-top: 5px;
    margin-bottom: 15px;
}

.login__checkbox {
    margin-bottom: 25px;
}

.login__btn__wrapper {
    border-bottom: solid 1px #9b9b9b;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.login__btn {
    border-radius: 8px;
    border: 1px solid none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(to bottom, #F3797D, #fc9292, #fa8c8d 6%, #ef6c70 19%, #e8595f);
    width: 347px;
    max-width: 100%;
    height: 54px;
    display: block;
    color: #fff !important;
    text-align: center;
    font-family: HiraginoSans-W6;
    font-size: 19px;
    line-height: 54px;
    text-decoration: none !important;
}

.login__subbtn {
    padding: 15px 0;
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #bcbcbc;
    background-image: linear-gradient(to bottom, #fefefe, #f5f5f5);
    font-family: HiraginoSans-W6;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #444444 !important;
    display: block;
    margin-bottom: 15px;
    text-decoration: none !important;
    position: relative;
}

.login__subbtn.twoline {
    line-height: 1.3;

}

.login__subbtn-rule::before {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    content: '';
    background: url('../images/common/icon_book.svg') no-repeat left top;
    background-size: 100%;
    width: 24px;
    height: 19px;
}

.login_error {
    color: #FF0000;
    border: 1px solid #FF0000;
    border-radius: 5px;
    padding: 10px 10px 10px 20px;
    margin: 0 auto 20px;
    max-width: 520px;
    box-sizing: border-box;
    line-height: 1.4;
}

.login_error p {
    position: relative;
    padding-left: 20px;
}

.login_error p::before {
    display: block;
    content: '';
    background: url('../images/common/icon_error.svg') no-repeat left top;
    background-size: 100%;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0px;
    top: 4px;
}


/* choiceage ---------------------------------------*/

.choiceage__lead {
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #4A4A4A;
    padding-top: 2px;
}

.choiceage__user {
    background: #F2F2F2;
    border-radius: 6px;
    line-height: 1.5;
    padding: 16px;
    text-align: center;
    width: 516px;
    max-width: calc(100% - 28px);
    margin: 0 auto 15px;
}

.choiceage__user p {
    display: inline-block;
}

.choiceage__inner {
    padding-bottom: 10px;
}

.choiceage__list {}

.choiceage__list ul {
    border: 1px solid #9B9B9B;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 18px;
    line-height: 1.5;
    overflow: hidden;
}

.choiceage__list ul li {
    line-height: 1.5;
    position: relative;
}

.choiceage__list ul li:not(:last-child)::after {
    display: block;
    content: '';
    background: #9B9B9B;
    width: calc(100% - 16px);
    height: 1px;
    position: absolute;
    left: 8px;
    bottom: 0;
}

.choiceage__list ul li a {
    display: block;
    padding: 24px 18px 25px;
    position: relative;
    line-height: 1.0;
    transition: all .25s ease;
}

.choiceage__list ul li a::after {
    content: '';
    position: absolute;
    right: 28px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #4A4A4A;
    border-right: 2px solid #4A4A4A;
    transform: translate(0, -50%) rotate(45deg);
}

.choiceage__list ul li a:hover {
    background: #f2f2f2;
}

.choiceage__list__year {
    font-weight: bold;
    margin-right: 3px;
    line-height: 1.0;
    display: inline-block;
    vertical-align: middle;
    color: #4A4A4A;
}

.choiceage__list__category {
    display: inline-block;
    line-height: 1.1;
    vertical-align: middle;
    padding: 1px 4px;
    background: #aaa;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
}

@media all and (-ms-high-contrast:none) {
    .choiceage__list__category {
        padding: 2px 4px 0px;
    }

    /* IE10〜Edge */
}

.choiceage__list__category-step {
    background: #00A73C;
}

.choiceage__list__category-jump {
    background: #006FBC;
}

.choiceage__list__category-hop {
    background: #00afec;
}

.choiceage__notice {
    font-size: 14px;
    line-height: 1.5;
}


/* form ---------------------------------------*/

.formArea .submit {
    text-align: center;
}

.formAccountSelect__wrapper {
    position: relative;
}

.formAccountSelect {
    width: 40px;
    height: 43px;
    box-sizing: border-box;
    margin: 0px 0px 0px 0px;
    padding: 0 40px 0 0;
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #bcbcbc;
    background-image: linear-gradient(to bottom, #ffffff 2%, #f5f5f5);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
}

.formAccountSelect__wrapper::after {
    display: block;
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #9b9b9b;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.formSelect {
    width: 100%;
    padding: 10px 15px;
    line-height: 1.5;
    vertical-align: middle;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bcbcbc;
    background: url(../images/common/icon_select.png) 99% 50% no-repeat, -webkit-linear-gradient(top, #fff 0%, #fff 50%, #eee 100%);
    background: url(../images/common/icon_select.png) 99% 50% no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eee 100%);
    background-size: 16px 43px;
    border-radius: 5px;
}

.formText {
    padding: 13px 15px;
    height: 43px;
    border-radius: 4px;
    border: solid 1px #9b9b9b;
    background-color: #f0f4f7;
    width: 100%;
    box-sizing: border-box;
}

.formRadio {
    display: inline-block;
    line-height: 1;
    margin-right: 5px;
    font-size: 12px;
}

.formRadio label {
    background: url(../images/common/radio.png) left 1px no-repeat;
    background-size: 36px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    line-height: 1.4;
    min-height: 37px;
    margin: 0px 0;
    padding: 0px 0 0 36px;
    position: relative;
    vertical-align: top;
}

.formRadio input[type="radio"] {
    display: none;
}

.formRadio input:checked+label {
    background-image: url(../images/common/radio_on.png);
    background-size: 36px;
}

.formRadio input:disabled+label {
    opacity: 0.7;
}

.formCheckbox {
    display: inline-block;
    line-height: 1;
    font-size: 16px;
    margin-bottom: 8px;
}

.formCheckbox label {
    background: url(../images/common/icon_check.svg) left 1px no-repeat;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    line-height: 1.4;
    min-height: 25px;
    margin: 0px 0;
    padding: 3px 0 0 35px;
    position: relative;
    vertical-align: top;
}

.formCheckbox input[type="checkbox"] {
    display: none;
}

.formCheckbox input:checked+label {
    background-image: url(../images/common/icon_check_on.svg);
}

.formCheckbox input:disabled+label {
    opacity: 0.7;
}

.formTextarea {
    padding: 5px 10px;
    border: 1px solid #9b9b9b;
    background: #F0F4F7;
    width: 100%;
    box-sizing: border-box;
    height: 150px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

.formError {
    color: #D0021B;
    margin-bottom: 10px;
    padding: 7px 10px 7px 30px;
    border-radius: 5px;
    line-height: 1.5;
    content: '';
    background: url(../images/common/icon_error.png) no-repeat 10px 10px #FAE5E8;
    background-size: 17.5px;
    font-weight: bold;
}


/* btn ---------------------------------------*/

.btn {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(to bottom, #F3797D, #fc9292, #fa8c8d 6%, #ef6c70 19%, #e8595f);
    width: 350px;
    max-width: 100%;
    height: 54px;
    display: block;
    color: #fff !important;
    text-align: center;
    font-family: HiraginoSans-W6;
    font-size: 19px;
    line-height: 54px;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 auto;
}

.btn.gray {
    background-image: linear-gradient(to bottom, #747373, #747373 6%, #525050);
}
.btn.disabled {
pointer-events: none;
}
.btn.submit {
    margin: 0 auto 15px;

}

.btn.twoline {
    font-size: 18px;
    line-height: 22px;
    padding: 4px 0;
    box-sizing: border-box;
}

.subbtn {
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #bcbcbc;
    background-image: linear-gradient(to bottom, #fefefe, #f5f5f5);
    font-family: HiraginoSans-W6;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    color: #444444 !important;
    display: block;
    margin: 15px auto 0;
    text-decoration: none !important;
    position: relative;
    width: 350px;
    max-width: 100%;
}

.btn__back {
    border: none;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
    border: solid 1px #999999;
    background-image: linear-gradient(to bottom, #bbb, #bbb, #aaa 10%, #999999 19%, #999999);
    font-family: HiraginoSans-W6;
    font-size: 19px;
    color: #fff;
    width: 350px;
    max-width: 100%;
    height: 40px;
    padding: 10px 0;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}

.btn__black {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(to bottom, #747373, #747373 6%, #525050);
    width: 350px;
    max-width: 100%;
    height: 38px;
    display: block;
    color: #fff !important;
    text-align: center;
    font-family: HiraginoSans-W6;
    font-size: 19px;
    line-height: 38px;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0 auto;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn__wrapper {
    margin-bottom: 20px;
}

.btn__wrapper:last-of-type {
    margin-bottom: 0;
}


/* おうえんメッセージを送る ---------------------------------------*/

.wrapper__ouenmessageEntry {
    padding-top: 40px;
}

.contentsBlock.contentsBlock-ouenMessage {
    margin-bottom: 20px;
}

.ouenmessage__logo {
    text-align: center;
    height: 100px;
}

.ouenmessage__logo h1 {
    line-height: 1.0;
    color: #EB6F74;
    font-size: 22px;
    font-weight: bold;
    background: #fff;
    position: relative;
    top: -50px;
    width: 270px;
    margin: 0 auto;
    border-radius: 50%;
    padding-top: 30px;
}

.ouenmessage__logo h1 img {
    width: 130px;
    display: block;
    margin: 0 auto 15px;
}

.contentsBlock__inner-ouenmessage {
    padding: 10px 0 20px;
    width: 480px;
    margin: 0 auto;
}

.contentsBlock__inner-ouenmessageEntry {
    padding: 20px 0 30px;
    width: 480px;
    margin: 0 auto;
}

.ouenmessage__lead {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.ouenmessage__lead-input {
    text-align: center;
    margin-bottom: 20px;
}

.ouenmessage__lead-sent {
    text-align: center;
    font-size: 14px;
}

.ouenmessage__lead-error {
    margin-bottom: 120px;
}

.ouenmessage__textCount {
    text-align: center;
    font-size: 13px;
    color: #000;
    font-weight: bold;
    line-height: 1.0;
    padding: 10px 0;
}

.ouenmessage__textCount.over {
    color: #D0021B;
}

.ouenmessage__entryNotice {
    font-size: 14px;
    line-height: 1.5;
}

.ouenmessage__selectStamp {
    margin-bottom: 40px;
    text-align: center;
}

.ouenmessage__selectStamp a.selectStamp {
    border: 1px solid #bcbcbc;
    border-radius: 5px;
    display: inline-block;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
    position: relative;
    padding: 35px 45px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.ouenmessage__selectStampConfirm {
    padding: 10px 10px;
    margin: 0 auto 20px;
    text-align: center;
    position: relative;
    max-width: 321px;
}

.ouenmessage__selectStampConfirm img {
    max-width: 100%;
}

.ouenmessage__selectStampConfirm .delete {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 23px;
}

.ouenmessage__body {
    padding: 10px 20px;
    border: 1px solid #9b9b9b;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.ouenmessage__stamp {
    text-align: center;
    padding: 15px 0 10px;
}

.ouenmessage__stamp img {
    max-width: 100%;
}

.ouenmessage__btnArea {
    padding-bottom: 10px;
}

.ouenmessage__bottomNotice {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 25px;
}

.ouenmessage__completeImage {
    padding: 15px 0 40px;
    text-align: center;
}

.ouenmessage__completeImage img {
    width: 370px;
}

.ouenmessage__bottomCopy {
    text-align: center;
    font-size: 16px;
    line-height: 2.0;
    padding-bottom: 10px;
}


/* 成績表 ---------------------------------------*/

.report__graph {
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
}

.contentsBlock-report .topChildLevel {
    margin-bottom: 0;
}


/* hopstep__area ---------------------------------------*/
.hopstep__area {
    background: #FFFBEF;
    text-align: center;
    border-radius: 5px 5px 0 0;
    padding: 8px;
    border-bottom: 1px solid #EC6469;
    margin-bottom: 10px;
}

.hopstep__area .hopstep_logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 5px;
}

.hopstep__area p {
    color: #EC6469;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 5px;
}

.hopstep__area h1 {
    text-align: center;
    text-decoration: none;
    color: #EC6469;
    font-size: 18px;
    font-weight: bold;
}

@media screen and (min-width: 751px) {
    .sp {
        display: none !important;
    }

    .spbr {
        display: none;
    }
}



@media screen and (max-width: 750px) {

    /* default */
    img {
        max-width: 100%;
    }

    * {
        box-sizing: border-box;
    }

    /* common item */
    .pc {
        display: none !important;
    }

    .pcbr {
        display: none;
    }

    .headerInner,
    .footerInner,
    .inner {
        min-width: 0;
        width: 100%;
    }

    .overlay {
        cursor: pointer;
    }

    .wrapper {
        min-height: 100px;
        width: auto;
        padding: 10px 7px 0px;
    }

    .fixed .wrapper {
        margin-top: 55px;
    }

    .fixed2 .wrapper {
        margin-top: 40px;
    }

    .hasFixedFooter .wrapper {
        padding-bottom: 60px;
    }

    .wrapper-report {
        margin-bottom: 0px;
    }


    /* android osでの文字サイズ大での崩れ対応 ---------------------------------------*/

    .wrapper *,
    .modalInner *,
    #cboxWrapper * {
        max-height: 500%;
    }


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

    header .headerStudentName {
        font-size: 14px;
    }

    #openMenu {
        right: 10px;
        top: 5px;
    }

    .headerLogoOuennet {
        left: 10px;
    }

    .headerTextChallengetouch {
        font-size: 10px;
        left: 10px;
        top: 5px;
    }

    .headerLogoBenesse {
        left: 10px;
    }

    .headerMenu {
        top: 7px;
    }

    .headerMenu li {
        margin-left: 5px;
        font-size: 12px;
    }

    .headerMenu li a::before {
        margin-right: 3px;
        width: 8px;
        height: 9px;
    }

    /* header type1 ---------------------------------------*/

    .headerType1 {
        border-bottom: 1px solid #FCFCFC;
        height: 83px;
    }

    .headerType1 .headerStudentName {
        top: 60px;
        right: 10px;
    }

    .headerType1 .headerStudentGrade {
        top: 12px;
        font-size: 11px;
        right: 55px;
    }


    /* header type2 ---------------------------------------*/

    .headerType2 {
        height: 70px;
        border-bottom: 1px solid #dbdbdb;
    }

    .headerType2 .headerLogoChallengetouch {
        background: url(../images/common/logo_challengetouch.png) no-repeat left top;
        background-size: 100%;
        width: 121px;
        height: 11px;
    }

    .headerType2 .headerLogoOuennet {
        width: 180px;
        height: 45px;
        position: absolute;
        left: 10px;
        text-indent: -99em;
        overflow: hidden;
    }

    /* header type3 ---------------------------------------*/

    .headerType3 {
        height: 110px;
    }

    .headerType3 .headerLogoOuennet {
        left: 10px;
        width: 258px;
        height: 60px;
    }

    .headerType3 .headerTextChallengetouch {
        left: 10px;
        top: 32px;
        font-size: 12px;
    }


    /* header type4（設定） ---------------------------------------*/

    .headerType4 {
        height: 138px;
    }

    .headerType4 .headerLogoOuennet {
        left: 10px;
        width: 230px;
        height: 50px;
    }

    .headerType4 .headerTextChallengetouch {
        left: 10px;
        top: 73px;
        font-size: 10px;
    }

    .headerSupportMenu {
        top: 32px;
    }

    .headerSupportMenu>li {
        font-size: 11px;
    }

    .headerSupportMenu>li a {
        padding: 6px 0 2px;
    }

    .headerSupportMenu__support a::before {
        margin-right: 5px;
        width: 15px;
        height: 23px;
        vertical-align: middle;
        position: relative;
        top: -2px;
    }

    .headerSupportMenu__faq a::before {
        margin-right: 3px;
        width: 25px;
        height: 23px;
        vertical-align: middle;
    }

    .headerLogoutMenu {
        position: absolute;
        right: 8px;
        bottom: 6px;
        font-size: 0px;
    }

    .headerLogoutMenu li {
        display: block;
        margin-left: 1px;
        margin-top: 7px;
    }

    .headerLogoutMenu li a {
        width: 100px;
        height: 27px;
        line-height: 27px;
        display: block;
        font-size: 12px;
    }


    /* header type5 こどもちゃれんじ ---------------------------------------*/



    /* slide menu ---------------------------------------*/

    #slideMenu {
        position: fixed;
        right: -325px;
        top: 0px;
        width: 100%;
        max-width: 320px;
        background: #EAEAEA;
        box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.8);
        overflow: auto;
    }

    /* global nav top ---------------------------------------*/

    .gnav-top ul li {
        line-height: 1.3;
    }

    .gnav-top ul li a {
        height: 55px;
        line-height: 1.3;
        padding-top: 7px;
        border-bottom: 4px solid #fff;
        color: #E8595F;
    }

    /* global nav subject ---------------------------------------*/

    .gnav-subject ul li a {
        height: 40px;
        padding-top: 10px;
    }

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

    .footerType2 {
        padding: 0 10px 10px;
    }

    footer nav ul {
        padding-left: 0px;
        width: auto;
        float: none;
    }

    footer nav ul li {
        font-size: 13px;
    }

    footer .copyright {
        float: none;
        text-align: left;
        font-size: 13px;
        padding: 0 5px 10px;
        display: block;
    }

    .withFixedFooter {
        padding-bottom: 60px;
    }

    .footerLogoBenesse {
        padding: 38px 0 39px;
    }

    .footerLogoShinkenzemi {
        padding: 51px 0;
    }

    .footerLogoShinkenzemi a img {
        width: 180px;
    }


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

    .footerBnr {
        padding: 5px 7px;
        width: auto;
    }

    .footerBnr a {
        display: block;
    }

    .footerBnrPoint,
    .footerBnrGuardian {
        float: none;
        width: auto;
        margin: 0 2px;
    }

    .footerBnrPoint a {
        width: auto;
        max-width: 360px;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        padding-right: 5px;
    }

    .footerBnrGuardian a {
        display: block;
        border-radius: 5px;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        margin: 0 auto 10px;
        color: #4A4A4A;
        width: auto;
        max-width: 360px;
        position: relative;
    }

    .footerBnrGuardian a h3 {
        height: 53px;
    }

    .footerBnrGuardian a p {
        line-height: 1.5;
        padding-left: 10px;
        margin-bottom: 5px;
    }

    .footerBnrGuardian a .footerBnrGuardian__btn {
        margin-right: 15px;
        background-size: 215.5px;
        width: 215.5px;
        height: 20px;
    }

    .footerBnrSoudanshitsu {
        float: none;
        left: 0;
        margin-bottom: 5px;
    }

    .footerBnrSoudanshitsu img {
        width: 100%;
        max-width: 364px;
    }

    .footerBnrSub {
        float: none;
        width: 100%;
        max-width: 364px;
        margin: 0 auto;
    }

    .footerBnrSub ul {
        overflow: hidden;
        font-size: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .footerBnrSub ul li {
        width: 50%;
    }

    .footerBnrSub ul li a {
        display: block;
    }

    .footerBnrSub ul li img {
        width: 100%;
    }

    .footerBnrSub ul li:first-child {
        margin-right: 0;
    }


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

    .messageFooter {
        width: 100%;
        text-align: left;
        position: fixed;
        left: 0px;
        bottom: 0px;
        margin: 0;
    }

    .messageFooter__home {
        width: 13%;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #EEE;
    }

    .messageFooter__home a {
        width: auto;
        height: 45px;
        line-height: 30px;
    }

    .messageFooter__home img {
        width: 21.5px;
    }

    .messageFooter__send {
        width: 55%;
        display: inline-block;
        text-align: center;
        border-right: 1px solid #EEE;
    }

    .messageFooter__send-nohome {
        width: 65%;
    }

    .messageFooter__send a {
        width: auto;
        height: 45px;
    }

    .messageFooter__send img {
        width: 193.5px;
    }

    .messageFooter__send-nohome img {
        width: 212px;
    }

    .messageFooter__soudanshitsu {
        width: 32%;
        display: inline-block;
        text-align: center;
    }

    .messageFooter__soudanshitsu-nohome {
        width: 35%;
    }

    .messageFooter__soudanshitsu a {
        display: block;
        width: auto;
        height: 45px;
        padding: 5px 0;
        font-size: 14px;
        line-height: 1.3;

    }

    .messageFooter__soudanshitsu img {
        width: 101.5px;
    }

    .messageFooter__soudanshitsu-nohome img {
        width: 112px;
    }



    /* message page title ---------------------------------------*/

    .messagePageTitle {
        padding: 9px;
    }

    .messagePageTitle h1 {
        font-size: 18px;
    }

    /* subject page title ---------------------------------------*/

    .subjectPageTitle {
        padding: 10px 0 10px 0px;
    }

    .subjectPageTitle__btn {
        top: 14px;
        left: 10px;
        font-size: 14px;
    }

    .subjectPageTitle__btn-left {
        position: absolute;
        margin-top: 0px;
        margin-left: 2px;
        float: left;
    }


    /* notice message ---------------------------------------*/

    .noticeMessage {
        padding: 8px 10px;
        margin-bottom: 8px;
    }

    .noticeMessage .noticeMessage__icon-ouen {
        font-size: 13px;
        background: url(../images/common/icon_ouen.png) no-repeat left 3px;
        background-size: 13.5px;
        padding-left: 20px;
    }

    .noticeMessage .noticeMessage__icon-alert {
        font-size: 13px;
        background: url(../images/common/icon_alert.png) no-repeat left 3px;
        background-size: 13.5px;
        padding-left: 20px;
    }


    /* notice list ---------------------------------------*/

    .noticeList {
        margin-bottom: 13px;
    }


    /* contents block ---------------------------------------*/

    .contentsBlock__title::before {
        height: 18px;
        top: 2px;
    }

    .contentsBlock-info {
        padding-top: 10px;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .contentsBlock-left,
    .contentsBlock-right {
        width: auto;
        float: none;
        padding-top: 15px;
        margin-bottom: 15px;
    }

    .contentsBlock:last-of-type.contentsBlock-right {
        margin-bottom: 15px;
    }

    .contentsBlock__inner {
        padding: 8px;
    }

    .contentsBlock__inner-bottomLine {
        margin-bottom: 20px;
    }

    .contentsBlock__title {
        font-size: 16px;
        margin-bottom: 5px;
        padding-top: 1px
    }

    .tabBox .contentsBlock {
        padding-top: 5px;
        margin-bottom: 15px;
    }

    .tabBox .contentsBlock:last-of-type {
        margin-bottom: 0;
    }

    .contentsBlock__grayBox {
        padding: 10px 15px;
        line-height: 1.4;
        font-size: 14px;
        border-radius: 5px;
        margin: 0 0 10px 0;
    }

    /* tab ---------------------------------------*/

    .tabBtn ul li {
        font-size: 15px;
    }

    .tabBtn ul li a {
        padding: 12px 0;
    }


    #dateTabDisplay.open .dateTabDisplay__inner {
        padding-top: 0px;
    }

    .tabWrapper-top {
        margin-bottom: 0px
    }

    /* トップ 今日のデータ サマリー ---------------------------------------*/

    .dateDataSummery__title {
        padding-top: 8px;
    }

    .dateDataSummery__title h2 {
        font-size: 20px;
        line-height: 1.0;
    }

    .dateDataSummery__title .previous,
    .dateDataSummery__title .next {
        font-size: 14px;
        width: 60px;
        top: 20px;
    }

    .dateDataSummery__viewCalender {
        font-size: 14px;
    }

    .dateDataSummery__dataArea {
        margin-bottom: 15px;
    }

    .dateDataSummery__studyTime {
        padding: 12px 0;
    }

    .dateDataSummery__studyTime h3,
    .dateDataSummery__detail h3 {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .dateDataSummery__detail {
        padding: 15px 8px 13px;
    }

    .dateDataSummery__detail ul {
        padding-top: 0px;
    }

    .dateDataSummery__detail ul li {
        width: calc(50% - 5px);
        font-size: 17px;
        vertical-align: top;
        display: block;
        position: relative;
        padding: 5px 0;
        border-radius: 5px;
        margin-top: 7px;
    }

    .dateDataSummery__detail ul li .subjectIcon {
        width: 50%;
        height: 36px;
        line-height: 36px;
        text-align: center;
    }

    .dateDataSummery__detail ul li .subjectIcon img {
        width: 36px;
    }

    .dateDataSummery__detail ul li .subjectName {
        width: 50%;
        font-size: 11px;
        padding: 0;
        text-align: center;
    }

    .dateDataSummery__detail ul li .data {
        max-width: 45%;
        width: 65px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translate(0, -50%);
    }

    .dateDataSummery__detail ul li .data div {
        padding: 0;
        font-size: 13px;
    }

    .dateDataSummery__detail ul li .data div:first-child {
        padding-bottom: 8px;
        border-bottom: 1px solid #9b9b9b;
    }

    .dateDataSummery__detail ul li .data div:last-child {
        padding-top: 8px;
    }

    .dateAward {
        max-width: 100%;
        width: 350px;
        height: 245px;
        margin: 0 auto 5px;
        padding: 10px 0 0 0;
    }

    .dateAward__ribbon {
        left: 10px;
        top: 10px;
    }

    .dateAward__photo {
        max-width: 80%;
    }

    .dateDataSummery__studyTime h3,
    .dateDataSummery__detail h3,
    .dateDataSummery__app h3 {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .dateDataSummery__app {
        padding: 12px 8px;
        color: #000;
    }

    .dateDataSummery__app ul li {
        margin-top: 10px;
        border-radius: 5px;
        padding: 9px 8px;
    }

    .dateDataSummery__app ul li .subjectIcon {
        width: 36px;
        height: 36px;
    }

    .dateDataSummery__app ul li .subjectName {
        font-size: 14px;
        width: calc(100% - 100px);
    }

    .dateDataSummery__app ul li .data {
        width: 60px;
    }


    /* トップ 今日の取組内容 ---------------------------------------*/

    #todayActivity,
    #monthleyMainLesson,
    #monthleySeikairitsu {
        margin-top: -70px;
        padding-top: 70px;
    }

    .dateDataDone__title:before {
        margin-right: 0;
    }

    .dateDataDone__time {
        font-size: 14px;
        width: 103px;
        color: #000;
    }

    .dateDataDone__subjectWrapper {
        width: calc(100% - 111px);
        line-height: 1.3;
    }

    .dateDataDone__subject li {
        font-size: 11px;
        width: 19px;
        height: 19px;
        line-height: 19px;
        margin: 1px 3px 1px 0;
        font-weight: normal;
    }

    /* .dateDataDone__title-clickarea{width:calc(100% - 105px);} */

    .dateDataDone__title .sendMessage {
        width: 105px;
    }

    .dateDataDone__detail {
        padding: 5px 10px 5px;
    }

    .dateDataDone__detailTitle {
        margin: 10px 0 5px;
        font-size: 16px;
    }

    .dateDataDone__detailSubject {
        margin-top: 10px;
        padding: 8px 10px;
        border-top-width: 4px;
        color: #000;
    }

    .dateDataDone__icon {
        width: 36px;
        height: 36px;
    }

    .dateDataDone__text {
        line-height: 1.2;
        width: calc(100% - 90px);
        padding: 0 10px;
        font-size: 15px;
    }

    .dateDataDone__text small {
        font-size: 13px;
    }

    .dateDataDone__text b {
        font-size: 15px;
    }

    .dateDataDone__detailTime {
        width: 50px;
        font-size: 14px;
    }

    .dateDataDone__tag {
        padding: 2px 4px;
        font-size: 12px;
    }

    .dateDataDone__nodata {
        padding: 15px 0;
    }

    .dateDataDone__detailSubject-try {
        border-top-width: 4px;
        padding: 8px 10px;
        margin-top: 10px;
        color: #000;
    }

    .dateDataDone__detailSubject-try p {
        font-size: 14px;
    }

    .dateDataDone__image {
        max-width: 100%;
        margin: 7px 0;
    }

    /* トップ 月号のデータ　メインの取組状況 ---------------------------------------*/

    .monthleyNumber__title {
        padding-top: 8px;
    }

    .monthleyNumber__title h2 {
        font-size: 15px;
        line-height: 1.0;
    }

    .monthleyNumber__title .previous,
    .monthleyNumber__title .next {
        font-size: 14px;
        width: 60px;
    }

    .topChildLevel {
        margin-bottom: 10px;
    }

    .topChildLevel__checkWrapper {
        padding: 0px 0;
        width: auto;
        text-align: center;
        line-height: 1.0;
        max-width: 320px;
    }

    .topChildLevel__checkWrapper h3 {}

    .topChildLevel__checkSubject {
        padding: 8px 0;
    }

    .topChildLevel__checkSubject-withnumber {
        padding-bottom: 3px;
    }

    .topChildLevel__checkSubject-icon {
        width: 36px;
        height: 36px;
    }

    .topChildLevel__checkSubject-title {
        font-size: 12px;
        width: 54px;
        padding: 0 0px 0 5px;
    }

    .topChildLevel__checkSubject ul {
        width: calc(100% - 90px);
    }

    .topChildLevel__checkSubject ul li {
        width: 20px;
        margin: 0 1px;
    }

    .topChildLevel__checkSubject-title-app {
        width: calc(100% - 96px);
        font-size: 15px;
        font-weight: normal;
    }

    .topChildLevel__checkSubject-time {
        width: 60px;
        font-size: 14px;
    }

    .topChildLevel__checkSubject-withnumber ul li {
        padding-top: 10px;
    }

    .topChildLevel__checkSubject ul li>span {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .topChildLevel__checkSubject ul li>div {
        background: url(../images/common/levelcheck_nodata.png) no-repeat center center;
        background-size: 20px;
        width: 20px;
        height: 20px;
    }

    .topChildLevel__checkSubject ul li>div.clear {
        background: url(../images/common/levelcheck_clear.png) no-repeat center center;
        background-size: 20px;
    }

    .topChildLevel__checkSubject-subtitle {
        width: calc(100% - 90px);
        font-size: 14px;
        line-height: 1.5;
        padding-left: 0px;
    }

    .topChildLevel__checkSubject-detail {
        font-size: 14px;
        line-height: 1.3;
    }


    /* 		.topChildLevel__checkSumArea{margin:10px 0 20px;}
		.topChildLevel__checkSumArea h3{font-size: 15px;}

		.topChildLevel__checkBtnWrapper h3{
			margin-bottom: 15px;
			font-size: 14px;
		}

		.topChildLevel__checkBtnList li a{
			height:auto;
			min-height:60px;
			padding:5px 0;
		}
		.topChildLevel__checkIcon{font-size: 16px;top:13px;}

		.topChildLevel__btnText{
			line-height: 1.3;
			padding:5px 70px 0 52px;
		}

		.topChildLevel__btnMore{
			font-size: 12px;
			right:8px;
			padding:0 12px 0 0;
		}
 */

    /* トップ 月号のデータ　実力アップレッスンの取組状況 ---------------------------------------*/
    /*
	.topSkillLesson__inner{
		width:auto;
		padding:20px 0 0px;
		text-align: center;
		line-height: 1.0;
		max-width:600px;
	}

	.topSkillLesson__dataTitle{
		margin-bottom: 10px;
		display: inline-block;
	}
	.topSkillLesson__dataTitle ul{padding-left:50px;}
	.topSkillLesson__dataTitle ul li{
		width:90px;
		font-size: 14px;
	}

	.topSkillLesson__subject{
		padding:3px 0;
		overflow: hidden;
		display: inline-block;
	}

	.topSkillLesson__subject-kokugo,
	.topSkillLesson__subject-sansu,
	.topSkillLesson__subject-rika,
	.topSkillLesson__subject-syakai,
	.topSkillLesson__subject-eigo{
	    font-size: 15px;
	    width: 35px;
	    height: 35px;
	    line-height: 35px;
	    margin: 0 5px 0;
	}

	.topSkillLesson__subjectData{
		width:265px;
		margin-left: 5px;
	}

	.topSkillLesson__subjectData li{
		font-size: 14px;
		height:35px;
		margin-bottom: 7px;
	}

	.topSkillLesson__subjectData li:first-child{font-weight: bold;}

	.topSkillLesson__subjectData li b{
		font-weight: normal;
		font-size: 22px;
	}
	.topSkillLesson__subjectData li span{width:100%;}

	.topSkillLesson__description{
		font-size: 16px;
		padding:15px 10px 8px;
	}

	.topSkillLesson__description:before{
		border-width:7px;
		margin:0 0 0 -4px;
	}

	.topSkillLesson__bnr img{
		max-width:327.5px;
		width:100%;
	} */


    /* login ---------------------------------------*/

    .contentsBlock__title-login {
        margin-bottom: 15px;
    }

    .login__lead {
        text-align: left;
        font-size: 14px;
        padding: 0 15px;
        margin-bottom: 20px;
    }

    .login__inner {
        width: 100%;
        position: relative;
    }

    .login .contentsBlock__title {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 0;
        line-height: 1.3;
    }

    .login__helplink {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .login__notice {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .login__checkbox {
        margin-bottom: 25px;
    }

    .login__btn__wrapper {
        border-bottom: solid 1px #9b9b9b;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .login__subbtn:last-child {
        margin-bottom: 5px
    }

    .login_error {
        border-radius: 5px;
        padding: 10px 10px 10px 10px;
        margin: 0 10px 15px;
        max-width: 100%;
    }

    .login_error p {
        font-size: 14px;
        padding-left: 23px;
    }

    .login_error p::before {
        top: 2px;
    }


    /* choiceage ---------------------------------------*/

    .choiceage__lead {
        text-align: left;
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 11px;
        padding: 0 15px;
    }

    .choiceage__user {
        border-radius: 4px;
        font-size: 14px;
        padding: 6px;
        max-width: calc(100% - 30px);
        margin: 0 auto 7px;
    }

    .choiceage__inner {
        padding-bottom: 5px;
    }

    .choiceage__list {}

    .choiceage__list ul {
        border-radius: 4px;
        margin-bottom: 10px;
        border-color: #9B9B9B;
    }

    .choiceage__list ul li a {
        padding: 14px 13px 15px;
    }

    .choiceage__list ul li a::after {
        right: 18px;
    }

    .choiceage__list__year {
        font-weight: normal;
        margin-right: 5px;
        color: #4A4A4A;
        font-size: 15px;
    }

    .choiceage__list__category {
        padding: 4px 8px;
        font-weight: normal;
        border-radius: 2px;
    }

    @media all and (-ms-high-contrast:none) {
        .choiceage__list__category {
            padding: 5px 8px 3px;
        }

        /* IE10〜Edge */
    }

    .choiceage__notice {
        font-size: 14px;
        line-height: 1.2;
    }

    /* form ---------------------------------------*/

    .formRadio label {
        background: url(../images/common/radio.png) left 1px no-repeat;
        background-size: 25px;
        min-height: 26px;
        padding: 0px 0 0 25px;
    }

    .formRadio input:checked+label {
        background-image: url(../images/common/radio_on.png);
        background-size: 25px;
    }

    .formError {
        font-size: 14px;
        padding: 10px 5px 10px 27px;
        background: url(../images/common/icon_error.png) no-repeat 7px 10px #FAE5E8;
        background-size: 17.5px;
    }

    .formTextarea {
        height: 220px;
    }


    /* btn ---------------------------------------*/

    .btn,
    .btn__black {
        max-width: 100%;
    }

    .btn__wrapper {
        margin-bottom: 15px;
    }


    /* おうえんメッセージを送る ---------------------------------------*/

    .wrapper__ouenmessageEntry {
        padding-top: 40px;
    }

    .contentsBlock.contentsBlock-ouenMessage {
        margin-bottom: 10px;
    }

    .ouenmessage__logo {
        height: 95px;
    }

    .contentsBlock__inner-ouenmessage {
        padding: 0px 10px 10px;
        width: auto;
    }

    .contentsBlock__inner-ouenmessageEntry {
        padding: 10px 10px 30px;
        width: auto;
    }

    .ouenmessage__lead {
        padding: 0 15px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .ouenmessage__lead-input {
        text-align: left;
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .ouenmessage__lead-sent {
        text-align: left;
        font-size: 16px;
    }

    .ouenmessage__lead-error {
        margin-bottom: 100px;
    }

    .ouenmessage__textCount {
        padding: 5px 0;
        font-size: 15px;
    }

    .ouenmessage__entryNotice {
        font-size: 15px;
    }

    .ouenmessage__selectStamp {
        margin-bottom: 30px;
    }

    .ouenmessage__body {
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .ouenmessage__stamp {
        padding: 10px 0 10px;
    }

    .ouenmessage__btnArea {
        padding-bottom: 0px;
    }

    .ouenmessage__btnArea+.ouenmessage__bottomCopy {
        padding-top: 10px;
    }

    .ouenmessage__bottomNotice {
        text-align: left;
        text-indent: -1.3em;
        margin-left: 1.3em;
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 16px;
        line-height: 1.4;
    }

    .ouenmessage__completeImage {
        padding: 15px 0 20px;
        text-align: center;
    }

    .ouenmessage__completeImage img {
        width: 262px;
    }

    .ouenmessage__bottomCopy {
        font-size: 16px;
        line-height: 1.5;
    }

    /* 成績表 ---------------------------------------*/

    .contentsBlock.contentsBlock-report {
        padding-top: 12px;
        margin-bottom: 15px;
    }

    .report__graph {
        margin-bottom: 20px;
        text-align: center;
        padding: 5px 0;
    }



    /* modal ---------------------------------------*/

    .modal {
        font-size: 14px;
        line-height: 1.6;
    }

    .modalInner {
        padding: 10px;
    }

    .stampModal {
        max-width: 100%;
    }

    .stampModalList li {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }

    /* hopstep__area ---------------------------------------*/
    .hopstep__area .hopstep_logo {
        max-width: 240px;
    }

}


@media screen and (max-width: 380px) {

    .hopstep__area .hopstep_logo {
        max-width: 180px;
    }

    .hopstep__area p {
        margin-bottom: 2px;
    }

    .hopstep__area h1 {
        font-size: 14px;
    }

    .login__helplink {
        margin-bottom: 6px;
    }
}

@media screen and (max-width: 370px) {

    .dateDataDone__title-clickarea {
        /* width: calc(100% - 95px); */
        padding-left: 30px;
    }

    .dateDataDone__time {
        font-size: 14px;
        width: 95px;
    }

    .dateDataDone__subjectWrapper {
        width: calc(100% - 110px);
    }

    .dateDataDone__title .sendMessage {
        width: 95px;
        font-size: 11px;
        padding-left: 30px;
    }

    .dateDataDone__subject li {
        width: 19px;
        height: 19px;
        line-height: 19px;
        font-size: 11px;
    }

    .topChildLevel__checkWrapper {
        max-width: 270px;
    }

    .topChildLevel__checkSubject-icon {
        width: 30px;
    }

    .topChildLevel__checkSubject-title {
        width: 50px;
        font-size: 11px;
    }

    .topChildLevel__checkSubject ul {
        width: calc(100% - 80px);
    }

    .topChildLevel__checkSubject ul li {
        width: 16px;
    }

    .topChildLevel__checkSubject ul li>div.clear {
        background: url(../images/common/levelcheck_clear.png) no-repeat center center;
        background-size: 16px;
    }

    .topChildLevel__checkSubject ul li>div {
        background: url(../images/common/levelcheck_nodata.png) no-repeat center center;
        background-size: 16px;
    }

    .dateAward {
        height: 65vw;
    }

}


@media screen and (max-width: 359px) {

    .dateDataDone__title-clickarea {
        line-height: 54px;
    }

    .dateDataDone__title-clickarea {
        /* width: calc(100% - 95px); */
        padding-left: 35px;
    }

    .dateDataDone__time {
        font-size: 14px;
        width: 60px;
        line-height: 1.5;
    }

    .dateDataDone__subjectWrapper {
        width: calc(100% - 70px);
    }

}