@charset 'UTF-8';

main {
  padding: 0;
}

.signup-button {
  background-image: none; 
  position: relative;
  display: inline-block;
  padding: 10px 34px 10px 7px;
  box-sizing: border-box;
  width: auto;
  height: auto;
  background-color: #f1901b;
  background-image: -webkit-gradient(linear, top left, from(#f7ba24), to(#ec6b13));
  background-image: -webkit-linear-gradient(top, #f7ba24, #ec6b13);
  background-image: -moz-linear-gradient(top, #f7ba24, #ec6b13);
  background-image: linear-gradient(to bottom, #f7ba24, #ec6b13);
  border: #b62023 solid 1px;
  border-radius: 5px;
  box-shadow: 0 0 2px 0px #ffffff inset;
  color: #921d22 !important;
  font-size: 70%;
  font-weight: bold;
  text-shadow: 1px 0px 0px white, 0px 1px 0px white, 0px -1px 0px white, -1px 0px 0px white,
               1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white,
               2px 0px 1px white, 0px 2px 1px white, 0px -2px 1px white, -2px 0px 1px white;
  text-decoration: none !important;
  text-indent: 0;
}
.signup-button:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: url(/img/signup2-icon.png) no-repeat center center;
  background-size: 22px 22px;
}

.float-image-right, .float-image-left {
  float: none;
  margin: 0.8em 0;
  text-align: center;
}
.float-image-right img, .float-image-left img {
  max-width: 100%;
}

.snap-image-right img, .snap-image-left img {
  width: 75px;
}
.snap-image-right-body {
  margin-right: 80px;
}
.snap-image-left-body {
  margin-left: 80px;
}

/*==================
 * Main Visual
 */

body.top-body {
  background-color: #0c371d;
}

#main-visual {
  margin: 0;
  padding: 3px 16px 17px;
  background-image: -webkit-gradient(linear, top left, from(#a4be3b), to(#d3df9f));
  background-image: -webkit-linear-gradient(top, #a4be3b, #d3df9f);
  background-image: -moz-linear-gradient(top, #a4be3b, #d3df9f);
  background-image: linear-gradient(to bottom, #a4be3b, #d3df9f);
}

#main-visual:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-image: -webkit-gradient(linear, top left, from(transparent), to(rgba(0,0,0,0.3)));
  background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.3));
  background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0,0.3));
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
}

#main-visual-panels {
  position: relative;
  max-width: 483px;
  margin: 0 auto;
  box-shadow: 0 0 4px rgba(0,0,0,0.7);
  background: #fff;
}

#main-visual-panels p {
  position: relative;
  border: #fff solid 1.5px;
  z-index: 2;
}

#main-visual-panels:after {
  display: block;
  content: '';
  position: absolute;
  right: -12px;
  bottom: -15px;
  width: 53.5px;
  height: 56px;
  background: url(/img/ai-kun.png) no-repeat center center;
  background-size: 53.5px 56px;
  z-index: 3;
}

#main-visual-panels-prev {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: -13.5px;
  width: 23px;
  height: 100%;
  background: url(/img/slider_left.png) no-repeat left center;
  background-size: 23px 40px;
  z-index: 1;
}

#main-visual-panels-next {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: -13.5px;
  width: 23px;
  height: 100%;
  background: url(/img/slider_right.png) no-repeat right center;
  background-size: 23px 40px;
  z-index: 1;
}

#main-visual + .wrapper .signup {
  position: static;
  margin: 0.8em 0;
}

/*==================
 * MENU
 */

#sp-menu {
  margin: 0.8em 0 -0.8em;
}

#sp-menu ul {
  margin: -2px auto 0;
  padding: 0 2px;
  max-width: 360px;
}

#sp-menu ul > li {
  display: block;
  width: 25%;
  margin: 0 0 0.8em;
  padding: 0 2px;
  float: left;
  box-sizing: border-box;
}

#sp-menu ul > li > a {
  position: relative;
  display: block;
  height: 50px;
  border: #8e8e8e solid 1px;
  border-radius: 3px;
  background-color: #e9e9e9;
  background-image: -webkit-gradient(linear, top left, from(#fff), to(#d3d3d3));
  background-image: -webkit-linear-gradient(top, #fff, #d3d3d3);
  background-image: -moz-linear-gradient(top, #fff, #d3d3d3);
  background-image: linear-gradient(to bottom, #fff, #d3d3d3);
  box-shadow: 0 0 1px 1px #e9e9e9 inset;
  text-indent: -10000px;
}

#sp-menu ul > li > a:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 100%;
  height: 52px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 73px 52px;
}

#sp-menu ul > li:nth-child(1) > a:after {
  background-image: url(/img/menu_1.png);
}
#sp-menu ul > li:nth-child(2) > a:after {
  background-image: url(/img/menu_2.png);
}
#sp-menu ul > li:nth-child(3) > a:after {
  background-image: url(/img/menu_3.png);
}
#sp-menu ul > li:nth-child(4) > a:after {
  background-image: url(/img/menu_4.png);
}
#sp-menu ul > li:nth-child(5) > a:after {
  background-image: url(/img/menu_5.png);
}
#sp-menu ul > li:nth-child(6) > a:after {
  background-image: url(/img/menu_6.png);
}
#sp-menu ul > li:nth-child(7) > a:after {
  background-image: url(/img/menu_7.png);
}
#sp-menu ul > li:nth-child(8) > a:after {
  background-image: url(/img/menu_8.png);
}

/*==================
 * Omotenashi
 */

#omotenashi-index, .omotenashi {
  display: none;
}

/*==================
 * Biz
 */


#biz-index {
  margin: 10px 0;
}
#biz-index h2 {
  font-size: 110%;
}
#biz-index ol > li {
  display: inline-block;
  float: none;
  padding: 10px 5px;
  width: 40%;
}

/*==================
 * Information
 */

#information {
  display: block;
  background-color: #0c371d;
}

#information h2 {
  color: #fff;
  margin: 1rem 1rem 0;
  padding: 0;
  font-size: 120%;
  line-height: 1.0;
}

#information ul {
  margin: -0.2em 1em 0;
  padding: 0;
  background-color: white;
  font-size: 90%;
}

#information ul > li {
  display: block;
  border-top: gray solid 1px;
}
#information ul > li:first-child {
  border: none;
}
#information ul > li:before {
  display: none;
}
#information ul > li > a {
  display: block;
  padding: 3px 3px 3px 17px;
  color: #353535 !important;
  text-decoration: none !important;
}
#information .date {
  font-weight: bold;
  display: block;
  margin-left: -12px;
  padding-left: 12px;
  background: url(/img/red.png) no-repeat left center;
  background-size: 9px 9px;
}
#information .dat:before {
  display: inline-block;
  content: '';
  vertical-align: middle;
  margin: 0 2px 0 -11px;
  width: 9px;
  height: 9px;
}

#information p {
  margin-top: 0;
}
#information .more {
  position: relative;
  display: inline-block;
  color: #0c371d !important;
  background-color: #a3d134;
  background-image: -webkit-gradient(linear, top left, from(#bae651), to(#8ebf19));
  background-image: -webkit-linear-gradient(top, #bae651, #8ebf19);
  background-image: -moz-linear-gradient(top, #bae651, #8ebf19);
  background-image: linear-gradient(to bottom, #bae651, #8ebf19);
  border: #6c9800 solid 1px;
  border-top: none;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 1px 1px #bbd974 inset, 0 1px 1px 0 rgba(105,104,102,0.5);
  padding: 4px 5px 1px 15px;
  text-shadow: 0 1px 1px #7ca31f;
  text-decoration: none !important;
  font-size: 90%;
  font-weight: bold;
}
#information .more:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  width: 9px;
  height: 100%;
  background: url(/img/red.png) no-repeat center center;
  background-size: 9px 9px;
}

#information-layouter {
  display: block;
}

#information-layouter-cell {
  display: block;
}

#information-layouter-banner {
  display: block;
  padding: 0;
  text-align: center;
}
#information-layouter-banner> ul > li > a {
  display: inline-block;
  padding: 0;
}

#information-layouter-banner > ul {
  margin: 0;
  padding: 0;
  background-color: transparent;
  font-size: 100%;
}

#information-layouter-banner > ul > li {
  border: none;
}

/*==================
 * Kids
 */

.kids-logo {
  padding-bottom: 10px;
}
.kids-logo a {
  width: 90%;
  margin: 0 auto;
}

/*==================
 * Blog
 */

.blog-title a {
  display: block;
}

.mt-image-left, .mt-image-right {
  display: block !important;
  float: none !important;
  margin: 0.8em auto !important;
}

.blog-index article {
  margin-top: 0.5em;
}

.entry-more-link a {
  display: block;
  clear: both;
  border: #aaa solid 1px;
  border-radius: 5px;
  padding: 0.5em;
}

.page-navigation {
  padding: 0 8px;
}
.page-navigation li {
  display: block;
  width: 50%;
  float: left;
}
.page-navigation a {
  display: block;
  border: #aaa solid 1px;
  padding: 0.5em;
  text-align: center;
  background-image: -webkit-gradient(linear, top left, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd);
  border-radius: 5px;
}
.page-navigation-prev a {
  margin-right: 4px;
}
.page-navigation-next a {
  margin-left: 4px;
}

.backnumber p {
  float: none;
  color: #fff;
}

.backnumber ul {
  padding: 3px 0 0 10px;
}

/*==================
 * Blogs
 */

#blogs {
  background-color: transparent;
  margin: 1rem 0;
}
#blogs > .wrapper {
  padding: 0 1em;
}
.blog-box {
  float: none;
  width: auto;
}
.blog-box > .body {
  margin: 0 0 1em 0 !important;
  padding-bottom: 0;
  font-size: 82%;
}

.blog-box > .body > header > h2 {
  padding: 0.4em;
  font-size: 120%;
}
.blog-box > .body > header > h2 > a {
  color: #a7051f;
}

.blog-box > .body > .list > li:not(:first-child) {
  display: none;
}

#blog-kanae, #blog-dj-misamari {
  font-size: 100%;
  padding: 0.4em;
  font-weight: bold;
  margin-bottom: 1em;
}

.blogswrapper {
  width: 100%;
  float: none;
}

#commercial {
  margin-bottom: 1em;
}

#commercial > h2 {
  display: none;
}

#commercial-movie {
  width: 280px;
  height: 158px;
}

/*==================
 * calendar
 */
#calendar.body {
  padding: 0;
}
#calendar.body > header {
  margin: 0;
}
#calendar {
  background-color: #e1e6a1;
}
#calendar-weekly {
  margin-bottom: 0;
  background-color: #fff;
}
table.calendar th {
  font-size: 80%;
}
table.calendar td, table.calendar > tbody > tr > td {
  font-size: 90%;
}

/*==================
 * movie
 */
#lesson-movie {
  width: 280px;
  height: 210px;
}

/*==================
 * pricing
 */
section.plan {
  width: 270px;
}

/*==================
 * teacher
 */
.visuals {
  float: none;
  margin: 0 auto 1em;
}
.visuals ul {
  margin-left: 6px;
  margin-right: 6px;
}
.profiles {
  margin: 6px;
}

/*==================
 * help
 */
.feedback {
  float: none;
}