@charset "UTF-8";
@import url("css-smacss/style-base.css");
@import url("css-smacss/style-layout.css");
@import url("css-smacss/style-module.css");
@import url("css-smacss/style-state.css");
@import url("css-smacss/style-theme.css");

@import url("css/style-top.css");
@import url("css/style-about.css");
@import url("css/style-contact.css");
@import url("css/style-form.css");


/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*cssのリセット*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent; }




body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent; }

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9; }

mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9; }

del {
  text-decoration: line-through; }

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc; }

/*input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none; }

textarea {
  resize: vertical; }

input[type='checkbox'],
input[type='radio'] {
  display: none; }

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer; }

select::-ms-expand {
  display: none; }
*/

.header {
	/*ヘッダーを固定*/
	background-color: #FFF;
	opacity: 0.9;
	position: fixed;
	width: 100vw;
	height: auto;
	z-index: 100;
	padding: 1rem 1rem;
}

.nav-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 80vh;
  background-color: rgba(255, 255, 255, 0.75);
  transition: .7s; 
}

#nav {
	position: fixed;
	top: 0;
	/*ナビメニューを左に隠した状態になる*/
	right: -180%;
	width: 60%;
	height: 100vh;
	/* background-image: url(img/bg.jpg); */
	background-color:#F2ECE4; 

	/*０.7秒かけてナビメニューがスライドする*/
	transition: .7s;
	z-index: 99;
	overflow: auto; }
	#nav .flex-wrapper ul {
    display: flex;
    justify-content: center;
    align-items: center; }
    #nav .flex-wrapper ul li:nth-of-type(1n) img,
    #nav .flex-wrapper ul li:nth-of-type(2n) img {
      width: 46px;
      margin: 0 2%; }
    #nav .flex-wrapper ul li:nth-of-type(3n) img {
      width: 50px;
      margin: 0 2%; }
  #nav .logo {
    width: 46%;
    margin: 20px auto; }

#nav.in {
  right: 60%; }

#nav ul {
  padding-top: 10px;
  text-align: center; }

#nav ul li {
  list-style-type: none;
  font-size: 1.5rem;
  padding: 5px; 
}

#nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
  transition: 0; }

#nav li a:hover {
  color: #887E77;
  background-color: rgba(255, 255, 255, 0.3); }

.ham-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: none;
  border-radius: none ;
}

#hamburger {
  display: block;
  position: absolute;
  top: 18px;
  right: 20px;
  width: 55px;
  height: 30px;
  cursor: pointer;
  transition: 1s;
  z-index: 100; }

.inner_line {
  display: block;
  position: absolute;
  right: 0;
  width: 40px;
  height: 3px;
  background-color: #333;
  transition: 1s;
  border-radius: 4px;
  z-index: 50; }

.ham-menu {
  font-size: 10px;
  position: absolute;
  right: 0;
  bottom: -17px;
  display: block;
  width: 40px;
  text-align: center;
  color: #333;
  font-weight: 900;
  letter-spacing: .5em; }

#line1 {
  top: 0; }

#line2 {
  top: 13px; }

#line3 {
  bottom: 0px; }

.in {
  transform: translateX(100%); }

.line_1, .line_2, .line_3 {
  background: #333; }

.line_1 {
  /*-45度回転させる*/
  transform: rotate(-45deg);
  top: 6px !important; }

.line_2 {
  opacity: 0; }

.line_3 {
  /*45度回転させる*/
  transform: rotate(45deg);
  bottom: 21px !important; }

@media screen and (max-width: 700px) {
  #nav {
    width: 100%; }
    #nav .logo {
      width: 65%;
      margin: 15px auto 15px; }
    #nav ul li {
      padding: 0; }
      #nav ul li a {
        padding: 10px; }
    #nav .flex-wrapper ul li:nth-of-type(1n) img,
    #nav .flex-wrapper ul li:nth-of-type(2n) img {
      margin: 0;
      padding: 20px 10px; }
    #nav .flex-wrapper ul li:nth-of-type(3n) img {
      margin: 0;
      padding: 20px 10px; }

  #nav.in {
    right: 100%; }

  .ham-wrap {
    width: 76px;
    height: 76px;
    border-radius: 0 0 0 30px; }

  #hamburger {
    top: 12px;
    right: 14px;
    width: 54px;
    height: 25px; }

  .inner_line {
    right: 0;
    width: 35px;
    height: 3px; }

  .ham-menu {
    font-size: 10px;
    bottom: -20px;
    width: 44px;
    letter-spacing: .3em; }

  #line1 {
    top: 0; }

  #line2 {
    top: 11px; }

  #line3 {
    bottom: 0px; }

  .line_3 {
    bottom: 16px !important; }

  .in {
    transform: translateX(100%); } }



/* --------------------------------------------------
タブ切替
-------------------------------------------------- */
.tab {
  padding: 0;
  margin: 0 auto;
  width: 86%;
  max-width: 1280px; }

.tab__nav {
  display: flex;
  justify-content: center;
  align-items: flex-end; }
  .tab__nav li a {
    background-image: url(img/tab01.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-size: 80%;
    display: block;
    padding: 0;
    width: 100%;
    height: 100%; }
  .tab__nav li:nth-of-type(1n) a {
    background-image: url(img/tab01.png); }
  .tab__nav li:nth-of-type(2n) a {
    background-image: url(img/tab02.png); }
  .tab__nav li:nth-of-type(3n) a {
    background-image: url(img/tab03.png); }
  .tab__nav li:nth-of-type(4n) a {
    background-image: url(img/tab04.png); }
  .tab__nav li.js-active:nth-of-type(1n) a {
    background-image: url(img/tab01-on.png); }
  .tab__nav li.js-active:nth-of-type(2n) a {
    background-image: url(img/tab02-on.png); }
  .tab__nav li.js-active:nth-of-type(3n) a {
    background-image: url(img/tab03-on.png); }
  .tab__nav li.js-active:nth-of-type(4n) a {
    background-image: url(img/tab04-on.png); }

.tab__tabbar,
.tab__tabbar.js-active {
  cursor: pointer;
  display: block;
  padding: 0;
  margin: 0 .5% -2px;
  color: #887E77;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18%;
  height: 80px;
  border-radius: 10px 10px 0 0;
  border: 5px solid #fff;
  background-color: #fff; }

.tab__tabbar.js-active {
  background-color: #CCB0A0; }

.tab__tabbar a:hover, .tab__tabbar a:focus, .tab__tabbar a:visited, .tab__tabbar a:active {
  text-decoration: none; }

.tab__content {
  display: none;
  padding: 0;
  margin: 0; }

.tab__content.js-show {
  display: block; }
  .tab__content.js-show img {
    filter: brightness(1) invert(0); }

.tab__inner {
  padding: 40px 0;
  border-radius: 20px;
  border: 6px solid #fff;
  background-image: url(img/tab-bg.png); }
  .tab__inner .tab__list .flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 900;
    box-sizing: border-box; }
    .tab__inner .tab__list .flex-wrapper .left-wrap {
      box-sizing: border-box;
      width: 58%;
      padding: 0 0 0 6%;
      letter-spacing: .1em; }
    .tab__inner .tab__list .flex-wrapper .right-wrap {
      width: 42%;
      padding: 0;
      box-sizing: border-box; }
      .tab__inner .tab__list .flex-wrapper .right-wrap img {
        margin: 0 auto;
        width: 70%;
        display: block;
        padding: 0; }
    .tab__inner .tab__list .flex-wrapper dt {
      font-size: 3vw;
      line-height: 1.2;
      color: #746961; }
      .tab__inner .tab__list .flex-wrapper dt span {
        font-size: 2vw; }
    .tab__inner .tab__list .flex-wrapper p {
      color: #746961;
      font-size: 1.6rem;
      padding-top: 20px;
      display: block;
      word-wrap: break-word;
      line-height: 1.8; }

.tab__list {
  padding: 0px 0px 20px;
  list-style: none; }

@media (min-width: 1280px) {
  .tab__tabbar a {
    font-size: 2.4rem; }
    .tab__tabbar a span {
      font-size: 1.2rem; }
    .tab__tabbar a p {
      font-size: 1.6rem; }
    .tab__tabbar a img {
      max-width: 53px;
      padding: 10px; }

  .tab__inner .tab__list .flex-wrapper dt {
    font-size: 3.6rem; }
    .tab__inner .tab__list .flex-wrapper dt span {
      font-size: 2rem; }
  .tab__inner .tab__list .flex-wrapper p {
    font-size: 1.5rem; } }
.tab__tabbar.sp .js-icon {
  display: none; }

@media screen and (max-width: 700px) {
  .tab {
    width: 92%;
    max-width: 100%; }

  .tab__tabbar,
  .tab__tabbar.js-active {
    width: 23%;
    height: 10vh;
    min-height: 60px;
    display: block;
    padding: 2px 5px;
    margin: 0 .5% -4px; }

  .tab__nav li a {
    background-size: 100%; }
  .tab__nav li:nth-of-type(1n) a {
    background-image: url(img/sp-tab01.png); }
  .tab__nav li:nth-of-type(2n) a {
    background-image: url(img/sp-tab02.png); }
  .tab__nav li:nth-of-type(3n) a {
    background-image: url(img/sp-tab03.png); }
  .tab__nav li:nth-of-type(4n) a {
    background-image: url(img/sp-tab04.png); }
  .tab__nav li.js-active:nth-of-type(1n) a {
    background-image: url(img/sp-tab01-on.png); }
  .tab__nav li.js-active:nth-of-type(2n) a {
    background-image: url(img/sp-tab02-on.png); }
  .tab__nav li.js-active:nth-of-type(3n) a {
    background-image: url(img/sp-tab03-on.png); }
  .tab__nav li.js-active:nth-of-type(4n) a {
    background-image: url(img/sp-tab04-on.png); }

  .tab__inner {
    padding: 20px 0 0; }
    .tab__inner .tab__list {
      padding: 10px;
      width: auto; }
      .tab__inner .tab__list .flex-wrapper {
        display: block;
        padding: 0; }
        .tab__inner .tab__list .flex-wrapper img {
          margin: 5px auto;
          display: block;
          width: 80%; }
        .tab__inner .tab__list .flex-wrapper .right-wrap,
        .tab__inner .tab__list .flex-wrapper .left-wrap {
          width: 100%;
          padding: 0; }
          .tab__inner .tab__list .flex-wrapper .right-wrap dt,
          .tab__inner .tab__list .flex-wrapper .left-wrap dt {
            font-size: 6.0vw;
            text-align: center;
            letter-spacing: normal; }
            .tab__inner .tab__list .flex-wrapper .right-wrap dt span,
            .tab__inner .tab__list .flex-wrapper .left-wrap dt span {
              font-size: 3.8vw;
              letter-spacing: normal; }
          .tab__inner .tab__list .flex-wrapper .right-wrap p,
          .tab__inner .tab__list .flex-wrapper .left-wrap p {
            font-size: 1.4rem;
            line-height: 1.4;
            padding: 20px 18px 0;
            letter-spacing: .15em;
            word-wrap: break-word; }
          .tab__inner .tab__list .flex-wrapper .right-wrap .program-img,
          .tab__inner .tab__list .flex-wrapper .left-wrap .program-img {
            width: 95%;
            margin: 20px auto; } 
}

.fadein {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 1.2s; }

.fadein.active {
  opacity: 1;
  transform: translate(0, 0); }

.js-fix.is-fixed {
  position: fixed;
  width: 180px;
  top: auto;
  bottom: 10px;
  z-index: 98;
  animation-name: fadeInAnime;
  animation-fill-mode: backwards;
  animation-timing-function: ease;
  animation-direction: normal;
  animation-duration: 2s;
  transition: all 2s; 
}

@keyframes fadeInAnime {
  0% {
    opacity: 0;
    transform: translate(0, 120px); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }


/******************************************************************

Stylesheet: ベーススタイル

******************************************************************/
html {
  font-family: 'Hiragino Maru Gothic ProN',sans-serif,serif;
  margin: 0 !important;
  font-size: 62.5%; }

body {
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: .1em;
  position: relative; 
}


img {
  max-width: 100%;
  vertical-align: bottom; }


.t-padding {
  padding: 8% 0 0; }

.b-padding {
  padding: 0 0 100px; }



.full-width {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%); }

.full-img {
  margin: 0 auto;
  display: block;
  width: 100%; }

.flex-wrapper {
  display: flex;
  justify-content: center; }

.bg-wrapper {
 /* background-image: url(img/bg.jpg); */
 background-color:#F2ECE4; 
} 



.sec-title {
	font-size: 1.8rem;
	letter-spacing: .1em;
	font-weight: 900;
	text-align: center; 
	margin: 1rem 0 6rem;
}

/*768px以上*/
@media screen and (min-width: 768px) {
	.sec-title {
	font-size: 2.0rem;
	letter-spacing: .1em;
	font-weight: 900;
	text-align: center; 
	margin: 1rem 0 6rem;
	}
}


.contact-wrapper .sp {
	display: none !important; 
}

.tel-img {
  display: block;
  margin: 0 auto 1.5%;
  width: 70%; }

.contact-img {
  display: block;
  margin: 0 auto 0;
  width: 70%; }

.mainContentsIn {
	position: relative;
	background-image: url(img/main-pic.jpg);
	background-size: 100% auto;
	padding-bottom: 150px;
}

.mainContentsIn::after {
  content: "";
  display: block;
  padding-top: 23%; }

.main-lead {
  display: block;
  padding-top: 6%;
  padding-left: 4.3%;
  width: 43%; }

.main-logo-wrapper {
  position: relative;
   /* background-image: url(img/bg.jpg); */
 background-color:#F2ECE4; 
  padding-bottom: 50px; }
  .main-logo-wrapper .main-logo-lead {
    display: block;
    width: 35%;
    max-width: 294px;
    padding: 2% 20%; 
z-index: 1999;}
  .main-logo-wrapper .main-logo {
    display: block;
    width: 78%;
    max-width: 700px;
    margin: 0% auto; 
	  padding-top: 3%;
	z-index: 8888;
}
  .main-logo-wrapper .main-logo-disc {
    display: block;
    width: 45%;
    max-width: 590px;
    margin: 4% auto 1% ;
}
  .main-logo-wrapper .point-img {
    position: absolute; }
  .main-logo-wrapper .left {
    top: 7%;
    left: 0;
    width: 25%;
    max-width: 321px; }
  .main-logo-wrapper .right {
    bottom: 20%;
    right: 0;
    width: 32%;
    max-width: 415px; }

.mama-contact {
  position: absolute;
  top: -20%;
  right: 10px;
  width: 20%;
  z-index: 98; 
}

@media (min-width: 1280px) {
	.mama-contact {
	max-width: 256px; 
	} 
}


.about {
  position: relative;
  padding-top: 4rem; 
}
  .about .point-img {
    position: absolute; }
  .about .left-01 {
    top: -5%;
    left: 0;
    width: 24%;
    max-width: 265px;
    z-index: 1; }
  .about .left-02 {
    bottom: 10%;
    left: -5%;
    width: 10%;
    max-width: 135px; }
  .about .left-03 {
    top: 40%;
    left: -3%;
    width: 23%;
    max-width: 314px; }
  .about .right-01 {
    top: -15%;
    right: 0;
    width: 23%;
    max-width: 315px; }
  .about .right-02 {
    bottom: 7%;
    right: -5%;
    z-index: -1;
    width: 24%;
    max-width: 315px; }

.about-bg {
  max-width: 1280px;
  margin: 0 auto; }

.about-lead {
  position: relative;
  display: block;
  width: 76%;
  margin: 0 auto;
  z-index: 99;
  max-width: 980px; }

.ansin {
  width: 28%;
  display: block;
  margin: 5% auto 0;
  max-width: 360px; }

.ansin-wrapper {
  margin: 5% auto 5%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1030px; }
  .ansin-wrapper .ansin-icon {
    width: 23%;
    margin: 2px; }

.onpu-icon {
  width: 67%;
  display: block;
  margin: 6% auto 0;
  z-index: 10;
  max-width: 860px; }

.about-p-wrapper {
  margin: 10px auto 30px;
  width: 82%; }
  .about-p-wrapper p {
    padding: 30px 0 0;
    font-size: 2vw;
    line-height: 1.7;
    letter-spacing: normal; }

@media (min-width: 1280px) {
  .about-p-wrapper p {
    font-size: 2.5rem; } }
.cam-img {
  width: 100%; }

.lesson {
  position: relative;
  padding: 0; }
  .lesson .sec-title {
    padding: 2% 0; }

.lesson-title-fade {
  position: relative;
  background-image: url(img/lesson-bg.png);
  background-size: 100% auto; }
  .lesson-title-fade .lesson-icon.pc {
    width: 60%;
    display: block;
    margin: 15px auto; }
  .lesson-title-fade .lesson-icon.sp {
    display: none; }
  .lesson-title-fade .lesson-disc {
    font-size: 2.2vw;
    font-weight: 900;
    color: #887E77;
    text-align: center; }

.lesson-type {
  list-style: none;
  padding-bottom: 3%; }
  .lesson-type .lesson-title {
    color: #e1627b;
    font-size: 3.8vw;
    text-align: center;
    padding-top: 3%;
    margin: 0 auto; }
  .lesson-type .lesson-pro {
    font-size: 2vw;
    font-weight: 900;
    color: #887E77;
    text-align: center;
    margin: 4% auto 0; }
    .lesson-type .lesson-pro span {
      font-size: 4vw; }
  .lesson-type .lesson-disc {
    font-size: 1.9vw;
    font-weight: 900;
    color: #887E77;
    padding: 2% 0 0;
    text-align: center; }

.lesson-type.pd {
  padding-bottom: 0; }
  .lesson-type.pd .lesson-title {
    padding-top: 5%; }
  .lesson-type.pd .lesson-disc.pd {
    padding: 4% 0; }

@media (min-width: 1280px) {
  .lesson-disc {
    font-size: 2.0rem !important; }

  .lesson-title {
    font-size: 5.5rem !important; }

  .lesson-pro {
    font-size: 2.78rem !important; }
    .lesson-pro span {
      font-size: 5rem !important; }

  .lesson-disc {
    font-size: 2.4rem; } }
.lesson-contents {
	background-color: #fff;
	width: 86%;
	margin: 3% auto;
	border-radius: 20px;
	padding: 3% 0 5%; 
}
  .lesson-contents h3 {
    padding-top: 5%;
    font-size: 2.8vw;
    font-weight: 900;
    color: #ED794D;
    text-align: center;
    letter-spacing: .2em; }
  .lesson-contents .line {
    display: block;
    margin: 2% auto 5%;
    max-width: 85%; }
  .lesson-contents p {
    font-size: 2vw;
    font-weight: 900;
    color: #887E77;
    text-align: center;
    letter-spacing: .2em; }
  .lesson-contents ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 3% auto 5px;
    width: 93%; }
    .lesson-contents ul li {
      width: calc(100%/3);
      margin: 1%;
      color: #887E77; }
      .lesson-contents ul li dt {
        font-size: 2vw;
        text-align: center;
        color: #fff;
	  line-height: 1.1;
        font-weight: 900; }
      .lesson-contents ul li dd {
        font-size: 1.5rem;
        line-height: 2;
        margin-top: 20px;
        letter-spacing: .1em; }
    .lesson-contents ul li:nth-of-type(1n) dt {
      background-image: url(img/yellow.png);
      border-radius: 10px;
      padding: 20px 0; }
    .lesson-contents ul li:nth-of-type(2n) dt {
      background-image: url(img/pink.png); }
    .lesson-contents ul li:nth-of-type(3n) dt {
      background-image: url(img/green.png); }
  .lesson-contents .flex-wrapper {
    padding-bottom: 5px; }
    .lesson-contents .flex-wrapper p {
      padding: 0;
      font-size: 1.8vw; }
      .lesson-contents .flex-wrapper p span {
        font-size: 1.2vw; }
    .lesson-contents .flex-wrapper img {
      width: 87%;
      display: block;
      margin: 5px auto; }
    .lesson-contents .flex-wrapper img.mg {
      width: 98%; }
    .lesson-contents .flex-wrapper .sp {
      display: none; }

.lesson-contents.pd {
  margin: 0 auto 5%;
  padding: 0 0 5%; }
  .lesson-contents.pd .line {
    margin: 3% auto; }
  .lesson-contents.pd ul li:nth-of-type(1n) dt {
    padding: 5px 0; }

@media (min-width: 1280px) {
	.lesson-contents h3 {
	font-size: 3.3rem; }
	.lesson-contents p {
	font-size: 2.6rem;
	font-weight: 900; }
	.lesson-contents ul li dt {
	font-size: 2.2rem; } 
}

.price {
position: relative; }
.price .price-title {
display: block;
margin: 3% auto 2%; }
.price .lesson-type.pd {
padding-bottom: 3%; }
.price .lesson-type.pd .lesson-title {
font-size: 4vw;
padding-top: 3%; }
.price table {
position: relative;
width: 92%;
margin: 0 auto;
font-size: 1.4vw;
font-weight: 900; }

.price table th, .price table td {
	border: 4px solid #fff;
	vertical-align: middle;
	text-align: center;
	padding: 16px 10px;
	vertical-align: middle;
	width: 2%;
	font-size: 1.6vw;
	color: #fff;
	line-height: 1;
	font-weight: 900; 
}

.price table th {
background-color: #C9AD9E;
letter-spacing: .1em; }
.price table td {
color: #887E77;
letter-spacing: .1em; }
.price table td span {
font-size: 1.2vw;
font-weight: 900;
letter-spacing: normal; }
.price table .last {
font-size: 1.8rem;
height: auto;
white-space: nowrap;
text-align: left;
padding: 10px 0; }
.price table .light {
/* background-image: url(img/bg.jpg); */
background-color:#F2ECE4;
}
    .price table .dark {
      background-color: #E9E2DC; }
    .price table .yellow, .price table .pink, .price table .green {
      border-radius: 10px;
      padding: 25px; }
    .price table .yellow {
      background-image: url(img/yellow.png); }
    .price table .pink {
      background-image: url(img/pink.png); }
    .price table .green {
      background-image: url(img/green.png); }
  .price .price-table th, .price .price-table td {
    width: 50%;
    font-size: 2vw;
    font-weight: 900; }
  .price .price-table td {
    color: #887E77;
    font-size: 2.8vw;
    font-weight: 900; }
  .price .price-table tr:nth-of-type(2n) th span {
    font-size: 1.6vw; }
  .price .price-table .last {
    font-size: 1.5vw;
    height: auto;
    white-space: nowrap;
    text-align: left; }
  .price .price-table img {
    position: absolute;
    right: -3%;
    top: -70%;
    width: 20%; }
  .price .line {
    display: block;
    margin: 20px auto 30px; }

@media (min-width: 1280px) {
  .price table {
    font-size: 4.6rem; }
    .price table th, .price table td {
      font-size: 2rem; }
    .price table td span {
      font-size: 1.2rem; }
    .price table .last {
      font-size: 1.8rem; }
  .price .price-table th, .price .price-table td {
    font-size: 3rem; }
  .price .price-table td {
    font-size: 4rem; }
  .price .price-table tr:nth-of-type(2n) th span {
    font-size: 2rem;
    letter-spacing: normal; }
  .price .price-table .last {
    font-size: 1.2rem; } }



@media (min-width: 1280px) {
  .price table {
    font-size: 2rem; }
    .price table th span, .price table td span {
      font-size: 1.7rem; } }
.greeting {
  position: relative; }
  .greeting .greet-title {
    width: 59%;
    display: block;
    margin: 0 auto;
    padding: 3% 0 0; }
  .greeting .greet_p {
    max-width: 53.5%;
    font-size: 1.8vw;
    color: #887E77;
    margin: 0 auto;
    padding: 5% 0;
    z-index: 2;
    font-weight: 900;
    line-height: 1.7;
    letter-spacing: normal; }
    .greeting .greet_p p {
      margin-top: 10px; }
  .greeting .daihyo {
    width: 18.4%;
    margin: 0 auto;
    display: block; }
  .greeting .daihyo-p {
    text-align: center;
    padding: 1% 0 4.2%;
    color: #887E77;
    font-weight: 900;
    font-size: 1.7vw; }
  .greeting .left-01 {
    position: absolute;
    top: 16%;
    left: 5%;
    width: 16%; }
  .greeting .left-02 {
    position: absolute;
    top: 60%;
    left: 5%;
    width: 12%; }
  .greeting .right-01 {
    position: absolute;
    top: 12%;
    right: 0;
    width: 15%; }
  .greeting .right-02 {
    position: absolute;
    bottom: 34%;
    right: 10%; }

@media (min-width: 1280px) {
	.greeting p {
	font-size: 2.2rem; }
	.greeting .daihyo-p {
	font-size: 1.8rem; } 
}

.koushi-icon {
  margin: 0 auto;
  padding: 2%;
  display: block;
  width: 16.2%; }

.koushi-wrapper {
  position: relative;
  width: 75%;
  background-color: #fff;
  border-radius: 20px;
  padding: 2% 3% 0 1%;
  display: flex;
  align-items: flex-start;
  margin: 30px auto 0; }
  .koushi-wrapper img {
    width: 32%;
    padding: 4%;
    margin: -10% 0  0; }
  .koushi-wrapper .koushi-p {
    font-size: 1.2vw;
    font-weight: 900;
    letter-spacing: normal;
    color: #756860;
    background-color: #FCF6D5;
    width: 90%;
    border-radius: 15px;
    padding: 3% 4% 4%; }
  .koushi-wrapper .sp {
    display: none; }
  @media (min-width: 1280px) {
    .koushi-wrapper .koushi-p {
      font-size: 1.5rem; } }
  .koushi-wrapper .youtube {
    position: absolute;
    width: 32.7%;
    top: 59%;
    right: 3%; }
    .koushi-wrapper .youtube p {
      font-size: 1.2rem;
      padding: 10px;
      text-align: right;
      color: #746961; }
@media (max-width: 850px) {
	.koushi-wrapper .youtube {
	top: 80%; }
	.koushi-wrapper .youtube p {
	font-size: 1.2rem;
	padding: 10px;
	text-align: right; } 
}

.responsive {
  position: relative;
  padding-top: 56.25%;
  width: 100%; }

.responsive iframe {
  border: 4px solid #fff;
  border-radius: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%; }



.scene-wrapper {
  padding: 0% 0 5%; 
}
.scene-content {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.5%;
  padding-bottom: 0%; 
}
.scene-content img {
    width: calc(100%/4 - 50px);
    margin: 5px; 
}


@media (max-width: 850px) {
	.scene-wrapper {
	padding: 0 0 5%; 
	}
	.scene-content {
    margin-top: 10px;
    padding-bottom: 0%;
    width: 90%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
	}
	.scene-content img {
	width: calc(100%/2 - 20px);
	margin: 2px 0; 
	}
}


/* アクセスエリア */
.access-wrapper {
    position:absolute;
    width: 100%;
}

  .access .map-wrapper {
	width: 100%;
	height: auto;
	margin: 0 auto;
	z-index: 7777;
}
    .access .map-wrapper iframe {
      display: block;
      margin: 20px auto;
      border-radius: 0px;
      width: 100%;
      aspect-ratio: 11/4; }





.access-text-wrap {
	padding: 3rem 0 0 0;
	margin: 0 auto;
}
.access-text {
	font-size: 1.3rem;
}
.access-text span {
	font-size: 1.0rem;
}

/*768px以上*/
@media screen and (min-width: 768px) {
	.access .access-wrapper {
	position: relative;
	width: 86%;
	margin: 5% auto 0; 
	}

	.access-text-wrap {
	padding: 3rem 0 0 0;
	margin: 0 auto;
	}
}





/******************************************************************

Stylesheet: 700px以下

******************************************************************/
@media screen and (max-width: 700px) {

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

	.tel-img {
	margin: 0 auto 4.9%;
	padding-top: 30px;
	width: 90%; }

	.contact-img {
	margin: 20px auto 50px;
	width: 90%; }

	.lesson-sub-title {
	width: auto;
	font-size: 4.5vw;
	letter-spacing: .1em;
	line-height: 1.3;
	padding: 10px .1em;
	margin: 2% auto 0;
	border: 2px solid #65AC99; }

	.mainContentsIn {
	background-image: url(img/sp-main.jpg); 
	padding-bottom: 0px;}

	.main-logo-lead {
	display: none; }

	.mainContentsIn::after {
	padding-top: 76%; }

	.main-logo-wrapper {
	padding-bottom: 0px; }
	.main-logo-wrapper .nami {
	top: -3%; }
	.main-logo-wrapper .main-logo-lead {
	width: 54%;
	padding: 2% 5%; }
	.main-logo-wrapper .main-logo {
	width: 98%;
	margin: 0% auto;
	padding-top: 5%;}
	.main-logo-wrapper .main-logo-disc {
	position: relative;
	width: 68%;
	font-weight: 900;
	margin: 9% auto;
	z-index: 2; 
	}
	.main-logo-wrapper .point-img {
	position: absolute;
	z-index: 1; }
	.main-logo-wrapper .left-01 {
	top: 13%;
	left: 0;
	width: 20%;
	max-width: 141px;
	z-index: 1; }
	.main-logo-wrapper .left-02 {
	top: 48%;
	left: 15px;
	width: 10.7%;
	max-width: 75px; }
	.main-logo-wrapper .right-01 {
	top: 18%;
	right: 0;
	width: 20%;
	max-width: 120px; }
	.main-logo-wrapper .right-02 {
	bottom: 22%;
	right: 0;
	width: 28%;
	max-width: 173px; }
	.main-logo-wrapper .right-03 {
	bottom: 8%;
	right: 5%;
	width: 15%;
	max-width: 85px; }

	.mama-contact {
	position: absolute;
	top: 0%;
	right: 10px;
	width: 32%;
	z-index: 9999; 
	}

	.about {
	position: relative;
	padding-top: 5%; }
	.about .right-04 {
	top: 0;
	right: 0;
	z-index: -1;
	width: 12%;
	max-width: 85px; }
	.about .left-03 {
	top: 12%;
	left: 3%;
	width: 14%;
	max-width: 98px; }

	.about-bg {
	max-width: 100%; }

	.about-lead {
	display: none; }

	.sp-about-lead {
	position: relative;
	display: block;
	width: 90%;
	margin: 0 auto;
	z-index: 99; }

	.ansin {
	width: 55%;
	display: block;
	margin: 5% auto 0; }

	.ansin-wrapper {
	margin: 5% auto 7%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap; }
	.ansin-wrapper .ansin-icon {
	width: 43%;
	margin: 8px; }

	


	.responsive iframe {
	box-sizing: border-box;
	left: 16px; }


	

	
	.js-fix.is-fixed {
	position: fixed;
	width: 33%;
	top: auto;
	bottom: 10px;
	z-index: 98;
	animation-name: fadeInAnime;
	animation-fill-mode: backwards;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-duration: 2s;
	transition: all 2s; 
	}
	
	
}





.contact-area{
	padding: 3% 0 6%;
}




.lesson-description-box{
	padding: 0px;
}
.lesson-description{
	text-align: left!important;
	font-size: 15px!important;
	letter-spacing: normal!important;
	line-height: 1.4!important;
	margin: 1rem 0 0 0;
}
.lesson-description-midashi{
	font-weight: bold;
	font-size: 17px!important;
	display: inline-block;
	margin: 0.5rem 0 0.75rem;
}
.lesson-image{

}
@media screen and (max-width: 900px) {
	.lesson-description-box{
	padding: 0px;
	}
	.lesson-description{
	font-size: 14px!important;
	letter-spacing: normal!important;
	line-height: 1.5!important;
	margin: 1rem 0 0 0;
	}
	.lesson-description-midashi{
	font-weight: bold;
	font-size: 17px!important;
	display: inline-block;
	margin: 0.5rem 0 0.75rem;
	}
	.lesson-image{

	}
}



@media screen and (max-width: 900px) {
	#about{
	overflow:hidden;
	}
}

.caption{
	font-size: 15px!important;
	margin-top: 5px;
}
@media screen and (max-width: 768px) {
	.caption{
	font-size: 11px!important;
	}
}






.freelesson-area{
	width: 82%;
	margin: 10px auto 30px;
	padding: 2% 0 2%;
}
@media screen and (max-width: 768px) {
	.freelesson-area{
	margin: 10px auto 30px;
	width: 90%; 
	padding: 1% 0 1%;
	}
}





/* h2：タイトル */
.h2-en {
	text-align: center;
	position: relative;
	font-size:0.8rem;
	letter-spacing: 0.1rem;
	font-weight: bold;
	margin-top: 0;
}
.h2-jp {
	text-align: center;
	position: relative;
	margin-bottom: 2rem;
	margin-top: 0rem;
	font-size:2.0rem;
	letter-spacing: 0.1rem;
	font-weight: bold;
}
/*768px以上*/
@media screen and (min-width: 768px) {
	.h2-jp {
	font-size:2.4rem;
	}
}




/* インナー */
.inner-contact {
	width: 85%;
	padding: 2.5rem 0 3rem;
	margin: 0 auto;
} 
.inner-padding {
	padding: 0 1rem ;
} 
.inner-padding-mix {
	padding: 2.5rem 1rem 3rem;
} 
/*768px以上*/
@media screen and (min-width: 768px) {
	.inner-contact {
	width: 70%;
	max-width: 980px;
	padding: 4rem 0 ;
	margin: 0 auto;
	}
	.inner-padding {
	padding: 1rem 10rem 5rem ;
	} 
	.inner-padding-mix {
	padding: 4rem 10rem 5rem ;
	} 
}

/* ライン line */
.line{
	padding: 0 3rem;
	margin: 6rem 0 4rem;
}
.line-solid{
	border-bottom: 1px solid #000;
}
.line-dotted{
	border-bottom: 1px dotted #000;
}




/****************************************************
** レスポンシブデザイン用メディアクエリ（モバイルファースト
****************************************************/

/*768px以上*/
@media screen and (min-width: 768px) {
	/*タブレットのデザイン内容をここに*/
	
}