@charset "utf-8";

/**** - 767px ****/

/**** Grid ****/
.contents { width:auto; margin:0 10px 0 10px; }
.contents > .layout-single { width:auto; }
.contents > .layout-menu-right { display:block; width:auto; }
.contents > .layout-menu-right > .main { display:block; width:auto; }
.contents > .layout-menu-right > .menu { display:block; width:auto; float:none; padding:0; margin:40px 0 0 0; }
.contents > .layout-menu-left { width:auto; }
.contents > .layout-menu-left > .main { display:block; width:auto; float:none; }
.contents > .layout-menu-left > .menu { display:block; width:auto; float:none; padding:0; margin:40px 0 0 0; }
.contents > .layout-two-columns { display:block; }
.contents > .layout-two-columns > .left { display:block; width:auto; padding:0; }
.contents > .layout-two-columns > .right { display:block; width:auto; padding:0; margin:10px 0 0 0; }
.contents > .layout-three-columns { display:block; }
.contents > .layout-three-columns > .left { display:block; width:auto; padding:0; }
.contents > .layout-three-columns > .center { display:block; width:auto; padding:0; margin:10px 0 0 0; }
.contents > .layout-three-columns > .right { display:block; width:auto; padding:0; margin:10px 0 0 0; }
header + .contents  { padding-top:30px; }
#caution + .contents { padding-top:30px; }
#ribbon + .contents { padding-top:30px; }
#information + .contents { padding-top:30px; }
.contents > .layout-menu-right > .main .slider,
.contents > .layout-menu-left > .main .slider { width:100% !important; }

/**** Header ****/
header { height:70px; }
header > .inner { width:auto; margin:0 10px 0 10px; }
header > .inner > .logo { position:absolute; top:13px; left:0; }
header > .inner > .logo > a { width:150px; height:48px; }
/*header > .inner > .lead { position:absolute; bottom:4px; left:0; padding-left:0 !important; }*/
header > .inner > .lead { display:none; }
header > .inner > .menu { position:absolute; bottom:8px; right:0; }
header > .inner > .menu > ul { text-align:right; }
header > .inner > .menu > ul > li { display:none; }
header > .inner > .menu > ul > li.login { display:inline-block; }
header > .inner > .menu > ul > li.news:first-child { display:block; }
header > .inner > .menu > ul > li.news > a { font-size:11px; }

header > .inner > .menu > ul > li.notification { display:inline-block; }
header > .inner > .menu > ul > li.notification > a { width:32px; height:32px; line-height:32px; text-align:center; vertical-align:center; border:1px solid #cccccc; border-radius:2px; background:#fafafa; position:relative; top:-1px; }
header > .inner > .menu > ul > li.notification > a:hover { opacity:0.75; }
header > .inner > .menu > ul > li.notification > a > span { display:none; }
header > .inner > .menu > ul > li.notification > a > i { display:inline-block; font-size:16px; color:#aaaaaa; }
header > .inner > .menu > ul > li.notification > a > label.circle { display:inline-block; position:absolute; top:-8px; right:-8px; }

header > .inner > .menu > ul > li.menu { display:inline-block; margin-left:6px; }
header > .inner > .menu > ul > li.menu > a { background:#fafafa; width:32px; height:32px; line-height:32px; text-align:center; vertical-align:center; padding:0; }
header > .inner > .menu > ul > li.menu > a > span { display:none; }
header > .inner > .menu > ul + a { display:none; }
.navigation > .inner { width:auto; margin:0 10px 0 10px; }
.navigation > .inner > .logo { position:absolute; top:5px; left:-3px; }
.navigation > .inner > .menu > ul > li { display:none; }

.navigation > .inner > .menu > ul > li.notification { display:inline-block; }
.navigation > .inner > .menu > ul > li.notification > a { width:24px; height:24px; line-height:24px; text-align:center; vertical-align:center; border:1px solid #cccccc; border-radius:2px; padding:0; background:#fafafa; position:relative; top:-1px; }
.navigation > .inner > .menu > ul > li.notification > a:hover { opacity:0.75; }


.navigation > .inner > .menu > ul > li.notification > a > span { display:none; }
.navigation > .inner > .menu > ul > li.notification > a > i { display:inline-block; font-size:14px; color:#aaaaaa; }
.navigation > .inner > .menu > ul > li.notification > a > label.circle { display:inline-block; position:absolute; top:-6px; right:-8px; }


.navigation > .inner > .menu > ul > li.menu { display:inline-block; margin-left:6px; }
.navigation > .inner > .menu > ul > li.menu > a { background:#fafafa; width:24px; height:24px; line-height:24px; text-align:center; vertical-align:center; padding:0; }
.navigation > .inner > .menu > ul > li.menu > a > span { display:none; }

/**** NavigationMenu ****/
.navigation-menu > .container > .inner { width:auto; padding:10px 10px 10px 10px; }
.navigation-menu > .container > .inner > .account { padding:0 0 10px 0; margin:0 0 10px 0; }
.navigation-menu > .container > .inner > .account > .settings { position:absolute; top:15px; right:5px; }
.navigation-menu > .container > .inner > .account > .settings > a + a { margin-left:10px; }
.navigation-menu > .container > .inner > .menu { display:block; width:100% !important; margin:18px 0 0 0; }
.navigation-menu > .container > .inner > .menu > ul > li { display:inline-block; line-height:28px; margin-right:15px; }
.navigation-menu > .container > .inner > .menu.menu-settings { display:none; }
.navigation-menu > .container > .inner > .menu.menu-news { display:block; margin:0; padding-top:20px; }
.navigation-menu > .container > .inner > .menu.menu-news > ul > li { line-height:20px; margin-right:8px; }
.navigation-menu > .container > .inner > .close { display:block; position:relative; bottom:auto; right:auto; text-align:center; background:#f0f0f0; border-radius:4px; color:#cccccc; font-size:16px; margin-top:10px; }

/**** Caution ****/
#caution { line-height:20px; padding:10px 0 10px 0; }
#caution > span > span { display:block; margin-bottom:10px; }
#caution > span > span + span { margin-top:-10px; }
#caution > span > span > a.btn { margin:10px 0 10px 0; }

/**** Footer ****/
footer { margin:80px 0 0 0; }
footer > .upper { width:auto; padding:10px 10px 20px 10px; }
footer > .upper > ul { display:block; width:100% !important; text-align:left; white-space:normal !important; }
footer > .upper > ul + ul { margin-left:0; margin-top:5px; }
footer > .upper > ul > li { display:inline-block; line-height:24px; padding-right:10px; text-align:left; vertical-align:middle; }
footer > .upper > ul > li.heading { display:block; }
footer > .upper > ul > li.logo { display:block; padding-bottom:5px; }
footer > .upper > ul > li.logo > a { display:inline-block; width:84px; height:28px; position:relative; left:0; }
footer > ul.bottom > li > a { font-size:12px; line-height:24px; padding:0 5px 0 5px; }
footer > ul.bottom > li.gakken > span { width:60px; height:14px; }
footer.logged-in > .upper { display:none; }
footer.logged-in > ul.bottom { display:none; }
footer.logged-in > .copyright { background:#33a569; color:#ffffff; }


/**** Thumb ***/
dl.with-thumb.mobile-inline-block { display:inline-block; width:auto; }
dl.with-thumb.mobile-inline-block > dt { display:block; width:auto; height:auto; text-align:center; vertical-align:middle; }
dl.with-thumb.mobile-inline-block > dd { display:block; text-align:center; vertical-align:middle; padding-left:0; padding-top:8px; }
dl.with-thumb.mobile-inline-block > dd.min { width:auto; white-space:nowrap; }


/**** Pii ****/
dl.heading-with-pii.simple > dt,dl.heading-with-pii.mobile-omit > dt { display:none; }
dl.heading-with-pii.simple > dd,dl.heading-with-pii.mobile-omit > dd { padding:8px 0 0 0; }
dl.heading-with-pii.mobile-block { display:block; width:auto; }
dl.heading-with-pii.mobile-block > dt { display:block; width:auto; height:auto; text-align:center; vertical-align:middle; }
dl.heading-with-pii.mobile-block > dd { display:block; text-align:center; vertical-align:middle; padding:8px 0 0 0; }
dl.heading-with-pii.mobile-block > dt > i.pii { margin-right:0 !important; }

/**** Form Layout ****/
dl.form-field { display:block; }
dl.form-field + dl.form-field > dt { border-top:none; }
dl.form-field > dt { display:block; width:auto; padding:4px 4px 4px 8px; text-align:left; vertical-align:middle; font-size:12px; line-height:24px; }
dl.form-field > dd { display:block; padding:8px 0 16px 0; text-align:left; vertical-align:middle; }
dl.form-field.divided { padding:16px 0 0 0; margin:0; }
dl.form-field > dd + dd { padding:0 0 16px 0; margin-top:-8px; }
dl.form-field > dd .description { padding:4px 0 10px 0; }
/* dd.table */
dl.form-field > dd.table > ul > li { padding:8px 0 16px 0; }
dl.form-field > dd.table > ul > li + li { padding-left:8px; }
/* dd.list + div */
dl.form-field > dd.list > div.inner { padding:8px 0 16px 0; }
dl.form-field > dd.list > div.inner + div.inner { margin-top:-8px; padding-top:0; }
dl.form-field > dd.list > div.inner .description { padding-top:4px; }
dl.form-field > dd.list > div.inner + div.inner .description { padding-top:4px; }
/* dd.list + dl */
dl.form-field > dd.list > dl.inner > dt,
dl.form-field > dd.list > dl.inner > dd { padding:8px 0 16px 0; }
dl.form-field > dd.list > dl.inner > dd { padding-left:8px; }
dl.form-field > dd.list > dl.inner + dl.inner { margin-top:-8px; }

dl.form-field > dd.padding { padding:8px 4px 16px 8px; }
dl.form-field > dd.list.padding { padding:0 0 0 8px; }
dl.form-field.large > dt { font-size:12px; color:#668877; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; }
dl.form-field.large > dt:before { content:"\ea3b"; font-family:"icon"; color:#668877; opacity:0.5; margin-right:3px; position:relative; top:1px; }
dl.form-field.large.divided { padding:0; margin:10px 0 0 0; border:none; }
dl.form-field > dd p.warning { margin-top:8px; }

/**** Navigation Bar ****/
ul.navigation-bar { overflow-y:hidden; overflow-x:scroll; border:none; }
ul.navigation-bar > li.link { right:0; }
ul.navigation-bar > li > a { font-size:18px; }
ul.navigation-bar.small > li + li { margin-left:10px; }
ul.navigation-bar.simple { margin-top:-5px; }
ul.navigation-bar.simple > li.active { width:100%; text-align:center; }
ul.navigation-bar.simple > li.active > a { padding:0 10px 25px 10px; }
ul.navigation-bar.simple > li.link { display:none; }
ul.navigation-bar.simple > li.back { position:absolute; top:-10px; left:0; z-index:1; }
ul.navigation-links > li { margin-right:6px; }
ul.navigation-links { margin:10px 0 30px 0; }
ul.navigation-links > li > a:before { margin-right:6px; }
ul.navigation-links > li:last-child > a:after { display:none; }

/**** Message ****/
#message > .inner { padding:10px; line-height:28px; }

/**** Ribbon ****/
#ribbon > .inner { width:auto; margin:0 10px 0 10px; }
#ribbon > .inner2 { width:auto; margin:0 10px 0 10px; }

/**** Dialog ****/
.dialog > .content > .inner { padding:20px 8px 20px 8px; }

/**** page > guest-top ****/
#page-guest-top .cover { min-height:auto; padding-bottom:90px; background-position:bottom -90px right; border:none; }
#page-guest-top .cover > .inner { margin:24px 10px 0 10px; width:auto;  }
#page-guest-top .cover > .inner > .content { padding:8px 8px 16px 8px; }
#page-guest-top .cover > .inner > .divider { margin:0 0 12px 0; }
#page-guest-top .cover > .inner > .content.others { margin-top:22px; padding:4px 8px 4px 8px; }



/**** Utils ****/
.mobile-hidden { display:none !important; } .mobile-block { display:block !important; } .mobile-inline-block { display:inline-block !important; } .mobile-inline { display:inline !important; }
.mobile-cover { margin:0 -10px 0 -10px; border-radius:0 0 0 0 !important; }
.mobile-bg-dotted { background:#f9f9f9 url("../../../images/common/bg.dotted.png") top left repeat !important; }
.mobile-wauto { width:auto !important; } .mobile-w100p { width:100% !important; max-width:100% !important; } .mobile-min { width:1% !important; white-space:nowrap !important; }
.mobile-maxwauto { max-width:auto !important; }
.mobile-minwauto { min-width:auto !important; }
.mobile-w30p { width:30% !important; } .mobile-w45p { width:45% !important; }
.mobile-h300 { height:300px !important; } .mobile-h400 { height:400px !important; }
.mobile-mauto { margin-left:auto !important; margin-right:auto !important; }
.mobile-f20px { font-size:20px !important; }
.mobile-m0 { margin:0 !important; } .mobile-m5 { margin:5px !important; } .mobile-m8 { margin:8px !important; } .mobile-m10 { margin:10px !important; } .mobile-m20 { margin:20px !important; }
.mobile-mt0 { margin-top:0 !important; } .mobile-mt5 { margin-top:5px !important; } .mobile-mt10 { margin-top:10px !important; } .mobile-mt15 { margin-top:15px !important; } .mobile-mt20 { margin-top:20px !important; } .mobile-mt30 { margin-top:30px !important; } .mobile-mt40 { margin-top:40px !important; } .mobile-mt100 { margin-top:100px !important; }
.mobile-mr0 { margin-right:0 !important; }
.mobile-mb0 { margin-bottom:0 !important; } .mobile-mb2 { margin-bottom:2px !important; } .mobile-mb4 { margin-bottom:4px !important; } .mobile-mb8 { margin-bottom:8px !important; } .mobile-mb10 { margin-bottom:10px !important; } .mobile-mb15 { margin-bottom:15px !important; } .mobile-mb20 { margin-bottom:20px !important; } .mobile-mb40 { margin-bottom:40px !important; }
.mobile-ml0 { margin-left:0 !important; } .mobile-ml15 { margin-left:15px !important; }
.mobile-p0 { padding:0 !important; } .mobile-p10 { padding:10px !important; } .mobile-p15 { padding:15px !important; }
.mobile-pt0 { padding-top:0px !important; } .mobile-pt5 { padding-top:5px !important; } .mobile-pt10 { padding-top:10px !important; } .mobile-pt15 { padding-top:15px !important; }
.mobile-pr0 { padding-right:0 !important; } .mobile-pr5 { padding-right:5px !important; } .mobile-pr10 { padding-right:10px !important; } .mobile-pr20 { padding-right:20px !important; }
.mobile-pb0 { padding-bottom:0 !important; } .mobile-pb1 { padding-bottom:1px !important; } .mobile-pb10 { padding-bottom:10px !important; }
.mobile-pl0 { padding-left:0 !important; } .mobile-pl5 { padding-left:5px !important; } .mobile-pl10 { padding-left:10px !important; } .mobile-pl15 { padding-left:15px !important; } .mobile-pl20 { padding-left:20px !important; }
.mobile-tc { text-align:center !important; } .mobile-tl { text-align:left !important; } .mobile-tr { text-align:right !important; }
.mobile-youtube { width:320px !important; height:180px !important; }
.mobile-youtube-w100p { position:relative; width:100%; padding-top:56.25%; }
.mobile-youtube-w100p iframe { position:absolute; top:0; right:0; width:100% !important; height:100% !important; }
.mobile-clear-absolute { position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; right:auto !important; }
.mobile-left3px { left:3px !important; }
.mobile-r0 { border-radius:0 !important; }



/* flex short cuts */
.mobile-flex-between-top { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-start !important; }
.mobile-flex-between-middle { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:center !important; }
.mobile-flex-between-bottom { display:flex !important; justify-content:space-between !important; flex-wrap:nowrap !important; align-items:flex-end !important; }
.mobile-flex-left-top { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-start !important; }
.mobile-flex-left-middle { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:center !important; }
.mobile-flex-left-bottom { display:flex !important; justify-content:flex-start !important; flex-wrap:nowrap !important; align-items:flex-end !important; }
.mobile-flex-center-top { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-start !important; }
.mobile-flex-center-middle { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:center !important; }
.mobile-flex-center-bottom { display:flex !important; justify-content:center !important; flex-wrap:nowrap !important; align-items:flex-end !important; }
.mobile-flex-right-top { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-start !important; }
.mobile-flex-right-middle { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:center !important; }
.mobile-flex-right-bottom { display:flex !important; justify-content:flex-end !important; flex-wrap:nowrap !important; align-items:flex-end !important; }
.mobile-flex-direction-row { flex-direction:row !important; } .mobile-flex-direction-row-reverse { flex-direction:row-reverse !important; }
.mobile-flex-grow { flex-grow:2 !important; } .mobile-flex-grow-0 { flex-grow:0 !important; } .mobile-flex-grow-1 { flex-grow:1 !important; } .mobile-flex-grow-2 { flex-grow:2 !important; }
.mobile-flex-wrap { flex-wrap:wrap !important; } .mobile-flex-nowrap { flex-wrap:nowrap !important; }

.mobile-flex-one-column > * { width:100% !important; }
.mobile-flex-two-column > * { width:calc(50% - 10px) !important; }
.mobile-flex-three-column > * { width:calc(33% - 14px) !important; }