@charset "UTF-8";
/*************************************************
common-style
*************************************************/
* {
  box-sizing: border-box;
}

.ie_ObjectFit {
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-family: "Noto Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #575048;
}

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

img {
  width: 100%;
}

a {
  cursor: pointer;
}

input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

/*************************************************
共通設定
*************************************************/
h4 {
  font-size: 3.2rem;
  font-weight: 500;
  padding: 8rem 0 2.4rem;
}

.introduction_container p,
.product_container p,
.contact_container p,
.product_container p,
.faq_container p {
  line-height: 2;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 599px) {
  .introduction_container p,
  .product_container p,
  .contact_container p,
  .product_container p,
  .faq_container p {
    margin-bottom: 2rem;
  }
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
}
.flex {
  display: flex;
}

.space {
  display: none;
}
@media screen and (max-width: 599px) {
  .space {
    display: block;
  }
}

.btn {
  font-size: 1.4rem;
  text-align: center;
  display: flex;
  margin-top: 4rem;
}
@media screen and (max-width: 1200px) {
  .btn {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 599px) {
  .btn {
    flex-direction: column;
    margin: 3% 10% 0 10%;
  }
}

.btn_mail {
  width: 240px;
  height: 5.2rem;
  background: #fff;
  border: 1px solid #575048;
  border-radius: 2.6rem;
  transition: 0.3s ease-in-out;
}
.btn_mail a {
  padding: 1.6rem 3rem;
}
.btn_mail:hover {
  color: #fff;
  background: #575048;
  opacity: 0.5;
}
@media screen and (max-width: 1200px) {
  .btn_mail {
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 599px) {
  .btn_mail {
    margin-bottom: 2rem;
    width: 80vw;
  }
}

.btn_line {
  width: 240px;
  height: 5.2rem;
  background: #69bc69;
  border: 1px solid #69bc69;
  border-radius: 2.6rem;
  color: #fff;
  transition: 0.3s ease-in-out;
  margin-left: 2.4rem;
}
.btn_line a {
  padding: 1.6rem 3rem;
}
.btn_line:hover {
  color: #69bc69;
  background: #fff;
}
@media screen and (max-width: 1200px) {
  .btn_line {
    margin-left: 0;
  }
}
@media screen and (max-width: 599px) {
  .btn_line {
    margin-left: 0;
    width: 80vw;
  }
}

.btn_link {
  width: 240px;
  height: 5.2rem;
  background: #fff;
  border: 1px solid #575048;
  border-radius: 2.6rem;
  transition: 0.3s ease-in-out;
}
.btn_link a {
  padding: 1.6rem 3rem;
}
.btn_link:hover {
  color: #fff;
  background: #575048;
  opacity: 0.5;
}
@media screen and (max-width: 1200px) {
  .btn_link {
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 599px) {
  .btn_link {
    margin-bottom: 2rem;
    width: 80vw;
  }
}

.accsent {
  font-size: 7.2rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ebebea;
  z-index: 5;
}
@media screen and (max-width: 599px) {
  .accsent {
    font-size: 4.8rem;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* フェードイン(初期値) */
.scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s, transform 0.8s;
}

.scroll_active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.page-header {
  width: 100%;
  margin-top: 2rem;
  padding: 12rem 0;
  text-align: center;
  background-color: #f7f7f7;
}
.page-header .page_title {
  font-size: 3.2rem;
}
@media screen and (max-width: 599px) {
  .page-header .page_title {
    font-size: 2rem;
  }
}
.page-header .page_sub_title {
  font-weight: 200;
  font-style: italic;
  font-size: 1.8rem;
  margin-top: 1rem;
}
@media screen and (max-width: 599px) {
  .page-header .page_sub_title {
    font-size: 1.4rem;
  }
}

.breadcrumbs_list {
  padding: 10px 2%;
}
.breadcrumbs_list ul {
  display: flex;
  align-items: center;
}
.breadcrumbs_list ul li {
  font-size: 1.2rem;
}
.breadcrumbs_list ul li::before {
  content: ">";
  display: inline-block;
  margin: 0 10px;
}
.breadcrumbs_list ul li:first-of-type::before {
  display: none;
}
.breadcrumbs_list ul li a {
  text-decoration: underline;
  transition: opacity 0.3s;
}
.breadcrumbs_list ul li a:hover {
  opacity: 0.7;
}

/*************************************************
header
*************************************************/
.header_container {
  width: 100%;
  height: 84px;
}
.header_container .logo {
  margin-left: 2%;
  width: 11.2rem;
}
@media screen and (max-width: 599px) {
  .header_container .logo {
    width: 9.6rem;
  }
}
.header_container .logo a {
  transition: opacity 0.3s;
}
.header_container .logo a:hover {
  opacity: 0.7;
}

/*************************************************
top
*************************************************/
.top_logo {
  margin-left: 4%;
  width: 11.2rem;
}
@media screen and (max-width: 599px) {
  .top_logo {
    width: 9.6rem;
  }
}

.mv_container {
  display: flex;
}
@media screen and (max-width: 599px) {
  .mv_container {
    flex-wrap: wrap;
  }
}

.mv_left {
  background: #fbfbfb;
  flex-basis: 55%;
}
@media screen and (max-width: 599px) {
  .mv_left {
    flex-basis: 100%;
    margin: 0 auto;
    height: 100vh;
  }
}

.machine {
  width: 70%;
  margin-left: 20%;
}
@media screen and (max-width: 599px) {
  .machine {
    position: relative;
    width: 100%;
    margin-left: 0;
    z-index: 5;
  }
}

.sales_copy {
  width: 39.8rem;
}
@media screen and (max-width: 599px) {
  .sales_copy {
    width: 80%;
    margin: 2% auto 0;
  }
}

.machine_title {
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 200;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 599px) {
  .machine_title {
    margin: -2rem auto 2rem;
  }
}

.top_extantion_machine {
  position: relative;
  margin-left: 8%;
}
@media screen and (max-width: 599px) {
  .top_extantion_machine {
    margin: 20% 0 8% 2.4%;
  }
}

.top_6d_extention {
  position: absolute;
  content: "";
  top: 30%;
  left: -10%;
  z-index: 1;
  border-bottom: 1px solid #575048;
  border-top: 1px solid #575048;
  font-size: 3.2rem;
  letter-spacing: 0.25rem;
  padding: 1rem 0;
}
@media screen and (max-width: 1200px) {
  .top_6d_extention {
    font-size: 2.4rem;
    top: 20%;
  }
}
@media screen and (max-width: 1071px) {
  .top_6d_extention {
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
  }
}
@media screen and (max-width: 599px) {
  .top_6d_extention {
    font-size: 2rem;
    top: 0%;
    left: auto;
    right: 5%;
  }
}

.top_btn {
  margin-left: 8%;
}
@media screen and (max-width: 599px) {
  .top_btn {
    margin-left: 10%;
  }
}

.top_6d {
  font-style: italic;
  font-size: 2.8rem;
  font-weight: 100;
  margin-right: 1rem;
}

.top_extention {
  font-size: 1.4rem;
}

.sub_copy {
  color: #e3e2e1;
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 3rem 0 3rem 6rem;
}
@media screen and (max-width: 599px) {
  .sub_copy {
    position: relative;
    margin: 3rem 0 3rem 0;
    top: -67vh;
    z-index: 1;
  }
}

.mv_right {
  background: url(../images/top_mainvisual.jpg) center;
  background-size: cover;
  flex-basis: 45%;
}
@media screen and (max-width: 599px) {
  .mv_right {
    position: relative;
    z-index: 2;
    flex-basis: 100%;
    height: 36rem;
  }
}

/*************************************************
メリット
*************************************************/
.introduction_container {
  margin-top: 16rem;
}
@media screen and (max-width: 599px) {
  .introduction_container {
    margin-top: 6rem;
  }
}

.three_points {
  background: url(../images/three_points_bg.svg) no-repeat;
  width: 20rem;
  height: 4.5rem;
  margin: 0 0 4rem -1rem;
  transform: rotate(-4deg);
}
@media screen and (max-width: 599px) {
  .three_points {
    margin: 6rem auto;
  }
}
.three_points p {
  padding-top: 1.2rem;
  line-height: 1;
  text-align: center;
}
.three_points span {
  font-size: 3.2rem;
  font-weight: 400;
}

.main_title_flex {
  display: flex;
}
@media screen and (max-width: 599px) {
  .main_title_flex {
    justify-content: center;
  }
}

.main_title {
  font-size: 4.4rem;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 599px) {
  .main_title {
    font-size: 2.4rem;
  }
}
.main_title h3 {
  font-style: italic;
}

.six-d {
  font-style: italic;
  font-size: 5.6rem;
  margin-right: 1.2rem;
  line-height: 5rem;
}
@media screen and (max-width: 599px) {
  .six-d {
    font-size: 2.8rem;
    line-height: 2.7rem;
  }
}

.furigana {
  font-size: 1.8rem;
}
@media screen and (max-width: 599px) {
  .furigana {
    font-size: 1.6rem;
  }
}

.introduction_box01 {
  position: relative;
  margin-top: 18rem;
}
@media screen and (max-width: 599px) {
  .introduction_box01 {
    margin-top: 6rem;
  }
}

.point {
  font-size: 11.2rem;
  font-style: italic;
  color: #e3e2e1;
  font-weight: 500;
  line-height: 1.4;
  z-index: 3;
  position: absolute;
  left: 0;
  top: -16%;
}
@media screen and (max-width: 599px) {
  .point {
    font-size: 7.2rem;
    top: -7%;
    left: 4%;
  }
}

.introduction_contents {
  background: #fafafa;
  opacity: 0.82;
  border-radius: 0 1rem 1rem 0;
  z-index: 2;
  width: 50%;
  padding: 0 8rem 13rem 0;
  margin-left: 0;
}
@media screen and (max-width: 599px) {
  .introduction_contents {
    width: 100%;
    padding: 0 1.6rem 2.8rem;
  }
}

.introduction_title {
  position: relative;
}
@media screen and (max-width: 599px) {
  .introduction_title {
    font-size: 2rem;
    text-align: center;
  }
}

.beauty_accsent {
  font-size: 9rem;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-top: -8rem;
}
@media screen and (max-width: 599px) {
  .beauty_accsent {
    font-size: 4.8rem;
    left: 4rem;
    bottom: 29rem;
  }
}

.beauty_img {
  position: absolute;
  top: 0;
  right: 0;
  width: 60vw;
  border-radius: 1rem 0 0 1rem;
  z-index: -1;
  margin-top: -10rem;
}
@media screen and (max-width: 599px) {
  .beauty_img {
    margin-top: 8rem;
    width: 100%;
    z-index: 1;
    position: initial;
    border-radius: 0;
  }
}

.introduction_box02 {
  margin-top: 14rem;
  display: flex;
  position: relative;
}
@media screen and (max-width: 599px) {
  .introduction_box02 {
    flex-direction: column-reverse;
  }
}

.lightness_img {
  flex-basis: 30%;
  max-width: 40rem;
  margin-right: 6rem;
}
@media screen and (max-width: 599px) {
  .lightness_img {
    max-width: 30rem;
    margin: 4rem auto 0;
  }
}

.point02 {
  margin-right: 0;
  text-align: right;
  right: 0;
  top: -15%;
}
@media screen and (max-width: 599px) {
  .point02 {
    text-align: initial;
    top: -5%;
    left: 1.6rem;
  }
}

.lightness_contents {
  background: #f6f6f6;
  flex-basis: 65%;
  border-radius: 1rem;
  padding: 0 8rem 8rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .lightness_contents {
    padding: 0 1.6rem 2.8rem;
    border-radius: 0;
  }
}
.lightness_contents .lightness_title {
  text-align: right;
}
@media screen and (max-width: 599px) {
  .lightness_contents .lightness_title {
    font-size: 2rem;
    text-align: center;
  }
}

.lightness_accsent {
  font-size: 6.4rem;
  position: absolute;
  bottom: -5%;
  right: 0;
}
@media screen and (max-width: 599px) {
  .lightness_accsent {
    font-size: 4.8rem;
    left: 4rem;
    bottom: 35rem;
  }
}

.img-lists {
  display: flex;
  justify-content: space-between;
  margin-top: -10rem;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 599px) {
  .img-lists {
    flex-direction: column;
    align-items: center;
    margin-top: 6rem;
  }
}

.technology_img {
  border-radius: 1rem;
  filter: drop-shadow(0px 3px 3.6px rgba(0, 0, 0, 0.16));
  transform: translateZ(0px); /* ハードウェアアクセラレーションに仕事させるためだけの記述 */
  max-width: 300px;
}
@media screen and (max-width: 599px) {
  .technology_img {
    width: 30rem;
    height: 30rem;
    margin: 1.6rem auto;
  }
}

@media screen and (max-width: 599px) {
  .point03 {
    top: -3%;
  }
}

.introduction_box03 .introduction_contents {
  width: 68%;
}
@media screen and (max-width: 599px) {
  .introduction_box03 .introduction_contents {
    width: 100%;
  }
}

.technology_comments {
  position: relative;
}

.technology_accsent {
  font-size: 8rem;
  transform: rotate(90deg);
  position: absolute;
  bottom: 30%;
  left: -24rem;
}
@media screen and (max-width: 1200px) {
  .technology_accsent {
    z-index: -1;
  }
}
@media screen and (max-width: 599px) {
  .technology_accsent {
    transform: rotate(0);
    z-index: 1;
    font-size: 4.8rem;
    top: 28%;
    left: 0;
  }
}

/*************************************************
salonlist
*************************************************/
.salonlist_container {
  margin-top: 16rem;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .salonlist_container {
    margin-top: 5rem;
  }
}
.salonlist_container .salonlist_content {
  background-color: #f7f7f7;
  border-radius: 1rem;
}
.salonlist_container .btn {
  justify-content: center;
  padding-bottom: 12rem;
}
@media screen and (max-width: 599px) {
  .salonlist_container .btn {
    padding-bottom: 10rem;
  }
}
.salonlist_container .btn p {
  line-height: 1.4;
}

/*************************************************
contact
*************************************************/
.contact_container {
  margin-top: 16rem;
  background: url(../images/contact_bg01.png) center;
  background-size: cover;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .contact_container {
    margin-top: 5rem;
  }
}
.contact_container .btn {
  justify-content: center;
  padding-bottom: 12rem;
}
@media screen and (max-width: 599px) {
  .contact_container .btn {
    padding-bottom: 10rem;
  }
}
.contact_container .btn p {
  line-height: 1.4;
}

.contact_title {
  padding: 12rem 0 2rem;
  font-size: 3.2rem;
  font-weight: 200;
  font-style: italic;
  text-align: center;
}
@media screen and (max-width: 599px) {
  .contact_title {
    padding-top: 10rem;
  }
}

.contact_container02 {
  background: url(../images/contact_bg02.png) center;
  background-size: cover;
}
@media screen and (max-width: 599px) {
  .contact_container02 {
    background-position: left 22% top;
  }
}

/*************************************************
製品一覧
*************************************************/
.product_container {
  position: relative;
  margin-top: 16rem;
}
@media screen and (max-width: 599px) {
  .product_container {
    margin-top: 8rem;
  }
}
.product_container .six-d {
  font-weight: 100;
}
.product_container .main_title {
  font-weight: 200;
}

.product_accsent {
  color: #e3e2e1;
  position: absolute;
  top: 64%;
  right: -24%;
  transform: rotate(90deg);
  z-index: -1;
}
@media screen and (max-width: 599px) {
  .product_accsent {
    display: none;
  }
}

.product_content {
  display: flex;
  margin-top: 6rem;
}
@media screen and (max-width: 599px) {
  .product_content {
    flex-direction: column;
    margin-top: 2rem;
  }
}

.machine_inner {
  margin-left: 8rem;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}
@media screen and (max-width: 599px) {
  .machine_inner {
    display: block;
    margin: 0 1.6rem;
  }
}
@media screen and (max-width: 599px) {
  .machine_inner .machine_comment {
    margin-top: 2rem;
  }
}

.machine_bg {
  background: #f7f7f7;
  width: 100%;
  height: 31.2rem;
  border-radius: 1rem;
  z-index: -2;
  position: absolute;
  bottom: -8rem;
  left: 8rem;
}
@media screen and (max-width: 1071px) {
  .machine_bg {
    width: 80%;
    height: 24rem;
  }
}
@media screen and (max-width: 599px) {
  .machine_bg {
    display: none;
  }
}

.machine_color {
  position: relative;
  background: #dfccce;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 8rem 0 0 -12rem;
  z-index: 1;
}
@media screen and (max-width: 599px) {
  .machine_color {
    margin: -5.6rem 0 0;
  }
}
.machine_color span {
  font-weight: 200;
  font-size: 3.2rem;
  font-style: italic;
  padding-right: 0.4rem;
}
.machine_color::before {
  content: "";
  background: #dfccce;
  opacity: 0.6;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  position: absolute;
  bottom: -10px;
  left: 10px;
  z-index: -1;
}

.extension_content {
  margin-top: 18rem;
}
@media screen and (max-width: 599px) {
  .extension_content {
    margin: 4.8rem 1.6rem;
  }
}

.extensions_flex {
  display: flex;
}
@media screen and (max-width: 599px) {
  .extensions_flex {
    flex-wrap: wrap;
  }
}
.extensions_flex p {
  flex-basis: 50%;
  margin-left: 3.2rem;
}
@media screen and (max-width: 599px) {
  .extensions_flex p {
    flex-basis: 100%;
    margin: 3.2rem auto 2rem;
  }
}

.extention_inner {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 599px) {
  .extention_inner {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
  }
}

.extention_color {
  margin: auto 1rem auto auto;
}

.extention_color {
  position: relative;
  background: #e7d7bb;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  z-index: 1;
}
@media screen and (max-width: 599px) {
  .extention_color {
    margin-top: -2rem;
  }
}
.extention_color span {
  font-weight: 200;
  font-size: 3.2rem;
  font-style: italic;
  padding-right: 0.4rem;
}
.extention_color::before {
  content: "";
  background: #e7d7bb;
  opacity: 0.6;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  position: absolute;
  bottom: -10px;
  left: 10px;
  z-index: -1;
}

.extention_slider {
  margin-top: 6rem;
}
@media screen and (max-width: 599px) {
  .extention_slider {
    margin-top: 0;
  }
}

.slider-item {
  margin: 0 1.6rem;
}

/*************************************************
snap
*************************************************/
.snap_container {
  margin-top: 12rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .snap_container {
    margin-top: 10rem;
  }
}

.snap_accsent {
  color: #e3e2e1;
  position: absolute;
  top: 42%;
  left: -12%;
  transform: rotate(90deg);
  z-index: -1;
}
@media screen and (max-width: 599px) {
  .snap_accsent {
    display: none;
  }
}

.snap_content {
  text-align: center;
}
.snap_content .snap_title {
  position: relative;
  font-size: 3.2rem;
  font-weight: 200;
  font-style: italic;
  padding-bottom: 2rem;
  display: inline-block;
}
.snap_content .snap_title::after {
  content: "";
  background: url(../images/atention.svg);
  transform: rotate(14deg);
  width: 5.8rem;
  height: 3.4rem;
  position: absolute;
  top: -51%;
  right: -62%;
}

.snap_gallery {
  -moz-columns: 4;
       columns: 4; /*段組みの数*/
  padding: 0 15px;
  margin-top: 6rem;
}
@media screen and (max-width: 599px) {
  .snap_gallery {
    margin-top: 6rem;
    -moz-columns: 2;
         columns: 2;
  }
}
.snap_gallery li {
  margin-bottom: 20px; /*各画像下に余白をつける*/
}
.snap_gallery img {
  width: 100%;
  height: auto;
}

/*画像を出現させるアニメーションCSS*/
.flipLeft {
  animation-name: flipLeft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}
@keyframes flipLeft {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}

/*************************************************
tiktok
*************************************************/
.tiktok_container {
  margin: 12rem 0;
}
.tiktok_container .inner {
  padding: 6rem 0;
  border-top: 1px solid #575048;
  border-bottom: 1px solid #575048;
}
.tiktok_container .inner .contact_title {
  padding: 0 0 3rem;
}
.tiktok_container .inner .box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0 0 2rem;
}
.tiktok_container .inner .box .tiktok {
  width: 30px;
}
.tiktok_container .inner .box a {
  text-decoration: underline;
  transition: opacity 0.3s;
}
.tiktok_container .inner .box a:hover {
  opacity: 0.7;
}

/*************************************************
faq
*************************************************/
.faq_container {
  margin-top: 12rem;
  padding-bottom: 12rem;
  background: #f7f7f7;
}
@media screen and (max-width: 599px) {
  .faq_container {
    margin-top: 6rem;
    padding-bottom: 4.5rem;
  }
}
.faq_container .contact_title {
  padding-top: 6rem;
}

.faq_content {
  background: #fff;
  border-radius: 1rem;
  padding: 6.4rem;
}
@media screen and (max-width: 599px) {
  .faq_content {
    border-radius: 0;
    padding: 0 1.6rem;
    background: #f7f7f7;
  }
}

.faq_box {
  padding-top: 2rem;
}

p.question {
  margin-bottom: 0.8rem;
}
@media screen and (max-width: 599px) {
  p.question {
    line-height: 3.2;
    margin-bottom: 1.5rem;
  }
}

.question {
  font-size: 1.8rem;
  font-weight: 500;
  position: relative;
  padding-left: 4rem;
}
@media screen and (max-width: 599px) {
  .question {
    background: #cdcccb;
    border-radius: 0.5rem;
  }
}
.question::before {
  content: "";
  background: url(../images/question.svg) no-repeat;
  width: 1.8rem;
  height: 3.2rem;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 599px) {
  .question::before {
    top: 1.2rem;
    left: 1.4rem;
  }
}

.answer {
  margin: 0 5rem 1.5rem;
  padding-left: 4rem;
  position: relative;
}
@media screen and (max-width: 599px) {
  .answer {
    margin: 0;
  }
}
.answer::before {
  content: "";
  background: url(../images/answer.svg) no-repeat;
  width: 1.5rem;
  height: 3.3rem;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 599px) {
  .answer::before {
    left: 1.2rem;
  }
}

/*************************************************
slider
*************************************************/
/* 無限ループスライダー用CSS */
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider {
  width: 100%;
  height: 400px; /* 必要に応じて調整 */
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .slider {
    height: 250px;
  }
}

.slides {
  height: 100%;
  display: flex;
  position: relative;
}

.slide {
  height: 100%;
  flex-shrink: 0;
  position: relative;
  padding-left: 2%;
}

.slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/*************************************************
salon
*************************************************/
.salon-header {
  background: #F7F7F7 url(../images/contact_bg02.png) no-repeat center center/cover;
}

.salon_list_container {
  margin: 12rem 0;
}
.salon_list_container .area_block {
  margin: 6rem 0 12rem;
  text-align: center;
}
.salon_list_container .area_block .area_title {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: #EBEBEA;
  font-size: 1.8rem;
}
.salon_list_container .area_block .salon_table {
  text-align: left;
  width: 100%;
  margin: 2rem 0;
}
@media screen and (max-width: 1071px) {
  .salon_list_container .area_block .salon_table {
    width: 90%;
    margin: 2rem auto;
  }
}
.salon_list_container .area_block .salon_table tr {
  border-bottom: 1px solid #c4beb8;
}
.salon_list_container .area_block .salon_table tr:first-of-type {
  border-top: 1px solid #c4beb8;
}
.salon_list_container .area_block .salon_table tr td {
  padding: 2.5rem 1rem;
  font-size: 1.4rem;
  line-height: 1.6;
  vertical-align: middle;
}
@media screen and (max-width: 1071px) {
  .salon_list_container .area_block .salon_table tr td {
    display: block;
  }
}
.salon_list_container .area_block .salon_table tr td:nth-of-type(1) {
  width: 30%;
}
@media screen and (max-width: 1071px) {
  .salon_list_container .area_block .salon_table tr td:nth-of-type(1) {
    width: 100%;
    padding: 2.5rem 1rem 0;
  }
}
.salon_list_container .area_block .salon_table tr td:nth-of-type(2) {
  width: 50%;
}
@media screen and (max-width: 1071px) {
  .salon_list_container .area_block .salon_table tr td:nth-of-type(2) {
    width: 100%;
    padding: 1rem;
  }
}
.salon_list_container .area_block .salon_table tr td:nth-of-type(3) {
  width: 20%;
}
@media screen and (max-width: 1071px) {
  .salon_list_container .area_block .salon_table tr td:nth-of-type(3) {
    width: 100%;
    padding: 0 1rem 2.5rem;
  }
}
.salon_list_container .area_block .salon_table tr td a {
  display: inline-block;
  background-color: #575048;
  border: 1px solid #575048;
  color: #fff;
  padding: 0.5rem 2rem;
  border-radius: 9999px;
  font-size: 1.3rem;
  transition: background-color 0.3s, color 0.3s;
}
.salon_list_container .area_block .salon_table tr td a:hover {
  background-color: #fff;
  color: #575048;
}

/*************************************************
footer
*************************************************/
.footer_container {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  .footer_container {
    flex-direction: column-reverse;
  }
}

.map {
  flex-basis: 48%;
  position: relative;
  height: 0;
  padding-bottom: 36%;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  .map {
    padding-bottom: 75%;
  }
}
.map iframe {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer_right {
  flex-basis: 52%;
  padding: 3.6rem 3.2rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 599px) {
  .footer_right {
    padding: 4.2rem 1.6rem 3rem;
  }
}

.footer_logo {
  width: 8rem;
  height: 8rem;
  margin: 0 0 2% 20%;
}
@media screen and (max-width: 599px) {
  .footer_logo {
    margin-left: 2rem;
  }
}

.footer_lists {
  display: flex;
  justify-content: space-around;
  padding-top: 1.6rem;
  line-height: 2;
}
.footer_lists dt {
  flex-basis: 20%;
  margin-bottom: 1rem;
  font-weight: 300;
}
@media screen and (max-width: 599px) {
  .footer_lists dt {
    flex-basis: 24%;
    padding-left: 0.8rem;
  }
}
.footer_lists dd {
  flex-basis: 78%;
}
@media screen and (max-width: 599px) {
  .footer_lists dd {
    flex-basis: 76%;
  }
}

.copyright {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 200;
  margin: 1.6rem auto;
  padding: 0 30% 0 50%;
}
@media screen and (max-width: 599px) {
  .copyright {
    padding: 0;
    text-align: center;
  }
}

.page_copyright {
  padding: 0;
  text-align: center;
}