@charset "UTF-8";

/*---------------------------------
 common
---------------------------------*/

/*base*/

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-break: strict;
}

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

ul,
li,
ol {
  list-style: none;
}

p {
  color: #525252;
  line-height: 1.8em;
  font-size: 1.6rem;
  margin-bottom: 15px;
}

a {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  opacity: 0.6;
}

a:link,
a:visited,
a:active {
  color: #595959;
}

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

@media only screen and (max-width: 600px) {
  .-pc {
    display: none !important;
  }
  .-sp {
    display: block !important;
  }
}


.smponly {
  display: none;
}
/*header*/

.header {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 100;
  background: #fff;
  height: 127px;
  filter: drop-shadow(6px 6px 24px rgba(4, 0, 0, 0.2));
  padding: 35px 101px 25px;
  font-weight: 400;
  font-style: normal;
}

@media only screen and (max-width: 1510px) {
  .header {
    font-size: 1.6rem;
    height: 97px;
    padding: 25px 80px 15px;
  }
}

.logo {
  width: 12vw;
  padding-bottom: 1rem;
}

.nav  {
  margin-left: auto;
}
.nav ul li {
  padding: 1vw;
}

.nav li a {
  position: relative;
}

.nav li a:hover {
  opacity: 1;
}

.nav li a::after {
  content: " ";
  width: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #ffc4af;
  display: block;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.nav li:hover a::after {
  content: " ";
  width: 80%;
  opacity: 1;
}

.sns ul li {
  padding: 0.3vw;
}

@media only screen and (max-width: 1510px) {
  .sns img {
    width: 80%;
  }
}

.sns .nav_contact {
  height: 80%;
  background: -webkit-linear-gradient(
    left,
    #f6bdbb,
    #f6bdbb 20%,
    #fad08f 80%,
    #fad08f
  );
  background: -o-linear-gradient(
    left,
    #f6bdbb,
    #f6bdbb 20%,
    #fad08f 80%,
    #fad08f
  );
  background: linear-gradient(
    to right,
    #f6bdbb,
    #f6bdbb 20%,
    #fad08f 80%,
    #fad08f
  );
  padding: 0.5em 1em;
  margin-left: 1em;
}

.header a {
  transition: none;
}

@media screen and (max-width: 1270px) {
  .nav {
    display: none;
  }
  .sns {
    padding-right: 2em;
  }
}

@media screen and (min-width: 1271px) {
  .drawer_live_menu {
    display: none;
  }
}

/*footer*/

  .footer {
  background: url("../img/topmain2.jpg") no-repeat;
  background-size: auto;
  background-size: cover;
  }

.jcdalogo {
  mix-blend-mode: multiply;
}

.footer_inner {
  margin: auto;
  padding: 3% 0 2%;
  width: 40vw;
}

.footer .logo {
  margin: auto;
}

.footer ul {
  padding: 1.6em 0 4em;
}

.footer ul li:not(:last-child) {
  padding-right: 0.5vw;
}

.pagetop {
  position: fixed;
  bottom: 2em;
  right: 2em;
  background: #8c8b8b;
  width: 45px;
  height: 45px;
}

.pagetop a {
  display: block;
  position: relative;
  padding-top: 40px;
}

.pagetop i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.pagetop i:hover {
  cursor: pointer;
}

/*---------------------------------
 main
---------------------------------*/

/* common */

.wrapper {
  overflow: hidden;
}

.wrap {
  width: 100%;
  max-width: 1301px;
  margin: 0 auto;
}

.en {
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
  font-size: 1.2em;
  margin-right: 0.1em;
}

h2 {
  background: url("../img/h2back.png") no-repeat;
  background-position: center;
  font-size: 26px;
  color: #595959;
  text-align: center;
  font-weight: bold;
  padding: 30px 0;
  letter-spacing: 0.2em;
}

h2.yellow {
  background: url("../img/h2back_y.png") no-repeat;
    background-position: center;
    color: #fff;
}

h2.red {
  background: url("../img/h2back_r.png") no-repeat;
    background-position: center;
    color: #fff;
}

#about,
#works,
#voice,
#member,
#price,
#seminar,
#contact,
#teacher,
#overview,
.dayflex {
  margin-top: -127px; 
  padding-top: 127px; 
}

.seminar_inner {
  padding: 2em 0;
}

.seminardays {
  display: flex;
  flex-wrap: wrap;
}

.seminardays li {
  width: calc(100%/4 - 20px);
  margin: 10px;
  padding: 10px;
  border-bottom: 5px dotted #fbece6;
}

.seminardays li a {
  display: block;
}

.seminardays li h3 {
  margin-bottom: 20px;
  text-align: left;
  height: 80px;
  line-height: 1.6em;
}

.seminardays li span {
  display: block;
padding: 6px 0;
  font-size: 14px;
  text-align: left;
}

.dayflex {
  display: flex;
  flex-wrap: wrap;
}

.dayicon {
  width: 20%;
}

.daybody {
  width: 60%;
  text-align: left;
}

.daybody h3 {
  margin-bottom: 1.5em;
  font-size: 2rem;
}

.daycheck {
  margin-top: 2em;
  background-color: #fff7e1;
  padding: 20px;
  border-radius: 10px;
}

.daycheck h4 {
  margin-bottom: 10px;
}

.daypict {
  width: 20%;
  height: auto;
  padding: 20px;
  position: relative;
}

.daypict img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
}


.teacherflex {
  display: flex;
  flex-wrap: wrap;
}

.teacherpict {
  width: 150px;
  padding: 20px;
}

.teacherbody {
  width: calc(100% - 150px);
  text-align: left;
  padding: 20px;
  margin-bottom: 20px;
}

.teacherbody h3 {
  margin-bottom: 1.5em;
  font-size: 2rem;
}

/* flex */

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

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

.flex.-aligncenter {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex.-spacebetween {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

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

.text_center {
  text-align: center;
}

/* mainvisual */

.mv {
  background: url("../img/topmain2.jpg") no-repeat;
  background-size: cover;
  position: relative;
  height: 0;
  padding-top: 46.930280957%;
  margin-bottom: 2.5em;
  margin-top: 97px;
}

.mv_inner {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 40.374609781%;
}

.mv_back {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 80%;
  max-width: 1260px;
}

.mv_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 36%;
  padding: 2.5vw 0 0 1vw;
}

.c_copy {
  font-size: 1.6vw;
  font-weight: bold;
  padding-top: 0.5em;
  line-height: 1.7;
}

.c_copy .conoco_text {
  display: inline-block;
  vertical-align: text-bottom;
  width: 12vw;
  padding: 0 10px;
}

.logo_point {
  font-size: 1.1vw;
}

/* 01*about */

.about_text {
  padding: 0.5em 2em;
  margin: 1em auto 0;
  font-size: 16px;
  line-height: 2em;
  text-align: left;
}

.about_inner {
  flex-wrap: wrap;
  justify-content: center;
  width: 85%;
  margin: auto;
  padding: 2em 0 4em;
}

.-circle {
  width: calc((100% / 4) - 2em);
  margin: 0.5em 0.5em 1em;
  padding: 2em 1em;
}

.-circle:nth-child(n + 4) {
  padding: 3vw 1em;
}

.-circle.-one {
  background: url("../img/bg_about1.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}

.-circle.-two {
  background: url("../img/bg_about2.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}

.-circle.-three {
  background: url("../img/bg_about3.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}

.-circle.-four {
  background: url("../img/bg_about4.jpg") no-repeat;
  background-size: contain;
  background-position: center;
}


#about h3 {
  color: #595959;
  padding: 0.5em 0;
  font-size: clamp(12px, 1.4vw, 22px);
}

.-circle p {
  padding: 0 2vw;
}

/* 02*works */

.recommend_bk {
  background: -webkit-linear-gradient(
    -40deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  background: -o-linear-gradient(
    -40deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  background: linear-gradient(
    140deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 2em 0;
}

.recommend_inner {
  width: 70%;
  margin: 0 auto 127px; /* 下は固定ナビの高さ分 */
  padding: 2.2em 0;
  flex-wrap: wrap;
}

.recommend_box {
  width: 23%;
  margin-bottom: 3em;
  background-image: url(../img/cloud.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  padding: 50px 20px 30px;
}

.recommend_box img {
  width: 100%;
}
.recommend_box p {
  text-align: justify;
}

.ov_table {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.ov_table th,.ov_table td {
  border-bottom: 1px solid #c9c9c9;
  padding: 20px;
}

.ov_table th {
  color: #ec6b78;
  width: 150px;
}

.ov_table td {
  text-align: left;
}

.dateflex {
  display: flex;
  flex-wrap: wrap;
}

.datebox {
  width: calc(50% - 20px);
  margin: 10px;
  padding: 10px;
  border: 1px solid #ec6b78;
  border-radius: 5px;
}

.datebox span {
  display: block;
  padding: 5px;
  background-color: #ec6b78;
  color: #fff;
  margin-bottom: 5px;
}

.linkunit {
  margin: 2em auto;
  width: 100%;
}

.linkunit a {
  padding: 25px 50px;
  color: #fff;
  background-color: #ec6b78;
  border-radius: 10px;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.4));
  filter: drop-shadow(0px 3px 10px rgba(0,0,0,.4));
  display: inline-block;
}

.exunit {
  padding: 20px 20px 10px;
  margin:3em auto 2em;
  background-color: #fff7e1;
  border-radius: 10px;
}

.linkunit a.blue {
  background-color: #43a3c9;
}


@media only screen and (max-width: 1510px) {
  /* .recommend_box:not(:last-child) {
    margin-right: 5em;
  } */
}

#works h3 {
  color: #595959;
  padding: 0.5em 0;
  font-size: 1.3vw;
}

@media only screen and (max-width: 1330px) {
  #works h3 {
    font-size: 1.6rem;
  }
}

.recommend_box a {
  transition: none;
}

/* 03*voice */

.showmore_content {
  position: relative;
  overflow: hidden; /* アコーディオン部分非表示 */
}

.showmore_trigger {
  font-size: 1.6rem;
  color: #675233;
  padding-top: 3rem;
}

.more,
.less {
  cursor: pointer; /* 「続きを読む」と「戻す」ボタン */
}

.voice_box {
  background: #f7f6eb;
  width: 75%;
  margin: 2em auto 3em;
  padding: 5rem 5rem 1rem;
  filter: drop-shadow(4px 4px 5px rgba(77, 64, 50, 0.35));
}

.voice_box:last-child {
  margin-bottom: 8em;
}

.voice_img {
  width: 20%;
}

.voice_textbox {
  width: 75%;
}

.voice_textbox p {
  color: #675233;
  line-height: calc(22 / 14);
}

.voice_title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.voice_text {
  font-size: 1.4rem;
  margin-bottom: 3rem;
}

/* 04*member */

.member_inner {
  width: 75%;
  margin: auto;
  padding: 2em 0 7em;
}

.member_box {
  padding-bottom: 3em;
}

.member_box li {
  width: calc((100% - 12vw) / 3);
}

.member_box li:not(:last-child) {
  margin-right: 6vw;
}

/* 04*member_animation */

.rotate {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 1s;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 100%;
}

.rotate img {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

.rotate:hover {
  transform: rotateY(180deg);
}

.rotate img:last-child {
  transform: rotateY(180deg);
}

/* 05*service */

.service_bk {
  background: -webkit-linear-gradient(
    -40deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  background: -o-linear-gradient(
    -40deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  background: linear-gradient(
    140deg,
    rgba(240, 145, 148, 0.25),
    rgba(240, 145, 148, 0.25) 20%,
    rgba(247, 179, 71, 0.25) 80%,
    rgba(247, 179, 71, 0.25)
  );
  margin: 2.2em calc(50% - 50vw) 8em;
  width: 100vw;
}

.service_box {
  width: 70%;
  margin: 0 auto;
  padding: 2.2em 0;
}

.service_img {
  width: 30%;
  height: 100%;
}

.service_text {
  width: 70%;
  padding: 0.5em 2.2em;
  text-align: justify;
}

.service_text h3 {
  color: #595959;
  padding-bottom: 1em;
  font-size: 2.5rem;
}

/* 06*price */

.price_box {
  width: 70%;
  margin: auto;
}

.kihon {
  font-size: 3.8rem;
  border-bottom: solid 1px #595959;
  text-align: center;
  padding-top: 0.5em;
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

.kihon_text {
  padding: 0.5em 0 2.5em;
  width: 70%;
  margin: auto;
}

.price_tbl {
  border: solid 1px #595959;
  width: 100%;
}

.price_tbl th,
.price_tbl td {
  border: solid 1px #595959;
  padding: 10px 20px;
  color: #595959;
}

.price_tbl th {
  font-size: 2.7rem;
}

.price_tbl .f_small {
  font-size: 1.6rem;
}

.price_tbl td {
  vertical-align: middle;
  font-size: 1.5rem;
}

.price_tbl thead tr th {
  background-color: #fff;
}

.price_tbl tr:nth-child(odd) {
  background-color: #fef3f2;
}

.price_tbl td:first-child,
.price_tbl td:last-child {
  font-size: 2rem;
}

.price_tbl td:last-child {
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
  border-left: double;
  text-align: right;
}

.price_tbl td span {
  display: block;
  text-align: center;
}

/* 07*omakase */

.earthback {
  background-image: url(../img/earth.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 25%;
}

.omakase {
  margin: 5em auto 7em;
  background: url("../img/bg_omakase.jpg") no-repeat;
  background-size: 100% 100%;
  width: 90%;
  height: 280px;
  position: relative;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .omakase {
    background: url("../img/bg_omakase@2x.jpg") no-repeat;
    background-size: 100% 100%;
  }
}

.omakase_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 60%;
  padding-bottom: 0.5em;
}

.omakase_title {
  font-size: 2.8rem;
  padding-bottom: 0.5em;
}

/* 08*contact */

.contact_text {
  padding: 0.5em 2em;
  margin: auto;
}

.contactform {
  width: 70%;
  margin: 40px auto;
  font-size: 1.8rem;
}

.contactform-list .flex + * {
  margin-top: 1em;
}

.contactform-list dt {
  width: 35%;
  color: #595959;
}

.contactform-list dd {
  width: 65%;
}

.formparts {
  width: 100%;
  border: 1px solid #c9caca;
  padding: 0.5em;
  outline: none;
  background-color: #efefef;
  font-size: 1.6rem;
  opacity: 0.6;
}

.formparts:focus {
  -webkit-box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
  box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
}

.formparts.-textarea {
  resize: vertical;
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
}

.contactform-list label.required:after {
  margin-left: 1em;
  padding: 0px 6px;
  font-size: 0.6em;
  color: #e60012;
  content: "å¿…é ˆ";
  border: solid 1px #e60012;
}

.contactform .btn-submit {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 280px;
  margin: 2.5em auto 6em;
  font-size: 2rem;
  font-weight: bold;
  background: -webkit-linear-gradient(
    left,
    rgba(240, 145, 148, 0.7),
    rgba(240, 145, 148, 0.7) 20%,
    rgba(247, 179, 71, 0.7) 80%,
    rgba(247, 179, 71, 0.7)
  );
  background: -o-linear-gradient(
    left,
    rgba(240, 145, 148, 0.7),
    rgba(240, 145, 148, 0.7) 20%,
    rgba(247, 179, 71, 0.7) 80%,
    rgba(247, 179, 71, 0.7)
  );
  background: linear-gradient(
    to right,
    rgba(240, 145, 148, 0.7),
    rgba(240, 145, 148, 0.7) 20%,
    rgba(247, 179, 71, 0.7) 80%,
    rgba(247, 179, 71, 0.7)
  );
  padding: 0.5em 0 0.5em 1em;
  color: #595959;
  border-radius: 30px;
  letter-spacing: 1em;
}

.contactform .btn-submit:focus {
  -webkit-box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
  box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
}

.end-message {
  display: none;
  padding: 2em 0 5em;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}

.false-message {
  display: none;
  padding: 2em 0 5em;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}

.bg_breen {
  background: -webkit-linear-gradient(transparent 55%, #d8e58a 55%);
  background: -o-linear-gradient(transparent 55%, #d8e58a 55%);
  background: linear-gradient(transparent 55%, #d8e58a 55%);
}

/* 08*thanks */

#thanks p {
  padding: 2em 0 5em;
}

  .mv_inner {
    top: 80px;
  }

/*---------------------------------
 responsive - tab
---------------------------------*/

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

  body {
    font-size: 1.6rem;
  }

  /*header*/

  .header {
    padding-left: 60px;
  }

  .logo {
    width: 15vw;
  }

  .sns ul li:first-child {
    padding-right: 0.5vw;
  }

  /* mainvisual */

.mv_back {
  width: 70%;
  max-width: 70%;
}
  .mv_inner {
    top: 40px;
  }
}

  @media only screen and (max-width: 900px) {
    .mv_back {
      width: auto;
      max-width: 90%;
    }
    .mv_back::before {
      width: 100%;
      top: 0;
    }
    .mv_back::after {
      width: 42%;
      top: -5px;
    }
.earthback {
  background-size: 50%;
  background-position: right bottom;
  padding-right: 0%;
}

  }

  .mv_text {
    width: 38%;
  }

   .mv_text img {
    width: 85%;
  }

  .c_copy {
    font-size: 1.7vw;
    padding-top: 0.5em;
  }

  .mv_text .conoco_text {
    padding: 0;
  }

  .logo_point {
    font-size: 1.3vw;
  }

  /* 01*about */

  h2 {
    font-size: 2.1rem;
  }

  .about_inner {
    width: 80%;
  }

  .-circle {
    margin: 0 0.2em;
  }

  .-circle img {
    height: 28%;
  }

  .-circle p {
    font-size: 1.2vw;
  }

  /* 02*works */

  /*   .recommend_bk {
    margin-bottom: 97px;
    padding-bottom: 1em;
  }

  .recommend_inner {
    width: 80%;
    margin: 0 auto;
  } */

  /* 03*voice */

  #voice {
    margin-top: -97px;
    padding-top: 97px;
  }

  .voice_box {
    padding: 3.5rem 3.5rem 1rem;
  }

  .voice_title {
    font-size: 1.8rem;
  }

  .showmore_trigger {
    padding-top: 2rem;
  }

  /* 04*member */

  .member_inner {
    padding-bottom: 5em;
  }

  /* 05*service */

  .service_box {
    width: 80%;
  }

  .service_img {
    width: 40%;
  }

  .service_text {
    width: 60%;
    padding-right: 1em;
  }

  /* 06*price */

  .kihon {
    font-size: 3.2rem;
  }

  .kihon_text {
    width: 80%;
  }

  .price_tbl th {
    font-size: 2.4rem;
  }

  .price_tbl td:first-child,
  .price_tbl td:last-child {
    font-size: 1.8rem;
  }

  .price_tbl td:first-child {
    width: 25%;
  }

  /* 07*omakase */

  .omakase_inner {
    width: 70%;
  }

  /*footer*/

  .footer ul {
    padding: 1em 0 2em;
  }
}

@media screen and (max-width: 896px) {
  .header {
    padding-left: 50px;
  }

  .logo {
    width: 18vw;
  }

  .sns img {
    width: 5vw;
  }

  .sns .nav_contact {
    font-size: 1.6vw;
  }

  /* mainvisual */

  .mv_inner {
    top: 75px;
  }

  /* 01*about */

  h2 {
    font-size: 21px;
  }

  .about_inner {
    padding: 1.5em 0 4em;
    width: 90%;
  }

  .-circle {
    padding: 1em;
    margin-bottom: 1em;
  }

  .-circle img {
    height: 24%;
  }

  #about h3 {
    font-feature-settings: "palt";
  }

  /* 02*works */

  /*   .recommend_box:not(:last-child) {
    margin-right: 4em;
  } */

  /* 04*member */

  .member_inner {
    width: 80%;
  }

  .member_box li:not(:last-child) {
    margin-right: 4vw;
  }

  .member_box li {
    width: calc((100% - 8vw) / 3);
  }

  /* 05*service */

  .service_text h3 {
    font-size: 2.2rem;
    padding-bottom: 0.5em;
  }

  /* 07*omakase */

  .omakase_inner {
    width: 75%;
  }

  .omakase_title {
    font-size: 2.6rem;
  }

  /* 06*price */

  .price_box {
    width: 75%;
  }

  .price_tbl th {
    font-size: 2.2rem;
  }

  .price_tbl .f_small {
    font-size: 1.4rem;
  }

  .price_tbl td:first-child,
  .price_tbl td:last-child {
    font-size: 1.6rem;
  }

  /* 08*contact */

  .contactform {
    width: 80%;
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 750px) {
  .about_inner {
    width: 100%;
  }

  .-circle {
    margin-bottom: 0;
  }

  @media screen and (max-width: 627px) {
    .-circle:nth-child(n + 4) {
      padding: 1em;
    }
    #about h3 {
      font-size: 1.1rem;
    }
  }

  .-circle img {
    height: 20%;
  }

  .price_tbl th {
    font-size: 2rem;
  }
}

/*---------------------------------
 responsive - sp
---------------------------------*/

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

  .flex.-spBlock {
    display: block;
  }

  body {
    font-size: 1.25rem;
  }

  #about,
  #works,
  #voice,
  #member,
  #price,
  #contact {
    margin-top: -90px; /* 固定ナビの高さ分のネガティブマージン */
    padding-top: 90px; /* 打ち消し用のパディング */
  }

  /*header*/

  .header {
    height: 90px;
    padding-left: 30px;
  }

  .logo {
    width: 120px;
  }

  .mail {
    margin-left: auto;
    padding: 1em;
  }

  .mail img {
    width: 70%;
  }

  /* mainvisual */

  .mv {
    background: url("../img/topmain2_smp.png") no-repeat;
    background-size: contain;
    padding-top: 144.155844155%;
    margin-top: 47px;
  }

.pconly {
  display: none;
}

.smponly {
  display: block;
}

  .mv_inner {
    top: 8%;
    left: 0;
    padding-top: 128.8333333%;
  }

  .mv_back {
    width: 100%;
  }

  .mv_back img {
    width: 100%;
  }

  .mv_back::before {
    background: url(../img/img_mv_women1_sp@2x.png) no-repeat;
    background-size: contain;
    top: -16vw;
    left: 5vw;
    width: 90%;
  }

  .mv_back::after {
    background: url(../img/img_mv_women2_sp@2x.png) no-repeat;
    background-size: contain;
    top: 45vw;
    left: 5vw;
    width: 90%;
  }

  .mv_text {
    width: 80%;
  }

  .c_copy {
    font-size: 1.6rem;
    padding: 1em 0 0.5em;
  }

  .c_copy .conoco_text {
    width: 21vw;
  }

  .c_copy .conoco_text img {
    vertical-align: inherit;
    width: 90%;
  }

  .logo_point {
    font-size: 1.3rem;
  }

  /* 01*about */

h2, h2.yellow, h2.red {
  background-size: 70%;
  margin: auto;
  letter-spacing: 0;
}

.seminardays h3, .seminardays li span {
  display: none;
}

.seminardays li {
  width: calc(100%/2 - 20px);
  border: none;
}

.daypict {
  display: none;
}

.recommend_box {
  padding: 30px 20px 30px;
  background-color: rgba(255,255,255,0.6);
  background-image: none;
  border-radius: 20px;
  margin: 0 0 10px;
  width: 100%;
}

.recommend_bk img {
  width: 200px;
  height: auto;
}

  .about_text {
    width: 90%;
    padding: 1em 0;
  }

  .about_inner {
padding: 0 10px 7em;
  }

.daybody {
  width: 100%;
  text-align: left;
  padding: 10px;
}

.daybody h3,.daybody h4 {
  text-align: center;
}

.datebox {
  width: calc(100% - 20px);
}

.dayflex {
  display: block;
}
.dayicon {
  width: 100%;
  text-align: center;
}
.dayicon img{
  max-width: 20%;
}

  .-circle {
    width: 80%;
    margin: 1em auto;
    padding: 3em;
  }

  .-circle:nth-child(n + 4) {
    padding: 3em;
  }

  .-circle p {
    width: 50%;
    margin: auto;
    padding: 0;
    font-size: 2vw;
  }

  #about h3 {
    padding: 0.5em 0;
    font-size: 1.5rem;
  }

.teacherflex {
  display: block;
  text-align: center;
}

.teacherpict {
  width: 100%;
  text-align: center;
}

.teacherpict img {
  width: 100%;
  max-width: 100px;
}
.teacherbody {
  width: 100%;
}

.teacherbody h3 {
  text-align: center;
}

  /* 02*works */

  .recommend_inner {
    padding: 3em 0 1em;
    margin-top: 0;
    margin-bottom: 8rem;
    width: 90%;
  }

  /*   .recommend_box {
    width: 90%;
    margin: auto;
  }

  .recommend_box:not(:last-child) {
    margin-right: auto;
    margin-bottom: 2em;
  } */

  #works h3 {
    font-size: 1.4rem;
  }

  /* 03*voice */

  .voice_box {
    margin: 3em auto 2em;
  }

  .voice_img {
    width: 50%;
    margin: auto;
  }

  .voice_textbox {
    width: 100%;
    margin-top: 2rem;
  }

  .voice_title {
    font-size: 1.6rem;
  }

  .voice_text {
    font-size: 1.2rem;
  }

  .showmore_trigger {
    font-size: 1.4rem;
  }

  /* 04*member */

  .member_box li {
    width: calc((100% - 10vw) / 2);
  }

  .member_box li:not(:last-child) {
    margin-right: 5vw;
  }

  .coder li:not(:last-child) {
    margin-bottom: 2vw;
  }

  .member_box {
    flex-wrap: wrap;
  }

  .rotate:hover {
    pointer-events: none;
  }

  .roll {
    transform: rotateY(180deg);
  }

  /* 05*service */
  .service_bk {
    padding-bottom: 2.2em;
  }
  .service_img {
    width: 100%;
    text-align: center;
    padding-bottom: 1em;
  }

  .service_text {
    width: 100%;
  }

  .service_text h3 {
    font-size: 1.8rem;
    text-align: center;
  }

  /* 06*price */

  .price_box {
    width: 85%;
  }

  .kihon {
    font-size: 2.2rem;
    margin: auto;
  }

  .price_box p {
    width: 75%;
  }

  .price_tbl th {
    font-size: 1.8rem;
  }

  .price_tbl .f_small {
    font-size: 1.25rem;
  }

  .price_tbl td {
    font-size: 1rem;
    padding: 5px 10px;
  }

  .price_tbl td:first-child,
  .price_tbl td:last-child {
    font-size: 1.3rem;
  }

  .price_tbl td:first-child {
    width: 30%;
  }

  /* 07*omakase */

  .omakase {
    margin: 7em auto 5em;
    background: url(../img/bg_omakase_sp@2x.jpg) no-repeat;
    background-size: 100% 100%;
    height: 250px;
  }

  .omakase_inner {
    width: 80%;
  }

  .omakase_title {
    font-size: 2.2rem;
  }

  /* 08*contact */

  #contact h2{
    font-size: 2.4rem;
    white-space: nowrap;
  }

  @media screen and (max-width: 320px) {
    #contact h2{
      font-size: 2.2rem;
    }
  }

  .contactform {
    font-size: 1.25rem;
  }

  .formparts {
    font-size: 1.25rem;
  }

  .contactform-list dt {
    width: 80%;
    margin-bottom: 0.5em;
  }

  .contactform-list dd {
    width: 100%;
  }

  .contactform .btn-submit {
    margin-bottom: 3em;
  }

  /*footer*/

  .footer_inner {
    padding: 5% 0 3%;
  }

  .sns img {
    width: 80%;
  }
}

@media screen and (max-width: 428px) {
  .logo {
    width: 100px;
  }

  .mail {
    padding: 0;
  }

  .mv_inner {
    top: 10%;
  }

  .mv_text {
    width: 80%;
  }

  .mv_text img {
    width: 70%;
  }

  .c_copy {
    font-size: 1.4rem;
    padding: 1em 0 0.5em;
  }

  .logo_point {
    font-size: 1rem;
  }

  #about h3 {
    font-size: 1.4rem;
  }

  .-circle p {
    width: 75%;
    font-size: 2.6vw;
  }

  /* 04*member */

  .member_box li {
    width: calc((100% - 4vw) / 2);
  }

  .member_box li:not(:last-child) {
    margin-right: 2vw;
  }

  .kihon {
    font-size: 2rem;
  }

  .price_box p {
    width: 85%;
  }

  .omakase_inner {
    width: 80%;
  }

  .omakase_title {
    font-size: 2rem;
  }

  .contactform .btn-submit {
    width: 200px;
  }
}

@media screen and (max-width: 320px) {
  .mv_inner {
    top: 12%;
  }

  .-circle {
    padding: 2em;
  }

  .member_inner {
    width: 50%;
  }

  .member_box li {
    width: 100%;
  }

  .member_box li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 2vw;
  }

  .service_text h3 {
    font-size: 1.6rem;
  }

  .price_box p {
    width: 90%;
  }

  .omakase_title {
    font-size: 1.6rem;
  }

  .contact_text {
    padding: 0.5em 1.5em;
  }
}