@charset "UTF-8";

/*
theme Name: iris
Author: igarashi
Description: original theme
version： 1.0.0
*/

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

h1, h2, h3, h4, h5, h6,
p, ol, ul, dl {
  margin-top: 0;
}

img {
  max-width: 100%;
}

ul, li {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

html {
  font-size: 62.5%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-feature-settings : "palt";
}

body {
  line-height: 1.7;
  margin: 0;
  padding: 0;
  color: #333;
}

@media(max-width: 1000px) {
  html {
    font-size: 50%;
  }
}


/* レイアウト用クラス */

.cf:after {
  content: "";
  display: block;
  clear: both;
}

.fl {
  float: left;
}

.fwb {
  font-weight: bold;
}

.text-center {
  text-align: center !important;
}

.pc-block {
  display: block !important;
}

.sp-block {
  display: none !important;
}

@media(max-width: 1000px) {
  .pc-block {
    display: none !important;
  }

  .sp-block {
    display: block !important;
  }
}

/* リンク */

.cover-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-indent: 100%; /*テキスト非表示*/
  white-space: nowrap; /*テキスト非表示*/
  overflow: hidden; /*テキスト非表示*/
}

.link-btn {
  text-align: center;
  margin-top: 50px;
}

.link-btn-inner {
  position: relative;
  display: inline-block;
  padding: 10px 45px 10px 50px;
  border: 2px solid #333;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.link-btn-inner:hover {
  background: #333;
  -webkit-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.link-btn-inner:hover span,
.link-btn-inner:hover i {
  color: #fff;
  -webkit-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.link-btn-inner span {
  font-size: 2rem;
  font-weight: bold;
}

.link-btn-inner i {
  font-size: 2rem;
  margin-left: 15px;
}

.view-all {
  text-align: center;
  position: relative;
}

footer .link-btn-inner:hover {
  background: #0288D1;
  border: 2px solid #0288D1;
}

/* wrapper */

.wrapper {
  width: 100%;
}

.default-wrapper {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto 60px;
}

/* スライダー */

.key-visual {
  width: 100%;
  height: calc( 100vh - 80px );
}

.key-visual img {
  height: calc( 100vh - 80px );
  width: 100vw;
}

.catchcopy span {
  font-size: 3.5rem;
  font-weight: bold;
  position: absolute;
  z-index: 100;
  top: calc(50% - 80px);
  right: 20%;
  letter-spacing: 0.2rem;
}

@media(max-width: 1000px) {
  .key-visual {
    width: 100%;
    height: calc( 100vh - 120px ) !important;
    height: 100vh;
  }

  .key-visual img {
    height: calc( 100vh - 120px );
    object-fit: cover;
  }

  .catchcopy span {
    font-size: 2rem;
    right: 8%;
    top: calc(50% - 60px);
  }
}

/* ヘッダー */

header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.6);
  position: absolute;
  z-index: 10000;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.site-logo {
  height: 80px;
  float: left;
  position: relative;
  margin-left: 10px;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.site-logo img {
  height: 80px;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.header-nav {
  float: right;
  padding: 28.5px 0;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.header-nav li {
  float: left;
  margin: 0 20px;
}

@media(max-width: 1280px) {

	.site-logo {
	    margin-left: 0;
	}
	.header-nav ul {
		padding: 0;
	}
	.header-nav li {
	  float: left;
	  margin: 0 8px;
	}

	.header-nav li:first-child {
	    margin-left: 0;
	}

	.header-nav li:last-child {
	    margin-right: 10px;
	}

}
.header-nav a {
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
}

.header-nav a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 10px;
  height: 2px;
  background-color: #000;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  opacity: 0;
  pointer-events: none;
}

.header-nav a:hover:after {
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  opacity: 1;
}

@media(max-width: 1000px) {
  .site-logo {
    margin-left: 0;
  }
}

/* ヘッダー固定後 */
header.fixed {
  position: fixed;
  top: 0;
}

header.fixed {
  height: 60px;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

header.fixed .site-logo,
header.fixed .site-logo img {
  height: 60px;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

header.fixed .header-nav {
  padding: 18.5px 0;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

header.fixed .header-nav a:after {
  bottom: -6px;
}

/* スマホ用メニュー */

#siteHeaderSp {
  display: none;
}

.sp-nav-wrap,
.sp-nav-button {
  display: none;
}

@media(max-width: 1000px) {
  #siteHeaderSp {
    display: block;
    position: fixed;
    top: 0;
    height: 60px;
  }

  #siteHeader,
  #commmonHeader {
    display: none;
  }

  #siteHeaderSp .site-logo,
  #siteHeaderSp .site-logo img {
    height: 60px;
  }

  .header-nav {
    display: none;
  }

  .sp-nav-wrap,
  .sp-nav-button {
    display: block;
  }

  .sp-nav-button-wrapper {
    float: right;
    background-color: #03A9F4;
    width: 60px;
    height: 60px;
    padding: 15px;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
  }

  .sp-nav-button-wrapper.active {
    z-index: 100000;
    position: relative;
    right: 0;
  }

  .sp-nav-button-wrapper i {
    font-size: 4rem;
    color: #fff;
    position: relative;
    left: 2px;
  }

  .sp-nav-button-wrapper .fa-times {
    left: 5px;
  }

  #siteHeaderSp .open {
    display: block !important;
  }

  #siteHeaderSp .close {
    display: none !important;
  }

  .sp-nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 99999;
    background-color: rgba(179, 229, 229, 0.9);
    width: 100%;
    height: 100%;
  }

  .sp-nav-wrap ul {
    margin-top: 60px;
    padding: 0;
    text-align: center;
  }

  .sp-nav-wrap ul li {
    padding: 15px 0;
    border-bottom: 1px solid #333;
    overflow: hidden;
  }

  .sp-nav-wrap ul li:last-child{
    border-bottom: none;
  }

  .sp-nav-wrap ul li a {
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    width: 100vw;
  }

}

/* コンテンツ */
.contents {
  position: relative;
}

.contents h2 {
  padding-top: 80px;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.2rem;
}

/* ごあいさつ */
#concept {
  height: auto;
  padding-bottom: 80px;
  margin-top: 80px;
}
#concept:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(images/contents-bg01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
}
#concept p {
  font-size: 1.4rem;
  max-width: 400px;
  margin: 0 auto;
  letter-spacing: 0.08rem;
}

@media(max-width: 1000px) {
  #concept {
    margin-top: 0;
  }

  #concept p {
    width: 90%;
  }

}

/* コース一覧 */
#course {
  height: auto;
  /* padding-bottom: 80px; */
}

.course-wrapper {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto 20px;
}

.course-box {
  width: 340px;
  margin: 0 10px;
  float: left;
}

#course .link-btn {
  margin-top: 10px;
}

#course .link-btn-inner {
  padding: 10px 93px 10px 99px;
}

#course h2 {
  font-size:3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 80px auto 40px;
}

@media(max-width: 1000px) {
  .course-box {
    width: 100%;
    margin: 0 0 30px 0;
    float: none;
  }

  .course-wrapper .course-box:nth-child(3) {
    margin: 0;
  }
}

/* 採用 */
#recruit {
  height: auto;
  padding-bottom: 80px;
}

#recruit:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(images/contents-bg02.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
}

#recruit p{
  font-size: 1.4em;
  max-width: 620px;
  margin: 0 auto;
  letter-spacing: 0.08rem;
}

@media(max-width: 1000px) {
  #recruit p{
    width: 90%;
  }
}

/* お知らせ */
#blog {
  padding-bottom: 80px;
}

#blog h2 {
  font-size:3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 80px auto 40px;
}

.blog-wrapper {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto 40px;
}

.blog-box {
  width: 250px;
  margin: 0 10px;
  float: left;
  position: relative;
  z-index: 100;
}

.blog-category {
  color: #03A9F4;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0;
}

#blog h3 {
  font-weight: bold;
  font-size: 1.8rem;
}

.detail-text {
  position: relative;
}

.detail-text span {
  font-size: 1.2em;
}

.detail-text span:nth-child(2) {
  position:absolute;
  right: 0;
}

.blog-img img {
  width: 250px;
  height: auto;
}
.date .blog-img img {
  /*width: 250px;*/
  max-width: 250px;
  height: auto;
}
/*
#blogPage .blog-img img {
  width: 359px !important;
  height: 239px !important;
}
*/
@media(max-width: 1000px) {
  .blog-box {
    width: 100%;
    margin: 0 0 30px 0;
  }

  .blog-img img,
  #blogPage .blog-img img {
    max-width: 640px !important;
    width: 100% !important;
    height: auto !important;
  }

  .blog-wrapper .blog-box:last-child {
    margin: 0;
  }
}

/* ページTOPに戻る */
#pageTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
}

#pageTop a {
    display: block;
    z-index: 10000;
    padding: 8px 8px 4px;
    border-radius: 1px;
    width: 41px;
    height: 38px;
    background-color: #00BCD4;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

#pageTop i {
  font-size: 2.2rem;
}

@media(max-width: 1000px) {
  #pageTop {
    display: none !important;
  }
}

nav.footer-nav ul {
	padding: 0;
}

/* フッター */
footer {
  background-color: #BDBDBD;
  padding: 30px 0;
}

.footer-nav {
  width: 860px;
  margin: 20px auto 60px;
}

.footer-nav li {
  float: left;
  margin: 0 20px;
}

.footer-nav li a {
  font-size: 1.4rem;
  font-weight: bold;
}

.copyright {
  text-align:center;
  font-size: 1.2em;
  margin-top: 60px;
}
@media(max-width: 1280px) {

	.footer-nav {
	  width: 840px;
	}

	.footer-nav li {
        margin: 5px 9px 0;
	}
	.footer-nav li:first-child {
	    margin: 5px 9px 0 0;
	}
	.footer-nav li:last-child {
	    margin: 5px 0 0 9px;
	}

}
@media(max-width: 1000px) {
  .footer-nav {
    width: 90%;
    margin: 0 auto 20px;
  }

  .footer-nav ul {
    padding: 0;
  }

  .footer-nav li {
    width: 100%;
    margin: 0 0 10px!important;
  }

  .footer-nav li a {
    text-decoration: underline;
  }

  .copyright {
    margin-top: 0;
  }
}

/* お知らせページ */
#blogPage {
  min-height: 70vh;
}

#blogPage h2 {
  font-size: 3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 120px auto 40px;
}

#blogPage h3 {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

#blogPage h4 {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
}

#blogPage .blog-head-wrapper h3 {
  font-size: 2.4rem;
  font-weight: 500;
  float: left;
  width: calc( 100% - 120px );
  letter-spacing: 0.15rem;
  padding-left: 15px;
  margin-bottom: 0 !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#blogPage .blog-head-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 30px;
}

.blog-head-wrapper .blog-date {
  background-color: #333;
  padding: 10px 30px;
  float: left;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.blog-head-wrapper .blog-date span {
  color: #FFF;
  letter-spacing: 0.1rem;
}

.date .blog-head-wrapper .blog-date span:nth-child(1) {
  margin-right: 10px;
  font-size: 1.3rem;
}

.date .blog-head-wrapper .blog-date span:nth-child(2) {
  font-weight: bold;
  font-size: 2rem;
  margin-right: 0px;
  margin-left: 0px;
}
.date .blog-head-wrapper .blog-date {
    flex-wrap: nowrap;
}
.blog-content {
  margin-bottom: 30px;
}

.blog-content .blog-img {
  float: left;
}

.blog-content-text {
  float: left;
  width: calc( 100% - 359px );
  padding-left: 30px;
}

.blog-inner {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}

.blog-main {
  width: calc( 100% - 300px );
  float: left;
}

.blog-main .blog-wrapper {
  width: 100%;
  margin: 0;
}

#blogPage .blog-box {
  width: 46%;
  margin: 0 2% 30px;
  float: left;
}

#blogPage .content {
  font-size: 1.6rem;
}

#blogPage .content p {
  margin-bottom: 0;
}

.blog-attachment {
  background: #333;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  width: 60px;
  padding: 3px 0;
  position: absolute;
  top: 0;
}

.blog-attachment span {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
}

.blog-pager {
  border-top: 1px solid #333;
  padding-top: 10px;
  margin-bottom: 80px;
  text-align: right;
  position:relative;
}

.blog-pager a {
  margin-right: 20px;
  font-size: 1.4rem;
  padding: 2px;
  border-bottom: solid 2px #333;
}

.blog-pager span {
  margin-right: 10px;
}

.blog-pager a .fa-angle-right {
  font-size: 1.4rem;
  margin-left: 10px;
}

.blog-pager a .fa-angle-left {
  font-size: 1.4rem;
  margin-right: 10px;
}

.blog-pager .prev {
  float: left;
}

.blog-pager .back-link {
  float: left;
}

.blog-pager .next {
  float: right;
}

.blog-sidebar {
  float: left;
  width: 260px;
  margin-left: 40px;
}

.blog-sidebar ul {
  padding: 0;
}

.blog-sidebar li {
  font-size: 1.4rem;
  margin-bottom: 5px;
}

.blog-sidebar .slide-parent {
  position: relative;
}

.blog-sidebar .slide-parent:after {
  content: ">";
  font-size: 1.4rem;
  color: #333;
  position: absolute;
  left: 60px;
  top: -1px;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

.blog-sidebar .slide-parent:hover {
  cursor: pointer;
  opacity: 0.8;
}

.blog-sidebar .slide-parent.open:after {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

.blog-sidebar-category {
  margin-bottom: 30px;
}

.slide-child {
  display: none;
  margin: 5px 0 0 10px;
}

@media(max-width: 1000px) {
  .blog-main {
    width: 100%;
    float: none;
  }

  #blogPage .blog-box {
    width: 100%;
    margin: 0 0 30px;
    float: none;
  }

  #blogPage .blog-head-wrapper {
    margin-bottom: 10px;
  }

  .blog-head-wrapper .blog-date {
    padding: 10px;
  }

  .blog-content .blog-img {
    float: none;
  }

  .blog-content-text {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
  }

  /* .blog-attachment span:nth-child(1) {
    width: 23px;
  } */

  .blog-pager {
    margin-bottom: 50px;
  }

  .blog-sidebar {
    float: none;
    width: 100%;
    margin-left: 0;
  }

}

/* 講師採用ページ */

#recruitPage h2 {
  font-size: 3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 120px auto 40px;
}

#recruitPage h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 10px;
  letter-spacing: 0.1rem;
}

#recruitPage p {
  font-size: 1.4rem;
}

.intro-left {
  float: left;
  width: calc( 60% - 40px );
  max-width: 648px;
  margin-right: 40px;
}

.intro-right {
  float: left;
  width: 40%;
  max-width: 432px;
}

.recruit-table {
  /*margin-top: 50px;*/
  border: 1px solid #333;
}
#recruitPage .h3_wrap h3{
   border-left: 6px solid #00bcd4;
   padding-left: 10px;
   margin-top: 50px;
}
.recruit-table-tr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ababab;
}

.recruit-table-td:first-child {
  width: 250px;
  float: left;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  background-color: #B3E5FC;
  padding: 24px 0 24px 40px;
  border-right: 1px solid #ababab;
  font-weight: bold;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.recruit-table-td {
  width: calc(100% - 300px);
  float: left;
  padding: 24px 40px 24px 40px;
  font-size: 1.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.recruit-table-td,.recruit-table-td:first-child {
    padding: 10px 20px;

}
@media(max-width: 1000px) {
  .intro-left {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .intro-right {
    float: none;
    width: 100%;
    max-width: 100%;
  }

  .recruit-table-tr {
    display: block;
    border-bottom: 1px none;
  }

  .recruit-table-td:first-child {
    width: 100%;
    float: none;
    border-right: none;
    border-bottom: 1px solid #ababab;
    padding: 15px 20px 15px 20px;
  }

  .recruit-table-td {
    width: 100%;
    float: none;
    border-bottom: 1px solid #ababab;
    padding: 15px 20px 15px 20px;
  }

}

/* 講師一覧ページ */

#teacherPage h2 {
  font-size: 3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 120px auto 40px;
}

#teacherPage h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 30px;
  letter-spacing: 0.1rem;
}

#teacherPage p {
  font-size: 1.4rem;
}

.teacher-box {
  margin-top: 50px;
}

.teacher-left {
  width: calc( 40% - 40px );
  margin-right: 40px;
  max-width: 432px;
  float: left;
}

.teacher-right {
  width: 60%;
  max-width: 648px;
  float: left;
}

#teacherPage .teacher-left p {
  margin-top: 30px;
  font-size: 1.6rem;
}

@media(max-width: 1000px) {
  #teacherPage h3 {
    margin-top: 10px;
    margin-bottom: 5px !important;
  }

  .teacher-left {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    float: none;
  }

  .teacher-left img {
    width: 100% !important;
    max-width: 640px !important;
    height: auto !important;
  }

  .teacher-right {
    width: 100%;
    max-width: 100%;
    float: none;
  }
}

/* 講習一覧ページ */
#coursePage h2 {
  font-size: 3.2rem;
  position: relative;
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
  display: block;
  width: 200px;
  padding-top: 0 !important;
  margin: 120px auto 40px;
}

#coursePage h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 30px;
  letter-spacing: 0.1rem;
}

#coursePage p {
  font-size: 1.4rem;
}

.course-point-box {
  margin-top: 50px;
}

.course-point-left,
.course-point-right {
  float: left;
  width: calc( 50% - 40px );
  margin: 0 20px;
}

.course-point-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding-left: 20px;
}

.course-point-head:before {
  position: absolute;
  content: '';
  bottom: 20px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px #B3E5FC;
}

.course-point-head:after {
  position: absolute;
  content: '';
  bottom: 20px;
  left: 10px;
  width: 100%;
  border-bottom: solid 2px #B3E5FC;
}

.course-point-head span,
.course-point-head h4 {
  float: left;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.course-point-head span {
  font-size: 5rem;
  font-weight: bold;
  padding: 5px;
  margin-right: 10px;
}

.course-point-head h4 {
  font-size: 2.4rem;
  margin-bottom: 0;
  font-weight: 500;
  letter-spacing: 0.08rem;
}

.course-point-img {
  margin-bottom: 30px;
}

.course-title {
  margin-top: 50px;
  width: 300px;
  text-align: center;
  margin: 50px auto 0;
}

.course-title span {
  font-size: 2.4rem;
  letter-spacing: 0.15rem;
}

.course-title span:nth-child(1) {
  font-weight: bold;
  margin-right: 30px;
  position: relative;
}

.course-title span:nth-child(1):after {
  content: "|";
  font-size: 2rem;
  color: #333;
  position: absolute;
  right: -21px;
  top: -1px;
}

.course-title span:nth-child(2) {
  font-weight: 500;
}

.course-post-wrapper {
  margin-top: 30px;
}

.course-post-box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  float: left;
  margin-right: 15px;
  margin-bottom: 30px;
  padding: 25px 25px 10px;
  width: calc((100% - 45px) / 3);
  min-height: 187px;
  background-color: #EEE;
  min-height: 100%;
}

.course-post-box:after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: -8px;
  left: 8px;
  right: -8px;
  background-color: #0288D1;
  z-index: -1;
}

.course-post-title {
  width: 100%;
  text-align: center;
}

.course-post-title p {
  font-size: 2rem !important;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

@media(max-width: 1000px) {
  .course-point-left, .course-point-right {
    float: none;
    width: 100%;
    margin: 0;
  }

  .course-point-head:before {
    bottom: 15px;
  }

  .course-point-head:after {
    bottom: 15px;
  }

  .course-post-box {
    display: block;
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

/* アクセスマップ */
#mapPage {
    padding-bottom: 80px;
}
.map-inner, .contact-inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}
.map-main, .contact-main {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 20px;
}
.map-main .map-wrapper {
    width: 100%;
    margin: 0;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 30px;
    border-top: 1px solid #000;
    margin-top: 50px;
}
#mapPage h2, #contactPage h2 {
    font-size: 3.2rem;
    position: relative;
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
    display: block;
    width: 7em;
    padding-top: 0 !important;
    margin: 120px auto 40px;
}

#mapPage p {
    font-size: 2.4rem;
    margin: 0 auto;
    letter-spacing: 0.08rem;
}
#mapPage .text-lg {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
.map-text {
    text-align: left;
    display: inline-block;
}
.map-wrapper .map-info {
    float: left;
    text-align: left;
}
#mapPage .map-info p {
    font-size: 1.4rem;
}
#mapPage .map-info p.text-lg {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1rem;
}
iframe {
    max-width: 100%;
    max-height: calc((100vw / 10) * 6);
}
.map-box {
    max-width: calc(100% - 300px);
    float: right;
}
.mt1rem {
    margin-top: 1rem!important;
}
.mapPage_logo {
    position: relative;
    left: -30px;
}


/*追記*/
.blog-img {
    overflow: hidden;
    display: block;
    transition: background-color 0.3s linear;
}
.blog-box {
}
.blog-box:hover {
}
.blog-box img {
    display: block;
    transition: transform 0.3s linear;
    height: auto;
}

.wrapper.cf {
    overflow: hidden;
}
#course .link-btn-inner {
    padding: 10px 0;
    width: 100%;
}
.course-box {
    max-width: 340px;
    width: calc((100% / 3) - 20px);
}
.blog-wrapper {
    display: flex;
}
.blog-box:hover .blog-img {
    background-color: #000;
}
.blog-box:hover img {
    transform: scale(1.02);
    opacity: 0.9;
}
.blog-box:hover h3{
    text-decoration: underline;
}
.blog-box h3 {
    word-break: break-all;
}
.blog-box .cover-link {
    z-index: 9999;
}
.category-blog-wrapper .blog-box:hover .detail-text, .category-blog-wrapper .blog-box:hover p.more_text {
    text-decoration: underline;
}
.category-blog-wrapper .blog-box p:not(.more_text) {
    z-index: 9999;
    position: relative;
}
#teacherPage img {
    height: auto;
}
.blog-pager span {
    margin-right: 10px;
    font-size: 1.4rem;
    margin-right: 20px;
    font-size: 1.4rem;
    padding: 2px;
    height: 25px;
    bottom: 0;
    font-weight: bold;
}
.blog-pager a {
    height: 25px;
    bottom: 0;
    display: inline-block;
}

.blog-pager a:hover {
    border-bottom: solid 2px #aaa;
}
/*
#blogPage .blog-img img {
    height: auto !important;
}
*/
.blog-pager a:hover i {
    color: #aaa;
}
.home #blog h3 {
    margin-bottom: 0;
}
header {
    z-index: 10001;
}
#pageTop {
    z-index: 10001;
}
#blogPage {
    min-height: calc(100vh - 283px);
}
.teacher-box {
    margin-top: 80px;
}
#mapPage h2, #contactPage h2 {
    width: 240px;
}
.link-btn-inner i {
    margin-left: 7px;
}
div#priceCampaign {
    background-color: #ddfbff!important;
}
.price-box-wrap1 .price-box {
    box-shadow: 6px 6px #00bcd4!important;
}
#course_s, #course_c, #course_k{
    padding-top: 80px;
}
.course_time, .course_box{
    margin-top: 80px !important;
 }
 .price_course_wrap.course_time {
    margin: 30px 0 80px!important;
}
.price_course_wrap {
    margin: 0px 0 -30px;
    padding-top: 0px;
}
.price-text {
    margin-bottom: -30px;
}
#pricePage .course_time ul {
    padding: 0;
    font-size: 1.4rem;
    margin-top: 10px;
}
#pricePage .course_time li {
    margin-top: 10px;
}
.blog-main .blog-wrapper {
    flex-wrap: wrap;
    display: flex;
}
.date .blog-content {
    width: 100%;
}
.date #blogPage h2 {
    width: 380px;
}
.date #blogPage .blog-head-wrapper {
    width: 100%;
}
.mw_wp_form .error {
    color: red!important;
    font-weight: bold;
}
.footer-nav li {
    margin: 0 15px;
}
.slick-dots {
    bottom: 20px;
    z-index: 99999999;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
div.ptp-item-container {
    border: #c9c9c9 solid 1px!important;
}
.ptp-cta {
    display: none;
}
div.ptp-plan {
    background-color: #5dd2e0!important;
}
div.ptp-price {
    font-size: 2em!important;
    font-weight: bold!important;
}
div.ptp-plan {
    font-size: 1.5em!important;
}
div.ptp-bullet-item {
    font-size: 1.2em!important;
    font-weight: bold!important;
}
div.ptp-bullet-item {
    border-bottom: solid 1px #c9c9c9!important;
}
.ptp-item-container div:nth-last-of-type(2) {
    border-bottom: none!important;
}
.ptp-pricing-table {
    margin: 0 4%!important;
    display: flex;
}
/* .ptp-col {
    width: 23%!important;
} */
div.ptp-bullet-item {
    background-color: #e9e9e9!important;
}
div.ptp-price {
    background-color: #fff!important;
}
.course_text {
    text-align: left;
    margin: 30px 4%;
    padding: 30px;
    border: 1px solid #000;
    background-color: white;
}
#pricePage .course_text p {
    font-size: 1.4rem;
}

p.blog-category {
    position: relative;
    padding-left: 8px;
    margin-top: 3px;
}
p.blog-category:before {
    content: "";
    height: calc(100% - 4px);
    width: 3px;
    position: absolute;
    background-color: #ff8080;
    top: 2px;
    left: 0px;
}
.category-blog p.blog-category:before {
    background-color: #ff8080;
}
.category-news p.blog-category:before {
    background-color: #eac82c;
}
.category-no-category p.blog-category:before {
    background-color: #2cafea;
}
.category-blog #blogPage h2 {
    width: 280px;
}
.category-news #blogPage h2 {
    width: 90%;
    max-width: 580px;
}
.category-no-category #blogPage h2 {
    width: 200px;

}
.category-news-high-school-students #blogPage h2 {
    width: 90%;
    max-width: 350px;
}
.category-way-of-home-study-ele #blogPage h2 {
    width: 90%;
    max-width: 400px;
}

.category-blog-wrapper {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 80px;
    background-color: #f4f4f4;
    padding: 20px 20px 40px;
    border: 2px solid #333;
}
.category-blog-wrapper .blog-wrapper {
    width: 100%;
    margin-bottom: 0;
}
.category-blog-wrapper > h3 {
    text-align: center;
    margin: 15px auto 35px!important;
    font-size: 2rem!important;
    border-bottom: 1px solid #000;
    width: 170px;
    display: block;
}
.category-blog-wrapper .detail-text {
    position: relative;
    margin-bottom: 10px;
}
.home #blog .category-blog-wrapper h3 {
    margin-top: 5px;
}
.recruit_off {
    padding: 20px;
    border: 2px solid #333;
    margin-top: 30px;
}
.recruit_off p {
   font-size: 1.7rem!important;
   margin-bottom: 0;
}
div#recruitPage {
    min-height: calc(100vh - 343px);
}
* {
    word-break: break-all;
}
.blog .blog-attachment span:first-child {
    font-size: 1rem;
}
.archive.category .blog-attachment span:first-child {
    font-size: 1rem;
}
.blog-date span {
    word-break: keep-all;
}
.blog-head-wrapper .blog-date span:nth-child(3) {
    font-weight: bold;
    font-size: 2rem;
    width: 50%;
    text-align: center;
}
.blog-head-wrapper .blog-date span:nth-child(2) {
    font-size: 1.3rem;
    width: 50%;
    text-align: center;
}
.blog-head-wrapper .blog-date span:nth-child(1) {
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-right: 0px;
}
.blog-head-wrapper .blog-date {
    flex-wrap: wrap;
    padding: 10px 30px 5px;
}
.top_blog p {
    font-size: 1.4rem;
}
.category-blog-wrapper.top_blog .blog-box {
    width: 50%;
}
.blog-box img {
    width: 100%;
}
.wrap-slideCp img {
    width: auto;
    height: auto;
    display: block;
    max-width: calc(100vw - 50px);
    max-height: calc(100vh - 150px);
    margin-bottom: 30px;
}
.wrap-slideCp {
    height: calc( 100vh - 80px );
    position: relative;
    background-size: 100vw calc( 100vh - 80px );
    display: flex;
    justify-content: center;
    align-items: center;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.date .blog-content:last-child {
    border-bottom: none;
    padding-bottom: 20px;
}
.date .blog-content {
    border-bottom: 1px solid #000;
    padding-bottom: 40px;
}
#blogPage .blog-head-wrapper {
    margin-bottom: 20px;
    width: 100%;
}
#blogPage h2 {
    margin: 120px auto 80px;
}
.price-box-wrap.price-box-wrap1.cf p {
    text-align: left;
}

.recruit-table-tr:last-child {
    border-bottom: none;
}
.page-template-soon .contents {
    min-height: calc(100vh - 163px);
}
.page-template-soon h2 {
    text-align: center;
    font-size: 3.2rem;
    position: relative;
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
    display: inline-block;
    padding-top: 0 !important;
    margin: 120px auto 40px;
}
.soon_h2_wrap {
    text-align: center;
}
.soon-inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 50px;
    background-color: #f1f1f1;
}
div#soonPage p {
    font-size: 1.8rem;
    text-align: center;
}
div#contactPage {
    min-height: calc(100vh - 283px);
}
#contactPage td.contact_type_wrap span {
    width: 170px;
    margin-left: 0!important;
}
.ssl_text {
    padding: 20px 40px;
    margin-bottom: 20px;
    background-color: white;
    position: relative;
    bottom: 10px;
}
.ssl_text h4 {
    font-size: 1.6rem;
    font-weight: normal;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}
.ssl_text h4::before {
    position: absolute;
    width: 4px;
    height: 16px;
    background-color: #00bcd4;
    content: "";
    top: 5px;
    left: 0px;
}
.ssl_text p {
    text-align: left;
    font-size: 1.4rem!important;
}
.single .blog-wrapper.cf {
    display: block;
}
.name_wrap {
    display: flex;
}
.name_wrap span{
    padding: 10px;
}
.name_wrap > div > div  {
    display: flex;
}
.registration_wrap td:first-child {
    width: 30%;
}
.registration_wrap .name_wrap input {
    width: calc(100% - (1em + 20px)) !important;
}
#message {
    font-size: 1.7rem;
}
.swpm-registration-success-msg .login_link_wrap {
    margin-top: 60px;
}
.swpm-registration-success-msg .login_link_wrap a {
    font-size: 1.5rem;
    text-decoration: underline;
}
.swpm-registration-success-msg .login_link_wrap a:hover {
    opacity: .6;
}
#message.error, .error {
    color: red;
}
#message.error {
    color: red;
    border: 2px solid red;
    margin-top: 15px;
    padding: 10px;
    text-align: left;
}
#message.error li {
    list-style: disc;
}
#message.error ul {
    margin: 0;
}
.m_password-reset a {
    text-decoration: underline;
}
.m_password-reset a:hover {
    opacity: .6;
}
.logout_link_wrap,#forgot_pass {
    text-decoration: underline;
    font-size: 1.4rem;
}
.logout_link_wrap a:hover,#forgot_pass:hover {
    opacity: .6;
}
.login_user_box {
    font-size: 1.6rem;
    background-color: #fff;
    padding: 20px;
    margin: 20px 0;
}
.login_user_wrap {
    display: inline-block;
    border-left: 4px solid #1c448a;
    line-height: 1.1;
    padding-left: 5px;
    margin-right: 22px;
    float: left;
}
.login_user_box div {
    text-align: left;
}
.login_name_wrap {
    float: right;
    line-height: 1.1;
}
.f12rem {
    font-size: 1.2rem!important;
}
.member_record_inner {
    display: flex;
    margin-bottom: 10px;
}
.member_record_wrap input {
    width: 100px !important;
}
.member_record_inner div:first-child {
    padding: 10px 10px 10px 0;
    width: 100px;
}
.mw_wp_form_preview p.f12rem  {
    display: none;
}
.swpm-registration-widget-form td {
    min-width: 200px!important;
}
.swpm-login-form-inner div:nth-child(1), .swpm-login-form-inner div:nth-child(3){
    width: 200px!important;
    font-size: 1.6rem;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    line-height: 1.2;
}
.swpm-login-form-inner div:nth-child(2), .swpm-login-form-inner div:nth-child(4){
    width: calc(100% - 220px);
    display: inline-block;
}
.swpm-login-submit input{
    width: 80%!important;
    margin-top: 20px;
    margin-bottom: 5px;
}
.swpm-remember-me {
    margin-top: 10px;
}
.swpm-login-widget-action-msg {
    color: red;
    font-size: 1.5rem;
}
label.swpm_label.swpm-pw-reset-email-label {
    font-size: 1.8rem;
}
.mw_wp_form_confirm .member_record_wrap > div > div:nth-child(2) {
    padding: 10px;
}
.mw_wp_form_confirm .member_record_wrap > div > div:nth-child(2)::before {
    content: ":　";
}
#mw_wp_form_mw-wp-form-618.mw_wp_form_confirm th,#mw_wp_form_mw-wp-form-266.mw_wp_form_confirm th{
    padding-top: 20px;
}
.mw_wp_form_confirm .member_record_inner {
    margin-bottom: 0px;
}
.mw_wp_form_confirm .member_record_inner div:first-child {
    padding: 0;
}
.mw_wp_form_confirm .member_record_wrap > div > div:nth-child(2) {
    padding: 0;
}
.mw_wp_form_confirm
.file_td > div {
    margin-bottom: 15px;
}
.mw-wp-form_file a {
    text-decoration: underline;
}
.mw-wp-form_file::before {
    font-family: "Font Awesome 5 Free";
    content: "\f15b";
    position: absolute;
    left: 0px;
}
.mw-wp-form_file {
    padding-left: 15px;
    position: relative;
}
.select_wrap .error {
    position: absolute;
}
.swpm-login-widget-form {
    padding-bottom: 20px;
}
.login_user_box div.login_name_wrap {
    text-align: right;
}
.footer-nav li a {
    font-size: 1.3rem;
}
.footer-nav li {
    margin: 5px 10px 0;
}
.map_image_wrap img {
    width: calc(50% - 20px);
    height: 100%;
    display: block;
    margin: 10px;
}
.map_image_wrap {
    padding-top: 0!important;
    flex-wrap: wrap!important;
}
/*
.course-spot {
    width: calc(100% - 15px);
    padding: 25px 50px 10px;
}
*/
.category-other p.blog-category:before {
    background-color: #989898;
}
.category-course-guide p.blog-category:before {
    background-color: #ff9e3b;
}
.spot_link {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
}
.course-spot i {
    margin-left: 5px;
}
.course-spot .course-post-text {
    width: 100%;
    text-align: center;
}
.course-spot {
    transition: background-color 0.3s linear;
}
.course-spot:hover {
    background-color: #daeffa;
}
.course-spot:after {
    transition: background-color 0.3s linear;
}
.course-spot:hover:after {
    background-color: #222;
    transition: background-color 0.3s linear;
}
.spot-course_underline {
    display: inline-block;
    position: relative;
}
.course-spot:hover .spot-course_underline::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #222;
    display: block;
    position: absolute;
    bottom: 15px;
}
#spotCoursePage h2 {
    font-size: 3.2rem;
    position: relative;
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #B3E5FC 0%) repeat scroll 0 0;
    display: block;
    width: 200px;
    padding-top: 0 !important;
    margin: 120px auto 40px;
}
.spotCourse-head-wrapper h3 {
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 0 !important;
}
.spotCourse-inner {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}
.spotCourse-main {
    background-color: #f8f8f8;
    padding: 50px;
    margin-bottom: 80px;
}
.spotCourse-head-wrapper {
    text-align: center;
    line-height: 1.5;
    margin-bottom: 30px;
}
.spotCourse-content {
    font-size: 1.6rem;
}
.spotCourse-content {
    padding: 0 50px 10px;
}
.spotCourse-content td {
    padding: 10px 20px;
    vertical-align: top;
}
.spotCourse-content td:first-child {
    background-color: #eef9ff;
    font-weight: bold;
}
.spotCourse-content td:nth-of-type(n+2) {
    background-color: #fff;
}
.spotCourse-content td p {
    margin: 0;
}

.spotCourse-content tbody {
    border: 1px solid #000;
}
.spotCourse-content .link-btn {
    margin-top: 30px;
}
.single .blog-content .blog-img, .date .blog-content .blog-img {
    padding-right: 15px;
    padding-bottom: 0px;
}
.single p.blog-category,.date p.blog-category {
    display: inline-block;
}
.single .blog-content-text,.date .blog-content-text {
    float: none;
    width: 100%;
    padding-left: 0px;
}
.date .blog-head-wrapper .blog-date {
    height: 70px;
}

.content table td {
    padding: 10px 20px;
    vertical-align: top;
    font-size: 1.6rem;
}
.content table td:first-child {
    background-color: #eef9ff;
    font-weight: bold;
}
.content table td:nth-of-type(n+2) {
    background-color: #fff;
}
.content table td p {
    margin: 0;
}
.content table tbody {
    border: 1px solid #000!important;
}
.home .content table {
    font-size: 1.4rem;
}
.courses-ch {
    font-size: 1.3rem;
    font-weight: bold;
    transform: rotate(-45deg);
    position: absolute;
    background-color: #FFEB3B;
    top: -80px;
    left: -80px;
    width: 140px;
    height: 140px;
    padding-top: calc(127px - 1rem);
    text-align: center;
}
.courses-ch_wrap {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    float: right;
    top: 0;
    left: 0;
}
.course-post-title {
    padding: 0 10px 0 25px;
}
.courses-ch_s {
    font-size: 2.4rem;
    text-align: center;
    padding: 7px 10px;
    border-bottom: 4px solid #FFEB3B;
    border-top: 4px solid #FFEB3B;
    font-weight: bold;
}
.courses-ch_wrap_s {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
}
.tr_background-color:first-child td {
    background-color: #eef9ff!important;
    font-weight: bold;
}
.swpm-reset-pw-success-box {
    border: none!important;
    background-color: transparent!important;
}
#b_link {
    border-radius: 2px;
    background-color: #ddfbff!important;
    padding: 0px 30px 50px;
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 80px;
}
#b_link h3 {
    font-size: 2.5rem;
    position: relative;
    display: block;
    border-bottom: 1px solid #000;
    padding: 15px 10px 8px;
    text-align: center;
}
.banner-box-wrap.cf {
    margin: 0 auto;
    text-align: left;
}
.banner-box {
    width: calc(33% - 20px);
    margin: 0 10px;
    text-align: left;
    display: inline-block;
}
.courses-ch_s2 {
    border-bottom: 4px solid #6bc45a;
    border-top: 4px solid #6bc45a;
}
.courses-ch2 {
    background-color: #6bc45a;

}
.banner-info:hover {
    opacity: 0.8;
}
.banner-info h4 a {
    text-decoration: underline;
}

@media(max-width: 1000px) {
    .course-box {
            max-width: none;
            width: 100%;
    }
    /*
    .course-spot {
        width: 100%;
        padding: 25px 25px 10px;
    }
    */
    .blog-wrapper {
        display: block;
        margin: 0 auto!important;
        max-width: 640px;
        width: 90%;
    }
    .blog-img {
        max-width: 640px;
    }
    .course-box {
        width: 100%;
    }
    .course-wrapper {
        width: 90%;
        max-width: 640px;
        margin: 0 auto 20px;
    }
    #course .link-btn-inner {
        padding: 10px 93px 10px 99px;
        width: 100%;
        max-width: 370px;
    }
    .sp-nav-wrap {
        background-color: rgba(179, 229, 229, 0.95);
    }
    .home .blog-sidebar {
        margin-bottom: 50px;
    }
    .home .blog-box {
        width: 100%;
        margin: 0 0 30px 0;
    }
    .teacher-box {
        margin-top: 50px;
    }
    .map-box {
        max-width: 100%;
        float: none;
    }
    .map-wrapper .map-info {
        float: none;
    }
    .tel_text + .sp_block {
        display: block;
        text-align: center;
        margin-bottom: 10px;
        font-size: 2rem;
    }
    #mapPage h2, #contactPage h2 {
        width: 200px;
    }
    .date #blogPage .blog-head-wrapper {
            width: 100%;
    }
    .date #blogPage h2 {
        width: 310px;
    }
    .ptp-col {
        width: 46%!important;
    }
    .ptp-pricing-table {
        flex-wrap: wrap;
        margin: 0 auto!important;
    }
    div#recruitPage {
        min-height: auto;
    }
    #blogPage .blog-head-wrapper h3 {
        width: calc( 100% - 70px );
    }
    .wrap-slideCp img {
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 60px);
        /*margin-top: 40px;*/
    }
    .wrap-slideCp {
        height: calc( 100vh - 60px );
        background-size: auto calc( 100vh - 60px );
        background-position-x: center;
    }
    #pricePage h2 {
        margin: 120px auto 0px;
    }
    .key-visual {
        margin-top: 60px;
        height: calc(100vh - 60px)!important;
    }
    .key-visual img {
        height: calc( 100vh - 60px );
    }
    .wrap-slideCp img {
        width: 100%;
        height: auto!important;
    }
    .catchcopy span {
        font-size: 3rem;
        text-shadow: 1px 1px 7px #ffffff, -1px -1px 7px #ffffff, 0px -1px 7px #ffffff, -1px 0px 7px #ffffff;
    }
    .category-blog-wrapper.top_blog .blog-box {
        width: 100%;
    }
    .category-blog-wrapper .link-btn-inner {
        padding: 10px;
        width: 100%;
        margin-top: 20px;
    }
    .category-blog-wrapper .blog-box p:not(.more_text) {
        z-index: auto;
    }
    .home #recruit p, .home #concept p {
        font-size: 1.8rem!important;
    }
    #recruit:after {
        opacity: 0.15;
    }
    .home #blog .view-all {
        margin-top: 30px;
    }
    .key-visual-wrapper {
        position: relative;
        z-index: 9;
    }
    .home #course h2, .home #blog h2 {
        width: 150px;
    }
    .blog-sidebar-date {
        margin-bottom: 50px;
    }
    .page-template-soon .contents {
        min-height: auto;
    }
    .soon-inner {
        padding: 40px 0;
        background-color: #fff;
    }
    .ssl_text {
        bottom: 0px;
        padding: 20px 20px;
    }
    .ssl_text h4::before {
        top: 2px;
    }
    .f16rem_sp {
        font-size: 1.5rem!important;
    }
    .f25rem_sp {
        font-size: 2.5rem!important;
    }
    .member_record_inner div:first-child {
        padding: 15px 10px 15px 0;
        width: 100px;
    }
    .swpm-login-form-inner div:nth-child(1), .swpm-login-form-inner div:nth-child(3) {
        width: 100%!important;
        display: block;
    }
    .swpm-login-form-inner div:nth-child(2), .swpm-login-form-inner div:nth-child(4) {
        width: 100%!important;
        display: block;
    }
    #swpm-registration-form tr td:first-child {
        background-color: #b3e5fc;
        font-size: 1.6rem;
        font-weight: bold;
        padding: 15px;
    }
    .map_image_wrap img {
        width: calc(100% - 20px)!important;
    }
    #contactPage input[type="password"] {
        font-size: 16px!important;
    }
    #message.error {
        margin-bottom: 15px;
    }
    div#message.error ul {
        padding-left: 20px;
    }
    .spotCourse-main {
        padding: 30px 0;
    }
    .spotCourse-content {
        padding: 0 20px;
    }
    .spotCourse-content td {
        display: block;
        height: auto!important;
        width: 100%!important;
        border: none!important;
        border-bottom: 1px solid #000!important;
    }
    .spotCourse-content table {
        border: 1px solid #000!important;
        border-bottom: none!important;
    }
    .spotCourse-content tbody {
        border: none!important;
    }
    .content td {
        display: block;
        height: auto!important;
        width: 100%!important;
        border: none!important;
        border-bottom: 1px solid #000!important;
    }
    .content table {
        border: 1px solid #000!important;
        border-bottom: none!important;
    }
    .content table tbody {
        border: none!important;
    }

    .course-spot:hover {
        background-color: #eee;
    }
    .course-spot:hover:after {
        background-color: #0288D1;
        transition: none;
    }
    .spot-course_underline {
        display: inline-block;
        position: relative;
    }
    .course-spot .spot-course_underline::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #222;
        display: block;
        position: absolute;
        bottom: 15px;
    }
    .course-spot:hover .spot-course_underline::after {
        content: normal;
    }
    .single .blog-content .blog-img,.date .blog-content .blog-img {
        padding-right: 0px;
        padding-bottom: 0px;
    }
    .single #blogPage .blog-head-wrapper h3, .date #blogPage .blog-head-wrapper h3 {
        display: block;
        float: none;
        width: 100%;
        padding-left: 0px;

    }
    .single .blog-head-wrapper .blog-date, .date .blog-head-wrapper .blog-date {
        height: 63px;
        margin-right: 10px;
    }

    .single #blogPage .blog-head-wrapper, .date #blogPage .blog-head-wrapper {
        display: block;
    }

    .more_text a {
        text-decoration: underline;
    }
    .tr_background-color td,.spotCourse-content td ,.content td{
        display: table-cell;
        width: auto!important;
        border-left: 1px solid #000!important;
    }
    .tr_background-color td:first-child {
        border-left: none!important;
    }
    .sp-nav-wrap ul li {
        padding: 10px 0;
    }
    .sp-nav-wrap {
        height: calc(120vh + 100px);
    }
    .single p.blog-category, .date p.blog-category {
        display: block;
    }
    .banner-box {
        width: 100%;
        margin: 10px 0;
    }
    #b_link {
        padding: 0px 30px 30px;
    }
    .content_table_wrap {
        overflow-x: scroll;
    }
    .content_table_wrap table {
        table-layout: fixed;
    }
    .content_table_wrap tr td {
        width: 300px!important;
    }
    .content_table_wrap tr td:first-child {
        width: 200px!important;
    }
    .content_table_wrap::-webkit-scrollbar {
        height: 10px;
    }
    .content_table_wrap::-webkit-scrollbar-thumb{
        background: #999;
        border-radius: 5px;
    }
    .content_table_wrap::-webkit-scrollbar-track-piece {
        background: #efefef;
    }
}
@media(max-width: 450px) {
    .ptp-col {
        width: 100%!important;
    }
    .course_h4_wrap h4 {
        margin-left: 5px;
    }
    .price_course_wrap {
        padding: 10px 15px 30px;
    }
}
/* IE用スタイル調整 */
@media(-ms-high-contrast:none){
    .link-btn-inner, #course .link-btn-inner {
        padding-top: 14px;
        padding-bottom: 8px;
    }
    .blog-img {
        transition: background-color 1.3s linear
    }
    span.hisu {
        padding-top: 3px;
        padding-bottom: 0;
    }
    .blog-attachment {
        padding: 6px 0 0px;
    }
    .blog-box img {
        width: 100%!important;
    }
    .select_wrap .error {
        position: absolute;
    }
}