@charset "UTF-8";
/*
Theme Name: YouCode
Theme URI:
Author: aPosto
Author URI: https://aposto.jp/
Description:
License:
License URI:
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: youcode
*/
/**
 * Table of Contents
 *
 * 1.0 - Normalize & foundation
 * 2.0 - icons
 * 3.0 - Typography
 * 4.0 - Elements
 * 5.0 - Forms
 * 6.0 - Navigation
 *   6.1 - Links
 *   6.2 - Menus
 * 7.0 - Accessibility
 * 8.0 - Alignments
 * 9.0 - Clearings
 * 10.0 - Widgets
 * 11.0 - Content
 *    11.1 - Header
 *    11.2 - Posts and pages
 *    11.3 - Post Formats
 *    11.4 - Comments
 *    11.5 - Sidebar
 *    11.6 - Footer
 * 12.0 - Media
 *    12.1 - Captions
 *    12.2 - Galleries
 * 13.0 - Multisite
 * 14.0 - Media Queries
 *    14.1 - >= 710px
 *    14.2 - >= 783px
 *    14.3 - >= 910px
 *    14.4 - >= 985px
 *    14.5 - >= 1200px
 * 15.0 - Print
 */
/* 1.0 - Normalize & foundation */
/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, footer, header, nav, section {
  display: block; }

h1 {
  font-size: 2em;
  margin: .67em 0; }

figcaption, figure {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

main {
  display: block; }

pre {
  font-family: monospace,monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:active, a:hover {
  outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b, strong {
  font-weight: inherit; }

b, strong {
  font-weight: bolder; }

code, kbd, samp {
  font-family: monospace,monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

audio, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0; }

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText; }

input {
  overflow: visible; }

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em; }

legend {
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

details {
  display: block; }

summary {
  display: list-item; }

menu {
  display: block; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }

html {
  box-sizing: border-box;
  font-size: 100%; }

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

body {
  margin: 0;
  padding: 0;
  background: #fefefe;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  -ms-interpolation-mode: bicubic; }

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 3px; }

select {
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px; }

.map_canvas embed, .map_canvas img, .map_canvas object, .mqa-display embed, .mqa-display img, .mqa-display object {
  max-width: none !important; }

button {
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: 0 0;
  line-height: 1;
  cursor: auto; }

[data-whatinput=mouse] button {
  outline: 0; }

pre {
  overflow: auto; }

button, input, optgroup, select, textarea {
  font-family: inherit; }

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

.row {
  max-width: 90rem;
  margin-right: auto;
  margin-left: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap; }

.row .row {
  margin-right: -.9375rem;
  margin-left: -.9375rem; }

@media print, screen and (min-width: 40em) {
  .row .row {
    margin-right: -.9375rem;
    margin-left: -.9375rem; } }
@media print, screen and (min-width: 64em) {
  .row .row {
    margin-right: -.9375rem;
    margin-left: -.9375rem; } }
.row .row.collapse {
  margin-right: 0;
  margin-left: 0; }

.row.expanded {
  max-width: none; }

.row.expanded .row {
  margin-right: auto;
  margin-left: auto; }

.row:not(.expanded) .row {
  max-width: none; }

.row.collapse > .column, .row.collapse > .columns {
  padding-right: 0;
  padding-left: 0; }

.row.collapse > .column > .row, .row.collapse > .columns > .row, .row.is-collapse-child {
  margin-right: 0;
  margin-left: 0; }

.column, .columns {
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  padding-right: .9375rem;
  padding-left: .9375rem;
  min-width: 0; }

.column.row.row, .row.row.columns {
  float: none;
  display: block; }

.row .column.row.row, .row .row.row.columns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0; }

.small-1 {
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.small-offset-0 {
  margin-left: 0; }

.small-2 {
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.small-offset-1 {
  margin-left: 8.33333%; }

.small-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.small-offset-2 {
  margin-left: 16.66667%; }

.small-4 {
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.small-offset-3 {
  margin-left: 25%; }

.small-5 {
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.small-offset-4 {
  margin-left: 33.33333%; }

.small-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.small-offset-5 {
  margin-left: 41.66667%; }

.small-7 {
  -ms-flex: 0 0 58.33333%;
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.small-offset-6 {
  margin-left: 50%; }

.small-8 {
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.small-offset-7 {
  margin-left: 58.33333%; }

.small-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.small-offset-8 {
  margin-left: 66.66667%; }

.small-10 {
  -ms-flex: 0 0 83.33333%;
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.small-offset-9 {
  margin-left: 75%; }

.small-11 {
  -ms-flex: 0 0 91.66667%;
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.small-offset-10 {
  margin-left: 83.33333%; }

.small-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.small-offset-11 {
  margin-left: 91.66667%; }

.small-up-1 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-1 > .column, .small-up-1 > .columns {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.small-up-2 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-2 > .column, .small-up-2 > .columns {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.small-up-3 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-3 > .column, .small-up-3 > .columns {
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.small-up-4 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-4 > .column, .small-up-4 > .columns {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.small-up-5 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-5 > .column, .small-up-5 > .columns {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%; }

.small-up-6 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-6 > .column, .small-up-6 > .columns {
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.small-up-7 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-7 > .column, .small-up-7 > .columns {
  -ms-flex: 0 0 14.28571%;
  flex: 0 0 14.28571%;
  max-width: 14.28571%; }

.small-up-8 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.small-up-8 > .column, .small-up-8 > .columns {
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%; }

.small-collapse > .column, .small-collapse > .columns {
  padding-right: 0;
  padding-left: 0; }

.small-uncollapse > .column, .small-uncollapse > .columns {
  padding-right: .9375rem;
  padding-left: .9375rem; }

@media print, screen and (min-width: 40em) {
  .medium-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }

  .medium-offset-0 {
    margin-left: 0; }

  .medium-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }

  .medium-offset-1 {
    margin-left: 8.33333%; }

  .medium-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .medium-offset-2 {
    margin-left: 16.66667%; }

  .medium-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }

  .medium-offset-3 {
    margin-left: 25%; }

  .medium-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }

  .medium-offset-4 {
    margin-left: 33.33333%; }

  .medium-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .medium-offset-5 {
    margin-left: 41.66667%; }

  .medium-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }

  .medium-offset-6 {
    margin-left: 50%; }

  .medium-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }

  .medium-offset-7 {
    margin-left: 58.33333%; }

  .medium-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }

  .medium-offset-8 {
    margin-left: 66.66667%; }

  .medium-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }

  .medium-offset-9 {
    margin-left: 75%; }

  .medium-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }

  .medium-offset-10 {
    margin-left: 83.33333%; }

  .medium-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .medium-offset-11 {
    margin-left: 91.66667%; }

  .medium-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-1 > .column, .medium-up-1 > .columns {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .medium-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-2 > .column, .medium-up-2 > .columns {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .medium-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-3 > .column, .medium-up-3 > .columns {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }

  .medium-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-4 > .column, .medium-up-4 > .columns {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .medium-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-5 > .column, .medium-up-5 > .columns {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }

  .medium-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-6 > .column, .medium-up-6 > .columns {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }

  .medium-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-7 > .column, .medium-up-7 > .columns {
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%; }

  .medium-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .medium-up-8 > .column, .medium-up-8 > .columns {
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%; } }
@media print, screen and (min-width: 40em) and (min-width: 40em) {
  .medium-expand {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; } }
.row.medium-unstack > .column, .row.medium-unstack > .columns {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%; }

@media print, screen and (min-width: 40em) {
  .row.medium-unstack > .column, .row.medium-unstack > .columns {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; } }
@media print, screen and (min-width: 40em) {
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }

  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-right: .9375rem;
    padding-left: .9375rem; } }
@media print, screen and (min-width: 64em) {
  .large-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }

  .large-offset-0 {
    margin-left: 0; }

  .large-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }

  .large-offset-1 {
    margin-left: 8.33333%; }

  .large-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .large-offset-2 {
    margin-left: 16.66667%; }

  .large-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }

  .large-offset-3 {
    margin-left: 25%; }

  .large-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }

  .large-offset-4 {
    margin-left: 33.33333%; }

  .large-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .large-offset-5 {
    margin-left: 41.66667%; }

  .large-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }

  .large-offset-6 {
    margin-left: 50%; }

  .large-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }

  .large-offset-7 {
    margin-left: 58.33333%; }

  .large-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }

  .large-offset-8 {
    margin-left: 66.66667%; }

  .large-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }

  .large-offset-9 {
    margin-left: 75%; }

  .large-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }

  .large-offset-10 {
    margin-left: 83.33333%; }

  .large-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .large-offset-11 {
    margin-left: 91.66667%; }

  .large-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-1 > .column, .large-up-1 > .columns {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }

  .large-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-2 > .column, .large-up-2 > .columns {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }

  .large-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-3 > .column, .large-up-3 > .columns {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }

  .large-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-4 > .column, .large-up-4 > .columns {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }

  .large-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-5 > .column, .large-up-5 > .columns {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }

  .large-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-6 > .column, .large-up-6 > .columns {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }

  .large-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-7 > .column, .large-up-7 > .columns {
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%; }

  .large-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }

  .large-up-8 > .column, .large-up-8 > .columns {
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%; } }
@media print, screen and (min-width: 64em) and (min-width: 64em) {
  .large-expand {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; } }
.row.large-unstack > .column, .row.large-unstack > .columns {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%; }

@media print, screen and (min-width: 64em) {
  .row.large-unstack > .column, .row.large-unstack > .columns {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; } }
@media print, screen and (min-width: 64em) {
  .large-collapse > .column, .large-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }

  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-right: .9375rem;
    padding-left: .9375rem; } }
.shrink {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%; }

.column-block {
  margin-bottom: 1.875rem; }

.column-block > :last-child {
  margin-bottom: 0; }

.align-right {
  -ms-flex-pack: end;
  justify-content: flex-end; }

.align-center {
  -ms-flex-pack: center;
  justify-content: center; }

.align-justify {
  -ms-flex-pack: justify;
  justify-content: space-between; }

.align-spaced {
  -ms-flex-pack: distribute;
  justify-content: space-around; }

.align-right.vertical.menu > li > a {
  -ms-flex-pack: end;
  justify-content: flex-end; }

.align-center.vertical.menu > li > a {
  -ms-flex-pack: center;
  justify-content: center; }

.align-top {
  -ms-flex-align: start;
  align-items: flex-start; }

.align-self-top {
  -ms-flex-item-align: start;
  align-self: flex-start; }

.align-bottom {
  -ms-flex-align: end;
  align-items: flex-end; }

.align-self-bottom {
  -ms-flex-item-align: end;
  align-self: flex-end; }

.align-middle {
  -ms-flex-align: center;
  align-items: center; }

.align-self-middle {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

.align-stretch {
  -ms-flex-align: stretch;
  align-items: stretch; }

.align-self-stretch {
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch; }

.align-center-middle {
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center; }

.small-order-1 {
  -ms-flex-order: 1;
  order: 1; }

.small-order-2 {
  -ms-flex-order: 2;
  order: 2; }

.small-order-3 {
  -ms-flex-order: 3;
  order: 3; }

.small-order-4 {
  -ms-flex-order: 4;
  order: 4; }

.small-order-5 {
  -ms-flex-order: 5;
  order: 5; }

.small-order-6 {
  -ms-flex-order: 6;
  order: 6; }

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    -ms-flex-order: 1;
    order: 1; }

  .medium-order-2 {
    -ms-flex-order: 2;
    order: 2; }

  .medium-order-3 {
    -ms-flex-order: 3;
    order: 3; }

  .medium-order-4 {
    -ms-flex-order: 4;
    order: 4; }

  .medium-order-5 {
    -ms-flex-order: 5;
    order: 5; }

  .medium-order-6 {
    -ms-flex-order: 6;
    order: 6; } }
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    -ms-flex-order: 1;
    order: 1; }

  .large-order-2 {
    -ms-flex-order: 2;
    order: 2; }

  .large-order-3 {
    -ms-flex-order: 3;
    order: 3; }

  .large-order-4 {
    -ms-flex-order: 4;
    order: 4; }

  .large-order-5 {
    -ms-flex-order: 5;
    order: 5; }

  .large-order-6 {
    -ms-flex-order: 6;
    order: 6; } }
.flex-container {
  display: -ms-flexbox;
  display: flex; }

.flex-child-auto {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

.flex-child-grow {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto; }

.flex-child-shrink {
  -ms-flex: 0 1 auto;
  flex: 0 1 auto; }

.flex-dir-row {
  -ms-flex-direction: row;
  flex-direction: row; }

.flex-dir-row-reverse {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flex-dir-column {
  -ms-flex-direction: column;
  flex-direction: column; }

.flex-dir-column-reverse {
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: -ms-flexbox;
    display: flex; }

  .medium-flex-child-auto {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; }

  .medium-flex-child-grow {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto; }

  .medium-flex-child-shrink {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }

  .medium-flex-dir-row {
    -ms-flex-direction: row;
    flex-direction: row; }

  .medium-flex-dir-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }

  .medium-flex-dir-column {
    -ms-flex-direction: column;
    flex-direction: column; }

  .medium-flex-dir-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; } }
@media print, screen and (min-width: 64em) {
  .large-flex-container {
    display: -ms-flexbox;
    display: flex; }

  .large-flex-child-auto {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; }

  .large-flex-child-grow {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto; }

  .large-flex-child-shrink {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }

  .large-flex-dir-row {
    -ms-flex-direction: row;
    flex-direction: row; }

  .large-flex-dir-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }

  .large-flex-dir-column {
    -ms-flex-direction: column;
    flex-direction: column; }

  .large-flex-dir-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; } }
.slide-in-down.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-in-down.mui-enter.mui-enter-active {
  -ms-transform: translateY(0);
  transform: translateY(0); }

.slide-in-left.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-in-left.mui-enter.mui-enter-active {
  -ms-transform: translateX(0);
  transform: translateX(0); }

.slide-in-up.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-in-up.mui-enter.mui-enter-active {
  -ms-transform: translateY(0);
  transform: translateY(0); }

.slide-in-right.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-in-right.mui-enter.mui-enter-active {
  -ms-transform: translateX(0);
  transform: translateX(0); }

.slide-out-down.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-out-down.mui-leave.mui-leave-active {
  -ms-transform: translateY(100%);
  transform: translateY(100%); }

.slide-out-right.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-out-right.mui-leave.mui-leave-active {
  -ms-transform: translateX(100%);
  transform: translateX(100%); }

.slide-out-up.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-out-up.mui-leave.mui-leave-active {
  -ms-transform: translateY(-100%);
  transform: translateY(-100%); }

.slide-out-left.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition-property: transform,opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.slide-out-left.mui-leave.mui-leave-active {
  -ms-transform: translateX(-100%);
  transform: translateX(-100%); }

.fade-in.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  opacity: 0;
  transition-property: opacity; }

.fade-in.mui-enter.mui-enter-active {
  opacity: 1; }

.fade-out.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  opacity: 1;
  transition-property: opacity; }

.fade-out.mui-leave.mui-leave-active {
  opacity: 0; }

.hinge-in-from-top.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  -ms-transform-origin: top;
  transform-origin: top;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-top.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-in-from-right.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  -ms-transform-origin: right;
  transform-origin: right;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-right.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-in-from-bottom.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(90deg);
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-bottom.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-in-from-left.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(90deg);
  -ms-transform-origin: left;
  transform-origin: left;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-left.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-in-from-middle-x.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  -ms-transform-origin: center;
  transform-origin: center;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-in-from-middle-y.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  -ms-transform-origin: center;
  transform-origin: center;
  transition-property: transform,opacity;
  opacity: 0; }

.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0);
  opacity: 1; }

.hinge-out-from-top.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: top;
  transform-origin: top;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-top.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-right.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: right;
  transform-origin: right;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-right.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.hinge-out-from-bottom.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-bottom.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0; }

.hinge-out-from-left.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: left;
  transform-origin: left;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-left.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0; }

.hinge-out-from-middle-x.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: center;
  transform-origin: center;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hinge-out-from-middle-y.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0);
  -ms-transform-origin: center;
  transform-origin: center;
  transition-property: transform,opacity;
  opacity: 1; }

.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.scale-in-up.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  transition-property: transform,opacity;
  opacity: 0; }

.scale-in-up.mui-enter.mui-enter-active {
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

.scale-in-down.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  transition-property: transform,opacity;
  opacity: 0; }

.scale-in-down.mui-enter.mui-enter-active {
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

.scale-out-up.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: scale(1);
  transform: scale(1);
  transition-property: transform,opacity;
  opacity: 1; }

.scale-out-up.mui-leave.mui-leave-active {
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0; }

.scale-out-down.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: scale(1);
  transform: scale(1);
  transition-property: transform,opacity;
  opacity: 1; }

.scale-out-down.mui-leave.mui-leave-active {
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0; }

.spin-in.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: rotate(-0.75turn);
  transform: rotate(-0.75turn);
  transition-property: transform,opacity;
  opacity: 0; }

.spin-in.mui-enter.mui-enter-active {
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1; }

.spin-out.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: rotate(0);
  transform: rotate(0);
  transition-property: transform,opacity;
  opacity: 1; }

.spin-out.mui-leave.mui-leave-active {
  -ms-transform: rotate(0.75turn);
  transform: rotate(0.75turn);
  opacity: 0; }

.spin-in-ccw.mui-enter {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: rotate(0.75turn);
  transform: rotate(0.75turn);
  transition-property: transform,opacity;
  opacity: 0; }

.spin-in-ccw.mui-enter.mui-enter-active {
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1; }

.spin-out-ccw.mui-leave {
  transition-duration: .5s;
  transition-timing-function: linear;
  -ms-transform: rotate(0);
  transform: rotate(0);
  transition-property: transform,opacity;
  opacity: 1; }

.spin-out-ccw.mui-leave.mui-leave-active {
  -ms-transform: rotate(-0.75turn);
  transform: rotate(-0.75turn);
  opacity: 0; }

.slow {
  transition-duration: 750ms !important; }

.fast {
  transition-duration: 250ms !important; }

.linear {
  transition-timing-function: linear !important; }

.ease {
  transition-timing-function: ease !important; }

.ease-in {
  transition-timing-function: ease-in !important; }

.ease-out {
  transition-timing-function: ease-out !important; }

.ease-in-out {
  transition-timing-function: ease-in-out !important; }

.bounce-in {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  transition-delay: 0.3s !important; }

.long-delay {
  transition-delay: 0.7s !important; }

.shake {
  animation-name: shake-7; }

@keyframes shake-7 {
  0%,10%,20%,30%,40%,50%,60%,70%,80%,90% {
    transform: translateX(7%); }
  15%,25%,35%,45%,5%,55%,65%,75%,85%,95% {
    transform: translateX(-7%); } }
.spin-cw {
  animation-name: spin-cw-1turn; }

@keyframes spin-cw-1turn {
  0% {
    transform: rotate(-1turn); }
  100% {
    transform: rotate(0); } }
.spin-ccw {
  animation-name: spin-cw-1turn; }

@keyframes spin-cw-1turn {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(1turn); } }
.wiggle {
  animation-name: wiggle-7deg; }

@keyframes wiggle-7deg {
  40%,50%,60% {
    transform: rotate(7deg); }
  35%,45%,55%,65% {
    transform: rotate(-7deg); }
  0%,100%,30%,70% {
    transform: rotate(0); } }
.shake, .spin-ccw, .spin-cw, .wiggle {
  animation-duration: .5s; }

.infinite {
  animation-iteration-count: infinite; }

.slow {
  animation-duration: 750ms !important; }

.fast {
  animation-duration: 250ms !important; }

.linear {
  animation-timing-function: linear !important; }

.ease {
  animation-timing-function: ease !important; }

.ease-in {
  animation-timing-function: ease-in !important; }

.ease-out {
  animation-timing-function: ease-out !important; }

.ease-in-out {
  animation-timing-function: ease-in-out !important; }

.bounce-in {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounce-out {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounce-in-out {
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.short-delay {
  animation-delay: 0.3s !important; }

.long-delay {
  animation-delay: 0.7s !important; }

/* 2.0 - icons */
.icon {
  display: inline-block;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat; }

.icon-telephone {
  background-image: url("/wp-content/themes/youcode/icons/telephone.png");
  width: 24px;
  height: 24px; }

.icon-message {
  background-image: url("/wp-content/themes/youcode/icons/message.png");
  width: 28px;
  height: 24px; }

/* 2.0 - Colors */
/* 2.0 - Typography */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100; }
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200; }
html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; }

@media all and (-ms-high-contrast: none) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif; } }
body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; }

.roboto {
  font-family: "Roboto"; }

a {
  color: initial;
  text-decoration: none; }

.section-title {
  font-size: 1.625em;
  margin: 30px 0; }

.youcode {
  color: #759FC8;
  font-family: "Roboto"; }

.color-green {
  color: #39B54A; }

.color-orange {
  color: #FF7217; }

.bold {
  font-weight: bold; }

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

/* 4.0 - Elements */
section {
  padding: 80px 0; }

section.photo .white-box {
  position: relative;
  background-color: white;
  border-radius: 5px;
  display: flex;
  padding: 20px 25px; }

.divider.class {
  padding: 50px 0; }

.button {
  display: inline-block;
  background-color: #759FC8;
  border-radius: 10px;
  position: relative;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s; }

.button:hover {
  opacity: 0.7; }

.button.arrow a:after {
  content: ' ';
  background-image: url("/wp-content/themes/youcode/icons/arrow.png");
  width: 10px;
  height: 10px;
  position: relative;
  margin: 0 0 0 15px;
  top: 0;
  right: 0;
  display: inline-block;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat; }

.button.info a:before {
  content: ' ';
  background-image: url("/wp-content/themes/youcode/icons/info.png");
  width: 16px;
  height: 16px;
  position: relative;
  margin: 0 6px 0 0;
  top: 1px;
  right: 0;
  display: inline-block;
  -webkit-background-size: contain;
  background-size: contain; }

.button a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: white;
  width: 100%; }

.card {
  display: flex;
  justify-content: space-around;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 50px;
  border: 1px solid #E6EAED;
  box-shadow: 3px 3px 0px 0px #E6EAED; }

.card-left, .card-right {
  width: 50%;
  position: relative;
  min-height: 230px; }

.card-right .monster {
  position: absolute;
  right: -20px;
  bottom: -24px; }

.card-right .monster.glasses {
  bottom: 0; }

.card-left .card-image {
  width: 90%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center; }

.card-image.left {
  background-position: left top; }

.card-image.right {
  background-position: right  bottom; }

.card-right h3 {
  margin: 0; }

.card-place {
  margin: 10px 0;
  display: inline-block; }

.card-place:before {
  content: ' ';
  background-image: url("/wp-content/themes/youcode/icons/gray/pin.png");
  width: 18px;
  height: 18px;
  display: inline-block;
  -webkit-background-size: contain;
  background-size: contain;
  position: relative;
  top: 2px;
  margin-right: 10px;
  background-repeat: no-repeat; }

.card-date {
  margin: 10px 0;
  display: inline-block; }

.card-date:before {
  content: ' ';
  background-image: url("/wp-content/themes/youcode/icons/gray/clock.png");
  width: 18px;
  height: 18px;
  display: inline-block;
  -webkit-background-size: contain;
  background-size: contain;
  margin-right: 10px;
  background-repeat: no-repeat;
  position: absolute; }

.card-date {
  display: flex;
  flex-wrap: wrap; }

.card-date .event-date {
  background-color: #7C7AFB;
  border-radius: 100px;
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  padding: 25px 0;
  text-align: center;
  right: -20px; }

.card-date .event-date-course {
  background-color: #F85359;
  border-radius: 10px;
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  text-align: center; }

.card-date div {
  text-align: left;
  margin-bottom: 5px;
  font-size: 1em;
  margin-right: 10px;
  margin-left: 28px;
  width: 100%; }

.card-date span {
  margin-left: 15px;
  color: #F85359; }

.card-date div:nth-of-type(3n) {
  margin-left: 28px; }

.card .button {
  background-color: #72d5d1; }

.card .button.access {
  background-color: transparent;
  border: 1px solid #759FC8;
  color: #759FC8;
  margin-left: 15px; }

.card .button.access a {
  color: #759FC8;
  padding: 5px; }

.card .button.access.arrow a:after {
  background-image: url("/wp-content/themes/youcode/icons/blue/arrow.png");
  margin: 0 0 0 6px; }

.divider {
  text-align: center;
  display: block;
  width: 100%; }

.divider img {
  width: 114px;
  height: 45px; }

/* 4.0 - patterns */
.pattern {
  background-repeat: repeat;
  -webkit-background-size: 50%;
  background-size: 50%; }

.pattern-2 {
  background-image: url("/wp-content/themes/youcode/images/patterns/science2.png"); }

.pattern-3 {
  background-image: url("/wp-content/themes/youcode/images/patterns/science3.png"); }

/* 7.0 - Accessibility */
.no-padding {
  padding: 0; }

.no-margin-top {
  margin-top: 0; }

/* 8.0 - Alignments */
.align-center {
  text-align: center; }

/* 11.0 - Content */
/* 11.1 - Header */
.menu-icon {
  display: none; }

.menu-icon .menu-toggle {
  height: 0; }

.menu-icon .menu-toggle-text {
  margin-left: 18px; }

.menu-icon .menu-toggle span {
  width: 14px;
  height: 3px;
  background: #635A54;
  position: absolute;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.menu-icon .menu-toggle .top {
  -webkit-transform: translateY(16px);
  -moz-transform: translateY(16px);
  -ms-transform: translateY(16px);
  -o-transform: translateY(16px);
  transform: translateY(4px); }

.menu-icon .menu-toggle .middle {
  -webkit-transform: translateY(25px);
  -moz-transform: translateY(25px);
  -ms-transform: translateY(25px);
  -o-transform: translateY(25px);
  transform: translateY(10px);
  background: none; }

.menu-icon .menu-toggle .middle:before, .menu-icon .menu-toggle .middle:after {
  content: '';
  position: absolute;
  height: 3px;
  width: 14px;
  position: absolute;
  background: #635A54;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: block; }

.menu-icon .menu-toggle .bottom {
  -webkit-transform: translateY(34px);
  -moz-transform: translateY(34px);
  -ms-transform: translateY(34px);
  -o-transform: translateY(34px);
  transform: translateY(16px); }

.menu-icon .menu-active span {
  width: 14px;
  height: 3px;
  background: #635A54;
  position: absolute; }

.menu-icon .menu-active .top {
  opacity: 0; }

.menu-icon .menu-active .middle {
  background: transparent; }

.menu-icon .menu-active .middle:before {
  -webkit-transform: rotate(45deg) scale(1);
  -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -o-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  height: 3px;
  width: 14px;
  position: absolute;
  background: #635A54; }

.menu-icon .menu-active .middle:after {
  -webkit-transform: rotate(-45deg) scale(1);
  -moz-transform: rotate(-45deg) scale(1);
  -ms-transform: rotate(-45deg) scale(1);
  -o-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
  height: 3px;
  width: 14px;
  position: absolute;
  background: #635A54; }

.menu-icon .menu-active .bottom {
  opacity: 0; }

.site-header {
  position: fixed;
  z-index: 5;
  width: 100%; }

.header {
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 2px 2px 0 1px rgba(0, 0, 0, 0.1); }

.topbar {
  overflow: hidden;
  background-color: #759FC8;
  padding: 5px 25px 2px 25px; }

.topbar-left {
  display: inline;
  float: left;
  position: relative;
  top: -2px;
  color: #E9EDF1; }

.topbar-left .icon {
  position: relative;
  top: 5px;
  margin-right: 8px; }

.topbar-left .icon.icon-telephone {
  width: 14px;
  height: 14px;
  top: 1px; }

.topbar-left .icon.icon-message {
  width: 14px;
  height: 14px;
  top: 1px; }

.topbar-left a {
  text-decoration: none;
  color: #E9EDF1; }

.topbar-right {
  display: inline;
  float: right;
  position: relative;
  top: 5px;
  color: #E9EDF1; }

.topbar-separator {
  margin: 0 15px; }

.menu {
  background-color: white;
  position: relative;
  padding: 0 25px; }

.menu-logo {
  position: absolute;
  left: 25px;
  top: 19px; }

.menu-logo img {
  max-width: initial;
  height: auto;
  width: 135px; }

.menu nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center; }

.menu nav li {
  margin: 0 15px;
  border-bottom: solid 3px transparent;
  -webkit-transition: border-bottom 0.3s;
  -moz-transition: border-bottom 0.3s;
  -ms-transition: border-bottom 0.3s;
  -o-transition: border-bottom 0.3s;
  transition: border-bottom 0.3s; }

.menu nav li a {
  color: #759FC8;
  padding: 20px 0 17px 0;
  text-decoration: none;
  display: inline-block; }

.menu nav li:hover, .menu nav li.active {
  border-bottom: solid 3px #759FC8; }

/* 11.6 - Page */
.page-header {
  height: 265px; }

/* 11.6 - Footer */
footer {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#759fc8+0,7c7afb+100 */
  background: #759fc8;
  /* Old browsers */
  background: -moz-linear-gradient(left, #759fc8 0%, #7c7afb 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #759fc8 0%, #7c7afb 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #759fc8 0%, #7c7afb 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759fc8', endColorstr='#7c7afb',GradientType=1 );
  /* IE6-9 */
  color: white; }

.footer-menu-logo img {
  height: auto; }

.footer-menu {
  padding: 50px 0;
  display: flex;
  align-items: center; }

.footer-menu nav {
  margin-right: auto; }

.footer-menu ul {
  list-style: none;
  display: flex; }

.footer-menu ul a {
  padding: 0 15px;
  color: white;
  text-decoration: none; }

.footer-legal {
  display: inline-block;
  color: white; }

/* 16 - Toppage */
.hero {
  overflow: hidden;
  position: relative;
  z-index: -2; }

.news-zindex {
  z-index: 1;
  position: relative; }

.monster-news {
  width: 100%;
  background: #759fc8;
  background: -moz-linear-gradient(-45deg, #759fc8 0%, #72d5d1 100%);
  background: -webkit-linear-gradient(-45deg, #759fc8 0%, #72d5d1 100%);
  background: linear-gradient(135deg, #759fc8 0%, #72d5d1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759fc8', endColorstr='#72d5d1',GradientType=1 );
  padding: 10px 100px;
  border-radius: 100px;
  position: relative;
  top: -50%; }

.monster-news h2 {
  font-size: 17px;
  padding: 5px;
  position: absolute;
  display: inline-block;
  background-image: url(/wp-content/themes/youcode/images/comic.png);
  width: 86px;
  height: 82px;
  background-size: contain;
  top: -14px;
  left: -66px;
  font-size: 1em;
  padding: 10px; }

.monster-news ol {
  list-style: none; }

.monster-news li {
  font-size: 1em;
  color: white;
  margin: 5px 0; }

.monster-news a {
  text-decoration: none;
  color: white; }

.monster-news .horn {
  content: ' ';
  font-size: 0;
  position: absolute;
  display: inline-block;
  background-image: url("/wp-content/themes/youcode/images/monsters/top-news-2.png");
  width: 27px;
  height: 34px;
  background-size: contain;
  z-index: -1;
  top: -17px;
  left: 17px; }

.monster-news:before {
  content: 'お知らせ';
  font-size: 0;
  position: absolute;
  display: inline-block;
  background-image: url("/wp-content/themes/youcode/images/monsters/top-news-1.png");
  width: 76px;
  height: 138px;
  background-size: contain;
  left: 32px;
  top: -20px; }

.monster-news:after {
  content: ' ';
  font-size: 0;
  position: absolute;
  display: inline-block;
  background-image: url("/wp-content/themes/youcode/images/monsters/top-news-4.png");
  width: 58px;
  height: 65px;
  background-size: contain;
  top: -32px;
  right: -26px; }

.welcome {
  padding-top: 0; }

.welcome > div {
  position: relative;
  margin-bottom: 50px; }

.welcome h2 {
  line-height: 1.2em; }

.welcome h2, .welcome p {
  display: block;
  width: 100%;
  text-align: center; }

.welcome .monster {
  position: absolute;
  right: 0;
  top: 0; }

.point {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  margin-bottom: 25px; }

.point li {
  width: calc(33.333% - 15px);
  margin-bottom: 15px;
  background-color: #E9EDF1;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30px 15px 20px 15px; }

.point h3 {
  font-size: 1em;
  font-weight: normal;
  text-align: center; }

.photo {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 70px 0 50px 0; }

.photo h2 {
  color: white;
  margin: 0 0 70px 0;
  text-align: center; }

.photo.ryugaku {
  background-image: url("/wp-content/themes/youcode/images/photos/top-ryugaku.jpg"); }

.top-ryugaku img {
  margin-right: 25px; }

.top-ryugaku p:first-child {
  margin-top: 0; }

.photo.why {
  background-image: url("/wp-content/themes/youcode/images/photos/top-why.jpg"); }

.photo .why-hat {
  position: absolute;
  top: -60px;
  left: 10px; }

.top-curriculum .section-title {
  margin-top: 0; }

.monster-comic {
  background-image: url(/wp-content/themes/youcode/images/monsters/top-contact-2.png);
  background-size: contain;
  width: 319px;
  background-repeat: no-repeat;
  text-align: center;
  padding: 16px 50px 50px 107px;
  margin-left: 20px;
  position: relative; }

.top-contact {
  display: flex;
  margin: auto;
  align-items: center; }

.top-contact .button a {
  padding: 10px 25px; }

/* 16 - About */
.point.about {
  margin-bottom: 0; }

.point.about li {
  width: 100%;
  position: relative;
  margin-bottom: 25px; }

.point.about li:last-child {
  margin-bottom: 0; }

.point.about h3 {
  width: 100%;
  text-align: left;
  margin: 0 0 0 60px;
  font-weight: bold; }

.point.about p {
  margin: 15px 0 0 60px; }

.about-monster {
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
  margin-top: -65px; }

.point.about img {
  position: absolute;
  right: calc(99% - 50px); }

.comparison-table table {
  width: 100%;
  margin-bottom: 50px; }

.comparison-table tbody {
  display: flex;
  border: 1px solid #759FC8;
  border-right: none; }

.comparison-table table tr {
  display: inline-block;
  width: 25%; }

.comparison-table table th {
  display: block;
  width: 100%;
  background-color: #759FC8;
  color: white;
  padding: 15px 0; }

.comparison-table table td {
  display: list-item;
  width: 100%;
  border: none;
  list-style: none;
  margin: 0;
  height: 85px;
  text-align: center;
  padding: 20px 0;
  border-right: 1px solid #759FC8; }

.comparison-table table td:nth-child(2n) {
  background-color: #E9EDF1; }

.comparison-table table td:last-child {
  height: 120px; }

.comparison-table .table-logo img {
  height: auto;
  width: 120px; }

.class-flow h3 {
  margin-bottom: 10px; }

.class-flow p {
  margin: 0 0 40px -15px; }

.staff-list ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin-top: 120px; }

.staff-list li {
  width: 30%;
  position: relative;
  text-align: center;
  border: 1px solid #E6EAED;
  border-radius: 10px;
  padding: 90px 20px 15px 20px; }

.staff-list img {
  position: absolute;
  top: -75px;
  left: calc(50% - 75px); }

.staff-list h4 {
  margin-bottom: 0;
  font-size: 0.938em; }

.staff-list span {
  font-size: 0.875em;
  color: #759FC8; }

.study-cycle {
  background-color: #E9EDF1; }

.study-cycle .cycle {
  position: relative; }

.study-cycle ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.study-cycle li, .study-result {
  width: 40%;
  display: flex;
  flex-direction: column; }

.study-result {
  width: 60%; }

.study-cycle li:nth-child(3), .study-cycle li:nth-child(4) {
  margin-top: 95px; }

.study-cycle .cycle h3 {
  background-color: #39B54A;
  border-radius: 100px;
  color: white;
  position: absolute;
  height: 100px;
  width: 100px;
  text-align: center;
  padding: 25px 15px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  z-index: 2;
  margin: 0; }

.study-cycle li h4, .study-result h3 {
  border-radius: 8px;
  padding: 15px 15px;
  background-color: white;
  display: block;
  text-align: center;
  position: relative;
  margin: 0;
  z-index: 1; }

.study-cycle li::after {
  position: absolute;
  content: ' ';
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3; }

.study-cycle li:nth-child(1)::after {
  background-image: url(/wp-content/themes/youcode/images/arrow/cycle-arrow1.png);
  height: 36px;
  width: 102px;
  left: calc(50% - 51px);
  top: 20%; }

.study-cycle li:nth-child(2)::after {
  background-image: url(/wp-content/themes/youcode/images/arrow/cycle-arrow2.png);
  width: 36px;
  height: 102px;
  right: 20%;
  top: calc(51% - 51px); }

.study-cycle li:nth-child(3)::after {
  background-image: url(/wp-content/themes/youcode/images/arrow/cycle-arrow4.png);
  width: 36px;
  height: 102px;
  left: 20%;
  top: calc(51% - 51px); }

.study-cycle li:nth-child(4)::after {
  background-image: url(/wp-content/themes/youcode/images/arrow/cycle-arrow3.png);
  height: 36px;
  width: 102px;
  left: calc(50% - 51px);
  bottom: 20%; }

.study-cycle li:nth-child(1) h4 {
  background: #eeeeee;
  background: -moz-linear-gradient(top, #eeeeee 1%, #d8d8d8 100%);
  background: -webkit-linear-gradient(top, #eeeeee 1%, #d8d8d8 100%);
  background: linear-gradient(to bottom, #eeeeee 1%, #d8d8d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#d8d8d8',GradientType=0 ); }

.study-cycle li:nth-child(2) h4 {
  background: #759fc8;
  background: -moz-linear-gradient(top, #759fc8 1%, #72d5d1 100%);
  background: -webkit-linear-gradient(top, #759fc8 1%, #72d5d1 100%);
  background: linear-gradient(to bottom, #759fc8 1%, #72d5d1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759fc8', endColorstr='#72d5d1',GradientType=0 ); }

.study-cycle li:nth-child(4) h4 {
  background: #ef4256;
  background: -moz-linear-gradient(top, #ef4256 0%, #f37d7f 100%);
  background: -webkit-linear-gradient(top, #ef4256 0%, #f37d7f 100%);
  background: linear-gradient(to bottom, #ef4256 0%, #f37d7f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4256', endColorstr='#f37d7f',GradientType=0 ); }

.study-cycle li:nth-child(3) h4 {
  background: #759fc8;
  background: -moz-linear-gradient(top, #759fc8 0%, #7c7afb 100%);
  background: -webkit-linear-gradient(top, #759fc8 0%, #7c7afb 100%);
  background: linear-gradient(to bottom, #759fc8 0%, #7c7afb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759fc8', endColorstr='#7c7afb',GradientType=0 ); }

.study-result {
  margin: auto; }

.study-cycle .cycle-arrow {
  text-align: center;
  margin: 25px 0; }

.study-result h3 {
  background: #ff3d8f;
  background: -moz-linear-gradient(left, #ff3d8f 0%, #ff7c00 100%);
  background: -webkit-linear-gradient(left, #ff3d8f 0%, #ff7c00 100%);
  background: linear-gradient(to right, #ff3d8f 0%, #ff7c00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d8f', endColorstr='#ff7c00',GradientType=1 ); }

.study-cycle li p, .study-result p {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  padding: 33px 15px 25px 15px;
  background-color: white;
  margin-top: -10px; }

/* 16 - Curriculum */
.curriculum .button {
  background-color: #72d5d1; }

.curriculum-step {
  margin: 50px 0; }

.curriculum-step ol {
  padding: 0;
  list-style: none; }

.curriculum-step li p {
  margin: 0; }

.curriculum-step li h3 {
  margin-top: 0;
  color: #7C7AFB; }

.curriculum-step li svg, .curriculum-step .curriculum-step {
  display: block; }

.curriculum-step .step-content {
  padding: 0 50px; }

.curriculum-step li:first-child .step-content {
  background-color: #DCF4F3; }

.curriculum-step li:nth-child(2) {
  margin-top: -35px; }

.curriculum-step li:nth-child(2) .step-content {
  background-color: #B8EAE8; }

.curriculum-step li:nth-child(3) {
  margin-top: -35px; }

.curriculum-step li:nth-child(3) .step-content {
  background-color: #96E0DD; }

.curriculum-step li:nth-child(4) {
  margin-top: -35px; }

.curriculum-step li:nth-child(4) .step-content {
  background-color: #72D5D1; }

/* 16 - Entrance guide */
.entrance-top div {
  position: relative; }

.entrance-top img {
  position: absolute;
  left: -70px;
  top: -133%; }

.entrance .white-box p, .entrance .white-box div {
  width: 100%;
  display: inline-block; }

.entrance .white-box {
  flex-wrap: wrap;
  text-align: center; }

.entrance .white-box div {
  width: 75%;
  margin: auto; }

.price-table {
  width: 100%;
  text-align: left; }

.price-table tr {
  border: 1px solid #E9EDF1;
  display: inline-block;
  width: 100%; }

.price-table tr:last-child {
  border-top: none; }

.price-table th {
  display: inline-block;
  background-color: #E9EDF1;
  width: 20%;
  text-align: center;
  padding: 10px 0; }

.price-table td {
  display: inline-block;
  width: 79%;
  border: none;
  list-style: none;
  margin: 0;
  padding: 10px 15px; }

.questions {
  display: flex;
  justify-content: space-between; }

.questions > div {
  width: 48%;
  display: flex;
  flex-direction: column; }

.questions .pattern {
  padding: 10px 20px 10px 20px;
  height: 100%; }

.questions .divider {
  margin-bottom: 50px; }

.questions ul {
  list-style: none;
  padding: 0; }

.questions h2 {
  font-size: 1.625em;
  text-align: center;
  margin-bottom: 50px; }

.questions h3 {
  font-size: 1em;
  margin: 0; }

.questions p {
  margin-top: 5px; }

.entrance-2 {
  position: relative;
  bottom: -10%; }

/* 16 - Trial class */
.join-form {
  width: 50%;
  padding: 0 20px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,f2f4f7+97 */
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 1%, #f2f4f7 97%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffffff 1%, #f2f4f7 97%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffffff 1%, #f2f4f7 97%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f4f7',GradientType=0 );
  /* IE6-9 */
  border: solid 2px #f2f4f7;
  border-radius: 10px; }

.join-form label {
  color: #7F8FA4;
  font-size: 0.875em; }

.join-form input[type="text"], .join-form input[type="email"], .join-form input[type="tel"], .join-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #E6EAED;
  max-width: 100%;
  min-width: 100%; }

.join-form input[type="number"] {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #E6EAED;
  width: 60px;
  margin-right: 10px;
  text-align: center; }

.join-form .wpcf7-radio {
  display: flex;
  flex-direction: column; }

.join-form .wpcf7-radio label {
  color: #354052; }

.join-form .wpcf7-radio > span {
  margin: 10px 0 5px 0 !important; }

.join-form input[type="submit"] {
  width: 100%;
  background-color: #759FC8;
  border: none;
  border-radius: 10px;
  padding: 25px;
  cursor: pointer;
  color: white;
  text-align: center;
  -webkit-transition: opacity .3s; }

.join-form input[type="submit"]:hover {
  opacity: 0.5; }

.trial-left {
  width: 48%;
  position: relative; }

.trial-left .trial-monsters {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%; }

.trial-left .trial-monsters img {
  height: auto; }

.trial-top > div {
  display: flex;
  justify-content: space-between; }

.about-trial {
  display: flex; }

.about-trial > div {
  width: 50%;
  padding: 15px; }

.about-trial > div img {
  width: 100%; }

.about-trial dl {
  margin: 0; }

.about-trial dt {
  display: inline-block;
  width: 20%; }

.about-trial dd {
  display: inline-block;
  width: 79%;
  margin: 0; }

.trial-flow {
  position: relative;
  list-style: none; }

.trial-flow li {
  position: relative;
  margin-bottom: 50px; }

.trial-flow div {
  position: absolute;
  background-color: #759FC8;
  border-radius: 100px;
  width: 70px;
  height: 70px;
  color: white;
  left: -86px;
  top: -8px; }

.trial-flow div span:first-child {
  display: block;
  text-align: center;
  position: relative;
  top: 8px;
  font-size: 0.875em; }

.trial-flow div span:last-child {
  display: block;
  font-size: 2.063em;
  text-align: center; }

.trial-flow h3 {
  margin-bottom: 0; }

.trial-flow p {
  margin-top: 5px; }

/* 16 - Enrol page */
.join-form.enrol {
  margin: auto; }

/* 16 - Contact page */
.join-form.contact {
  background: none;
  border: none;
  margin: auto;
  width: 100%;
  padding: 0; }

.main-contact {
  background-color: #E9EDF1;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 50px; }

.main-contact h3 {
  margin-top: 0; }

.main-contact p {
  margin-bottom: 0;
  margin-top: 5px; }

.main-contact .director {
  margin: 25px 0; }

.main-contact .icon.gray {
  margin-right: 5px;
  position: relative;
  background-repeat: no-repeat; }

.main-contact .icon-message.gray {
  background-image: url("/wp-content/themes/youcode/icons/gray/message.png");
  width: 15px;
  height: 15px; }

.main-contact .icon-telephone.gray {
  background-image: url("/wp-content/themes/youcode/icons/gray/telephone.png");
  width: 15px;
  height: 15px; }

.main-contact .icon-pin.gray {
  background-image: url("/wp-content/themes/youcode/icons/gray/pin.png");
  width: 15px;
  height: 15px; }

.map {
  width: 100%;
  height: 350px; }

.school-list {
  margin: 0;
  padding: 0; }

.school-list li {
  display: flex;
  margin-bottom: 50px;
  padding-top: 130px;
  margin-top: -100px; }

.school-list li .info {
  width: 40%; }

.school-list li .info h3 {
  font-size: 1.625em;
  margin-top: 0; }

.school-list .info h4 {
  font-size: 0.875em;
  margin-bottom: 0;
  color: #759FC8; }

.school-list .info p {
  margin-top: 5px; }

.school-list li .map {
  width: 60%; }

/* 16 - campaign page */
.campaign-monster {
  text-align: center; }

.campaign h2 {
  font-size: 1.625em; }

.campaign h3 {
  font-size: 1.125em; }

.campaign ol {
  padding-left: 20px; }

.campaign-image {
  margin-top: 50px; }

/* 14.0 - Media Queries */
@media screen and (max-width: 1300px) {
  .menu {
    display: flex; }

  .menu nav li {
    margin: 0 10px; }

  .menu-logo {
    position: relative;
    left: 0; }

  .menu nav ul {
    justify-content: initial; } }
@media screen and (max-width: 1023px) {
  .monster-news {
    width: 86%;
    margin: auto; }

  .monster-news {
    border-radius: 50px;
    top: -30px;
    padding: 10px 10px 10px 85px; }

  .monster-news ol {
    margin: 0; }

  .monster-news span {
    display: block; }

  .welcome .monster {
    right: 25px; }

  .top-future {
    align-items: center; }

  section.photo .white-box {
    align-items: center; }

  .card-date {
    flex-direction: column; }

  .card-date .event-date {
    top: -3px; }

  .card-date div:nth-of-type(3n) {
    margin-left: 28px; }

  .card-date .event-date-course {
    display: none; }

  .card-date:before {
    position: absolute; }

  .top-curriculum {
    align-items: center; }

  .top-curriculum .section-title {
    margin-top: 30px; }

  .comparison-table table th {
    font-size: 0.875em; }

  .comparison-table table td {
    padding: 10px 0; }

  .entrance-top img {
    left: 0; }

  .about-trial dt {
    width: 30%; }

  .about-trial dd {
    width: 50%; }

  .map {
    height: 270px; }

  .footer-menu {
    padding: 50px 15px; }

  .footer-menu ul a {
    padding: 0 10px; }

  .footer-menu nav {
    margin-left: auto;
    margin-right: auto; }

  .footer-menu-logo {
    width: 140px; }

  .footer-menu ul {
    padding: 0; }

  .price-table th {
    padding: 30px 0;
    width: 18%; } }
@media screen and (max-width: 820px) {
  header .row, header .columns {
    padding: 0; }

  .topbar-left {
    font-size: 0.875em; }

  .header {
    position: absolute;
    width: 100%;
    top: -370px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -ms-transition: top 0.3s;
    -o-transition: top 0.3s;
    transition: top 0.3s; }

  .header.menu-opened {
    top: 0; }

  .menu-icon {
    display: inline-block; }

  .menu nav ul {
    flex-direction: column;
    padding: 30px 0; }

  .menu nav li {
    margin: 0 5px;
    text-align: center;
    transition-property: none;
    border-bottom: none; }

  .menu nav li a {
    padding: 20px 0 0 0; }

  .menu nav li:hover, .menu nav li.active {
    border-bottom: 0; }

  .menu {
    align-items: center;
    width: 100%; }

  .menu-logo {
    position: absolute;
    bottom: 10px;
    left: 15px;
    display: inline-block;
    top: initial; }

  .menu nav {
    position: relative;
    margin-bottom: 60px;
    width: 100%; }

  .menu-icon {
    position: absolute;
    right: 15px;
    bottom: 0;
    bottom: 10px; }

  .menu nav li.active a {
    border-bottom: solid 3px #759FC8; }

  .hero {
    top: 35px; }

  .monster-news {
    border-radius: 50px;
    top: -30px;
    padding: 10px 10px 10px 45px; }

  .monster-news:before {
    left: 24px;
    top: -15px;
    width: 54px;
    height: 99px; }

  .monster-news .horn {
    width: 20px;
    height: 25px;
    top: -12px;
    left: 19px; }

  .monster-news:after {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 45px; }

  .monster-news h2 {
    font-size: 0.625em;
    width: 61px;
    height: 58px;
    top: -14px;
    left: -36px;
    background-repeat: no-repeat; }

  .card {
    flex-wrap: wrap;
    padding: 25px; }

  .card-left, .card-right {
    width: 100%; }

  .card-left .card-image {
    width: 100%; }

  .card-left {
    height: 220px;
    margin-bottom: 15px; }

  .comparison-table tbody {
    flex-wrap: wrap;
    border: none; }

  .comparison-table table tr {
    width: 100%;
    margin-bottom: 25px; }

  .comparison-table table td {
    height: initial;
    border-right: none; }

  .comparison-table table td:last-child {
    height: initial; }

  .page-template-about ol {
    padding: 0 15px; }

  .staff-list ul {
    flex-wrap: wrap; }

  .staff-list li {
    margin-bottom: 110px;
    width: 48%; }

  .entrance-top img {
    position: relative;
    display: block;
    margin: 25px auto 0 auto; }

  .price-table th {
    padding: 5px 0;
    width: 100%; }

  .questions {
    flex-wrap: wrap; }

  .questions > div {
    width: 100%; }

  .questions > div:last-child .divider {
    margin-top: 50px; }

  .trial-top > div {
    flex-wrap: wrap; }

  .trial-left .trial-monsters {
    position: relative; }

  .trial-left, .join-form {
    width: 100%; }

  .trial-flow {
    padding-left: 75px; }

  .school-list li {
    flex-wrap: wrap;
    padding-top: 90px;
    margin-top: -65px; }

  .school-list li .info {
    width: 100%; }

  .school-list li .map {
    width: 100%; }

  .footer-menu > img {
    display: none; }

  .footer-menu {
    flex-wrap: wrap;
    padding: 50px 15px 0 15px; }

  .footer-menu nav {
    width: 100%; }

  .footer-menu-logo {
    margin: auto;
    width: 185px; }

  .footer-menu ul {
    flex-direction: column;
    text-align: center; }

  .footer-menu ul li {
    padding: 15px; }

  .copyright {
    padding: 0 15px 45px 15px;
    text-align: center; }

  .footer-legal {
    display: block; }

  .copyright-divider {
    display: none; }

  footer {
    background: #759fc8;
    background: -moz-linear-gradient(-45deg, #759fc8 0%, #7c7afb 99%);
    background: -webkit-linear-gradient(-45deg, #759fc8 0%, #7c7afb 99%);
    background: linear-gradient(135deg, #759fc8 0%, #7c7afb 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#759fc8', endColorstr='#7c7afb',GradientType=1 ); }

  .topbar {
    padding: 7px 15px 2px 15px; }

  .topbar-left .icon {
    top: 2px !important; }

  .topbar-separator {
    margin: 0 4px; }

  .welcome .divider {
    margin-top: 50px; }

  .entrance-2 {
    bottom: 0;
    padding-bottom: 10%; }

  .study-cycle li {
    width: 49%; }

  .study-result {
    width: 80%; }

  .study-cycle li:nth-child(3), .study-cycle li:nth-child(4) {
    margin-top: 0; }

  .study-cycle li:nth-child(1)::after {
    top: 0; }

  .study-cycle li:nth-child(2)::after {
    right: 0; }

  .study-cycle li:nth-child(3)::after {
    left: 0; }

  .study-cycle li:nth-child(4)::after {
    bottom: 0; }

  /* カリキュラム */
  .curriculum-step .step-content {
    padding: 0 25px; }

  .curriculum-step li:nth-child(2) {
    margin-top: -15px; }

  .curriculum-step li:nth-child(3) {
    margin-top: -15px; }

  .curriculum-step li:nth-child(4) {
    margin-top: -15px; } }
@media screen and (max-width: 425px) {
  .welcome {
    margin-bottom: 50px; }

  .welcome .monster {
    top: initial;
    bottom: -155px; }

  .point li {
    width: 100%;
    align-items: center;
    padding: 0; }

  .point img {
    max-width: 10%;
    height: auto;
    margin-right: 17px; }

  .point h3 {
    text-align: left;
    width: 75%; }

  .photo.ryugaku {
    padding-bottom: 300px; }

  .photo.ryugaku img {
    position: absolute;
    bottom: -70%;
    margin: auto;
    left: calc(50% - 60px); }

  .top-curriculum .section-title {
    margin-top: 30px; }

  .top-contact {
    position: relative; }

  .monster-comic {
    background-image: url(/wp-content/themes/youcode/images/monsters/top-contact-3.png);
    top: -175px;
    left: -25px;
    position: absolute;
    margin: auto;
    width: 240px;
    padding: 45px 0; }

  .page-header {
    height: 200px; }

  .point.about li {
    padding: 10px; }

  .point.about h3 {
    display: inline-block;
    min-height: 55px; }

  .point.about img {
    right: calc(93% - 42px);
    top: 15px; }

  .point.about p {
    margin: 10px 0 0 0; }

  .staff-list li {
    width: 100%; }

  .staff-list li:last-child {
    margin-bottom: 0; }

  .about-trial {
    flex-wrap: wrap; }

  .about-trial > div {
    width: 100%; }

  .entrance .white-box div {
    width: 100%; }

  .trial-flow div {
    width: 60px;
    height: 60px;
    left: -75px;
    top: 0; }

  .trial-flow div span:first-child {
    top: 5px; }

  .trial-flow div span:last-child {
    top: -4px;
    position: relative; } }

/*single page*/

.single ol{
  padding: 0;
  list-style: none;
}
.single ol li{
  margin-bottom:5px;
  padding: 5px 0;
  border-bottom: 1px solid #759fc8;
}
.single ol li:first-child{
  border-top: 1px solid #759fc8;
}
.single ol li span{
  margin-right: 15px;
}


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