@charset 'UTF-8';

h2 {
  margin: 0.5em 0;
  padding: 0;
  line-height: 1.0;
  font-size: 200%;
  color: #375220;
  background: none;
}
.terms h2 {
  font-size: 130%;
  font-weight: bold;
}

main {
  padding: 0 5px;
}
.wrapper {
  overflow: visible;
}

.signup {
  text-align: center;
}
.signup-button {
  display: inline-block;
  width: 418px;
  height: 96px;
  background: url(/img/signup2.png) no-repeat;
  text-decoration: none;
  text-indent: -10000px;
}

.float-image-left {
  float: left;
  margin: 0 0.5em 0.5em 0;
}
.float-image-right {
  float: right;
  margin: 0 0 0.5em 0.5em;
}

.snap-image-right {
  float: right;
  margin: 0 0 0.5em 0;
}
.snap-image-right-body {
  margin-right: 158px;
}

.snap-image-left {
  float: left;
  margin: 0 0 0.5em 0;
}
.snap-image-left-body {
  margin-left: 158px;
}

.lead {
  font-size: 150%;
  font-weight: bold;
  color: #0C371D;
}

.notice {
  color: red;
}

.contact {
  text-align: center;
}

.contact > .button {
  font-size:150%;
}

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

#main-visual {
  position: relative;
}

#main-visual-panels p {
  margin: 0;
}

#main-visual-panels img {
  width: 100%;
}

#main-visual + .wrapper .signup {
  position: absolute;
  bottom: 8px;
  right: 0;
}

@media screen and (min-width: 951px){
  #main-visual-panels img {
    visibility: hidden;
  }
  #main-visual {
    background: url(/img/main_wide.jpg) no-repeat center top;
    height: 442px;
  }
}

/*==================
 * omotenashi
 */

#omotenashi-index {
  display: table;
  width: 100%;
  background-color: #a3bd39;
  color: #375220;
}

#omotenashi-index h2 {
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}
#omotenashi-index h2 > em {
  font-style: normal;
  color: #FFFF00;
}

#omotenashi-index ol {
  margin: 1em auto;
  padding: 0;
  text-align: center;
  list-style-type: none;
  max-width: 868px;
}

#omotenashi-index ol > li {
  display: block;
  width: 25%;
  float: left;
  text-align: center;
}

#omotenashi-index a {
  display: inline-block;
  width: 149px;
  padding-top: 163px;
  background: no-repeat top center;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}

#omotenashi1 > a {
  background-image: url(/img/index_01.png);
}
#omotenashi2 > a {
  background-image: url(/img/index_02.png);
}
#omotenashi3 > a {
  background-image: url(/img/index_03.png);
}
#omotenashi4 > a {
  background-image: url(/img/index_04.png);
}

/*==================
 * biz
 */

#biz-index {
  display: table;
  width: 100%;
  background-color: #a3bd39;
  color: #375220;
}

#biz-index h2 {
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}
#biz-index h2 > em {
  font-style: normal;
  color: #FFFF00;
}

#biz-index ol {
  margin: 1em auto;
  padding: 0;
  text-align: center;
  list-style-type: none;
  max-width: 868px;
}

#biz-index ol > li {
  display: inline-block;
  width: 23%;
  padding: 10px 3px;
  text-align: center;
}
#biz-index img {
  width: 100%;
}

#biz-index a {
  display: inline-block;
  background: no-repeat top center;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}

/*==================
 * information
 */

#information {
  display: table;
  width: 100%;
  background-color: #e1e6a1;
}

#information h2 {
  padding: 0 5%;
}

#information p {
  padding: 0 5%;
  text-align: right;
}

#information-layouter {
  display: table;
  width: 100%;
}

#information-layouter-cell {
  display: table-cell;
  vertical-align: top;
}

#information-layouter-cell > ul > li > a:focus {
  outline: none;
}

#information-layouter-banner {
  display: table-cell;
  vertical-align: top;
  padding-top: 20px;
}

#information-layouter-banner > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#information-layouter-banner > ul > li {
  margin-bottom: 10px;
}

/*==================
 * appeal
 */

.omotenashi-l {
  background-color: #e1e6a1;
}
.omotenashi-r {
  background-color: #fffbb6;
}

.omotenashi-l .wrapper {
  padding: 0.8em 0;
}
.omotenashi-r .omotenashi-box {
  padding: 0.8em 0;
}

.omotenashi h2 {
  font-size: 180%;
  margin-top: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.omotenashi-l h2 {
  margin-left: 346px;
  text-align: right;
}
.omotenashi-r h2 {
  margin-right: 450px;
}

.omotenashi p {
  margin-bottom: 0;
}
.omotenashi-l p {
  margin-left: 346px;
}
.omotenashi-r p {
  margin-right: 450px;
}

.omotenashi#appeal .omotenashi-box {
  min-height: 220px;
  background: url(/img/tanaka.jpg) no-repeat left top;
}
.omotenashi#smartphone .wrapper {
  min-height: 230px;
  background: url(/img/omote_pic_01.png) no-repeat right top;
}
.omotenashi#original-text .omotenashi-box {
  min-height: 209px;
  background: url(/img/omote_pic_02.jpg) no-repeat 25px top;
}
.omotenashi#student .wrapper {
  min-height: 229px;
  background: url(/img/omote_pic_03.png) no-repeat right top;
}
.omotenashi#line .omotenashi-box {
  min-height: 220px;
  background: url(/img/omote_pic_04.jpg) no-repeat left top;
}

.omotenashi#smartphone h2 {
  min-height: 59px;
  padding: 0.4em 0 0 100px;
  background: url(/img/omote_01.png) no-repeat left top;
}
.omotenashi#original-text h2 {
  min-height: 59px;
  padding: 0.4em 100px 0 0;
  background: url(/img/omote_02.png) no-repeat right top;
}
.omotenashi#student h2 {
  min-height: 59px;
  padding: 0.4em 0 0 100px;
  background: url(/img/omote_03.png) no-repeat left top;
}
.omotenashi#line h2 {
  min-height: 59px;
  padding: 0.4em 100px 0 0;
  background: url(/img/omote_04.png) no-repeat right top;
}

/*==================
 * blogs
 */

#blogs {
  background-color: #fffbb6;
}
#blogs .wrapper {
  padding: 0.8em 0;
}

.blog-box {
  width: 100%;
}
.blog-box > .body {
  margin: 0;
margin-bottom: 1em;
}

#blog-oguma > .body > header {
  background-color: #ffeaf7;
}

#blog-text > .body > header {
  background-color: #BBDEFF;
}
.blog-box > .body > header > h2 {
  padding: 0.4em;
  font-size: 100%;
  font-weight: bold;
}
.blog-box > .body > header > h2 > a {
  color: #a7051f;
}

#blog-dj-misamari {
  background-color: #fcd287;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  padding: 0.4em;
  font-size: 100%;
  font-weight: bold;
}
#blog-dj-misamari > a {
  color: #a7051f;
}

#blog-kanae {
  background-color: #c5dfff;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  padding: 0.4em;
  font-size: 100%;
  font-weight: bold;
}
#blog-kanae > a {
  color: #a7051f;
}

.blogswrapper {
  width: 49%;
  float: left;
}

.blogswrapper:nth-child(odd) {
  margin-right: 2%;
}

.blogswrapper-cl {
  clear: left;
}

#commercial {
  text-align: center;
  margin-bottom: 0.5em
}

#commercial > h2 {
  background-color: #e1e6a1;
  margin:0 auto;
  padding: 0.6em 0.4em;
  width: 460px;
  box-sizing: border-box;
  font-size: 80%;
  font-weight:bold;
  text-align:left;
}

#commercial-movie {
  max-width: 460px;
  height: 259px;
  width: 100%;
}

/*==================
 * calendar
 */
#calendar.body {
  margin-bottom: 0;
}

#calendar > header {
  background-image: url(/img/calendar.png);
  background-repeat: no-repeat;
  background-position: 12px center;
  padding: 10px 12px 10px 44px;
}

#calendar > header > h2 {
  display: none;
}
#today {
  margin: 0;
}
#today .month, #today .mday {
  font-size: 120%;
}
#calendar-weekly {
  margin-bottom: 1em;
}
#calendar-weekly > h3 {
  display: none;
}
table.calendar {
  width: 100%;
  border: #ddd solid 1px;
}
table.calendar > thead > tr {
  background-image: -webkit-gradient(linear, top, from(#fff), to(#efefef));
  background-image: -webkit-linear-gradient(top, #fff, #efefef);
  background-image: -moz-linear-gradient(top, #fff, #efefef);
  background-image: linear-gradient(to bottom, #fff, #efefef);
}

#calendar-weekly table.calendar td, #calendar-weekly table.calendar th {
  width: 12.5%;
}

table.calendar > thead > tr > .today {
  background-image: -webkit-gradient(linear, top left, from(#ffe596), to(#f6dc8d));
  background-image: -webkit-linear-gradient(top, #ffe596, #f6dc8d);
  background-image: -moz-linear-gradient(top, #ffe596, #f6dc8d);
  background-image: linear-gradient(to bottom, #ffe596, #f6dc8d);
  }
table.calendar td:first-child, table.calendar th:first-child {
  border-left: none;
}
table.calendar td, table.calendar th {
  width: 14.2857%;
  text-align: center;
  border-left: white solid 1px;
  border-bottom: #ddd solid 1px;
}

table.calendar > tbody > tr > td {
  font-size: 150%;
  padding: 8px 0;
  color: #abc92f;
}
.today {
  background-color: #ffc000;
  color: blue !important;
}
.holiday {
  background-color: #f5f5f5;
  color: #888 !important;
}

/*==================
 * appeal
 */
.biz-l {
  background-color: #e1e6a1;
}
.biz-r {
  background-color: #fffbb6;
}

.biz-description h2 {
  font-size: 180%;
  margin-top: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 59px;
  padding: 0.4em 0 0 0;
}
.biz-l h2 {
  margin-left: 450px;
  text-align: right;
}
.biz-r h2 {
  margin-right: 450px;
}

.biz-description p {
  margin-bottom: 0;
}
.biz-l p {
  margin-left: 450px;
}
.biz-r p {
  margin-right: 450px;
}

.biz-description#cafe .wrapper {
  min-height: 230px;
  background: url(/img/cafe_thumb.png) no-repeat right top;
}
.biz-description#restaurant .wrapper {
  min-height: 230px;
  background: url(/img/restaurant_thumb.png) no-repeat left top;
}
.biz-description#bar .wrapper {
  min-height: 230px;
  background: url(/img/bar_thumb.png) no-repeat right top;
}
.biz-description#fastfood .wrapper {
  min-height: 230px;
  background: url(/img/fastfood_thumb.png) no-repeat left top;
}
.biz-description#clothing .wrapper {
  min-height: 230px;
  background: url(/img/clothing_thumb.png) no-repeat right top;
}
.biz-description#hotel .wrapper {
  min-height: 230px;
  background: url(/img/hotel_thumb.png) no-repeat left top;
}
.biz-description#taxi .wrapper {
  min-height: 230px;
  background: url(/img/taxi_thumb.png) no-repeat right top;
}
.biz-description#school .wrapper {
  min-height: 230px;
  background: url(/img/school_thumb.png) no-repeat left top;
}

.biz-l .to-detail {
  text-align: right;
}

/*==================
 * kids
 */

.kids-logo a {
  display: block;
}
.kids-logo img  {
  display: block;
  width: 100%;
}

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

.blog-title a {
  display: block;
  margin: -10px;
  padding: 10px;
  color: inherit;
  text-decoration: none !important;
}

.archive-title {
  background-color: #fff;
  color: #375220;
}
article > header h2 {
  padding: 10px 12px;
  font-size: 130%;
}

#posts article.body, .blog-index article.body {
  margin-bottom: 10px;
}

footer.asset-meta {
  margin: -0.72em 0 0.8em;
  color: #7b7c7d;
  font-size: 90%;
  text-align: right;
}
footer.asset-meta .asset-meta-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
footer.asset-meta .asset-meta-list-item {
  display: inline-block;
}

#page-main footer {
  border-top: #aaa dashed 1px;
  margin: 0.8em 0;
  color: #7b7c7d;
}

.entry-asset-thumbnail {
  float: right;
  margin: 0 0 0.8em 0.8em;
}
.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-social-buttons {
  border-top: #aaa dashed 1px;
  margin: 0.8em 0;
  padding-top: 0.8em;
  line-height: 1.0;
}
.entry-social-item {
  display: inline-block;
  vertical-align: top;
}

.post-detail {
  text-align: right;
}

.article-paging ul, .page-navigation ul {
  padding: 0;
  list-style-type: none;
  text-align: center;
}
.article-paging ul > li, .page-navigation ul > li {
  display: inline-block;
  text-align: left;
}
.previous-page, .page-navigation-prev {
  float: left;
}
.next-page, .page-navigation-next {
  float: right;
}

#comments, #comment-preview-main article, #comment-preview-main #comments-form {
  float: none;
  border: none;
  font-size: 82%;
}
.comment {
  border-bottom: #aaa dashed 1px;
  margin-bottom: 0.8em;
}
#comment-preview-main .comment > header {
  border-bottom: #375220 dashed 1px;
}
.comment > header h4 {
  border: none;
  display: inline;
}
.comment > header time {
  margin-left: 1.2em;
  color: #888;
}
.comment .reply {
  margin-top: -0.6em;
  text-align: right;
}
#comment-greeting {
  display: none;
  background-color: #ddd;
  padding: 0.5em;
}
#comments-open-data ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#comments-open-data ul > li {
  display: block;
}
#comments-open-data p {
  margin: 0;
}
#comments-open-captcha {
  margin: 0.8em 0;
}
#comments-open-captcha p {
  margin: 0;
}
#comments-open-captcha input {
  width: 150px;
}

.backnumber {
  padding: 15px;
}
.backnumber p {
  display: inline;
  margin: 0;
}
.backnumber ul {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.backnumber ul > li {
  display: inline-block;
  margin: 0 1em 0 0;
}


#sidebar.widgets h2 {
  display: none;
}
.widget {
  margin: 12px 0 0;
}
.widget:first-child {
  margin: 0;
}
.widget-header {
  margin: 0;
  padding: 0 6px;
  border-bottom: solid 1px;
}
.widget:first-child .widget-header {
  padding-top: 6px;
}
.widget-content {
  padding: 6px;
}
.widget-content img {
  vertical-align: middle;
}
.widget-content select {
  width: 100%;
  border: 1px solid #c0c6c9;
}

.widget-content ul, .widget-content ol {
  margin: -6px !important;
  border-bottom: 1px solid #ccc;
}
.widget-content ul > li, .widget-content ol > li {
  border-top-width: 1px !important;
  color: #666;
}
.widget-content ul > li > a, .widget-content ol > li > a {
  color: black !important;
}

.widget-profile-image {
  text-align: center;
}
.widget-profile-author {
  margin: 0;
  text-align: center;
  font-weight: bold;
}
.widget-profile-author + .widget-profile-author {
  margin-top: 0.5em;
}

.widget-search {
  margin-top: 0;
}
.widget-search #search {
  margin: 0;
  padding: 0;
  text-align: center;
}
.widget-search #search > div {
  position: relative;
}
.widget-search input[type="search"] {
  width: 100%;
  height: 2.427em;
  margin: 0;
  padding: 0 2.427em 0 0.5em;
  border: 1px solid #c0c6c9;
  line-height: 1.3;
  box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2);
  -webkit-appearance: none;
}
.widget-search button {
  position: absolute;
  top: 0;
  right: 0;
  display: table-cell;
  width: 2.427em;
  height: 2.427em;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0.8;
  text-shadow: none;
  box-shadow: none;
}
.widget-search button:hover {
  opacity: 1;
}
.widget-search + .widget {
  margin-top: 6px;
}

.widget-recent-comments .comment-author-line {
  color: #666;
}
.widget-recent-comments .comment-author {
  color: #0c371d;
}

.widget-tag-cloud ul {
  margin: 0 !important;
  border: none !important;
}
.widget-tag-cloud ul > li {
  display: inline-block !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
.widget-tag-cloud ul > li > a {
  position: static !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: blue !important;
  background: none !important;
  white-space: normal !important;
}
.widget-tag-cloud ul > li > a:after {
  display: none !important;
}
.widget-tag-cloud ul > li > a:hover, .widget-tag-cloud ul > li > a:active {
  text-decoration: underline !important;
}
.tag.rank-1 {
  font-size: 220%;
}
.tag.rank-2 {
  font-size: 200%;
}
.tag.rank-3 {
  font-size: 180%;
}
.tag.rank-4 {
  font-size: 160%;
}
.tag.rank-5 {
  font-size: 140%;
}
.tag.rank-6 {
  font-size: 120%;
}
.tag.rank-7 {
  font-size: 100%;
}

.widget-syndication .widget-content {
  padding-top: 0;
  padding-bottom: 1px;
}


/*==================
 * movie
 */
#lesson-movie {
  width: 100%;
  max-width: 640px;
  height: 480px;
}

/*==================
 * pricing
 */
#plan-list {
  text-align: center;
}
section.plan {
  display: inline-block;
  text-align: center;
  background-color: #E1E6A1;
  border:solid 2px #0C371D;
  width: 350px;
  margin: 1em;
}
section.plan > h3 {
  font-size: 120%;
  background-color: #0C371D;
  color: white;
  margin: 0;
  padding; 0.2em
}
section.plan > p {
  font-weight: bold;
  font-size: 120%;
}
section.plan > p > em {
  font-size: 200%;
  font-style: normal;
  color: #E6272B;
}

/*==================
 * teacher
 */

.visuals {
  position: relative;
  float: left;
  width: 320px;
  padding-top: 240px;
  overflow-x: hidden;
}

.visuals-cntr {
  position: absolute;
  top: 0; left: 0;
  width: 2400px;
  height: 240px;
}

.visual {
  float: left;
  width: 320px;
  height: 240px;
}

.visuals > p > img {
  width: 320px;
}

.visuals > ul {
  list-style-type: none;
  padding: 0;
}

.visuals > ul > li {
  display: inline-block;
  border: transparent 2px solid;
  padding: 2px;
}

.visuals > ul > li img {
  max-width: 64px;
  max-height: 48px;
}

.visuals > ul > li:hover, .visuals > ul > li.active {
  border-color: red;
}

.visuals iframe {
  border: none;
}

.loading {
  display: inline-block;
  width: 64px;
  height: 48px;
  background: #000 url(/img/loading.gif) no-repeat center center;
  vertical-align: bottom;
}

.playbutton {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 48px;
  vertical-align: bottom;
}
.playbutton:after {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 64px;
  height: 48px;
  background: url(/img/play.svg) no-repeat center center;
  background-image: url(/img/play.png) \9; /* IE8Fix */
  background-size: 64px 48px;
  content: '';
}

.profiles {
  margin-left: 336px;
}

.profile h2 {
  display: none;
}

.profile table {
  border-collapse: collapse;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 90%;
}

.profile table > tbody > tr > * {
  border: #686868 solid 1px;
  padding: 2px 4px;
  vertical-align: top;
  text-align: left;
}

.profile table > tbody > tr > th {
  background-color: #f2f2f2;
  white-space: nowrap;
}

.message h2 {
  margin: 0.5em 0;
  color: #1e5311;
  font-size: 130%;
}

.message p {
  margin: 0.8em 0;
  text-align: justify;
  font-size: 82%;
}

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

#help dt{
  font-weight:bold;
  padding:0 0 0 2em;
  color: blue;
}
#help dt:before {
  display: inline-block;
  width: 2em;
  margin-left: -2em;
  content: 'Q.';
  color: blue;
}

#help dd {
  margin: 0 0 1.4em 0;
  padding:0 0 0 2em;
  position:relative;
  background-color: #FDFBF5;
  display: none;
}
#help dd > div:before {
  display: inline-block;
  width: 2em;
  position: absolute;  
  top:0;
  left:0;
  content: 'A.';
  color: #E6272B;
  font-weight: bold;
}

#help #support {
  padding: 0.2em;
  border: solid 1px #CCCCCC;
  background-color: #FFF5F5;
}

/*==================
 * voices
 */

#voices article {
  border: solid 2px #E1E6A1;
  margin-bottom: 1.4em;
}

#voices article > .snap-image-left {
  margin: 0.5em 0 0.5em 0.5em;
}

#voices article > h2 {
  background-color: #E1E6A1;
  margin: 0;
  padding: 0.5em;
  font-size: 100%;
}
#voices article p {
  margin: 0;
  padding: 0.5em;
}

#voices article .summary {
  border-bottom: dotted 1px #CCCCCC;
  font-weight: bold;
}

#voices article .teacher {
  border-bottom: solid 1px #f90;
}

/*==================
 * privacy
 */
#privacy dl > dd {
  margin-bottom: 1.4em;
}

#privacy-mark {
  padding: 0;
  margin: 0;
  float: right;
}