@charset "UTF-8";

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

/*base*/

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
  line-break: strict;
}

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

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

p {
  color: #595959;
}

a {
  transition: all 1s;
  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;
  }
}

/*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-family: sans-serif;
  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 {
  padding-left: 3vw;
}

.nav ul li {
  padding: 1vw;
}

.nav a:hover {
  background: -webkit-linear-gradient(transparent 55%, #d8e58a 55%);
  background: -o-linear-gradient(transparent 55%, #d8e58a 55%);
  background: linear-gradient(transparent 55%, #d8e58a 55%);
  opacity: inherit;
}

.sns {
  margin-left: auto;
}

.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) {
  .zdo_drawer_menu {
    display: none;
  }
}

/*footer*/

.footer {
  background: url("../img/bg_footer.jpg") no-repeat;
  background-size: 100% 100%;
}

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

.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;
  background: #fff;
  margin: 0 auto;
}

.en {
  font-family: "NTR", sans-serif;
  font-size: 1.2em;
  margin-right: 0.1em;
}

h2 {
  background: url("../img/bg_h2.jpg") no-repeat;
  background-position: center;
  font-size: calc(30px + 6 * (100vw - 1440px) / 480);
  color: #595959;
  text-align: center;
  line-height: 3;
  font-weight: bold;
}

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

/* 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/bg_mv.jpg") no-repeat;
  background-size: contain;
  position: relative;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 46.930280957%;
  margin-bottom: 2.5em;
}

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

.mv_inner {
  position: absolute;
  top: 127px;
  left: 0;
  width: 100%;
  height: 0;
  /* (画像の高さ / 画像の横幅) × 100 */
  padding-top: 40.374609781%;
}

@media only screen and (max-width: 1510px) {
  .mv_inner {
    top: 100px;
  }
}

@media only screen and (max-width: 1330px) {
  .mv_inner {
    top: 90px;
  }
}

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

.mv_back::before {
  content: "";
  display: inline-block;
  background: url(../img/img_mv_women1@2x.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5%;
  left: -11vw;
  width: 33%;
  height: 100%;
}

.mv_back::after {
  content: "";
  display: inline-block;
  width: 39%;
  height: 100%;
  background: url(../img/img_mv_women2@2x.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: -9vw;
}

.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: auto;
  font-size: clamp(12px, 1.4vw, 22px);
}

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

.-circle {
  width: calc((100% / 3) - 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;
}

.-circle.-five {
  background: url("../img/bg_about5.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 */

.works_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;
  margin-top: 1em;
}

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

.works_box {
  /* width: 514px; */
  width: 48%;
  /* margin-right: 8em; */
  margin-bottom: 3em;
}
.works_box img {
  width: 100%;
}
.works_box p {
  text-align: justify;
}
.works_box:nth-of-type(2n) {
  margin-right: 0;
}
/* .works_box:not(:last-child) {
  margin-right: 8em;
} */

@media only screen and (max-width: 1510px) {
  /* .works_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;
  }
}

.works_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: "M PLUS 1p", 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: "M PLUS 1p", sans-serif;
  border-left: double;
  text-align: right;
}

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

/* 07*omakase */

.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: "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro", メイリオ, Meiryo;
}

.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;
}

/*---------------------------------
 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: 55%;
  }

  @media only screen and (max-width: 900px) {
    .mv_back {
      width: auto;
    }
    .mv_back::before {
      width: 100%;
      top: 0;
    }
    .mv_back::after {
      width: 42%;
      top: -5px;
    }
  }

  .mv_inner {
    top: 80px;
  }

  .mv_text {
    width: 38%;
  }

  @media only screen and (max-width: 900px) {
    .mv_text {
      padding: 0;
    }
  }

  .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: 3rem;
  }

  .about_inner {
    width: 80%;
  }

  .-circle {
    margin: 0 0.2em;
  }

  .-circle img {
    height: 28%;
  }

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

  /* 02*works */

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

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

  .works_inner.flex {
    flex-direction: column;
  }

  .works_box {
    width: 100%;
    margin: 0 auto 4em;
  }
  /* 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: 2.6rem;
  }

  .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 */

  /*   .works_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;
  }
}

  /* 09*partner */

  #partner{
    margin-top: 127px;
    margin-bottom: 96px;
  }

  .partner_banner{
    text-align: center;
    display: block;
    width: 302px;
    margin: 10px auto 0;
  }

/*---------------------------------
 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/bg_mv_sp@2x.jpg") no-repeat;
    background-size: contain;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 144.155844155%;
  }

  .mv_inner {
    top: 8%;
    left: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 128.8333333%;
  }

  .mv_back {
    width: 100%;
  }

  .mv_back img {
    width: 90%;
  }

  .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 {
    background-size: contain;
    width: 80%;
    margin: auto;
  }

  .about_text {
    width: 80%;
    padding: 1em;
  }

  .about_inner {
    padding-top: 0;
    padding-bottom: 7em;
  }

  .-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;
  }

  /* 02*works */

  .works_inner {
    padding: 3em 0 1em;
    margin-top: 2em;
    margin-bottom: 8rem;
  }

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

  .works_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;
  }

  /* 09*partner */

  #partner{
    margin-top: 90px;
    margin-bottom: 90px;
  }

  /*footer*/

  .footer {
    background: url(../img/bg_footer_sp@2x.jpg) no-repeat;
    background-size: 100% 100%;
  }

  .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;
  }
}