@charset "UTF-8";
html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: "Varela Round", Helvetica, Arial, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ“, Meiryo, “ＭＳ Ｐゴシック“, ”MS PGothic”, sans-serif; font-size: 1.2rem; line-height: 1; color: #3E3E3E; word-wrap: break-word; overflow-x: hidden; }

.homePage { background: #d08d49; }

.historyPage { background: #ebf6c4; }

.settingPage { background: #788098; }

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

img { width: 100%; }

p { line-height: 1.3; }

a { text-decoration: none; color: inherit; cursor: pointer; z-index: 2; }
a:visited { color: inherit; }
a.tx p { display: inline-block; }
a.tx:hover { transition: opacity .2s; opacity: .8; }

.nl { display: inline-block; }

#allContainer { position: relative; width: 100%; min-height: 100vh; min-width: 360px; overflow: hidden; }
#allContainer::after { content: ""; position: absolute; top: -100%; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 100; }
#allContainer.show.home::before { background: none; }
#allContainer.show::after { animation: overlayShow .2s ease 0s both; }
#allContainer.hide.home::before { background: #A6E0F6; }
#allContainer.hide::after { animation: overlayHide .2s ease 0s both; }

#hide { position: absolute; width: 100%; height: 100%; background: #FAFAFA; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; border-radius: 20px; }

div.loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/loader.gif) no-repeat center center white; filter: alpha(opacity=40); -ms-filter: 0.4; opacity: 0.4; z-index: 1010; }

#allContainer.home { background: url(../img/bg_wood.png) repeat; }
#allContainer.spring { background-image: linear-gradient(-179deg, #b9eaff 0%, #ffffff 30%); }
#allContainer.winter { background-image: linear-gradient(-179deg, #7eadc8 0%, #ffffff 97%); }

.bgWrap { position: fixed; width: 100%; height: 100vh; top: 0; margin-top: 50px; }
.bgWrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url(../img/bg_noize.png); opacity: .4; }
.bgWrap .layer { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100vh; }

.bgsp { background-repeat: no-repeat; background-position: center top; background-size: auto 170px; }

.bg1::before { content: ""; position: absolute; top: 340px; left: 0; right: 0; width: 100%; height: 200vh; background-image: linear-gradient(0deg, #f6ffd3 0%, #e7f4b5 100%); }

.spring .bgsp { background-image: url(../img/spring/bgsp.png); }
.spring .heroSub { background-image: url(../img/spring/bgsp.png); }

.winter .bgsp { background-image: url(../img/winter/bgsp.png); }
.winter .heroSub { background-image: url(../img/winter/bgsp.png); }

.selectWrap { position: relative; width: 100%; height: auto; }
.selectWrap .viewport { width: 100%; height: 36px; padding: 0 40px 0 20px; border: 1px solid #C0C0C0; border-radius: 7px; background: #fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; cursor: pointer; z-index: 1; }
.selectWrap .viewport:hover { background: #e1e9ff; }
.selectWrap .viewport::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 40px; height: 100%; text-align: center; background: url(../img/ic_arrow.svg) no-repeat center; background-size: 15px; }
.selectWrap .viewport > p { line-height: 36px; }
.selectWrap .viewport:hover + ul { display: block; }
.selectWrap ul { display: none; position: absolute; left: 0; right: 0; top: 38px; bottom: 0; width: 100%; height: 108px; border-radius: 8px; box-shadow: 0 2px 6px 1px rgba(99, 99, 99, 0.2); z-index: 10; }
.selectWrap ul::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; width: 100%; height: 50px; background: #000; opacity: 0; z-index: -1; }
.selectWrap ul:hover { display: block; }
.selectWrap li { height: 36px; padding: 0 20px; border: 1px solid #C0C0C0; background: #fff; transition: .2s; }
.selectWrap li + li { border-top: none; }
.selectWrap li:first-child { border-radius: 7px 7px 0 0; }
.selectWrap li:last-child { border-radius: 0 0 7px 7px; }
.selectWrap li p { line-height: 36px; }
.selectWrap li:hover { background: #e1e9ff; }

.pager > * { width: 34px; height: 34px; background: #fff; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); }
.pager .icon { font-size: 14px; line-height: 34px; color: #4B496B; }
.pager .prev { transform: scale(-1, 1); }

.mainNav { width: 100%; height: 50px; color: #6B6B6B; font-size: 1.1rem; }
.mainNav ul { display: flex; justify-content: center; width: 100%; height: 100%; }
.mainNav li { width: calc(100% / 3); text-align: center; }
.mainNav li.active { color: #386FDF; }
.mainNav a { display: block; width: 100%; height: 100%; padding: 10px 0; }
.mainNav .imgWrap { padding-bottom: 2px; font-size: 18px; }

.jap, .icon-jap { background-color: #f53a3a; }
.jap p::before, .icon-jap p::before { color: #f53a3a; }

.icon-kotoba, .icon-hiragana { background-color: #f53a3a; }

.mth, .icon-mth { background-color: #0b7ccc; }
.mth p::before, .icon-mth p::before { color: #0b7ccc; }

.icon-shape, .icon-number, .icon-clock { background-color: #0b7ccc; }

.eng, .icon-eng { background-color: #fc7f00; }
.eng p::before, .icon-eng p::before { color: #fc7f00; }

.sci, .icon-sci { background-color: #7fc94e; }
.sci p::before, .icon-sci p::before { color: #7fc94e; }

.knowledge, .icon-knowledge { background-color: #21b89a; }
.knowledge p::before, .icon-knowledge p::before { color: #21b89a; }

.life, .icon-life { background-color: #b651d7; }
.life p::before, .icon-life p::before { color: #b651d7; }

.disable { color: #999; }
.disable .studyIc { border: 1px dashed #999 !important; background-color: #f7f7f7 !important; color: #999 !important; }

.hiragana::before { background-image: url(../img/ic_hiragana.svg); }

.katakana::before { background-image: url(../img/ic_katakana.svg); }

.kotoba::before { background-image: url(../img/ic_kotoba.svg); }

.number::before { background-image: url(../img/ic_number.svg); }

.clock::before { background-image: url(../img/ic_clock.svg); }

.shape::before { background-image: url(../img/ic_shape.svg); }

.eng::before { background-image: url(../img/ic_eng.svg); }

.knowledge::before { background-image: url(../img/ic_knowledge.svg); }

.life::before { background-image: url(../img/ic_life.svg); }

.sci::before { background-image: url(../img/ic_sci.svg); }

@media all and (min-width: 1080px) { body { font-size: 1.4rem; }
  a { transition: .3s; }
  .bgWrap { position: fixed; width: 100%; height: 100vh; top: 0; bottom: 0; margin-top: 0; z-index: 1; }
  .bgWrap .layer { position: absolute; top: 0; width: 100%; height: 340px; background-size: auto 340px; background-position: center bottom; }
  .bgsp { display: none; }
  .bg6 { background-repeat: no-repeat; z-index: -6; }
  .bg5 { background-repeat: no-repeat; z-index: -5; }
  .bg4 { background-repeat: no-repeat; z-index: -4; }
  .bg3 { background-repeat: no-repeat; z-index: -3; }
  .bg2 { background-repeat: no-repeat; z-index: -2; }
  .bg1 { background-repeat: repeat; z-index: -1; }
  .spring .bg6 { background-image: url(../img/spring/bg03_2.png); opacity: .6; }
  .spring .bg5 { background-image: url(../img/spring/bg03.png); }
  .spring .bg4 { background-image: url(../img/spring/bg02_2.png); }
  .spring .bg3 { background-image: url(../img/spring/bg02.png); }
  .spring .bg2 { background-image: url(../img/spring/bg01_2.png); }
  .spring .bg1 { background-image: url(../img/spring/bg01.png); }
  .winter .bg6 { background-image: url(../img/winter/bg03_2.png); }
  .winter .bg5 { background-image: url(../img/winter/bg03.png); }
  .winter .bg4 { background-image: url(../img/winter/bg02_2.png); }
  .winter .bg3 { background-image: url(../img/winter/bg02.png); }
  .winter .bg2 { background-image: url(../img/winter/bg01_2.png); }
  .winter .bg1 { background-image: url(../img/winter/bg01.png); }
  .winter .bg1::before { background-image: linear-gradient(0deg, #DEEEF8 0%, #DEEEF8 100%); }
  .pager > * { width: 50px; height: 50px; }
  .pager > *:hover { background: #f0f4ff; }
  .pager .icon { line-height: 50px; font-size: 20px; }
  .mainNav { height: 50px; font-size: 1.4rem; }
  .mainNav li { position: relative; z-index: 1; }
  .mainNav li::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 60%; margin: auto; border-right: 1px solid #D8D8D8; z-index: -1; }
  .mainNav li:first-child::before { border-left: 1px solid #D8D8D8; }
  .mainNav li::after { content: ""; position: absolute; bottom: -1px; right: 0; width: calc(100% - 2px); border-bottom: 3px solid rgba(56, 111, 223, 0); }
  .mainNav li:hover { color: #386FDF; }
  .mainNav li:hover::after { border-bottom: 3px solid #386FDF; }
  .mainNav li.active::after { border-bottom: 3px solid #386FDF; }
  .mainNav a { display: flex; justify-content: center; align-items: center; padding-bottom: 10px; }
  .mainNav .imgWrap { margin-right: 10px; font-size: 2rem; } }
#header { position: absolute; width: 100%; z-index: 10; }
#header > .inner { width: 100%; height: 50px; padding: 0 10px; background: #FFF; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); z-index: 2; }
#header .topArea { display: flex; justify-content: space-between; align-items: center; height: 100%; }
#header .mainLogo { width: 100%; max-width: 150px; min-width: 150px; margin-right: 10px; }
#header .mainLogo img { width: 100%; }
#header .tb { display: none; }
#header .selectWrap { max-width: 200px; }
#header .selectWrap .viewport { position: relative; max-width: 200px; }
#header.scroll { animation: down1 .3s linear both; }
#header.scroll.scrollBack { position: fixed; animation: down .3s linear both; }
#header.fixed > .inner.sub { position: fixed; top: 0; }
#header.fixed .inner + .heroSub { top: 50px; }
#header.hide { position: fixed; animation: hide .3s both; }

.heroSub { position: fixed; top: -55px; width: 100%; height: 50px; background: #fff; color: #4B496B; font-size: 16px; background-size: auto 140px; background-position: center 43%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); transition: top .3s; transition-timing-function: linear; z-index: -1; }
.heroSub .inner { display: flex; justify-content: space-between; align-items: center; width: calc(94% + 25px); height: 100%; margin: 0 auto; padding: 0 10px; }
.heroSub a { display: block; width: 100%; height: 100%; }
.heroSub .no { padding: 0 4px; font-size: 1.8em; }
.heroSub .pager { margin-top: 0; }
.heroSub.fixed { top: 0; }

#hero { position: relative; width: 100%; height: 120px; margin-top: 50px; text-align: center; background-size: auto 120px; background-position: top center; z-index: 1; }
#hero > .inner { display: flex; align-items: center; justify-content: space-between; width: calc(94% + 25px); height: 100%; margin: 0 auto; padding: 0 10px; }
#hero h1 { margin: 0 auto; padding: 0 10px; font-size: 1.8rem; color: #4B496B; line-height: 1.2; text-shadow: 0 1px 1px white; }
#hero h1 .no { padding: 0 6px; font-size: 4.2rem; }
#hero h1 .nl { margin-left: 20px; }
#hero.home { padding-top: 5px; }
#hero.home h1 { display: inline; max-width: 185px; height: 23px; }
#hero.home > .inner { justify-content: center; flex-direction: column; }
#hero.home .textWrap { margin-top: 10px; }
#hero.home p { position: relative; font-size: 1.4rem; color: #fff; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); }
#hero.home span { position: relative; margin-right: -2px; padding-left: 4px; }
#hero.small { height: 50px; }

.pager a { display: block; margin-top: 10px; border-radius: 50%; cursor: pointer; }

#mainContents { margin-bottom: 15px; padding-bottom: 50px; }
#mainContents > .inner { position: relative; background: #FAFAFA; box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); }

.barWrap { position: relative; }

.progressbar { position: relative; display: flex; width: 100%; height: 20px; margin-top: 5px; border-radius: 50px; background: linear-gradient(to bottom, #d7d7d7 0%, #F0F0F0 60%, #F0F0F0 100%); }
.progressbar::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; border-radius: 50px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset; z-index: 2; }
.progressbar::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; border-radius: 50px; box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.06) inset; z-index: 2; }
.progressbar .mask { position: absolute; top: 0; bottom: 0; left: 0; background: #F0F0F0; background: linear-gradient(to bottom, #d7d7d7 0%, #F0F0F0 60%, #F0F0F0 100%); animation: bar 1s cubic-bezier(0.3, 0.3, 0.35, 1.07) 0.2s both; transform-origin: right; z-index: 1; }
.progressbar .bar { display: block; position: relative; width: 0; height: 100%; cursor: pointer; }
.progressbar .bar::after { content: ""; position: absolute; top: 0px; right: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%); }
.progressbar .bar + .bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.2); border-left: 1px solid rgba(0, 0, 0, 0.15); }
.progressbar .bar:hover .data { bottom: 42px; transform: scale(1); opacity: 1; }
.progressbar .bar:first-of-type { width: 100%; left: 0; border-radius: 50px 0 0 50px; }
.progressbar .bar:first-of-type::after { width: 100%; border-radius: 0 2px 2px 0; }
.progressbar .bar:nth-last-child(2) { border-radius: 0 4px 4px 0; border-right: 1px solid rgba(0, 0, 0, 0.05); }
.progressbar .bar:nth-last-child(2)::after { border-radius: 0 4px 4px 0; }
.progressbar .bar.jap { flex: 3; }
.progressbar .bar.mth { flex: 4; }
.progressbar .bar.knowledge { flex: 3; }
.progressbar .bar.sci { flex: 2; }
.progressbar .bar.life { flex: 2; }
.progressbar .bar.eng { flex: 4; }
.progressbar .data { position: absolute; min-width: 130px; height: auto; background: #fff; left: 0; right: 0; bottom: 30px; margin: 0 auto; padding: 12px 16px; border-radius: 10px; transform: scale(0); opacity: 0; transition: opacity .3s, bottom .3s; z-index: 1; filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4)); }
.progressbar .data::after { content: ""; position: absolute; bottom: -14px; left: 12px; width: 0; height: 0; border-style: solid; border-width: 14px 10px 0 10px; border-color: #fff transparent transparent transparent; z-index: -1; }
.progressbar .data li { display: flex; justify-content: space-between; padding: 2px 0; }
.progressbar .data li p { line-height: 1.4rem; }
.progressbar .data li p:not(.no)::before { content: "●"; font-size: 1.4em; padding-right: 5px; }
.progressbar .data li .no { font-size: 1.3em; }
.progressbar .emptybar { position: relative; flex: 3; z-index: 2; }

.barMask::before, .barMask::after { content: ""; position: absolute; width: 20px; height: 100%; top: 0; background-image: url(../img/bar_cover_sp.png); background-repeat: no-repeat; background-position: center; z-index: 5; }
.barMask::before { right: -8px; }
.barMask::after { left: -8px; transform: scale(-1, 1); }

.studyMonth { position: relative; background: #fff; border-bottom: 1px solid #D8D8D8; }
.studyMonth::before { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 25px; background-image: linear-gradient(-180deg, #FFFFFF 0%, #D8D8D8 100%); opacity: .3; z-index: 0; }
.studyMonth .topArea { padding: 10px 10px; border-bottom: 1px solid #D8D8D8; }
.studyMonth .topArea .textWrap { display: flex; justify-content: space-between; align-items: center; width: 94%; margin: 0 auto; }
.studyMonth .topArea .title { margin-top: 5px; font-size: 1.4rem; }
.studyMonth .topArea .no { font-size: 2.2rem; }
.studyMonth .topArea .manyCourse > p { display: inline-block; }
.studyMonth .topArea .manyCourse .now { position: relative; margin-right: .5em; }
.studyMonth .topArea .manyCourse .now::after { content: "/"; padding-left: .5em; font-size: 1em; color: #9B9B9B; }
.studyMonth .topArea .manyCourse .now .no { padding-right: 2px; font-size: 3rem; }
.studyMonth .topArea .manyCourse .all .no { padding-right: 2px; font-size: 2.2rem; }
.studyMonth .bottomArea { display: flex; align-items: center; padding: 5px 10px; }
.studyMonth .bottomArea p { line-height: 1.5; }
.studyMonth .bottomArea .tb { display: none; }
.studyMonth .bottomArea .textWrap { display: flex; align-items: center; width: 100%; }
.studyMonth .bottomArea .textWrap li { padding-bottom: 3px; }
.studyMonth .bottomArea .dateWrap { position: relative; min-width: 90px; max-width: 90px; text-align: right; z-index: 1; }
.studyMonth .bottomArea .dateWrap::before { content: ""; position: absolute; top: -5px; bottom: 0; right: 0; width: 100%; height: calc(100% + 10px); border-left: 1px solid #d8d8d8; z-index: -1; }
.studyMonth .bottomArea .dateWrap .no { padding-right: 6px; font-size: 2.2rem; }
.studyMonth .bottomArea .dateWrap .manyTime + p { text-align: center; }
.studyMonth .bottomArea .recordIls { width: 34px; height: 34px; background: center no-repeat; background-size: contain; z-index: 1; }
.studyMonth .bottomArea .recordIls.good { background-image: url(../img/good.svg); }
.studyMonth .bottomArea .recordIls.fair { background-image: url(../img/fair.svg); }
.studyMonth .bottomArea .recordIls.bad { background-image: url(../img/bad.svg); }
.studyMonth .bottomArea .comment { margin: 2px 0 0; padding-left: 6px; }

.reportHead { background: #f6f6f6; font-size: 1.2rem; }
.reportHead ul { display: flex; justify-content: space-between; }
.reportHead li { width: 100%; padding: 4px 0; border-color: #D8D8D8; border-right-width: 1px; border-style: solid; text-align: center; }
.reportHead li:last-child { border-right-width: 0px; }

.reportList { border-bottom: 1px solid #D8D8D8; }
.reportList .tb { display: none; }
.reportList .list { position: relative; border-top: 1px solid #D8D8D8; background: #FAFAFA; }
.reportList .list > .inner { display: flex; justify-content: space-between; align-items: center; }
.reportList .list > .inner > div:not(.dateBox) { display: flex; align-items: center; width: 100%; height: 50px; min-height: 50px; }
.reportList .subjectTitle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reportList .studyIcWrap { position: relative; margin: 0 auto; z-index: 1; }
.reportList .studyIcWrap > .studyIc { display: block; position: relative; width: 40px; height: 40px; margin: 0 auto; border: 1px solid #FAFAFA; border-radius: 50%; text-align: center; font-size: 28px; line-height: 40px; color: #fff; }
.reportList .studyIcWrap.double .studyIc { width: 35px; height: 35px; font-size: 23px; line-height: 35px; }
.reportList .studyIcWrap.double .studyIc:nth-child(1) { position: relative; left: 12px; z-index: 1; }
.reportList .studyIcWrap.double .studyIc:nth-child(2) { position: absolute; top: 0; right: 12px; z-index: -1; }
.reportList .subjectTitle { font-size: 1.6rem; }
.reportList .date { position: relative; text-align: center; font-size: 1.5rem; }
.reportList .date .month::after { content: "/"; padding: 0 1px; font-size: .8em; color: #9B9B9B; }
.reportList .date .day { font-size: 2.3rem; }
.reportList .date .weekday { display: block; margin: 0 auto; font-size: .8em; opacity: .7; }
.reportList .titleBox { min-width: 0; padding-left: 10px; }
.reportList .manyTime { font-size: 2.5rem; text-align: center; letter-spacing: 2px; }
.reportList .manyTime span { padding-left: 3px; font-size: 1.2rem; }
.reportList .list:not(.extend) .icWrap { position: relative; height: 50px; width: 100%; }
.reportList .list:not(.extend) .missionIc { position: absolute; top: -3px; left: 9px; width: 50px; height: 50px; background-image: url(../img/ic_mission01.png); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: 5; transition: .2s; cursor: pointer; animation: mission .5s ease-out .6s both; }
.reportList .list:not(.extend) .missionIc::before, .reportList .list:not(.extend) .missionIc::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; }
.reportList .list:not(.extend) .missionIc::before { background-image: url(../img/ic_mission02.png); }
.reportList .list:not(.extend) .missionIc::after { background-image: url(../img/ic_mission03.png); }
.reportList .list:not(.extend) + .extend { margin-top: -50px; }
.reportList .list.extend::after { content: ""; position: absolute; top: -1px; left: 0; width: 70px; height: 1px; border-top: 1px solid #FAFAFA; }
.reportList .list.extend .date { display: none; }

.history .reportHead .head1 { max-width: 66px; min-width: 66px; }
.history .reportHead .head2 { max-width: inherit; min-width: inherit; }
.history .reportHead .head3 { max-width: 60px; min-width: 60px; }
.history .list:not(.disable) + .disable { padding-top: 5px; }
.history .list:not(.disable) + .disable::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(0, 0, 0, 0.05); }
.history .list .data1 { max-width: 66px; min-width: 66px; }
.history .list .data2 { max-width: inherit; min-width: inherit; }
.history .list .data3 { max-width: 60px; min-width: 60px; }

.home .reportHead .head1 { max-width: 65px; min-width: 65px; }
.home .reportHead .head2 { max-width: 66px; min-width: 66px; }
.home .reportHead .head3 { max-width: inherit; min-width: inherit; }
.home .list:not(.extend):not(.disable):not(:first-child) { padding-top: 5px; }
.home .list:not(.extend):not(.disable):not(:first-child)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(0, 0, 0, 0.05); }
.home .list .data1 { max-width: 65px; min-width: 65px; }
.home .list .data2 { max-width: 66px; min-width: 66px; }
.home .list .data3 { max-width: inherit; min-width: inherit; }

.moreBtn { position: relative; padding: 15px 10px; background: #f6f6f6; font-size: 1.4rem; text-align: center; }
.moreBtn a { position: relative; display: block; max-width: 300px; margin: 0 auto; padding: 15px 0; border: 1px solid #ddd; border-radius: 50px; background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); }
.moreBtn a::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; margin-bottom: 4px; border-bottom: 1px solid #000; border-right: 1px solid #000; font-size: 14px; font-family: 'icomoon'; transform: rotate(45deg); opacity: .8; }

#footer { position: fixed; bottom: 0; width: 100%; box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.3); text-align: center; z-index: 10; }
#footer > .inner { height: 50px; background: #fff; }

.publicNav ul { width: 100%; display: flex; justify-content: center; font-size: 1.1rem; }
.publicNav li a { padding: 0 10px; font-weight: 600; }
.publicNav li:not(:last-child)::after { content: "|"; color: #D8D8D8; }
.publicNav + small { display: inline-block; margin-top: 20px; font-size: 1.1rem; }

#dialogContainer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; min-height: 418px; transform: scale(0); z-index: 100; margin: 0 auto; }
#dialogContainer .dialog { position: absolute; top: 50%; bottom: 0; left: 50%; right: 0; width: 100%; max-width: 375px; margin: -209px 0 0; padding: 10px; transform: translate(-50%, 0); }
#dialogContainer .contents { position: relative; margin: 0 auto; background: white; border-radius: 5px; box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.3); }
#dialogContainer .titleWrap { position: relative; padding: 10px; padding-bottom: 0; text-align: center; }
#dialogContainer .title { font-size: 2.2rem; font-weight: 600; }
#dialogContainer .dateWrap { padding-bottom: 5px; }
#dialogContainer .dateWrap p { display: inline-block; }
#dialogContainer .dateWrap .no { font-size: 1.6em; }
#dialogContainer .imgWrap { position: relative; padding: 10px; }
#dialogContainer .pager { display: flex; justify-content: space-between; position: absolute; bottom: -45px; left: 0; right: 0; width: 100%; }
#dialogContainer .pager div { width: 60px; border-radius: 50px; text-align: center; transition: .2s; cursor: pointer; }
#dialogContainer .pager div.prev::before { content: "前へ"; display: inline-block; padding-left: 5px; transform: scale(-1, 1) translate(0px, -2px); }
#dialogContainer .pager div.next::before { content: "次へ"; display: inline-block; padding-right: 5px; transform: translate(1px, -2px); }
#dialogContainer .closeBtn { position: relative; padding: 10px; }
#dialogContainer .closeBtn p { display: block; width: 120px; margin: 0 auto; padding: 5px 0 6px; border-radius: 50px; background: #fff; font-size: 1.2em; transition: .2s; text-align: center; color: #4B496B; cursor: pointer; }
#dialogContainer .closeBtn p::before { content: "×"; margin-right: 10px; font-size: 1.5em; font-weight: 600; }
#dialogContainer.show { animation: dialogShow .6s ease 0s both; }
#dialogContainer.hide { animation: dialogHide .2s  ease 0s both; }

@media all and (min-width: 768px) { #dialogContainer { min-height: 710px; font-size: 1.4rem; }
  #dialogContainer .dialog { max-width: 590px; margin-top: -360.5px; padding: 20px; }
  #dialogContainer .titleWrap { padding: 20px; padding-bottom: 0; }
  #dialogContainer .titleWrap .title { font-size: 3rem; }
  #dialogContainer .dateWrap { padding-bottom: 5px; }
  #dialogContainer .pager { width: 125%; min-width: 100%; top: 50%; bottom: inherit; left: 50%; right: 0; transform: translate(-50%, -50%); }
  #dialogContainer .pager > div { width: 50px; height: 50px; border-radius: 50%; }
  #dialogContainer .pager > div::before, #dialogContainer .pager > div::after { content: none !important; }
  #dialogContainer .pager .icon { font-size: 20px; line-height: 50px; }
  #dialogContainer .closeBtn { padding: 20px; }
  #dialogContainer .closeBtn p:hover { background: #f0f4ff; } }
@media all and (min-width: 1080px) { #header { position: relative; background: #FFF; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
  #header > .inner { max-width: 960px; height: 110px; margin: 0 auto; padding: 0; box-shadow: none; background: none; }
  #header .tb { display: block; }
  #header .topArea { height: 60px; }
  #header .mainLogo { margin-right: 0; margin-left: 50px; }
  #header .selectWrap { max-width: inherit; margin: 0 20px; }
  #header .selectWrap .viewport { max-width: inherit; line-height: 50px; }
  #header .selectWrap select { height: 50px; }
  #header .subNav ul { display: flex; justify-content: flex-end; width: auto; min-width: 230px; }
  #header .subNav li { position: relative; z-index: 1; }
  #header .subNav li a { display: block; padding: 0 10px; line-height: 45px; }
  #header .subNav li::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 50%; border-right: 1px solid #d9d9d9; margin: auto; z-index: -1; }
  #header .subNav li:first-child::before { border-left: 1px solid #d9d9d9; }
  #header > .inner.sub { display: none; }
  #hero { height: 180px; margin-top: 0; background: none !important; }
  #hero > .inner { position: relative; max-width: 560px; margin: 0 auto; }
  #hero h1 { font-size: 2.8rem; letter-spacing: 2px; }
  #hero h1 .no { padding: 0 20px; font-size: 4.6rem; }
  #hero.home { padding-top: 20px; }
  #hero.home h1 { max-width: 250px; height: 31px; }
  #hero.home p { font-size: 1.6rem; }
  #hero.small { max-width: 960px; margin: 0 auto; height: 100px; }
  #hero.small h1 { margin: 0 auto; }
  .heroSub { display: none; }
  #mainContents { position: relative; max-width: 1000px; margin-bottom: 0; margin-left: auto; margin-right: auto; z-index: 2; }
  #mainContents > .inner { margin: 0 20px; border-radius: 20px; box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.1); }
  .progressbar { height: 25px; margin: 0; }
  .barMask::before, .barMask::after { background-image: url(../img/bar_cover_pc.png); }
  .studyMonth { display: flex; border-radius: 20px 20px 0 0; }
  .studyMonth .topArea { position: relative; width: 100%; padding: 15px 30px 0 30px; border: none; z-index: 1; }
  .studyMonth .topArea .textWrap { width: 99%; height: 40px; align-items: flex-end; margin-bottom: 10px; }
  .studyMonth .topArea .title { font-size: 2rem; line-height: inherit; }
  .studyMonth .topArea .title .no { font-size: 2.6rem; }
  .studyMonth .topArea .manyCourse { margin-bottom: -5px; font-size: 16px; }
  .studyMonth .topArea .manyCourse .now .no { padding-right: 10px; font-size: 3.8rem; }
  .studyMonth .topArea .manyCourse .all .no { font-size: 2.6rem; }
  .studyMonth .topArea .barWrap { display: flex; align-items: center; height: 50px; }
  .studyMonth .topArea p { line-height: 1; }
  .studyMonth .bottomArea { position: relative; flex-direction: column-reverse; min-width: 330px; padding: 15px 30px 10px 30px; border: none; font-size: 1.2rem; z-index: 1; }
  .studyMonth .bottomArea::before { content: ""; position: absolute; right: 0; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: auto; border-left: 1px solid #D8D8D8; z-index: -1; }
  .studyMonth .bottomArea .tb { display: block; }
  .studyMonth .bottomArea .dateWrap { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; max-width: inherit; height: 40px; margin-bottom: 10px; padding: 0; }
  .studyMonth .bottomArea .dateWrap::before { content: none; }
  .studyMonth .bottomArea .dateWrap span { display: inline-block; }
  .studyMonth .bottomArea .dateWrap .no { font-size: 3rem; padding: 0 3px; }
  .studyMonth .bottomArea .textWrap { width: 100%; height: 50px; }
  .studyMonth .bottomArea .manyTime { font-size: 2rem; }
  .studyMonth .bottomArea .manyTime + p { margin-bottom: 2px; line-height: inherit; }
  .reportListWrap.history { padding-bottom: 20px; }
  .reportListWrap.home { border-radius: 20px; background: #f6f6f6; overflow: hidden; }
  .reportList .list { position: relative; transition: background .3s, color .3s; }
  .reportList .list:hover { background: #fdfdfd; }
  .reportList .tb { display: block; }
  .reportList .inner > div { position: relative; z-index: 1; }
  .reportList .inner > div:not(:last-child)::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 50px; margin: auto; border-right: 1px dashed #D8D8D8; z-index: -1; }
  .reportList .dateWrap { position: relative; min-width: 132px; text-align: center; }
  .reportList .date { font-size: 1.7rem; }
  .reportList .date .weekday { font-size: 1.2rem; }
  .reportList .date::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 50px; margin: auto; border-left: 1px dashed #D8D8D8; z-index: -1; }
  .reportList .subjectBox { justify-content: space-between; }
  .reportList .studyIcWrap { margin-right: auto; margin-left: 0; padding-left: 10px; }
  .reportList .studyIcWrap::before { content: none !important; }
  .reportList .studyIcWrap .studyIc { margin-left: 20px; z-index: 1; }
  .reportList .subject { width: 80px; }
  .reportList .titleBox { padding-left: 20px; }
  .reportList .manyTime { margin: 0 auto; }
  .reportList .date { padding-right: 2px; text-align: right; }
  .reportList .date::before { content: none !important; }
  .reportList .date .day { font-size: 2.5rem; }
  .reportList .date .weekday { display: inline-block; margin: 0; padding-left: 4px; }
  .reportList .list.extend::after { width: 120px; }
  .reportList .list:not(.extend) .icWrap::before { content: ""; position: absolute; width: 280px; height: 50px; top: 0; bottom: 0; left: 0; border-right: 1px dashed #D8D8D8; }
  .reportList .list:not(.extend) .missionIc { top: -10px; left: 35px; }
  .reportList .list:not(.extend) .missionIc:hover::before { animation: mission_hover .4s infinite; animation-direction: alternate; }
  .history .reportHead .head1 { max-width: 180px; min-width: 180px; }
  .history .reportHead .head2 { max-width: inherit; min-width: inherit; }
  .history .reportHead .head3 { max-width: 100px; min-width: 100px; }
  .history .list .data1 { max-width: 180px; min-width: 180px; }
  .history .list .data2 { max-width: inherit; min-width: inherit; }
  .history .list .data3 { max-width: 100px; min-width: 100px; }
  .home .reportHead li { padding: 6px 0; }
  .home .reportHead .head1 { max-width: 115px; min-width: 115px; }
  .home .reportHead .head2 { max-width: 165px; min-width: 165px; }
  .home .reportHead .head3 { max-width: inherit; min-width: inherit; }
  .home .list .data1 { max-width: 100px; min-width: 100px; }
  .home .list .data1::before { content: none !important; }
  .home .list .data2 { max-width: 180px; min-width: 180px; }
  .home .list .data3 { max-width: inherit; min-width: inherit; }
  .moreBtn { padding: 20px 20px; font-size: 1.6rem; }
  .moreBtn a { position: relative; overflow: hidden; }
  .moreBtn a:hover { background: #f0f4ff; }
  #footer .sp { display: none; }
  #footer .publicNav ul { font-size: 1.2rem; }
  #footer .publicNav li a { padding: 0 10px; font-weight: 600; }
  #footer .publicNav li a:hover { opacity: .8; }
  #footer .publicNav + small { display: inline-block; margin-top: 30px; font-size: 1.2rem; } }
#allContainer.login { display: flex; flex-direction: column; justify-content: space-between; background: #FAFAFA; background: url(../img/bg_wood.png) repeat; }

#header.login { position: relative; }
#header.login > .inner { display: flex; align-items: center; }

#mainContents.login { width: 100%; height: calc(100vh - 50px - 70px); min-height: 556px; margin: 0 auto 0; padding: 40px 0; }
#mainContents.login > .inner { box-shadow: none; }

.loginContents { max-width: 600px; margin: 0 auto; padding: 20px 10px; font-size: 1.4rem; }
.loginContents h1 { font-size: 2.3rem; text-align: center; line-height: 70px; font-weight: 600; }
.loginContents .item:not(:last-child) { padding-bottom: 10px; }
.loginContents .item > p { margin-bottom: 5px; }
.loginContents input[type="text"], .loginContents input[type="password"] { -webkit-appearance: none; width: 100%; height: 40px; padding: 0 10px; box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.1); border: 1px solid #D8D8D8; border-radius: 5px; font-size: 1.4rem; }
.loginContents input[type="text"]:focus, .loginContents input[type="password"]:focus { border: 1px solid #FFA857; box-shadow: none; outline: none; }
.loginContents ::placeholder { font-size: 1.3rem; color: #9B9B9B; }
.loginContents input[type="checkbox"] { display: none; }
.loginContents .remember { text-align: center; }
.loginContents .checkbox { position: relative; display: inline-block; margin-top: 20px; padding-left: 1.8em; font-size: 1.3rem; cursor: pointer; }
.loginContents .checkbox::before { content: ""; position: absolute; display: block; top: -.35em; bottom: 0; left: 0; width: 1.5em; height: 1.5em; background: #fff; border: 1px solid #D8D8D8; border-radius: 3px; }
.loginContents input[type="checkbox"]:checked + .checkbox::after { content: ""; position: absolute; display: block; top: -.2em; bottom: 0; left: .46em; width: .5em; height: .9em; border-right: 2px solid #FFA857; border-bottom: 2px solid #FFA857; transform: rotate(45deg); }
.loginContents .errorMessege { display: none; padding-top: 30px; color: #F32323; text-align: center; font-weight: 600; }
.loginContents .btnWrap { margin: 0 auto; padding: 30px 0; text-align: center; font-size: 1.3rem; }
.loginContents .loginBtn { position: relative; display: block; width: 220px; height: 50px; margin: 0 auto; border: none; border-radius: 10px; background: linear-gradient(-180deg, #FBAC61 0%, #F58F4A 100%); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); font-size: 1.8rem; font-weight: 600; color: #fff; cursor: pointer; }
.loginContents .loginBtn:focus { outline: none; }
.loginContents .loginBtn + a { display: inline-block; margin: 20px 0 0; font-size: 1.1rem; }
.loginContents .loginBtn + a .icon { display: inline-block; padding-right: .5em; }
.loginContents .loginBtn::before, .loginContents .loginBtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; border-radius: 10px; opacity: 0; transition: .2s; z-index: 1; }
.loginContents .loginBtn::before { background: #FFF; }
.loginContents .loginBtn::after { background: #974711; }
.loginContents .loginBtn:active:before { opacity: 0; }
.loginContents .loginBtn:active:after { opacity: .2; box-shadow: inset 0 2px 4px 0 black; }

#footer.login { position: relative; padding: 0 10px 20px; box-shadow: none; color: rgba(255, 255, 255, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); }
#footer.login > .inner { background: none; }

@media all and (min-width: 1080px) { #allContainer.login { background: url(../img/bg_wood.png) repeat; }
  #header.login .inner { height: 60px; }
  #mainContents.login { height: calc(100vh - 60px - 32px); min-height: 652px; padding: 60px 0 40px; }
  .loginContents { margin: 0 auto; border-radius: 20px; }
  .loginContents h1 { font-size: 2.8rem; line-height: 110px; }
  .loginContents .item { display: flex; margin-right: 100px; }
  .loginContents .item:not(:last-child) { padding-bottom: 20px; }
  .loginContents .item p { width: 11em; line-height: 50px; font-weight: 600; }
  .loginContents input[type="text"], .loginContents input[type="password"] { height: 50px; font-size: 1.6rem; }
  .loginContents .btnWrap { padding: 40px 0; }
  .loginContents .loginBtn { position: relative; overflow: hidden; }
  .loginContents .loginBtn span { position: relative; z-index: 1; }
  .loginContents .loginBtn + a { margin-top: 30px; font-size: 1.3rem; z-index: 1; }
  .loginContents .loginBtn + a:hover { text-decoration: underline; }
  .loginContents .loginBtn:hover:before { opacity: .1; }
  #footer.login { color: rgba(255, 255, 255, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); }
  #footer.login > .inner { display: flex; justify-content: space-between; height: auto; max-width: 1000px; margin: 0 auto; padding: 0 20px; }
  #footer.login small { margin-top: 0; } }
#allContainer.setting { background: #f0f1f4; background-image: url(../img/bg_tile.svg); }
#allContainer.setting.menu { background: #fff; }
#allContainer.setting.menu .menuBtn { display: none; }

#hero.setting { background-color: #fff; background-image: url(../img/bg_tile.svg); }
#hero.setting h1 { color: #3E3E3E; border-color: #3E3E3E; text-shadow: none; }
#hero.setting h1::before { content: ""; position: absolute; top: calc(50% - 6px); bottom: 0; left: 12px; width: .6em; height: .6em; border-top: 1px solid; border-left: 1px solid; border-color: #3E3E3E; transform: rotate(-45deg); }
#hero.setting.menu { background-color: #788098 !important; }
#hero.setting.menu h1 { padding-left: 0; color: #fff !important; }
#hero.setting.menu h1::before { content: none; }

.settingMenuWrap.menu { position: static; height: auto; }

.menuBtn .lineWrap { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 16px; }
.menuBtn .line { position: relative; top: 0; bottom: 0; display: block; width: 100%; padding-top: 1px; border-bottom: 1px solid #3E3E3E; transition: .3s; }
.menuBtn p { padding-top: 3px; margin-bottom: -3px; text-align: center; }
.menuBtn:hover { cursor: pointer; }
.menuBtn.open .line:first-child { top: calc(50% - 1px); transform: rotate(-45deg); }
.menuBtn.open .line:nth-child(2) { opacity: 0; }
.menuBtn.open .line:last-child { top: calc(-50% + 1px); transform: rotate(45deg); }

.settingMenuWrap { position: fixed; top: 52px; right: -150vw; width: 100%; height: 100vh; font-size: 1.3rem; background: #FFF; box-shadow: -3px 0px 3px 0 rgba(0, 0, 0, 0.1); transition: right .4s; z-index: 10; }
.settingMenuWrap.open { right: 0; }
.settingMenuWrap li { position: relative; border-bottom: 1px solid #D8D8D8; }
.settingMenuWrap li::after { content: ""; position: absolute; width: 16px; height: 16px; top: 14px; right: 4px; background-image: url(../img/ic_arrow_blue.svg); background-repeat: no-repeat; background-size: contain; opacity: .6; }
.settingMenuWrap li .icon { width: 20px; text-align: center; font-size: 1.5em; color: #6B6B6B; }
.settingMenuWrap li .icon-tark { font-size: 1.2em; }
.settingMenuWrap li p { padding-left: 10px; }
.settingMenuWrap a { display: block; align-items: center; display: flex; height: 45px; padding: 0 10px; background: #FFF; }

.settingMenu { position: relative; padding-top: 5px; }
.settingMenu::before { content: ""; position: absolute; width: 100%; height: 5px; top: 0; background: rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.05) inset; }

.settingContents { border-top: 1px solid #D8D8D8; padding: 20px 0; }
.settingContents .headArea { display: flex; justify-content: space-between; padding: 0 10px; }
.settingContents h2 { font-size: 1.8rem; }
.settingContents .icon { padding-right: 5px; }

.tableList { margin-top: 10px; }
.tableList li > div { padding: 0 10px; }
.tableList li:last-child s { border-bottom: 1px solid #D8D8D8; }
.tableList .userNo { background: rgba(255, 255, 255, 0.3); border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; }
.tableList .userNo p { line-height: 30px; }
.tableList .userInfo { padding-top: 5px; padding-bottom: 5px; background: #FAFAFA; }
.tableList .name { font-size: 1.4rem; }

@media all and (min-width: 1080px) { #allContainer.setting { background-color: #788098; }
  #hero.setting { height: 100px; }
  #hero.setting h1 { color: #fff; }
  #hero.setting h1::before { content: none; }
  #hero.setting a { pointer-events: none; }
  #hero.setting.menu { max-width: inherit; }
  #mainContents.setting .inner { display: flex; padding-bottom: 0; overflow: hidden; }
  .menuBtn { display: none; }
  body:not(.menu) .settingMenuWrap { position: static; max-width: 280px; min-width: 280px; padding-top: 40px; border-right: 1px solid #D8D8D8; box-shadow: 1px 0 3px 0 rgba(121, 121, 121, 0.3); }
  body:not(.menu) .settingMenuWrap li::after { content: none; }
  .settingMenu { padding-top: 0; font-size: 1.4rem; }
  .settingMenu::before { content: none; }
  .settingMenu:first-of-type { padding-top: 0; border-top: 1px solid #D8D8D8; }
  .settingMenu li { background: none; }
  .settingMenu li.active { background: rgba(56, 111, 223, 0.1); border-left: 4px solid #386FDF; color: #386FDF; }
  .settingMenu li.active::before, .settingMenu li.active::after { content: ""; position: absolute; width: calc(100% + 4px); height: 1px; left: -4px; border: none; }
  .settingMenu li.active::before { top: -1px; border-top: 1px solid #ebf1fc; }
  .settingMenu li.active::after { top: inherit; bottom: -1px; border-bottom: 1px solid #ebf1fc; transform: none; }
  .settingMenu li.active .icon { margin-left: -4px; color: #386FDF; }
  .settingMenu a { height: 50px; padding: 0 20px; background: none; }
  .settingMenu a:hover { color: #386FDF; }
  .settingMenu a:hover .icon { color: #386FDF; }
  .settingContents { width: 100%; padding-top: 40px; border-top: none; }
  .settingContents::before { content: none; }
  .settingContents .headArea { padding: 16px 20px; }
  .settingContents h2 { font-size: 2.2rem; }
  .settingContents ul { padding: 0 20px; }
  .settingContents li > div { padding: 0; } }
.talkPage #allContainer { background-color: #B6BBC8; background-image: url(../img/bg_tile.svg); }
.talkPage #mainContents { padding: 0; }
.talkPage #mainContents > .inner { margin-top: 20px; padding: 0; border-radius: 20px 20px 0 0; overflow: hidden; }

.userInfoWrap { display: flex; justify-content: space-between; align-items: center; position: relative; height: 85px; padding: 5px 30px 0 30px; box-shadow: 0 1px 3px 0 rgba(121, 121, 121, 0.5); background: #4A4C6C; z-index: 1; }
.userInfoWrap::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 25px; background-image: linear-gradient(-180deg, #4A4C6C 0%, #35374e 100%); opacity: .3; z-index: -1; }
.userInfoWrap .user { display: flex; align-items: center; color: #fff; }
.userInfoWrap .user .imgWrap { width: 60px; margin-right: 20px; border-radius: 6px; overflow: hidden; line-height: 0; border: 1px solid #D8D8D8; }
.userInfoWrap .user .name { font-size: 2rem; }
.userInfoWrap .selectWrap { width: 300px; }

.talkContainer { position: relative; border-radius: 0 0 20px 20px; }
.talkContainer > .inner { width: 100%; height: calc(100vh - 110px - 100px - 0px); overflow: auto; }
.talkContainer .mainImg { margin-bottom: 0; line-height: 0; }
.talkContainer .barImg { position: absolute; left: 0; right: 0; bottom: -3px; width: 100%; height: 60px; }

@keyframes down1 { 0% { position: fixed; top: 0; }
  100% { position: fixed; top: -50px; } }
@keyframes down { 0% { top: -50px; }
  100% { top: 0; } }
@keyframes bar { 0% { border-radius: 50px 0 0 50px; }
  1% { border-radius: 10px 0 0 10px; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: scale(0, 1); border-radius: 0; } }
@keyframes fadeoutbg { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes mission { 0% { transform: scale(0); }
  1% { transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); } }
@keyframes mission_hover { 0% { transform: scale(1); }
  100% { transform: scale(1.1); } }
@keyframes overlayShow { 0% { top: -100%; opacity: 0; }
  1% { top: 0; }
  100% { opacity: 1; top: 0; } }
@keyframes overlayHide { 0% { top: 0; opacity: 1; }
  99% { top: 0; opacity: 0; }
  100% { top: -100%; opacity: 0; } }
@keyframes dialogShow { 0% { opacity: 0; transform: scale(0); }
  1% { opacity: 0; transform: scale(1); top: 2%; }
  80% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; top: 0; } }
@keyframes dialogHide { 0% { top: 0; opacity: 1; transform: scale(1); }
  99% { top: 0; opacity: 0; transform: scale(1); }
  100% { transform: scale(0); } }

/*# sourceMappingURL=common.css.map */