@charset "UTF-8";
@media screen and (max-width: 600px) {
  /* wrapper */
  #wrapper {
    min-width: 300px;
  }
  /* main */
  #main {
    height: auto;
    padding-bottom: 5em
  }
  #main #logo {
    position: static;
    width: 250px;
    margin: 4em auto 4.5em;
    animation: .4s fadeinlogo .4s forwards;
    -webkit-animation: .4s fadeinlogo .4s forwards;
    opacity: 0;
  }
  #main .fade {
    position: static;
    width: 80%;
    margin: 0 auto 3em;
    transform: none;
    animation: .9s fadeinslide .9s forwards;
    -webkit-animation: .9s fadeinslide .9s forwards;
  }
  #main .top_navi {
    display: none;
  }
  #main .copy {
    display: none;
    animation: .9s fadeinother .9s forwards;
    -webkit-animation: .9s fadeinother .9s forwards;
  }
  #main #top_sns {
    display: none;
  }
  #main .button_w {
    position: static;
    line-height: 1.8;
    width: 80%;
    margin: 0 auto;
  }
  #main .arrow:after {
    right: 12%;
  }
  /* top */
  #top #top_contents {
    padding: 3em 6% 4em;
  }
  #top #top_contents #top_gallery {
    width: 100%;
    float: none;
  }
  #top #top_contents #top_gallery h2 {
    margin-bottom: 0.5em;
  }
  #top #top_contents #top_gallery h2 span {
    display: none
  }
  #top #top_contents #top_gallery ul li {
    width: 47%;
  }
  #top #top_contents #top_event {
    width: 100%;
    float: none;
    margin-top: 2em;
  }
  #top #top_contents #top_event h2 {
    margin-bottom: 0.5em;
  }
  #top #top_contents #top_event h2 span {
    display: none
  }
  #top #top_contents #top_event .button_b {
    margin-top: 3em;
  }
  #top #top_contents #top_event ul li {
    padding: 1em 0 1em;
  }
  #top #top_contents #top_event ul li h3 {
    float: none;
  }
  #top #top_contents #top_event ul li p {
    display: none;
  }
  #top #top_list {
    padding: 2em 6% 2em;
  }
  #top #top_list ul {
    display: block;
  }
  #top #top_list li {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #1C4377;
    padding: 4em 10% 4em;
  }
  #top #top_list li:last-child {
    border-right: none;
    border-bottom: none;
  }
  #top #top_list h2 {
    margin-bottom: 1.5em;
  }
  #top #top_list h2 img {
    height: 3.5em;
  }
  #top #top_list h2 span {
    margin-top: 2em;
  }
  /* header */
  #header {
    position: relative;
    width: 100%;
    padding: 4em 5% 4em;
    border-bottom: 1px solid #1C4377;
  }
  #header #logo {
    width: 230px;
    margin: 0 auto;
  }
  /* 下層共通 */
  #contents .title_a {
    width: 90%;
    margin: 4em auto 3em;
    display: block;
    justify-content: space-between;
  }
  #contents .title_a h2 {
    padding-top: 0;
    margin-bottom: 2em;
  }
  #contents .title_a h2 img {
    height: 3.2em;
    width: auto;
  }
  #contents .title_a h2 span {
    margin-top: 2em;
  }
  #contents .title_a p {
    width: 90%;
    margin: 0 auto;
  }
  #contents .title_a p span {
    margin-top: 1.5em;
    border-bottom: 1px solid #1C4377;
    padding-bottom: 0.3em;
    display: inline-block;
  }
  #contents .title_b {
    width: auto;
    margin: 4em auto 3em;
  }
  #contents .title_b h2 {
    padding-top: 0;
  }
  #contents .title_b h2 img {
    height: 3em;
    width: auto;
  }
  #contents .title_b h2 span {
    margin-top: 2em;
  }
  #contents .photo_block {
    width: 95%;
    margin: 0 auto;
  }
  #contents .photo_block ul {
    display: block;
    justify-content: space-between;
  }
  #contents .photo_block li {
    width: 100%;
    margin-bottom: 1em;
  }
  .home #contents main {
    width: 100%;
    margin: 0 auto;
  }
  #contents .layer_title {
    margin-bottom: 1em;
  }
  #contents .layer_title span {
    display: block;
    margin-top: 0.3em;
  }
  #contents .gray_box {
    width: 93%;
    padding: 3em 7%;
  }
  /* about */
  #about {
    margin: 4em auto 4em;
  }
  #about #profile #left {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  #about #profile #left img {
    padding: 0;
  }
  #about #profile #left dl dt {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  #about #profile #right {
    display: block;
    width: 100%;
    margin-top: 3em;
  }
  #about #profile #right h3 {
    margin-bottom: 1em;
  }
  #about #profile #right ul {
    margin-bottom: 3em;
  }
  #about #profile #right ul li h5 {
    width: 15%;
    margin-right: 2%;
  }
  #about #profile #right ul li p {
    width: 80%;
  }
  #about #staff {
    width: 90%;
    margin: 4em auto 0;
  }
  #about #staff p {
    width: 80%;
    margin: 0 auto;
    text-align: justify;
  }
  #about #staff ul {
    margin-top: 2em;
  }
  #about #staff ul li {
    width: 50%;
    padding: 0 2%;
    vertical-align: top;
    margin-bottom: 5%;
  }
  #about #staff ul li figure img {
    margin-bottom: 0.3em;
    padding: 6%;
  }
  #about #staff ul li figure figcaption span {
    display: block;
    margin-top: 0.5em;
  }
  /* lesson */
  #lesson {
    margin: 4em auto 4em;
  }
  #lesson #class {
    width: 85%;
    margin: 5em auto 0;
  }
  #lesson #class p {
    margin-bottom: 3em;
    text-align: justify;
  }
  #lesson #class ul {
    display: block;
    margin-bottom: 3em;
  }
  #lesson #class ul li {
    width: 100%;
    border-right: none;
    border-bottom: 1px dashed #1C4377;
    padding: 0 5%;
    margin-bottom: 3em;
    padding-bottom: 3em;
  }
  #lesson #class ul li:last-child {
    border-right: none;
  }
  #lesson #class ul:nth-child(4) li:last-child {
    border-bottom: none;
  }
  #lesson #class ul:nth-child(3) li:first-child {
    border-top: 1px dashed #1C4377;
    padding-top: 3em;
  }
  #lesson #class ul li h2 {
    margin-bottom: 1em;
  }
  #lesson #class ul li h2 span {
    display: block;
    margin-bottom: 0.3em;
  }
  #lesson #class ul li h3 {
    margin-bottom: 2.5em;
  }
  #lesson #banner {
    width: 90%;
    margin: 3em auto 4em;
    border-radius: 20px;
    padding: 2em 8%;
  }
  #lesson #banner h2 {
    display: block;
    text-align: center;
    margin-right: 0;
  }
  #lesson #banner p {
    display: block;
    text-align: justify;
    width: 100%;
    margin-top: 1em;
  }
  /* join */
  #join {
    width: 100%;
    margin: 4em auto 4em;
  }
  #join #flow {
    width: 90%;
    padding: 7% 8% 8%;
  }
  #join #flow ul {
    display: block;
    justify-content: space-between;
  }
  #join #flow ul li {
    width: 100%;
    border-right: none;
    padding: 0;
    margin-bottom: 4em;
  }
  #join #flow ul li:last-child {
    border-right: none;
    margin-bottom: 0;
  }
  #join #flow ul li .number {
    margin-bottom: 1.5em;
  }
  #join #flow ul li .number span {
    border: 1px solid #1C4377;
    border-radius: 50px;
    padding: 0.5em 0.8em;
  }
  #join #flow ul li h2 {
    margin-bottom: 1em;
  }
  #join #flow ul li p {
    text-align: justify;
  }
  #join #trial {
    width: 85%;
    margin: 5em auto 0;
  }
  #join #trial .attention {
    width: 100%;
    margin: 1em auto 1em;
    text-align: justify;
  }
  #join #trial #form .data {
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }
  #join #trial #form .data dt {
    margin-bottom: 0.5em;
  }
  #join #trial #form .data dd {
    margin-bottom: 2em;
  }
  #join #trial #form .data input {
    width: 100%;
    line-height: 2.2em;
    border: 1px solid #1C4377;
    padding: 1%;
    font-size: 1em;
  }
  #join #trial #form .data select {
    width: 100%;
    height: 40px;
    line-height: 2.2em;
    border: 1px solid #1C4377;
    padding: 6px;
    font-size: 1em;
    background-color: #fff;
  }
  #join #trial #form .data textarea {
    width: 100%;
    line-height: 2.2em;
    border: 1px solid #1C4377;
    padding: 1%;
    font-size: 1em;
  }
  #join #trial #form .data .submit {
    text-align: center;
    width: 100%;
  }
  #join #trial #form .data .submit input {
    width: 100%;
    background-color: #1C4377;
    border-style: none;
    font-size: 100%;
    padding: 15px 25px;
    color: #FFF;
  }
  /* qa */
  #qa {
    margin: 4em auto 4em;
  }
  #qa #qa_list {
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #1C4377;
    text-align: left;
  }
  /* access */
  #access {
    width: 100%;
    margin: 4em auto 4em;
  }
  #access #jyusyo {
    width: 70%;
    margin: 0 auto;
    text-align: left;
  }
  #access #jyusyo dl {
    margin-bottom: 1em;
  }
  #access #jyusyo dl dt {
    margin-right: 0;
    width: auto;
    display: block;
  }
  #access #jyusyo dl dd {
    display: block;
    padding-left: 1em;
  }
  #access #map iframe {
    width: 85%;
    height: 30em;
    margin-top: 5em;
  }
  /* event */
  #event {
    width: 100%;
    margin: 4em auto 6em;
  }
  #event #current {
    width: 90%;
    margin: 0 auto 4em;
  }
  #event #past {
    width: 90%;
    margin: 0 auto;
  }
  #event h2 {
    margin-bottom: 1.5em;
  }
  #event ul li {
    padding: 1em 0 1em;
    text-align: left;
    border-top: 1px solid #1C4377;
  }
  #event ul li h3 {
    float: none;
  }
  #event ul li p {
    display: none;
  }
  /* members */
  #members {
    width: 100%;
    margin: 0 auto 6em;
    display: flow-root;
  }
  /* blog */
  #blog {
    width: 100%;
    margin: 0 auto 6em;
    display: flow-root;
  }
  /* category */
  .category {
    border-top: 1px solid #1C4377;
    border-bottom: 1px solid #1C4377;
    width: 85%;
    float: none;
    padding: 1.5em 0;
    margin: 3em auto 0;
  }
  .category h3 {
    margin-bottom: 1em;
  }
  .category ul {
    display: flex;
    flex-wrap: wrap;
  }
  .category ul li {
    width: 50%;
    margin-bottom: 1em;
  }
  /* article_block */
  .article_block {
    border-left: none;
    padding-left: 0;
    width: 93%;
    float: none;
    margin: 0 auto;
  }
  .article_block ul {
    display: flex;
    flex-wrap: wrap;
  }
  .article_block ul li {
    width: 50%;
    padding: 0 3%;
    margin-bottom: 6%;
  }
  .article_block ul li .thumb {
    margin-bottom: 1em;
    overflow: hidden;
  }
  .article_block ul li .date {
    margin-bottom: 0.5em;
  }
  /* single */
  #single {
    width: 100%;
    margin: 4em auto 3em;
  }
  #single .inner .entrybody {
    width: 90%;
    padding: 0 8%;
    margin: 0 auto 3em;
  }
  #single .pagenavi {
    width: 90%;
    margin: 0 auto;
  }
  /* footer */
  #footer {
    padding: 5em 10% 7em;
  }
  #footer footer {
    display: block;
  }
  #footer #ft_logo {
    width: 200px;
    margin: 0 auto;
    padding-top: 0;
    margin-bottom: 2.5em;
  }
  #footer nav ul {
    display: none;
  }
  #footer #ft_caption {
    margin: 2em auto 2em;
    text-align: center;
  }
  #footer #ft_sns {
    text-align: center;
  }
  #footer #ft_sns li {
    display: inline-block;
    margin-left: 0;
    margin-right: 1em;
  }
  #footer #ft_sns li:last-child {
    margin-right: 0;
  }
}